Module 01 · Designing Intuitive Front Ends and Mockup Design Principles直观前端与界面模型设计原则

Do’s and Don’ts of Mockup Design界面模型设计注意事项

Introduction 简介

Design is the process of creating physical or digital products that are simple, practical, and provide a satisfying user experience. In visual design, User Interface (UI) pertains to the actual interfaces that people interact with. The UI comprises elements and features which define the look and feel of a product. When developing a website or mobile application, it is crucial to keep in mind certain points. Here are some important "do's and don'ts" that must be observed and followed when developing the UI.
设计是创建简单、实用且提供令人满意的用户体验的物理或数字产品的过程。在视觉设计中，用户界面（UI）指的是人们实际与之交互的界面。UI 包括定义产品外观和感觉的元素和功能。在开发网站或移动应用程序时，牢记某些要点至关重要。以下是一些在开发 UI 时必须遵守和观察的重要“该做和不该做”事项。

Do’s 做正确的事	Don’ts 不要做
Do include visual design basic elements. 包括视觉设计的基本元素。 Visual design focuses on a website’s appearance to enhance user experience. Some visual design basic elements are lines, shapes, textures, and forms. These are the building blocks for developing a good design. 视觉设计侧重于网站的外观以提升用户体验。一些视觉设计的基本元素包括线条、形状、纹理和形式。这些都是构建良好设计的基石。	Don’t create a complex UI design. 不要创建复杂的用户界面设计。 A good UI design enhances the user’s experience in several ways. People should not find it difficult or challenging when they engage with a product. A good UI design is simple and doesn't waste the user's time. 良好的 UI 设计以多种方式提升用户体验。人们在与产品互动时不应感到困难或具有挑战性。良好的 UI 设计简单且不浪费用户的时间。
Do employ typography to communicate visually with users. 确实使用排版与用户进行视觉沟通。 Designers utilize typography as a visual language to interact visually with users. It facilitates communication, allowing users to follow and comprehend a product better. 设计师利用排版作为视觉语言与用户进行视觉互动。它促进了沟通，使用户能更好地跟随和理解产品。	Don’t arrange elements randomly. 不要随机排列元素。 It is important to arrange elements according to their importance. Elements of higher importance should come on top, whereas the elements with lesser importance should come below. 元素应根据其重要性进行排列。重要性较高的元素应位于上方，而重要性较低的元素应位于下方。
Do use serif typefaces to improve readability. 建议使用衬线字体以提高可读性。 Users should be able to read content easily and connect with it. Serif and sans-serif are the two fundamental types of typefaces for improving readability. 用户应能轻松阅读内容并与之建立联系。衬线和无衬线是两种基本的字体类型，用于提高可读性。	Don't use the same color for sidebars as other elements. 不要将侧边栏与其他元素使用相同的颜色。 Sidebars should not be the same color as other elements. The best practice for sidebars is to make them stand out by using a noticeable design, such as contrasting the main body of the text. 侧边栏不应与其他元素颜色相同。侧边栏的最佳实践是通过使用醒目的设计使其突出，例如通过对比文本的主体。
Do use colors appropriately. 请使用颜色得当。 The appropriate use of colors is an indication of good UI design. It directs the user's attention to specific areas of a web page or mobile interface. 适当使用颜色是良好 UI 设计的标志。它将用户的注意力引导到网页或移动界面的特定区域。	Don’t duplicate the horizontal menu. 不要重复水平菜单。 Avoid duplicating the horizontal menu. The duplication of the same menu items may lead to confusion for the users. 避免重复水平菜单。重复相同的菜单项可能会导致用户混淆。
Do use a grid for incorporating user familiarity. 使用网格以融入用户熟悉度。 For web and mobile layouts, using a grid is the best practice for incorporating user familiarity. It is a structured layout and comprises columns, gutters, and margins that organize how elements should appear on a page. 对于网页和移动布局，使用网格是融入用户熟悉度的最佳实践。它是一种结构化布局，包括列、间距和边距，用于组织页面元素应如何显示。	Don't hide navigation behind icons. 不要将导航隐藏在图标后面。 Avoid hiding the navigation behind icons. Instead, use labels with icons so that the navigation for users is familiar to them. 避免将导航隐藏在图标后面。相反，使用带图标的标签，以便用户的导航体验更加熟悉。
Do use sticky headers when designing headers. 使用粘性标题设计标题时。 One best practice when designing headers is to use sticky headers. These are headers that remain in the same place on the screen while users scroll down. 设计标题时，一个最佳实践是使用粘性标题。这些标题在用户向下滚动时保持在屏幕上的同一位置。	Don't use the same color for the sticky header and the content. 不要使用相同的颜色为粘性页眉和内容。 Keep the contrast of the content in the sticky header different from the rest of the page so that the sticky header remains noticeable. 保持粘性页眉内容的对比度与页面其余部分不同，以便粘性页眉保持醒目。

Conclusion 结论

These "do's and don'ts" are a good starting point for working on the interface and will help you create a successful website or mobile application.
这些“做与不做”的建议是处理界面的良好起点，并将帮助您创建一个成功的网站或移动应用。