Refactoring UI

美化用户界面的实用指南

• 本书提供了从零开始改善UI设计的实用技巧，涵盖布局、文本、颜色、深度和图像等，助你打造出美观且用户友好的界面。
• 你能获得：提升设计品味，掌握专业UI设计技巧，提高用户体验，让你的应用脱颖而出。

核心内容：

1. 从功能而非布局开始：

• 先关注核心功能的设计，例如航班预订服务的搜索功能，再考虑整体布局，避免一开始就被导航栏等“外壳”设计困住。
• 详细解释：直接从实际功能入手，例如设计一个搜索航班的界面，包括出发城市、目的地、日期等字段，以及搜索按钮。
• 举例：就像Google一样，先关注搜索功能，再考虑其他元素。

2. 细节后续再完善：

• 在设计初期，避免在字体、阴影、图标等细节上花费过多时间，先专注于整体布局和功能。
• 详细解释：在设计初期，使用粗笔在纸上快速绘制草图，避免陷入细节。即使在电脑上设计，也要先用灰度进行设计，迫使自己关注间距、对比度和大小等要素。

3. 不要过度设计：

• 不必在实施前设计应用中的每个功能，最好以短周期进行。先设计一个简单的版本，然后使其成为现实，并在实际使用中迭代改进。
• 详细解释：与其试图在设计工具中想象所有极端情况，不如先构建一个可用的基本版本，然后在实际使用中发现并解决问题。

4. 选择个性化风格：

• 每个设计都有其个性。银行网站可能需要传达安全和专业，而新兴创业公司可能需要有趣和俏皮。字体选择、颜色和边框半径会极大地影响整体感觉。
• 详细解释：通过字体、颜色、边框半径和语言等因素来塑造设计的个性。例如，使用衬线字体来呈现优雅感，使用圆角来增加趣味性。

5. 限制选择范围：

• 预先定义一个较小的选项集，而不是每次都从无限的颜色和字体中手动选择。
• 详细解释：建立字体大小、粗细、行高、颜色、边距、内边距、阴影等系统，减少决策疲劳，提高设计效率。

6. 突出重点元素：

• 视觉层次结构是指界面中各个元素之间相对重要性的呈现，这是使设计感觉“良好”的最有效工具。
• 详细解释：通过大小、颜色、字体粗细等方式来强调重要元素，同时弱化次要元素，避免所有元素争夺注意力。

7. 从过多的留白开始：

• 清理设计的最好方法是让每个元素都有更多的呼吸空间。
• 详细解释：先给元素过多的空间，然后逐渐减少，直到达到满意的效果。

8. 建立间距和尺寸系统：

• 限制自己使用一组预先定义的值，而不是在UI中为元素选择完美尺寸时在120像素和125像素之间进行挑剔。
• 详细解释：从小数值开始，逐渐增加间距，确保数值之间的差异足够明显，例如使用16px作为基准值，然后使用倍数或比例来构建其他数值。

9. 不必填满整个屏幕：

• 即使你有空间，也不意味着你需要使用它。如果只需要600px，那就使用600px。
• 详细解释：为每个元素提供所需的空间，不要为了匹配其他元素而使其变得更糟。

10. 网格系统被高估：

• 不要把所有布局决定都外包给网格系统，在很多情况下，元素应该具有固定宽度而不是相对宽度更有意义。
• 详细解释：不要盲目依赖网格系统，根据实际内容和需求来决定元素的尺寸和位置。

11. 相对尺寸不适用：

• 元素应该独立缩放，在大型屏幕上较大的元素需要比已经相当小的元素更快地缩小。
• 详细解释：不要认为所有元素都需要按比例缩放，根据不同屏幕尺寸和内容需求来调整元素的大小。

12. 避免模糊的间距：

• 明确分隔元素组，始终确保组周围的间距大于组内的间距。
• 详细解释：当依靠间距来连接一组元素时，确保组周围的间距大于组内的间距，避免UI难以理解。

13. 建立类型比例：

• 大多数界面使用的字体大小过多，需要建立字体系统。
• 详细解释：建立一个字体大小的比例系统，避免在设计中出现不一致和低效的情况。

14. 使用好的字体：

• 对于UI设计，最安全的选择是相当中性的无衬线字体。
• 详细解释：选择具有多种字重的字体，并优化易读性。

