Aurora UI – xu hướng hình ảnh mới cho năm 2021

Aurora UI – xu hướng hình ảnh mới cho năm 2021

Nền gradient hữu cơ, mờ sẽ trở thành xu hướng trong năm nay.

Thiết kế giao diện người dùng và đặc biệt là mặt hình ảnh, nghệ thuật hơn của nó không ngừng phát triển. Trong khi hầu hết các sản phẩm hiện tại đều lặp lại các mẫu IA giống nhau, đáng tin cậy và nổi tiếng, giao diện người dùng và Đề xuất giá trị là những điểm khác biệt lớn nhất mà sản phẩm có thể có.

Không ai sẽ thử và thiết kế lại quy trình đăng ký hoạt động tốt trong hàng nghìn ứng dụng khác – chắc chắn là chúng tôi sẽ chỉnh sửa nó và hy vọng với một số nghiên cứu, nhưng cuối cùng, nó sẽ chỉ là một bản sao của những gì người dùng đã có biết rôi.

Tất cả các hình thái

Cả hai chủ nghĩa Neumorphism Glassmorphism là phản ứng đối với con lắc xu hướng thiết kế đang quay trở lại từ chủ nghĩa tối giản cưỡng bức. Động lực ở đây cũng lớn như khi nó xoay chuyển theo chiều ngược lại – từ chủ nghĩa Skeuomorphism đến chủ nghĩa tối giản chức năng của thiết kế Material Design và xu hướng thiết kế Hiện đại.

Trước khi cảm hứng Hiện đại / Vật chất được giữ vững, chúng ta đã có một khoảng thời gian ngắn về chủ nghĩa tối giản, điều đó không thực sự bắt kịp nhiều. Bây giờ sau năm 2014 con lắc đang dao động trở lại.

Tôi muốn nói rằng phải mất khoảng 7 năm để một xu hướng thiết kế bắt đầu đảo ngược (cho hoặc nhận). Nền gỗ và da khâu của iPhone đầu tiên (2007) đã nhường chỗ cho các thiết kế tối giản của iOS 7 (2013), và năm 2020 bắt đầu mang thế giới thực, những cảm hứng hữu cơ trở lại ngay.

Chắc chắn, cái cuối cùng chỉ là 3D trong Hệ điều hành máy tính để bàn, nhưng nó đang thử nghiệm vùng nước cho sự trở lại của 3D.

Với việc sử dụng thẩm mỹ kính mờ (cả Microsoft và Apple), các biểu tượng đa hình (bản cập nhật Mac OS Big Sur) nhìn chung mọi người đã phản ứng tích cực với sự thay đổi này.

Chúng tôi muốn các sản phẩm mà chúng tôi sử dụng phải được “chế tác” và có linh hồn, thay vì là một nhãn trắng thực dụng từ một hệ thống thiết kế (như Material Design).

Trong ví dụ phóng đại này, bạn có thể thấy rằng chủ nghĩa tối giản bắt buộc chỉ với sự khác biệt về màu sắc là không đủ để một sản phẩm được yêu thích.

Không có gì sai với chủ nghĩa tối giản, ngay cả ở những thái cực của nó, nhưng nó làm cho mọi thứ hòa trộn với nhau thành một khối giống nhau. Sự đa dạng về thiết kế đã giảm đi đủ lâu. Người dùng muốn thay đổi. Các ví dụ Android ở trên trông nhàm chán theo cách thực dụng nhất. Một số người sẽ cho rằng điều đó không sao, điều đó là tốt. Nhưng cuộc sống của chúng ta không chỉ là hoàn thành các nhiệm vụ trong một số danh sách việc cần làm. Chúng tôi muốn được vui mừng.

Động lực mới, đa dạng của tất cả các xu hướng mới này cũng đến từ việc văn hóa thủ công đang có sự hồi sinh. Thay vì một chiếc bàn IKEA tối giản, không bắt mắt khác, chúng tôi muốn loại gỗ không đồng đều có kết cấu và tuổi thọ cho ngôi nhà của chúng tôi. Tương tự với ví, ba lô, quần áo, v.v. Chúng tôi muốn những thứ chúng tôi sử dụng được “làm thủ công” thay vì sản xuất hàng loạt.

Cả hai bàn ăn đều có chức năng như nhau, nhưng hầu hết mọi người sẽ thích ăn từ bàn bên phải.

Xin chào, Aurora

Tuy nhiên, vấn đề chính với các giao diện là chúng không thể thực sự quá “sôi nổi”, hoặc chúng sẽ ngừng hoạt động. Vì vậy, làm thế nào chúng ta có thể kết hợp chức năng với một hình thức trông đẹp và “hữu cơ”?

Bạn biết đấy, cũng giống như Northern Lights, mà tôi nghĩ là một cái tên phù hợp cho kiểu nền này.

Ảnh của Mike Swigunski trên Unsplash

Nếu bản thân giao diện (các nút, các trường, nhãn) không thể thực sự thay đổi nhiều như vậy, thì tùy thuộc vào nền để phân biệt. Đây là nguyên tắc cơ bản đằng sau tất cả các “hình thái” và phong cách Aurora mới này.

