10 mẹo thiết kế UI (giao diện người dùng) cần thiết

[ad_1]

Một trang web không chỉ là một nhóm các trang được kết nối bởi các liên kết. Nó có một giao diện, một không gian nơi những thứ khác nhau – trong trường hợp này, một người và một công ty trên mạng hoặc sự hiện diện web cá nhân – gặp gỡ, giao tiếp và ảnh hưởng lẫn nhau. Sự tương tác đó tạo ra trải nghiệm cho khách truy cập và là một nhà thiết kế web, công việc của bạn là đảm bảo rằng trải nghiệm đó tốt nhất có thể.

            

Và chìa khóa cho điều đó là suy nghĩ về người dùng của bạn trước tiên, trước hết và luôn luôn.

            

Rất may, trong khi thiết kế web là một ngành học tương đối mới, nó nợ rất nhiều nghiên cứu khoa học về tương tác giữa người và máy tính (HCI). Và 9 hướng dẫn hữu ích này trực tiếp từ nghiên cứu của HCI sẽ giúp bạn tập trung vào người dùng của mình khi thiết kế trang web và ứng dụng.

            

Thiết kế giao diện, tập trung vào bố cục chức năng của các giao diện, là một tập hợp con của thiết kế trải nghiệm người dùng, tập trung vào bức tranh lớn hơn: đó là toàn bộ trải nghiệm, không chỉ là giao diện.

            

1. Biết người dùng của bạn

            

Trên tất cả, bạn phải biết người dùng của bạn là ai trong và ngoài. Điều đó có nghĩa là biết tất cả dữ liệu nhân khẩu học mà (các) ứng dụng phân tích của bạn có thể lấy, vâng. Nhưng quan trọng hơn, điều đó có nghĩa là biết những gì họ cần, và những gì cản trở họ đạt được mục tiêu của họ.

            

Để đạt được mức độ đồng cảm đó đòi hỏi nhiều hơn là phân tích cẩn thận các số liệu thống kê. Nó đòi hỏi phải biết những người sử dụng trang web của bạn. Điều đó có nghĩa là nói chuyện trực tiếp với họ, xem họ sử dụng sản phẩm của bạn (và có thể cả những người khác) và hỏi họ những câu hỏi sâu hơn, "Bạn nghĩ gì về thiết kế này?"

            

Mục tiêu của họ là gì? Điều gì cản trở họ đạt được những mục tiêu đó? Làm thế nào một trang web có thể giúp họ vượt qua hoặc giải quyết những thách thức đó?

            

Đừng dừng lại khi biết người dùng của bạn muốn gì. Đào sâu hơn và tìm hiểu những gì họ cần. Rốt cuộc, ham muốn chỉ là sự phát triển của nhu cầu. Nếu bạn có thể giải quyết nhu cầu sâu rộng của người dùng, bạn sẽ giải quyết được mong muốn của họ đồng thời đáp ứng các yêu cầu cơ bản hơn.

            

Những hiểu biết sâu sắc mà bạn sẽ khám phá từ việc phân tích dữ liệu và nói chuyện với người dùng sẽ thông báo cho mọi quyết định của bạn, từ cách mọi người sử dụng giao diện của bạn đến loại nội dung mà bạn làm nổi bật trong giao diện đó.

            

2. Xác định cách mọi người sử dụng giao diện của bạn

            

Trước khi bạn thiết kế giao diện của mình, bạn cần xác định cách mọi người sẽ sử dụng giao diện đó. Với sự phổ biến ngày càng tăng của các thiết bị dựa trên cảm ứng, nó có một mối quan tâm chính yếu hơn bạn nghĩ. Chỉ cần nhìn vào

            

Tinder: trải nghiệm người dùng ứng dụng được định nghĩa theo nghĩa đen bởi sự dễ dàng và bốc đồng của một thao tác vuốt đơn giản.

            

Mọi người sử dụng các trang web và ứng dụng theo hai cách: trực tiếp (bằng cách tương tác với các yếu tố giao diện của sản phẩm) và gián tiếp (bằng cách tương tác với các yếu tố ui bên ngoài sản phẩm).

            