15. 保持线路长度：

• 为了获得最佳的阅读体验，段落的宽度应足以容纳每行45到75个字符。
• 详细解释：段落宽度和行高应成比例，窄内容可以使用较短的行高，而宽内容可能需要高达2的行高。

16. 基线，不是中心：

• 混合字体大小时，通过它们的基线对齐它们，而不是垂直居中。
• 详细解释：基线对齐可以利用眼睛已经感知的对齐参考，从而获得更简单、更清晰的外观。

17. 行高是成比例的：

• 行长不是选择正确行高的唯一因素，字体大小也有很大影响。
• 详细解释：行高和字体大小成反比，小文本使用较高的行高，大文本使用较短的行高。

18. 不是每个链接都需要颜色：

• 当你在一个非链接文本块中包含一个链接时，重要的是要确保链接突出并看起来可点击。
• 详细解释：根据链接的重要性来选择不同的样式，例如使用较重的字体粗细或较深的颜色。

19. 考虑到可读性对齐：

• 通常，文本应与其书写语言的方向对齐。对于英语（和大多数其他语言），这意味着绝大多数文本应该左对齐。
• 详细解释：左对齐适用于长文本，右对齐适用于数字表格，居中对齐适用于标题或简短文本。

20. 有效使用字母间距：

• 在设计文本时，大量的精力都放在了使粗细、颜色和行高恰到好处上，但很容易忘记字母间距也可以进行调整。
• 详细解释：调整字母间距可以改善标题的视觉效果，提高全大写文本的可读性。

21. 放弃HSL的十六进制：

• 使用十六进制或RGB，视觉上有很多共同点的颜色在代码中看起来没有任何相似之处。
• 详细解释：HSL使用人眼直观感知的属性来表示颜色：色调、饱和度和亮度。

22. 你需要的颜色比你想象的要多：

• 要构建一些真实的东西，你需要一套更全面的颜色可供选择。
• 详细解释：一个好的调色板可以分为三个类别。灰度、原色和强调色。

23. 预先定义阴影：

• 创建调色板时，不要使用像“lighten”或“darken”这样的CSS预处理器函数来动态创建阴影。
• 详细解释：在开始工作时，预先定义一组固定的阴影，你可以从中进行选择。

24. 不要让亮度扼杀你的饱和度：

• 在HSL颜色空间中，随着颜色越来越接近0%或100%的亮度，饱和度的影响会减弱。
• 详细解释：如果你不希望给定颜色的较浅和较深的色调看起来很苍白，你需要增加饱和度，因为亮度会越来越远离50%。

25. 灰色不必是灰色：

• 根据定义，真正的灰色的饱和度为0%，它根本没有任何实际颜色。
• 详细解释：添加少量蓝色可以使灰色感觉凉爽，添加少量黄色或橙色可以使其感觉温暖。

26. 无障碍不必意味着丑陋：

• 为了确保你的设计是无障碍的，Web内容无障碍指南（WCAG）建议普通文本（低于~18px）的对比度至少为4.5:1，较大的文本的对比度至少为3:1。
• 详细解释：要解决这个问题，你可以翻转对比度。不要在深色背景上使用浅色文本，而是在浅色背景上使用深色文本。

27. 不要单独依赖颜色：

• 颜色是一种增强信息并使其更容易理解的绝妙方式，但要小心不要依赖它，否则患有色盲的用户将很难理解你的UI。
• 详细解释：始终使用颜色来支持你的设计已经在说的内容；永远不要将其用作唯一的交流方式。

28. 模拟光源：

• 如果你想要一个元素看起来凸起或凹陷，首先要弄清楚你想要该元素具有什么样的轮廓，然后模仿光源将如何与该形状互动。
• 详细解释：如果要使元素看起来凸起，请使其顶部边缘稍微亮一些，底部边缘添加阴影。

29. 使用阴影来传达高度：

• 阴影不仅仅是一种华丽的效果——如果使用得当，它们可以让你在虚拟z轴上定位元素，从而创建一个有意义的深度感。
• 详细解释：小阴影模糊半径较小，使元素感觉只比背景稍微抬起，而大阴影模糊半径较大，使元素感觉更靠近用户。

30. 阴影可以有两个部分：

