Thiết kế phẳng và thiết kế bán phẳng: nó là gì và cách sử dụng nó

Thiết kế phẳng đã là một lựa chọn thiết kế tiêu chuẩn trong một thời gian và có lý do chính đáng cho điều đó. Nó được sắp xếp hợp lý, hiện đại và có lẽ quan trọng nhất là nó cung cấp thông tin nhanh — tất cả đều trông sạch sẽ và mới mẻ. Đối với tất cả những gì mà thiết kế phẳng tốt có thể làm cho các thương hiệu, thật dễ dàng để nhìn vào một hình ảnh phẳng và nghĩ rằng việc tự mình tạo ra một hình ảnh đó là đơn giản, nó không đòi hỏi kỹ năng hay nỗ lực.

Nhưng không phải vậy đâu. Xu hướng này có lịch sử lâu đời và có rất nhiều tư duy thiết kế giúp tạo ra chất thiết kế phẳng của bạn. Đó là điểm xuất phát của hướng dẫn này, để giúp bạn hiểu được tâm lý đã hình thành nên thiết kế phẳng và cách tốt nhất để áp dụng tính thẩm mỹ cho các dự án trong tương lai của bạn. Dưới đây là một số mẹo mà bạn không muốn bỏ lỡ, bởi vì mặc dù thiết kế phẳng đã tồn tại được bao lâu, nhưng có vẻ như nó sẽ không sớm biến mất.

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

Thiết kế phẳng là như thế nào: một phong cách thiết kế hai chiều và tự hào về nó. Không có bóng râm, không có ánh sáng chói bổ sung và không có điểm nổi bật để làm cho hình ảnh trông 3D. Thay vào đó, thiết kế phẳng bao gồm phong cách 2D để truyền đạt thông tin nhanh chóng.

Bản chất thiết kế phẳng hiệu quả là không phô trương và điều này có nghĩa là nó thường kết hợp các yếu tố thiết kế “vô hình”, những lựa chọn từ phía bạn mà người dùng sẽ không nhận thấy. Người dùng cảm nhận và tương tác với những yếu tố này, nhưng không thực sự “nhìn thấy” chúng — ngay cả khi chúng là một phần của thiết kế trực quan. Hãy xem một vài ví dụ:

• Sử dụng biểu tượng giỏ hàng để thông báo nơi người dùng phải nhấp để hoàn tất giao dịch của họ. Có, biểu tượng hiển thị nhưng không có lời kêu gọi hành động “nhấp vào đây”.
• Chia nhỏ thông tin trên một trang với các màu nền khác nhau. Tạo cho mỗi đoạn một cú đấm riêng biệt bằng cách hiển thị nó trên màu riêng của nó.
• Sử dụng các kết hợp màu cụ thể để cho người xem biết cách liên quan đến các hình ảnh và thông tin nhất định. Khi điều gì đó khẩn cấp, hãy làm cho nó nổi bật bằng dòng chữ màu đỏ tươi.

Đây là cách thiết kế phẳng hoạt động trong thiết kế web: tất cả thiết kế web được tạo ra để hướng dẫn người dùng qua trang web hoặc ứng dụng và thiết kế phẳng tiếp cận vai trò này theo một cách rất khác so với người tiền nhiệm của nó, thiết kế lệch hình. Trong khi thiết kế lệch hình sử dụng các dấu hiệu thị giác và thính giác để cho người dùng biết nó hoạt động như thế nào bằng cách so sánh nó với một vật phẩm tương tự đã hoàn thành cùng một nhiệm vụ, thì thiết kế phẳng đưa người dùng bằng tay và hướng dẫn họ qua ứng dụng / trang web, khiến người dùng cảm thấy như một trải nghiệm nhập vai, trực quan.

Lịch sử của thiết kế phẳng

Thiết kế phẳng được tạo ra để đáp ứng với thiết kế lệch hình, nhưng đó không phải là toàn bộ câu chuyện. Giống như hầu hết các phong trào thiết kế khác, thiết kế phẳng bắt nguồn từ các xu hướng thiết kế khác – nổi bật nhất là phong cách Thụy Sĩ, Chủ nghĩa Hiện đại và Bauhaus.

Về mặt thẩm mỹ, thiết kế phẳng phần lớn được lấy cảm hứng từ phong cách Thụy Sĩ, còn được gọi là phong cách typographic quốc tế. Phong cách Thụy Sĩ mang đậm dấu ấn của bạn và không bao gồm bất kỳ yếu tố thiết kế nào không hoàn toàn cần thiết. Một số yếu tố thiết kế thang máy thiết kế phẳng trực tiếp từ phong cách Thụy Sĩ là:

