Thiết kế phẳng là gì?
Didu
8 nămBình luận: 502
Squirrel-Settings.jpg

Trong nhiều tháng nay có thể bạn đã nghe nhiều về cụm từ thiết kế phẳng (flat design) khi nó được cho là thay đổi lớn nhất trên iOS 7 sắp ra mắt. Để 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ì?

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.

windows8.jpg

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í đó.

Quảng cáo



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

original.jpg

Để 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.

widgetosx.jpg
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.

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

Task-app.jpg

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.

Quảng cáo



tripfinder.jpg

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.

weather.jpg

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.

Filetypes.jpg

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

Quảng cáo


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ọ.

501 bình luận
tienpro9x
ĐẠI BÀNG
8 năm
Đơn giản mà hiệu quả !
@duong_mai Ôi bạn không biết đó thôi, mình biết 1 thằng anti Apple chuyên môn cmt đầu để câu like, sau đó lúc tranh luận đuối lý thì lại khoe nó được chục like 😁 Nói cho đơn giản thì lúc nào cái ngu lộ ra quá thì khoe đc nhiều like để làm phao cứu cánh đó mà. Để mình giới thiệu cho bạn nhân vật đó:

ruacontrenbien vào xác nhận giúp cái xem nào ;)
trilong
ĐẠI BÀNG
8 năm
@tienpro9x Chẳng có triết lý nào là tuyệt đối!
vnntg
ĐẠI BÀNG
8 năm
@duong_mai Để được Bot 😆
@neomilanista Bác a ri ga tô ai thế 😁
Thằng MS tiên phong trong phẳng hoá, thằng Google đi theo.
Nhưng Apple phẳng là thằng thứ 3, nhưng Apple sẽ đc cho là sáng tạo và nó cũng sẽ đem đi đăng ký bản quyền "Phẳng". Và iOS7 tuy chưa công bố nhưng Apple cũng đã manh nha sẽ kiện thằng nào Phẳng như nó.... :oops:

Sent from my GT-N7100 using Tinhte.vn
pkape
ĐẠI BÀNG
8 năm
@chuong5580 Tội nghiệp bạn thật, cái nền giáo dục "ló" đào tạo bạn như thế nên mềnh rất chi "nà" thông cảm. Công ty người ta là các ông lớn về công nghệ, chưa nói về những thành tựu hoặc sản phẩm họ phục vụ cho nhân loại, bạn lại bẩu tất cả chúng" ló" đều kêu bằng "thằng" thì mềnh bít rằng bạn rất có giáo dục đấy bạn. Bạn rất "nà" bố tướng...CCMNR.
@quocbaocollection Em trai phải hiểu là ngoài SS thì có cả tỉ hãng khác người ta cũng bo, cũng tròn. Nhưng bo thế nào tròn thế nào để không bị lôi ra kiện thì có lẽ chú phải hỏi họ kỹ hơn. Ngoài ra, em bảo những thứ đó tàm xàm, kể cả chữ nhật bo tròn đi, thì anh vẫn bảo chả có gì là tàm xàm =)). Quan trọng cuối cùng thì lý lẽ thuộc về ai thôi.

Chỉ vì đầu óc em chưa đủ tầm để nghĩ rằng những thứ quan trọng thì quan trọng thôi ;)
@kasaudepyai chỉ vì SS đã đủ mạnh để có thể chiếm ngôi vị của Apple, với lại có cả tỷ hãng thì chắc hơn 80% các hãng đó thuộc quản lý của họ nhà chú nên mới nhiều thế mà ko ai biết. cái lý của chú thì chú ko tàm xàm thì chú cứ giữ lấy, đừng cố nhồi nhét cho người khác, với lại tôi phản ánh khách quan, chưa đụng đến mồ mã nhà chú mà lôi mấy cái học thức uyên thâm ra đây mà nói, trừ khi chú nói Apple là mồ mã nhà chú thì tôi thua 😁 ok? còn ko thì next đi , về nhà bú tí mẹ đi nhé con trai.:D
Nếu vậy thằng thiết kế của apple xách dép thằng ms rùi...

Sent from my MT15i using Tinhte.vn
risky99
CAO CẤP
8 năm
@nguyenhai712 MS ra table trước từ 2001 đấy, bây giờ ai xách dép cho ai ???
Thiết kế phẳng sẽ làm IOS nhẹ hơn 😁
@lechien.us CMT CHUẨN NHẤT !

IOS7 máy 3G sẽ TUNG CHĂN VÀ VI VU !

THIẾT KẾ PHẴNG XẤU NHƯNG NHẸ !
iPhone như thế này có được gọi là phẳng không nhỉ (Vui vẻ chút với giao diện tùy biến thôi các bạn nhé) 😁 (Lấy từ FB của mình)
Hi-CNTT
TÍCH CỰC
8 năm
@hiphhh tên ap bác cài
@hiphhh Cái này gọi là quá phẳng rồi bạn ạ, iphone chạy giao diện modern Ui, bá đạo, hi hi
Phẳng như Lumia thì hơi chán, vừa phẳng vừa mo phỏng đê😃

