关于typescript:16个小的UI设计规则却能产生巨大的影响

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

这篇文章介绍了一些对于用户界面设计的实用技巧，帮忙设计师们更好地设计直观、易用、好看的界面。首先，通过利用空间将相干元素进行分组，能够更好地组织和结构化界面，晋升用户了解和记忆的成果。其次，放弃一致性是要害，确保类似的元素在外观和性能上统一，进步可用性和缩小谬误。另外，类似的元素应具备类似的性能，防止产生混同。清晰的视觉档次有助于疾速扫描信息和凸显重要元素。同时，缩小不必要的款式和信息能够简化界面，升高认知负荷。应用色彩时应有目的地应用，防止纯正为装璜而应用，特地是须要留神色盲用户的可拜访性。抉择繁多无衬线字体，并应用具备较高小写字母和适当行高的字体，晋升可读性。同时，防止适度应用大写字母，因为它们难以浏览。此外，防止应用纯彩色文本，采纳较暗的灰色能够进步可读性并缩小眼部疲劳。最初，将文本左对齐，并确保注释文本具备适当的行高，加强可读性。

这些技巧的指标是通过应用逻辑和主观的规定，而非主观的意见，来简化 UI 设计过程，使其更加高效、直观和易用。

总的来说，这篇文章提供了一些贵重的 UI 设计技巧，对于心愿晋升设计技能和发明出杰出用户体验的设计师们来说，是一份有价值的参考资料。

~~ 上面是注释

用户界面设计是一项艰难的工作。面对泛滥的布局、间距、排版和色彩选项，做出设计决策可能会令人感到压力山大。当你再加上可用性、可拜访性和心理学因素，工作难度进一步减少。

侥幸的是，UI 设计并非总是如此艰巨。在近二十年的产品设计工作中，我意识到我大部分的视觉和交互设计决策都是受一套逻辑规定的领导。这不是艺术的激情或神奇的直觉，只是简略的规定。

领有一套逻辑规定能够帮忙你高效地做出理智的设计决策。没有逻辑体系，你只能凭直觉随便调整，直到它看起来好看。

我酷爱规定和逻辑，但设计决策很少是非黑即白的。与其将以下的倡议视为必须恪守的严格规定，不如把它们看作是在大多数状况下都能见效的有用指南。

学习最快的形式就是入手实际，所以让咱们开始吧。

应用逻辑规定来修复这个例子

以下两个设计是短期房产租赁利用的房产详情页面。第一个是原始设计。第二个是利用了一些逻辑规定或指南后的后果。

即便没有太多的视觉或交互设计教训，你可能也会留神到原始设计感觉凌乱、简单，并且难以使用。这是因为它蕴含了许多可能对可用性形成危险的问题设计细节。兴许你曾经发现了其中的一些？

咱们应用以下的逻辑规定或指南，一次解决原始设计的一个问题：

1. 应用空间来组合相干元素
2. 放弃一致性
3. 确保看起来类似的元素性能类似
4. 创立清晰的视觉档次
5. 移除不必要的款式
6. 有目的地应用色彩
7. 确保界面元素的对比度为 3:1
8. 确保文字的对比度为 4.5:1
9. 不要仅依赖色彩作为指示器
10. 应用繁多的无衬线字体
11. 应用小写字母较高的字体
12. 限度大写字母的应用
13. 只应用惯例和粗体字重
14. 防止应用纯彩色的文字
15. 左对齐文字
16. 注释行间距至多为 1.5

1. 应用空间将相干元素分组

将信息合成为相干元素的小组能够帮忙结构化和组织界面，这让人们更快、更容易地了解和记忆。

你能够通过以下办法将相干元素分组：

1. 将相干元素放在同一个容器中
2. 将相干元素空间上凑近
3. 使相干元素看起来类似
4. 在一条间断线上对齐相干元素

应用容器是将界面元素分组的最强烈的视觉提醒，但它可能会减少不必要的凌乱。寻找应用其余分组办法的机会，它们通常更加奥妙，能够帮忙简化设计。