• Độ tương phản cao
• Chủ nghĩa tối giản
• Việc sử dụng màu sắc và độ tương phản để tạo ra chiều sâu
• Sử dụng hiệu quả không gian
• Sử dụng các biểu tượng, thay vì kết xuất chính xác, để truyền đạt ý tưởng

Thiết kế phẳng xuất hiện khi chủ nghĩa lệch hình không còn cần thiết. Skeuomorphism là phong cách thiết kế sử dụng hình ảnh thực tế của các đối tượng tương tự để cho người dùng thấy các chương trình gần đúng với các đối tượng tương tự này hoạt động như thế nào. Thuyết hoài nghi cũng có thể liên quan đến các tín hiệu thính giác và xúc giác để đạt được mục tiêu tương tự. Hai ví dụ trong số này là âm thanh cửa trập được lập trình trong ứng dụng máy ảnh và quá trình đánh dấu văn bản trên màn hình bằng cách kéo ngón tay của bạn qua nó giống như bạn đang sử dụng bút đánh dấu trên giấy.

Thiết kế đa dạng giúp những người lớn lên trong thế giới analog dễ dàng điều hướng trong thế giới kỹ thuật số hơn. Khi bạn cần loại bỏ một tệp trong máy tính của mình, bạn chỉ cần kéo tệp đó qua biểu tượng thùng tái chế — đó là thiết kế lệch hình thực hiện những gì nó được tạo ra để làm. Khi bạn muốn gọi điện thoại, bạn nhấn vào biểu tượng trên điện thoại trông giống như một bộ thu điện thoại kiểu cũ. Nhưng đến những năm 2010, hầu hết chúng ta đã sử dụng máy tính hơn 20 năm. Một số người trong chúng ta chưa bao giờ biết đến một thế giới không có máy tính và truy cập internet phổ biến, và bất kể bạn thuộc thể loại nào, có lẽ bạn không cần thiết kế lệch hình để dạy bạn cách sử dụng ứng dụng nữa. Nhập thiết kế phẳng!

Thiết kế phẳng trong thời đại kỹ thuật số

Mặc dù các phong trào thiết kế được đề cập ở trên đã đặt nền móng, nhưng phải cần đến sự cạnh tranh của Internet và ngành để đưa thiết kế phẳng trở thành xu hướng chủ đạo.

Trước đây, thẩm mỹ chung của Apple là lệch lạc, và điều này đã thúc đẩy Microsoft đi theo hướng khác, bắt đầu với giao diện Windows Media Player và Zune từ đầu những năm 2000. Vào thời điểm Windows 8 ra mắt với giao diện hoàn toàn phẳng vào năm 2012, Microsoft đã khẳng định mình là người dẫn đầu xu hướng.

Chỉ còn là vấn đề thời gian trước khi các thương hiệu khác làm theo và cập nhật các thiết kế lệch lạc cũ của họ, như cách đổi thương hiệu phân cực của Instagram. Cuối cùng, ngay cả Apple cũng đã nhảy vào con đường thiết kế phẳng vào năm 2013 với iOS 7 và đến giữa những năm 2010, thiết kế phẳng đã xuất hiện ở khắp mọi nơi.

Ngày nay, bạn thấy thiết kế phẳng ở rất nhiều nơi mà bạn có thể không nhận ra nó — đó là toàn bộ vấn đề. Xu hướng đã vượt ra ngoài thiết kế giao diện để bao gồm minh họa, quảng cáo, thiết kế logo và hơn thế nữa. Thiết kế phẳng về bản chất được liên kết với chủ nghĩa tối giản, điều này làm cho nó hữu ích cho một số nhu cầu về thiết kế đồ họa và xây dựng thương hiệu. Hãy xem các thiết kế bạn thích, và có thể bạn sẽ thấy một loạt các điểm khác nhau trong thiết kế phẳng.

Thiết kế phẳng phát triển thành thiết kế bán phẳng

Thiết kế bán phẳng, còn được gọi là phẳng 2.0, là thiết kế phẳng với một vài nét vẽ thực tế được thêm vào, giống như bóng đổ. Đó là một phương tiện hài lòng giữa thiết kế phẳng và ba chiều — một lựa chọn để thực hiện khi bạn thích giao diện của thiết kế phẳng nhưng bạn không thể hoàn toàn cam kết loại bỏ tất cả các chi tiết thẩm mỹ khiến hình ảnh của bạn nổi bật trên trang.

