RefactoringUI阅读笔记

未完工，持续阅读更新中

这是什么书

这是tailwind作者Adam Wathan和tailwind设计师Steve Schoger多年合作后产出的作品。作者从软件开发者的角度出发，将UI设计的思路逻辑化、系统化，让不是设计行业的编程者或者其他同学，学习设计师在设计UI时的思路。 这是这本书的官网链接，可以查看 Refactoring UI

为什么会阅读这本书

以前上学时，有位老师曾建议理工科学生不要只局限于专业素养，应该多涉猎跨行业的知识，说这些经验往往能融会贯通，给本专业带来意想不到的启发。那时的我不以为然，觉得只要守好自己写代码的一亩三分地就够了。

随着时间推移，尤其是经历了近两年AI技术的爆发与“超级个体”的崛起，我才越来越深刻地体会到跨界能力的含金量。在传统的软件开发中，UI设计和前端编码之所以被割裂开，本质上是因为绝大多数程序员（包括我在内）对设计缺乏系统性的认知。我们往往能照着设计稿微调样式，可一旦要从零开始构思一整套视觉风格，就无从下手了。

在AI让写出普通代码变得越来越廉价的今天，软件应用正呈现爆发式增长。未来无论是继续留在职场提升竞争力，还是尝试做一名独立开发者打造自己的产品，出色的视觉设计与交互体验一定会成为脱颖而出的条件之一。所以，系统地补足UI设计这块拼图，打破代码与审美的边界，正是我翻开这本书的原因。

笔记begin

第一章 Starting from Scratch

先从feature出发，通过需要实现的功能去思考样式布局。而不是先想页面布局，然后想应该把feature塞在哪里。

挺合理，大部分情况下布局是服务于功能的，所以确实应该以功能为基准出发。

不要过度设计

这一点和编程工作还有些差异，编程时我通常还会考虑后续的兼容性和拓展性问题。最常见的场景可能就是一些共有组件的抽离了，我们可能会预先处理一些边界情况、特殊使用场景（比如首触发、尾触发的节流组件）。但是作者说UI部分不应该过度设计，还是需要服务于已经明确的 feature，更像是一种软件迭代的形式：把最基本的部分先可视化的看到，再做调整。 原文中是这样写的：'If part of a feature is a “nice-to-have”, design it later. Build the simple version first and you’ll always have something to fall back on.'

包括一些具体的方法：

• 用粗线条的画笔做草图，这样能先确立大体方向。
• 用黑白色先设计布局：例如排版风格、内容间距，最后再填充颜色等细节。
  • 选择符合软件主题的颜色：蓝色很通用（不知道选什么就用蓝色，在说tailwind吗哈哈）、灰色黑色更加严肃、淡粉色比较活泼等等。
  • 选择符合软件主题的字体：严肃的正体、活泼的圆体等等。
  • 还有圆角、文本的语言风格等等。 以上内容尽量保持风格一致性。

针对字体大小、颜色类型、阴影深浅等等常见的样式做一套样式库，减少低级的重复选择工作，这样也能更好地契合上述的“风格一致性”要求。

第二章 Hierarchy is Everything

需要有层级，层级可以通过背景颜色、字体大小、字体颜色控制 有时不适宜将字体设置的过小，如果想凸显层级，可以给字体一个浅灰色，或者降低一些opacity，用weight也行。

元素之间的对比度很重要，如果针对单个元素调整样式，无法达成需要的效果，可以尝试调整周边元素的样式，有了对比，主次会更加明显