Thực đơn
trang chủInternet

Thiết kế phẳng: tại sao thiết kế trở nên phẳng? Nguyên tắc cơ bản của thiết kế phẳng

Thiết kế phẳng (thiết kế phẳng) là một phong cách phổ biến trong thiết kế trang web và giao diện, cũng như hệ điều hành, tính năng đặc biệtđó là sự đơn giản, tinh tế và tối giản. Thiết kế phẳng bắt đầu trở nên phổ biến vào năm 2010 vì nó trái ngược với chủ nghĩa đa dạng.

tính đa hình- vật trang trí hoặc thành phần thiết kế vật lý được sao chép từ hình dạng của vật thể khác nhưng được làm từ vật liệu khác hoặc sử dụng các phương pháp khác. Ví dụ bao gồm đồ gốm được trang trí bằng đinh tán giả để giống với những chiếc bình tương tự làm bằng kim loại hoặc lịch máy tính bắt chước vẻ bề ngoài trang giấy ràng buộc lịch để bàn(định nghĩa từ Wikipedia).

Phổ biến phong cách phẳng thiết kế đã góp phần cho việc phát hành hệ điều hành Windows 8 kiểu Metro của Microsoft, cũng như iOS 7, hệ điều hành này công ty táo cũng chọn phong cách phẳng. Sau đó, thời đại thực sự bắt đầu thiết kế phẳng. Các công ty lớn cũng sẽ sớm chuyển sang Thiết kế phẳng dịch vụ tìm kiếm và ứng dụng - Google, Youtube, nhiều trang web đang xuất hiện sử dụng nguyên tắc phong cách phẳng trong thiết kế của họ. TRONG những năm trước Thiết kế theo phong cách phẳng là người dẫn đầu trong xu hướng thiết kế trang web toàn cầu.

Lợi ích của thiết kế phẳng

  1. Tính thực tiễn- việc sử dụng thiết kế phẳng cho phép bạn giảm thiểu số lượng kiểu, tập lệnh và hoạt ảnh, cho phép trang web tải nhanh hơn.
  2. Dễ dàng thích nghi- thiết kế phẳng đủ dễ dàng để thích ứng với các độ phân giải màn hình khác nhau.
  3. Dễ sử dụng- nhờ phong cách đơn giản hóa, người dùng dễ dàng tiếp nhận thông tin trên trang web hơn.
  4. sắc đẹp- tính khách quan bên ngoài và thiết kế đơn giản cho phép bạn tập trung vào một thiết kế thực sự bắt mắt.

5 nguyên tắc thiết kế website phẳng

Thiết kế phẳng không hề nhàm chán như thoạt nhìn. Nhờ sự tinh khiết và tinh tế, các giải pháp thiết kế có thể rất phong cách và đẹp mắt, không có tiếng ồn không cần thiết, cho phép bạn tập trung vào sản phẩm hoặc dịch vụ của mình.

1 – Sử dụng đối tượng 2D

Thiết kế phẳng không bao gồm việc sử dụng các yếu tố mang lại chiều sâu và khối lượng cho đối tượng: bóng, độ dốc, điểm nổi bật, kết cấu, phản chiếu, hoạt ảnh. Khi một đối tượng được chụp ảnh, chỉ có đường viền của nó được hiển thị.

2 - Biểu tượng và đồ vật đơn giản

Sử dụng các biểu tượng phẳng và hình dạng đơn âm tiết với đường viền rõ ràng và cùng màu sắc cho phép bạn đơn giản hóa thiết kế nhiều nhất có thể và làm cho nó nhẹ nhàng hơn. Điều khiển trở nên trực quan dễ hiểu đối với người dùng và khuyến khích sự tương tác.

3 - Font chữ đơn giản trong phong cách thiết kế

Người ta chú ý nhiều đến kiểu chữ và phông chữ trong thiết kế phẳng. Chữ in nghiêng không được sử dụng ở đây; phông chữ phù hợp hài hòa với thiết kế trang web, không chỉ trong nội dung mà còn trong điều hướng. Ngay cả trong các loại phông chữ cho trang web, phong cách tối giản vẫn được khuyến khích.

4 - Trò chơi màu sắc

Thiết kế phẳng chứa một số màu cơ bản, loại trừ việc sử dụng chuyển tiếp suôn sẻ và độ dốc, nhưng có thể sáng và tương phản với nhau.

5 - Chủ nghĩa tối giản

Thiết kế phẳng liên quan đến việc sử dụng trực quan hóa các yếu tố, sử dụng toàn bộ chiều rộng của màn hình và đồng thời giảm thiểu thông tin.

Có một thứ gọi là thiết kế gần như phẳng. Đây là một trong những khái niệm thiết kế phẳng sử dụng yếu tố đơn giản và không gian hai chiều. Một ví dụ về điều này có thể là ảnh chất lượng cao, mờ dần thành lý lịch hoặc bị tối đi. Điều này cho phép bạn tạo chiều sâu và phối cảnh của đối tượng.

Ví dụ về thiết kế phẳng

Trên Internet, bao gồm cả phân khúc Belarus, bạn có thể tìm thấy nhiều ví dụ về phát triển trang web với thiết kế phẳng ở Các chủ đề khác nhau, bao gồm tài nguyên tin tức, cổng thông tin và thậm chí cả cửa hàng trực tuyến.

Các trang web theo phong cách thiết kế phẳng trông giống như một không gian khối hình học đơn giản với các điểm nhấn màu sắc (biểu tượng, điểm nhấn văn bản, đồ họa thông tin) với tối thiểu các chi tiết đồ họa và không thừa thông tin văn bản. Như họ nói, “chủ nghĩa tối giản” và không có gì thừa thãi.

Làm thế nào để không vẽ biểu tượng phẳng

Thiết kế website “phẳng” đã trở thành mốt cùng với giao diện Windows mới. Sự phổ biến ngày càng tăng của phong cách này ở Nga được tạo điều kiện thuận lợi bởi sự gia tăng số lượng các nhà thiết kế web tự học không biết rằng giao diện trang web và giao diện “ngón tay” (điện thoại thông minh) không giống nhau (dễ cuộn dùng ngón tay xuống trang - và ngược lại, bạn sẽ cần rất nhiều kiên nhẫn và sự quan tâm thực sự khi xoay con lăn chuột xuống 3-4 màn hình). Trên các trang web phẳng của Nga, bạn thường có thể tìm thấy các biểu tượng sau:

Ví dụ chỉ là màu sắc tươi sáng không phù hợp với nhau + biểu tượng Chất lượng kém(Tôi lấy ví dụ từ quay số trả phí, nhưng hầu như các dịch giả tự do luôn sử dụng các biểu tượng được tải xuống miễn phí từ các bộ khác nhau và không kết hợp với nhau).

Do không thể vẽ đồ họa chất lượng cao, các nhà thiết kế mới vào nghề dễ dàng nắm bắt cơ hội để đơn giản hóa mọi thứ. Đồng thời, người ta bỏ qua rằng thiết kế theo phong cách “tối giản” liên quan đến việc trau chuốt chính xác chất lượng cao của các chi tiết giao diện chứ không chỉ đặt các biểu tượng được tải xuống từ Internet trên các ô vuông màu trong phong cách Windows 8 (hiện có thể tìm thấy trên nhiều “trang đích hiện đại”).

Ví dụ về các biểu tượng phẳng tốt:

Màu sắc và biểu tượng không chỉ nên được kết hợp với nhau mà còn tạo thành một tổng thể duy nhất.

Các vấn đề của thiết kế phẳng chất lượng thấp

1. Điều hướng và khả năng sử dụng

Trang web KHÔNG phải là không gian thực, do đó, để tạo cảm giác thực tế và hiểu vị trí của bạn, các trang web sử dụng “ vụn bánh mì", và các hình ảnh biểu tượng gần giống với vật thể thật để hiểu nhanh và dễ điều hướng. Vì vậy, bằng biểu tượng ngôi nhà, có thể thấy ngay rằng đây là “nhà”, bằng biểu tượng của chiếc điện thoại - đây là điện thoại, bằng cái giỏ - đây là cái giỏ (như trong siêu thị - mọi thứ đều rõ ràng và đơn giản), một biểu tượng có hình ảnh món quà - một món quà, v.v. .

Tuy nhiên, các nhà thiết kế phẳng mới thường đơn giản hóa biểu tượng quá mức. Và các nhà thiết kế càng sử dụng hình ảnh trực quan thì người dùng càng khó diễn giải chúng. Việc đơn giản hóa quá mức đôi khi khiến việc điều hướng trở nên khó khăn. Ngay khi mọi người đổ xô tạo ra thiết kế website phẳng thời thượng, cố gắng bắt chước các nhà thiết kế châu Âu, họ đã quên mất quy tắc đơn giản khả năng sử dụng.

2. Quấn chân phẳng dài

Các trang kéo dài 3-4 màn hình, trong khi không gian không chỉ được sử dụng một cách tiết kiệm mà trái lại, một lượng “không khí” quá mức được thêm vào. Đồng thời, không có động lực trực quan để cuộn - không có chip, không có hoạt ảnh. Hiện chưa rõ các nhà phát triển dự định thu hút khách truy cập cuộn xuống trang như thế nào. Xét cho cùng, so với các trang web có mọi thứ đều nhỏ gọn, các trang web footcloth đòi hỏi nhiều năng lượng để di chuyển chuột trên toàn bộ màn hình và cuộn.

3. Các nút bấm khó hiểu

Trên các địa điểm bằng phẳng yếu tố hoạt động không còn rõ ràng nữa. Với sự ra đời của thiết kế phẳng, các nút bấm cũng trở nên phẳng. Nhưng hình ảnh trực quan của nút là từ hình thật nút vật lý, bóng và độ chuyển màu chỉ hiển thị rằng “bạn chắc chắn có thể nhấp vào đây”.

4. Biểu tượng được vẽ kém

Do sự làm việc kém chất lượng của các nhà thiết kế, các biểu tượng trên các trang web (điều này đặc biệt dễ nhận thấy trên các trang web theo phong cách phẳng) đã mất đi hình ảnh có thể đoán trước được. Có thể do ngân sách thiết kế hạn chế hoặc do bản thân người thiết kế web kém năng lực, các yếu tố điều hướng trên trang web thường không tương ứng với các liên kết chính và “xa vời”.

Tôi cho rằng công việc tạo biểu tượng sẽ diễn ra như sau: theo thông số kỹ thuật, cần có biểu tượng “Phương pháp tiếp cận cá nhân với khách hàng”. Cá nhân tôi có hình ảnh của một người quản lý và hai khách hàng, mỗi người được dẫn dắt bởi một mũi tên có màu khác nhau (mũi tên màu xanh dẫn đến khách hàng màu xanh, mũi tên màu đỏ dẫn đến khách hàng màu đỏ). Nếu một nhà thiết kế không biết vẽ, anh ta sẽ tìm kiếm một biểu tượng trong các bộ làm sẵn (trong kịch bản hay nhất– mua nó từ ngân hàng ảnh, trong trường hợp xấu nhất – tải xuống từ Internet) và sử dụng cái có ý nghĩa phù hợp nhất. Rất có thể, đó sẽ là biểu tượng một người đàn ông đeo cà vạt hoặc một chiếc vali. Nhìn chung, anh ấy chưa đi xa lắm, nhưng trong thiết kế trang web, sẽ thấy rõ chiếc vali dành cho “Cách tiếp cận cá nhân với mọi người” và Đồng hồ đeo tay dành cho “10 năm có mặt trên thị trường” (nhân tiện, tôi thực sự đã thấy nó!) – nhà thiết kế đã lừa dối.

5. Tập trung vào nội dung sai

Thiết kế trang web phẳng giả định tập trung vào nội dung. Chà, rõ ràng - nếu điểm nhấn không phải là đồ họa thì là thông tin. Nhưng nếu bạn xem xét kỹ các trang đích kiểu phẳng “hiện đại” do các studio web ở Nga cung cấp, bạn sẽ ít chú ý đến nội dung. Cụ thể là:

  • Văn bản được trình bày một cách lộn xộn. Không rõ các điểm nhấn trong đó được đặt như thế nào, bám vào cái gì và cái gì là thứ yếu.
  • Không có thiết kế như vậy. Các bảng, danh sách có dấu đầu dòng, tiêu đề, thông báo thường không được phát triển chút nào.
  • Thường là văn bản trần. Không có hình ảnh hoặc biểu tượng nào hỗ trợ trực quan cho các khối văn bản. Kết quả là, điểm nhấn không phải ở đồ họa hay văn bản mà ở chính “phong cách”. Đồng thời, công ty và các ưu đãi của nó bị mất.

