Wireframes Glossary: Key Terms for Designers

Chào mừng bạn đến với Wireframes Glossary của chúng tôi! Hướng dẫn này được thiết kế để giúp những người học tiếng Anh và những nhà thiết kế đầy tham vọng hiểu các thuật ngữ UI/UX thiết yếu. Nắm vững vốn từ vựng chuyên ngành này là một bước quan trọng trong quá trình thiết kế của bạn. Chúng tôi sẽ khám phá các khái niệm chính, giúp bạn giao tiếp hiệu quả hơn trong lĩnh vực thiết kế sản phẩm kỹ thuật số. Những mẹo từ vựng này sẽ tăng sự tự tin và hiểu biết của bạn về tiếng Anh cho các nhà thiết kế.

Image: English for UI/UX Design

Mục lục

Wireframes Glossary là gì?

Phần này dành riêng để phân tích các thuật ngữ cơ bản mà bạn sẽ thường gặp khi thảo luận hoặc tạo wireframes. Hãy coi nó như từ điển nền tảng của bạn cho bản thiết kế UI/UX. Việc hiểu các khái niệm cốt lõi này là tối quan trọng đối với bất kỳ ai muốn xây dựng giao diện kỹ thuật số rõ ràng, hiệu quả và thân thiện với người dùng.

Wireframes Glossary này nhằm mục đích đơn giản hóa các thuật ngữ này, mang đến cho bạn sự tự tin để sử dụng chúng một cách chính xác trong quá trình thiết kế của mình. Nắm vững vững chắc vốn từ vựng thiết kế này, vốn là trung tâm của bất kỳ Wireframes Glossary nào, sẽ hợp lý hóa việc giao tiếp với đồng nghiệp và khách hàng, đồng thời hỗ trợ hành trình của bạn trong suốt quá trình thiết kế.

Dưới đây là bảng các từ và cụm từ thiết yếu liên quan đến wireframes. Mỗi thuật ngữ bao gồm loại từ, định nghĩa đơn giản và câu ví dụ để minh họa cách sử dụng trong ngữ cảnh. Điều này sẽ giúp bạn xây dựng vốn từ vựng tiếng Anh chuyên ngành của mình cho thiết kế sản phẩm kỹ thuật số.

VocabularyPart of SpeechSimple DefinitionExample Sentence(s)
WireframeNounMột hướng dẫn trực quan cơ bản, thường là đen trắng, biểu thị khung xương của một trang web hoặc ứng dụng.The designer presented a low-fidelity wireframe to show the page layout before adding visual details.
UI (User Interface)NounPhương tiện mà người dùng và hệ thống máy tính tương tác, tập trung vào giao diện, cách trình bày và tính tương tác của một sản phẩm. Để biết thêm chi tiết, xem định nghĩa Giao diện người dùng này.A clean and intuitive UI is crucial for a positive user experience.
UX (User Experience)NounTrải nghiệm tổng thể mà một người có được khi sử dụng một sản phẩm, đặc biệt là về mức độ dễ sử dụng hoặc thú vị. Tìm hiểu thêm về Trải nghiệm người dùng từ các chuyên gia.Good UX keeps users engaged and satisfied with the application.
LayoutNounSự sắp xếp và tổ chức các yếu tố hình ảnh, như văn bản và hình ảnh, trên một trang hoặc màn hình.The layout of the homepage needs to be adjusted to improve readability on mobile devices.
MockupNounMột thiết kế tĩnh, có độ trung thực cao bao gồm các chi tiết hình ảnh như màu sắc, kiểu chữ và hình ảnh.After the wireframe was approved, the team created a detailed mockup.
PrototypeNounMột mô hình tương tác của một sản phẩm mô phỏng tương tác của người dùng, được sử dụng để kiểm tra các khái niệm thiết kế.The team built a clickable prototype to test the main user flows before development.
NavigationNounHệ thống các liên kết, nút và menu cho phép người dùng di chuyển qua một trang web hoặc ứng dụng.Clear navigation helps users find information quickly and efficiently.
CTA (Call to Action)NounMột hướng dẫn hoặc lời nhắc được thiết kế để khuyến khích người dùng thực hiện một hành động cụ thể, như "Đăng ký" hoặc "Mua ngay".The "Learn More" button is our primary CTA on this landing page.
GridNounMột hệ thống các đường ngang và dọc cung cấp khung để căn chỉnh và cấu trúc nội dung.Using a grid helps maintain consistency and visual harmony across different pages of the design.
PlaceholderNounMột yếu tố tạm thời trong wireframe (ví dụ: một ô vuông có dấu X) cho biết vị trí nội dung như văn bản hoặc hình ảnh sẽ xuất hiện.The wireframe uses a grey box as a placeholder for the video content that will be added later.
FidelityNounMức độ chi tiết và chân thực trong wireframe hoặc prototype; có thể là độ trung thực thấp (lo-fi) hoặc độ trung thực cao (hi-fi).Early-stage wireframes are typically low-fidelity, focusing on structure rather than visual details.
User FlowNounĐường dẫn hoặc chuỗi các bước mà người dùng thực hiện trên trang web hoặc ứng dụng để hoàn thành một tác vụ cụ thể hoặc đạt được mục tiêu.We carefully mapped out the user flow for the e-commerce checkout process to identify potential pain points.
Responsive DesignNoun PhraseMột phương pháp thiết kế web đảm bảo các trang web hiển thị tốt và thích ứng với nhiều thiết bị và kích thước màn hình khác nhau.Responsive design is essential to ensure our website looks good on desktops, tablets, and mobile phones.
Content AreaNoun PhraseCác phần cụ thể của bố cục được chỉ định để hiển thị nội dung chính như văn bản, hình ảnh hoặc video.The main content area on the blog page will feature the latest articles.
HeaderNounPhần trên cùng của trang web, thường chứa logo, thanh điều hướng chính và đôi khi là thanh tìm kiếm.The website header clearly displays the company logo and provides easy access to the navigation menu.