特地是应用空间，是将相干元素分组的一种十分无效且简略的形式。你还能够联合分组办法，以更分明地展现分组。

在咱们的例子中，内容之间不足空间使得设计看起来凌乱且难以了解。减少间距有助于清晰地将内容分组，使其更有组织性，更容易了解。

2. 放弃一致性

在 UI 设计中，一致性意味着类似的元素看起来并且工作形式类似。无论是在你的产品外部，还是与其余曾经建设良好的产品相比，都应该如此。这种可预感的性能性能进步可用性并缩小谬误，因为人们不须要一直地学习事物的工作原理。

在咱们的例子中，图标的款式并不统一，有些是填充的，有些则不是。这可能会使一些人感到困惑，因为填充的图标通常示意一个元素被选中了。用 2pt 的笔触宽度和圆角勾画出所有图标能够进步一致性，并赋予每个图标类似的视觉分量。

图标上也增加了文字标签，以帮忙确保人们能够了解它们的含意，特地是那些应用屏幕阅读器的人（屏幕阅读器是一种用语音或盲文形容界面的软件，供视力障碍者应用）。

3. 确保看起来类似的元素性能类似

如果元素看起来类似，人们会冀望它们以类似的形式工作。所以，请尽量确保你对具备雷同性能的元素应用统一的视觉解决。反之，尝试确保具备不同性能的元素看起来不同。

在咱们的例子中，图标容器的视觉款式与“立刻预订”按钮类似。这使它们看起来像是能够交互的，只管它们并非如此。移除图标的蓝色和按钮款式有助于防止它们被误认为是能够交互的元素。

4. 创立清晰的视觉档次

界面中的所有信息并非都有雷同的重要性。你的指标应该是依照重要性的程序展现信息，使更重要的元素显得更突出。

清晰的重要性程序，或者说视觉档次，有助于人们疾速扫描信息并关注感兴趣的区域。它也通过发明一种秩序感来晋升美感。你能够应用大小、色彩、对比度、间距、地位和深度的变动来创立清晰的视觉档次。

以下是一个没有明确视觉档次的网站英雄横幅示例，前面是一个按重要性程序明确展现元素的示例。

一个疾速简便的检测你的视觉档次是否清晰的办法是应用 ” 含糊测试 ”。只需眯起你的眼睛看你的设计，或者你能够离屏幕远一些，或含糊你的设计。你应该依然可能辨认出哪些是最重要的元素，并且可能辨认出界面的用处。

让咱们把含糊测试利用到咱们的例子上。咱们能够看到有多个元素的突出水平相当，竞相吸引注意力。与此同时，左下角的次要动作一点也不突出。

通常状况下，次要动作应该是界面上最突出的元素。给它一个高对比度的背景色彩和粗体字重能够帮忙实现这一点。这也修复了一个对于低对比度按钮的可拜访性问题，咱们稍后会深入研究这个问题。

将含糊测试利用到更新的设计上，次要动作显然是最突出的元素。

视觉档次当初更清晰了，但还有改良的空间。例如，与其重要性相比，注释文本块的突出水平依然过高。咱们稍后将学习一些疾速的排版指南，这将有助于修改视觉档次。

5. 移除不必要的款式

不必要的信息和视觉款式可能会扩散注意力，减少认知负荷（应用界面所需的脑力）。防止不必要的线条、色彩、背景和动画，能够创立一个更简洁、更聚焦的界面。

在咱们的例子中，图片四周的红色空间和边框减少了不必要的视觉复杂性。它们并不需要传播信息或分组元素，所以咱们能够平安地移除它们，以简化设计。

6. 有目的地应用色彩

有节制且有目的地应用色彩。尽量避免纯正为了装璜而应用色彩，因为它可能会引起混同和分心。从黑白开始，当它能传播意义时再引入色彩。