Vậy thiết kế phẳng có cần thiết cho các trang web không?

Mọi thứ đều rõ ràng với thiết kế giao diện dành cho điện thoại thông minh - nhẹ, không tải, dễ sử dụng. Nhưng với thiết kế website theo phong cách phẳng, cá nhân tôi có một câu hỏi lớn: liệu nó có hiệu quả không?

Hầu hết Khách hàng không hiểu chất lượng đồ họa và khi phê duyệt thiết kế trang web, họ đều bị hướng dẫn bởi sở thích cá nhân (thích/không thích). Và ở đây thời trang đóng một vai trò.

Thiết kế trang web phẳng có thể rất tuyệt. NHƯNG! Thiết kế tuyệt vời liên quan đến việc phát triển khả năng sử dụng thực sự chất lượng cao và yếu tố đồ họa và sự hiện diện của các tính năng và hiệu ứng sáng tạo. Và nếu chúng vắng mặt trong thiết kế, nếu trang web thiếu tính độc đáo, chúng trông đơn điệu, trống rỗng và nhàm chán. Nói chung, đây là những gì hiện có trên hầu hết các trang web của Nga.

Một ví dụ về thiết kế phẳng chất lượng cao:

Xu hướng thiết kế trang web phẳng chỉ là tạm thời, giống như bất kỳ xu hướng nào khác. Một số người tạo ra những thiết kế độc đáo, sáng tạo, trong khi những người khác sao chép và bắt chước chúng theo phong cách vì họ không biết cách tự mình nghĩ ra chúng. Và các trang “thời trang” giá rẻ đang mọc lên như nấm…

Trong bài viết này tôi sẽ nói với bạn về thiết kế phẳng. Có thể bạn đã nghe điều gì đó về điều này vì thiết kế phẳng đã trở thành một trong những xu hướng hàng đầu trên web trong vài năm qua.

Hôm nay chúng ta sẽ xem xét thiết kế phẳng là gì, nó ra đời như thế nào và bạn cần những gì để tạo ra một thiết kế gọn gàng, sáng sủa và phản hồi nhanh.

bạn có thể tìm những ví dụ hay thiết kế phẳng trên website http://market.envato.com/. Có rất nhiều bố cục, biểu tượng và mẫu sẽ giúp bạn hiểu rõ ràng về thiết kế hiện đại trông như thế nào .

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

Thiết kế phẳng - phong cách hiện đại giao diện người dùng, cũng như thiết kế đồ họa, đặc trưng bởi sự tối giản. Thiết kế phẳng được đặc trưng bởi việc sử dụng tối thiểu các yếu tố và không có các hiệu ứng khác nhau về kết cấu, bóng và ánh sáng, ví dụ: màu hỗn hợp, độ dốc, điểm nổi bật, v.v.

Flat đối lập với tính đa hình( Tính đa dạng là một nguyên tắc thiết kế khi một sản phẩm mang hình dáng của một sản phẩm khác, tức là. khi các thành phần giao diện khác nhau được sao chép từ các đối tượng thực - khoảng.) , cũng như thiết kế phong phú Tuy nhiên, điều đáng nói là thiết kế phẳng hoàn toàn không đơn giản như thoạt nhìn. Nó bao gồm một số tính năng của tính đa hình, nhưng chúng ta sẽ nói về điều này sau.

Nhìn chung, phẳng giúp người dùng tập trung vào nội dung mà không bị phân tâm bởi hình ảnh. Thiết kế phẳng nhấn mạnh sự đơn giản của các yếu tố, đồng thời làm cho giao diện trở nên nhạy hơn, dễ chịu và dễ sử dụng hơn.

2. Một chút lịch sử

Thiết kế phẳng, như bạn đã biết, đã tồn tại từ rất lâu trước khi nó trở thành xu hướng toàn cầu trên web. Thiết kế phẳng khá phổ biến vào những năm 80 do công nghệ lúc đó chưa đủ phát triển để hỗ trợ các hiệu ứng, kết cấu và bóng phức tạp. Tuy nhiên, ngay cả khi đó thiết kế vẫn cố gắng theo hướng đa dạng, cố gắng làm cho các thành phần giao diện trở nên thực tế nhất có thể.

Thiết kế phẳng, theo hình thức mà chúng ta thấy ngày nay, bắt đầu trở nên phổ biến sau khi Microsoft bắt đầu sản xuất các sản phẩm theo phong cách metro. Metro là một thiết kế giao diện người dùng của Microsoft nổi bật về phong cách và sự đơn giản.

Trong năm 2010 Microsoft phát hành Điện thoại Windows 7, sử dụng thiết kế phẳng với các cạnh sắc nét và đồ họa đơn giản kế thừa từ một trong những sản phẩm trước đó Microsoft (Zune). Sau này, lấy cảm hứng từ sự thành công, Microsoft đã cho ra đời hệ điều hành Hệ thống Windows 8, dựa trên phong cách Metro phẳng tương tự.

Xét cho cùng, thiết kế phẳng đã đạt đến đỉnh cao phổ biến vào năm 2013 khi Apple phát hành iOS 7 thể hiện cơ bản thiết kế mới với các thành phần giao diện người dùng được thiết kế lại hoàn toàn, bao gồm các biểu tượng và phông chữ. công ty táo tạo nguyên tắc trực quan của thiết kế giao diện người dùng và biểu tượng .

Ngay sau đó, Google cũng bắt đầu sử dụng phong cách phẳng trong các ứng dụng và trang web của mình, gọi nó là Vật liệu thiết kế. Google thậm chí còn có cả một phần dành riêng cho phong cách này, bao gồm phần mô tả về mục tiêu của thiết kế web, các nguyên tắc và nguyên tắc tạo trang web. các đồ vật khác nhau thiết kế: biểu tượng, bố cục, v.v.

