ch
English
在数字世界中，设计不仅仅是使应用程序或网站看起来不错的光滑表面处理。周到的用户界面设计可改善数字产品体验，提高全球用户的可用性、可访问性和包容性。现在全球有数千名设计师使用 Figma 构建 UI，Figma 宣传总监 Thomas Lowry 注意到最好的示例遵循五种 UI 设计最佳实践。请继续阅读，了解如何更好地为用户服务，并使每一个创意决策都发挥重要作用。
figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">UI设计原则是什么？
在数字设计中，UI 设计原则是设计师赖以创建服务和取悦用户的设计的总体指导。“作为数字设计师，我们的工作是帮助用户导航到他们需要的内容和功能，以完成他们想做的事情，”汤姆说。“UI 设计原则从人类感知的格式塔原则中汲取灵感，将设计元素分组为用户可以轻松遵循的简单模式，以实现他们的目标。”
figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">为什么 UI 设计原则很重要
在 UI 设计中应用最佳实践，可以让每个人都更轻松地使用、遵循和享受数字产品。“将用户想象成向你问路的人。如果你只是给他们看一张地图并期望他们记住它，他们可能会迷路，”汤姆说。“但是，如果你向他们指出一个标志，上面写着他们的目的地是这样的，他们就可以从那里跟随标志？这是一种更好的体验。UI 设计原则可以帮助你设置用户可以遵循的标志来实现他们的目标——只需点击一下，滚动或一次交互。”
清晰、一致的 UI 设计原则也让设计师更容易做出决策。预先建立 UI 设计原则可以减轻设计师的认知负担，并使产品团队更加高效。Figma 数据分析师发现，能够访问设计系统的参与者比没有访问设计系统的参与者完成设计目标的速度快 34% 。
figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">改进产品的 5 个 UI 设计原则
Figma 的设计师社区共享了数百个 UI 套件、模板和插件，最成功的示例有五个共同的 UI 设计原则。“将这五个 UI 原则结合在一起将有助于改进任何数字产品，”Tom 说。“您可以通过应用核心图形设计原则（例如层次结构、一致性和对齐）来提供有用的线索。但对于真正擅长 UI 的数字设计师来说，他们还需要了解如何使用渐进式披露和对比度来提高可用性和可访问性。”
figma-1o0inhd" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; line-height: 1.45; font-size: var(--h3-fs); letter-spacing: var(--h3-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">1. 层级结构
设计师使用层次结构来帮助用户识别关键信息，并一目了然地将它们与不太重要的元素区分开来。“我经常将设计数字产品或网站与设计一本书进行比较，”汤姆说。“在每个页面上，导航提示都会提醒您标题、章节和内容部分，因此您永远不会迷路。”
与图形设计师一样，数字设计师经常玩弄字体的比例、粗细和颜色以及其他视觉元素，但汤姆鼓励尽可能保持克制。“如何才能在不引入太多差异化因素的情况下吸引人们对最重要元素的关注？您可以仅使用空间来建立层次结构吗？” 他问。
“要注意屏幕上的内容，尤其是用户首先看到的内容以及他们必须滚动才能看到的内容，”汤姆建议。“考虑如何确定信息的优先级：您的 UI 内容层次结构应该反映用户最关心的内容。”
figma-1o0inhd" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; line-height: 1.45; font-size: var(--h3-fs); letter-spacing: var(--h3-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">2. 渐进式披露
用户体验设计师通常使用渐进式披露来引导用户完成多步骤过程，提供适量的信息以便在每个步骤中做出明确的选择。UI 设计师可以借用这种方法来优先考虑 UI 中包含的内容以及排除的内容。“太多的功能可能会让人不知所措，尤其是当需要做出很多决定时，”Tom 解释道。
“聪明的数字设计师对功能和流程进行排序，让体验不那么令人难以承受，”汤姆说。“考虑一下产品入门流程的用户体验示例，它会询问您所有关于您自己的信息：您的姓名、联系信息、您的角色和行业，也许您对此产品感兴趣。如果您必须立即回答所有这些问题，那么该屏幕可能看起来需要填写一份很长的表格，而且您可能会在开始之前就放弃，”汤姆说。
渐进式披露的一个注意事项是确保您不会在此过程中失去用户。“为用户提供一种自我定位的方法，以便他们知道自己在哪里以及需要走多少步，”汤姆建议。“我记得有一个会议评级工具，询问与会者他们最喜欢两次演讲中的哪一场。如果你只参加两次演讲，那没问题，但参加多次演讲的人必须不断重复这一步骤，没有进步感。这个工具需要不同的格式和完成栏，这样用户就可以看到他们在到达终点线方面取得了多少进展。”
figma-1o0inhd" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; line-height: 1.45; font-size: var(--h3-fs); letter-spacing: var(--h3-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">3、一致性
用户可能不太清楚对您的数字产品有何期望，尤其是当您推出全新的技术或概念时。设计系统可以通过一致的设计线索使您的 UI 更易于遵循。借助可识别的路标和可预测的控件，用户可以快速导航您的 UI 并掌控自己的体验，而不会迷失方向或感到沮丧。
一致性也让设计师的工作变得更轻松。“设计系统创造了一致性并优化了可重复性，但其中也有效率的一部分，”汤姆指出。“为什么每次需要创建按钮时都要重新发明轮子？使用一致的模式，随着时间的推移，该按钮将变得熟悉并且可以被用户预测。”
随着用户在流程中前进，连续性变得越来越重要。“如果一个 UI 按钮突然变大，用户会想知道为什么，”Tom 说。“这种不规则性增加了用户的认知负担，造成犹豫和困惑。因此，当你偏离既定模式时，你需要一个很好的理由。”
figma-1o0inhd" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; line-height: 1.45; font-size: var(--h3-fs); letter-spacing: var(--h3-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">4.对比
UI 设计师仔细对比颜色和亮度，使设计与众不同，并且更容易被低视力用户使用——根据世界卫生组织的数据，低视力用户在全球范围内超过四分之一。“确保文本在背景颜色上可读有助于使内容更易于访问，这会影响数字产品的 AA 和 AAA 评级，”Tom 解释道。
白底黑字仍然是印刷媒体的标准，但 UI 设计师可以使用Figma 设计社区创建的对比度检查器和插件来选择不同的颜色。Figma 的颜色选择功能让 UI 设计师可以探索不同的配色方案，然后在最终设计中应用一致的颜色和对比度。Figma 的颜色选择功能让 UI 设计师可以探索不同的配色方案，然后在最终设计中应用一致的颜色和对比度。
他说，UI 设计师还策略性地使用对比来吸引人们对重要内容或功能的注意。“对于一条关键信息——比如警告或删除你的账户——你可以引入一个更高、更刺耳的对比来吸引用户的注意力。”
figma-1o0inhd" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; line-height: 1.45; font-size: var(--h3-fs); letter-spacing: var(--h3-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">5. 邻近性
精明的设计师将具有相似功能的 UI 元素放置在一起，彼此靠近。设计师会对齐密切相关的 UI 元素 - 以流媒体服务为例，其中播放、快进和快退按钮等相关功能位于同一行。但如果退出按钮位于播放按钮旁边，您可能会失去用户。
figma-7d7l42" style="box-sizing: inherit; cursor: var(--cursorText); margin: 32px 0px 16px; font-weight: 500; font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); position: relative; font-family: Whyte, sans-serif; text-wrap: wrap; background-color: rgb(255, 255, 255);">优秀 UI 设计的 3 个专业技巧
应用视角。将 UI 元素放置在屏幕上，以指导用户按照信息和操作的逻辑顺序实现其目标。“您可以在布局中创造视觉张力，以便最重要的信息吸引您的注意力，同时也将注意力吸引到流程中的下一步，”汤姆说。想象一幅风景画：首先你注意到前景中的一座房子，然后你被引导沿着一条通往背景山丘的小路。
冲帐。“考虑最终用户的需求，以及它如何影响用户界面，”Tom 建议。“如果您正在设计博客，您可能需要找到用图像或图表分解密集内容的方法，以吸引最终用户。如果您的博主需要大量空间来使用您的工具编写或编辑图像，其他 UI 元素可能会需要更密集。”
建立节奏。“图形设计师通过呼应的图案和颜色来创造节奏，但 UI 中的节奏更多的是可重复性和变化，”Tom 说。“以 Twitter 为例。当您滚动浏览提要时，重复的 UI 元素（例如用户头像和缩进）会在一条推文结束和下一条推文开始时提示您 - 但这些推文可能看起来非常不同。其中一条可能只是文本， “而下一个是视频。所以 UI 模块有节奏，当你滚动时很容易浏览。”
使用 Figma 改善您的 UI
现在您已经了解了五个基本的 UI 设计原则，改进您的 UI 并不困难 - 进入 Figma 的协作在线设计平台并开始探索。使用 Figma 的UI 设计工具尝试不同的方法，并从 Figma 的设计专业人士社区中寻找新鲜的UI 灵感。