一个简略无效的办法是将品牌色彩利用于文本链接和按钮等交互元素。这有助于让人们理解哪些是可交互的，哪些不是。尽量避免在非交互元素上应用品牌色彩。

你不须要给所有交互元素增加色彩，因为有些元素曾经有了示意它们可交互的视觉线索。例如，上面示例中的卡片，无论有无蓝色链接，都给人一种能够交互的感觉。

在咱们的原始示例中，蓝色的题目可能看起来很好，但它使文本看起来像是能够交互的。为了防止混同，咱们将非交互性题目的蓝色移除。

咱们还从其余非交互元素，如星级评估中移除蓝色。这样就更容易看出什么是可交互的，什么不是。

7. 确保界面元素有 3:1 的对比度比例

对比度是两种色彩之间的感知亮度差别的掂量。它以从 1:1 到21:1的比率来示意。例如，彩色背景上的彩色文本有最低的 1:1 对比度比例，而红色背景上的彩色文本有最高的 21:1 比例。有许多在线工具能够帮忙你测量不同色彩之间的对比度比例。

为了确保视力受损的人能清晰地看到界面细节，应至多满足网页内容可拜访性指南（WCAG）2.1 AA 级色调对比度要求。这意味着用户界面元素，如表单字段和按钮，须要有至多 3:1 的对比度比例。

在咱们的例子中，箭头图标的对比度太低。在图标上加上暗影，并在图像的上方第三局部上增加突变叠加层，能够使图标取得足够的 3:1 对比度，无论它处于什么样的图像上。

原始示例中的主按钮对比度也过低。咱们在之前解决视觉档次问题时曾经修复了它，但在这里也值得一提。

低对比度按钮的危险在于，低视力的人可能无奈辨认它是一个按钮，因为他们看不见按钮的形态。将按钮的对比度比率进步到 3:1 以上，使按钮具备可拜访性，同时也有助于修改视觉档次。

将箭头和按钮的对比度进步到 3:1 以上，咱们失去了以下设计。咱们正在一点一点地靠近指标，但还有更多问题须要解决。

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

为了确保视力受损的人能分明地浏览文本，须要满足以下 WCAG 2.1 AA 级对比度要求：

1. 小文本（18px 及以下）须要最小 4.5:1 的对比度。
2. 大文本（以上粗体 18px 或以上惯例体 24px）须要最小 3:1 的对比度。
3. 在咱们的例子中，照片数量元素中的小文本对比度有余。咱们通过减少灰色容器的不透明度并增加文本暗影，将对比度比率进步到 4.5:1 以上。

地位文本的对比度也太低。细的字体权重使其更难浏览。应用更深的灰色有助于使文本更易于拜访。咱们稍后将对文本进行进一步的更新，以进步其品质。

9. 不要仅依赖色彩作为指示器

有许多不同类型的色盲，次要影响男性。通常，色盲的人在辨别红色和绿色方面有艰难，但有些人根本无法看到任何色彩。
为了确保界面对色盲者可拜访，你不能仅依赖色彩来传播意义或辨别视觉元素。你须要应用额定的视觉线索来辨别界面元素。

在咱们的示例中，蓝色用于“评论”文本，以示意它是一个链接。如果移除色彩，链接文本看起来和其余文本一样，所以色盲者无奈辨认它是一个链接。在短少色彩的状况下，给链接文本加上下划线，清晰地区分出它和其余文本的差别。

11. 应用繁多的无衬线字体

字体是一组具备类似格调或美学的相干字体。Helvetica 就是一个字体的例子。字体是字体中的变动，如权重或大小。例如，Helvetica 粗体和 Helvetica 惯例体是 Helvetica 字体内的两种不同字体。
在界面设计中，应用繁多的无衬线字体是最平安的，因为它们通常最具可读性，中性，并且简洁。

在咱们的示例中，题目应用了一个具体的有衬线字体，这有点难以浏览，对一些人可能会扩散注意力。它还具备可能与这个短租物业利用中的一些照片不匹配的共性。应用无衬线字体进行简化能够帮忙进步可用性和美学。

