「Refactoring UI」是一本讲如何做设计的书籍。 这是我第一次读设计相关的书，就给了我极大的惊喜。我花一周时间读了两遍，这本书特别像技术界的Head First系列，完全没想到一本讲设计的书能讲的这么有趣又不失深度， OK，再次凭着读完的第一印象写一个书评。 这本书是有系统的，首先是讲如何开始做设计，随后是层次、间距、文本、颜色、图片，最后是一些细碎的小技巧。 书籍的每个部分里面，都有大量让人兴奋且实用的小例子，比如说： 😄 <b>开始做设计</b> 1、通过设计显示网站的个性，要优雅就用衬线字体，要可爱可以用一些圆角字体。蓝色是百搭的，金色是昂贵且精致的，粉色显得有趣可爱。按钮圆角越大越个性，无圆角让人感到严肃，很适合律政。 2、做网站要从功能开始，不要一开始就关注太多细节和框架，可以边开发边调整。 😄 <b>层级就是一切！</b> 1、 要分清楚一个网站里最重要的是什么？次要的是什么？次次要的是什么？不要所有元素都一样，这样分不清主次。 2、彩色背景上使用灰色文字会看起来会很累，可以根据背景颜色选择一个浅色再次微调。 3、 尽量不要用标签，标签会让内容分不清主次。如果语义可以分清楚就完全可以去掉标签单独设计，也可以结合标签和值来显示。大部分情况下标签不重要，数值和结果更重要，除非你做的是手机设备参数页面。 4、 学会平衡元素，不要让不重要的东西抢了风头，不重要的东西或许是一个比较重的图标，或许是一个比较重的卡片。如果它太重了，就想办法降低他的权重。 😄 <b>建立你的系统</b> 你开发的时候是不是会——不断调整你的字体大小，间距，颜色，导致选择做的很累，而且还导致网站很不规整。 其实你应该建立一套系统，大小、间距、颜色从系统里选择一个适中的就好了。另外，16是一个不错的数字。 😄 <b>文本设计</b> 1、 在英文环境下，一行中字符长度最好在45-75之前，阅读体验最好，中文应该也有对应的指标。 2、 标题大字可以适当降低字间距，因为字体本来设计的就是为了小字也能看清，所以大字情况下间距会变大。 3、 根据情况适当调整行间距，避免读完一行回来找不到下一行在哪。（我初中的时候，用电脑记事本读小说很容易遇到这种情况，我一般用降低记事本宽度的方式来解决。） 4、英文全大写文字要增大一下字间距，不然真的很难看清。 <b>😄 深度</b> 1、 阴影原来有两种，自然光源和直射光源，我们现在用的比较多的还是直射光源的阴影。按钮、菜单、弹窗分别是逐级加强的三级阴影，表达不同的重要程度，也是距离用户的远近程度的表现。 颜色、重叠元素也都可以用来制造深度。 <b>😄 图像</b> 1、 我没想到过在网站开发上给图片加蒙层的方式给图片增加质感，也可以给文字提高对比度。 2、图片很重要，很重要，很重要。一张好的图片可以直接给整体设计提高N个Level。 <b>😄 小技巧来喽</b> 默认样式可以换个有趣或者鲜艳的小图标、边框加一个颜色条、背景可以丰富一些、空白页面别让他空着。这里面最重要的是要细心一点~ 我在阅读这本书的时候，有时候会很有共鸣感，有时候也会突然理解设计同学为什么做这样的选择。 这本书总体读下来让人欣喜，算是一个不错的启蒙书籍，希望大家都可以做出更漂亮的设计吧~ 这本书可能不好找，我只找到了英文版本PDF，为了阅读方便又顺便翻译了一份中文版PDF，全都分享给大家。 英文版：<a href="https://tomato.lanzouq.com/ifqo417s372j">https://tomato.lanzouq.com/ifqo417s372j</a> 中文版：<a href="https://tomato.lanzouq.com/imoQ217s38gj">https://tomato.lanzouq.com/imoQ217s38gj</a> 求个点赞不过分吧~