Flat Design vs Material Design

Flat Design vs Material Design
Flat Design vs Material Design

Flat DesignMaterial Design là hai phong cách thiết kế nổi bật trong giai đoạn hiện nay. Mặc dù không phải designer, chúng ta vẫn cần một chút hiểu biết về chúng.

Skeuomorphism

Thuật ngữ “Skeuomorphism” xuất phát từ tiếng Hy Lạp: “skéuos” (vật chứa hoặc công cụ) và “morphḗ” (hình dạng). Kết hợp lại, nó có nghĩa là một cái gì đó để chứa một hình dạng? Theo Wikipedia, “Skeuomorph” nghĩa là một đối tượng được tạo mới nhưng vẫn giữ cấu trúc, đặc điểm thiết kế cần thiết của bản gốc, ngay cả những chức năng không cần thiết lắm.

Đơn giản hơn, Skeuomorphism là phong cách thiết kế mô phỏng các vật liệu quen thuộc. Nhằm gợi cảm giác quen thuộc hoặc thoải mái ở người tiêu dùng.

Ứng dụng iCal
Ứng dụng iCal

Tuy nhiên, đôi lúc việc mô tả tỉ mỉ một đối tượng thực tế cũng gây phiền hà cho người dùng. Các bạn có thể xem ví dụ bên dưới, về giao diện chúng ta không thể chê bai ở 1 điểm nào. Tuy nhiên, đối với những người không chuyên, để tùy chỉnh được ứng dụng này sẽ giống một cơn ác mộng.

Do sự lên ngôi của các thiết bị di động và laptop có màn hình nhỏ trong nhiều năm trở lại đây. Cùng với nhịp sống ngày càng hối hả, bận rộn hơn. Có lẽ vì vậy, chúng ta cần những phong cách thiết kế khác, gọn gàng, xúc tích hơn so với phong cách của Skeuomorphism.

Đáp ứng nhu cầu đó, Flat Design và Material Design được ra đời.

Flat Design

Flat Design
Flat Design

Flat design (thiết kế phẳng) hiện đang là xu hướng thiết kế UI trong một vài năm gần đây. Xu hướng này thực sự bùng nổ khi Microsoft cho ra mắt phiên bản Windows 8 với phong cách thiết kế Metro design (tiền thân của Flat design) và Khi Apple trình làng iOS7. Hiện nay, xu hướng thiết kế phẳng đang có một tầm ảnh hưởng rất lớn đến ngành công nghiệp thiết kế.

Ngày càng nhiều người ưa chuộng Flat design. Việc này kéo theo có rất nhiều frameworks UI được dựa trên nó.

Một số đặc điểm của Flat Design

Dưới đây là một số đặc điểm nổi bật của phong cách thiết kế Flat Design.

Không hiệu ứng

Giống như tên gọi của nó, tất cả các thành phần của bản thiết kế sẽ chỉ nằm trên một mặt phẳng, không hề có những hiệu ứng tạo cảm giác 3D như đổ bóng, dập nổi, chất liệu,… Hoàn toàn không có bất kì chi tiết nào khiến cho bản thiết kế trở nên “thật” hơn.

Flat Design
Flat Design

Chi tiết đơn giản

Flat design chỉ sử dụng những yếu tố giao diện đơn giản như các button và icon. Các nhà thiết kế sẽ đưa vào bản thiết kế những hình dạng đơn giản hoặc những hình đa giác đứng tách biệt, những hình này có thể có đường viền hoặc được bo góc.

Safari Icon
Safari Icon

Tập trung vào Typography

Chính vì lí do những chi tiết trong Flat design quá đơn giản nên phần Typography đặc biệt được chú trọng. Các Font chữ được sử dụng trong Flat design thường không cầu kì và có những nét rất đậm, chủ yếu là các font Sans Serif, nội dung của phần typography sẽ đi thẳng vào vấn đề.

Flat Design
Flat Design

Tập trung vào màu sắc

Với Flat design, màu sắc là đặc biệt quan trọng và đóng góp không nhỏ cho sự thành công của phong cách thiết kế này. Nếu như với các phong cách thiết kế khác, số lượng màu được sử dụng chỉ dừng lại ở con số 2 hoặc 3, thì với Flat design, con số này tăng lên gấp đôi, thậm chí là gấp ba, từ 6 đến 8 màu. Đặc biệt, Flat design sử dụng những tông màu sáng, sắc độ màu sống động, những màu mang hơi hướng retro như cam, tím,… được thấy rất nhiều.

Flat Design
Flat Design

Flat Design 2.0

Một phiên bản mới của Flat Design đã được cập nhật vào cuối năm 2014 với tên gọi là Flat 2.0. Với phiên bản này, bóng tối và gradient được sử dụng một cách khéo léo nhằm nâng cao trải nghiệm của người dùng.

Các phiên bản của Flat Design
Các phiên bản của Flat Design

Một vài tài nguyên dựa trên Flat Design

Material Design

Material Design
Material Design

Material design là một ngôn ngữ thiết kế. Nó được Google giới thiệu vào ngày 25 tháng 6 năm 2014, tại hội nghị Google I/O 2014.

Material design là những lớp Flat xếp chồng lên nhau, tạo chiều sâu và điểm nhấn hơn thiết kế phẳng thông thường. Cũng như Flat design, Material design chủ yếu tập trung vào những đường nét đơn giản, sử dụng những gam màu đậm, nổi bật. Đồng thời, chúng thường sử dụng những yếu tố đồ họa có cảm giác 3D, có hiệu ứng ‘nổi’ trên giao diện.

Ngoài ra, thiết kế này còn bao gồm những chuyển động tự nhiên, như khi các nút, menu hiện trên màn hình chẳng hạn. Tất cả đều nhằm mục đích mang lại cho người dùng trải nghiệm mới mẻ hơn, thú vị hơn và gần gũi với đời thực.

Một số đặc điểm của Material Design

Không gian 3 chiều

Không gian dưới lớp kính màn hình được mô phỏng như một không gian 3 chiều Oxyz với chiều sâu là trục Oz như trong hình minh họa. Để thể hiện yếu tố này, chúng ta sử dụng yếu tố ánh sáng.

Không gian 3 chiều
Không gian 3 chiều

Ánh sáng

Được sử dụng để thể hiện tính 3 chiều của không gian. Hệ quả của ánh sáng, hiệu ứng bóng đổ, sẽ phân định vị trí các lớp Material trong không gian theo trục Oz.

Có 2 loại nguồn sáng được kết hợp:

  • Nguồn sáng chiếu trực tiếp: nguồn sáng này rất quan trọng. Giống như nguồn sáng từ đèn pin, hiệu ứng của nó sẽ là Drop shadow. Nguồn sáng này cùng chiều nhưng có hướng nghiêng một chút so với trục Oz.
  • Ánh sáng môi trường: ánh sáng của toàn không gian, nguồn sáng không rõ hướng. Hệ quả ở đây sẽ là một viền bóng nhẹ xung quanh Material.

Material Design kết hợp 2 nguồn sáng này để tạo nên một hiệu ứng bóng tổng hợp mô phỏng thế giới trực quan.

Ánh sáng
Ánh sáng

Material

Là những mặt phẳng có độ dày đồng nhất 1dp, Material nằm song song với mặt phẳng Oxy.

Material
Material

Các mặt phẳng Material sắp xếp chồng lên nhau theo trục Oz. Thông qua việc thay đổi kích thước của bóng, bạn sẽ dễ dàng mô tả vị trí tương đối của mỗi lớp so với các lớp khác.

Một vài tài nguyên dựa trên Material Design

Material Design
Material Design