Một lý do chắc chắn khiến bạn sử dụng thiết kế bán phẳng là để khắc phục những nhược điểm của thiết kế phẳng, chẳng hạn như phải cắt giảm lượng thông tin bạn có thể truyền đạt vì bạn bị thiết kế của mình đóng hộp và có nguy cơ người dùng không nhận ra nơi để nhấp hoặc cuộn vì bạn không thể làm cho các dấu hiệu của mình đủ rõ ràng.

Từ góc độ ít tiện dụng hơn, thiết kế bán phẳng tạo thêm sự thú vị về mặt hình ảnh cho hình ảnh. Thiết kế phẳng truyền thống rất hiệu quả, nhưng thiết kế bán phẳng cho phép các nhà thiết kế đạt được hiệu ứng tương tự mà không phải hy sinh tất cả những nét tinh tế và đặc biệt mang đến cho thiết kế sự tinh tế về phong cách hoặc cho phép bạn tận dụng các xu hướng như chuyển đổi màu sắc.

Khi nào sử dụng thiết kế phẳng
–

Sử dụng thiết kế phẳng bất kỳ lúc nào bạn có thông điệp cần truyền đạt một cách hiệu quả. Các thông điệp như “chạm vào đây”, “vuốt theo cách này” và “đây là cách sản phẩm hoạt động” là tất cả các loại thông điệp mà thiết kế phẳng truyền đạt tốt. Dưới đây là một số trường hợp phổ biến:

• Đồ họa thông tin, trong đó mục tiêu là biến một chủ đề phức tạp thành các ví dụ dễ hiểu
• Các trang Hướng dẫn sử dụng và Cách hoạt động trên các trang web hướng dẫn người dùng qua các hướng dẫn từng bước
• Quảng cáo, nơi người xem không tìm kiếm tài liệu và chắc chắn không muốn làm thêm công việc trí óc để hiểu nó
• Thiết kế logo và xây dựng thương hiệu trong đó khái niệm kinh doanh có thể không quen thuộc và cần truyền đạt sự rung cảm của nó ngay lập tức
• Biểu tượng ứng dụng và các thiết kế khác quá nhỏ đến mức quá chi tiết
• Giao diện trò chơi trên thiết bị di động trong đó người dùng có xu hướng là những game thủ bình thường tìm kiếm sự phân tâm, không phải là một số mô phỏng quá phức tạp
• Đối với các giao diện mà người dùng cần biết những gì tiếp theo ngay lập tức. Nếu bạn có một trang web dày đặc, nhiều trang có rất nhiều tính năng, thiết kế phẳng có thể không dành cho bạn. Nhưng nếu bạn đang hướng tới trở thành “Uber của [chèn ngành mà bạn muốn phá vỡ tại đây]”, thì căn hộ là con đường để đi

Mặc dù đây là những nghi ngờ thông thường khi nói đến thiết kế phẳng, nhưng phong cách này có đặc điểm riêng và không có gì ngăn cản bạn tận dụng nó vì những lý do thẩm mỹ hoàn toàn!

Khi nào không sử dụng thiết kế phẳng
–

Không sử dụng thiết kế phẳng khi hình ảnh của bạn mang tính hiện thực hoặc khi bạn dựa vào các chi tiết để kể toàn bộ câu chuyện. Dưới đây là một số ví dụ:

• Bìa sách có xu hướng thiên về hình ảnh thực tế hơn vì chúng bán các nhân vật và thế giới hư cấu. Tuy nhiên, các chủ đề về doanh nhân và tự lực có thể dựa vào thiết kế phẳng một cách an toàn vì chúng có xu hướng được viết ở định dạng ‘hướng dẫn’
• Áo phông đủ màu và thiết kế quần áo trong đó người mua sẽ muốn thứ gì đó thật chi tiết thể hiện phong cách của họ
• Đối với linh vật và thiết kế nhân vật, thường cần các chi tiết để tạo nên tính cách cho nhân vật
• Bao bì sản phẩm thường sử dụng các tác phẩm nghệ thuật bắt mắt và phức tạp hơn để cạnh tranh trên các kệ hàng
• Hình ảnh xã hội và các trang web dịch vụ công — đây là nơi bạn muốn làm nổi bật tính nhân văn và sự đa dạng

Nhận thiết kế phẳng ngay với các bước sau
–

Vì vậy, bạn muốn sử dụng thiết kế phẳng. Dưới đây là một số bước cần thực hiện nếu bạn muốn đảm bảo bạn làm đúng:

Đừng nhầm lẫn phẳng với nhàm chán

Thiết kế phẳng vốn đã tối giản. Nhưng chỉ vì một thiết kế không chi tiết không nhất thiết có nghĩa là nó nhàm chán. Thông thường, các thiết kế tối giản dễ quét và có kiểu dáng đẹp, cảm giác hiện đại. Thay vì đưa bạn vào giấc ngủ, họ đi đúng vào vấn đề. Cuối cùng chúng có nhàm chán hay không phụ thuộc vào nhà thiết kế.

