UI 那些事儿：新手设计师的成长之路

本着对UI设计师工作的好奇，来看了这本书《UI那些事：新手设计师的成长之路》。 我曾学过PS的使用，但找工作的时候，只是懂得告诉别人自己能使用ps进行切图、修图，结果就是完全成为一个工具人，未有机会参与设计和艺术的创造。 读了这本书结合工作中遇到的设计师，解决了面对产品原型图无从下手以及如何制定各种理论、原则和规范，让我对UI设计师这个职业，有了更进一步的认识、知道了如何做一个UI设计师，同时对工作中遇到的UI设计作品有了另外一层理解，理解了他们为什么要这样设计作品。 工具的使用只是为了将知识、艺术、美感进行表达，因此工具的熟练只是基础，真正要做的，是对何为美好、主流价值观、如何实现美感的理解。 本书介绍了： 一、“移动端组件的认识与运用”​，对入行不久的设计师做一个基础知识的普及，带你深入理解常用组件的特性及使用场景，快速降低错误使用的概率。 组件包括：搜索、加载、金刚区、表单、评论区、提示框、产品列表布局、按钮、标签、聊天气泡框、图片比例、卡片圆角。 不同组件设计的对比，体现了不同的侧重点（如搜索的不同类别、加载方式的分类），以及这种设计其表达的思想（图片比例的表达、金刚区的表现），好的作品是如何表达的（微信聊天气泡的设计、提示框的使用），都有详细的阐述。 二、“能力效率提升”​，介绍当我们在日常工作、学习中遇到问题和瓶颈时，可以通过哪些方法来解决。 能力方面 图标设计流程：第一步，根据产品定位找参考；第二步，总结并确定参考的设计规范；第三步，确定产品的属性；第四步，提炼参考图标中的特点；第五步，查找图标的基本原型（与第一步有所区别的是所找参考为基本图形，不需要过多的创新）​；第六步，将上面所总结的特点与最后选定的原型图标相融合。 效率提升方面：设计规范、适配、高效验收、 设计规范 设计规范的作用：可以帮助公司统一设计规范、减少开发与设计师的沟通成本。 设计规范的标准：简单易懂且有指导意义。 规范的确定： 优先确定：设计图尺寸、间距大小、颜色、图标（优先制定大模块尺寸）、按钮、图片、导航、卡片。 可日后调整：图标风格、弹窗样式。 最后做：空白页插画、缺省页、占位图等 组件的选择：警告框与操作表、标签栏与工具栏、Tabs与分段控件、Toast与Snackbar 常用软件：Sketch的使用，实用软件的使用：在线协同——石墨文档、图片管理——Eagle、云存储——坚果云、高保真交互原型——Protopie、动效制作及输出——AE+Lottie。 三、“设计理论与实践”​，介绍设计领域实用的理论知识，帮助大家理解优秀设计的内部规律，让你在展示方案时更具说服力。 情感化设计理论：情感化设计三要素：本能水平的设计、行为水平的设计、反思水平的设计； 格式塔原理：该原理的核心理论是，人的视觉具有整体化、简化处理图形的倾向，因此，当一个不完整的图形出现在人的视觉当中时，人的视觉思维会倾向于自动将其补全，使其变成一个已知的、完整的、常见的整体图形，即“完形”​。 巴甫洛夫反应：巴甫洛夫反应是我们在设计中最经常使用的心理学说之一，通过巴甫洛夫反应能够帮助我们解释人们为什么乐于对日常接收的信息内容做出迅速的反应，它也能指导我们日常的设计工作。 费茨定律：费茨定律是人类运动的预测模型，主要用于人机交互和人体工程学。 五大交互心理学：（1）7±2效应是指人的短期记忆容量在7±2的数量之间浮动，也就是说用户最多同时处理5～9个信息；同时我们也可以把一些小的单位联合组成为熟悉的、较大的单位方便记忆。（2）席克定律的核心意义是人面临的选择越多，所要消耗的时间成本越高。（3）莱斯托夫效应指的是相对于普通事物，人们记住独特事物的可能性更大（4）本能反应实际上是情感设计的一种，指在特定的情境下人们心理上和情感上的反应，而不是单纯的美学设计。（5）色彩心理学是一种注重因果关系的心理学说，侧重于观看色彩之后产生的感受，属于情感设计中的一种。 尼尔森十大可用性原则：状态可见性原则；环境贴切原则；撤销重做原则；一致性原则；放错原则；易取原则；易扫原则：易扫意味着突出重点，弱化和剔除无关信息、容错原则；人性化帮助原则，帮助性提示最好的方式是：①无需提示；②一次性提示；③常驻提示；④帮助文档。 拟人形法则：拟人形不仅仅指的是模拟人的外形、动作、语言，还可以模拟人的情感，人对现实世界的感受 黄金比例：优秀的设计可能并不能与设计理论百分百相契合，不必过多追求黄金比例 四、“工作困惑”​，针对设计师在不同工作阶段遇到的困惑，分享了建议。结合建议，结合自身的经历去思考、运用，进一步收获成长的果实。 包括：做出耐看APP；优化信息层级；提升表单设计的用户体验；如何临摹（遇到不会画的物品时，也会再回过头去临摹，循环往复，最终找到适合自己的风格）；设计稿的自查；准备作品集；新项目开始前的竞品分析。 本书作为一个工具书籍很好的指导小白入门：从移动端APP的基本组件的设计，到对于同类型组件如何选择，选择基准是什么以及不同界面的对比体验，再到不同的设计其背后的心理学知识，最后帮助一个小白如何设计出一款高吸引力的app和作品集的建立，对设计师能力的从0到1，以及跨域1积累成2都很有指导意义，推荐！！！