Ví dụ về tương tác trực tiếp

            

                  

  • Khai thác một nút
  •               

  • Quẹt thẻ
  •               

  • Kéo và thả vật phẩm bằng đầu ngón tay
  •             

            

Ví dụ về các tương tác gián tiếp

            

                  

  • Chỉ và nhấp bằng chuột
  •               

  • Sử dụng các lệnh / phím tắt chính
  •               

  • Nhập vào trường biểu mẫu
  •               

  • Vẽ trên máy tính bảng Wacom
  •             

            

              

              

ometĐôi khi, một tương tác quá dễ dàng.
            

            

Người dùng của bạn là ai và họ sử dụng thiết bị nào sẽ thông báo sâu sắc cho quyết định của bạn tại đây. Nếu bạn thiết kế cho người cao niên hoặc những người khác có kỹ năng thủ công hạn chế, bạn sẽ không muốn dựa vào việc vuốt. Nếu bạn thiết kế cho các nhà văn hoặc lập trình viên, những người chủ yếu tương tác với các ứng dụng thông qua bàn phím, bạn sẽ muốn hỗ trợ tất cả các phím tắt phổ biến để giảm thiểu thời gian làm việc với chuột.

            

3. Đặt kỳ vọng

            

Nhiều tương tác với một trang web hoặc ứng dụng có hậu quả: nhấp vào nút có thể có nghĩa là chi tiền, xóa trang web hoặc đưa ra nhận xét chê bai về bánh sinh nhật bà ngoại. Và bất cứ khi nào có hậu quả, cũng có lo lắng.

            

Vì vậy, hãy chắc chắn cho người dùng biết điều gì sẽ xảy ra sau khi họ nhấp vào nút đó trước khi họ làm điều đó. Bạn có thể thực hiện việc này thông qua thiết kế và / hoặc sao chép.

            

Đặt kỳ vọng với thiết kế

            

                  

  • Đánh dấu nút tương ứng với hành động mong muốn
  •               

  • Sử dụng biểu tượng được hiểu rộng rãi (như thùng rác cho nút xóa, dấu cộng để thêm thứ gì đó hoặc kính lúp để tìm kiếm) kết hợp với bản sao
  •               

  • Chọn một màu có ý nghĩa liên quan (màu xanh lá cây cho một nút go go, màu đỏ cho đường dừng lại)
  •             

            

Đặt kỳ vọng với bản sao

            

                  

  • Viết bản sao nút rõ ràng
  •               

  • Cung cấp bản sao định hướng / khuyến khích ở trạng thái trống
  •               

  • Đưa ra các cảnh báo và yêu cầu xác nhận
  •             

            

Đối với các hành động có hậu quả không thể đảo ngược, như xóa vĩnh viễn một cái gì đó, sẽ rất hợp lý khi hỏi mọi người xem họ có chắc chắn không.

            

              

              

InVision, nhấp vào biểu tượng thùng rác không xóa ngay lập tức một màn hình. Thay vào đó, nó hỏi bạn có chắc không và cho bạn biết nó không thể hoàn tác.
            

            

4. Dự đoán sai lầm

            

> Sai lầm là con người; để tha thứ, thiêng liêng.

            

Alexander Pope, "Một tiểu luận về phê bình"

            

Mọi người mắc sai lầm, nhưng họ không nên phải chịu hậu quả. Có hai cách để giúp giảm bớt tác động của lỗi con người:

            

                  

  1. Ngăn chặn sai lầm trước khi chúng xảy ra
  2.               

  3. Cung cấp các cách để khắc phục chúng sau khi chúng xảy ra
  4.             

            