• 通过组合两个阴影，你可以更好地控制阴影效果，一个用于模拟直接光源产生的阴影，另一个用于模拟物体下方环境光难以到达的阴影区域。
• 详细解释：较大的阴影应该柔和且具有较大的垂直偏移和模糊半径，而较小的阴影应该更紧密、更暗且具有较小的垂直偏移和模糊半径。

31. 即使是平面设计也可以有深度：

• 最有效的平面设计仍然传达了深度，只是以不同的方式。
• 详细解释：通常（尤其是在相同颜色的阴影中），较浅的物体感觉离我们更近，而较深的物体感觉更远。

32. 重叠元素以创建图层：

• 创建深度的最有效方法之一是重叠不同的元素，以使设计感觉有多个图层。
• 详细解释：你可以通过使卡片跨越两个不同的背景，或者使元素比其父元素更高，从而在两侧重叠来创建图层效果。

33. 使用好的照片：

• 糟糕的照片会毁掉一个设计，即使它的其他一切看起来都很棒。
• 详细解释：请确保你的设计中使用的照片质量高，并且与整体设计风格相符。

34. 文本需要一致的对比度：

• 要解决这个问题，你需要降低图像的动态范围，以使文本和背景之间的对比度更加一致。
• 详细解释：你可以通过添加叠加层、降低图像对比度、着色图像或添加文本阴影来实现此目的。

35. 每件事物都有预期的尺寸：

• 绘制用于在16像素处使用的图标在增大它们时看起来有些笨拙。
• 详细解释：为确保图像和图标在不同尺寸下看起来都很好，请避免缩放它们超过或低于其预期尺寸。

36. 提防用户上传的内容：

• 当你依赖用户上传的图像时，你就没有微调对比度、仔细调整颜色或裁剪完美画面的奢侈了。
• 详细解释：你可以通过控制形状和大小以及防止背景渗色来确保他们的内容不会完全破坏你的设计。

37. 增压默认值：

• 你并不总是必须向设计中添加新元素来增加亮点——有很多方法可以通过“增压”已经存在的东西来活跃页面。
• 详细解释：你可以通过用图标替换项目符号、增加引用的尺寸和更改颜色、使用自定义复选框和单选按钮以及链接的特殊样式来实现此目的。

38. 使用强调边框添加颜色：

• 如果你不是图形设计师，你如何为你的UI添加视觉天赋，其他设计可以通过精美的摄影或彩色插图来获得？
• 详细解释：一个可以产生很大影响的简单技巧是将彩色强调边框添加到界面的某些部分，否则这些部分会感觉有些平淡。

39. 装饰你的背景：

• 即使你在层次结构、间距和排版方面做得很好，有时设计仍然会感觉有些平淡。
• 详细解释：一个打破单调而又不大幅度改变设计的好方法是在你的一些背景中添加一些令人兴奋的东西。

40. 不要忽略空状态：

• 如果你正在设计依赖于用户生成内容的东西，那么空状态应该是优先事项，而不是事后才考虑的事情。
• 详细解释：在空状态中，请尝试结合使用图像或插图来吸引用户的注意力，并强调号召性用语，以鼓励他们采取下一步措施。

41. 使用更少的边框：

• 当你需要在两个元素之间创建分隔时，请尽量避免立即使用边框。
• 详细解释：你可以使用阴影、两种不同的背景颜色或添加额外的间距来实现此目的。

42. 跳出框框思考：

• 大多数人对某些组件应该如何外观有很多先入为主的观念。
• 详细解释：不要让你的现有信念阻碍你的设计——约束是强大的，但有时一点自由正是你将界面提升到更高层次所需要的。

问答：

Q: 如何为设计选择合适的字体？

A: 对于UI设计，选择中性的无衬线字体通常是安全的选择。此外，可以考虑字体的字重数量（通常字重越多，质量越高），并确保字体在小尺寸下也具有良好的可读性。

Q: 如何确保设计具有良好的可访问性？

A: 遵循Web内容可访问性指南（WCAG），确保文本与背景之间有足够的对比度，避免仅仅依靠颜色来传达信息。

Q: 如何在平面设计中创建深度感？

A: 即使没有阴影和渐变，也可以通过使用不同的颜色、重叠元素和添加细微的图案来创建深度感。