Tham dự Tech Lounge

Tham dự Tech Lounge


Thiết kế giao diện phẳng - hiện tại và tương lai

Duy Luân
11/7/2015 18:21Phản hồi: 125
Thiết kế giao diện phẳng - hiện tại và tương lai
Thiet_ke_phang_4.jpeg
Trong những năm gần đây chúng ta được nghe nói khá nhiều đến thiết kế phẳng. Từ Windows, iOS, Android cho đến OS X đều đã chuyển sang sử dụng kiểu thiết kế này để không chỉ giúp phần mềm trở nên đẹp hơn mà còn dễ dùng, dễ tương tác hơn. Nhưng thiết kế phẳng không chỉ dừng lại một chỗ, nó còn liên tục tiến hóa và pha trộn với những phong cách thiết kế khác để giúp mang lại những nét rất riêng, rất đặc trưng cho từng phần mềm một.

Các yếu tố cấu thành thiết kế phẳng


1. Đổ bóng dài
Kiểu đổ bóng này thường được sử dụng ở các đối tượng đồ họa nhỏ, ví dụ như nút bấm hay logo, nhằm tạo ra chiều sâu cho đối tượng đó, đồng thời tạo điểm nhấn. Đặc điểm của bóng này là có màu sậm, cạnh sắc và dễ nhìn thấy, trong khi ở phong cách thiết kế mô phỏng (skeumorphic) trước đây thì bóng mờ hơn và không dễ thấy bằng.Ngoài ra, bóng cũng khá rộng và nghiêng 45 độ.

Thiet_ke_phang_5.png

2. Nhiều màu sáng

Một trong những điểm dễ thấy, cũng là điểm vui của thiết kế phẳng đó là người ta sử dụng nhiều màu sáng và đậm. Ví dụ, với Android 5.0, bạn có thể thấy Google sử dụng nhiều chỗ màu xanh, trắng, vàng, thậm chí là đỏ. Trong ứng dụng YouTube, màu đỏ thậm chí còn sáng hơn so với các phiên bản trước. Hay với Windows 10, Microsoft chọn logo folder màu vàng tươi hơn nhiều so với trước, logo Desktop thì có màu xanh sáng hơn. Nhờ yếu tố này mà các nhà thiết kế có nhiều cách để sáng tạo và phối màu hơn bao giờ hết.

Thiet_ke_phang_2.png

3. Typography đơn giản
Typography là cả một nghệ thuật về chữ viết. Nó bao gồm việc lựa chọn typeface (chính là khái niệm font mà chúng ta hay nói đến), canh khoảng cách giữa các chữ với nhau, giữa các kí tự với nhau, có hay không dùng chữ có móc… Trong thiết kế phẳng, typography thường đơn giản, không hoặc ít sử dụng các móc và đuôi ở các kí tự, còn chiều dày của kí tự cũng đồng nhất xuyên suốt phần mềm. Điều tuyệt vời nhất của typography đơn giản đó là nó tập trung nhiều vào trải nghiệm đọc, từ đó giúp người dùng dễ đọc chữ hơn, nhất là trên những màn hình nhỏ của thiết bị di động.

4. Nút phẳng
Nút phẳng, hay còn gọi là nút ma, là những nút mà chỉ có phần viền bên ngoài và một vài con chữ đơn giản bên trong. Người ta dùng nút phẳng để tạo ra một vùng có thể nhấn hay chạm vào, dễ nhận biết bởi người dùng song vẫn không phá vỡ đi sự liên tục của thiết kế giao diện tổng quan. Ban đầu, nó chủ được xài ở những trang web hay phần mềm có màu nền đậm như đỏ, vàng, xanh, còn bây giờ thì các nhà thiết kế bắt đầu dùng với cả ảnh nền nữa. Kiểu nút phẳng này đang ngày càng được sử dụng nhiều hơn cho những chỗ mà nút truyền thống sẽ trở nên “vô duyên”.

Thiet_ke_phang_6.png
Một số ví dụ về nút phẳng