Bạn thấy rất nhiều kỹ thuật phòng ngừa lỗi trong thương mại điện tử và thiết kế biểu mẫu. Các nút vẫn không hoạt động cho đến khi bạn điền vào tất cả các trường. Các hình thức phát hiện ra rằng một địa chỉ email đã được nhập đúng cách. Cửa sổ bật lên hỏi bạn nếu bạn thực sự muốn từ bỏ giỏ hàng của mình (vâng, tôi có, Amazon, bất kể nó có thể làm sứt mẻ điều tồi tệ đến mức nào).

            

Dự đoán những sai lầm thường ít gây nản lòng hơn là cố gắng sửa chữa chúng sau khi thực tế. Đó là vì họ đôi khi cảm thấy thỏa mãn khi hoàn thành đi kèm với việc nhấp vào nút Tiếp theo hoặc hoặc Gửi Gửi có thể cài đặt.

            

Điều đó nói rằng, đôi khi bạn chỉ cần để tai nạn xảy ra. Rằng khi các thông báo lỗi chi tiết thực sự xuất hiện.

            

Khi bạn viết thông báo lỗi, hãy đảm bảo họ thực hiện hai việc:

            

                  

  1. Giải thích vấn đề. Ví dụ, bạn đã nói rằng bạn được sinh ra trên sao Hỏa, nơi con người trú ngụ trên đất thuộc địa. Tuy nhiên.
  2.               

  3. Giải thích cách khắc phục. Ví dụ: Hãy vui lòng nhập một nơi sinh ở đây trên Trái đất. '
  4.             

            

Lưu ý rằng bạn có thể lấy một trang từ cùng một cuốn sách cho các tình huống không có lỗi. Chẳng hạn, nếu tôi xóa một cái gì đó, nhưng nó có thể khôi phục lại nó, hãy cho tôi biết rằng với một dòng sao chép giống như Bạn luôn có thể khôi phục các mục đã xóa bằng cách vào Thùng rác của bạn và nhấp vào Khôi phục.
            

Nguyên tắc dự đoán lỗi người dùng được gọi là nguyên tắc poka-ách. Poka-yoke là một thuật ngữ tiếng Nhật có nghĩa là chống lại lỗi lầm.
            

5. Cung cấp thông tin phản hồi nhanh chóng

            

Trong thế giới thực, môi trường cho chúng ta phản hồi. Chúng tôi nói chuyện, và những người khác trả lời (thường). Chúng ta cào một con mèo, và nó rít lên hoặc rít lên (tùy thuộc vào tâm trạng của nó và mức độ chúng ta mút khi mèo cào).

            

Tất cả quá thường xuyên, các giao diện kỹ thuật số không thể trả lại nhiều, khiến chúng tôi tự hỏi liệu chúng tôi có nên tải lại trang, khởi động lại máy tính xách tay hay chỉ cần đưa nó ra khỏi cửa sổ có sẵn gần nhất.

            

Vì vậy, hãy cho tôi tải hình ảnh động. Làm cho nút đó bật và bật lại khi tôi chạm vào nó nhưng không quá nhiều. Và cho tôi một điểm cao ảo khi tôi làm điều gì đó bạn và tôi đồng ý là tuyệt vời. (Cảm ơn, MailChimp.)

            

            

              

              

MailChimp cung cấp cả phản hồi và khuyến khích khi bạn lên lịch hoặc gửi email.
            

            

Chỉ cần đảm bảo tất cả diễn ra nhanh chóng. Usability.gov định nghĩa bất kỳ sự chậm trễ nào trong hơn 1 giây là gián đoạn. Hơn 10 giây, một sự gián đoạn. Và người hào phóng sau này: trong khoảng một nửa dân số Hoa Kỳ, 3 giây là đủ để gây ra sự phục hồi.

            

Nếu một trang sẽ tải dưới 5 giây, don don hiển thị thanh tiến trình, vì nó thực sự làm cho thời gian tải dường như lâu hơn. Thay vào đó, hãy sử dụng một hình ảnh trực quan không có nghĩa là sự tiến bộ, giống như vòng xoáy chết chóc của Mac. Nếu bạn sử dụng các thanh tiến trình trên trang web của mình, hãy xem xét thử một số thủ thuật trực quan để tải nhanh hơn.

            

