Ai có thể quên GIF (Graphics Interchange Format:  Định dạng Trao đổi Hình ảnh) của những năm 90, hoặc xu hướng tập trung cập nhật nhiều hơn vào về thiết kế phẳng?

Gần đây, chúng ta đã nhìn thấy một sự đột biến trong việc phổ biến của thiết kế web đáp ứng, khi ngày càng nhiều các trang web tham gia dịch vụ lưu trữ trực tuyến để trở thành ‘mobile ready’ (trang web hoạt động tốt với các thiết bị di động). Nó thậm chí còn quan trọng hơn sự trỗi dậy của bản cập nhật Mobile Friendly của Google.

Hãy xem xét một số ví dụ phổ biến của nó trong năm nay và trong năm tới.

1. Thiết kế giao diện người dùng (UI)

Một trong những tác dụng phụ của thiết kế web đáp ứng là bạn có thể tìm thấy rất nhiều các trang web tương tự và giống nhau về cấu trúc. Tuy nhiên, thiết kế đáp ứng không có lỗi. Mà do sự gia tăng của các trang web WordPress và sự bùng nổ của thị trường theme có sẵn.

Có một cái nhìn giống nhau không nhất thiết phải là một điều xấu. Đó là bởi vì chúng ta đã thay đổi cách dùng web, mà đã dẫn đến rất nhiều các mẫu thiết kế giao diện người dùng thông thường. Thiết kế mẫu đã già cỗi và có rất ít cách đổi mới khi nói đến mô hình giao diện người dùng.

Photo credit: Cypress North

Nói cách khác, một bảng kiểm tra vẫn sẽ là một bảng kiểm tra và phải hoạt động như vậy. Cùng với một mô hình đăng nhập. Không có lý do thực sự để phát minh lại bánh xe. mô hình giao diện người dùng phải hướng dẫn người dùng thông qua một trãi nghiệm nghiệm trơn tru.

Dưới đây là một vài mẫu mà bạn cần phải làm quen với nó:

• Menu hamburger: Trong khi có một số chỉ trích về việc sử dụng mô hình này, nó vẫn được sử dụng rộng rãi làm cho các chức năng dễ dàng nhận biết cho người dùng.Photo credit:Silenza via awwwards
• Đăng ký tài khoản: Bạn sẽ tìm thấy mô hình này bất cứ khi nào bạn cố gắn đăng ký tài khoản cho một trang web. Có thể có một mẫu đơn để điền vào hoặc một nút cho phép bạn sử dụng một tài khoản xã hội để đăng ký. Hình thức mẫu đơn nhiều bước này cũng rất hiệu quả vì chúng “chia nhỏ ra” các yêu cầu, làm giảm rắc rối và khuyến khích người sử dụng thông qua quá trình này.Photo credit Typeform

• Cuộn dài (Long scroll): Đặt tất cả các yếu tố quan trọng của trên một bản gấp bây giờ đã là một huyền thoại nổi tiếng. Hơn nữa, hầu hết mọi người đều quen với việc cuộn dài với các thiết bị di động. Kỹ thuật này đặc biệt làm việc tốt cho các trang web muốn thu hút người dùng thông qua cách kể chuyện, và bạn vẫn có thể bắt chước một trang web có nhiều trang bằng cách phá vỡ các cuộn thành các phần rõ ràng.Photo credit: Vimeo

• Thẻ Layouts: Tiên phong bởi Pinterest, các thẻ có ở khắp nơi trên web vì nó trình bày thông tin trong những đoạn nhỏ hoàn hảo để quét qua. Mỗi thẻ đại diện cho một khái niệm thống nhất. Nó có vai trò như “dụng cụ chứa nội dung”, dạng hình chữ nhật làm cho chúng dễ dàng hơn để sắp xếp lại việc phân chia các thiết bị khác nhau.Photo credit: TheNextWeb

• Hero images (hình ảnh gây ấn tượng mạnh): Thị giác là giác quan mạnh nhất của con người, Những hình ảnh ấn tượng chất lượng cao là một trong những cách nhanh nhất để thu hút sự chú ý của người dùng. Nhờ những tiến bộ trong băng thông và nén dữ liệu mà người dùng sẽ không phải chịu đựng thời gian tải chậm chạp. Ở một layout thông thường bạn sẽ thấy được hero image trong quá trình cuộn, theo sau đó là các phần hoặc các thẻ được sắp xếp gọn gàng.

Photo credit: Maaemo

2. Rich Animations (Giàu hình ảnh động)

Ảnh động đang được sử dụng nhiều hơn để nâng cao cách kể chuyện của một trang web, khiến cho việc trải nghiệm mang tính tương tác và tính giải trí nhiều hơn.