5. Thiết kế tối giản
Đây là một thành phần không thể thiếu của thiết kế phẳng. Nếu như trước đây, với phong cách thiết kế mô phỏng người ta cố gắng nhét mọi thứ ngoài đời vào trong một giao diện bé tí và làm cho nó trông phức tạp thì thiết kế phẳng đi ngược lại hoàn toàn. Do không cần phải mô tả thực tế nữa nên nhà thiết kế có thể loại bỏ đi những chi tiết thừa, từ đó giúp người dùng tập trung hơn vào nội dung chính. Lấy ví dụ là các icon của Android 2.x hay iOS 6 về trước, trông chúng rất giống vật thể ngoài đời: app danh bạ thì vẽ nguyên cái danh bạ vào, hay app ghi chú của Apple thậm chí còn có một mảng da phỏng theo quyển sổ. Lên đến iOS 7 và Android 4.x, những thứ này không còn nữa, thay vào đó là những icon đơn giản hơn rất nhiều lần.

Nhưng thiết kế tối giản cũng rất khó thực hiện. Vì sao? Bởi nhà thiết kế phải suy nghĩ nhiều, phải sáng tạo nhiều để giữ cho giao diện phần mềm, website đơn giản nhưng vẫn đảm bảo tính dễ dùng. Nếu bạn làm ra một thứ quá đơn giản nhưng nhìn vào chẳng hiểu, chẳng thể xài được thì cũng không có ý nghĩa gì nhiều.

Quảng cáo


Nghĩ xa hơn hiện tại

Ban đầu thiết kế phẳng mang những đặc điểm rất nổi bật và hoàn toàn khác biệt so với những phong cách ngôn ngữ thiết kế khác. Nhưng điều đó đang thay đổi bởi các nhà thiết kế đang sáng tạo ra nhiều cách trộn thiết kế phẳng với những thứ khác nhằm tạo ra những nét riêng cho phần mềm của mình. Rõ ràng, thiết kế phẳng đang tiến hoán, và nó sẽ không ngừng tiến hóa trong tương lai. Đây chính là thiết kế “Flat 2.0” hay “Almost Flat”, tức là gần phẳng.

Ví dụ, các trang web của Google và Apple hiện nay bắt đầu sử dụng hiệu ứng parallax scrolling, là một cách trình bày nội dung theo từng trang, từng trang, và cuộn theo chiều dọc từ trên xuống dưới. Đây không phải là một yếu tố nguyên thủy của thiết kế phẳng, nhưng nó vẫn mang lại hiệu ứng tốt và giúp người dùng tập trung hơn vào nội dung chính do chỉ hiển thị theo từng trang một. Parallax scrolling cũng giúp loại bỏ đi những thứ quá đơn giản của thiết kế phẳng và thay vào đó bằng một cách trình bày nội dung thực tế hơn, đơn giản hơn, ngay cả khi nội dung đó cực kì phức tạp.

Thiet_ke_phang_3.png
Trang web của Apple với hiệu ứng cuộn parallax theo từng trang

Ngoài ra, các nhà thiết kế còn khéo léo đưa vào nền website hay ứng dụng những hoa văn rất nhỏ, gần như không thể trông thấy, nhưng lại giúp loại bỏ sự nhàm chán của nền trắng hay xám truyền thống của thiết kế phẳng. Một số người thì sử dụng hình ảnh to hoặc các mảng màu thay cho nền nữa.

Thiet_ke_phang_1.png
Ứng dụng Google Calendar mới, đơn giản nhưng không nhàm chán

Quảng cáo


Chưa hết, nếu như thiết kế phẳng gần như không sử dụng hiệu ứng chuyển động nào thì Flat 2.0 lại tích hợp những chuyển động đó nhằm truyền tải đến người dùng một thông điệp nhất định. Chẳng hạn, trong các app Material Design, khi bạn nhấn vào một nút thì có hiệu ứng như sóng nước lan tỏa để cho bạn biết rằng bạn đã nhấn thành công. Kiểu thiết kế này chắc chắn sẽ còn phổ biến hơn nữa khi mà các nhà thiết kế quyết định rằng thiết kế tối giản không có nghĩa là mọi thứ phải đứng yên.

Ghi chú: Metarial Design không hẳn là thiết kế phẳng, những điểm khác biệt chính bao gồm:
  • Thiết kế phẳng hướng đến những người dùng thích sự tương tác kĩ thuật số, trong khi thiết kế Material thì đi xa hơn một bước, mang lại khả năng giao tiếp với người dùng thông qua hiệu ứng, màu sắc, đổ bóng
  • Material Design nhìn cũng giống phẳng, nhất là ở các mảng màu, tuy nhiên nó có chiều sâu và có sự sắp xếp trước sau giữa các lớp giao diện
  • Material Design không đơn giản như Flat Design