6. Hãy suy nghĩ cẩn thận về vị trí và kích thước phần tử

            

Luật Fitts, một nguyên tắc cơ bản của tương tác giữa người và máy tính (HCI), nói rằng:

            

Thời gian để đạt được mục tiêu là một hàm của khoảng cách đến và kích thước của mục tiêu.

            

Nói cách khác: một thứ gì đó càng gần và / hoặc càng lớn, bạn càng có thể đặt con trỏ (hoặc ngón tay) của mình lên nó nhanh hơn. Điều này rõ ràng có tất cả các loại ý nghĩa đối với các kỹ thuật thiết kế giao diện người dùng và tương tác, nhưng ba trong số quan trọng nhất là:

            

Tạo các nút và các mục tiêu nhấp chuột khác khác (như các biểu tượng và liên kết văn bản) đủ lớn để dễ dàng xem và nhấp. Điều này đặc biệt quan trọng với kiểu chữ, menu và các danh sách liên kết khác, vì không đủ dung lượng sẽ khiến mọi người nhấp vào liên kết sai nhiều lần.

            

Làm cho các nút cho các hành động phổ biến nhất lớn hơn và nổi bật hơn.

            

Đặt điều hướng (và các yếu tố hình ảnh tương tác phổ biến khác, như các thanh tìm kiếm) trên các cạnh hoặc góc của màn hình. Điều cuối cùng này có vẻ phản trực giác, nhưng nó hoạt động vì nó làm giảm nhu cầu về độ chính xác: một người dùng không cần phải lo lắng về việc vượt quá mục tiêu nhấp chuột của họ.

            

Trong khi bạn đang suy nghĩ về việc đặt và kích thước phần tử, hãy luôn ghi nhớ mô hình tương tác của bạn. Nếu trang web của bạn yêu cầu cuộn ngang thay vì cuộn dọc, bạn sẽ cần xem xét vị trí và cách đưa người dùng đến loại tương tác bất thường này.

            

7. Donith bỏ qua các tiêu chuẩn

            

Là loại người có khả năng sáng tạo cao, các nhà thiết kế có xu hướng thích sáng tạo lại những thứ khác nhưng nó không phải lúc nào cũng là ý tưởng hay nhất.

            

Tại sao? Bởi vì một phiên bản được tân trang lại của một tương tác hoặc giao diện quen thuộc bổ sung thêm tải nhận thức của Cameron: nó khiến mọi người nghĩ lại về một quá trình mà họ đã học được. Rõ ràng, bạn có thể phát minh lại bánh xe tất cả những gì bạn muốn nhưng chỉ khi nó thực sự cải thiện thiết kế.

            

Quy tắc ngón tay cái này giải thích lý do tại sao thanh trình đơn Google Docs Kiểu có hầu hết các tùy chọn giống như Microsoft Word Word trước Vista:

            

              

              

Thanh menu của Microsoft Word trước Vista.
            

            

            

              

              

menu Thanh menu của Google Docs, 2015
            

            

            

Nó cũng giải thích tại sao Pocket phải thay đổi vị trí của nút lưu trữ trong ứng dụng Android của họ vài năm trước.

            

              

              

Thay đổi một nút duy nhất để phù hợp hơn với các mẫu thiết kế của Android khiến người dùng mới có khả năng tiếp tục sử dụng Pocket nhiều hơn 23%.
            

            

Cho đến mùa thu năm 2013, nút lưu trữ nằm ở phía trên bên trái màn hình, bên phải, nơi thông số kỹ thuật thiết kế Android cho biết nút Nút Up Up phải là. Pocket muốn tập trung mọi người vào trải nghiệm đọc và không sao chép điều khiển phần cứng hiện có, nhưng vị trí không nhất quán khiến người dùng mới vô tình đóng và lưu trữ bài viết họ đang đọc, thay vì chỉ quay lại danh sách đọc của họ như mong đợi.

            