《UI设计那些事儿》读书分享丨一本超实用的设计工具书 文/廖尔摩斯（GZH：设计大侦探） UI中国创始人董景博在本书的推荐序里面有一段话让我感同身受。 “当你成为UI设计师以后，你将会面临两大障碍：一，面对产品经理给的原型图，无从下手，彻彻底底地变成一个美化工作者，导致工作质量和效率一直无法提升，在团队面前没有任何话语权；二，面对各种各样的理论、原则、规范，疑惑到底哪个才是最重要的？应该如何去把它们跟实践结合起来？如何去一个个攻破它们？” 当我在读到这本书的时候，它确确实实解决了我一部分的设计困惑，成为了我日后在产品设计过程中的一本工具类书籍，而且书中所分享的设计理论，也成为了我的底层思维。所以这本书，真心希望大家可以购买细读一下，不管你是初级设计师，还是资深设计师，这都会对你有一定帮助。 一、这本书讲了什么？ 这本书是来自UI中国海盐社团队创作，由四个作者根据日常公众号的精选文章加以精修而成。全书的内容结构比较简单，总共分为四个章节。其中第一章和第三章是最重要的，分别介绍了移动端常用的组件和设计基础理论知识，第二章和第四章以零散的教程为主，主要提升能力效率和解决工作困惑。 1. 12个常见的移动端组件作者在本书中分享了12个常见的移动端组件，分别是搜索、加载、金刚区、表单、评论区、提示框、产品列表布局、按钮、标签、聊天气泡、图片比例和卡片圆角。这12个组件，可以说是产品设计最基础的元素，但如果你不去总结，你根本就不知道这些组件的优缺点和使用场景。 比如金刚区，作者把8种金刚区最常用的样式都进行了分类，然后把每一种样式的优缺点都进行了详细描述，最后还把使用场景也进行了详细的说明。这对多数设计师来说，是一次设计基础知识的普及，你从这本书中可以获取非常实干的知识，而这些可能是你过去最忽略的知识点。 再比如表单，作者对表单常见的元素进行了详细的介绍，这就像一个设计科普，你可以系统化的认识表单，加深你对表单的记忆。其次作者还写了一个“如何提升用户信息录入效率”的部分，我觉得非常好，这能帮助让我们看到一个简单的表单设计其实需要考虑这么多细节。我以前在做一个注册表单非常复杂的SAAS产品中，就有用户注册花了30分钟，在电话的沟通中，我第一次意识到表单的设计有多么重要。 甚至让我收获最大的是产品的列表布局这个小节。在过去我做设计的时候其实对列表的设计有些随意，但当我把这一节读完以后，真的让我豁然开朗，原来列表的布局，真的需要遵循很多设计原则。作者列举了产品设计中最常见的几种类型，不仅把优缺点都进行了分析，还把应用场景都写出来，真的非常实用。 这是整本书非常重要的一个部分，虽然看上去一看都懂，但其实需要反复的阅读，要去深度思考这些组件的优缺点和适用场景，这样才能帮助你在设计过程中做出正确的决策，你会发现，你的设计越来越有说服力了，连自己都能感受出为什么要选择圆角，为什么要使用两列网格布局。 2. 12个设计基础理论如果你想了解情感化设计，但又感觉唐纳德·A·诺曼的《设计心理学：情感化设计》太长，太晦涩，甚至读不懂，那你看这本书就够了。整本书把12个最常见的设计基础理论都做了详细的介绍，我觉得最棒的一点就是结合实际的案例把每一个设计理论的应用场景都说得很清楚。 比如巴甫洛夫效应，或许我们都听过，但怎么应用到设计上，你一定很迷茫。但你读完以后，你就能理解为什么当朋友圈出现小红点的时候就会驱使你去查看是谁发布了什么动态，你也能理解为什么很多产品的菜单栏都会设置红色的数字微标，甚至弹幕、奖励、抽奖都是运用了这个设计理论。 再比如费茨定律，我相信多数设计师都有听过或者了解过，但这本书最大的优势就是，教如何使用。甚至作者还举了一些非常有趣的例子。 “在我刚做设计时，我的总监总说：“这个按钮应该再大一点”“那两个按钮离远一点”“图标最好放在这个位置”……那时候我总是不理解为什么要这样做。直到我看到费茨定律才明白，按钮越大，用户操作所需时间越短；距离越远，用户操作所需时间越长。” 这12个设计基础理论分别是情感化设计、格式塔原理、巴甫洛夫反应、费茨定律、五大交互心理学（7±2效应、席客定律、莱斯托夫效应、本能反应和色彩心理学）、尼尔森十大可用性原则、拟人性法则和黄金比例，大部分我们都听过，或者看过，但你可能从未懂得如何使用过。当我把这一章读完以后，我过去对很多设计的困惑一散而尽，它成为我最底层的设计思维。 3. 两个设计进阶书单本书在第二章介绍了设计师的能力效率提升，作者主要搜集了7篇文章，有图标如何诞生、如何制作设计规范这样设计技巧，有设计适配、验收、组件的选择这种和协作相关的，还有Sketch使用的一些小技巧和实用软件，以此帮助设计师提升工作效率。大家可以根据自己的兴趣选择阅读，学以致用。 而在本书最后一章，作者主要针对设计师在工作中常见的困惑进行讨论。其中有一篇是关于临摹的。我想说，临摹就是最好的学习方法。就像我会建议UI设计师一定不要只局限于体验产品，要尝试去把别人优秀的设计临摹下来，这样不仅可以加深巩固，更能提高工作效率。我做了十年设计，至今也在坚持做临摹，把那些别人优秀、闪光的点都吸收下来。 二、这本书如何使用？ 1. 一本设计工具书籍《UI设计那些事儿》这本书，完全可以作为一本UI设计的工具书使用。我们可以按照他的书籍目录，针对性对每一个组件、知识点进行拓展学习。我们过去在学习的时候其实并不是不能坚持下来，更多时候是缺少一个学习体系，不知道从哪里入手学习，而这本书所整理的知识点，就能扮演这样的角色。 2. 一个设计文案词典这本书有一个很大的优点，那就是把我们日常工作中最常见的设计进行了优缺点的描述，提供了大量描述设计的文案。这些设计文案就像一个文案词典，它可以用在设计诊断、设计提案，还有作品阐述。比如当你向甲方演示你的设计稿，你完全可以从这本书里去搜寻那些可以支撑描述作品设计的文案，这样可以把你的设计翻译出来，让甲方感受到你的专业性。 3. 一套底层设计思维这本书对常见的设计理论做了系统性的总结和讲解，12个设计基础理论已经足够培养你的设计思维能力。你可以进行刻意练习，在地铁，在公交，在睡前花一小部分的时间把那些常用的设计理论都背下来，反复阅读，这样你会慢慢发现，你对设计的理解就会极速提升，你能突然明白很多设计原理，假以时日，你的设计功底就会大幅度增长。 三、写在后面的话 阿里巴巴B2B UED负责人汪方进在《U一点·料》中对团队团队的使命和任务概括为：在公司中作为职能部门（function）的UED团队，需要站在用户的角度思辨业务，通过服务内部客户进而服务我们的最终用户，用设计专业帮助业务成功，与业务一起成长！ 我在阅读的过程中，对汪老师的观点产生了多次共鸣，这也是长久一直困扰我的东西。设计到底应该服务谁，需要遵循什么设计原则，需要掌握什么知识结构，甚至，如何像上学那样有一个阶梯式、体系化的学习课程。 当我通过不断的阅读，不断的积累，我在某一天突然发现，我的微信读书书架其实已经慢慢形成了自己的知识体系。而《UI设计那些事儿》这本书，正是我的底层设计思维里面的其中一本。这本书真的值得每个UI设计师用心阅读，你把它当工具也好，当词典也好，当你在设计过程中有困惑的时候，你只要翻阅，你都能搜索到一些答案，从而帮助解决你的困惑。

