08/11/2019, 14:15

Tam giác ma thuật của Amazon

Bài viết của tác giả Tran Nhat Huy đăng trên Kipalog.com Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department . Tốc độ hiển thị nội dung của menu là tức thì so với di chuyển thời gian thực của con trỏ :v Tôi vốn nghĩ tốc độ tức ...

Bài viết của tác giả Tran Nhat Huy đăng trên Kipalog.com

Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department. Tốc độ hiển thị nội dung của menu là tức thì so với di chuyển thời gian thực của con trỏ :v

Amazon Menu

Tôi vốn nghĩ tốc độ tức thì khi di chuyển con trỏ là điều không thể. Tất cả các menu đều cần một ít delayđể thay đổi nội dung của submenu. Bạn có thể nhìn ví dụ dưới đây

Khan Academy Menu

Bạn có biết tại sao lại cần delay không? Nếu không có một chút delay đó, khi bạn di con trỏ ra khỏi menu chính tới submenu nhỏ hơn thì submenu sẽ biến mất ngay khi bạn chưa kịp di chuột đến, tạo ra một hiệu ứng đuổi bắt rất khó chịu cho người dùng. Nếu bạn chưa hiểu lắm thì thử nhìn Bootstrap bug dưới đây nhé:

Dead case

Tam giác ma thuật của Amazon

Vậy là Amazon đã làm thế nào để vẫn đem lại UX hoàn hảo trong khi không có một tí delay nào ? Chúng ta không thấy Bootstrap bug, và tốc độ thì hẳn là tức thì. Câu trả lời là hình tam giác được đánh dấu dưới đây

magic triangle

  • Ở mọi thời điểm, Amazon vẽ ra 1 tam giác với 1 đỉnh là vị trí con trỏ hiện tại và 2 đỉnh còn lại là đỉnh và đáy của submenu.
  • Vị trí tiếp theo của con trỏ được kiểm tra xem có nằm trong tam giác này hay không
  • Nếu con trỏ vẫn nằm trong hình tam giác, thì Amazon “phán đoán” là user đang dịch chuột về submenu và giữ nguyên nội dung.
  • Nếu con trỏ đi ra ngoài thì xét lại vị trí để tìm submenu cũ hay mới.

Những chi tiết nhỏ như thế này tạo ra những trải nghiệm UX tuyệt vời cho người dùng. Nếu bạn muốn sử dụng lại hiệu ứng này thì rất may là có 1 Jquery plugin rồi nhé jQuery-menu-aim ????

jQuery-menu-aim

Tham khảo

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Techtalk Via kipalog

Bài liên quan

Tam giác ma thuật của Amazon

Bài viết của tác giả Tran Nhat Huy đăng trên Kipalog.com Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department . Tốc độ hiển thị nội dung của menu là tức thì so với di chuyển thời gian thực của con trỏ :v Tôi vốn nghĩ tốc độ tức ...

Vũ Văn Thanh viết 4 ngày trước

Tam giác chữ cái trong C

Bài tập Viết một chương trình C để hiển thị tam giác chữ cái. Trong chương sau, mình sẽ giới thiệu một chương trình C để in tam giác số. Chương trình C để hiển thị tam giác chữ cái Trong chương trình dưới, tại dòng kytu=65 thì 65 là mã ASCII của chữ cái A. Nếu bạn không muốn tam giác ...

Trịnh Tiến Mạnh viết 13:45 ngày 14/08/2018

In tam giác Fibonacci trong C

Bài tập Viết một chương trình C để in tam giác Fibonacci với phạm vi đã cho. Chương trình C để in tam giác Fibonacci #include<stdio.h> #include<conio.h> int main(void) { int a=0,b=1,i,c,n,j; printf("Nhap pham vi: "); scanf("%d",&n); ...

Tạ Quốc Bảo viết 13:45 ngày 14/08/2018

In tam giác số trong C

Bài tập Viết một chương trình C để in tam giác số. Chương trình C để in tam giác số #include<stdio.h> #include<conio.h> main() { int i,j,k,l,n; printf("Nhap pham vi: "); scanf("%d",&n); for(i=1;i<=n;i++) { for(j=1;j<=n-i;j++) { printf(" ...

Tạ Quốc Bảo viết 13:44 ngày 14/08/2018

Tạo một vòng đời (Lifecycle) cho object trong một bucket của Amazon S3.

Trước khi đi đến nội dung chính của bài viết, mình muốn giới thiệu sơ qua cho các bạn về Amazon S3. Amazon S3 viết tắt của cụm từ Amazon Simple Storage Service: Là dịch vụ đám mây lưu trữ do đó bạn có thể tải lên các tệp, các tài liệu, các dữ liệu tải về của người dùng hoặc các bản sao lưu. Với rất ...

Hoàng Hải Đăng viết 18:07 ngày 12/08/2018
0