ui设计是什么意思-16版本已经改了，界面设计还好吗？

最近聊了很多AI知识，但实际使用AI画画做UI时，目前只能作为参考，很多细节还是要手动调整。 今天给大家分享的案例就是通过16次修改和优化来一点点改进。 通过不断打磨UI中的这些细节，最终在视觉上变得更好。

这16个优化其实就是做UI时需要遵循的设计原则。 请记住收集它们并在您自己的项目中使用它们。 只有当你使用它们时，你才能真正学会它们。

设计一个好的 UI 界面并不容易，因为需要考虑很多细节，例如布局、间距、字体和颜色，做出决定可能会让人感到不知所措。 当您还需要考虑可用性、可访问性和心理等因素时，设计变得更加困难。

幸运的是，UI 设计并不是太难。 作为一名产品设计师近 20 年，我发现我的大部分视觉和交互设计决策都是基于一组简单的逻辑规则。 与其他设计师不同，我依靠的是规则，而不是艺术感或神秘的灵感。

拥有逻辑规则系统可以帮助您更有效地做出设计决策。 如果没有这样的逻辑系统，只是凭感觉随意移动元素，看来UI能不能做好就看运气了。

我喜欢规则和逻辑，但设计从来都不是非黑即白的。 不要将以下建议视为必须遵守的严格规则，而应将其视为在大多数情况下都能发挥良好作用的实用指南。

下面通过一个案例来说明这些设计规则如何改进UI设计。

下面两张图是一个租赁应用的详情页。 左边是优化前，右边是通过一系列逻辑规则优化后的效果。 （彩云注：设计决策最好有指导原则，避免感觉不准确，让设计质量更加稳定。）

即使你没有太多的交互或视觉设计经验，你也可能会觉得左边的设计杂乱、复杂、难以使用。 这些都是因为界面中有很多设计细节没有处理好，从而大大降低了界面的可用性。 你能看到多少？

让我们根据以下 16 条黄金原则来优化这个界面：

使用空格和分组来划分元素

保持一致性

确保看起来相似的元素在功能上相似

设计清晰的视觉层次结构

删除不必要的样式

使用有目的的颜色

确保界面中的元素保持 3:1 的对比度

确保文本的对比度为 4.5:1

不要仅仅使用颜色来传达信息

使用无衬线字体

使用带有较高小写字母的字体

尽量不要使用太多大写字母

仅使用正常和粗体粗细

避免纯黑色文本

更频繁地使用左对齐

正文文本至少使用行高的 1.5 倍

1.使用空格和分组来划分元素

将信息分为相关元素组可以帮助构建一个有组织的界面，使组织和阅读信息变得更加容易。 这样做可以更快、更容易地理解和记住界面的内容。

您可以使用以下方法对信息进行分组：

使用容器是对界面元素进行分组的最直观的方式吉祥物，但它可能会增加不必要的混乱。 寻找机会使用其他分组方法ui设计是什么意思表情包设计，它们通常更微妙，可以帮助简化设计。

使用空白是对元素进行分组的一种非常有效的方法，您可以结合使用这些方法来更好地组织信息。

例如，在下面的示例中，没有足够的空白，导致信息拥挤在一起，难以阅读。 通过增加空白，可以帮助更好地对信息进行分组，使整个布局更舒适、更易于阅读。

2. 保持一致

在 UI 设计中，一致性意味着相似的元素，在外观和行为上保持相似。 这种一致性不仅在你设计的产品中保持，也应该与其他现有产品类似，以保证用户思想的统一。 这提高了可用性并减少了错误，用户不再需要重新学习如何使用它。

下面的例子中，图标样式不一致，有的图标是填充的，有的图标是描边的。 这会让用户感到困惑，并且填充图标通常会让用户感觉已经做出了选择。 当所有图标都是笔画的形式，笔画的粗细为2pt，圆角均匀，视觉粗细相近，那么可以很好的提高一致性。

文本用于提高图标的易读性，以帮助用户更好地理解其含义。 特别是当某些用户使用屏幕阅读器时（屏幕阅读器是描述界面并通过语音或盲文向看不到它的人描述界面的软件）。

3. 确保看起来相似的元素也具有相似的功能

如果元素看起来相似，用户就会认为它们在功能上相似。 因此，请尽量确保对具有相同功能的元素使用一致的视觉设计。 相反，尝试确保具有不同功能的元素看起来也不同。

在我们的示例中，图标区域的样式与“立即预订”按钮非常相似。 这使得它们看起来可以点击，但实际上并非如此。 去掉底部的蓝色背景区域，避免用户误解。

4.创建清晰的层次结构

并非界面上的所有信息都同样重要。 为了使信息更容易理解，更重要的信息应该设计得突出。

清晰的层次关系可以帮助用户更快地阅读内容并专注于自己感兴趣的内容。 同时，还可以通过营造秩序来增强审美效果。 您可以优化尺寸、颜色、对比度、间距、位置和深度，以创建清晰的视觉层次结构。