calculatorrender.gif

Nhưng dù cho có biến dạng theo kiểu gì đi nữa thì thiết kế phẳng sẽ luôn hướng đến một mục tiêu cao nhất: tính dễ dùng. Bên cạnh cái đẹp thì tính dễ dùng mới là thứ quan trọng hàng đầu trong việc thiết kế phần mềm/trang web, bởi nó quyết định người dùng sẽ đi hay ở. Thiết kế phẳng, bằng những yếu tố sẵn có kết hợp với những thành phần mới từ bên ngoài, sẽ giúp chúng ta tương tác với phần mềm theo một cách tiện lợi hơn, nhanh chóng hơn, và vui vẻ hơn.

Nói tóm lại, thiết kế phẳng không phải là một khuôn mẫu cố định. Mọi thứ vẫn có thể thay đổi, thậm chí là thay đổi rất nhanh, thông qua cách pha trộn giữa thiết kế phẳng với những phong cách thiết kế khác. Thậm chí, trong một số trường hợp thì người ta còn ưu tiên sử dụng kiểu thiết kế lai này hơn là thiết kế phẳng truyền thống, nhất là những trang web hay phần mềm có nội dung phức tạp. Chúng ta hãy chờ xem liệu thiết kế phẳng sẽ còn tiến hóa theo cách nào nữa nhé.

Tham khảo: The Next Web
125 bình luận
Chia sẻ

Xu hướng

Bản chất của tối giản là "rút gọn từ cái phức tạp xuống thành cái đơn giản".
Còn trên thực tế, nhiều cái tối giản = tối + giản. :p
đừng có phẳng như NGỰC mấy chị em LCD và ĐƠN ĐIỆU NHƯ GIAO DIỆN WINPHONE là đc 😁:D:D:D:D:D
gaukit1603
TÍCH CỰC
9 năm
@nguyenacer Đây sử dụng ios trước đây rồi đến android và winphone... và bây giờ thì đang dùng song song ios và android, trong 3 cái UI này thì winphone là tệ nhất đấy, rối rấm thô kệt và nhàm chán nhất...
@hung.nexus Giao diện chuẩn của Windows Phone không hề đơn điệu bạn nhé!
@hung.nexus Giao diện chuẩn của Windows Phone không hề đơn điệu bạn nhé!
mình thấy phẳng như trên đt WP mới chính là phẳng ( tối + giản) đơn giản quá = nhàm chán
@thumbe1 những người sử dụng window phone một thời gian nếu chuyển sang hdh android hoặc Ios sẽ cảm thấy rất chán. một đống các icon chẳng có ý nghĩa gì cả.
@nguyenson.ht quá chuẩn, nhìn mấy cái icon lúc đó không có tí sức sống nào cả
@nguyenson.ht tất nhiên là có người nọ ng kia. nh những người đó là quá ít so với sồ đông người đồng quan điểm. thị phần WP đã quá ít ỏi lại liên tục bị sụt giảm ( ra đi mà k quay lại) đã nói lên điều đó. mình hy vọng win 10 mobile sẽ có sự đột phá
Titaner
CAO CẤP
9 năm
Dù cho thiết kế kiểu gì đi nữa nhưng đem đến cho ntd trải nghiệm mới vui hơn , thích thú hơn và được đón nhận là thành công . Với tôi chỉ thích những cái đơn giản nhất , có màu sắc tươi sáng chút với hiện tại thì ok rồi .
Mình thì ko thích thiết kế phẳng 😁
ngày trước Mac OS còn dùng thiết kế mô phỏng, các icon nhìn rất thích. Bây h đỡ nhiều rồi :D
@Blitzwaffen Mình rất thích thiết kế mô phỏng, thiết kế phẳng trông chán quá.
hwangtaizia
ĐẠI BÀNG
9 năm
@Blitzwaffen bác nói thế ko sợ có cơ số người nhảy vào chửi là ko tiến bộ vs bảo thủ à.trên tinhte.vn giờ nhiều kiểu đó lắm.>"<
@hwangtaizia Thích hay ghét là chuyện quan điểm cá nhân, người nào chửi là thiếu lịch sự rồi 😁
Mà từ hôm qua tới h có ai nói j đâu 😆
chuoic
TÍCH CỰC
9 năm
Theo thời gian. Cứ cái mới thì sẽ đẹp hơn cái cũ. [emoji23]
omega911
TÍCH CỰC
9 năm
Phẳng nhưng không được đơn điệu.
Thiết kế phẳng hoàn toàn khác với Material design tác gỉa có chút thiếu sót Phẳng và Material khác nhau. Phẳng là không có chiều không gian thứ 3 có nghĩa là không ánh sáng có hướng và bóng đổ có hướng. Material design cuat google đực đề cập có nghĩa lấy cảm hứng từ cuộc sông từ 3 hình cơ bản "Tam Giác- Tròn- Vuông" và chiều không gian thứ 3 ( có ánh sáng, có bóng đổ có hướng) không thể gọi thiết kế phẳng nhằm lẫn hoặc gọi chung nhau được. Bài viêt cần sửa đổi rõ hơn về phần này
Red Man
TÍCH CỰC
9 năm
@pingme Bạn này nói đúng nè. Rất nhiều người cứ tưởng Material Design là thiết kế phẳng nhưng hoàn toàn không phải nhé. Chỉ cần để ý sẽ thấy MD có các hiệu ứng của chiều thứ 3 như bóng đổ và MD gồm nhiều lớp chồng lên nhau chứ không có phẳng một chút nào 😁
@pingme Cảm ơn góp ý của bạn.

