Ánh sáng đến từ bầu trời

Bóng phủ (Shadow) là lời chỉ dẫn vô giá cho bộ não con người rằng chúng ta đang nhìn thấy cái gì

Đây có lẽ là điều quan trọng mà dễ hiểu nhất để học UI. Ánh sáng thường xuyên và luôn luôn đến từ bầu trời đến nỗi, bất cứ khi nào nó đến từ chiều hướng ngược lại đều gây một cảm giác ghê sợ (hình dưới).

Chẳng khác nào quỷ đứng trước của nhà bạn

Khi ánh sáng đến từ bầu trời, nó luôn chiếu sáng phẩn trên và tạo ra bóng phủ (shadow) bên dưới vật thể. Phần trên luôn luôn sáng và phần dưới luôn luôn tối.

Quy luật này cũng đúng cho UI. Giống như mọi bóng phủ trong đời thật, mọi chi tiết trong UI design luôn có bóng phủ ở bên dưới. Màn hình của chúng ta là phẳng, và bóng phủ làm cho mọi vật như hiện diện ở trạng thái 3 chiều.

Hãy nhìn những nút này, trông chúng có vẻ rất phẳng, nhưng luôn có những chi tiết về ánh sáng ở đây

1. Nút khi chưa được nhấn xuống có một bóng phủ ở phần dưới. Ánh sáng tự nhiên không chiếu đến phần đó
2. Nút chưa được ấn có sáng hơn ở phẩn trên.
3. Nút chưa được ấn tạo ra một hiệu ứng rất thông minh khiến chúng ta cảm giác nó giống hình mô tả bên tay phải
4. Nút đã ấn ở dưới, mặc dù phần dưới vẫn tối hơn phần trên, nhưng đã tối hơn trên toàn bề mặt. Điều đó tạo cảm giác giống đời thực khi nó bị ấn sát vào tường và nhận được ít ánh sáng hơn (hình bên phải)

Bạn thấy đấy, chỉ là một cái nút, nhưng đã chứa đến 4 yếu tố về ánh sáng. Hãy ghi nhớ điều này như là bài học đầu tiên. Bạn sẽ ngạc nhiên khi gặp lại bài học ở mọi chi tiết về UI xung quanh mình.

Đây là UI của IOS6 phần Setting: Do Not Disturb và Notifications. Không có gì to tát cả đúng không :) Hãy thử điểm qua những chi tiết về ánh sáng ở hình trên

1. Phần khung trên (insert control panel) có một bóng phủ nhỏ.
2. "ON" slider cũng có một ít bỏng phủ.
3. "ON" slider là lõm và phần dưới sáng hơn phần trên.
4. Icon hơi tối một chút, tuy nhiên có một đường viền sáng ở phần trên. Đó là tượng trưng cho bề mặt nhận ánh sáng, và phản chiếu vào mắt của bạn
5. Vạch phân chia được phủ trong bóng tối và "nép" tránh ánh sáng mặt trời.

( phần này người dịch để nguyên tên tiếng Anh của các element )

Dưới đây là những UI element luôn chìm

• Text input fields
• Pressed buttons
• Slider tracks
• Radio button (unselected)
• Checkboxes

... và những element luôn nổi

• Buttons (unpressed)
• Slider buttons
• Dropdown controls
• Card
• The button part of a selected radio button
• Popups

Bạn đã hiểu ra rồi chứ :)

Chờ đã, thế cái gì gọi là thiết kế phẳng (Flat Design) ?

IOS7 khuấy động cộng đồng tech bởi phong cách UI "flat design" của nó: đường kẻ đơn, hình dáng đơn và màu sắc đơn

Nhưng bạn sẽ nhanh chóng nhận ra, cũng như tôi đang gọi phong cách design này, là "flatty design", chứ không hoàn toàn là "flat". Vẫn rất đẹp và đơn giản, nhưng luôn có những bỏng phủ và những gợi ý cho chỗ nào cần ấn, cần click hay cần trượt.

Chác bạn cũng chẳng xa lạ gì với Material Design của Google. Tôi nghĩ Material Design là phong cách phản ánh rất thực những tính chất vật lý trong đời thực. Bạn hãy thử xem những hướng dẫn của Google để tạo ra những độ sâu khác nhau thông qua việc tạo những bóng phủ với mức độ khác nhau

Tôi sẽ nói Material Design sử dụng những kỹ thuật rất tài tình để thể hiện thông tin về vật thể như là thế giới thực của chúng ta

Flatty đã là xu hướng của tương lai. Flat ư? đó là quá khứ của những năm 2006!