Sự thay đổi nhỏ đó "tăng khả năng [new users] sẽ tiếp tục sử dụng Pocket từ thời điểm này trở đi thêm 23%."

            

8. Làm cho giao diện của bạn dễ học

            

Khi nói về sự đơn giản, mọi người thường trích dẫn một bài báo của nhà tâm lý học Harvard George Miller gọi là, Số The Magical Number Seven, Plus hoặc Minus Two: Một số giới hạn về khả năng xử lý thông tin của chúng tôi. 5 đến 9 điều trong bộ nhớ ngắn hạn của họ với bất kỳ độ tin cậy. Bản thân Miller đã gọi đây là một sự trùng hợp ngẫu nhiên, nhưng điều đó dường như không thể ngăn cản bất cứ ai trích dẫn anh ta.

            

Điều đó nói rằng, nó chỉ hợp lý rằng một thứ gì đó càng đơn giản thì càng dễ nhớ trong thời gian ngắn. Vì vậy, bất cứ khi nào có thể, hãy giới hạn số lượng mà một người cần nhớ để sử dụng giao diện của bạn một cách hiệu quả và hiệu quả. Bạn có thể tạo điều kiện cho việc này bằng cách chia nhỏ thông tin, tức là, chia nó thành các phần nhỏ, dễ tiêu hóa.

            

Ý tưởng này phù hợp với Luật bảo tồn sự phức tạp của Tesler, trong đó tuyên bố rằng các nhà thiết kế UI nên làm cho giao diện của họ đơn giản nhất có thể. Điều đó có thể có nghĩa là che giấu sự phức tạp của một ứng dụng đằng sau một giao diện đơn giản bất cứ khi nào có thể. Một ví dụ phổ biến về một sản phẩm không tuân theo luật này là Microsoft Word.

            

Hầu hết mọi người chỉ làm một vài điều trong Word, ví dụ, gõ gõ trong khi những người khác có thể sử dụng nó để làm tất cả mọi thứ mạnh mẽ. Nhưng trên khắp thế giới, mọi người đều mở cùng một phiên bản Word, với cùng một giao diện người dùng, khiến Joe Joe trung bình của bạn không phải là người dùng quyền lực bị choáng ngợp bởi sự đa dạng của các tùy chọn mà họ có thể không bao giờ sử dụng.

            

Điều này dẫn đến một khái niệm gọi là công bố tiến bộ, trong đó các tính năng nâng cao được giấu kín trên các giao diện thứ cấp. Bạn có thể thấy điều này trên các trang web của Trang chủ, nơi các bản sao ngắn giới thiệu một sản phẩm hoặc tính năng, sau đó liên kết đến một trang nơi người dùng có thể tìm hiểu thêm. (Đây cũng là một cách thực hành tốt nhất cho thiết kế di động, trong đó điều hướng mạnh mẽ luôn là một thách thức.)

            

Mẹo chuyên nghiệp: Tránh sử dụng các chương trình học hỏi khác và văn bản không cụ thể tương tự trong các liên kết và nút. Tại sao? Bởi vì nó không nói cho người dùng biết những gì họ sẽ học hỏi thêm về việc đó. Thông thường, mọi người chỉ cần quét một trang để tìm kiếm một liên kết đưa họ đến nơi họ muốn đến, và học được nhiều hơn, nhắc lại 15 lần, không giúp đỡ. Điều này đặc biệt đúng đối với người dùng trình đọc màn hình.

            

9. Làm cho việc ra quyết định trở nên đơn giản

            

Quá nhiều web hét lên với chúng tôi: Banners Biên đột nhiên mở rộng để trở thành quảng cáo toàn màn hình. Các phương thức bật lên, kêu gọi chúng tôi đăng ký vào các blog mà chúng tôi đã có cơ hội, bạn biết đấy, đã đọc. Video xen kẽ ngăn chúng tôi theo dõi, buộc chúng tôi phải xem những giây quý giá đánh dấu rất chậm. Và don lồng thậm chí còn giúp tôi bắt đầu với các vật dụng, tờ rơi, chú giải công cụ

            

