前言
在过去的两周里，我在工作之余阅读了一本名为《Refactoring UI》的书籍。这本书主要讲述如何从开发者的角度去理解和实现优秀的用户界面设计。作为一名工作快一年的前端开发者，我深受启发 ！！！
我把这本书中的知识整理成这篇文章，希望能吸引更多人阅读。
如果大家感兴趣，推荐读一下原书！
原书链接：Refactoring UI
章节内容
第一章：从零开始构建应用
1.从功能出发：在设计新应用的创意时，首先考虑的应该是功能，而不是布局。
2.草图设计：在设计新功能的最初阶段，先画出草图布局，暂时忽略字体、阴影、图标等细节。避免过早引入颜色，而是通过灰度设计，利用间距、对比度和大小来完成所有工作。
3.实际构建优于过度设计：不要过度设计，尽早构建实际的产品。在实际使用的页面中修复设计问题，比预先设想所有可能的边缘情况要更有效。首先构建出最小可用版本，然后再设计那些可有可无的功能。
4.选择个性：选择一种个性，这由许多具体因素决定，如字体、颜色、边界半径、语言风格等。
5.限制选择，系统化设计：对字体大小、字体粗细、行高、颜色等提前设定好8-10种值，使用淘汰法选择。这样可以限制你的选择，使设计更加系统化。
第二章：层次结构的艺术
1. 元素的不平等性：所有元素并非平等。我们应该降低次要和三级信息的强调度，尽可能突出最重要的元素。
2. 尺寸并非决定性因素：除了尺寸，我们还可以通过字体颜色和粗细来区分信息的重要性。建议使用2-3种颜色：主要内容用深色，次要内容用灰色，三级内容用浅灰色。对于字体粗细，正常字体粗细400/500，强调用600/700即可。
3. 灰色文本与彩色背景的搭配：在彩色背景上使用灰色文本可能会导致视觉效果不佳。我们可以根据背景颜色选择具有相同色调的颜色，并调整饱和度和亮度，直到看起来合适。
4. 通过去强调来强调：当界面的主要内容不够突出，而又无法添加任何内容时，我们可以尝试去强调与之竞争的元素。
5. 标签的使用：标签是我们理解数据的重要手段，但并非所有情况下都需要使用。当数据的含义直观明了时，我们可以省略标签（如邮箱）；当数据含义不清时，我们可以向值添加澄清文本（如3间卧室）；当必须使用标签且显示多条相似数据时，我们可以通过缩小标签、降低对比度、使用较轻字体粗细组合来弱化标签（如仪表盘）；对于用户需要寻找标签的页面，我们只需为标签使用较深的颜色，值使用较浅的颜色（如手机参数）。
6. 视觉层次结构与文档层次结构的分离：我们应该将视觉层次结构与文档层次结构分开，不让语义元素影响我们选择样式的方式。
7. 平衡重量和对比度：我们可以通过降低对比度来弱化重元素，增加权重来强调低对比度的元素。
8. 语义的次要性：我们不应该基于语义来设计操作。大多数页面只有一个真正的主要动作，一些不太重要的次级动作，以及一些很少使用的三级动作。主要动作应使用高对比度的颜色，次要动作使用较低对比度的颜色，三级动作使用链接之类的操作。对于破坏性的操作，我们应按照二级/三级处理，额外设置提示信息，并应用大红色粗体样式。
第三章：布局和间距优化
1. 空白的艺术：开始时，为元素预留大量空白，然后逐步减少，直到你对结果感到满意。这是因为删除空白比添加空白更能明显地改变视觉效果。
2. 间距和尺寸系统：建立一个考虑到相邻值相对差异的间距和尺寸系统。从一个合理的基值开始，构建一个比例系统。
3. 空间利用：不必强制填满整个屏幕。为每个元素提供它需要的空间。如果设计的元素在较窄的宽度下效果最好，但在宽UI的上下文中感觉不平衡，尝试将其分成几列，而不是简单地增加其宽度。
4. 网格的使用：网格并非万能的，不要过度依赖网格为元素提供的百分比宽度。合理地使用固定值（如侧边栏的宽度），并为元素设定一个最大宽度，只有在屏幕宽度小于这个最大宽度时，才对元素进行缩小。
5. 相对大小的缩放：元素的大小应该独立调整，自由微调，而不是按比例缩放。这样可以保证每个元素在不同的屏幕和布局中都能保持最佳的视觉效果。
6. 避免模棱两可的间距：当你依靠间距来将一组元素连接在一起时，确保组周围的空间大于组内的空间。这样可以清晰地区分出元素的分组，提高用户的理解和操作的准确性。
第四章：设计文本
1. 建立类型量表：有模块化秤和手工秤两种方式，建议使用手工秤。避免使用em，坚持使用px或rem 。
2. 使用好的字体：可以参考你最喜欢的网站所使用的字体 。
3. 控制行长：每行应有45到75个字符，这在web上的实现方法是使用与当前字体大小20-35em的宽度 。
4. 使用基线对齐混合字体大小
5. 行高应成比例：窄内容使用较短行高，宽内容使用较高行高；小文本使用较高行高，大文本使用较短行高 。
6. 链接的颜色和强调：并非每个链接都需要颜色，对于几乎全是链接的页面，链接可以使用更重的字体粗细或更深的字体颜色，不重要的链接不用强调，辅助的链接可以考虑添加下划线或悬停时更改颜色 。
7. 文本对齐：考虑到可读性，文本应该根据它用的语言对齐，标题或简短的独立块使用中心对齐，超过三行的独立块左对齐，包含数字的表格右对齐（小数点在同一位置），两端对齐和连字符一起用 。
8. 字母间距的使用：可以减小标题字母间距，增加大写字母的字母间距，这样可以提高文本的可读性和视觉效果 。
第五章：使用颜色
1. HSL：放弃十六进制，首选HSL（色相、饱和度、亮度）。
2. 颜色的需求：设计中需要比想象的更多的颜色。文本、背景、面板、表单控件等几乎所有页面内容都是灰色。一种或两种主色用于主要操作、活动导航元素等，决定了网站的整体外观。使用黄色、粉红色、蓝绿色作为强调色突出显示新功能。使用颜色强调不同语义状态：红色用于确认破坏性操作，黄色表示警告信息，绿色以突出积极趋势。复杂的UI需要多达10种不同颜色，每种颜色有5-10种色调。
3. 预定义色调：选择基色，经验法则是选择一个适合作为按钮背景的颜色，然后寻找边缘，选择最深的阴影（通常作为文本）和最浅的阴影（可能用于背景），警报组件结合了这两种用例。最后填补空白颜色，9个颜色比较好。
4. 亮度和饱和度：不要让亮度破坏你的饱和度，当亮度调到接近0%或100%，饱和度会减弱，颜色看起来会褪色，所以要在亮度远离50%时增加饱和度。如果饱和度已经是100%了就使用感知亮度，将色调旋转到最接近的明亮色调。
5. 灰色的处理：真正的灰色看起来有点褪色，为其添加一点蓝色（清爽）或黄色（温暖）。
6. 文本对比度：WCAG建议了文本对比度。当使用颜色作为背景时，浅色背景使用同色调深色文本，深色背景使用同色调浅色文本，调到最浅是白色，若不想使用白色就色调旋转到更亮的颜色（青色、品红色或黄色）。
7. 色盲友好设计：不要单靠颜色，红绿色盲会很难理解，在使用颜色的同时增加一些辅助理解信息，比如图标。尝试依靠对比度而不是使用完全不同颜色，色盲会更容易辨认。
第六章：创造深度
1. 模拟光源：使用阴影让组件看起来凸起或凹陷。
2. 阴影传达高度：模糊半径越大元素越接近用户。按钮等希望用户注意到但不希望占据页面的元素使用小阴影，下拉菜单使用中等阴影，弹出框使用大阴影。建立阴影系统，5个阴影级别就够了。鼠标悬浮时，阴影变大向用户提供视觉提示。
3. 阴影的两部分：第一个阴影更大更柔和，垂直偏移和模糊半径相当大，模拟直接光源在物体后面投射的阴影；第二个阴影更紧更暗，垂直偏移和模糊半径更小，模拟物体下方的阴影区域。
4. 颜色创造深度：较浅颜色离我们更近。元素比背景颜色浅会感觉凸起，比背景颜色深感觉凹陷。
5. 重叠元素创建图层：使元素跨越两个不同的背景可以为该元素增加深度。重叠图像很容易发生冲突，加一个与背景颜色相匹配的边框。
第七章：使用图像
1. 高质量照片：使用高质量的照片是基础。
2. 文本对比：文本需要一致的对比，白色文本在明亮区域以及深色文本在黑暗区域都会看不清楚。解决方法包括：向背景图像增加半透明遮盖层；降低图像本身对比度并调整亮度补偿阴暗程度；使用单一颜色为图像着色，以更好地将背景图像与品牌颜色搭配；使用较大模糊半径给文字添加阴影。
3. 预期大小：一切都有一个预期的大小。需要大尺寸矢量图标时，不要直接放大图标，而是将图标包含在另一个形状中并为该形状提供背景颜色。不要缩小屏幕截图（将太多细节塞进太少图像），可以选择截取部分截图，绘制简化版UI（删除细节将小文本替换为简单的线条）。
4. 用户上传内容：当心用户上传的内容。可以控制用户上传图片在固定容器中裁剪掉其余地方，为防止图像与背景颜色相似时，不要用边框，而是使用一个微妙的内框阴影。
第八章：收尾工作
1. 加强默认设置：用图标替换列表符号，将标点符号提升为视觉元素。
2. 强调边框：在布局顶部、导航项下方、警告信息旁边添加强调边框，标题下方可以添加简短的强调边框。
3. 装饰背景：用颜色、图片、形状装饰你的背景。
4. 空状态设计：不要忽视空状态，尝试结合图片或插图吸引注意力，强调号召性用语鼓励用户采取下一步行动。
5. 使用更少的边框：使用阴影、两种不同的颜色、更大的间距来替代边框。
6. 创造性思考：在设计中尽可能地自由一点，发挥创造性。
期望
最后，无论你是一名经验丰富的开发者，还是刚刚开始接触前端开发，我相信《Refactoring UI》这本书都能为你提供宝贵的知识和启示。希望你能像我一样，从中获得灵感，提升自己的设计技能 ！！！
版权归原作者 白日梦想佳～ 所有， 如有侵权，请联系我们删除。