Kể từ đó, phẳng đã trở thành xu hướng chính trong thiết kế web, làm cho các trang web, ứng dụng và các thành phần giao diện trở nên thanh lịch, sạch sẽ và phong cách.

Vì vậy, có ba ví dụ toàn cầu về thiết kế phẳng từ các công ty, thật khó để tưởng tượng nếu không có nó thế giới hiện đại công nghệ:

Thiết kế Metro của Microsoft

Thiết kế iOS 7 của Apple

của Google Vật liệu thiết kế

3. Nhớ giữ gìn vệ sinh sạch sẽ

Thiết kế phẳng rõ ràng được gọi là “phẳng” do thiếu các yếu tố ba chiều và hiệu ứng thực tế chẳng hạn như: độ dốc, họa tiết, điểm nổi bật, bán sắc, bóng. Hãy nhớ rằng, phong cách phẳng là cách mô tả vật thể hai chiều (phẳng).

Hơn nữa, trong thiết kế phẳng, các đồ vật được mô tả một cách rất đơn giản và cách điệu.

Và đôi khi thậm chí chỉ sử dụng hình bóng hoặc đường viền của đối tượng, tức là. vừa đủ để làm cho đối tượng có thể nhận biết được nhưng không làm nó quá tải với những chi tiết nhỏ.

Chủ nghĩa tối giản ngày nay đã trở thành xu hướng toàn cầu: sự đơn giản của hình dạng và việc sử dụng các cạnh sắc nét tạo nên một thiết kế sạch sẽ và dễ chịu. Các hình thức đơn giản dễ hiểu và dễ hiểu hơn. Điều này giữ cho thiết kế tối giản và sạch sẽ mà không tạo ra một cái nhìn rối rắm, lộn xộn.

4. Đưa nó đến sự hoàn hảo

Biết rằng khi tạo các biểu tượng phẳng và các thành phần giao diện người dùng, bạn phải làm cho chúng trông sắc nét, gọn gàng và hoàn hảo về pixel, tức là. Càng nhiều càng tốt. Hơn nữa, điều này áp dụng cho cả đồ họa raster và vector.

Mọi thứ đều rõ ràng ở đây với Adobe Photoshop: nó hoạt động với đồ họa raster, dựa trên pixel.

Về việc chương trình Adobe Illustrator sử dụng đồ họa vector được tạo thành từ các đường cong và đường thẳng gọi là vectơ, được xác định bằng các công thức toán học.

Ngày xửa ngày xưa, Adobe Illustrator không còn là một công cụ tuyệt vời nữa. chương trình tiện lợiđể tạo đồ họa hoàn hảo đến từng pixel. Tin tốtđó có phải là phiên bản mới nhất Thép minh họa công cụ tuyệt vờiđể tạo ra đồ họa đẹp.

Tôi phải nói chuyện đó Đồ họa vector chủ yếu liên quan đến việc làm việc với sự đơn giản, hình dạng phẳng, màu sắc và lưới thuần túy Adobe Illustrator rất linh hoạt trong cài đặt và cho phép bạn điều chỉnh lưới theo nhu cầu của mình, căn chỉnh các đối tượng và sử dụng. Nhiều loại khác nhau chụp nhanh. Điều này giúp dễ dàng tạo ra thiết kế hoàn hảo trông gọn gàng và phong cách trên bất kỳ màn hình nào. Nếu bạn muốn tìm hiểu cách tạo đồ họa hoàn hảo thì bạn nên đọc bài viết: Cách tạo tác phẩm nghệ thuật hoàn hảo đến từng pixel bằng Adobe Illustrator .

5. Màu sắc

Một trong những tính năng cụ thể nhất của thiết kế phẳng, bên cạnh bóng tối, là việc sử dụng màu sắc. Hầu hết các màu sắc mà thiết kế phẳng sử dụng trong các phần tử của nó chỉ bao gồm một vài màu cơ bản.

Màu sắc trong thiết kế phẳng tươi sáng, phong phú và phong phú.Phối màu phẳng không giới hạn ở một số màu đặc biệt. Nó chứa nhiều sắc thái và sự lựa chọn của chúng chỉ phụ thuộc vào những gì bạn đang miêu tả, có thể là biểu tượng đồ ngọt hoặc đồ vật theo phong cách cổ điển trong bảng màu cổ điển tinh xảo.

Giả sử bạn là một nhà thiết kế giao diện người dùng và rất thành thạo về bảng màu, bạn đang thử nghiệm bảng màu trong Chương trình Photoshop và Illusstartor, trộn màu theo ý muốn. Tuy nhiên, quá trình này khá phức tạp và đòi hỏi trực giác, kinh nghiệm và kỹ năng tốt. Ở đây bạn sẽ tìm thấy một số công cụ có thể giúp bạn tạo bảng màu của riêng mình.

Một số trong số chúng phù hợp với mọi loại thiết kế và minh họa, không chỉ thiết kế phẳng. Ví dụ: Adobe Color CC, hay còn gọi là Cooler. Ngày nay có quyền truy cập vào nó, cả thông qua trang web và trực tiếp thông qua Sản phẩm của Adobe. Cooler là một công cụ rất linh hoạt cho phép bạn tạo bảng màu của riêng mình hoặc chọn từ bảng màu tùy chỉnh từ thư viện.

Một trình tạo bảng màu đơn giản và tiện lợi khác là Coolors. Chỉ cần nhấn phím cách và chương trình sẽ tạo bảng màu, bạn có thể điều chỉnh màu sắc, ngoài ra còn có chức năng xuất.

Có một số dịch vụ tương tự khác với bảng màu tùy chỉnh có thể hữu ích. Tuy nhiên, có một công cụ được Designmodo tạo ra dành riêng cho thiết kế phẳng. FlatUIColors.com - một dịch vụ với bộ màu “phẳng”, rất thuận tiện cho công việc. Trang web này đã trở nên rất phổ biến đối với các nhà thiết kế đang tìm kiếm giải pháp màu sắc tốt cho một thiết kế hoàn hảo. Thử nó!

Và bạn cũng có thể tìm thấy nhiều màu sắc và bảng màu đa dạng hơn trong Hướng dẫn thiết kế Material Design của Google.

6. Bóng dài

