Material Design là một phong cách thiết kế được Google giới thiệu vào năm 2014. Để tìm hiểu kỹ hơn Material Design được xây dựng dựa trên nền tảng gì và có đặc tính ra sao, RGB xin giới thiệu với bạn đọc loạt bài viết phân tích được việt hóa từ nguồn của Google. Tiếp tục dưới dây là phần tiếp theo của loạt bài, xem lại bài 1 nếu bạn bị bỏ lỡ: Material Design (kỳ 1): Giới thiệu
[quote] Môi trường [/quote]
Thế giới 3D
Các môi trường của material là không gian 3D, nghĩa là tất cả các đối tượng đều có trục x,y,z. Trục z vuông góc với mặt phẳng của màn hình, trục z dương mở rộng về phía người xem, mỗi tấm material chiếm một vị trí riêng biệt dọc theo trục z và có độ dày tiêu chuẩn là 1dp.
Trên trang web, các trục z được sử dụng để tạo lớp chứ không phải cho phối cảnh. Thế giới 3D được mô phỏng bằng các thao tác trên trục y.
— Không gian 3D cùng với các trục x,y,z
Ánh sáng và bóng tối
Trong môi trường material, ánh sáng ảo chiếu sáng màn hình. Ánh sáng chính tạo ra hướng bóng tối, trong khi ánh sáng xung quanh tạo bóng đổ nhẹ từ mọi góc độ. Bóng tối trong môi trường material được đúc từ hai nguồn ánh sáng. Trong sự phát triển Android, bóng xảy ra khi nguồn sáng bị chặn bởi các tấm material tại các vị trí khác nhau dọc theo trục z. Trên trang web, bóng được vẽ bởi các thao tác chỉ trên trục Y. Ví dụ dưới đây cho thấy các tấm thẻ với chiều cao 6dp.
— Bóng tạo ra bởi ánh sáng chính
— Bóng tạo ra bởi ánh sáng xung quanh
— Sự kết hợp từ ánh sáng chính và ánh sáng xung quanh.
[quote] Các thuộc tính của material [/quote]
Material có đặc tính nhất định không thay đổi và những trạng thái vốn có. Hiểu được những đặc tính này sẽ giúp cho bạn thao tác các material theo một cách thức phù hợp với Material Design.
Các thuộc tính vật lý
Material có độ dài x và y thay đổi được (đo bằng đơn vị dp) và độ dày cố định (1dp).
— DO: Chiều cao và chiều rộng của material có thể thay đổi được.
— Material luôn luôn dầy 1dp
Material tạo ra bóng. Bóng được tạo ra một cách tự nhiên bởi độ cao tương đối (vị trí của z) giữa các yếu tố material.
Do: Bóng miêu tả độ cao tương đối giữa các material
[youtube]http://www.youtube.com/watch?v=_EHNL2SXI3s[/youtube]
Don’t: Bóng không bao giờ giống với màu sắc của material.
[youtube]http://www.youtube.com/watch?v=Z-4ohiFv2No[/youtube]
Nội dung được hiển thị trên material, qua bất kì hình dạng và màu sắc nào. Nội dung không tạo ra độ dày cho material.
Do: Nội dung có thể hiển thị trên bất kì màu sắc và hình dạng nào.
[youtube]http://www.youtube.com/watch?v=SkWBCyn23Ak[/youtube]
Don’t: Trạng thái của nội dung có thể không phụ thuộc vào trạng thái của material.
[youtube]http://www.youtube.com/watch?v=7S28F9gRvwQ[/youtube]
Material là một khối rắn chắc
— Do: Những sự kiện đầu vào chỉ tác động đến materia cận cảnh.
— Don’t: Những sự kiện đầu vào không thể xuyên qua material
Nhiều yếu tố material không thể chiếm cùng một điểm không gian trong cùng một lúc.
— Do: Sử dụng độ cao để tách các yếu tố material là một phương pháp để tránh khỏi việc các yếu tố material chiếm cùng một điểm không gian trong cùng một lúc.
— Donn’t: Các yếu tố material không thể chiếm cùng một điểm không gian trong cùng một lúc.
Material này không thể xuyên qua vật liệu khác
Ví dụ lớp material này không thể xuyên qua lớp material khác để thay đổi độ cao của chúng
Don’t: Material không thể xuyên qua material khác.
[youtube]http://www.youtube.com/watch?v=ZkQaiPR3LnE[/youtube]
[quote] Sự biến đổi material [/quote]
Material có thể biến đổi hình dạng
[youtube]http://www.youtube.com/watch?v=HEp2hjNWQPI[/youtube]
Do: Material chỉ có thể to lên và nhỏ lại dọc theo mặt phẳng của nó
[youtube]http://www.youtube.com/watch?v=5jmedKZbScM[/youtube]
Material không bao giờ uốn cong hoặc gấp lại.
[youtube]http://www.youtube.com/watch?v=6H2epx1kfW8[/youtube]
Các lớp material có thể nối liền với nhau và trở thành một lớp riêng biệt.
[youtube]http://www.youtube.com/watch?v=mwkRL3FE8JU[/youtube]
Khi tách rời, material có thể liền lại. Ví dụ, nếu bạn dịch chuyển một phần material của một lớp material, lớp material đó sẽ trở lại toàn bộ như ban đầu.
[youtube]http://www.youtube.com/watch?v=38T4Hgd8tMg[/youtube]
[quote] Sự chuyển động của material [/quote]
Material có thể được sinh ra hoặc bị phá hủy một cách rất tự nhiên trong bất kì môi trường nào.
[youtube]http://www.youtube.com/watch?v=H84W320nrrg[/youtube]
Material có thể di chuyển dọc theo bất kì trục nào.
[youtube]http://www.youtube.com/watch?v=dkvLjRDAm-A[/youtube]
Sự chuyển động của trục z tiêu biểu cho sự tương tác của người dùng với material.
[youtube]http://www.youtube.com/watch?v=8e0tn9mAhi0[/youtube]
Xem lại bài 1: Material Design: Giới thiệu
Nguồn: design.google.com | Dịch & biên tập: Trang Đài | BTT RGB.vn
Nhập hội Sáng tạo cùng RGB nha!