Tuy nhiên, bạn không thể sử dụng tất cả các hình ảnh animation ở mọi nơi. Hãy xem xét một cách cẩn thận cho dù bạn chỉ thêm chúng vào như một cách để tăng thêm cá tính cho trang web của mình. Animation có thể được chia thành hai nhóm:

• Animation quy mô lớn: Chúng được sử dụng như một công cụ tương tác chính có tác động nhiều hơn đến người sử dụng – bao gồm các hiệu ứng như di chuyển giống như xu hướng parallax scrolling và các thông báo pop-up. (“Parallax”là từ thường được dùng trong video games 2D, sử dụng nhiều hình ảnh nền rồi cho chúng cùng lúc di chuyển song song với những tốc độ khác nhau, tạo ra ảo giác về chiều sâu khi nhìn vào. Đối với Web Design thì parallax scrolling được dùng để tạo hiệu ứng 3 chiều với các element liên tục thay đổi vị trí khi người dùng có thao tác cuộn chuột).
• Animation quy mô nhỏ:Thường gồm spinner, hover tool, loading bar và không đòi hỏi người dùng phải nhấp vào.

Chúng tôi sẽ mô tả 7 kỹ thuật animation phổ biến nhất:

• Loading animations (Hình ảnh động)

Slack via Lauren Tan

Chúng được sử dụng để mang lại sự trãi nghiệm thích thú cho người sử dụng và có tính giải trí cao. Những hình ảnh động theo xu hướng này thường được sử dụng phổ biến cho thiết kế phẳng, sự tối giản, Portfolio hay các trang web chỉ có 1 trang duy nhất…

• Navigation and menus (nonscrolling) (Điều hướng và menu)

Menu điều hướng ẩn đã trở nên ngày càng phổ biến, đặc biệt là có thể được sử dụng để tiết kiệm không gian màn hình. Như bạn có thể thấy trong các ví dụ dưới đây, bằng việc tạo ra các công cụ tạo mẫu kết hợp với UXPin, những hình ảnh động được sử dụng để tạo ra một menu khi nhấp chuột vào một nút cụ thể và ngăn chặn quá trình chuyển đổi không thích hợp (như một navigation drawer ẩn đằng sau biểu tượng menu hamburger)

Hiệu ứng di chuyển chuột cho một cảm giác trực quan hơn đối với các trang web khi người sử dụng di chuyển chuột qua các nội dung. Người dùng chắc chắn sẽ tự động có phản hồi thị giác ngay lập tức khi sử dụng tính năng di chuyển chuột.

• Hình ảnh dạng Gallery và Slideshows

Phòng trưng bày (Gallery) và trình chiếu ảnh (slideshow) là một cách hiệu quả để giới thiệu nhiều hình ảnh mà không sợ quá tải người sử dụng. Đây là những địa điểm tuyệt vời cho các nhiếp ảnh gia có thể trưng bày sản phẩm, và giới thiệu các sản phẩm thiết kế và Portfolio.

Sự chuyển động tự nhiên của các đồng tử trong đôi mắt chúng ta khi nhìn các hình động chân thật, và nó chính là công cụ hoàn hảo giúp thu hút sự chú ý của người dùng. Chuyển động cũng có thể giúp hệ thống phân cấp trực quan.. Điều này có thể giúp tăng thêm sự thích thú và thu hút.

Thanh cuộn dựa trên những hình ảnh động mang lại sự  kiểm soát hơn cho người dùng, những người có thể xác định tốc độ mở ra của các hình ảnh động.

• Hình ảnh nền / video

Một hình nền hoạt hình đơn giản có thể tăng thêm khả năng hiển thị cho một trang web, nhưng nên sử dụng ở mức độ vừa phải bởi có thể gây mất tập trung cho người dùng. Điều quan trọng là chúng có thể làm việc trên các phần riêng lẻ hoặc tạo ra một chuyển động nhẹ nhàng cho toàn bộ hình ảnh.

• Hover animations

Hiệu ứng di chuyển chuột cho một cảm giác trực quan hơn đối với các trang web khi người sử dụng di chuyển chuột qua các nội dung. Người dùng chắc chắn sẽ tự động có phản hồi thị giác ngay lập tức khi sử dụng tính năng di chuyển chuột.

Photo credit: Humaan

• Hình ảnh dạng Gallery và Slideshows

Phòng trưng bày (Gallery) và trình chiếu ảnh (slideshow) là một cách hiệu quả để giới thiệu nhiều hình ảnh mà không sợ quá tải người sử dụng. Đây là những địa điểm tuyệt vời cho các nhiếp ảnh gia có thể trưng bày sản phẩm, và giới thiệu các sản phẩm thiết kế và Portfolio.

Photo credit: Born Fighter via awwwards

• Motion animation (Hình ảnh động)