12. 应用具备较高小写字母的字体

寻找具备较高小写字母和更大字母间距的字体，因为它们通常在小尺寸下更易读。字体中小写字母的高度被称为 x-height。

咱们的示例应用的是 Gill Sans 字体，这个字体 x-height 绝对较低。将字体更改为 x-height, 更大的字体，如 Lato，有助于进步可读性。

这是将咱们的示例中的字体从 Gill Sans 更改为 Lato 后的成果。

12. 限度大写字母的应用

除非你在向人们大声喊叫，否则没有多少无效的理由应用大写字母。因为大写字母显得很吵闹，并且浏览起来艰难。

当你浏览时，你看的是单词的形态，而不是每个字母。这种形态帮忙你更快地辨认单词。然而，全副大写的单词都有雷同的矩形形态，这迫使你一一浏览每个字母。

在咱们的示例中，地位文本应用了大写字母。将其改为句首大写的句子格局，即只有第一个单词和专有名词（人名、地名或事物名称）首字母大写，有助于进步可读性。

13. 只应用惯例和粗体字重

仅仅因为一个字体家族提供了多种字重，并不意味着你须要在设计中应用所有这些字重。过多地应用不同的字重会给界面减少乐音和芜杂感。这也会使得放弃字重的一致性变得更加艰难。

通过仅应用惯例和粗体字重，使你的设计零碎简洁明了。

疾速应用提醒：

1. 应用粗体字重来强调题目。
2. 应用惯例字重来出现其余较小的文本。
3. 如果你决定应用十分细或十分粗的字重，请将其保留给题目和较大的文本，因为在较小的尺寸上浏览可能会艰难。

在咱们的例子中，地位文本应用了较轻的字重。即便咱们将对比度进步到了超过所需的 4.5:1 的对比度比例，细小的字符依然可能对一些人来说难以浏览。将字重减少到惯例字重有助于进步可读性并简化设计。

14. 防止应用纯彩色文本

在 UI 设计中，通常最好防止应用纯彩色，因为它与红色之间具备十分高的对比度。这种高对比度可能导致浏览文本时眼睛疲劳和不适。

彩色的色彩亮度为 0%，而红色的色彩亮度为 100%。色彩亮度的微小差别使得咱们的眼睛工作更加艰巨。在红色背景下，防止应用纯彩色是最平安的抉择，能够抉择应用深灰色。

在咱们的例子中，纯彩色在多个元素上应用。将其改为深灰色有助于进步可读性。在之前的视觉档次中，咱们留神到属性形容文本过于突出。为了确保界面元素按重要性的程序出现，咱们应用较浅的灰色来升高属性形容文本的突出性。

15. 左对齐文本

英语从左到右浏览，向下以 F 形的模式。因而，为了最佳可读性，最好放弃文本左对齐。对于较长的注释文本，最好防止居中对齐或两端对齐的文本。这种对齐形式更难浏览，尤其对于认知障碍的人来说。

居中对齐实用于题目和短文本，因为能够疾速浏览。然而，居中对齐会使较长的注释文本更难浏览，因为每行的起始点一直变动。你的眼睛须要更致力地找到每行的起始点。

在咱们的例子中，属性形容文本采纳了居中对齐。将文本左对齐能够进步可读性，并且与上方左对齐的文本保持一致。

16. 注释文本的行高应至多为 1.5 倍

行高是两行文本之间的垂直距离。行与行之间的间距有助于防止人们重读同一行文本。它也使浏览更加舒服和轻松。

为了可拜访性和可读性，特地是对于较长的注释文本，请确保行高至多为 1.5 倍（150%）。将行高放弃在 1.5 至2之间通常成果良好。

在咱们的例子中，行高仅为 1（100%）。将行高减少到1.6（160%）有助于进步可读性。

修复下面的原始图

通过一些简略而弱小的 UI 设计指南，咱们疾速找到并修复了咱们示例设计中的许多问题。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。