Có gì mới trong Windows 10 – Design #3

Iconographic

Không còn các Appbar Icon với khung tròn bao quanh và nét vẽ đậm. Icon mới trong Windows 10 sẽ là những nét mảnh 2px, thiết kế phẳng đẹp và đơn giản giúp tăng diện tích trống của icon hơn so với Windows 8. Điểm đặc biệt là các icon giảm tối đa canh lề (margin), làm giảm khoảng cách giữa các thành phần trong app, tăng khoảng trống trong app.

Iconography list
Iconography list
2px brush
2px brush

Magic number

Từ này chắc không dịch vì ai cũng hiểu :D. Magic number là 1 con số đơn vị nhỏ nhất khi thiết kế các icon, typography, … Khi design page, nên dùng kích thước, canh lề, icon, cỡ chữ … là bội số của magic number này để đạt hiệu quả tốt về giao diện như chữ hình mượt hơn, vị trí kích cỡ các thành phần đúng như mong muốn.

Trong Windows 8, magic number là 10. Điều này làm design của Windows/WP 8 khá to, khoảng cách các thành phần cũng lớn, đồng thời khiến việc đảm bảo mọi thứ là bội của 10 rất khó với developer. Trong Windows 10, magic number là 4

Magic Number in Windows 10 is 4
Magic Number in Windows 10 is 4

Effective Pixel – Scaling Algorithm

Khái niệm về đơn vị kích thước mới trong Windows 10 là epx – Effective Pixel, không còn là pixel như trước đây.

Epx như một cái ô bao trùm lên đơn vị pixel vật lý cũ. Do đặc trưng đa nền tảng của Windows 10, việc cố định 1 kích thước số pixel vật lý nhất định sẽ gây khó khăn khi phải design cho nhiều thiết bị. Ví dụ cùng 1 hình chữ nhật 4x4px trên thiết bị 1080×1920 lại nhỏ hơn trên thiết bị 480×854 do kích thước và mật độ pixel khác nhau.

Effective Pixel
Effective Pixel vs Physical Pixel

Vậy 1 epx = ? px

Đây chính là việc của Scaling Algorithm. Thuật toán của Windows 10 tự động scale giá trị epx trong app thành giá trị thực hiển thị trên nhiều thiết bị khác nhau. Ứng với mỗi giá trị kích thước, mật độ điểm, độ phân giải của từng màn hình sẽ cho ra giá trị scale khác nhau phù hợp.

Đây là thuật toán đã được cài đặt bên trong Windows 10, hiện tại thì không thể và cũng không nên thay đổi nó. Bạn chỉ cần thiết kế kích thước theo màn hình mà bạn thấy phù hợp, các màn hình khác sẽ tự động dùng thuật toán trên và scale cho phù hợp.

Scaling Algorithm
Scaling Algorithm

Input Intelligence

Với cùng 1 control, với cách tương tác khác nhau sẽ có hiệu ứng khác nhau.

Khi dùng chuột mở 1 menu như hình, khoảng cách các item và kích thước menu nhỏ hơn so với khi dùng ngón tay, do khi dùng chuột độ chính xác khi chọn sẽ cao hơn khi dùng ngón tay. Giãn khoảng cách các item giúp tăng độ chính xác khi chọn.

Với control DatePicker, khi dùng chuột sẽ hiện thêm 2 dấu mũi tên di chuyển trên và dưới, phù hợp với cả các loại chuột không thể scroll. Còn khi dùng cảm ứng tay sẽ không có các mũi tên này vì dùng tay scroll đã là rất tiện, khoảng cách các item cũng lớn hơn.

Input intelligence
Mouse input vs Touch input

                                                                                                           

Nguồn: http://www.microsoftvirtualacademy.com/training-courses/a-developers-guide-to-windows-10

Trao đổi thêm nhé

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.