Sự chuyển động tự nhiên của các đồng tử trong đôi mắt chúng ta khi nhìn các hình động chân thật, và nó chính là công cụ hoàn hảo giúp thu hút sự chú ý của người dùng. Chuyển động cũng có thể giúp hệ thống phân cấp trực quan.. Điều này có thể giúp tăng thêm sự thích thú và thu hút.

Photo credit: Bugaboo via awwwards

• Scrolling (Thanh cuộn)

Thanh cuộn dựa trên những hình ảnh động mang lại sự  kiểm soát hơn cho người dùng, những người có thể xác định tốc độ mở ra của các hình ảnh động.

• Hình ảnh nền / video

Một hình nền hoạt hình đơn giản có thể tăng thêm khả năng hiển thị cho một trang web, nhưng nên sử dụng ở mức độ vừa phải bởi có thể gây mất tập trung cho người dùng. Điều quan trọng là chúng có thể làm việc trên các phần riêng lẻ hoặc tạo ra một chuyển động nhẹ nhàng cho toàn bộ hình ảnh.

 

 

3. Microinteractions (Những tương tác nhỏ)

Microinteractions là những tương tác nhỏ xảy ra xung quanh chúng ta, đơn giản như là việc bạn tắt báo thức trên điện thoại di động hay like một tấm hình thú cưng trên facebook.

Mỗi người đều thực hiện nhưng thao tác nhỏ này mà không cần suy nghĩ. Đó là lúc mà bạn bắt đầu một ngày với việc tương tác. Bằng cách tắt báo thức trên điện thoại di động của bạn, bạn đang tham gia vào một giao diện người dùng nào đó trong một khoảnh khắc ngẫu nhiên. Và ngày càng nhiều những tương tác này được ứng dụng vào các app và các thiết bị công nghệ.

Photo credit: Slack

Micro-tương tác có xu hướng giúp bạn làm những điều khác nhau như:

• Truyền đạt một trạng thái hoặc nhận lại một thông tin phản hồi
• Xem kết quả của một thao tác sử dụng.
• Giúp người sử dụng thao tác một ứng dụng nào đó.

Micro-tương tác là một phần quan trọng trong bất kỳ một ứng dụng nào.

Theo khuyến cáo trong Xu hướng thiết kế web năm 2015 và 2016, bạn sẽ muốn đảm bảo rằng những tương tác xảy ra gần như vô hình. Đừng quá đà và giữ cho nó đơn giản. Hãy xem xét từng chi tiết cẩn thận, và làm cho mỗi tương tác có cảm giác con người. Đó là làm cho cuộc trò chuyện văn bản và không phải máy móc.

Micro-tương tác là một phần quan trọng của hầu hết các dự án thiết kế kỹ thuật số. Bạn sẽ gặp khó khăn để thiết kế một trang web hoặc ứng dụng di động mà không bao gồm một số yếu tố, hoặc thời điểm mà người dùng cần phải tương tác với nó.

Mỗi loại tương tác dẫn người dùng đến trung tâm thiết kế mang tính con người hơn. Khái niệm này làm cho các thiết bị như là con người hơn và nó là chìa khóa cho việc tiếp thu và khả năng sử dụng.

 

4. Material Design: Sự phong phú hơn để thiết kế phẳng

Năm ngoái, Google tung ra một phong cách ngôn ngữ mới là Material Design. Đây là một phong cách thiết kế sử dụng hiệu ứng đổ bóng và các khái niệm về chuyển động và chiều sâu để tạo ra các thiết kế có tính thực tế hơn cho người dùng.

Photo Credit: Google Now

Mục đích chính của phong cách Material Design là tạo ra sự sạch sẽ, thiết kế modernistic sẽ tập trung vào UX. Trong khi thẩm mỹ thiết kế của Google có người không đồng tình, nó hầu như được ca ngợi như sự thay đổi cuộc chơi.

Với cái nhìn tối giản của nó, Material Design có rất nhiều điểm chung với xu hướng ngày càng tăng – thiết kế phẳng. Material Design tận dụng chiều sâu và đổ bóng, cho phép có độ sâu hơn thiết kế phẳng thuần túy.

Photo credit: Angular

Trước đây, chúng ta đã nhìn thấy phần lớn các dự án Material Design giới hạn trong thiết kế app. Khi Google công bố Material Design Lite trong tháng bảy, nó phù hợp hơn với các trang web. Tuy nhiên, Material Design được dùng để cung cấp giao diện tuyệt vời và trãi nghiệm người dùng  trên các thiết bị. Lite sử dụng CSS, HTML và JavaScript và được dự định làm cho nó đơn giản để thêm cái nhìn và cảm nhận của Material Design đến các trang web.

Material Design Lite không dựa trên bất kỳ khuôn khổ cụ thể, vì vậy các nhà thiết kế có thể sử dụng một loạt các công cụ của front-end để tạo ra các trang web. Nó cũng nhẹ nhàng hơn khi chuyển thành code.

 