下面的示例是一个视觉层次不清晰的网站横幅示例，下面是一个层次清晰的示例。

检查视觉设计层次结构清晰度的一种非常快速且简单的方法是使用“斜视测试”。 只需眯着眼睛观察您的设计，或将目光从屏幕上移开或模糊设计。 您仍然应该能够看到哪些元素最重要以及界面的用途。

使用“眯眼测试”看下面的例子，我们可以看到视觉强度相似的多个元素正在争夺用户的注意力。 同时，左下角的主要操作并未突出显示。

主按钮通常是界面中最突出的元素。 为此，请为其指定与背景形成强烈对比的颜色，并将字体设置为粗体。 这也解决了可读性的问题，后面会详细研究。

再次应用“眯眼测试”，这次主按钮成为页面上最突出的元素。

视觉层次现在终于清晰了，但仍有改进的空间。 例如，正文文本因其层次结构而显得过于突出。

5.删除不必要的样式

不必要的信息和视觉风格可能会分散注意力并增加认知负荷。 避免不必要的线条、颜色、背景和动画，目的是创建一个更简单、更集中的界面。

在我们的例子中，图像周围的空白和笔划是不必要的，并且增加了视觉复杂性。 这些样式不需要传达信息或分组元素，因此我们可以安全地将它们删除以简化设计。

6. 有目的地使用颜色

有目的且谨慎地使用颜色。 尽量避免仅使用颜色进行装饰，因为它会让人感到困惑和分散注意力。 从黑色和白色开始，仅在需要传达含义时才引入颜色。

一种简单有效的方法是将品牌颜色应用于文本链接和按钮等交互元素。 它可以帮助用户了解什么是可点击的，什么是不可点击的。 尽量避免在非交互元素上使用品牌颜色。

您也不需要将品牌颜色应用于所有可交互元素，某些元素本身已经提供了可交互提示。 例如，卡片设计本身的隐喻是它都是可点击的，因此不需要在文本中添加单独的蓝色链接。

在我们的例子中，未经优化的蓝色标题看起来不错，但它使文本看起来具有交互性。 为了避免这种混乱，我们需要删除蓝色样式。

我们还需要从其他非交互元素（例如蓝色星星）中删除蓝色样式。 这样优化后，界面上可点击和不可点击的信息一目了然。

7. 确保界面上的元素保持3:1的对比度

对比度是两种颜色之间感知亮度差异的度量。 对比度以比率表示，范围为 1:1 到 21:1。 例如，黑色背景上的黑色文本具有最低的 1:1 对比度，而白色背景上的黑色文本具有最高的 21:1 对比度。

有许多在线工具 ( ) 可以帮助您测量不同颜色之间的对比度。 通过使用这些工具，您可以轻松检查是否符合可访问性标准，并确保所有用户都可以轻松使用您的产品。

为保证视障人士能够清晰地看到界面细节，至少应满足【网页内容无障碍指南（WCAG）】2.1 AA级色彩对比度要求。

这意味着用户界面元素（例如表单字段和按钮）需要至少具有 3:1 的对比度。 这是为了确保所有界面元素对用户都清晰可见，从而更轻松地使用产品。 WCAG 还包括许多其他准则和要求，包括对语音识别和屏幕阅读器的支持，以确保您的产品具有最佳的辅助功能性能。

在我们的例子中，箭头图标与背景的对比度太低。 向图标添加阴影并在图像的前三分之一处添加渐变叠加将为图标提供足够的 3:1 对比度，无论图像放置的方式如何变化。

这可以确保视障人士能够清晰地看到图标并更好地使用您的产品。 同时，这也是一种可以使图标在不同背景下脱颖而出并具有吸引力的设计技巧。

优化前的页面主按钮对比度也太低。 它已经在解决视觉层次结构中进行了优化，但这里也值得一提。

低对比度按钮的风险是视力不佳的人可能看不到按钮。 将按钮的对比度提高到 3:1 以上可以使按钮更易于访问，同时也有助于纠正视觉层次结构。

将箭头和按钮的对比度增加到大于 3:1 的比例会产生以下设计。 我们离预期的效果又近了一步，但还有更多的问题需要解决。

8. 确保文本的对比度为 4.5:1

为确保视障人士能够清晰阅读文本，文本需要满足以下 WCAG 2.1 AA 级对比度要求

在我们的例子中，小字在照片中没有足够的对比度。 我们将对比度提高到 4.5:1，增加了深色的不透明度，并增加了文本的阴影。

位置信息的对比度也太低。 薄文本使其难以阅读。 使用深灰色可以帮助文本更易于阅读。 我们将尽快对文本进行进一步优化。

9.不要只依赖颜色

色盲有多种不同类型，主要影响男性。 通常，色盲者很难区分红色和绿色，有些人根本看不到任何颜色。

为了确保色盲用户在使用产品时的可用性，您不能仅仅依靠颜色作为交互指南，或区分不同的视觉元素。 您需要为 UI 元素添加更多视觉提示。

