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

海盐社是由一群在UI中国非常活跃且非常优秀的设计师组成的团队。他们从新手设计师逐渐成长为高级设计师，一步一个脚印，基于自己的工作经验积累和外文基础，发布了大量的原创和自译文章，收到了几十万会员的点赞和收藏。而这本书，就是他们在实践中逐步提炼出来的经验总结。

本书通过理论讲解和案例分析，详细介绍了初级UI设计师必须掌握的基础知识，分享 了作者在工作中的实践经验。第1章“移动端组件的认识与运用”主要介绍常用组件的特 性及使用场景；第2章“能力效率提升”主要针对日常工作、学习中遇到的问题和瓶颈， 分享相关的解决方案；第3章“设计理论与实践”主要介绍一些设计领域内实用的理论知识， 帮助大家理解优秀设计的内部规律；第4章“工作困惑”针对UI设计师在不同工作阶段遇 到的困惑，提出具体可操作的建议。 本书适合UI设计领域从业者、爱好者阅读，也适合平面设计、网页设计等相关专业的 学生阅读。

搜索
加载
金刚区
表单
评论区
提示框
产品列表布局
按钮
标签
聊天气泡框常见问题
图片比例
关于卡片圆角的思考

能力效率提升

第2章
一套图标的诞生
手把手教你制作设计规范
关于适配这件小事的前世今生
如何高效地进行验收
组件的理性选择
倾囊相授Sketch 
使用的小技巧
那些你不知道的好用软件

第3章
1 
情感化设计理论
02 
格式塔原理
03 
巴甫洛夫反应
04 
费茨定律
05 
五大交互心理学
06 
尼尔森十大可用性原则
07 
拟人形法则
08　黄金比例
第4章

01 
为什么你的 App 不耐看
02　三招教你学会优化信息层级
03　四步教你提升表单设计的用户体验
04　怎么样的临摹才有效
05　设计稿如何自查
06　如何准备一份合格的作品集
07 
如何输出一份完整的测试题

致谢

我们的初衷

随着移动端的变革，UI设计行业已经从新兴期逐步进入成熟期，UI设计师已经不
再是稀缺性人才，行业门槛也变得越来越高。有幸的是，2016年我们在“海盐社”相
遇。初期我们只是想提升自己对知识的巩固和整理能力，坚持着每周一篇文章的分享交
流。然而我们惊喜地发现，我们的分享被越来越多的人关注、转发、点赞。这让我们可
以很好地解答每个读者的问题，同时也使我们自身对知识的了解更加深入，对我们来说
这是意外的提升。通过不断收集读者反馈我们发现，我们的文章可以帮助到一些刚入行
的UI设计师。将自我提升的分享优化为可以帮助新设计师的经验总结，便有了现在的
这本书。

我们的亮点

对于出书，我们初期也是犹豫再三，因为市面上的设计类书籍以大厂出品居多，书
中的内容也十分优秀，可它们对于部分初级的设计师来说，实践时会存在很多的阻碍。
所以我们觉得，应该有一本让更多初级设计师可以用到的书。我们并非来自大厂，相反
都是在创业公司中混迹的设计师。为了让自己不断提升，我们努力沉淀着经验；为了让
初级设计师少走弯路，我们把曾经碰到的问题逐个道来，由浅入深地和大家讲讲UI设
计那些事儿。

本书的结构

第1章“移动端组件的认识与运用”，主要是对入行不久的设计师做一个基础知识
的普及，带你深入理解常用组件的特性及使用场景，快速降低错误使用的概率。
第2章“能力效率提升”，主要介绍当我们在日常工作、学习中遇到问题和瓶颈
时，可以通过哪些方法来解决。而为什么相同的方法，不同的人使用起来却相差甚远，
我们也会对这个问题的根源进行剖析。
第3章“设计理论与实践”，主要介绍设计领域实用的理论知识，帮助大家理解
优秀设计的内部规律，让你在展示方案时更具说服力。
第4章“工作困惑”，针对设计师在不同工作阶段遇到的困惑，我们分享了自己的
建议。对照我们的建议，结合自身的经历去思考、运用，相信你能有进一步的收获。
参与本书编写的作者有吴萌、付铂璎、姜正、刘芳。这是我们四位设计师次写
书，我们基于公众号中的精选文章加以精修，无论文字还是案例都会是全新的体验，希
望可以真正帮助大家在设计工作中解决更多的困难。

第3章

设计理论与实践

 
188 

会选择有世界杯界面的外卖订餐。但世界杯的时段一过，还需要恢复为常规界面，这便
是时效性。

画重点

（1）情感化设计的重要性：提升用户体验、提升下载率、保证留存率、减少卸载率；
（2）情感化设计的定义：旨在抓住用户注意力、诱发情绪反应，以提高执行特定行为的
可能性；
（3）情感化设计三要素：本能水平的设计、行为水平的设计、反思水平的设计；
（4）情感化设计的作用：减少用户负面情绪、引导用户行为；
（5）情感化设计的风险：产品定位不同，情感化设计需要根据不同的产品定位设计，否
则就会适得其反；迎合节日活动的设计不可以长久使用，否则体现不出设计的时效性、特
殊性和融合性。
参考资料

海边来的设计师－情感化设计-三部曲　https://comesea.zcool.com.cn
设计师，你真的了解情感化设计吗　http://t.cn/EfiaTA3
情感化设计中的手绘应用表现　http://t.cn/EfiSvN0
情感化设计在产品中的应用　http://t.cn/EfiSxJl
并不复杂！写给新手的情感化UI设计简明指南　http://t.cn/EfiSllb
UI界面中的情感化设计　http://t.cn/EfiS1s2

UI那些事儿：新手设计师的成长之路 三校　正文.indd 188 

2019-7-25 8:02:26 

 
204 

04 费茨定律

文/刘芳

在我刚做设计时，我的总监总说：“这个按钮应该再大一点”“那两个按钮离远一
点”“图标好放在这个位置”……那时候我总是不理解为什么要这样做。直到我看到费
茨定律才明白，按钮越大，用户操作所需时间越短；距离越远，用户操作所需时间越长。
本文通过一些实际案例，讲述什么是费茨定律及其如何指导界面设计，分析它在移动端界
面中的应用。

什么是费茨定律

费茨定律是人类运动的预测模型，主要用于人机交互和人体工程学。该定律预测光标或手
指从一个起始位置移动到终目标所需的时间（T）由两个参数决定，即光标或手指到目
标的距离（D）和目标的大小（W）。

用数学公式表达为
T 
=
a 

b 
log2 
(D/
W 1 
)。其中a、b是经验常数，a代表手指开始到停
止的时间，b代表手指的移动速度。

.片T 
=
a 

b 
log2(D/
W 
1) 
举一个生活中开灯的例子：

早期的开关只有一个手指大，每次开灯的时候都需要将手移动到开关上方，然后伸出手指
调整到适合位置再按下。由于按钮小，在没开灯的时候你根本不知道它在哪里，需要不停
地摸，所需时间就比较长。

后期大家意识到了这个问题，将开关按钮设计得更大，人们操作时只需要将手移动到按钮
上方，不需要调整直接按下即可，所需时间就大大变短了。

UI那些事儿：新手设计师的成长之路 三校　正文.indd 204 

2019-7-25 8:02:31