本书是海盐社的文章整理合集，是一本便入门的书籍，非常适合入门UI设计师及产品经理进行阅读。相信阅读完后对于移动端的UI设计会有一定的心得。 本书讲解了移动端组件的使用、设计能力及效率提升的方法、常见的设计理论以及实践和UI设计人员在工作中可能遇到的问题解答。其中对于移动端组件的使用的介绍还是挺实用的，学习完后在类似的组件中可以快速根据差别选择适合的组件。我在读完第三章对于设计理论与实践的讲解后感觉非常满足，很多理论都只是听过或者简单了解过，并没有文章中介绍的那么深入。阅读完后，对于很多常见的设计也找到了理论的支撑，而且也体会到了设计的乐趣。

本书较为侧重在理论和常见问题解答上 （若想看视觉效果设计或软件技能操作的读者，就不用花费时间翻阅此书了） 由于自己是刚接触UI不久、自学的新手，本书的干货和论证还是挺详细实用 特别对于练稿与搜集资讯的初阶段很有指标性，能使你少走漫无目的或过于直觉行事的冤枉路

这本书主要是资深UI设计师的经验总结，每个设计师娓娓道来，同时又增加了鲜明的图片，来解释不同设计理念方法，对我来说浅显易懂。 其实，这本书跟我以往看的方法书不同的是，它包含了对一些设计原理的讲解，这些设计原理可以说是设计的底层逻辑，而恰恰这是我所欠缺的。又比如，后面讲到关于如何临摹作品，之前和作者说的一样，就是想把真个页面画下来，结果是即打击信心又丧失原图的细节。但换个角度看，从个别中发现一般对设计能力的提升太重要了。 在往后的职业生涯中，一定要踏踏实实的做好每一个细节，给用户带来好的体验是作为一名UI设计是的基本要求也是最高要求。