在我们的示例中，“评论”文本使用蓝色表示链接。 如果去掉颜色ui设计是什么意思，链接文本就和其他普通文本没有什么区别，所以给可点击的链接文本添加下划线是正确的做法，这样可以很好的区分。

10.使用一致的无衬线字体

字体是一组具有相似风格或美学特征的相关字形设计。 Helvetica 是字体的一个示例。 字形是字体内的变体，例如粗细或大小。 例如，Helvetica 粗体和 Helvetica 常规是 Helvetica 字体中的两种不同字形。

在界面中仅使用一种无​​衬线字体是安全的，因为它们通常是最具可读性、中立性和简单性的。

在我们的例子中，标题采用了详细的衬线字体，这可能难以阅读，并且可能会打扰某些人。 此外，其风格可能与应用程序中的某些照片不匹配。 使用简单的无衬线字体可以提高可用性和美观性。

11.使用较高的小写字母字体

选择字体时，请寻找小写字母较高且字母间距较宽的字体，因为这些字体在较小尺寸下更易于阅读。 字体中小写字母的高度称为 x 高度。

在我们的示例中，Gill Sans 字体的字母高度相对较短，针对 Lato 等较高的字体进行优化可以有效提高可读性。

将字体从 Gill Sans 更改为 Lato 后，我们的示例如下所示。

12. 限制资本

一般来说，如果您不是对某人大喊大叫，则没有太多理由使用大写字母。 因为大写字母看起来太吵杂而且不便于阅读。

因为当你阅读时，你看到的不是单个字母，而是字形中的单词。

一般来说，当我们阅读时，我们通过形状来识别单词比逐个字母地查看单词更容易。 大写字母的单词形状相同，阅读起来比较困难，也不利于快速识别整个单词。

在我们的示例中，位置信息全部大写。 将其改为句子大写，仅第一个单词和专有名词（人名、地名或物名）大写将有助于提高可读性。

13.只使用常规和粗体

虽然字体中可能有多种粗细可供选择，但这并不意味着您需要在设计中使用所有粗细。 使用太多不同的权重可能会使界面显得嘈杂且不清晰。 同时，使用太多不同的权重会使设计难以保持一致性。 因此，最好在设计中仅使用常规且粗体的权重。

仅保留界面中使用的常规和粗体字体，保持界面简单明了。

一些快速使用的技巧：

在我们的示例中，位置文本使用非常细的粗细。 即使我们将对比度优化到4.5:1，实际上仍然很难阅读，因为它太薄了。 增加其粗细并更改为常规字体有助于提高可读性并使界面整体更简单。

14.避免纯黑色文本

在UI设计中，不使用纯黑色比较安全，因为它在白色背景上反差太大。 这种高对比度会导致阅读文本时眼睛疲劳和不适。

黑色为 0% 亮度，白色为 100% 亮度。 两者之间巨大的亮度差异会导致色彩非常不舒服。 因此，最好避免白色背景上的纯黑色，而使用深灰色。

在我们的示例中，许多元素都使用纯黑色。 将其更改为深灰色可提高可读性。 以前，在检查视觉层次结构时，属性描述文本过于突出。 为了保证界面元素按照重要性呈现，将其改为浅灰色，以降低属性描述文字的突出度。

15. 左对齐文本

英语的阅读顺序是从左到右、从上到下，呈 F 形，因此最好将文本左对齐以获得最佳阅读效果。 对于较长的正文文本，最好避免居中对齐或两端对齐的样式。 这种对齐方式很难阅读，尤其是对于那些认知能力较差的人来说。

标题和短文本最好使用居中对齐，这样更容易阅读。 然而，对于长文本，居中对齐是一场灾难，因为每一行的起点不同。 您的眼睛需要找到每一行的开头，这会使阅读变得困难。

在我们的示例中，描述文本是居中对齐的，但将其更改为左对齐将使其更具可读性。

16.内容文本的行高至少为1.5倍

行高是指垂直高度上的文本间距。 每行文本之间的间距有助于防止人们重新阅读同一行文本。 这样做也会让阅读变得更加舒适和自然。

为了提高可访问性和可读性，尤其是长正文文本，请确保行高至少为 1.5 (150%)。 将行高保持在 1.5 到 2 之间通常效果很好。

在我们的示例中，行高仅为 1 (100%)，将行高增加到 1.6 (160%) 可以使可读性更好。

最终效果

我们遵循了一些简单但有效的 UI 设计指南，很快发现并优化了示例设计中的许多问题。

（七彩注：最终优化后的效果会比优化前好很多，所以请你再想一想，如果让你再次优化这个界面并关闭教程，你还能再优化一次吗？然后再进一步，相信在自己的实际项目和作品集中使用这些方法会更有帮助。）

希望您已经开始意识到 UI 设计并不那么困难。 虽然它看起来像是一种神奇的艺术形式，但它的很大一部分是由逻辑规则或指南组成的，就像我们刚刚学到的那样。 使用客观逻辑，而不是主观意见，可以更快、更轻松地设计直观、易于使用且美观的界面。

如果你学到了什么，记得分享到你的朋友圈哦~！