Nhưng liệu nó có thể được xem là Flat 2.0 không nhỉ?
@Duy Luân Thiết kế của Micorsoft và iOS hiện nay là Flat, còn "flat 2.0" thì mình không rõ tại sao lại là 2.0 .
Nhưng nói về "material design" của google là hoàn toàn trái ngược với flat design ngôn ngữ thiết kế này lấy cảm hứng từ cuộc sống nên yếu tố đồ hoạ hiển thị luôn có xuất hiện của ánh sáng, bóng đổ, độ nổi (nông/cạn) google quy ước mỗi tấm vật liệu có độ dày là 1pixel (thế nên bản thân nó đã phủ nhận flat rồi nên không thể gọi là họ hàng với flat được). Material design khác biệt với Flat design yếu tố thứ 2 đó là yếu tố đồ hoạ (animation) có thể biến đổi có thể hoà nhập vào nhau có thể tách nhau ra có thể nổi lên cao và xuống thấp theo chiều không gian thứ 3. hiện tại từ cộng đồng người dùng tôi thấy đang lầm tưởng rất lớn giữa Flat Design và Material Design. Về phần Flat mình không cần nói nhiều bởi nhìn bao nhiêu đã thấy hết bao nhiêu thế nào là Flat rồi liệu có phát triễn để gọi là 2.0 hay 3.0 thì mình không biết họ sẽ phát triễn ra sao. mọi người hãy quan sát nút điều khiển chính từ những đt android 5.x.x là nút hình cơ bản"tam giác-vuông-tròn" chắc chắn họ không lấy ngẫu nhiên. nói luôn thiết kế của Bphone 3 nút không hiểu họ cố tình hay vô tình không sử dụng hình "vuông" cho nút thứ 3 bởi có họ đã đúng khi nói Bphone phẳng hoàn thoàn nhưng Nút thứ 3 (không phải hình vuông) nó phá hỏng một phần triết lý đồng bộ sản phẩm của họ. hi vọng rằng phiên bản Bphone thiếp theo sẽ thay đổi.
mr.heosua
TÍCH CỰC
9 năm
@pingme Quote #1 bác vô duyên vãi
vietnamtea
TÍCH CỰC
9 năm
Em đoán là chỉ vài năm nữa thôi đàn ông cũng sẽ chán màn hình lồi chuyển sang màn hình phẳng thôi.
Ghét cái thiết kế phẳng đến nhạt toét, phẳng đến đơn điệu của WP!
@Fanfanmewmew Chắc là chưa xài wp, chỉ nhìn và phán thôi.
Knell0704
TÍCH CỰC
9 năm
@alahana thì winphone nó là live tile hiển thị liên tục các thông tin, thời tiết, lịch, cuộc gọi, tin nhắn, mail, tin tức,... cảm giác màn hình rất sống động, còn ở ios vs android đơn giản chỉ có cái icon, nếu có thông báo hay tin nhắn, thêm 1 con số trên góc, hết.
@Fanfanmewmew Khi đã tin tưởng vào chính mình thì không cần hạ thấp người khác xuống nữa. Nếu mọi người đã biết WP xấu thì chắc không cần phải nói nữa, còn đây chắc là sợ WP sẽ đẹp lên khi mà Win 10 đang đến gần.
@Fanfanmewmew mình nghĩ WP cũng không đến nổi nhạt toét như bạn nói đâu 😃
wp_ss_20150714_0005[1].png
huydcc
TÍCH CỰC
9 năm
Nếu phẳng kiểu lớp chồng lớp thì ios7 là đầu tiên nhất phải k?sau đó android 5.0 mới phẳng lớp chồng lớp.còn phẳng kiểu window phone đúng là chán thật 😁 ngày xưa ra ios7 thấy nó xấu,màu mè.quảng cáo có mấy cái lớp chồng lên nhau chẳng hiểu gì,bjo hiểu ra thì lại thấy nó đẹp.nhìn ios6 trở xuống nó xấu thế nào ấy :D đúng là người dùng bị mấy hãng đt định hướng trải nghiệm hết,dùng mãi cũng thấy nó đẹp 😃
gaukit1603
TÍCH CỰC
9 năm
@huydcc từ ios7 trở lên nhìn mấy cái icon tởm chết...
Xá Xị
ĐẠI BÀNG
9 năm
phẳng của ios và material design xem như đẹp ngang nhau 😁 có 1 chút gì đó chung và cũng có 1 chuts gì đó tạo nét riêng. Còn phẳng của anh m$ thì quá ư không hợp mắt với tông màu tối và góc của các view không có bo tròn nhẹ nhìn rất cứng và đơ #@%#%
Cực thích thiết kế phẳng 😁
Mặc dù Windows được cho là đi đầu trong việc sử dụng thiết kế phẳng cho hệ sinh thái của mình nhưng mà Apple với iOS và Google với Android dù đi sau lại đang làm rất tốt triết lý này. Windows phẳng chính thống nhưng đơn giản quá (?!) dễ nhàm chán. iOS vs Android thì phẳng mà vẫn rất tươi mới, hiện đại, công nhận dễ dùng và gây thiện cảm với người dùng hơn :rolleyes:
Bâyh quay lại dùng các phiên bản hệ điều hành cũ chưa phẳng hoá thì cứ thấy phức tạp mà khó nhìn kiểu gì :eek:
Cảm giác như thiết kế phẳng là thứ gì đó tiệm cận sự hoàn hảo 🆒
Phải nói một điều triết lý ngôn ngữ phẳng của Material Design là rất đẹp và vẫn gây cảm giác 3D được. Mình cực kỳ kết và thích thú với nó
kungfu9
CAO CẤP
9 năm
Lý do khiến mọi người rời xa windows phone là ở chỗ thiết kế này đây
@kungfu9 Mình dùng wp được 2 năm rồi ... mình cũng công nhận là hồi ở 8.0 sài rất chán. Nhiều khi còn muốn bỏ nữa .... nhưng hiện tại thì đỡ hơn nhiều rồi. Wp cũng có cái riêng mà hdh khác ko có 😁
phẳng làm có cảm giác ..máy mỏng hơn
mảnh cảm giác màn hình rộng hơn để tiết kiệm ko gian
thiết kế nội thất hiện đại cũng vậy
BMW cũng có xu hướng thiết kế mảnh hơn theo xu thế
thực ra Material design thuộc loại Flat 2.0 mà bài viết có nói
bảo nó là thiết kế phẳng thì không đúng, nhưng bảo không phải cũng sai
@Tú art Google quy định mỗi yếu tố thiêt kế luôn có độ dày là 1 pixel thế nên bản thân nó đã phủ nhận thiết kế phẳng. họ gọi đưa con (cuộc cách mạng) của họ là material déign là vậy
Đọc tiêu đề tưởng đang nói đến "Bê Phông"...
Giao diện website / phần mềm càng ngày càng phẳng, và càng ngày càng đẹp

Xu hướng

Bài mới









  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2024 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02822460095
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019