Gửi từ GT-I9300 của tôi
xkagaya
ĐẠI BÀNG
8 năm
@BiVe_BeBu vậy thì còn gì gọi lại phẳng nữa ??
@BiVe_BeBu mình nghĩ vừa phẳng vừa mô phỏng thì nó khó dung hòa lắm bạn ơi 😁
@vicktorbui Mình nghĩ thì cũng giống như việc chạy Safari hoặc iTunes trên Windows hoặc Microsoft Office trên OSX thôi bạn
:D
thấy phẳng đẹp hơn 3D nhiều, xu hướng đang trở lại phẳng, và màu trở lại trắng đen(classic), là 2 màu trong thế giới này có nhiều nhất.😃
@alxuan bác có thích người yêu bác "phẳng" k? 😁:D:D
LYSM
TÍCH CỰC
8 năm
@alxuan Ai bảo trắng và đen là 2 màu có nhiều nhất? Trái đất nhìn từ trên cao có màu gì? Chẳng qua nó là 1 xu thế mới thôi, tôi thấy thiết kế mô phỏng cũng nhiều cái hay nhưng vì nó ra đời đã lâu. Cũng như thời trang vậy, người ta thích nó ko hẳn vì nó tốt hơn, đẹp hơn cái cũ mà đơn giản là nó mới hơn
@LYSM Ý bác ý là giao diện 1200 là xu thế cho smart phone, và giao diện máy tính của win 95 là xu thế vì dùng đen trắng
gerlesion
TÍCH CỰC
8 năm
😃 Phẳng như winphone 8 nhiều khi hơi rối mắt ...

Chẳng biết phẳng hay không phẳng ... quan trọng là phải đẹp + dễ dùng.
gerlesion
TÍCH CỰC
8 năm
@ngocducybb Thật sự là modern ui ko đc đánh giá cao. Ms sáng tạo, khá màu sắc nhưng chưa thú vị, hiển thị thông tin còn thưa thớt, đi vào vết xe đổ của các widget ngày xưa, chả ai muốn dùng cả.
J_Tuan
CAO CẤP
8 năm
@gerlesion từ từ, nói chả ai muốn dùng thì cũng chả đúng, đừng mang ý thích áp đặt lên ng khác 😃
MS sẽ còn update, thay đổi, winphone mới vài tuổi, cũng giống như android 2.3.6 vậy, hãy chờ lên 4x sẽ thấy nó thú vị hơn
gerlesion
TÍCH CỰC
8 năm
@J_Tuan Mình nói widget mà. Ms vẫn giữ kiểu thích tích hợp thông tin vào icon. Nhưng thành ra quá to cho 1 icon mà lại quá bé để hiển thị ảnh hoặc thông tin. Widget chết là vì thế ... Bản sau chưa ra thì mình ko nói, bản 8.1 bắt đầu cho cài hình nền.
0988846477
TÍCH CỰC
8 năm
@gerlesion Minh bỏ tiền ra mà phải mua cái loại không hoàn hao Ừh. Bay giờ bác cứ mua các os khác đi. Còn wp8 thì để lên 4.x như bác nói nếu lúc đó ngon rồi tính
Lam22
ĐẠI BÀNG
8 năm
có khi nào Apple sẽ kiện MS vì thiết kế phẳng hông?
@Lam22 Cái này khả năng là rất cao đó. Vì nó đã tuyên bố sẵn sàng kiện bất cứ ai rồi mà hihi
@Lam22 ngược lại đi bạn nhé
@Lam22 có thể nếu như Apple lại nhanh chân đi đăng kí bản quyền cái vụ thiết kế phẳng này trước anh Mic mặc dù anh Mic đã ra cái windowphone đến gần 3 năm
mở 1 apps lộn 8 vòng
ợn giao diện WPhone quá . iOS đừng bắt chước .cám ơn
bboypocket
ĐẠI BÀNG
8 năm
ko biết áp dụng cho ios thì thế nào mong chờ quá 😃
ChuoiKhoai
TÍCH CỰC
8 năm
Trào lưu thì chỉ dc1 lúc thôi. Riêng mình thích cái mô phỏng hơn. Giao diện của wp qá là chán.
J_Tuan
CAO CẤP
8 năm
@ChuoiKhoai ngày xưa cái mô phỏng cũng là trào lưu đó 😃
H thấy kiểu mô phỏng bóng bẩy cũ cũ sến sến rồi. Thiết kế phẳng trông hiện đại hơn, đơn giản mà tinh tế. Hãy xem giao diện tinhte.vn bây h là biết
@ChuoiKhoai chuẩn ko cần chỉnh
khangster
TÍCH CỰC
8 năm
Cái hình Windows 8 của chủ thớt nhìn chán nhỉ. Không nêu bật lên cái đẹp của flat design lắm.

Cái startscreen của mình đây ^^
Screenshot (2).png
@khangster nhiều cách sắp xếp lắm a ơi, cách của a cũng hay . với window 8 và windowphone 8 thì nhiều cách lắm k ai giống ai , tiện và đẹp nó là giao diện khác biệt nhất từ trước tới nay và đó là lý do nó nổi bật nhật dù cho có bao nhiêu os trong tương lai nhưng cách tùy biến của nó thì quá độc đáo, số 1 của lựa chọn smartphone với os độc nhất.
@khangster Thì cũng như bao người thôi bạn có gì đâu.
@khangster Silver Linings Playbook 😁 với cả bác làm thế nào mà icon của bộ CS lại to với k có title thế?
boybala
CAO CẤP
8 năm
@khangster Ồ vãi...Ai, PS đủ cả mà cái màn hình trông như tường mẫu giáo cũng mang ra khoe đẹp
leoka
ĐẠI BÀNG
8 năm
Mình thích WP vì cái phẳng này 😃


Tải app Tinh tế

Tải app Tinhte - Theo dõi thông tin mà bạn yêu thích

Tải app TinhteTải app Tinhte
Tải app Tinh tế cho Android trên Google PlayTải app Tinh tế cho iPhone, iPad trên App Store





Đang theo dõi




  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2021 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: 209 Đường Nam Kỳ Khởi Nghĩa, Phường 7, Quận 3, TP.HCM
  • Số điện thoại: 02862713156
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019