Thiết kế phẳng là gì | Hướng dẫn thiết kế

Thiết kế phẳng là gì

Thuật ngữ thiết kế phẳng mới được phổ biến trong vài năm trở lại đây nhưng đã nhanh chóng trở thành một xu hướng chủ đạo của tương lai. Sắp tới đây, thiết kế phẳng sẽ lại xuất hiện một lần nữa trên một trong những sản phẩm đình đám nhất của giới công nghệ chính là iOS 7. Vậy thiết kế phẳng là gì? Và tại sao nó lại trở thành xu hướng của công nghệ trong tương lai.

 

00-thiet-ke-phong-cach-toi-gian

 

Để giải thích cho triết lý thiết kế này, nhiều người gắn liền nó với giao diện Metro UI trên Windows 8 nhưng phần lớn chúng ta vẫn chưa hiểu rõ cũng như tại sao nó lại trở thành xu hướng thiết kế hiện tại. Thiết kế phẳng nhấn mạnh vào sự đơn giản tối đa và đi ngược lại hoàn toàn so với triết lý thiết kế mô phỏng (skeuomorphic) đề cao cái đẹp và đồ họa phức tạp. Thiết kế phẳng ra đời từ trước khi Microsoft phát triển Windows 8 nhưng không thể phủ nhận rằng Microsoft đã góp phần phổ biến nó rộng rãi hơn.

 

Thiết kế phẳng là gì?

 

Về định nghĩa, thiết kế phẳng là một phương pháp không sử dụng thêm bất kỳ hiệu ứng nào trong thiết kế như đổ bóng, góc xiên, dập nổi, độ dốc cùng các yếu tố khác góp phần tạo nên độ sâu, nét nổi bật của thiết kế trên màn hình để tạo nên những hình ảnh đơn giản hơn. Bản thân cái tên “phẳng” của kiểu thiết kế này cũng đã bao hàm ý nghĩa không chứa những yếu tố 3D. Thiết kế phẳng cũng được coi là có họ hàng với Minimalist, một phong cách thiết kế theo trường phái tối giản

 

Thiết kế phẳng (flat design) được coi là một triết lý thiết kế theo chủ nghĩa tối giản, tức mọi thành phần đồ họa được làm cho đơn giản nhất với những đặc tính như màu sắc rõ ràng, góc cạnh, không gian mở và tất cả được thể hiện dạng hai chiều. Một ví dụ điển hình về giao diện phẳng mà bạn có thể thấy rõ nhất là Metro UI trên hệ điều hành Windows 8 của Microsoft hoặc giao diện trên hệ điều hành Windows Phone. Ở màn hình chính, bạn sẽ thấy một giao diện với những mảng màu tách biệt nhau hoàn toàn, chúng không được thiết kế dạng ba chiều hay dạng mô phỏng (skeuomorphic) mà ở đó sự đơn giản được đặt lên hàng đầu.

 

Triết lý thiết kế này ra đời gắn liền với phong cách tối giản (minimalist) tuy nhiên sự đơn giản không có nghĩa thiết kế phẳng gây nhàm chán cho người dùng. Trong triết lý thiết kế phẳng, những thành phần đồ họa đẹp mắt và chi tiết được xem như là không cần thiết. Nếu một yếu tố nào đó coi như không có tác dụng thì nó sẽ gây rắc rối cho trải nghiệm người dùng. Đây chính là lý do mà sự tối giản được đề cao trong thiết kế phẳng. Hơn thế nữa, các màu sắc có độ tương phản cao sẽ gây sự chú ý tốt hơn và hướng mắt người dùng tới vị trí đó.

 

Thiết kế mô phỏng là gì?

 

01-thiet-ke-mo-phong

 

Để hiểu được thiết kế phẳng và lý do nó lên ngôi thì bạn cũng nên hiểu thêm về triết lý mà nó chống lại: thiết kế mô phỏng. Nếu bạn chưa nghe tới kiểu thiết kế mô phỏng (skeuomorphic) này là gì thì đó là phong cách vận dụng những cái thực tế vào trong một thiết kế nào đó. Để cho dễ hiểu hơn, biểu tượng của đồng hồ sẽ giống như chiếc đồng hồ ngoài đời thực, biểu tượng máy tính sẽ có hình dáng của một máy tính thông thường... và hơn thế nữa. Nếu như Microsoft được biết đến với thiết kế phẳng thì Apple lại rất ưa chuộng thiết kế mô phỏng trên những sản phẩm phần mềm gần đây của hãng. Không chỉ có vậy, Apple vận dụng khá nhiều và hiệu quả triết lý thiết kế này, phần nào giúp những phần mềm của họ nổi bật và đẹp mắt hơn. Hình ảnh bên trên là những ví dụ điển hình về skeuomorphic tại Apple.

 

