6 THUẬT NGỮ UI DESIGNER NÊN BIẾT

Độ phổ biến của UX/UI Design khiến các thuật ngữ của chuyên ngành này dần được sử dụng rộng rãi. Điều này cũng tạo nên khó khăn khi mà các UI Design không sử dụng chính xác được thuật ngữ và gây nhầm lẫn trong việc thiết kế của bản thân. 

Bài viết này sẽ tổng hợp 6 thuật ngữ phổ biến mà trong UI design, đặc biệt trong quá trình thiết kế giao diện. Hy vọng bài viết này sẽ có ích cho các bạn.

‍

1. Breadcrumbs

Breadcrumbs là tập hợp một đường liên kết giúp người dùng định vị vị trí bản thân trong cấu trúc website. Thuật ngữ này được xây dựng từ một câu chuyện cổ tích Grim: Hansel và Gretel đã rải mẩu bánh mì để tìm đường về nhà.

Breadcrumbs là một yếu tố đắc lực trong việc hỗ trợ người dùng, điều này dẫn đến việc UI Designer cần phải tập trung để phát triển nó. Những lợi ích nó đem lại có khả năng “giữ chân” các khách hàng của bạn vì:

• Nó cho phép người dùng chủ động về phương hướng và duy trì sự nhận dạng vị trí của họ ở website đó, đặc biệt là với website lớn có chứa nhiều nội dung. Việc này giúp thông tin tiếp cận được tối đa đến người truy cập.
• Sử dụng breadcrumb giúp người dùng dễ dàng di chuyển đến các phần khác mà hạn chế các thao tác hay việc “click back” về trang chủ. 
• Việc điều hướng website là phương pháp hữu hiệu để kích thích người dùng truy cập nhiều thông tin khác nhau của trang web và lựa chọn di chuyển đến các phần trang có thông tin liên quan. Điều này giúp giảm bớt tỷ lệ thoát trang và cải thiện chất lượng website.

Breadcrumbs được xây dựng từ chuyện cổ tích Grim: Hansel và Gretel

2. 60 - 30 - 10 rule

Thuật ngữ này không chỉ giới hạn trong UI Design, nhưng lại được áp dụng triệt để nhất dành cho các thiết kế website. Bởi lẽ màu sắc có sự ảnh hưởng nhất định đến tâm lý và hành vi người dùng, và luật “60 - 30 - 10” cũng dần trở thành luật cơ bản mà mọi UI Designer đều nắm vững.

Luật 60 - 30 - 10 dần trở thành quy luật phối màu theo tỷ lệ vàng của dân UI. Cụ thể:

• 60% sẽ là màu chủ đạo của bạn, nên là màu trung hòa, đây sẽ là màu background tổng thể của cả giao diện.
• 30% là màu phụ, sẽ hỗ trợ hài hòa cho màu chủ đạo của bạn nhưng nó cũng phải có điểm khác biệt đủ để tạo điểm thu hút cho website. 
• 10% còn lại là màu nhấn để tạo điểm chú ý cho khách hàng vào một số vị trí nhất định. Màu này thường được lựa chọn cho những điểm cần chú ý đặc biệt như nút mua hàng, …

Luật phối màu 60-30-10 mà mọi UI Designers nên nắm rõ

3. Vertical Rhythm

Vertical Rhythm đơn giản là khi đề mục văn bản được căn chỉnh thành các dòng ngang theo một nhịp nhất quán, làm cho văn bản gắn kết hơn và dễ đọc hơn. 

Giống như trong âm nhạc, nhịp điệu là điều cần thiết. Nhịp hài hòa tạo cảm giác thoải mái và chuyên nghiệp, trong khi nhịp tồi có thể khiến mọi thứ trở nên kì quặc. Các UI Designers nên áp dụng đúng vào thiết kế để tối ưu hóa sự thuận tiện dành cho người dùng.

Được ví như nhịp điệu âm nhạc của Designers

4. Padding

Padding là khoảng trống tạo ra bởi khoảng cách của nội dung và viền bao quanh nó. Nó sẽ được xác định là khoảng trống bao bọc phần content và nằm bên trong border. Ta sẽ có 4 loại padding bao gồm: padding-top, padding-bottom, padding-left, padding-right.

Tuy nhiên, nhiều người có thể nhầm lẫn padding với margin. Khác với Padding, Margin là khoảng cách giữa các yếu tố trong cùng một giao diện website. Cách phân biệt đơn giản nhất là Padding là khoảng trống bên trong viền, còn Margin là khoảng trống nằm ngoài viền.

Padding và Margin là elements nằm trong “box model” được dùng để thiết kế, dàn layout.

Đừng nhầm lẫn Padding và Margin nhé!

5. Wizard

Wizard là một mẫu thiết kế giao diện người dùng cho phép người dùng chưa được đào tạo đạt được mục tiêu thông qua một loạt các bước. Nó thường được diễn tả như một đường thẳng nối tiếp thể hiện từng bước một quy trình thực hiện và các bước tiếp theo xuất hiện có sự phụ thuộc vào lựa chọn ở câu trước. 

Nó được sử dụng khi có nhiều hành động cần thực hiện hoặc form công việc quá dài. Wizard sẽ chia nhỏ chúng ra và hiện thành từng bước các bạn cần hoàn thành để nắm được tiến độ thực hiện.

Wizard thể hiện cho người dùng quy trình và số bước cần làm để hoàn thành, giúp người dùng ước lượng được khối lượng các bước, tránh tình trạng bỏ dở khi đang tham gia.

Khối lượng công việc được chia ra và thể hiện bởi Wizard

6. Stepper

Stepper liên hệ trực tiếp đến Wizard, nó có chức năng giúp người dùng định hướng vị trí bản thân trên sơ đồ công việc. Ứng dụng của nó được sử dụng ở rất nhiều vị trí nhưng phổ biến nhất vẫn là kết hợp với Wizard.

Khi người dùng bắt đầu thực hiện quy trình công việc, Stepper sẽ hiện lên lần lượt theo các bước mà người dùng đẽ hoàn thành, vị trí của người dùng trong quy trình thực hiện. Khách hàng từ đấy có thể ước lượng chính xác công việc mình cần làm.

Khi sử dụng Stepper, UI Design cần lưu ý những điều sau:

• Vị trí hiện tại của khách hàng 
• Số các bước công việc
• Số bước đã hoàn thành
• Số bước cần được hoàn thành

Stepper có chức năng liên hệ trực tiếp đến Wizard

Trên đây là 6 thuật ngữ chuyên ngành thiết yếu mà mọi UI Designers nên biết và nắm rõ. Hãy đảm bảo mình nắm vững những thuật ngữ chuyên ngành để tránh sự nhầm lẫn không nên có. Ngoài ra, nếu các bạn muốn tìm hiểu thêm về những kiến thức thú vị khác thì hãy nhanh tay bấm vào ĐÂY để cập nhật nhé!

‍

Liên hệ tư vấn:

• Inbox: m.me/CapiDemy.Edu
• Email: capidemy@gmail.com
• Address: Tầng 6, số 35 Tô Vĩnh Diện, Hà Nội

‍