在产品设计、界面改版等日常业务中，设计师大多时候还是需要进行一遍遍调整和细化，而这个过程也需要遵循一定的原则，不能任性更改。那么有哪些UI上的设计原则是我们可以参考和借鉴的？本文作者便结合实际案例，对一些设计原则的应用进行了解读，一起来看。
近段时间讲了不少AI方面的知识
不过我实际用AI绘画做UI时，目前还只能用来做参考，很多细节还是得手动调整。今天跟大家分享的这个案例，就是通过16次改版优化把它一点点变好的。通过对UI中这些细节的不断打磨，终于让它在视觉上变得更好了。 这16次优化，实际上也是在做UI时所需要遵循的设计原则，记得收藏并用到自己的项目里，用上才算真正学到。 一个界面改了16版，看着一点点被优化好，还挺激动的 设计一个好的UI界面并不容易，因为有太多细节需要考虑，比如布局、间距、字体和颜色等，做出决策会让人感到无从下手。当你还需要考虑到可用性、可访问性和心理学等因素时，设计就变得更加困难了。
WhatsApp 号码对于虚拟网络非常有用。在活动或会议 WhatsApp 号码数据 期间分享您的号码，与行业专业人士建立联系。创建小组进行讨论和协作。该平台促进实时通信，帮助您以方便易用的方式建立关系并扩展您的专业网络。
幸运的是，UI设计并不会太难。作为一个产品设计师，我工作了将近20年，发现自己大部分的视觉和交互设计决策都是基于一套简单的逻辑规则。跟别的设计师不一样的是，我依赖的是规则而不是艺术感或者神秘的灵感。 有一个系统性的逻辑规则可以帮助你更高效地做出设计决策。如果没有这个逻辑系统，只是凭感觉胡乱挪动元素，能不能把UI做好貌似就只能靠运气。
我喜欢规则和逻辑
但做设计也绝不是非黑即白。不要把下面的建议看成必须遵守的严格规则，而是把它们当作实用的指导方向，在大多数情况下都能很好地发挥作用。 下面就用一个案例来说明这些设计规则如何改进UI设计。 下面这2张图是一款租房应用详情页面，左边是优化前的，右边是通过一系列逻辑规则优化后的效果。
（彩云注：有指导原则对于做设计决策会好很多，避免自己的感觉不准，让设计质量更加稳定。） 一个界面改了16版，看着一点点被优化好，还挺激动的 即使你没有太多交互或视觉设计经验，你可能也会觉得左边的设计是杂论无章，复杂难用的。这些因为界面中有很多设计细节问题没有处理好，让界面的可用性大打折扣，你能看出来多少？ 让我们一起根据下面16条黄金原则优化好这个界面吧： 使用留白和分组来划分元素 保持一致性 确保看起来相似的元素在功能上也是类似的 设计清晰的视觉层次结构 删减不必要的样式 使用有目的的颜色 确保界面中的元素能保持3:1的对比度 确保文本能有4.5:1的对比度 不要只用颜色来表达信息 使用一种无衬线字体 使用具有较高小写字母的字体 尽量不要过多地使用大写字母 只使用正常和粗体这两种字重 避免使用纯黑色的文本 多使用左对齐 使用至少1.5倍的行高来设置正文文本 一、使用留白和分组来划分元素 把信息分成几组相关元素可以帮助构建一个有条理的界面，更易于组织和阅读信息。这样做可以让人更快更容易地理解和记住界面的内容。 你可以使用这些方法来对信息分组： 把相关元素放在一个容器里； 把相关元素彼此靠近； 让相关元素在设计上相似； 将相关元素对齐在同一条直线上。
使用容器是将界面元素分组的最强视觉表现方式
但它可能会增加不必要的杂乱感。寻找使用其他分组方法的机会，它们通常更微妙，可以帮助简化设计。 使用留白是一个非常有效的元素分组方式，你可以同时使用这些方法用以更好的将信息组织起来。
比如在下面的例子中，留白空间不够让信息显得挤在一起难以阅读，通过增加留白，能帮助更好的对信息进行分组，让整个排版显得更舒服，更利于阅读。 一个界面改了16版，看着一点点被优化好，还挺激动的 二、保持一致性 在UI设计中，一致性的意思是相似的元素，在外观和行为上保持相似。这种一致性不仅在你自己设计的产品中保持，也应该与其他已有的产品相类似，以保证用户的心智统一。这样可以提高可用性并减少错误，用户不再需要重新学习如何使用。
在下面的例子中，图标的风格是不统一的，一些图标是填充的一些是描边的。这会让用户感到困惑，填充图标通常会让用户觉得是已经选择了。
当所有图标都用描边的形式，统一描边2pt的粗细和统一的圆角，并设计相似的视觉重量，那么就可以很好的提高一致性。 一个界面改了16版，看着一点点被优化好，还挺激动的 文本是用来提升图标的易读性，以帮助用户更好的理解它的意思。特别是当一些用户使用读屏时（屏幕阅读器是一种软件，用于描述界面，并通过语音或盲文向看不到它的人进行描述）。
个界面改了16版
看着一点点被优化好，还挺激动的 三、确保看起来相似的元素功能也相似 如果元素看起来是类似的，用户会觉得它们在功能上也是类似的。因此，尝试确保对于具有相同功能的元素使用一致的视觉设计。相反，尝试确保具有不同功能的元素看起来也是不同的。 在我们的例子中，图标区域的样式与“Book now”按钮的样式非常类似。这使得它们看起来是可以点击的，但实际上是不可以的。把底部的蓝色背景区域去掉，避免用户的误解。
个界面改了16版，看着一点点被优化好，还挺激动的 四、创建一个清晰的层次结构 不是所有在界面上的信息都同等重要，为了让信息更容易理解，要让更重要 商务会所：发展的场所 的信息被设计的更突出一些。 一个清晰的层次关系，能帮助用户更快的阅读内容，并能把焦点放到他感兴趣的地方。
同时，它还可以通过创造秩序来提高美学效果。你可以通过大小、颜色、对比、间距、位置和深度进行优化，打造一个清晰的视觉层级。 下面的例子是一个视觉层次不清晰的网站banner示例，在它下面是一个明确的层次结构的案例。 一个界面改了16版，看着一点点被优化好，还挺激动的 一个界面改了16版，看着一点点被优化好，还挺激动的 一个非常快且容易的检查你的视觉设计层次是否清晰的方法是采用“眯眼测试（ Squint Test）”。
只需眯起眼睛观察你的设计
或者远离屏幕或使设计模糊。你仍应该能够看出哪些元素最重要，知道界面的用途。 用“眯眼测试”看下面的例子，我们可以发现多个具有类似视觉强度的元素在争抢用户的注意力。同时，左下角的主要操作反而没有凸显出来。 一个界面改了16版，看着一点点被优化好，还挺激动的 主要按钮在界面中通常是最突出的元素。通过给它一个与背景强对比的颜色，并把字体加粗可以实现这一点。这样做也解决了可读性的问题，后面会详细研究。
个界面改了16版，看着一点点被优化好，还挺激动的 再次用上“眯眼测试”，主要按钮这次成了页面中最突出的元素了。 一个界面改了16版，看着一点点被优化好，还挺激动的 视觉层次现在终于清晰了，但依然还有提升的空间。
例如，正文相对于它的层级来说，还是有点太突出了。 五、删除不必要的样式 不必要的信息和视觉样式可能会分散注意力，增加认知负荷。避免使用不必要的线条、颜色、背景和动画，目的是创建一个更简单、更专注的界面。 一个界面改了16版，看着一点点被优化好，还挺激动的 在我们的例子中，图片周围的留白和描边是没必要的，会增加视觉复杂度。这些样式不需要来传达信息或对元素进行分组，因此我们可以安全地将它们删减以简化设计。
个界面改了16版，看着一点点被优化好，还挺激动的 六、有目的的使用颜色 有目的地、节制地使用颜色。尽量避免仅仅因为装饰而使用颜色，因为这样会让人感到混乱和分散注意力。从黑白开始，只在需要传达意义时才引入颜色。 一个简单有效的方式是把品牌颜 社交帖子 色应用到文字链接和按钮等可交互的元素上。它能帮助用户理解哪些是可点击的而哪些不可以。尝试避免使用品牌颜色在不可交互的元素上。 你也不需要把品牌颜色应用到所有可交互的元素上，一些元素其实本身就已经给出了可交互的线索。
例如，卡片设计本身给人的隐喻就是全部可点击的，所以不需要在文字上单独再加一个蓝色的链接。 一个界面改了16版，看着一点点被优化好，还挺激动的 在我们的例子中，优化前的蓝色标题可起来还挺好看的，但它让文字看起来是可交互的。为了帮助避免这种困惑，我们需要把这种蓝色样式给移除掉。 我们同样需要把其他不可交互的元素中的蓝色样式删除掉，比如蓝色的星星。这样优化后，界面上可点不可点的信息就能一目了然了。
个界面改了16版，看着一点点被优化好
还挺激动的 七、确保界面上的元素能保持3:1的对比度 对比是衡量两种颜色之间感知亮度差异的指标。对比度的表达方式是一个比例，范围从1:1到21:1不等。例如，在黑色背景上的黑色文本具有最低的1:1对比度比率，而在白色背景上的黑色文本具有最高的21:1比率。 有许多在线工具(https://usecontrast.com/)可以帮助你测量不同颜色之间的对比度比率。通过使用这些工具，你可以轻松地检查是否符合无障碍标准，并确保所有用户都可以轻松地使用你的产品。 为了确保视力受损的人能够清晰地看到界面细节，应该至少符合[Web内容可访问性指南。
级别的颜色对比要求, 这意味着用户界面元素，如表单字段和按钮，需要至少具有3:1的对比度比率。这是为了确保用户可以清楚地看到所有的界面元素，从而更容易地使用产品。WCAG还包括许多其他指南和要求，包括对语音识别和屏幕阅读器的支持等，以确保你的产品具有最佳的无障碍性能。 在我们的例子中，箭头图标与背景的对比度比率太低。
给图标上加投影和在图片顶部三分之一处加渐变叠加效果
无论图标所在的图片如何变化，都可以使图标具有足够的3:1对比度。 这样可以确保视力受损的人也能够清晰地看到图标，并能够更好地使用你的产品。同时，这也是一种设计技巧，可以使图标在不同背景下都能够显得更加醒目和有吸引力。
个界面改了16版，看着一点点被优化好，还挺激动的 主要按钮的对比度在优化前的页面上同样是对比度太低。在解决视觉层次那里已经优化了它，但这里也值得再提一下。 一个界面改了16版，看着一点点被优化好，还挺激动的 低对比度按钮的风险在于视力较差的人可能无法看到这个按钮。将按钮的对比度比率提高到3：1以上可以使按钮易于访问，同时也有助于纠正视觉层次结构。