Thiết kế phẳng là giải pháp cho những vấn đề của thiết kế mô phỏng

 

Dù được đầu tư nhiều với giao diện ba chiều đẹp mắt nhưng thiết kế mô phỏng không phải không có vấn đề. Triết lý này dựa hoàn toàn vào những vật thể trong đời sống hàng ngày vì thế nó phần nào làm hạn chế sức sáng tạo cũng như tính hiệu quả trong thiết kế. Bên cạnh đó, các thành phần thiết kế không đồng nhất khi kết hợp với những thành phần thiết kế hai chiều hoặc ít "chiều" hơn. Đôi khi thiết kế mô phỏng chẳng mang lại ý nghĩa gì cả, lấy ví dụ với ứng dụng Find My Friends (tìm bạn bè xung quanh), nền của nó được làm để giống da thuộc màu vàng kem nhưng nó chẳng có chút thực tế nào cả. Ngoài ra, nó sẽ trở nên khập khiễng khi kết hợp với những yếu tố khác không được làm theo hiệu ứng mô phỏng.

 

 02-thiet-ke-mo-phong

 

Giải thích hình ảnh: Trong hình là cửa sổ widget của OS X với các widget được thiết kế mô phỏng theo đồ vật trong thực tế. Đồng hồ được làm giống với một chiếc đồng hồ thật nhưng nó gây khó khăn khi xem giờ hơn là bảng hiển thị điện tử. Widget máy tính cũng khó sử dụng hơn là tính toán trực tiếp với Spotlight.

 

Dựa vào những vấn đề của triết lý thiết kế mô phỏng mà thiết kế phẳng ra đời với hai hướng đi hoàn toàn khác nhau. Toàn bộ những giới hạn và điểm yếu của triết lý mô phỏng đều được loại bỏ trên thiết kế phẳng để mang lại trải nghiệm người dùng đơn giản và hiệu quả hơn. Những năm 1984 khi Apple giới thiệu giao diện đồ họa người dùng (GUI) đầu tiên thì thiết kế mô phỏng bắt đầu được ứng dụng nhiều để giúp người dùng quen với các khái niệm lạ lẫm trên máy tính (hãy nghĩ tới thư mục, desktop, thùng rác...) nhưng sau này, khi máy tính đã quá phổ biến thì người ta không cần tới những mô phỏng để hiểu chức năng của một biểu tượng hay một nút nào đó. Thiết kế mô phỏng bắt đầu trở nên thừa thãi. Những người theo chủ nghĩa hiện đại cho rằng đừng nên thêm những chi tiết mà không có chức năng gì vào trong một thiết kế ngày nay.

Thiết kế nội thất

 

 

Tại sao thiết kế phẳng lại lên ngôi?

 

1. Tính đơn giản

 

Như đã nói ở trên, đặc điểm nổi bật nhất của thiết kế phẳng đó là tính đơn giản. Đây cũng chính là ưu điểm vượt trội nhất của kiểu thiết kế này. Tính đơn giản của thiết kế phẳng tạo điều kiện cho các nhà thiết kế dễ dàng hơn trong việc tạo ra các sản phẩm của mình. Thay vì tập trung vào các hiệu ứng và hình ảnh bắt mắt cho sản phẩm thiết kế của mình thì họ chỉ cần chú ý vào những yếu tố ít phức tạp hơn.

 

Một trong số đó là màu sắc, yếu tố có thể được coi là chủ đạo của phong cách thiết kế này. Hãy thử lấy Windows Phone làm ví dụ: Những cửa sổ với nhiều màu sắc đơn giản và dễ thiết kế hơn rất nhiều so với những biểu tượng của iOS hoặc Android. Thay vì phải tự thiết kế ra hình ảnh cho sản phẩm của mình thì các nhà thiết kế chỉ đơn giản chọn lấy một tông màu sau đó áp dụng một số hiệu ứng nhất định. Ngoài ra, cách kết hợp giữa các tông màu với nhau trong một thiết kế cũng được cho là đơn giản hơn so với yêu cầu phải tạo ra các hình ảnh có tính liên quan và tương đồng.

 

2. Gây hiệu ứng mạnh và mang tính hiệu quả cao

 