5.  Responsive Design (Thiết kế đáp ứng)

Thiết kế web đáp ứng cũng trở nên rất phổ biến trong những năm gần đây nhờ vào sự gia tăng của việc sử dụng Internet trên di động.

Photo credit: UXPin

Thiết kế đáp ứng khá an toàn như là phương thức thiết kế tương đối đơn giản và giá rẻ cho các doanh nghiệp để xây dựng một trang web điện thoại di động thân thiện với đầy đủ các chức năng cần thiết. Nhưng thiết kế đáp ứng đi kèm với một số vấn đề nếu không được thực hiện đúng cách, hiệu suất quan trọng nhất.

Để đảm bảo rằng sự đáp ứng phản ứng ở đỉnh cao nhất của khả năng nó có, theo Guy’s Pod, các nhà thiết kế nên:

• Tránh sử dụng JavaScript và tải hình ảnh CSS sử dụng màn hình hiển thị: thẻ không. Điều này vẫn tải các hình ảnh vào thiết bị và tăng thêm dung lượng không cần thiết cho một trang.
• Sử dụng hình ảnh đáp ứng được xác định bằng một tỷ lệ phần trăm.
• Sử dụng tải có điều kiện cho JavaScript: rất nhiều các thành phần JavaScript được sử dụng trên một trang web cho máy tính để bàn sẽ không được sử dụng trên các thiết bị nhỏ hơn. Đặc biệt chú ý đến các kịch bản của bên thứ ba: chúng được sử dụng để chia sẻ xã hội thường tác động tiêu cực và làm giảm hiệu suất.
• Sử dụng RESS – Responsive và Server Side
• Áp dụng thử nghiệm hiệu suất vào quá trình này để đo lường và tối ưu hóa từng trang web một cách hiệu quả.

Hiệu suất không chỉ quan trọng đối với UX, mà còn quan trọng đối với Google trong sự nổi lên của bản cập nhật Mobile Friendly được phát hành vào tháng Tư năm 2015. Thiết kế web đáp ứng cũng rất tương thích với sự tối giản, sự cần thiết để giảm dung lượng của trang web. Nó cũng tuyệt vời để làm việc với các thẻ và thiết kế đáp ứng khi nó có thể dễ dàng tái cơ cấu để phù hợp với bất kỳ breakpoint hoặc kích thước màn hình (như sắp xếp lại các khung chứa nội dung hình chữ nhật).

Photo credit: The Guardian

Thiết kế web đáp ứng đang chuyển từ xu hướng sang áp dụng nhiều hơn trong thực tế. Và các nhà thiết kế đã đưa ra những cách thông minh để thu được những vấn đề xung quanh và những vấn đề về tốc độ.

Không còn nghi ngờ gì nữa, thiết kế đáp ứng rất hữu ích và linh hoạt, nhưng nó cũng cần nhanh như tia chớp để cung cấp một trãi nghiệm người dùng tuyệt vời.

 

6. Thiết kế phẳng không biến mất nhanh chóng

Thiết kế phẳng đã tồn tại được một khoảng thời gian và tương thích với các xu hướng khác như sự tối giản, thiết kế web đáp ứng và thiết kế vật liệu.

Photo credit: Beoplay via awwwards

Trong tương lai, có thể chúng ta sẽ thấy những xu hướng tiếp theo trong thiết kế phẳng trở thành vị trí hàng đầu.

• Long shadow (đổ bóng dài): Mang lại chiều sâu cho thiết kế phẳng.

• Sự phối hợp màu rực rỡ: Khung giao diện người dùng phổ biến và các mẫu đã khiến nhiều người bắt đầu sử dụng các màu sắc rực rỡ hơn trong các thiết kế của họ.
• Typography đơn giản: Kiểu chữ đơn giản giúp đảm bảo văn bản vẫn dễ đọc và có thể đọc được trong thiết kế phẳng.
• Nút Ghost: Điều này cho phép có các chức năng mà không mất tập trung từ UX và thường được biểu diễn dưới dạng bảng phác thảo, các liên kết có sự thay đổi khi người dùng di chuyển chuột qua chúng.
• Sự tối giản: Cắt giảm số lượng các yếu tố để tạo ra sự thuần khiết, gọn gàng của giao diện người dùng .

Lời khuyên bổ sung về Những Xu hướng Thiết kế Web.

Đừng theo xu hướng chỉ vì nó phổ biến tại thời điểm này. Xu hướng đại diện cho các kỹ thuật phổ biến vì lý do nó tốt, nhưng chắc chắn rằng nó là tốt nhất cho người dùng của bạn. Ví dụ, một trang web thương mại điện tử chắc chắn sẽ không làm tốt như một trang duy nhất có chức năng cuộn trang vô hạn.

Nguồn: www.awwwards.com