Đôi khi tôi khao khát một trang web bình tĩnh hơn và Luật Hicks Cho chúng tôi tất cả lý do để xây dựng một. Ý tưởng rất đơn giản như kết quả cuối cùng của nó: bạn càng đưa ra nhiều lựa chọn cho người dùng, họ càng khó đưa ra quyết định.

            

Điều này tác động đến hầu hết mọi thứ chúng tôi xây dựng:

            

                  

  • Bố cục tổng thể
  •               

  • Menu điều hướng
  •               

  • Trang giá
  •               

  • Chỉ mục blog
  •               

  • Nguồn cấp nội dung
  •             

            

Danh sách này tiếp tục. Nhưng kết quả cuối cùng là: chúng tôi thực hiện các thiết kế của mình càng đơn giản, người dùng càng nhanh chóng và dễ dàng đưa ra quyết định mà chúng tôi muốn họ đưa ra. Đó chính xác là lý do tại sao các trang đích và email không có bản tin chỉ nên có một lời kêu gọi hành động.

            

Mẹo chuyên nghiệp: Đôi khi, bạn thực sự muốn người dùng chậm lại và xem xét các tùy chọn của họ. Đó là lý do tại sao các thiết kế lát gạch của Pinterest, Dribbble và nhiều blog thực sự hoạt động tốt. Rốt cuộc, bạn càng có nhiều lựa chọn để quyết định giữa, thì càng có nhiều khả năng bạn sẽ tìm thấy một lựa chọn phù hợp với mình.

            

10. Nghe dữ liệu

            

Mặc dù tất cả chúng ta đều mong muốn các thiết kế của mình được đánh giá hoàn toàn dựa trên giá trị nghệ thuật của chúng, nhưng thực tế là tối ưu hóa thiết kế của bạn để đáp ứng mục tiêu của nó cũng quan trọng như vậy.

            

              

            

            

Mặc dù tất cả chúng ta đều mong muốn các thiết kế của mình được đánh giá hoàn toàn dựa trên giá trị nghệ thuật của chúng, nhưng thực tế là tối ưu hóa thiết kế của bạn để đáp ứng mục tiêu của nó cũng quan trọng như vậy.

            

Mặc dù nghiên cứu và thử nghiệm của người dùng có thể cực kỳ hữu ích trong việc hướng dẫn các quyết định thiết kế của bạn hướng tới hoàn thành mục tiêu Trang web của bạn, dữ liệu được thu thập sau khi khởi chạy vẫn là vô giá.

            

Vì vậy, hãy thiết lập phân tích cho trang web của bạn và phân tích chúng thường xuyên. Có một loạt các công cụ phân tích khác nhau, nhưng tôi khuyên dùng Google Analytics và / hoặc Mixpanel, tùy thuộc vào loại dự án.

            

Mixpanel tập trung vào các sự kiện, do đó, nó thu thập dữ liệu dựa trên các hành động mà khách truy cập thực hiện trên trang web của bạn, trong khi Google Analytics hoạt động nhiều hơn, cung cấp cho bạn thời gian phiên, nguồn lưu lượng truy cập, v.v. Mặc dù cả hai công cụ đều có thể cung cấp cả hai dạng dữ liệu, chúng thực sự tỏa sáng trong các lĩnh vực trọng tâm của họ, vì vậy hãy chọn bất cứ điều gì phù hợp nhất với nhu cầu của bạn.

            

Lưu ý: cả hai công cụ này đều miễn phí tới một số điểm dữ liệu nhất định. Webflow và các nền tảng tương tự thường giúp thiết lập phân tích dễ dàng thông qua trao đổi khóa API đơn giản.

            

Thiết kế tương tác tuyệt vời trong các trang web Webflow

            

Nhiều nhà thiết kế sử dụng Webflow đã áp dụng các nguyên tắc này để xây dựng các tương tác trực quan và hấp dẫn. Dưới đây là một vài ví dụ.

            

Mở rộng điều hướng vòng tròn

            

              

            

            