Như đã đề cập ở trên, thiết kế phẳng được đặc trưng bởi sự đơn giản và nhiều không gian trống - đó là lý do tại sao thiết kế phẳng từ chối sử dụng bất kỳ hiệu ứng nào. Tuy nhiên, có một hiệu ứng điển hình cho thiết kế phẳng. Hiệu ứng này đã trở thành một xu hướng và tính năng đặc trưng phẳng.

Bây giờ chúng ta đang nói về bóng dài. Chúng có một số đặc điểm điển hình giúp cho hiệu ứng này có thể nhận biết được, cụ thể là: độ nghiêng 45 độ và size lớn(Bóng có thể dài hơn chủ thể vài lần. Kết quả là, bóng dài tạo ra hiệu ứng chiều sâu cho mặt phẳng.

Hiệu ứng này làm cho vật thể trở nên ba chiều hơn, nhưng đồng thời vẫn giữ nó trong bối cảnh thiết kế phẳng.

7. Làm việc với phông chữ

Typography đóng một vai trò lớn trong thiết kế phẳng. Thông thường văn bản trở thành thành phần chính của bố cục.

Các thiết kế phẳng thường sử dụng các kiểu phông chữ đơn giản, làm cho toàn bộ thiết kế trở nên gọn gàng và dễ đọc. Bạn có thể tìm thấy nhiều phông chữ miễn phí trong Adobe Typekit nếu bạn sử dụng các sản phẩm của Adobe. Bạn cũng sẽ tìm thấy rất nhiều phông chữ miễn phí hay trên Font Squirrel. Nhưng đừng quên đọc giấy phép nếu bạn có ý định sử dụng phông chữ cho mục đích thương mại.

Thông thường trong thiết kế phẳng, người ta thường sử dụng chữ hoa và màu sắc tương phản, điều này làm cho văn bản dễ đọc hơn.

Sử dụng phông chữ một cách tiết kiệm, hãy nhớ rằng chúng nên bổ sung và bổ sung cho thiết kế thay vì xuất hiện dưới dạng một thành phần riêng biệt. Điều này không có nghĩa là bạn không thể sử dụng phông chữ serif hoặc phông chữ phức tạp viết tay. Chỉ cần nhớ tối giản và giữ mọi thứ cân bằng. Tuy nhiên, kiểu phẳng vẫn thường sử dụng phông chữ sans-serif vì chúng trông chặt chẽ và gọn gàng hơn.

8. Ưu và nhược điểm của thiết kế phẳng

Mặc dù thiết kế phẳng đã trở nên quá phổ biến do có nhiều ưu điểm nhưng vẫn có một số nhược điểm mà các nhà thiết kế gặp phải khi sử dụng phong cách này. Hãy nhìn vào những ưu và nhược điểm.

thuận

Phổ biến

Thiết kế phẳng đã trở thành xu hướng, ngày càng nhận được nhiều đánh giá tích cực từ các nhà thiết kế, thiết kế web và dường như nó không hề mất đi vị thế của mình. Ngược lại, nó ngày càng lan rộng, có được một số hình thức và tính năng mới, ngày càng trở nên sáng tạo hơn.

Sự đơn giản

Thiết kế phẳng đơn giản, tối giản và sạch sẽ. Flat on web giúp người dùng tập trung vào nội dung hơn là bị phân tâm bởi hình ảnh. Điều này cũng hoạt động cho các giao diện ứng dụng di động: thiết kế gọn gàng với nút lớn sử dụng thiêt bị di động hoàn hảo.

độ sáng

Màu sắc là một điểm cộng thú vị khác trong thiết kế phẳng. Sáng và màu sắc phong phú trông hấp dẫn và sạch sẽ, đồng thời việc thiếu độ dốc khiến thiết kế trở nên phong cách. Hơn nữa, như vậy màu sắc tinh khiết làm cho nó trở nên tích cực hơn, dễ nhìn hơn, thiết kế phẳng tạo ra tâm trạng phù hợp.

sai sót

Flat có nhiều ưu điểm hơn nhưng không có thiết kế nào là hoàn hảo và chúng ta không thể lý tưởng hóa nó. Dưới đây là một số nhược điểm của thiết kế phẳng mà chúng ta phải đề cập:

Không phản hồi

Đôi khi thiếu những chi tiết quan trọng hoặc hiệu ứng hình ảnh làm cho quá trình tạo giao diện thân thiện với người dùng trở nên khó khăn và nhìn chung nó khiến toàn bộ thiết kế không phản hồi. Không phải tất cả người dùng đều cảm thấy thoải mái với hình phẳng vì có thể khó tìm thấy các phần tử trên trang web mà bạn cần nhấp hoặc chạm trên màn hình điện thoại di động vì chúng không tương tác.

Vấn đề về kiểu chữ

Như đã đề cập trước đó, không phải mọi phông chữ đều có thể phù hợp với thiết kế phẳng. Đôi khi một phông chữ phong phú với các cạnh sắc nét như vậy trông thực sự cân đối và phong cách. Tuy nhiên, nếu chọn sai phông chữ, nó có thể làm hỏng toàn bộ thiết kế. Bạn sẽ có cảm nhận thực sự rõ ràng về phông chữ nào phù hợp với phông chữ phẳng và phông chữ nào không. Việc thiếu kinh nghiệm khiến việc chọn phông chữ trở nên rất khó khăn.

Hình ảnh yếu

Do những hạn chế trong việc sử dụng hiệu ứng, màu sắc và phông chữ, thiết kế phẳng có thể trông quá đơn giản và lạnh lùng. Sự tối giản của nó cũng có thể là nhược điểm chính của nó - những thiết kế phẳng khác cuối cùng trông giống hệt thiết kế của bạn. Vì vậy, rất khó để làm cho các biểu tượng hoặc trang web của bạn trông khác với thiết kế của người khác vì bạn đang sử dụng các hình dạng đơn giản giống nhau, bị hạn chế. bảng màu và các phông chữ tương tự. Kết quả là, thiết kế phẳng có thể trở nên nhàm chán theo thời gian.

9. Xu hướng thiết kế phẳng trong tương lai

Không thể nói rằng thiết kế phẳng đã hình thành và dừng lại hoàn toàn. Có lẽ điều này là do những nhược điểm nêu trên của nó; thiết kế phẳng cố gắng phát triển và thay đổi, có được những tính năng mới và nâng cao khả năng biểu đạt thị giác.

Nếu bạn nhìn kỹ vào ví dụ cuối cùng về thiết kế phẳng, bạn có thể nhận thấy rằng nó thực sựdần dần thoát khỏi các công cụ nghiêm ngặt của nó và bắt đầu thêm các hiệu ứng tinh tế như: độ dốc, bóng tối, ánh sáng và các hiệu ứng hình ảnh khác.

Những điểm nhấn nhỏ này mang lại cho thiết kế phẳng một số chiều sâu mà không quá chi tiết như các thiết kế đa dạng. Những cải tiến tinh tế này làm cho mặt phẳng phản ứng nhanh hơn và thoải mái hơn, đồng thời mang lại cái nhìn mới mẻ, làm cho mặt phẳng trở nên linh hoạt và linh hoạt hơn.

Như vậy, phẳng không mất đi tính năng mà trở nên thú vị và linh hoạt hơn.- anh ấy thực sự đã khỏe hơn rồi.

kết luận

Vì vậy, chúng tôi đã thảo luận một số sự thật về lịch sử của thiết kế phẳng và nói về màu sắc, hình dạng và kiểu chữ. Chúng tôi đã xem xét các quan điểm khác nhau, tập trung vào ưu điểm và nhược điểm của thiết kế phẳng và tìm hiểu một số nguyên tắc chính để tạo ra một thiết kế tốt.

Tôi hy vọng bạn đã học được cho chính mình thông tin mới từ bài viết này hoặc ít nhất là thấy nó thú vị. Bạn có trách nhiệm phải thử tạo ra một thiết kế phẳng nếu bạn chưa từng làm điều đó trước đây.

Rốt cuộc, còn gì để đề cập đến thiết kế phẳng?

Nếu bạn thực sự thích thiết kế phẳng với các cạnh sắc nét, màu sắc phong phú và phông chữ sắc nét, sự sạch sẽ và tối giản thì hãy chọn nó!

Nó hợp thời trang nhưng cũng giống như mọi thứ khác phong cách đồ họa, đừng giới hạn bản thân chỉ trong một kỹ thuật. Chỉ vì phẳng là xu hướng không có nghĩa là bạn không thể sử dụng các phong cách khác trong dự án của mình. Tính đa hình, với những chi tiết và kết cấu nhỏ bé, cũng có thể trở thành quyết định tốt. Điều chính là hãy nhớ rằng thiết kế của mỗi dự án là khác nhau, nó phải thể hiện được tinh thần, mục đích, bản chất của nó nhưng vẫn thuận tiện và tiện dụng. Phía trước!

Thiết kế phẳng là một trong những xu hướng chính hiện nay, cả trong lĩnh vực thiết kế web lẫn công nghệ tạo giao diện người dùng. Trong số những ví dụ gần đây, đáng chú ý nhất là: Bước đi quyết định của Microsoft theo hướng này, với Windows 8 và Windows 8 mới. thiết kế của Google, với sự thể hiện rõ ràng về mong muốn đi sâu vào chủ nghĩa tối giản.

Dưới đây là ví dụ về các phần tử xác định .

Cuộc sống sau Web 2.0

Ở dạng hình tròn của các phần tử với đủ loại hiệu ứng - 3D, bóng, điểm nổi bật và phản chiếu, độ dốc, dập nổi. Nói tóm lại, mọi thứ tạo ra chiều sâu và khối lượng. Các điều khiển lớn, sáng, độ bóng, kết cấu và các biểu thức tương tự khác nhường chỗ cho các cách trình bày hai chiều đơn giản của các đối tượng trực quan.

Thiết kế phao

Kiểu chữ là trung tâm của phong cách

Xin lưu ý rằng đây là cơ sở để xây dựng một trang web “phẳng”. Sự đơn giản của các yếu tố thiết kế phẳng, cũng như bản thân các nguyên tắc của chủ nghĩa tối giản, đã nâng cao tầm quan trọng của kiểu chữ. Về nguyên tắc, có thể thay thế một số đồ họa hoặc hình ảnh nặng bằng nội dung văn bản. Ngày nay, trên nhiều trang web, kiểu chữ đã trở thành thiết kế. Đương nhiên, vì thiết kế phẳng thường tối giản nên bản chất của phông chữ phải phù hợp với sơ đồ chung, phong cách và bố cục. Ví dụ, chữ hoa thường được sử dụng cho các thành phần hoặc tiêu đề.

Tường mã

Đọc thêm: 12 màu cơ bản và ví dụ về cảm nhận của người dùng

Bảng màu thiết kế phẳng

Thiết kế phẳng cũng đang hướng tới sự đa dạng về màu sắc hơn. Các nhà thiết kế web đang ngày càng sử dụng bảng màu để thực hiện nguyên tắc thiết kế cơ bản nhất: một trang web phải khác biệt so với các trang web ngang hàng.

Khỉ tối thiểu

Không gian trống, các phần tử lớn

Từ đầu đến cuối, nó có cơ sở tối giản, có nghĩa là nó áp dụng các nguyên tắc cơ bản: khối nội dung lớn, phần tử lớn, không gian trống, thiếu sự ồn ào và kiêu căng không cần thiết.

Thiết kế râu

Thiết kế phẳng các biểu tượng, nút bấm, hình minh họa

Các nút, biểu tượng, huy hiệu và hình minh họa cũng có dạng 2D. Chúng phải tương ứng với phong cách đã chỉ định trên tất cả các trang của trang web, truyền tải tâm trạng của chính trang web và dễ hiểu đối với bất kỳ người dùng nào.

Chọn màu cho biểu tượng cũng như chính biểu tượng - một nhiệm vụ không hề dễ dàng. Bạn có thể sử dụng màu sắc tinh khiết. Trong nỗ lực trang trí thiết kế, bạn cần suy nghĩ về cách làm cho trang web trở nên dễ sử dụng. Một mặt, điều quan trọng là không vi phạm phong cách, nhưng mặt khác, cần làm cho các biểu tượng trở nên nổi bật. Trong các hình minh họa, chúng tôi cố gắng tối giản hóa, tránh các hiệu ứng 3D phổ biến trước đây.

Đọc thêm: Hơn 20 trang web truyền cảm hứng với thiết kế minh họa phẳng

Ví dụ về các mẫu trang web có thiết kế phẳng UI phẳng

Ví dụ về các trang web theo phong cách Thiết kế phẳng

Danh tính

Tập thể thiết kế 83

điên cuồng

Nhóm ô

Quỹ SLCL

nỉ của tôi

Behzad

Atlant

Đơn giản như sữa

Gia đình Weranda

Người phát triển các ứng dụng và trang web di động, đã viết một chuyên mục cho chúng tôi và sắp xếp mọi thứ vào vị trí của nó liên quan đến thiết kế vật liệu và phẳng.

Qua nhìn chung, sự khác biệt giữa thiết kế phẳng ( Thiết kế phẳng) và Thiết kế Vật liệu rất tinh tế. Đối với một người không có kiến ​​thức sâu về thiết kế đồ họa, chúng thực sự có vẻ rất giống nhau. Trong bài viết này, tôi sẽ cố gắng “làm sáng tỏ” một số khác biệt giữa chúng. Bạn sẽ nhận được những kiến ​​thức bổ sung rất cần thiết để không vô tình làm tổn thương đến bản chất mỏng manh của nhà thiết kế.

Một ít lịch sử

Trước khi bắt đầu nói về sự khác biệt giữa hai xu hướng thiết kế phổ biến nhất, hãy cùng tìm hiểu xem chúng đến từ đâu. Có ý kiến ​​​​cho rằng thiết kế vật liệu được tạo ra trên cơ sở phẳng. Vậy thì thiết kế phẳng đến từ đâu?

tính đa hình

Khi nói đến giao diện người dùng và thiết kế web, khái niệm đa dạng đề cập đến một cách tiếp cận có ý tưởng chính là bắt chước. Không đi sâu vào chi tiết, chỉ cần nhớ các giao diện của Apple trước đây sự xuất hiện của iOS 7 với “kết cấu, ánh sáng và hiệu ứng khoa trương chân thực”.

Nỗ lực làm cho các đối tượng kỹ thuật số trông giống như các đối tượng kỹ thuật số của chúng. thế giới thựcđược chứng minh là do nhu cầu tạo điều kiện thuận lợi cho người dùng tương tác với thiết bị. Trên thực tế, chính vì lý do này mà tất cả các giao diện có họa tiết thực tế đều chiếm ưu thế thế giới kỹ thuật số trong nhiều năm. Thiết kế Skeuomorphic thực hiện rất tốt công việc giúp người dùng chuyển đổi liền mạch từ thế giới thực sang thế giới kỹ thuật số.

Tuy nhiên, với sự hưng thịnh công nghệ di động dần dần cần phải tập trung chủ yếu vào sự tiện lợi và dễ sử dụng. Đồng ý, trong lĩnh vực này cần phải tạo ra giải pháp di động, Có sẵn từ các thiết bị khác nhau, tăng đáng kể. Và tại thời điểm này, sự đơn giản trở thành tiêu chuẩn thiết kế mới.

Lưu ý: Trong mọi trường hợp, đừng nghĩ rằng tính đa hình đã biến mất hoàn toàn. Nó được sử dụng rộng rãi trong các trò chơi cần tạo ra một thế giới chân thực và giúp người chơi cảm nhận được nhân vật của mình để có thể hòa mình sâu sắc vào quá trình chơi.

Thiết kế phẳng

Phong cách này hoàn toàn không có bất kỳ vật thể ba chiều nào. Nói một cách đại khái, thiết kế phẳng thiếu các yếu tố phong cách như bóng đổ, họa tiết, độ dốc, nhưng lại chú ý đến cách chơi của phông chữ, màu sắc và biểu tượng. Nhưng tại sao tất cả điều này lại cần thiết? Đáp án đơn giản.

Thứ nhất, thiết kế phẳng giúp giảm đáng kể thời gian tải trang. Sự vắng mặt của các chi tiết đa hình “nặng” (ví dụ: các lớp, phông chữ serif, độ chuyển màu) làm cho các thành phần thiết kế phẳng “nhẹ hơn”, từ đó tăng tốc đáng kể thời gian tải. Hơn nữa, các phần tử phẳng trông hấp dẫn như nhau trên cả hai màn hình. độ phân giải cao, và với mức thấp.

Thứ hai, hình ảnh đơn giản có thể truyền đạt ý tưởng của bạn đến người dùng nhanh hơn các minh họa chi tiết: chúng có tính sơ đồ và do đó khá dễ hiểu.

Và dĩ nhiên, biểu tượng phẳng với sự tương đối bằng phông chữ đơn giản có thể hướng sự chú ý của người dùng đến nội dung thực sự quan trọng.

Ngày nay, thiết kế phẳng đã nhận được sự công nhận xứng đáng, nhưng nó vẫn có những vấn đề. Ví dụ rõ ràng nhất về những vấn đề như vậy là Phiên bản Windows 8 bởi Microsoft. Hệ điều hành này được coi là hệ điều hành tiên phong về thiết kế phẳng và hỗ trợ khái niệm thiết kế Metro. Điều dẫn đến vấn đề là công ty cho rằng cần phải chú ý đến kiểu chữ hơn là bản thân đồ họa.

Kết quả từ bài kiểm tra khả năng sử dụng Windows 8 do NN Group thực hiện cho thấy người dùng gặp khó khăn trong việc phân biệt các đối tượng có thể nhấp vào và không thể nhấp vào. Người dùng phàn nàn rằng các đối tượng có vẻ tĩnh lại thực sự có thể nhấp vào được. Kết quả là sứ mệnh chính của công ty - giúp người dùng giải thích chính xác hệ thống - đã thất bại.

Một công ty khác thường gắn liền với thiết kế phẳng là Apple. Họ đã loại bỏ các yếu tố thiết kế đa dạng trong phòng điều hành di động hệ thống iOS 7, phát hành năm 2013. Lần chuyển đổi này được đón nhận tốt hơn một chút, chủ yếu là do công ty không cố gắng cập nhật hoàn toàn khái niệm giao diện người dùng mà chỉ đơn giản là thêm một số thay đổi theo hướng thiết kế phẳng. Điều này mang đến cho người dùng cơ hội sử dụng sản phẩm bằng cách dựa vào trải nghiệm trước đây của họ với các hệ điều hành và các trang web.

Vật liệu thiết kế

Hãy làm rõ ngay bây giờ: Material Design giống một sản phẩm có thương hiệu hơn là một xu hướng thiết kế tự phát đã được chấp nhận rộng rãi. Đây là điểm khác biệt chủ yếu của nó với thiết kế phẳng.

Khi gọi vật liệu thiết kế là “có thương hiệu”, ý tôi là nó có một tập hợp hoàn chỉnh các khuyến nghị và nguyên tắc được xác định rõ ràng mà mọi nhà thiết kế có lòng tự trọng đều tuân theo. Khá rõ ràng tại sao Google giới thiệu Thiết kế Vật liệu của mình: cần phải thống nhất thiết kế để các ứng dụng trông giống nhau trên mọi thiết bị. nhiều Android thiết bị.

Mặc dù khá hữu dụng nhưng thiết kế phẳng vẫn bị coi là khó hiểu. Sự thật là các vật thể phẳng trên màn hình có thể gây nhầm lẫn cho người dùng (đặc biệt là những người chưa có kinh nghiệm sử dụng giao diện di động và web). Do đó, thiết kế vật liệu cố gắng mang lại các yếu tố đa dạng, nhưng ở dạng đơn giản hóa rất nhiều. Hình ảnh trông phẳng, đặc biệt khi Chúng ta đang nói về về màu sắc nhưng vẫn mang tính đa chiều do có sự góp mặt của trục Z.

Nói cách khác, thiết kế vật liệu có thể được gọi là phiên bản cải tiến của thiết kế phẳng với các yếu tố đa dạng - hoạt hình, bóng và lớp. Bằng cách này, bạn có thể làm cho sản phẩm trở nên trực quan hơn về mặt điều hướng và tránh sự phức tạp không cần thiết trong phong cách tổng thể.

Ưu và nhược điểm của thiết kế phẳng

Hãy bỏ lại lịch sử phát triển của các phong cách và chuyển sang một điều quan trọng hơn - hãy liệt kê những điểm mạnh và mặt yếu thiết kế phẳng.

  • Chủ nghĩa tối giản và phong cách
  • Trực giác. Bạn sẽ dễ dàng truyền đạt ý tưởng của mình tới người dùng hơn.
  • Tiết kiệm thời gian và nguồn lực. Các trang tải nhanh hơn nhiều với mức tiêu thụ băng thông ít hơn.
  • Tập trung vào nội dung. Giao diện không có chi tiết không cần thiết, có thể làm xao lãng thông tin thực sự có giá trị.
  • Có vẻ tốt như nhau trên nhiều thiết bị khác nhau, có thể là trình duyệt trên PC hoặc điện thoại thông minh.
  • Tăng tốc quá trình phát triển thiết kế trang web hoặc ứng dụng bằng cách loại bỏ những chi tiết thiết kế không cần thiết.
  • Phong cách tối giản.
  • Khá trực quan ở mức độ trực quan. Thiết kế vật liệu sẽ dễ nhận biết như nhau người dùng có kinh nghiệm, và dành cho người mới bắt đầu.
  • Độ lệch hình vừa phải. Mọi thứ trông thực tế hơn nhờ sử dụng trục Z (một khái niệm độc đáo của Google).
  • Có bộ tài liệu hướng dẫn được cập nhật liên tục. Vì vậy, bất kỳ nhà thiết kế nào cũng có thể nhờ đến họ nếu gặp khó khăn trong quá trình làm việc.
  • Khuyến khích hoạt ảnh cho các giải pháp web. Không cần phải nhắc bạn rằng mọi người yêu thích sự chuyển động đến mức nào. Ngoài ra, hoạt ảnh cho phép bạn làm cho giao diện rõ ràng và trực quan hơn.
  • Có chủ sở hữu (công ty Google). Vì vậy, mọi thắc mắc và đề xuất cải tiến nên được gửi đến chủ sở hữu.
  • Do trục Z nên quá trình thiết kế có thể mất nhiều thời gian hơn để hoàn thành.
  • Các yếu tố hoạt hình đòi hỏi nhiều tài nguyên hơn.
  • Việc tuân thủ cứng nhắc các nguyên tắc có thể hạn chế tính độc đáo của thiết kế.

Tóm tắt

Trên thực tế, một trong những phương pháp thiết kế đang được xem xét không nên được coi là có lợi thế rõ ràng so với phương pháp kia, vì phong cách phẳng và chất liệu luôn đi cạnh nhau. Cả hai đều cực kỳ nổi tiếng và cả hai đều không có chủ nghĩa hiện thực quá mức. Thiết kế vật liệu là sự kế thừa của thiết kế phẳng, trong khi bản thân thiết kế phẳng là một phản ứng đối với các giải pháp quá nặng nề và thực tế. Thiết kế vật liệu đã bổ sung thêm một thứ mà thiết kế phẳng luôn cố gắng tránh xa - một chút đa dạng. Mặc dù có một điều sẽ luôn khác nhau giữa các cách tiếp cận này: thiết kế vật liệu là sản phẩm độc quyền Google và thiết kế phẳng là kết quả của sự kết hợp của một số phương pháp thiết kế nhằm hướng tới sự đơn giản tổng thể.

Trên thực tế, thiết kế phẳng đã phát triển rất nhiều trong những năm gần đây, từ phong cách “phẳng” hoàn toàn sang phong cách “bán phẳng”. Giờ đây, nó cho phép sử dụng các lớp và bóng tinh tế để cho phép các đối tượng xuất hiện sâu hơn so với trước đây. Vì vậy, bạn và tôi đều là những người cùng thời với thiết kế phẳng 2.0.

Cuối cùng, không có gì ngăn cản bạn cố gắng kết hợp hai phương pháp này để tạo ra một sản phẩm thực sự hữu ích và thân thiện với người dùng. Vì vậy, hãy lấy cảm hứng từ các bậc thầy về thiết kế vật liệu và phẳng và bắt tay vào làm!