Chìa khóa để tạo ra một thiết kế như thế này là sử dụng khoảng trắng để hướng mắt người xem đến những yếu tố quan trọng nhất. Bằng cách này, bạn có thể xây dựng ý nghĩa và sức hấp dẫn thẩm mỹ vào thiết kế phẳng của mình mà không bị rơi, phẳng.

Màu sắc, bối cảnh và độ tương phản là bạn của bạn

Chọn giao diện phẳng có nghĩa là bạn sẽ mất một số yếu tố chính thường tạo nên một thiết kế, chẳng hạn như bóng râm xung quanh một nút để cho biết rằng đó là hình ảnh có thể nhấp hoặc hình ảnh thực tế có thể khơi dậy sự đồng cảm ở người xem. Với hộp công cụ hạn chế hơn này, bạn phải sáng tạo với các công cụ bạn có như màu sắc, độ tương phản, bối cảnh và tỷ lệ.

Điều này có nghĩa là sử dụng màu sắc bão hòa hơn để nhấn mạnh văn bản hoặc nút nhất định và cung cấp manh mối ngữ cảnh của người dùng để giúp họ hiểu cách sử dụng các yếu tố nhất định, chẳng hạn như đặt mũi tên ở bên phải và bên trái của trang để yêu cầu người dùng vuốt sang phải và trái để biết thêm nội dung hoặc sắp xếp các liên kết theo chiều ngang theo cách giống như thanh công cụ. Những lựa chọn thẩm mỹ có chủ ý như thế này sẽ cho người xem biết cách sử dụng thiết kế của bạn khi không có các yếu tố thiết kế lệch hình.

Làm sống động thiết kế phẳng của bạn với hoạt ảnh

Hoạt hình và thiết kế phẳng là những người bạn tự nhiên. Điều này là do các bản vẽ chi tiết đòi hỏi nhiều công sức hơn để làm cho chuyển động trở nên thuyết phục (chẳng hạn như vẽ lại hình người ở nhiều tư thế khác nhau) trong khi thiết kế phẳng có thể loại bỏ các hình ảnh động đơn giản hóa.

Mặc dù bạn có thể sử dụng kỹ thuật này để kể chuyện hoặc thêm một số điểm nhấn vào logo của mình, nhưng việc tạo hoạt ảnh cho các yếu tố thiết kế phẳng cũng có thể là một cách để bù đắp cho những gì bạn đã mất khi loại bỏ bóng và họa tiết. Làm cho các yếu tố thiết kế bạn muốn làm nổi bật di chuyển để chỉ cho người dùng biết nơi hướng sự chú ý của họ.

Chọn một phông chữ thân thiện với phẳng

Bởi vì bạn ít phải làm việc với thị giác hơn, mọi lựa chọn thiết kế bạn thực hiện thậm chí còn nhiều hơn bình thường và kiểu chữ là một lựa chọn bạn không muốn bỏ qua.

Một nguyên tắc tốt cần tuân theo khi chọn phông chữ là nó nên lấy ý tưởng từ thiết kế phẳng — nghĩa là, giữ cho nó đơn giản và bỏ qua các yếu tố trang trí như serifs. Mặc dù một số phông chữ mới hoạt động ở dạng phẳng, những phông chữ khác — như phông chữ chặt và bất kỳ thứ gì kết hợp nhiều hình ảnh nhỏ — có thể khó hiển thị tốt trong một thiết kế phẳng. Một số ví dụ về sans serifs trông tuyệt vời với thiết kế phẳng bao gồm Telegrafico và Junction.

Căn hộ là nơi nó ở
–

Ngày nay, hầu hết mọi người đang xem thiết kế của bạn trên màn hình phẳng, vì vậy thay vì giả vờ hình ảnh không phải là thực tế, hãy nắm lấy độ phẳng. Thiết kế phẳng có thể vẫn được coi là một “xu hướng”, nhưng thực tế là nó đã tồn tại gần một thập kỷ chỉ cho thấy nó linh hoạt và có giá trị như thế nào.

Nếu bạn sợ phong cách này sẽ khiến thiết kế của bạn trông giống với tất cả những thiết kế khác, đừng rẻ tiền với những thứ chung chung. Làm việc với một nhà thiết kế có danh mục đầu tư chứa đầy các thiết kế phẳng độc đáo nói chính xác họ dành cho ai và chủ sở hữu của họ làm gì. Với nhà thiết kế phù hợp, thiết kế phẳng của bạn có thể xuất hiện trên màn hình.