Waldo Broodryk đã tạo ra một menu hoạt hình thân thiện với thiết bị di động và máy tính để bàn. Khi tải trang, vòng tròn ở phía dưới bên phải sẽ đọc Menu Menu. Khi nhấp vào, nó sẽ mở rộng để hiển thị các trang có sẵn và thay đổi thành X, cho phép người dùng đóng menu và tập trung vào nội dung.

            

Đây là một sự kết hợp tuyệt vời của thiết kế rõ ràng và hấp dẫn, và rất chú ý đến Luật Fitts, đó là cách dễ nhất để nhắm mục tiêu các liên kết ở cạnh màn hình. Điều hướng tròn làm cho một tùy chọn thú vị khi bạn không muốn ngụ ý phân cấp trong điều hướng của mình.

            

Bạn có mua cho cô gái đó đồ uống không?

            

              

            

            

Nhà thiết kế Shane Hurt đã tập hợp cây quyết định tương tác tuyệt vời này để giúp bạn quyết định có nên mua cô gái đó hay không. Thiết kế chứa rất nhiều nội dung, nhưng giúp bạn tập trung vào tia laser trong nhiệm vụ: trả lời câu hỏi hiện tại và chuyển sang quyết định của bạn. Cách để giữ cho giao diện đơn giản, Shane.

            

Thiết kế lại Uniqlo

            

              

 trang chủ thay thế uniqlo

            

            

Nhà thiết kế Tim Noah đã mua sắm trên trang web Uniqlo một ngày khi anh nhận ra hệ thống điều hướng của họ phức tạp và độc đáo như thế nào. Được truyền cảm hứng, anh quyết định tái tạo điều này nhưng theo cách thân thiện hơn với máy tính bảng và di động. [[9009002]             

Điều yêu thích của tôi về nó là cách anh ấy biến điều hướng đa cấp Uniqlo, mất vài lần nhấp và tải trang để truy cập vào trang web máy tính để bàn thực tế của thương hiệu, thành một trải nghiệm một trang. (Công bằng mà nói, Uniqlo cũng làm điều tương tự trên trang web di động của họ, nhưng đó là một tên miền phụ trên thiết bị di động, không phải là phiên bản đáp ứng của trang web dành cho máy tính để bàn của họ.)
            

Lưu ý: thiết kế lại này chỉ là một dự án cá nhân và không có cách nào liên kết với Uniqlo.

            

Máy gia tốc thể thao dẫn đầu

            

              

 bắt đầu dẫn đầu

            

            

Đầu năm 2017, nhà thiết kế Jaro Quastenberg đã cho ra mắt một trang web thực sự cho thấy sức mạnh của các tương tác trực quan trong Webflow: Lead Sport Accelerator.

            

Trang web thực sự tỏa sáng trên hai trong số những lời khuyên được đề cập ở trên. Việc đầu tiên: biết người dùng của bạn. Trưởng nhóm tăng tốc thể thao biết rằng họ đang cố gắng thu hút các nhà xây dựng sản phẩm và để làm được điều đó họ phải tạo ấn tượng đầu tiên tuyệt vời thông qua trang web của họ. Thứ hai là đưa ra phản hồi. Cho dù bạn có đang cuộn, di chuột hoặc nhấp vào một yếu tố trên trang, nó sẽ ngay lập tức phản hồi hành động của khách truy cập, thường theo những cách kịch tính và thú vị.

            

Từ menu đến các tương tác cuộn – đây là một ví dụ tuyệt vời về chức năng được tối ưu hóa trên những gì một số người có thể coi là nghệ thuật kết hợp.

            

Ok, bạn đã đóng đinh những điều cơ bản

            

Bây giờ đi ra và làm cho một số giao diện tuyệt đẹp, có thể sử dụng. Và hãy thoải mái chia sẻ những ví dụ hay nhất về các thiết kế UI mà bạn đã thấy trong thế giới web trên toàn thế giới trong các bình luận.

          

[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *

.
.
.
.