了解UI从哪些方面入手的桥梁书 近期学习新东西，做好demo后，要求优化UI，做漂亮一点。对我而言，美化UI有点无头绪了。 本书是海盐社整理的的文章合集，给新手了解了UI有那些元素，从哪些方面入手，可作为一本桥梁书。书的结构很好，每章节都会有“画重点”总结本章的知识，还有提供了延伸阅读的网址。 但讲的不那么细，如果要深入研究，需要去找其他资料学习。 如下摘了些细节点： 黑黄对比，黑底白字，黄底黑字。 橙红对比，字体均为白色。 主题色，强调色，辅助色 阿里巴巴的矢量图标库搜索相关的图标原型 色值、字号、按钮、图标、间距 ​ Sketch ​ 黄金比例：0.618 ​ 小元素的圆角角度要小于大元素 ​ 临摹的重点：先从图标开始，然后再扩展到布局、字号、间距等，逐个击破；

这本书我第一次阅读是在本校的图书馆借阅来打发日常时间的，其实那个时候是惊叹于这本书的好纸质，让人一摸就想看完。 再说一下内容，我觉得书里阐述了很多UI设计的基础知识，哪个板块怎么设计？需要注意的点是什么？页面如何排布？为什么那么排布？内容很简约但也不失干货分享（知识扩展就看个人了） 入门的UI设计不妨也可以花点时间去看看。

对于新手设计师来说是一本很不错的入门教程

《UI那些事（2019年）》这本书是多年前各类文章的的“综述”，画了一个多小时速读完毕，回顾了一下设计的基本功。作为交互设计师，印象比较深的点有： 1、本书讲移动端组件的时候，拎出来的模块有：搜索、加载、金刚区、表单、评论区、弹窗、产品列表布局（列表、大图、两列网格、三列网格）、按钮、标签、聊天界面。这应当是五年前交互设计关注的重点模块，到今天也大差不差。 对于这些基础组件，以及基础组件所对应的现有app界面样式，设计师需要了然于胸，有一定的范式积累，看到需求文档就可以在头脑中快速排版布局。 毕竟，分工的意义就是希望提升工作流程效率，希望你快速而专业地完成交互设计这个环节。我在范式积累这方面还有些薄弱，最近可以加强一下学习。 2、颜值是产品的敲门砖，视觉效果在产品初期的下载率上会起到决定性作用。

本书框架：App中的组件；设计规范；设计实践。＂无它，唯手熟尔＂，如果希望在UI设计上有所精进，术：不断临摹，练习，思考，阅读优秀的作品；道：观察用户习惯，理解用户需求。两者皆不可荒废。