6 điều UI Designer cần lưu ý với Tab Bar

Đóng vai trò quan trọng là điều hướng chính cho người dùng trong thời gian truy cập vào Website, Tab Bar đã trở thành thành phần được người truy cập bấm vào nhiều nhất. Ứng dụng của Tab Bar dẫn đến việc các UI Designer cần phải có sự chú ý nhất định trong việc thiết kế và hoàn chỉnh Tab Bar phù hợp nhất với người dùng. Việc thiết kế Tab Bar có thể trông khá đơn giản, nhưng không ít người khi mới bắt đầu dễ bị mắc một số sai lầm khi thiết kế chúng. 

Bài viết này sẽ điểm qua cho bạn 6 điều mà mọi Ui Designer nên lưu ý khi thiết kế Tab Bar. Các bạn hãy chia sẻ cảm nghĩ của các bạn sau khi đọc bài viết ở bên dưới nhé!

‍

1. Lựa chọn kích thước phù hợp

Do Tab Bar là thường xuyên được người truy cập ưu tiên sử dụng nên cần phải có kích cỡ phù hợp để tiện cho các thao tác. Người dùng cần các thao tác chuẩn xác ở trên mọi thiết bị thông qua các ứng dụng, và kích thước của các Tab Bar sẽ ảnh hưởng rất nhiều đến trải nghiệm của người dùng.

Do thói quen sử dụng 1 ngón tay khi dùng điện thoại, việc ấn nhầm sẽ dẫn đến việc giảm tỷ lệ truy cập vào ứng dụng. Theo một số nguồn tài liệu, Tab Bar không nên nhỏ hơn 44px - 48px theo từng hệ thống để tránh tình huống khó bấm xảy ra. 

Kích thước có thể tạo nên những trải nghiệm khác nhau

2. Sử dụng icon đồng bộ và thống nhất

Trước khi các bạn muốn thiết kế thành công một Tab Bar thật đẹp mắt, hãy ưu tiên đến việc lựa chọn các icon để Tab Bar thật gọn gàng và cân đối trước nhé. Hãy chú ý lựa chọn các icon có sự tương đồng về chủng loại, kiểu dáng và kích cỡ. Icon đồng nhất không chỉ giúp cho người dùng bớt rối mắt mà bản thân bản thiết kế cũng trở nên hài hòa và đẹp mắt hơn. Hơn nữa, hình thái và màu sắc của icon cũng ảnh hưởng rất nhiều đến tâm lý của người dùng.

Bạn hãy lựa chọn book icon packs phù hợp cho thiết kế của bạn và hãy sử dụng nó xuyên suốt các màn của bạn thay vì thay đổi liên tục nhé!

Icon nên có sự đồng bộ với nhau

3. Đặt tên ngắn gọn và súc tích

Tùy thuộc vào từng ứng dụng mà dẫn đến độ quan trọng của các tên Tab. Bởi vì đôi khi, người truy cập đã có thể hiểu được những chức năng riêng biệt của từng Tab qua các icon phổ biến được lựa chọn. Tuy nhiên, nếu bạn vẫn quyết định đặt tên cho từng Tab, hãy để những cái tên ngắn, súc tích và rõ ràng cho người dùng để tránh gây rối. Hãy tránh xa các cái tên quá dài và hạn chế tối đa việc xuống dòng để không làm ảnh hưởng đến người dùng nha.

Đừng quên những cái tên cũng có tầm quan trọng đó

4. Đặt icon và tên Tab cùng một khung

Như đã đề cập, người dùng đã có thể hiểu hết ý nghĩa từng Tab qua các icon. Tuy nhiên, nếu việc xuất hiện các tên Tab đặt không đúng vị trí cũng gây loạn và nhầm lẫn cho người sử dụng. Trước khi điều chỉnh lại vị trí các Tab, hãy group icon và tên lại thành cùng một khung để di chuyển đúng.

5. Giữ tất cả các khung có cùng chiều rộng và căn chỉnh

Về mặt thẩm mỹ, việc mỗi Tab có một độ dài hoặc kích thước khác nhau đã gây ra khó chịu cho người dùng. Không những thế, Tab Bar lại được ưu tiên sử dụng rất nhiều, việc khác biệt về kích thước chắc chắn gây ra không ít vấn đề cho việc bấm vào chúng. Vì vậy, khi thiết kế, hãy đặt cố định chiều rộng cụ thể theo các khung Tab. Nhờ đó, các Tab sẽ đồng đều, tiện cho việc căn chỉnh và bấm hơn so với trước.

6. Làm nổi bật các Tab đang hoạt động, đang được chọn

Lưu ý cuối cùng dành cho các UI Designer là về việc đánh dấu Tab - vị trí - của người dùng trên Tab Bar. Thông thường ta sẽ có hai trạng thái là active và default, ta sẽ sử dụng màu sắc để làm nổi bật Tab đang hoạt động hoặc đang được chọn. Nên lựa chọn những primary color để cho các icon không hoạt động để người dùng xác định rõ vị trí bản thân trên ứng dụng.

Người dùng có thể nhận biết họ đang ở đâu nhờ nó

Với 6 lưu ý trên, hy vọng các bạn đã có cho mình cách riêng và kiến thức để ứng dụng khi thiết kế những chiếc Tab bar khó nhằn. Nhưng đừng quên, ngoài Tab bar ra, Capi Demy còn rất nhiều kiến thức thú vị và bổ ích khác chờ bạn tìm hiểu đó nha! Hãy theo dõi những kiến thức quan trọng khác tại ĐÂY nhé!

‍

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.

‍