User Interface Glossary: Giải thích các thuật ngữ UI
Chào mừng bạn đến với User Interface Glossary thiết yếu của chúng tôi! Hiểu các thuật ngữ thiết kế UI chính là điều quan trọng đối với bất kỳ ai làm việc hoặc tìm hiểu về thiết kế kỹ thuật số. Bài đăng này nhằm mục đích làm sáng tỏ từ vựng UX/UI thông dụng, giúp bạn dễ dàng điều hướng thế giới của các yếu tố giao diện. Chúng tôi sẽ cung cấp các định nghĩa và ví dụ rõ ràng, đưa ra các mẹo từ vựng giá trị để nâng cao khả năng tiếng Anh chuyên ngành công nghệ của bạn. Hãy cùng đi sâu vào ngôn ngữ nền tảng của thiết kế giao diện người dùng và tăng cường hiểu biết của bạn về các khái niệm thiết kế trực quan!
Mục lục
User Interface Glossary là gì?
Phần này đi sâu vào User Interface Glossary toàn diện của chúng tôi, phân tích các thuật ngữ thiết yếu quan trọng đối với những người sáng tạo kỹ thuật số. Nắm vững những từ ngữ cụ thể này, vốn là một phần của từ vựng UX/UI rộng hơn, sẽ cải thiện đáng kể khả năng hiểu và giao tiếp của bạn trong các dự án thiết kế UI. Chúng tôi đặt mục tiêu làm cho việc học các yếu tố giao diện này trở nên đơn giản, giúp bạn tránh các lỗi học ngôn ngữ phổ biến và xây dựng nền tảng vững chắc. Phần User Interface Glossary này được thiết kế để đảm bảo sự rõ ràng.
| Vocabulary | Part of Speech | Simple Definition | Example Sentence(s) |
|---|---|---|---|
| Affordance | Noun | Đặc điểm hoặc dấu hiệu trực quan của một đối tượng hoặc yếu tố giao diện gợi ý cho người dùng biết cách tương tác với nó. Affordance tốt giúp giao diện trở nên trực quan. | A button's raised appearance and shadow affords clicking, clearly communicating its function. |
| Breadcrumbs | Noun | Một sơ đồ điều hướng phụ cho biết vị trí của người dùng trong một trang web hoặc ứng dụng. Chúng theo dõi đường dẫn quay trở lại điểm bắt đầu. | The breadcrumbs at the top of the page showed: Home > Blog > User Interface Glossary. |
| Call to Action (CTA) | Noun | Một chỉ dẫn, thường là nút hoặc liên kết, được thiết kế để thúc đẩy người dùng thực hiện một bước cụ thể, mong muốn. CTA rất quan trọng cho việc chuyển đổi. | The bright orange "Download Free Trial" button is a very effective Call to Action. |
| Dropdown Menu | Noun | Danh sách các tùy chọn xuất hiện khi người dùng nhấp hoặc di chuột qua tên menu. Nó giúp tiết kiệm không gian màn hình. | Please select your country from the dropdown menu to see relevant shipping options. |
| Fidelity | Noun | Mức độ chi tiết, tính chân thực và chức năng được tích hợp vào một prototype hoặc thiết kế. Nó dao động từ thấp (phác thảo cơ bản) đến cao (bản mô phỏng tương tác, có kiểu dáng). | For user testing, we created a high-fidelity prototype that closely mimics the final app's look and feel. |
| Grid System | Noun | Một cấu trúc gồm một loạt các đường ngang và dọc giao nhau được sử dụng để sắp xếp nội dung một cách nhất quán và có tổ chức. | Using a grid system helped the designers maintain alignment and visual harmony across all pages of the website. |
| Heuristic Evaluation | Noun | Phương pháp kiểm tra khả năng sử dụng trong đó các chuyên gia đánh giá giao diện dựa trên một tập hợp các nguyên tắc khả năng sử dụng đã được thiết lập (heuristics). Nó giúp xác định các vấn đề khả năng sử dụng tiềm ẩn. Tìm hiểu thêm về Heuristics. | A heuristic evaluation conducted by UX specialists identified several areas for improving the website's navigation. |
| Icon | Noun | Một biểu tượng đồ họa nhỏ, mang tính biểu tượng được sử dụng để biểu thị một đối tượng, hành động hoặc ý tưởng. Các biểu tượng giúp tăng khả năng quét và hiểu. | Click the shopping cart icon in the top right corner to view your selected items. |
| Modal (or Modal Window) | Noun | Một hộp thoại hoặc cửa sổ pop-up xuất hiện trên nội dung chính, tạm thời vô hiệu hóa tương tác với nội dung nền cho đến khi modal được xử lý. | A confirmation modal appeared, asking "Are you sure you want to delete this item?" before proceeding. |
| Placeholder Text | Noun | Văn bản tạm thời, hướng dẫn được hiển thị trong trường nhập liệu trước khi người dùng nhập bất kỳ giá trị nào. Nó hướng dẫn người dùng về định dạng hoặc loại nhập liệu dự kiến. | The search bar had placeholder text saying "Search articles..." to guide the user. |
| Responsive Design | Noun | Một phương pháp thiết kế web giúp các trang web hiển thị tốt trên nhiều loại thiết bị và kích thước cửa sổ hoặc màn hình, từ máy tính để bàn đến điện thoại di động. | Thanks to responsive design, the website layout automatically adjusts to provide an optimal viewing experience on tablets and smartphones. |
| Sitemap | Noun | Một danh sách hoặc sơ đồ phân cấp biểu thị cấu trúc và tổ chức của các trang trong một trang web hoặc ứng dụng. Nó hỗ trợ điều hướng và SEO. | The sitemap was submitted to search engines to help them crawl the new website more efficiently. |
| Tooltip | Noun | Một hộp pop-up thông tin nhỏ xuất hiện khi người dùng di chuột qua một yếu tố giao diện, cung cấp lời giải thích ngắn gọn hoặc ngữ cảnh bổ sung. | Hover your mouse over the question mark icon to see a helpful tooltip explaining the feature. |
| Wireframe | Noun | Bản phác thảo xương sống, mức độ chi tiết thấp của một trang web hoặc màn hình ứng dụng. Nó tập trung vào cấu trúc, vị trí nội dung và chức năng, không phải thiết kế trực quan. | Before adding any colors or images, the UX designer created a detailed wireframe to map out the user journey. |
| Whitespace (or Negative Space) | Noun | Khoảng trống hoặc không gian không được đánh dấu xung quanh và giữa các yếu tố trong bố cục thiết kế. Nó rất quan trọng đối với khả năng đọc, cân bằng và sự hấp dẫn trực quan. | Effective use of whitespace in the article made it much easier to read and less overwhelming. |
Các cụm từ thông dụng
Ngoài các thuật ngữ riêng lẻ được tìm thấy trong bất kỳ User Interface Glossary nào tốt, một số cụm từ thường được sử dụng trong các cuộc thảo luận về UI. Hiểu những biểu thức này sẽ giúp bạn nắm bắt các cuộc hội thoại và tài liệu hiệu quả hơn. Phần này tập trung vào các thuật ngữ thiết kế UI thực tế trong ngữ cảnh, mở rộng hiểu biết của bạn vượt ra ngoài các định nghĩa cơ bản từ User Interface Glossary.
| Phrase | Usage Explanation | Example Sentence(s) |
|---|---|---|
| "Above the fold" | Thuật ngữ này, có nguồn gốc từ báo chí, dùng để chỉ phần của một trang web mà người dùng nhìn thấy mà không cần cuộn xuống. Đây là vị trí đắc địa cho thông tin quan trọng hoặc CTA. | To maximize visibility, the main headline and the primary Call to Action were placed above the fold. |
| "User flow" | Mô tả toàn bộ đường dẫn mà người dùng đi qua một trang web hoặc ứng dụng để đạt được một mục tiêu cụ thể, từ điểm truy cập đến hành động cuối cùng. Việc lập bản đồ user flows giúp xác định các điểm khó khăn. | We need to carefully analyze and optimize the user flow for the new account registration process to reduce drop-offs. |
| "Pixel perfect" | Một tính từ mô tả một thiết kế kỹ thuật số hoặc giao diện đã được triển khai hoàn toàn phù hợp với các thông số kỹ thuật của nhà thiết kế, đến từng vị trí và hình thức chính xác của mỗi pixel. | The client was very pleased that the front-end developer implemented the design to be pixel perfect, matching the mockups exactly. |
| "Dark patterns" | Đây là các thiết kế giao diện người dùng lừa đảo được tạo ra để lừa người dùng làm những điều họ có thể không có ý định, chẳng hạn như đăng ký các khoản thanh toán định kỳ hoặc chia sẻ nhiều dữ liệu hơn họ muốn. Các nhà thiết kế đạo đức tránh chúng. Thông tin thêm tại Thiết kế lừa đảo. | The website used dark patterns by pre-selecting expensive add-ons during checkout, hoping users wouldn't notice. |
| "Mobile-first approach" | Chiến lược thiết kế mà quá trình bắt đầu bằng cách thiết kế cho màn hình nhỏ nhất (thiết bị di động) và sau đó nâng cao thiết kế dần dần cho các màn hình lớn hơn (máy tính bảng, máy tính để bàn). | Given that most of our users access the site via their phones, we adopted a mobile-first approach to ensure a seamless experience. |
| "Visual hierarchy" | Nguyên tắc sắp xếp các yếu tố theo cách thể hiện tầm quan trọng. Nó hướng mắt người dùng qua nội dung theo một thứ tự cụ thể, sử dụng kích thước, màu sắc, độ tương phản và vị trí. | A strong visual hierarchy makes it easy for users to quickly scan the page and find the information they need. |
| "A/B testing" (or Split Testing) | Phương pháp so sánh hai phiên bản (A và B) của một trang web, màn hình ứng dụng hoặc yếu tố với nhau để xác định phiên bản nào hoạt động tốt hơn trong việc đạt được một mục tiêu cụ thể (ví dụ: tỷ lệ chuyển đổi cao hơn). | Through A/B testing, we discovered that the green "Sign Up" button converted 20% more users than the blue one. |
Kết luận
Nắm vững User Interface Glossary này và các cụm từ thông dụng đã thảo luận là một bước tiến quan trọng trong hành trình chuyên môn của bạn. Những thuật ngữ thiết kế UI này là nền tảng cho việc giao tiếp rõ ràng và tạo ra các sản phẩm kỹ thuật số hiệu quả, thân thiện với người dùng. Tầm quan trọng của từ vựng UX/UI mạnh mẽ, như đã được trình bày chi tiết trong User Interface Glossary này, không thể bị đánh giá thấp. Hãy tiếp tục luyện tập và khám phá; nỗ lực kiên trì sẽ xây dựng sự tự tin và chuyên môn của bạn trong lĩnh vực này. Đừng nản lòng vì những vấn đề phát âm ban đầu; luyện tập giúp hoàn hảo khi học tiếng Anh chuyên ngành công nghệ. Chúng tôi hy vọng User Interface Glossary này phục vụ như một nguồn tài nguyên quý giá. Chúc bạn may mắn!