Xem thêm:

Các cụm từ thông dụng được sử dụng

Việc hiểu các cụm từ thông dụng liên quan đến wireframing có thể cải thiện đáng kể khả năng giao tiếp của bạn trong các nhóm thiết kế và với khách hàng. Những cách diễn đạt này thường được sử dụng trong các cuộc thảo luận về dự án UI/UX, wireframing ứng dụng di động và những kiến thức cơ bản về thiết kế web.

Học các cụm từ thực tế này sẽ giúp bạn hiểu sâu hơn các cuộc thảo luận, tham gia hiệu quả hơn vào các cuộc họp và trình bày ý tưởng thiết kế của bạn một cách rõ ràng và tự tin hơn. Đây là một phần quan trọng trong việc thành thạo tiếng Anh cho các nhà thiết kế trong bối cảnh thiết kế trải nghiệm người dùng.

PhraseUsage ExplanationExample Sentence(s)
Sketch out a wireframeĐể nhanh chóng tạo một bố cục trực quan cơ bản, thường là vẽ tay, nhằm khám phá các ý tưởng ban đầu cho một trang hoặc màn hình.Let's sketch out a wireframe for the new feature during our brainstorming session before diving into digital tools.
Low-fidelity vs. High-fidelityĐược sử dụng để phân biệt giữa wireframes/prototypes dựa trên mức độ chi tiết, chân thực và tính tương tác của chúng.We'll start with low-fidelity wireframes to confirm the structure; high-fidelity mockups will come later.
Iterate on the designĐể thực hiện các cải tiến và tinh chỉnh liên tiếp đối với một thiết kế dựa trên phản hồi, thử nghiệm người dùng hoặc những hiểu biết mới.After the usability testing, we need to iterate on the design of the settings page to address user concerns.
Define the user journeyĐể phác thảo toàn bộ trải nghiệm của người dùng, bao gồm tất cả các bước họ thực hiện để đạt được một mục tiêu cụ thể.Before starting the wireframes, it's crucial to define the user journey for the online booking process.
Focus on functionality, not aestheticsMột hướng dẫn ưu tiên cấu trúc, mục đích và khả năng sử dụng của wireframe hơn là vẻ ngoài của nó.When reviewing these initial wireframes, please focus on functionality, not aesthetics; visual design is next.
Get sign-off on the wireframesĐể nhận được sự chấp thuận chính thức cho bố cục wireframe từ các bên liên quan hoặc khách hàng trước khi chuyển sang giai đoạn thiết kế tiếp theo.We need to get sign-off on the wireframes from the product manager by the end of this week.
Map out the information architecture (IA)Để tổ chức, cấu trúc và gắn nhãn nội dung một cách hiệu quả và bền vững nhằm giúp người dùng tìm thấy thông tin.The first step in redesigning the website is to map out the information architecture to ensure a logical content flow.

Kết luận

Nắm vững Wireframes Glossary này và vốn từ vựng thiết kế liên quan là một bước quan trọng trong hành trình của bạn với tư cách là một nhà thiết kế UI/UX. Kiến thức tiếng Anh chuyên ngành này, được trình bày chi tiết trong Wireframes Glossary của chúng tôi, sẽ giúp bạn hiểu rõ hơn các khái niệm, giao tiếp hiệu quả với các nhóm và tạo ra các sản phẩm kỹ thuật số lấy người dùng làm trung tâm.

Hãy tiếp tục thực hành các thuật ngữ UI/UX này và khám phá thêm về thiết kế trải nghiệm người dùng và các công cụ tạo prototype. Sự cống hiến của bạn cho việc học và áp dụng vốn từ vựng này sẽ mở đường cho sự thành công trong lĩnh vực thiết kế sản phẩm kỹ thuật số thú vị và không ngừng phát triển. Hãy nhớ rằng, giao tiếp rõ ràng là chìa khóa trong môi trường thiết kế hợp tác.