Sử dụng màu sắc để làm nền, thiết kế phẳng còn mang theo tính tích cực đối với người dùng bởi họ sẽ không bị rối mắt trước một loạt các hình ảnh mang tính 3D như vẫn thường thấy. Giao diện thiết kế phẳng thường đặt tính hiệu quả lên trên tính đẹp mắt. Các nút chọn trong thiết kế phẳng không cần phải thiết kế quá nhiều và quá phức tạp. Chỉ cần mọi thứ được phân định rõ ràng thì cũng sẽ đem lại hiệu quả cho người dùng.

 

Không những thế, việc sử dụng nhiều màu sắc bắt mắt còn có thể góp phần gây chú ý cũng như tạo hiệu ứng mạnh hơn đối với người dùng. Đặc biệt là khi nhà thiết kế biết cách phối tông hiệu quả với những gam đối lập mạnh như trắng và đen. Đó có lẽ là điều mà Johny Ive đang muốn định hướng cho iOS 7 sắp được ra mắt trong thời gian tới đây.

 

Ngoài màu sắc, thiết kế phẳng cũng có khả năng tạo ấn tượng với người dùng thông qua yếu tố khác đó là Typography. Có rất nhiều định nghĩa về Typography trong thiết kế, tuy nhiên, để bạn đọc dễ hình dung chúng ta hãy tạm hiểu Typography là các sắp xếp các phông chữ cách điệu theo một trật tự hoặc quy luật riêng để khiến người khác phải chú ý.

 

Typography lại là một trong những lý do mang lại tính hiệu quả cho thiết kế phẳng bởi với kiểu thiết kế này người dùng sẽ có được nhiều thông tin hơn thay vì chỉ nhìn vào những biểu tượng đẹp mắt rồi thôi. Những ai đã từng sử dụng qua giao diện của Windows Phone hoặc Windows 8 có thể dễ dàng nhận thấy điều này. Việc có thể xem trực tiếp thông tin ứng dụng mà không cần phải mở ứng dụng đó lên thực sự là trải nghiệm mới lạ và tiện dụng.

 

3. Khắc phục điểm yếu của thiết kế Skeuomorphic (phong cách mô phỏng giả chất liệu)

Skeuomorphic là phong cách thiết kế mô phỏng sao cho giống thật nhất có thể bằng cách sử dụng các hình ảnh dễ liên tưởng đến vật thể thực tế cũng như áp dụng các hiệu ứng tạo độ sâu. Hãy cùng xem qua các ví dụ ở dưới đây để thấy rõ hơn điều đó.

 

Những nguyên tắc của thiết kế phẳng

 

04-nguyen-tac-thiet-ke-phang

 

Cái tên thiết kế phẳng bắt nguồn từ hình dạng của nó, tức hai chiều và dạng phẳng đơn thuần. Ý tưởng về triết lý này được hình thành mà không có các thành phần bao gồm hiệu ứng đổ bóng, góc xiên, đường gờ rập nổi, nền dạng hạt (không mịn) hoặc những công cụ khác tạo chiều sâu cho thiết kế đó. Không có bất cứ thành phần nào bên trên được cho vào trong thiết kế phẳng nhằm mục đích mô phỏng thực tế cả. Thiết kế phẳng không có những hiệu ứng thêm vào.

 

05-thiet-ke-icon-bieu-tuong-chuong-trinh

 

Thiết kế phẳng sử dụng nhiều thành phần giao diện người dùng đơn giản như các nút chức năng hay các biểu tượng chương trình (icon). Những nhà thiết kế chủ yếu dùng các dạng hình phổ biến gồm hình chữ nhật, hình tròn hoặc hình vuông cho thiết kế phẳng, điều này giúp chúng có thể đứng riêng biệt với nhau. Không nhất thiết phải cắt góc vuông mà những dạng hình trong triết lý thiết kế này có thể được uốn cong mềm mại. Người dùng có thể dễ dàng chạm hoặc bấm vào những thành phần giao diện này mà không gặp rắc rối gì, nó được làm cho trực quan để người dùng không có nhiều kiến thức về thiết kế có thể hiểu được. Thành phần đơn giản được sử dụng chủ yếu trong thiết kế phẳng.

 

06-thiet-ke-typography

 

Vì tính đơn giản trong các thành phần thiết kế phẳng nên việc sắp xếp ký tự nghệ thuật (typography) cũng đặc biệt quan trọng. Kiểu typeface phải phù hợp với giao diện tổng thể của thiết kế đó, nói cách khác thiết kế phẳng đơn giản thì kiểu chữ, font chữ được sử dụng cũng phải đơn giản để phù hợp với không gian chung. Vì thế, thiết kế phẳng cũng cần phải tập trung vào typography bên cạnh những thành phần đồ họa.

 

