Bí mật những cái tên của Navigation Button

Thực sự mà nói, ngành UI/UX có quá nhiều những thuật ngữ mà những người mới bước chân vào ngành như chúng ta không thể nào hiểu nổi những cái tên. Đặc biệt, đau đầu khi mọi người cứ liên tục sử dụng nó mà ta vẫn “mù tịt” không chút phương hướng.

Vậy, để hiểu rõ hơn và ngành đang đi đầu xu hướng này, hãy cùng mình “dạo qua” và tìm hiểu các thuật ngữ với những cái tên kỳ lạ của Navigation Button nhé!

1. Hamburger button

Hamburger menu hay còn gọi là menu ba dòng là icon tiêu biểu và được sử dụng nhiều nhất trong số icon thuộc Navigation Button, thường được đặt ở góc trên ngoài cùng của màn hình. Nút này giúp tổng hợp các mạng lưới menus điều hướng của website hay của ứng dụng đó. 

Hamburger button

Cụ thể, nó là một icon chỉ đơn giản bao gồm ba đường ngang song song, thường được làm tròn ở hai đầu. Khi được nhấn vào, nút này sẽ hiển thị một menu đã ẩn trước đó. Menu này có thể được "thả xuống" từ vị trí của nút, xuất hiện dưới dạng một phương thức hoặc trượt vào từ trên cùng, bên cạnh hoặc cuối màn hình.

Mục đích chính của nút hamburger là bảo toàn không gian màn hình bằng cách ẩn/hiện các menu điều hướng khác. 

2. Kebab button

Kebab menu, còn được gọi là menu ba chấm và menu chỉ bảo gồm đúng ba chấm được xếp thẳng hàng theo hàng dọc, là một biểu tượng được sử dụng để mở menu với các tùy chọn bổ sung.

Kebab button

Chỉ đơn giản nhấn vào ba chấm nhỏ xuất hiện bên cạnh items bạn đang muốn tìm hiểu, một menu nội tuyến nhỏ sẽ xuất hiện sẽ xuất hiện để các bạn lựa chọn thêm. Kebab menu thường được thiết kế nằm ở trên góc bên phải hoặc trên cùng bên trái ngang với vị trí của items.

Tương tự với hamburger menu, kebab menu giúp tiết kiệm không gian cho màn hình khi chỉ hiện các menu nhỏ khi được ấn vào.

3. Meatballs button

Meatball menu, còn có cái tên quen thuộc hơn là menu ba chấm ngang, là một biểu tượng được sử dụng để mở menu với các tùy chọn bổ sung. Biểu tượng thường được tìm thấy ở góc trên bên phải hoặc phía trên bên phải của màn hình hoặc cửa sổ.

Meatballs button

Tương tự như kebab menu, meatball menu được sử dụng để mở rộng và bổ sung thêm các items nội tuyến để người dùng có thể nhanh chóng lựa chọn. 

Được sử dụng để mở menu hoặc hiển thị các hành động cho một mục có liên quan. Bởi vì chúng nằm ngang, chúng dễ dàng lặp lại và sử dụng trên website hơn cho phần tử như bảng hoặc các phần tử được định hướng theo chiều ngang khác.

4. Bento button

Bento icon được ví như là “thực đơn” giúp tổng hợp các menu, ứng dụng, … tổng hợp giúp đầy đủ giúp bạn khi được ấn vào. Thường nó sẽ được hiện lên dưới dạng lưới để dễ dàng sử dụng và sắp xếp thông tin.

Bento button

Nó thường được sử dụng để mở menu với các ứng dụng, giải pháp hoặc chức năng khác nhau trong cùng một sản phẩm. Bạn có thể nhanh chóng chuyển đổi hoặc tổng hợp giữa chúng. Biểu tượng này thường nằm ở góc trên bên phải của các ứng dụng để người dùng dễ ấn vào.

Bento Button còn có thể được sử dụng để nhóm các item liên quan tới nhau.

5. Doner button

Doner khá là lạ lẫm bởi nó không được ưa chuộng hay sử nhiều bằng những nút khác trong Navigation Button. Trên thực tế, ứng dụng của nó không được áp dụng nhiều và khá là “kén” tình huống sử dụng.

Doner button

Khi nhấp vào Doner, nó sẽ hiển thị một loạt các menu bạn có thể lựa chọn để thay thế cho cho lựa chọn hiện tại của bạn hoặc mặc định.Thường được áp dụng để thay đổi các filter cho icons. 

Doner button bao gồm một chồng dọc gồm ba dòng có độ dài khác nhau: một dòng dài, một dòng ngắn hơn ở dưới cùng và một dòng thậm chí được cắt xén ở phía dưới. Phần tử giao diện người dùng này là một nhóm các bộ lọc.

6. List/grid button

List grid button như cái tên gọi, khi bạn ấn vào nút này, một loạt các danh sách lựa chọn sẽ xuất hiện giúp bạn thay đổi tầm nhìn (view) của màn theo một cách sắp xếp/bố cục/màu sắc khác với lựa chọn hiện tại.

List/grid button

Khi bạn lựa chọn một item khác trong list grid, một số mobile app hoặc website sẽ thay đổi cách hiển thị thông tin ở phương thức tối ưu và dễ nhìn nhất. Vì vậy, các Designers cần cân nhắc khi lựa chọn các hình thức bố cục cho mỗi item trong list grid.

Tổng hợp bởi đội ngũ Capi Demy. 

Nếu bạn có câu hỏi nào đừng ngần ngại kết nối với đội ngũ Capi Demy nhé, chúng mình luôn ở đây và làm điểm tựa vững chắc cho các bạn!

Thông tin liên hệ tư vấn: 

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website:

Capidemy.com

Địa chỉ:

Cơ sở 1 HN: Tầng 6, số 35 Tô Vĩnh Diện, Khương Trung, Thanh Xuân, Hà Nội

Cơ sở 2 HN: Tầng 2 số 2 ngách 28, ngõ 93, Hoàng Văn Thái, Thanh Xuân, Hà Nội.

‍