Sử dụng thiết kế tối giản cho mọi thứ có chức năng và chỉ sử dụng đồ trang trí. Nếu làm đúng, nó cũng có lợi ích là có thể truy cập được, vì giao diện thực tế – tức là những thứ bạn sử dụng đều có thể truy cập được. Vì vậy, nếu ai đó không thể nhìn thấy một số gradient nền tinh tế, tất cả những gì họ thiếu là trang trí.

Như thẻ neumorphic này cho thấy, nếu tất cả các phần tử * quan trọng * có thứ bậc phù hợp, thì khả năng nhìn thấy chính thẻ đó sẽ không còn quan trọng nữa.

Đây cũng là lý do tại sao tôi tin rằng Neumorphism CÓ THỂ được truy cập nếu nó chỉ được sử dụng cho các thẻ và các thẻ có hệ thống phân cấp phù hợp. Chỉ cần không sử dụng nó cho các trường văn bản, nút, v.v. và độ tương phản sẽ không phải là vấn đề.

Kết hợp nền “sáng tạo” với các thành phần giao diện người dùng tối thiểu là sự thỏa hiệp tốt nhất giữa chức năng và khả năng truy cập, nhưng như với mọi thứ có thể truy cập, nó phải được thực hiện đúng.

Hình nền Big Sur với Glassmorphism và phiên bản mờ của hình nền bên cạnh.

Chứng nhận Glassmorphism

Trước khi chúng ta đi đến hình nền, điều đáng nói là phong cách này hoạt động đặc biệt tốt với Glassmorphism và Apple đã biết điều đó bằng cách tạo ra một phiên bản ít mờ hơn của các mẫu màu không đều làm hình nền Big Sur chính của họ.

Apple và Microsoft đang dẫn đầu trong việc khám phá những xu hướng mới này, nhưng họ không còn là những xu hướng duy nhất nữa.

Stripe là một ví dụ điển hình về một công ty phổ biến, chính thống sử dụng cả nền Aurora VÀ các yếu tố hình thủy tinh, nhưng vẫn giữ cho giao diện người dùng quan trọng rõ ràng và dễ đọc.

Làm thế nào để bắt đầu?

Bạn có thể sử dụng các thành phần giao diện hiện có của mình với phong cách này, miễn là chúng có đủ độ tương phản, kích thước và mục tiêu cảm ứng đủ tốt.

Có ba cách chính mà bạn có thể sử dụng để tạo hiệu ứng này.

Hình mờ

Phương pháp hình dạng mờ là tất cả về việc tạo ra các hình dạng bất thường (tốt nhất là hình bầu dục), sau đó làm mờ chúng và trộn với nhau để tạo ra một gradient không đều.

Nhiều tô màu Gradient

Phương pháp này là sự kết hợp của các tô màu chuyển sắc (hướng tâm hoạt động tốt nhất) với độ mờ giảm dần về phía cạnh ngoài của tô màu. Chỉ cần kéo các tay cầm xung quanh để tìm kết hợp tốt nhất. Càng trong suốt, cạnh ngoài chồng lên nhau thì màu sắc sẽ càng hòa trộn. Bạn cũng có thể hợp nhất phương pháp này với phương pháp đầu tiên cho một cái gì đó thậm chí còn tùy chỉnh hơn.

Chỉ làm mờ một bức ảnh

Nếu bạn có một bức ảnh đã có một vài chuyển đổi màu sắc nhẹ nhàng, bạn có thể làm mờ (với giá trị làm mờ tối đa) ảnh và có hiệu ứng hữu cơ này với nỗ lực tối thiểu.

Tôi cũng đã thực hiện hai video về cách đạt được hiệu ứng này trong Figma và Sketch. Đây là cái đầu tiên:

Bước tiếp theo

Sau đó, chỉ cần chọn kiểu lớp phủ ưa thích của bạn (hình thủy tinh, độ trong suốt tiêu chuẩn hoặc không trong suốt) và bạn có cho mình một giao diện người dùng kiểu Aurora đẹp mắt.

Đảm bảo tất cả các phần tử giao diện quan trọng đều có thể truy cập được và giao diện người dùng của bạn nổi bật so với đám đông, ít nhất là cho đến khi mọi người khác làm mờ hình nền của họ và con lắc sẽ bắt đầu lắc lư trở lại.

Chúng ta vẫn nên có vài năm (thử nghiệm) trước khi điều đó xảy ra.

Tôi là tác giả của 🧑🏻‍💻 Thiết kế giao diện người dùng & 🦄 Frontend Unicorn . 💡 Bạn có thể xem các khóa học thiết kế miễn phí của tôi trên YouTube. Hãy theo dõi tôi trên Twitter: @michalmalewicz và xem các hướng dẫn thiết kế miễn phí của chúng tôi trên 📲 instagram: @ hype4academy

Theo: michalmalewicz

 

Default image
KinhNghiemAZ
Bài viết: 6874

Bình luận