07-thiet-ke-do-hoa

 

Màu sắc là yếu tố đặc biệt quan trọng trong thiết kế phẳng. Màu sắc ở đây thường đậm và khá đa dạng về màu sắc so với những kiểu thiết kế trước đây. Trong khi hầu hết các bảng màu (palette màu) sử dụng hai hoặc ba màu sắc thì bảng màu trong thiết kế phẳng sử dụng từ 6 tới 8 màu sắc. Ngoài ra, màu sắc có độ bão hòa cao và khá rực rỡ. Màu sắc cũng được đề cao như typography.

 

Thiết kế phẳng đang là trào lưu

 

Dù thiết kế phẳng đang được ứng dụng ngày một nhiều trong thiết kế nhưng nó không phải là mãi mãi khi một triết lý mới sẽ thay nó trong tương lai. Chúng ta chưa thể đoán xu hướng nào sẽ lên ngôi sau thiết kế phẳng nhưng hãy cứ hài lòng với hiện tại, với thiết kế phẳng. Dù Apple chưa khẳng định nhưng tin đồn cho rằng iOS 7 sẽ đi theo triết lý này và khác hoàn toàn so với phiên bản iOS hiện tại. Chúng ta có thể đoán ra được điều đó bởi Apple đã thay quản lý trưởng mảng iOS cũ là Scott Forstall bởi Jony Ive, nhà thiết kế quan trọng bậc nhất của họ.

 

Các khuyết điểm của thiết kế mô phỏng

 

- Giao diện đôi khi khó quan sát: Như biểu tượng chiếc đồng hồ mà Apple sử dụng ở hình ảnh bên trên. Rõ ràng khi xem hình ảnh chiếc đồng hồ như thế này chúng ta sẽ mất thời gian hơn hẳn so với loại đồng hồ số chỉ có giờ và phút.

- Cách thức mô phỏng đôi khi gây khó nhà phát triển: Việc tìm ra cũng như tạo dựng hình ảnh trong Skeuomorphic gây ra không ít khó khăn cho các nhà thiết kế.

- Tốn nhiều không gian màn hình thiết bị di động cho các trang trí không cần thiết: Đây là một thực tế của thiết kế Skeuomorphic vốn đặt nằng tính hình ảnh với các trang trí bắt mắt. Chẳng hạn như ảnh thiết kế của giao diện lịch bên trên, người dùng thường chỉ muốn biết hôm nay là ngày bao nhiêu, thứ mấy. Không nhất thiết phải hiển thị cả một tháng như một tấm lịch thực sự.

- Hạn chế sự sáng tạo: Thiết kế Skeuomorphic vốn lấy hình mẫu là những vật ngoài thực tế. Thế nên các nhà thiết kế không cần phải tưởng tượng nhiều về thứ mà mình định làm ra mà chỉ nghĩ cách làm sao cho giống nhất có thể. Và khả năng cao là sẽ có nhiều “ý tưởng lớn gặp nhau” với một chút khác biệt nhỏ.

- Tồn nhiều tài nguyên phần cứng: Việc áp dụng nhiều hiệu ứng trong thiết kế Skeuomorphic cũng là một khuyết điểm của phong cách này bởi như thế sẽ khiến các thiết di động vốn yếu ớt về sức mạnh phần cứng, ít ỏi về thời lượng pin sẽ phải dồn sức để thể hiện Skeuomorphic trên màn hình.

 

Những nhược điểm trên có thể hoàn toàn được khắc phục với thiết kế phẳng với những điều đã mô tả ở trên.

  

Tạm kết

 

Phong cách “giả chất liệu” (Skeuomorphic) đã có tuổi đời được 33 năm với sứ mệnh tạo ra sự liên kết giữa các vật liệu cũ, quen thuộc và một thứ hoàn toàn mới và khó dùng như máy tính nhằm giúp người dùng nắm bắt dễ dàng hơn với công nghệ.

 

Tuy vậy, thời đại ngày nay đã khác, sự phát triển phong phú của các thiết bị di động cùng với khả năng nắm bắt nhanh các thiết bị công nghệ của người dùng đang khiến Skeuomorphic dần thoái lui. Và thiết kế phẳng sẽ có nhiệm vụ thay thế Skeuomorphic đã lỗi thời như một quy luật tất yếu của sự tiến hóa.