如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
前天看完大陆毕业展海报合集，不少小伙伴大呼看得不够过瘾。为了满足大家炙热的求知欲与上进心，美丫姐又花足工夫找来了今年港澳台、日本、欧美等地毕业展海报。依旧干货十足，依旧吐槽猛烈，希望优秀如你，能够看得开心。
首先我们来看看让人印象最为深刻的优秀作品。
渴望自由的金鱼
鱼缸中的生活再怎么无忧无虑，也拦不住金鱼一跃而出的渴望，就像喷薄欲出的创意，就像按捺不住跑出校园的毕业生。
架着一个歪斜的棚子，支撑着我们的二十二
猛然撞上了即将踏入社会的迷茫与不安，台科大的莘莘学子鼓起勇气，向老师询问着最后一个问题「老师您看这展厅，供电是不是不太够？」
伏流
有时候你以为自己发现了一股清泉，其实全是大佬手里玩剩下的，人外有人，天外有天。
喜欢做，肝愿受
其实大家刚毕业头几年也是这么想的，几年之后肝还好，头很冷。
后浪
长江后浪推前浪，后浪还有后后浪。大家都是被时代的洪流裹挟着前进，显然这届毕业生还没毕业，已经被学弟学妹们震得神志不清了。
超人请回答
整个童年，大人都忙着策划一个玩笑，让孩子天真的相信世界上真的有超人，等到成年之后他们再哈哈大笑「哈哈哈她真的信有超人」，偶有不愿从童真中醒来的人继续寻找，你们等着，迟早给你们找来真的超人。
青浪
用各式纹理堆叠表现出了「浪潮」的韵味，既能联想到青出于蓝胜于蓝，又有长江后浪推前浪的语境，画面动感，锐意十足，就是不知道早就毕业的学长们会怎么看。
那个967呢？
找了很久只找到「967=很想你」的说法，但想来不至于借毕业海报，发出「凭什么就我四年没有恋爱」的呐喊，越不知道就让人越想知道，竟有一丝等待戈多的意味。
非想非非想
到底是佛光普照大学毕业的学生，还没出校门，就已经参透了甲方的真谛，非想，问他想要什么，说不出来；非非想，却总能提出一大堆意见。
泛流意识
总说要把意识汇聚成一道洪流，变成一道铁流，细想也没什么不对，毕竟钢铁、石头、血红细胞里都含有铁元素。
灵光乍现
灵光就像这一坨奇妙的东西，摸不着更说不清，出现的时候总让人欣喜若狂，定睛一看，可真不是个东西。
层
明志科技大学旗下有两大门派，一派工业设计，一个视觉传达，两大派的关系想必是剑拔弩张，一派冷静沉稳，舍我其谁。
眼波
一派浮夸前卫，闪瞎人眼。
画语者
老猎人除了酷爱炫耀猎物，更爱炫耀不离身的老猎枪，情人眼里出西施，用心爱的工具们铺满整张海报，还能有谁比他们更爱这个行业。
形象组无能
「海报做成这样，都怪老师举棋不定」，多少年后才突然醒悟，原来老师的犹豫不决，是为让我享受最后一次任性的机会。
轮迴
「谁TM把灯打开了？」。不，是天又亮了。多少优秀的作品背后，都是无数个日日夜夜的轮回
今宵霓烂
在陈列室打碟，在毕业展上蹦迪，如果连想都不敢想，那你凭什么认为你能改变这世界？
其次是第二梯队，虽然不算突出，但也算优秀作品。
淘色风波
龌龊的语意，来自成人龌龊的内心，让家长面红耳赤的「淘色风波」，不过只是毕业生们翘课逛展打游戏。
新一代设计展
废掉的第一稿千万别撕，不然最后出街时就是这个鬼样子。
被……的那五年
科大的毕业展为什么延期了五年？估计是地图画得太烂，大家花了五年才找到举办的地址。
发声关系
「喔」「啊」「曰」，奇了，大家都是纸打印出来的作品，凭什么就你们家海报有声音？
生长轮
树木的年轮记录着时光，每当有大事发声，从年轮中就能看出一二，你看今年新的圈圈它又白又圆。就像学生们毕业一样，脚踏实地、悄无声息。
升温计画
温室效应？冰川融化？这些都远远不够，沉默四年平淡如水，如果一生一次的毕业大展再不燥起来，那可就真的毕业了。
外出取材中
闷在家里一时爽，一直闷着一直爽？活像躺在盒子里的量产玩具，该出去走走，看下绚丽多彩的世界了。
三角关系
创意、媒介、受众，所谓传媒，正是一场相爱相杀的三角游戏。
零睡时间
你以为躺在床上就是不思进取？不，我是在梦里收集创意，一时的休憩，是为了更好的前进。
问HOW
寒窗十数载，大人都说不懂就问，步入社会才知道大家都只能强撑，明明面对奇葩需求，想要大声反问一句「HOW？」看看瘪掉的钱包，只能脱口而出，说一个「好」。
蹦起来
设计水平还没那么高的时候，一定记得猥琐发育不要太跳。不然，甲方连头都给你锤爆。
最后是第三梯队，先不论好坏，总之看得人迷惑得很。
复燃
想让葬爱家族设计风潮死灰复燃，甚至风靡世界也不是问题，只需简单一步，把地球表面刷成 QQ 空间那么黑。
扔出去的，头也不回
扔出去的飞机稿就别再捡回来了，即使马粪风干后看着像块巧克力，但只要你一舔就会发现，呸，果然还是那堆马粪。
是生活
怀疑是在暗示黄色比生活更吸引人，但手上又没啥证据。
一体两面
思维定势是一件很可怕的事情，比如甲方经常让把大象换个面，觉得不是正面就是反面，可换来换去还是不满意，就没想过，甲方要的是横切面。
艺眼瞬间
好设计让人瞠目结舌，觉得语言乏力，丑的设计也能让人瞬间语塞，根本说不出丑在哪里。
DNA
看完台湾大叶大学官网上的师生风采，就能明白这确实是一所连空气都飘着直男审美的理工科大学。
也就不难理解为什么连设计系学生们的毕业海报都会有这么大一股子消毒水味。
记得呼吸
比起上一张工业设计系海报的冷静，视觉传达系海报走向了另一个极端，线条凌乱，张牙舞爪，若不用文字提醒「记得呼吸」，不少观众会因为过于震撼憋死在原地。
跨越
连着领导的修改意见以及删除线，一齐打印出来的终级作品。
「香港的呢？」抱歉，一张都没找到。
日本，设计强国近邻日本。今年毕业展海报也是颇有看头，他山之石可以攻玉。
1. 多摩美术大学
能顺利毕业的，都是怪物。
2. 武蔵野美术大学
感受扑面而来的乡土气息。
3. 东京艺术大学
这就是设计师通宵后倒下的身影。
4. 东京造型大学
综合各位老师意见之后的海报作品。
5. 东京五艺术大学联合展
「我用图画工具都比你画得好！」「好好好你行你来。」
6. 仓敷艺术科学大学
「快从楼顶下来，这次真的不改了！」「你们签字画押」。
7. 京都精华大学
学习四年，设计使我面目扭曲。
8. 京都造型艺术大学
套用学长给的模板，但忘了改日期。
9. 金泽艺术工业大学
金泽大学深造多年，最拿手的就是往产品上喷金漆。
10. 冈山县立大学
让我看看，谁还没交毕设作品。
11.日本桑泽设计研究所
我们的展区在山顶上，请大家参展时做好御寒准备。
12. 名古屋艺术大学
为了让画面更丰富，我放了 267 顶帐篷。
13. 奈良艺术短期大学
毕业考试第一题，画出任课老师的脸。
14. 文化学院大学
反正到时候大家都是要哭的。
欧美地区毕业展海报内容更加现代，但因为文化差异较大，消化起来相对比较困难，这里就不一一吐槽了，大家自由学习。
1. 路易斯安纳州艺术与设计学院
2. 伦敦都会大学
3. 美国Art Center
4. 英属哥伦比亚大学
5. 美国马里兰艺术学院
6. 英国皇家艺术学院
想不到你这帮浓眉大眼的英国人，也玩「爱滴魔力转圈圈」。
好了，以上就是今天的全部内容，谁要是还觉得不过瘾，只能老老实实等明年新生毕业了。
总体说来，亚洲地区文化的多样化性，还是完胜欧美，这点非常值得欣慰，但是回头看看大陆毕业展海报，又千篇一律到让人完全开心不起来。总之还是那句老话，革命尚未成功，同志，仍须努力啊。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
最近设计群里经常有人问起小程序设计规范的问题，虽然官方有提供样式库的下载，但是停留在 16 年版，不是的。而设计经验这部分网络上也没有比较全面的分享，这促使我停下手上的计划，加快输出本篇文章。正好近期刚结束几个小程序项目，总结下经验，并结合微信小程序的官方设计指南，一起分享给大家，希望帮助大家更快速地上手。
随着 2018 年小程序的迅猛发展，小程序现已被各大企业广泛采用，「触手可及、用完即走」的用户体验备受青睐，随之小程序设计也成为设计师的必备技能，那在进行小程序界面设计时，应该如何快速做设计？过程中又要注意哪些问题呢？
对于已经开发了 App 的产品，在进行小程序设计时需遵守小程序的规范，同时要保持小程序界面设计与 App 的风格统一性。
小程序的「所有页面」右上角位置，都固定放置了小程序的菜单，在设计界面时需预留出该区域空间。
1. 小程序菜单固定样式
微信提供了深浅两种配色样式，以便更好地融合到各种风格的页面中，需注意保持小程序菜单清晰的辨识度。
线上案例：
2. 交互注意事项
如果要在小程序菜单附近放置交互元素，要考虑是否有交互冲突，应尽量避免误触的可能。
建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分。
如上图，小红书的自有导航样式个人不推崇，理由如下：
微信读书既有微信线条外框的 DNA，又区别于官方样式，是不错的综合。以上仅限个人观点，还需用户数据来客观验证。
3. 搜索框常见的几种表现形式
1. 小程序设计规范
顶部标签分页栏颜色可自定义，一般会沿用 App 的设计风格，以保证两个平台的视觉统一性。
2. 常见的几种表现形式
1. 小程序设计规范
微信有提供小程序的底部标签样式，建议标签数量在 2-4 个适宜。
也可根据产品需要选择或者去掉底部标签栏功能。
2. 常见的几种表现形式
启动页除品牌 Logo 外，其他元素都由微信统一提供，且不能更改，设计师仅需提供 2 倍和 3 倍尺寸的 Logo 即可。
1. 小程序设计规范
全局加载是小程序名称左侧的加载图标。模态的加载样式将覆盖整个页面，由于无法明确告知具体加载的位置或内容，可能会引起用户的焦虑感，建议谨慎使用。
2. 常用的加载样式
需告知用户具体加载的位置形状，减轻用户焦虑情绪。
对于没有开发App来说，可依据官方推出的《微信小程序设计指南》来设计，以确保快速设计出符合规范的小程序。
小程序设计应遵循友好、、一致的设计原则，每个页面都应有明确的重点，清晰明确地告知用户身在何处，又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路。
最后，推荐几个常用的平台设计网站。
1. BAT各平台小程序设计规范网站
微信小程序设计指南：https://developers.weixin.qq.com/miniprogram/design/
支付宝小程序设计规范：https://docs.alipay.com/mini/design
百度-智能小程序设计规范：
https://smartprogram.baidu.com/docs/design/overview/introduction/
2. 其他常用的设计规范网站
苹果-人机界面指南：https://developer.apple.com/design/human-interface-guidelines/
详细介绍了 iOS 设计规范，同时还提供了 UI 设计资源下载。
安卓-MD设计指南：https://material.io/design/
蚂蚁设计：https://design.alipay.com/#ds
提供移动和 Web 端的设计组件，还有设计案例和心得的文章供学习。
微信样式库：https://weui.io/
提供微信内的网页和小程序设计规范。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
简介说明1. 理论表述
对于许多事件，大约 80％ 的影响来自 20％ 的原因。
2. 理论背景
1896 年，意大利经济学家帕累托出版了《经济政治学课程》（Cours d’economie Politique），其中描述了他所观察到的一些现象，比如意大利 80% 的土地掌握在 20% 的人手中；比如花园里 20% 的豌豆荚产出了 80% 的豌豆。
上世纪 40 年代，美国一位管理顾问 Joseph M Juran 观察到一个在商业以及生活中普遍存在的现象：在某一过程中，80% 的影响来自于 20% 的投入。他将这一现象以帕累托为名，称为「帕累托原则」。
80/20 虽然只是一个相当不的数字，在很多具体情况之下，这个数字会有细微的波动，但这个数字背后所蕴含的思想或是规律却是不变的：更集中的投入将产出大于预期的结果。
一般来说，一个 APP 大多拥有几十上百个页面，但是这些页面并不是用户都能用到的，有时候大多数用户只会常用那么几个页面，所以将有限的时间和精力投入到这些页面将给你带来更大的收益。
案例1：网易云音乐的 UI 迭代
最近网易云音乐和虾米音乐都迎来了大版本更新，UI 也几乎重新设计了一遍，但我们所看到的重设计，只局限在那些关键的页面上，一些次要的页面基本没改。比如网易云音乐，首页这种重中之重的页面不仅风格、排版大改，连产品逻辑都改了（比如快速入口由四个变为五个，改变了私人 FM 的位置等），但是等级页这种无关紧要的页面，除了头部的全局性改动外，其他地方一点没变。
那我换个角度想，如果我们的应用已经存在了这么多需要花费时间和精力的页面，现在产品经理希望增加另一项需求量小但确实存在的功能，我们应该怎么办？奥卡姆剃刀指出「如无必要，勿增实体」，这是我们对此欲增加的功能的终极评判标准。
要知道，页面中每增加一个元素，对于用户体验的影响是巨大的，这意味用户着需要花费额外的时间去理解新增加的元素是什么；在所有元素中寻找特定的一项又多了一些备选；浏览页面时的视觉噪声又多了一些。
所以到底要不要增加这个功能，关键在于能否很好地控制上述的用户体验成本，以及后续的迭代成本。从帕累托原则的语境来看，小众但是确实存在的需求大概率不足以产生能够克服用户体验损失的收益，哪怕我们投入了一定的精力去做，日常依然无法给它百分之二十以上的关注去修改，去完善，去迭代，所以这个功能也大概率不需要增加。
说起帕累托原则就不得不提到长尾模型，长尾模型的分布曲线与帕累托长得很像，但是结论却完全相反，长尾模型提醒我们无法忽略那条长长的尾巴的影响，虽然它收益低，但架不住数量多，比例高。所以我们可以看到「尾巴」所占据的面积几乎和「大头」相当。
04 年长尾模型被提出来的时候，很多人认为长尾模型是对帕累托原则的颠覆，诸多例子都侧面佐证了长尾模型的正确性，比如 Google 目前约有一半的生意来自小网站，比如亚马逊图书的总盈利中少数畅销书占一半，绝大多数的冷门书占另一半。
听起来好像很有道理，长尾模型好似在控诉着开发者不去关注那些小众而众多的琐碎需求。事实真的如此吗？
长尾模型本身隐藏了两点不可或缺的前置条件，一是尾巴真的要足够长（小众需求真的有这么多），二是这么长的尾巴能被用户发现。无论哪一点，都建立在海量的用户资源之上，所以中小型 APP 大多望尘莫及。能够有余力去关注长尾模型的大多是用户量达到一定规模的产品，比如之前例子中所举的 Google、亚马逊，国内的微信、QQ、淘宝、支付宝、京东，这些产品的用户量足够多，用户类型足够广，尾巴足够长，哪怕再隐蔽的功能入口也能拥有不错的曝光度（总会有用户发现它），所以才能发挥长尾模型的作用。
所以在用户量达到 QQ、淘宝的级别之前，长尾模型看看就好，帕累托依然是主要的指导原则。
注意点1：不得不做的需求
虽然我们要将精力放在重要的事情上，但有些功能和标识即使对于用户意义不大，和产品的增长也没有实际联系，但我们也依旧需要花费大量精力投入。最常见的就属于法律规定和平台规则相关的需求了。
比如 18 年的大事件，欧盟推行《一般数据保护条例》俗称「GDPR」，所有国际版的应用都需要针对这个条例对注册流程做出大改，比如这篇文章介绍的：《GDPR合规下的 App 产品设计——启动页面和账号注册》。
注意点2：最重要的「少数人」
满足大多数用户的需求是一个必要条件，但不代表在任何情况下少数人就是可以被忽略的群体。对于工具化的应用而言，真正为应用带来收入和传播的，恰恰是占比较低的付费用户，可能连 20% 都不到。
在这类应用开发的周期中，前期完成了满足大多数用户的基础功能，之后更多的精力会被分配在满足少数付费用户的需求上。产品的方向和目标都可能随着不同的时期发生变化，帕累托原则是一个决策工具，但决策方向是需要经过我们充分思考以后得到的，切勿盲目地服从一个指标。
理论表述
当存在多个相似的物体时，与众不同的那个更容易被记住。
理论背景
冯·雷斯托夫效应（Von Restorff Effect），也称为隔离效应（Isolation Effect）。1933 年，德国精神病学家、儿科医生 Hedwig Von Restorff 在研究中发现，对被测试者提供一系列相似的项，而只有一项显得特别、孤立、与众不同的时候，这一项往往更容易被记住。
在此之后，对冯·雷斯托夫效应的研究也有进一步的进展，比如从生理学上，大脑对特异点有着更加明显的 ERP（事件相关电位），这或许可以解释特异点更容易回忆的原因；再比如冯·雷斯托夫效应与年龄有着密不可分的联系，老年人对特异点的记忆就没那么深刻。
不管如何，我们还是在频繁地应用着冯·雷斯托夫效应，并能够看到它在视觉设计中卓著的效果。
冯·雷斯托夫效应可以应用的场景分成两种：环境差异和经验差异。环境差异是指在空间尺度上做出的差异（同一平面内），而经验差异是指在时间尺度上做出的差异（不同时间点的同一平面），我们来详细聊一聊这两个尺度。
环境差异──获取视觉焦点
也有的文章中会表达为「背景差异」或「情景差异」，这不重要，我们只需要知道这个差异产生的原因：即在相似的周围环境中出现差异。参考百度百科我们来进行一个简单易懂的小实验。
案例1：环境差异小实验
请试图去记住上面那几串字符串。好吧，我放弃了，但如果努力一下，我们就会发现最容易记住的是与周围环境最不一样的那个。第一行是数字「5」，第二行是星号，第三行是红色的字母「F」。
这就是环境差异所带来的识别度与记忆度的提升，也是我们经常能在 UI 设计中所看到的一种有效吸引用户点击的手段。
案例2：起点、大众点评
比如起点希望用户在个人页时去点击「版本测试」按钮，比如大众点评希望强化「订单」按钮的视觉特征以便用户能够更快速地找到，所以在列表中这两者都会长得不太一样。这种区别于环境中的其余功能按钮，为了吸引或暗示用户点击的按钮有一个专门的名字，叫做「Call-to-Action 按钮」（CTA 按钮/行为召唤按钮）。一般来说，CTA 按钮大多会利用冯·雷斯托夫效应的环境差异来达到 Call to action 的目的。
经验差异──强化时间特征
与用户过往的经验或记忆做出差异，叫做经验差异。这种差异可以放大时间点的特征，使用户对差异所在的时间点记忆更深。
案例3：google doodles
我们都知道 google 会在一些比较特殊的日子改变 logo 的设计，给 logo 加上一些非常有趣的涂鸦，与平时的 logo 做出差异，就是为了利用经验差异使用户在记忆中强化时间特征，更好地记住这个时间点。
记住时间点有什么好处呢？比如 Google 可能是为了传播世界上那么多有意义的节日，也带给公司一种具备着人文关怀的气质。再比如淘宝、京东和 Steam，在「双11」、「618」、「圣诞特卖」一定会改变主页的设计，就是为了让用户记住这几个被创造出来的节日，好让大家每年这个时候都心甘情愿地剁手。
注意点1：所有都不一样 = 所有都一样
页面中的特异点终归只能属于少数，如果整个页面所有元素都想做得不一样，都想突出，那不仅没办法突出任何一项，页面的整体视觉都将崩溃。
反面案例1：新手常常会陷入什么都想突出，但什么都不能突出的境地
注意点2：把差异放在该放的地方
当用户被特异的那一个点吸引的时候，对其他的注意力就将下降，这是冯·雷斯托夫效应天然的副作用。我们能做的就是把特异点放在最关键的地方，而不是次要的地方，这样副作用就不会太过影响体验。
反面案例2：闲鱼、虎课的退出登录按钮
前几年我们经常能看到这样的退出登录按钮，使用高饱和红色的背景，成为了这一页最亮的那个按钮。之前我们基于「警示用户谨慎按下」的理由，将退出登录按钮做成最具警示意义的红色，但是你看，一旦我们这么做了，这个按钮就成了页面中最不一样的那个，强势地拿下「Call to action」的大旗，时时刻刻都在散发着快来按我的气息，这显然与我们「不希望用户随意退出登录」的意愿相违背。所以，我们现在去看微信、QQ 这些巨头应用，都已经把退出登录按钮的差异做到最小，甚至没有差异，就是基于上述的考量。
理论表述
人们对未完成任务的记忆比已完成的更深刻。
理论背景
Bluma Wulfovna Zeigarnik，前苏联心理学家和精神病理学家。她的导师首先注意到了餐厅服务员能够很好地记住未付账单，但是却无法记住已付账单的更多细节，针对这种现象，她进行了更加深入的研究。在研究中，她发现了人存在一种天生的，做事有始有终的驱动力，这种驱动力使得人们对还没有完成的任务念念不忘，而对已经做完的任务印象不深。
蔡格尼克效应被用于证明格式塔现象不仅在感知中普遍存在，在认知中也是如此。勒温的场论给出了一种解释：一项任务被启动之后人会形成一种处于紧张状态的场，这会增强对所有与该任务相关信息的认知；任务完成后紧张的状态就会得到缓解。
注：勒温的场论（Lewin’s Field Theory）是格式塔心理学的一条分支，该理论受现代物理学场论的影响颇深，认为人在认知过程中大脑会形成一种场，这个场影响着人的感官信息的处理。
对未显示完全的信息设置「悬念」
在文字较多的组件中我们时常能看到这样的一个符号出现：「…」，这个符号用于表示文字信息未显示完全，点开可以看到完整的信息。
案例1：新草、bilibili
就是这个小小的符号，时刻提醒着我们当前所显示的信息并不完整，吸引着我们点开它继续看下去，旁边还伴随着「全部」、「展开」等词都是为了强化这一特征。
当然，不止如此，Web 端也会出现文章显示不完全的情况。
案例2：知乎、简书 web 版
通过这种方式，激发用户继续往后看，产生把文章完整看结束的驱动力。
提醒用户任务还未完成
如果一个任务存在多个步骤，那么在任务结束之前应该用某种形式（比如进度条）提醒用户任务还没完成，这能够激发用户完成任务的欲望。
案例3：多邻国
在选择和测试过程中，顶部都会出现一条进度条清晰地表达着目前任务还没完成，进行到了哪一步。在这样的提示之下，用户会有更大的动力去完成整个任务流程。
有效的任务激励
越来越多的应用（尤其是技能学习类应用）开始对学习进程进行更细致的任务分解，然后利用蔡格尼克效应的影响对用户的学习进程进行激励。
案例4：Drops
在任务进行中始终展示任务的完成进度，任务完成之后会有对应的完成提示，并且可以获得勋章/成就之类的小物件儿。也包括很多番茄类应用、习惯养成类应用，都会有类似的设计，比如 Eggzy、Forest、美妙激励等等，都是通过这种方式激励用户完成自己的目标的。我们可以从中看到蔡格尼克记忆效应发挥着不可或缺的作用，正是我们追求有始有终的驱动力，在进度条的提醒下才能一步步完成目标任务。
注意点1：任务已完成同样需要提醒
另一方面，已完成的任务同样需要给予用户相应的提示，不然用户会感到压力，会困惑自己到底有没有做完这件事，这样紧张的情绪将会一直存在，而紧张过后就是不安和不信任。
反面案例1：起点任务结束没有反馈
起点的新手任务是我最近遇到的一件特糟心的事儿。我明明已经完成了「添加一部作品到书架」的操作却没有任何完成的提示，甚至我不知道自己究竟有没有完成。明明做完了，却依然显示着「去完成」，是还有隐藏条件没做到？还是我加的那本书不算？还是必须要两个任务一起做完才算完成？还是我没氪金不让我完成？还是纯粹的 bug？我不知道，用户不知道，或许只有产品团队的人才知道。
所以，如果已完成的任务没有给予用户合理的提示或者反馈，这样的体验是很差的。
注意点2：避免过分强迫
过长的进度条会给人形成压迫，进度极其缓慢的任务，或者长时间完不成一项任务会让用户产生挫败感，对完成整个任务来说尤为不利。
反面案例2：百词斩让人绝望的进度条
192/6270，相信这个进度不仅仅是让我，让所有看到的人都感到窒息和绝望。我并不是在为我的拖延症找借口。我想表达的是，这种超长的进度条和超缓慢的任务进度，每天 50 个单词也就是进度条每天推进 0.8%，不足 1%，对用户形成的压力是巨大的，过长的任务周期也会让用户快速失去信心。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
为了和大家分享关于设计趋势的见解，ISUX 研究了 2019 年至 2020 年的设计趋势。没有必要去遵循年度设计趋势报告，但是否意识到这一趋势，对设计师来讲却非常重要。首先，我们总结了平面设计的总体趋势，同时也研究了从 Zepeto app 和 Memoji 开始的，最近扩展出来的 IP 形象设计和角色设计趋势。在本文中，我们想分享 ISUX 设计趋势报告的第一部分「图形设计趋势」。在这一部分里，我们展示了当下各种品牌和动态图形的案例，总结了 12 个值得注意的平面设计趋势。
排版一直是设计的重要元素，也是传达品牌强烈信息的手段。从去年开始，粗大的无衬线字体和强有力的排版被应用到许多品牌设计当中，这使得它成为平面设计趋势的一部分。此外，也有越来越多的品牌采用动态和反映了 3D 趋势的三维字体版式设计。
1. 动力学排版海报
这张动态排版海报不是简单地放置图形和文字，而是将移动的 3D 文字放在固定的图形上，传达新的视觉印象。这些图形主要通过 SNS 以短循环视频的形式共享。
2. Uber 品牌识别
Uber 开发了一种无衬线字体用于品牌 logo 的再设计，并将其贯穿于整个品牌系统。采用了这些品牌字体的动态海报，更为有力地传达出 Uber 的品牌信息。
3. Squarespace 品牌识别
Dia studio 常将动态文字应⽤于品牌项⽬，「Squarespace」是其代表作品之一。
4. FAD 视觉图形
以 3D 形态传递活动信息的版面设计，就像礼品包装一样。这种循环的 GIF 图也作为品牌主图形被运用。
5. 韩国女性耐克运动广告
韩国艺人支持女性主观活动的耐克运动广告，也采用了大胆的哥特式字体。这些由 Guteform 设计工作室设计的字体有基本的延展形式，同时有一个系统能延展成更为宽大的形式以适配媒体的比例。这种动态化的强烈的排版传递了活动信息，和其他设计元素的互动，最大限度地发挥了图形效果。
随着 Instagram 用彩色渐变作为品牌色，渐变趋势已经持续好几年。最近品牌，UI 和包装的图形设计都采用明亮而强烈的对比色，这种趋势不仅应用于设计，也应用于摄影。强烈的色彩组合，梦幻的色调和彩色渐变有望应用于 2019 年的整体设计。
1. APP 图标设计
△ 越来越多的手机 APP 图标使用渐变色
最近，许多移动应用程序在其图标设计上应用了彩色渐变。
2. 欧洲体育 – 2018 平昌冬奥会品牌识别
欧洲体育台 2018 年平昌冬奥会的转播也将强对比和渐变色运用于多数场景中，包括标志、图形和摄影。荧光图形和深⾊背景的对比，尤为深刻地凸显了冬季运动的感觉。
3. 篮球永远品牌识别
△ @Notreal
NBA 新闻广播公司品牌重塑项目所使用的，诸如彩色渐变和大胆排版的设计方法，也反映了的趋势。他们创作了一个系统，通过各种颜色，字体和布局的应用，可以产生各种图形输出。
4. 明日之子品牌识别
△ @Plus X
腾讯视频和哇唧唧哇联合出品的选秀节目明日之子，用多种渐变色圆形表达不同选手的才华。随着节目的进行，图形主题也会随选手的变化而变化。
与过去基于固定网格系统的布局相比，最近越来越趋于使用仅显示图像一部分的非对称布局。虽然好像只显示整个图像的一部分，设计师却可以在大系统中无限延展每个图形。你可以认为平衡被打破了，设计师却可以更加自由地应用图形元素，呈现更强烈的视觉印象，还可以有很酷的图形组成。
1. 平面海报设计
设计了各种各样图形的 Vasjen Katro，不断尝试的形状，颜色和布局也反映了的趋势，特别是不对称和开放式布局。
2. Easy Peasy 品牌识别
△ @CFC
Easy Peasy 是韩国著名化妆品公司 Amore 推出的独立化妆品品牌，以品牌关键词轻松、活跃、有趣和大胆为基础，尝试给用户更加简单和亲切的感觉。品牌用看似自由的手绘波浪线贯穿于整个图形设计，打造不对称之美，展现了自由和亲近的形象。
移动图标已成为趋势很多年了，现在应用交互元素的品牌案例也很多。比起强而有力，灵活而简单，能随内容做出响应和更改的交互图标俨然已成为一种新的趋势。
1. 国际光影艺术节品牌识别
这是交互图标的其中一个案例，用简单的方形作为基础，延展出各种各样的形状和图案。这些基本元素保持了简单和最大化的交互式图像效果。
2. SM 娱乐品牌识别
△ @CFC
韩国最大娱乐公司之⼀，SM 娱乐开发了一种新的品牌标识来反映其不断扩展的业务。它将基本圆形改变成了不同形状与小号和中号产生关联。灵活的符号和各种颜色的圆形图案是 SM 娱乐视觉识别的核心。
3. 第 59 届塞萨洛尼基国际电影节品牌识别
这是电影节一个有趣的识别案例，用卷轴缠绕的图像代替寻常的电影节标志。它不是固定的，而是复杂紊乱的，以复杂的方式排列各种不同的颜⾊和图形，表达了电影节的目的──通过电影传达多种多样的故事和情感。
4. 第 6 届广州三年展品牌识别
传递展览核心信息，反复复制到三维空间的基本矩形，显示了展览的特征。在整个展厅中，你可以看到它以多种变动的形态被应用，同时也以不同的形状被运用到各式各样的场景中。
3D 趋势如此流行，以至于在平面设计趋势中也不得不讨论它。当下有很多的 3D 图像尝试用复杂的纹理给大众展示生动逼真和新鲜感十足的印象。通过在三维几何形态中，添加逼真的纹理，创造在现实中不可能存在的图形，人们正在定义一种新的现实主义。
1. 3D 插画
George Stoyanov 通过组合各种几何形态来表达形状之美。这种视觉尝试很有意思，因为它很难在现实中制作。
2. Adobe Think Tank 视觉图形
这张图像由不同形状，纹理和颜色的几何物体设计而成，表达了 Adobe Think Tank 包含各种主题论坛的品牌特征。
3. 现代「超级消费者」品牌视频
将各种各样的材料和颜色运用到人类行走的形状当中，传递出一种非现实和新鲜感十足的视觉印象。
4. 耐克PG3「舒适体验」广告
△ @GRIF
用柔软的毛皮材料营造耐克的主要感觉──舒适感，非现实的图形里有着生动的质感，让人耳目一新。
使用有机图形并不是一种新的潮流，但我们发现今年也有大量的图形使用水和油等液体来表达效果。它有时被用作品牌的主图形，你可以在 3D 短动态图形中明显地感受到这种倾向。这种具有强烈色彩和渐变的有机形状，传达出一种精致而梦幻的感觉。
1. 有机形态的 3D 视频
△ @cmttat
有机形态通常以 3D 形式被应用，并且广泛应用于 SNS 共享的短视频作品中。今年尤其有很多透明质感的案例，这些透明材质运用各种颜色，使色彩搭配产生变化，营造出神秘的气氛。
2. 孔雀学会 2018 品牌识别
△ @Irradie
将明亮多彩的渐变色应用于有机形态，这些图像表达了巴黎电子音乐节的特征。
各式各样的平面插画曾经退出过潮流，但现在已经成为一种强烈的设计趋势。很多品牌都通过聘请知名插画家的方式，用平面插画给大众新的印象。去年以来，除了 2D，3D 角色插画也成为一种趋势被应用到越来越多的品牌设计当中。
1. Uber 品牌插画
运用于尤伯杯品牌新形象的插画，是其简洁有序品牌系统中有趣的一部分。
2. Spotify「音乐与你同在」插画
△ @Circus
这是 Spotify 运用了 2D 插画的品牌视频。手绘质感，色彩简单，人形的四肢都很大是最近的插画趋势。
3. Belif 品牌插图
这是基于三维角色的 2D 图案设计示例，运用于包装设计和品牌视频。
等距设计是一种将二维图形绘制成三维的方法，最近已成为一种趋势，在图形和动画视频中被广泛应用。许多设计师通过运用这种技术，在一个框架中显示整个图形，创造有趣和独特的氛围，呈现出一种全新的视觉印象。和去年一样，等距设计在今年似乎也会越来越流行。
1. 等距插画
经常使用等距技术和彩色渐变的插画家 Mohamed Samir 设计了一系列富有趣味性的海报。
2. 等距视频
△ @Matthieu BRACCINI、@Panic Studio
将大物体变成微小模型的等距设计方法能给人留下印象，最近可以看到很多运用了这种方法后，屏幕变得更加特别和有趣的案例。
结合不同媒介的各种图形，创建有趣的效果是过去常见的一种方式。最近，结合大胆色彩，逼真照片和 3D 图像给大众新鲜感受的案例也很多。含有扁平化元素的真实图片和视频是 2019 的主要趋势之一。
1. 3D视频+2D图形
△ @Sergio Fuego、@giantantstagram
当 2D 和 3D 图像组合在一起，立体效果可以更加独特和突出。这是使用了此方法的优秀视频案例。
2. 真人实拍视频+2D插画
△ @+CRUZ
匡威活动视频是一个很好地混合了拍摄视频和 2D 图形的案例。
3. 真人实拍视频+发光涂鸦动画
在真人视频中添加发光的涂鸦动画，可以使视频更具动态性和趣味性。当下，SNS 平台上越来越多舞者和歌手的视频都使用这种效果。
4. 运动 3D 的 2D 插画视频
有很多作品很难知道它是 2D 还是 3D。用 3D 表达物体运动，而不是简单地使用 2D 图形，这种视频能传达一种新的视觉感受。
当通过 SNS 共享图形图像变得非常普遍时，短小和重复的动态图形也变得很易见。logo、2D 插画、3D 图像和各种各样的图形都以短循环动画的形式共享。
1. 2D 短动画
这些短视频通过在简单的扁平插画里重复使用短动作，传达了一种独特而有趣的形象。
2. 3D 短视频
由于 3D 是主要趋势，小而重复的 3D 图像也值得注意。添加 3D 真实纹理和效果，可以带来独特的视觉感受。
AR 和 VR 技术的发展，对平面和多媒体的设计趋势产生了很大的影响。这些新技术使人们对品牌有更加立体的体验。
1. Le Graphisme Augmente 图形海报
尽管是印刷海报，它也允许人们通过印刷材料使得 3D、AR 技术获得交互式体验。印刷海报只包含简单的几何图形和极小的信息，但当你通过手机查看时，将获得更多的信息和看到立体的形状。
2. Apple Music x Memoji 广告
△ @Apple
Apple 使用基于 AR 技术的 memoji 来推广 Apple 音乐。著名艺术家如 Ariana Grande 推出了他们的歌曲，通过这支广告，Apple 一起宣传了 Apple Music 和 memoji。
3. Nike：上海 Never Done 运动店铺网站
△ @AKQA
上海耐克通过 AR 技术实现 360° 网上零售的项目，可以让消费者根据运动的出汗量来进行购买和体验服务。
4. 奥迪 Quattro Coaster 广告
△ @POL
这是奥迪利用 AR 技术的项目，它能让消费者将汽车从银幕上带到自己的位置，从而积极体验开车的感觉。
5. 2018 年英雄联盟全球总决赛开幕式
2018 年英雄联盟的开幕舞台利用 AR 技术，使演唱 POP/Stars 的真人歌手和游戏里 K/DA 角色一起同台演出。这些被实时跟踪的角色，在实际舞台上带来了真实的表演效果。
新复古，用现代感觉诠释复古，已成为一种新趋势。新复古是一个结合了「新」和「复古」的词，是对过去怀旧的现代诠释，不仅是设计，在时尚、建筑、流行文化等各领域都是一种新趋势。
1. 复古风格视频
流行于 80 年代和 90 年代的电子游戏，和好莱坞电影的复古图像与视频，被重新诠释后，再一次流行起来。
2. Fritz Coffee Company 公司品牌识别
韩国著名咖啡品牌，Firtz Coffee 创造了的，具有复古 logo 和图形的品牌标识。
趋势不会朝一个方向发展，它可以扩展成各种各样的方式，就像我们看到的反映了趋势的 3D，AR/VR 技术也包含了复古风格一样。我们希望这些不同的趋势能以新的方式被应用，从而创造出新颖而有趣的设计。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
简介说明1. 原理表述
系统需要在 400ms 内对使用者的操作做出响应，这样才能够让使用者保持专注，并提高生产效率。
2. 实验背景
上世纪 70 年代后期，计算机研究人员依然认为计算机可以花费两秒的时间对使用者的操作做出反馈，因为他们认为人们大概正好需要两秒时间来决定下一步的操作，所以 2s（2000ms）一度成为了当年计算机响应时间的标准值。直到 1979 年计算机的算力开始大幅提升，也有了足够的能力在 2000ms 内做出响应，这时 IBM 的研究员 Walter Doherty 进行了一系列研究来评估算力的增长对生产力的影响。
研究结果表明，计算机的响应速度直接影响了使用者做出下一个决定所要花费的时间（这个时间被称为用户响应时间），换句话说，计算机相应的时间越长，用户就要花费越多的时间来思考和决定下一步的操作。
上面这张表格充分说明了这一观点，横纵坐标分别为用户响应时间和系统响应时间，我们可以看到系统响应时间如果从之前的 2000ms 降低到 300ms ，使用者作出下一步指令所需要的时间就能够缩短 5s 以上。Doherty 认为人们会将工作需要的一系列操作步骤存储在短时记忆之内，如果系统响应时间太长，就会打断人们的短时记忆，换句话说，思路都不连贯了。
不仅如此，Doherty 还认为响应速度低于 400ms 的系统或者程序，会让人上瘾。放在当下的环境来看，这当然只是一句比较夸张的话，但是结论是需要我们重视的，程序的响应时间，务必在 400ms 之内。
要说「多尔蒂门槛」带给我们的启示，上一节最后一句已经表达得足够清楚：系统或程序的响应时间小于 400ms 。为了让读者有更加直观得感受，我们先来一组小动画感受一下高响应延迟有多让人抓狂，快速响应又多么让人舒服：
应用案例 1：模拟延迟效果
注：请务必挨个观察，不要看整体，看单个的效果。
从动画中可以感受到，50ms、200ms 还算可以让人接受，当响应时间达到 600ms 时已经让人有些不耐烦，而达到 1000ms 时会让人不自觉多点几下，2000ms 时我手机已经被我砸了。
在如今的计算机算力之下，响应时间轻轻松松便能够达到多尔蒂门槛的阈值，甚至能够远比 400ms 更小，但是这就够了吗？「多尔蒂门槛」说到底只是给出了响应时间的上限，400ms 的响应时间或许在多尔蒂那个时代确实能够大幅提升操作员的操作效率从而产出更大的经济效益（比如银行系统），但是现在互联网已经越发成熟，不少公司的用户体验研究者都已经意识到，系统响应时间已然不是影响用户响应时间的唯一因素了，另一个因素是过渡动画的持续时间。
就像谷歌在 Material Design 中明确规定了过渡动画的 Speed 这一项，这是为什么呢？用户体验是一门关于情感和逻辑的学问，而不仅仅是一个统计数字就能解释的，让程序对某一操作的反馈时间（包括响应+动画）符合用户对该操作的预期才是让用户「上瘾」的关键。
应用案例 2：iOS 中的动画
所以，哪怕我们的手机、电脑已经可以做到在 100ms 之内做出响应，快到完全有能力在用户反应不过来的情况下给出反馈和结果，但是这样是不够的，我们依然需要「合适时长的」动画作为计算机反馈和大脑反应之间的润滑剂，而不至于让程序使用起来太「干涩」，也不至于让大脑一直处于应激反应的阶段而感到疲劳。
在真实世界中我们使用应用时会发现，有时候响应速度没办法做到如此迅捷快速，比如 APP 启动时；还有时候即便系统可以响应，网络却不行。网络并不能在用户操作的一瞬间就把所有需要的资源都下载好，用户必须等待几秒的时间，那么这时候就需要考虑如何减少用户等待的焦灼感，优化等待的体验。
比如有趣的加载动画、闪屏页等，都算是解决办法。
应用案例 3：Netflix 的启动动画以及新草的加载动画
动画的持续时间应当在适当的区间中取到最短，而不能太突然或太缓慢。
反面案例 1：过快或过慢的动画
在现实的上线 APP 中，也会有故意把动画做得很慢的例子，这比较影响操作的流畅性。
反面案例 2：Eggzy
左右滑动的时候动画效果在实际体验中非常慢，对于想要进行连续滑动操作的用户（即便这样的使用场景不多），已经慢得无法忍受，有一种「不跟手」的感觉，这么慢的动画已经很轻易就能让用户感受到自己在等它了。
仔细浏览 Material Design 中给出的案例便可以发现，动画的持续时间大致可以参照以下几条规律去尝试：
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
为什么要构建 MIZ Design？随着米庄 APP 用户的增长，以及 APP 不停的迭代，我们在设计上积累了越来越多的债务。越来越多的新页面，新功能，以及不同的组件，都是由不同的设计师来设计，前端也是由不同的开发来实现，这直接导致了整个 APP 越来越臃肿无序，视觉和交互体验不一致，且团队沟通成本高，重复劳动力大，输出效率低，迭代速度慢。
开发层面
场景：
设计师：涉及到这个组件的页面都改一下吧。
开发：改不了，每个页面都是单独写的，改起来非常麻烦，耗时间耗资源耗人力。
设计师：为什么同样的组件要单独写？
开发：我怎么知道，这是以前的开发写的，而且写的乱七八糟。
设计师：……
那怎么办？不改也得改呀。总不能一直留着这些大大小小的毛病，不解决问题会越来越严重。
代码混乱，遗留了非常多的开发层面代码不一致的问题，后期迭代的过程中如果不统一，也会使整个系统失去可控性。
设计师层面
场景 1：
设计师 A：这个页面是谁做的？源文件有吗？
设计师 B：不知道哎。以前的设计师做的。去库里找一下吧。
30 分钟以后，依然没有找到源文件。
场景 2：
开会：为什么这个项目的页面和以前的风格差很多？
设计师 A：现在流行的就是这个风格呀，多好看。
设计师 B：虽然设计每年都有流行趋势，但还是要和产品品牌风格相结合。
一个项目两个设计师负责，设计出来的页面控件：按钮，列表，输入框，色彩，视觉风格完全不一致。在 2 个设计师完成设计以后，还需要整合在一起重新修改，效率很低。并且每次页面中的元素，开发需要根据不同业务中的不同设计师的「创意」来进行人肉修改。
当我们开始设计新的页面，功能需求点优化的时候，这个问题变得更加严重。同时，因为没有一个统一的基础设计规范原则，设计师在设计项目的时候，在设计决策和讨论中花费了大量时间，会存在大量的重复劳动。同时由于产品的界面和交互缺乏一致性和可预测性，用户体验也受到了影响。整个产品也会在风格定位上不统一，没有确定产品风格特质的情况下越来越模糊，失去自身品牌该有的特性。
产品迭代，基本上是基于新功能的开发设计迭代，新的功能、新的页面不断的增加，对于设计师而言，有设计规范的原则做基础设计框架，更容易延续 APP 统一的设计风格，不至于被不同的需求，不同的设计趋势以及蠢蠢欲动的新的设计灵感牵着鼻子走，导致越做越乱，无章可循。
一个 APP 就像自己的孩子一样，从一个嗷嗷待哺的婴儿逐渐长大成人。设计系统就好比一个人的生物系统，是整个生物体的基础。如果对此系统不维护，那么此系统将会随着时间的增长越来越脆弱以及呈现不可逆的现象。那么如果维护好一个设计系统，骨骼会在成长中呈现规律清晰的生长模式，会随着业务的生长而生长，可控制、可更新，使生物体健康的发展然后去完成它的使命。
Design System 最开始是 Guide 演化而来，Guide 是一套可指导、可延续、可扩展、可统一的、可区分的视觉指引手册，指导相关设计结构完成统一性与对外区分性。具象层，它是一种设计方法；抽象层，它是一种思考模型。
最近几年，「Design System」这个词非常火。下面介绍红遍全球设计界的两大设计规范网红。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目标是创造一个将经典的设计原则和科技、创新相结合的设计语言，并且在不同设备上提供一致的体验底层系统，并同时支持触摸、语音、鼠标、键盘等输入方式。
一经发布就红遍了全球设计界。新颖的设计理念，清晰明确的设计原则，详细的设计规范，使之成为完美的安卓端标准设计规范。也给设计界的设计师们提供了非常好的参考，很多设计师也根据 Material Design 设计原则延展出更多的创新设计可能性，制作了各家的设计规范。
出了官方的 Sketch 组件库以后，谷歌团队还开发了基于此设计规范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下载；谷歌色彩颜色获取工具；一整套的 Material Design IOCN 输出；在 2018 年 5 月份的 Google I/O 大会上，Google 设计团队开发了一款叫做 Material Theme Editor 工具，可以帮助设计师轻松且快速创建符合自身品牌又符合 Material Design 风格的应用。
设计价值观
设计原则
材质是一种隐喻：Material Design 的灵感来源于物理世界和世界中的材质，包含了材质如何接受光的影响以及所形成的光影效果，并且对纸张的质感和墨水的介质重新进行了构想。
大胆，图形，鲜明：Material Design 基于印刷设计的指导原则，字体、栅格、留白、颜色等元素都以创造层次、意义和焦点为基础来让用户沉浸在设计体验中。
动效赋予意义：微妙顺畅地反馈和过渡性的动作效果，引起用户的注意力并使之保持持续关注。当元素出现在一个界面中的时候，元素之间的互动重塑了环境。
基础灵活：Material Design 同样旨在实现品牌价值的传递。结合了基础的代码、组件和元素，可表达不同的品牌需求。
跨平台：Material Design 的 UI 组件库可在不同的平台共用，不论在安卓平台、iOS、Flutter，还是 Web 都可保持一致的组件元素。
iOS 的人机规范指南，保持了苹果一贯的风格。虽然没有 Material Design 规范那么细致全面，但是核心的设计原则在每个组件的设计说明中都有渗透。作为 iOS 系统的设计基础，建议每个设计师都需要仔细研究。
iOS 设计价值观
iOS 设计原则
Aesthetic Integrity 整体美感：整体美感不仅仅包括美观的 APP 界面，还包括流畅的交互体验，产品功能和用户行为的有效结合。比如当一款工具类 APP 主要是帮助用户完成一项任务时，设计师应关注于用户操作本身的行为路径，和产品功能相结合来帮助用户完成目标，使用户聚焦功能本身。而如果是一款游戏，那么需要提供非常有吸引力的界面，在鼓励引导用户探索的同时也有非常棒的操作体验。
Consistency 一致性：一个保持了一致性原则的 APP，通过使用标准的控件、熟悉的 icon、标准的文字规范、统一的组件俗语来实现一个拥有标准化范例的系统。这个系统提供的特性和交互行为也符合用户的心智模型和预期。
Direct Manipulation 直接操作：让用户在屏幕上直接对内容进行操作的交互行为，可以鼓励用户和系统进行交互并且更易于理解。当用户翻转屏幕或者使用手势直接与屏幕交互时，他们会感知到直接操作的行为，并且能立即得到操作结果。
Feedback 反馈：反馈能够响应操作，呈现结果，使用户获得信息。手机中内置的 iOS 应用程序为用户的每一个动作提供可感知的反馈。交互元素在点击时会凸显被高亮显示，进度指示器显示了需要长时间运行的操作进度、动效和声音，使用户能够更清晰地感知交互行为的结果并作出响应。
Metaphors 隐喻：当一个 APP 的虚拟对象和操作路径与用户本身所熟悉的心智模型一致时，不管它是来自于真实世界还是数字世界，用户都能很快上手。隐喻之所以有效果，是因为用户和屏幕存在物理上的交互。用户可以通过移动分层视图来显示手机上被遮挡的内容；拽拖并且滑动对象，切换开关，移动滑块，滚动数值选择器，用户甚至可以通过翻转手势来翻阅手机上的杂志和文章。
User Control 用户控制：在 iOS 系统中，用户是主导者，而不是 APP。APP 可以提供行动建议，给予警告提示，但是不应该替用户做选择。优秀的 APP 始终会在用户主导和用户不想要出现的结果中保持平衡。一个 APP 应该始终让用户感知到在他的掌控之中。交互的元素给用户熟悉感并且可预期；对有破坏性的操作可确认；对错误操作可取消，即使是在进行中的行为也可中断。
在 Sketch 工具中可直接下载 iOS 的组件库使用。
在 2016 年，由工程师和设计师组成的团队创建了 Airbnb 的设计语言系统 （DLS）的第一个版本，其目标是创建一致的体验和跨平台的统一。DLS 包含了一套内部和第三方工具，由共享原则和模式定义的组件的集合。这允许使用跨设计、工程和其他学科的共享词汇表进行快速迭代。DLS 的结构简单而连贯，简化了团队之间的沟通。并制定了以下几条原则来指导 DLS 的设计：
ADS 开源库
Airbnb 设计副总裁 Alex Schleifer 在 IXDC 2017 国际体验设计大会上分享了这一创新的 React Sketch APP 管理设计系统，这是为 Airbnb 的设计系统而设计的，其实就是个实时更新的代码数据库，可以实时查询 Sketch 数据和代码，也可以下载图标、设计模块，所有工程师和设计师都可以免费下载。看到这个，我想完美共享库也许并不是那么的遥远。
Airbnb 团队在设计 DLS 过程中，也是通过原子组件的方式来构建整个框架，我觉得他们对于设计系统的理解非常对：「一个统一的设计语言不应该只是一组静态的规则和原子组件构成，它应该是一个可持续发展的系统。」所以在构建好底层的设计语言之后，可持续性、可发展性，是维护并让设计系统产生价值的重点。
随着商业化的趋势，越来越多的企业级产品对拥有更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁金服体验技术部经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于「确定」和「自然」的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
设计价值观
自然，让人机交互行为更自然。
自然规律运用到设计中，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。蚂蚁金服已做了部分探索，并将追求「自然」作为未来持之以恒的方向。
自然的人机交互核心：节能。既要节省身体运动的体力，更要节省大脑思考的脑力。
那么如何在设计中体现呢？
确定，保持克制、对象设计方法、模块化。
设计者需要做出更好的设计决策，给予研发团队一种高确定性、低熵值的研发状态。同时，不同设计者在充分理解业务诉求后，基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。
给予用户确定感，结合 Ant Design 的三个关键点，可以总结为边界和规则 2 个方面：
构建米庄设计系统的目标是什么？
意义
有了规范和控件库，设计师在接受需求的时候，可以减少设计成本，提高设计效率，尤其是在用于快速迭代产品的阶段，通过大量的标准化组件即可实现缩短设计周期的效果，并且设计师可以更专注于深耕体验和细节，同时能保证高质量的输出。
构建一个设计系统来支撑产品的所有业务线，解决团队协作一致性问题，产品的周期性更新问题，解决不同的设计师和工程师规范性输出 UI 的问题，最终从设计驱动商业的层面上，解决用户体验一致性，迭代开发的问题。
时间
APP 进入稳定发展阶段，也完成了基础功能的开发，在业务稳定发展的前提下，构建已有 APP 的整体框架，规范前端开发和设计流程是个好时机。在产品发展到稳定阶段、参与的人越来越多时，对整个 APP 的页面整理是非常有必要的。也为了后续快速发展的业务起到完整系统地支撑能力。
人力
相信几乎在所有的公司和团队，规范建立都是非常有价值，也非常耗费资源的一件事。你可以一天抄一套亮丽炫酷的 UI kit，但是你没法一天上线一套系统。没有上线落地的视觉规范只是耍流氓。所以项目启动的时候，团队分工必须明确，你们是一条船上的人了。势必要有劈浪前行，破釜沉舟的决心。
场景
所以在项目开始之前，便需要和整个团队统一目标意义：视觉规范的建立，除了保障统一的用户体验和认知，还能够通过工程师代码层面的组件化提高开发、设计效率。整个设计系统的开发，从设计到落地，需要产品、设计和前端的全力支持。
鸡生蛋问题
即使我们看了很多设计系统范例，甚至也下载了很多 UI KIT 的源文件来做参考。我们依然无法确定第一步需要做什么。当我们还没有组建一个 UI kits 组件库的时候是如何来搭建一个页面的呢？是先有了组件，然后创造了模块页面；还是先设计了页面，然后再来归纳总结出页面汇总的元件呢。这和先有鸡还是先有蛋的问题有所相似。
原子理论
在学习其他公司如何搭建设计系统的时候，我们了解到了 Brad Frost 的原子设计理论。他提出了原子设计原则，并且在他的文章中有一句非常出名的引用：
we’re not designing pages, we’re designing systems of components.──Stephen Hay
概念
2013 年网页设计师 Brad Frost 从化学中受到启发：原子（Atoms）结合在一起，形成分子（Molecures），进一步结合形成了生物体（Organisms）。于是提出了原子设计方法论，由原子、分子、组织、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。
原子设计的五个阶段
原子（Atoms）：符号，为页面构成的基本元素。例如颜色、字体，或是一个图标等。
分子（Molecules）：组件，由原子构成的简单 UI 组件。例如，一个表单标签，搜索框和按钮共同打造了一个搜索表单分子。
组织（Organisms）：模块，由原子及分子组成的相对复杂的组织，在 UI 页面中可视为模块/样式层级。
模板（Templates）：原型，将以上元素进行排版，显示设计的底层内容结构，在 UI 设计中对应的是原型图层级。
页面（Pages），将实际内容（图片、文章等）套件在特定模板，页面是模板的具体实例。
特点：
从 Brad Frost 的原子设计理论得到启发，将我们 APP 产品的所有页面都整理了出来，我们归纳出了组成这些页面的常用组件。这个详尽的库帮助我们以一种更合理的方式构建了一个设计系统的底层框架。
这个理论提出来以后就产生了非常大的轰动。并且至此以后 Atomic Design（原子设计）成为了构建 Design System 的核心指导理论。
Sketch工具
Brad Frost 在 2014 年提出来：「使用 Sketch 的 Atomic Design 是产品设计的未来。」我们可以使用 Sketch Library 功能实现组件库的创建。而组件库的底层逻辑就是原子设计理论。Sketch 中的 symbols、textstyles、color styles、Layer style ，来构建组件和样式。
Text style：Text Style 用于设置文字规范，在一个系统中包含大量的文本样式，并且拥有不同的文本属性。使用字体样式来管理一个系统中的字体样式，可使之便于管理和修改，保持系统的可持续性和可用性。并且可单独输出字体样式系统进行团队之间，不同项目之间的共享。
Layer Style：可编辑元素的各种样式，比如用于制作颜色规范，涵盖填充颜色、描边颜色、内外阴影、模糊效果等内容。可使元素保持一致的图层样式。
symbols：设计系统中的任何元素都使用 symbols 来形成符号，可复用、可嵌套、可批量修改，非常灵活化、轻量化。并且将符号进行嵌套组合，可形成符号嵌套，作为模块来使用。symbols 在使用过程中如果使用「/」来命名，那么会形成符号嵌套层，作为不同符号组件的分层。同样的对于 symbols，可使用缩放工具，来灵活适配各种不同的界面需求。
Library：Library 是所有元素、文字样式、图层样式等组合的一个组件库，可通过共享形式，来使它成为团队的设计工具。轻松访问次库中的所有元素和样式，并且始终可同步接受更新，保持一致和的文件状态。
在确定了原则和工具之后，我们为设计系统项目制定了完整的项目计划，因为涉及到上线和设计两大块，所以项目也是分设计线和落地线，两条线既有关联性，又是相对独立和分离的。组件设计完成以后才可上线落地，因推动落地的过程是需要整个设计开发团队的，不管是从时间还是人力上的资源协调和配合，所以落地线需要更加灵活。
设计阶段 – 设计线
目标结果 – 设计资产
设计阶段，我们所产出的设计资产包括设计价值观，设计指导原则，以及设计模式（解决方案）。
展开实施 – 任务细分
确定了设计资产以后，我们将设计资产进行细分。整理规范的内容并对每个组件进行优先级的确定。整理规范内容的过程也是一个逐渐完善的过程，第一次整理可能并不完善，但是没有关系，先把基础框架和内容整理好，后续在设计过程中有遗漏的再进行添加。
内容整理好以后，我们会发现一套规范里内容非常多，所以需要根据项目时间来安排所有内容的优先级和分工。根据我们的设计系统的底层逻辑，所以我们将核心组件建设放在第一阶段，比如字体、颜色、icon 等。构建了基础元件以后再来搭建模块，最后再根据不同场景来确定样式。至于分工，最好整个设计团队的人员都可参与，互相分担工作量以达到工作效率最大化。
整体内容确定以后，因每个组件的整理有规范可循，所以我们针对每个组件的设计过程也确定了单个组件的设计流程。
过程跟进 – 关键节点
在设计过程中，我们也需要对关键时间节点的项目整体进程和结果输出总结。此阶段是和上线的项目节点重合的关键点，设计输出的内容会和上线过程有非常多的磨合，一个组件的落地还需要不停的和开发沟通，收集反馈意见，并且进行调整修改，记录解决问题。
执行复盘 – 结果验证
在每个组件的设计过程中，我们都会反复完善每个组件的内容，包括设计原则、交互细节以及应用场景等。反复去验证组件的可行性。并且对阶段性完成的设计结果进行复盘和分享，进一步来验证设计方案的可行性。规范需要不停地优化创新，才能让它的可持续性特性发挥至最大。
上线阶段 – 落地线
没有上线落地的视觉规范只是耍流氓。
设计师自嗨并无意义。推进的过程，最重要的还是沟通。沟通的内容包括组件输出的合理性、开发工作量、产品版本迭代需求计划等。
愿望如此之美好，现实如此之贫瘠。
设计从落地到上线的过程想必每个设计师都有大把心得。在公司中实际的推进是非常难的，因为产品需求永远都做不完，开发永远在写代码，设计永远需要将先完成业务需求设计为前提。所以如何将设计规范的内容插进项目中是个最关键的点。
存在问题，根据项目的时间安排和产品迭代安排，我们试图将不同优先级组件的内容分配到不同的产品迭代中。实际却证明这非常的理想化。在这个过程中我们遇到非常多的问题：
解决方案：
APP 在建立的时候没有规范性，所以现在想要规范所有的内容就是一个非常巨大的工程。就像没办法一口吃掉一整块蛋糕一样。
我们的核心组件在产品迭代中完成上线以后，将剩余的组件规划至开发的重构版本中进行开发。减少资源的重复使用，以及最大化降低对 APP 的影响。我们衡量了利弊之后，决定此次规范的设计对于样式的修改减少到最少，保持和线上内容的一致性。很多时候我们设计师对于设计趋势是很敏感以及非常想要去创新的，但是基于现状下保持对样式的克制完成基础体系的搭建这个核心目的，是最重要的事。
MIZ Design 的设计资产中设计价值观是贯彻整个产品的迭代发展，是产品持续迭代的指明灯。设计原则是团队成员建立设计的标准指导规范；设计资源库贯彻设计师、开发和产品，实现产品迭代。我们也非常愿意分享这个过程，希望对大家建立设计规范整个流程有所帮助。
When your values are clear to you,making decisions becomes easier.──Roy Disney
当你认清自己的价值观和行为准则后，决策就轻而易举了。价值观是指明灯，贯彻整个产品系统。我们根据米庄品牌的特性，以及业务场景的需求来定义 APP 的设计价值观，指导 MIZ Design 的设计语言的建立。
品牌特性
米庄的品牌理念在于科技金融，小额惠普，以简单可靠的价值观来驱动业务增长。
业务场景
米庄作为金融工具类产品，功能操作场景不算复杂，强调一致性的用户体验和安全规律的操作路径。这也体现了产品对于不同页面元素之间的相互关联性和一致专业性的要求。
用户调研
结合我们进行的用户调研报告，米庄产品的核心用户对我们产品的需求是赚取零花钱居多，也就是利益的获取。所以针对明确的用户目标，我们对于整个产品的设计需要以产品可操作性、性为第一原则，呈现的视觉层以安全可靠，清晰明确为风格导向。
从以上三个方向，我们概括了设计价值观核心的三点：
格式塔心理学
心理学的完形法则：相似、相近、封闭、简单。
MIZ Design 的设计原则参考了格式塔心理学，取人和万物交流的过程中，大脑最基础的一些精神反射和行为操作，格式塔心理学的理论主张研究意识和行为，强调经验和行为的整体性，这也符合了米庄的设计价值观里关于效率和自然的定义。所以我们参考此心理学来帮助团队顺畅地沟通，减少信息不对称以及学习成本，作为协作的基础。
第一性原理
埃隆·马斯克非常推崇的思维模式是 「First principle thinking」，也就是「第一性原理」。它是一种演绎法思维，自上而下来看，就是从原理出发，一步步往前推演，直到找出适合该问题的解决方法。自下而上反推，那么它的原则便是从结果出发，把事物分解成最基本的组成，看透事物的本质，从源头解决问题。这和原子设计理论也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的积极实践者，他将此原理视为科学界和商界非常古老的一条守则。
奥卡姆剃刀原理
Entities should not be multiplied unnecessarily.
如无必要，勿增实体。
奥卡姆剃刀定律是由英国奥卡姆的威廉所提出来的。他提出「切勿浪费较多东西去做，用较少的东西同样可以做好的事情」，也叫简约法则，是一种迅速决策和判断认知行之有效的工具之一。可以简单理解为保持事物的简单性。在各个学科，各个研究领域都有发展。这个原则至少可以追溯到亚里士多德，他写到：「Nature operates in the shortest way possible」，自然作为一个稳定的，持续自我生长的系统，发展原则是尽量保持简约之道。
设计资产层面，我们输出的内容包含了以下两大部分：
MIZ UI KIT_3.0 LIBRARY：
MIZ UI KIT 说明文档：
开发层面 – 沟通，减少重复
基于 UI kit 创建的组件库，帮助他们在最终产品中保持代码的一致性和复用性。并且设计语言作为一种工具，是整个团队顺畅沟通的最重要的语言。所以我们确保我们的设计语言，是能够让开发，产品都懂，并在第一时间执行的。既然是语言，那么每个元素都会有自己的名字。每个组件，甚至每个组件中不同属性的元素我们也赋予它名字。
无名万物之始，有名万物之母。──《道德经》
我们的祖先发明语言文字的过程，其实就是一个给万事万物命名的过程。而名字是连接人和世界的渠道。名字也是主观的，因此它有情感温度，也会有文化偏见和个人信息资产的反应。所以我们需要给设计系统中的每一种组件都给予属于它的名字，才能让它成为一种专属于你们产品的特殊语言。
场景：
开发：#000和#00000000分别替换成什么颜色？
设计师：#000，替换成 black-1
开发：那#00000000呢？
设计师：一脸茫然，这 2 个不是一个颜色吗？
惯性思维，色值在设计师眼中，对应的是一种色彩，而在开发眼中只是一堆数字。将心比心，当你扔给开发一个色值的时候他们只是一个难过的问号；而当你给他们具体的一个颜色的名字，他们能马上对应到这个名字，那么就是顺畅的。
所以当我们给颜色命名以后，沟通就变成了以下这样：
设计师：#ff5600 换成 orange-2。
开发：好的。修改完成。
设计师：#ff3450 全部替换成 blue-2。
开发：好的，替换完成。
设计师：这次我们品牌升级，orange-2 的色值更改为 #ff5666。
开发：好的。全局修改完成。
虽然修改的过程比较辛苦，但是结果是好的。从此设计师掌握了话语权。当然，开发也很高兴。
不单单是色彩，我们对字体、icon 以及间距等也定义了尺寸。给抽象事物以不同的命名来赋予它意义，也能让使用者使用它产生价值。
设计层面 – 输出，快乐传承
设计师们可以更加便捷地创建、分享、定义设计界面的内容。此外，在设计传承方面，也能让我们更好地将设计原则传递给新人。
场景：
设计师 a：此次版本迭代涉及到优惠券页面的优惠，这个页面的字体和颜色有规范吗？
设计师 b：有的。请参照设计规范。
不同设计师在接到需求开始设计以后会担心：怕风格有差别，怕页面不统一。辛苦做好页面以后发现和别的设计师同时做的差别很大，也不符合产品整体品牌调性，陷入循环改稿中。此时设计规范就是迭代的明灯，天上的北斗七星，指引方向让你不偏离终点。
同步更新：设计资产的目标用户，除了团队中的前端开发，那么最大受益者其实就是设计师们。设计系统的一大优点便是修改设计系统中任何一个原子，整个系统所有这个原子都能感知到。这便是设计系统的可持续性、统一性，也是设计系统的基础。
△ 组件库中的任何修改，会同步到所有使用该库的文档中
自定义内容：组件中的内容都可自定义进行修改。
解放重复生产力
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ──Alex Schleifer
这句话的道理和我们的设计原则中第一性原理相通，从原理出发，一步步往前推演，直到找出适合该问题的解决方法。这和在构建设计系统的时候是一个道理。学习从元认知能力开始，而组件一个系统，从元件开始。埃隆·马斯克从组成汽车的发电机开始思考，创办了特斯拉；从底层元素的创新开始，才会有产品整体性的创新。
最后补充一下结构图：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Loading动画，在现在的设计中已经是一个必须要设计的系统元素，它能减缓用户等待焦虑的心态，也能用来作为品牌透传，增加曝光。
那关于loading动画相关知识，我觉得对于设计师来说是有必要去了解的，所以我找到了这篇优秀文章，让大家能够深入了解loading动画，透过现象看本质，学以致用。
图片来源：Domaso
没有人喜欢等待
在用户心目中，优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。
举一个真实的例子：最近我们新发布了一个用户评价的应用，第一个版本并不完美，loading延迟在2-3秒。
你猜怎么着？
很多人认为这3秒是一个故障。在实际开发中，你可能要面对龟速的网络，没有优化的代码，操作时间长或数据处理太多等问题。因此，App的运行速度可能没有用户预期中的那么快。虽然早期用户可能会给你的产品第二次机会，但绝大多数人会立即退出它。
除非你的产品界面对用户的行为提供了明确的即时反馈。刚才发生了什么？是操作错误还是在等待服务器的请求？用户需要等待多长时间才能正常使用这个工具或网站？用户为什么要等待呢?
让我们一起深入了解Loading动画：
1、loading动画的历史由来
2、优秀loading动画所具备的特征
3、细节可以做出精彩
4、简单处理还是精心制作
loading动画的历史由来
对于这种类型的反馈，设计师会使用进度条、loading示意图、预loading、或旋转器。它们向用户解释什么时间发生了什么或正在loading的过程，以减少用户的心理焦虑。
你觉得设计师是从什么时候开始考虑加上这种反馈的？
我很惊讶的看到关于Nielsen Norman的一篇文章，提到响应时间和loading动画是在1993年（参考1985年的资料）：
如果计算机无法提供快速响应，则应该以百分比的形式向用户提供持续反馈。【Myers 1985 论文，“计算机-人机界面百分比进度指标的重要性”】
显示进度的三个主要优点：向用户保证系统没有崩溃且正在处理他们的问题；告诉用户还需要等待多久时间，让用户能腾出时间来做其他的事而不只是干等；甚至可以向用户提供一些可以阅读和查看的内容，减少等待的焦虑。— Jakob Nielsen, on January 1, 1993
自从Web 1.0以来，几乎每个网站都有loading状态，用户可以注意到当页面内容正在loading时，这些Loading动画活跃的身影。
在2007年的时候，网站的Loading形式大概是下面这张图上的样子：
2007年时的Loading
在那个年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）这样的工具来做这些 loading动画。
到了2010年，随着CSS3的迅猛发展，出现了很多教程教大家如何做CSS3动画，也能找到大量的loading 动画预设包。设计师也可以在Ps cs5中做这种loading动画，这个在10年前是非常流行的。
在那时，Loading动画更像是web的专属问题，因为页面loading确实是一个问题。在2010年的时候，很多Flash网页都做了一些很有创意的loading动画：
30个创意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
渐渐地，设计师们开始不满足于简单的进度条和旋转Loading，到2014年-2016年的时候，变得更加关注这块的设计。所以，你能发现更多关于loading教程，免费的Loading设计资源，插件和开源项目。
2016年出现的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
设计趋势和方法已经发生了变化，但向用户提供有效反馈的原则依然需要遵循。
优秀loading动画所具备的特征
在一个完美的世界里，loading动画应该：
尽可能少的显示给用户
如果你的工具或网站工作的足够快，那就是非常完美的。或者至少要使得它们的速度符合用户的预期，显示好看的loading动画只是一个缓兵之计，等待太久了一样会惹恼用户。所以，首先应该是解决内容的loading问题。
给出具体时间
它可以是一条简单的文本信息，告知大致的等待时间，也可以是可视化的图形来表示。总共上传了多少文件？更新需要多少分钟？已经进行到了什么阶段？这些体验上的设计细节都可以给用户预期并减少焦虑。
宇航员数据loadingby Cream M.
告诉用户为什么需要等待
一些应用的loading过程，通常让用户不大容易理解。一个好的Loading动画，应该要告知用户等待的原因以及等待的背后软件正在做什么：
文件获取动画 by Vinoth
让我们说回我的案例，那个反馈工具软件。当我们的等待时间超过1秒时，我们决定给这段等待时间增加一段解释。动画说明应用目前正在处理截图资源，这清晰的表明，我们的工具没有崩溃，它只是正在处理请求：
好的loading动画
让等待的过程不那么让人无聊
可以放一个有趣的动画来吸引人，让用户的眼睛始终保持忙碌。
动画来源：Alex Kunchevsky
减少用户等待时间的心理感知
这与上面提到的一点非常相关，如果你在等待的过程中发现了一些能够吸引用户注意力的东西，那么感觉上时间就会过得更快。它可以是一个引人注目的色彩搭配，有趣的想法，或者是一个什么特别的东西。
蛋糕loading by Pierre Kleinhouse
透传公司品牌形象
如果用户在用你的应用或者网站时会有一段等待时间，为什么不机智的利用好这段时间呢？我不建议仅仅只是为了做loading而做一个loading动画或者去在动画里使用一些心理学技巧。我觉得最好是将品牌的声音融入整个Loading动画中，让它成为一个非常重要的设计细节：
BCG的车票应用动画 by Antonin
细节可以做出精彩
虽然有些人可能会认为Loading只是一个很小的UI细节，但它其实也有许多类型和变化。一般来说，我把loading动画分为几类，进度条，无限循环的loading图和骨架图。
进度条
当可以明确loading时间时使用，进度条可以通过数字或视觉化的形式来表现。
有数字进度的，有时也称为百分比指示符。他们可以简单直接，也可以很有创意，需要对你的用户业务表达更有效：
一个app loading页 by Nguyen Tran
你也可以找到有趣的进度条和循环动画结合的loading图。
Loading动画by Dragonlady
进度条背后的主要思想是显示一个操作将花费多长时间以及目前所处的状态。根据UI需求的不同，进度条也可以是线性的，没有百分比的形式。
想想Gmail，它没有显示进度百分比，但是用户同样可以感觉到加载的进度。下面是两个简单而又创意的例子：
Gamil loading和一个创意loading动画 by Allen Zhang
无限loading动画
当loading的时间是未知的时候来使用，它可以是默认的旋转图，也可以是一些创意动画，显示应用正在做一些事情。
计算loading图标 by Hoang Nguyen
创意性loading动画一样可以与业务紧密相关，并帮助支持品牌发声。请思考下那些应用会使用这种loading动画？
LittlePin Spinner by Daniel Sofinet
无限循环动画要求用户在上传或执行某些操作时等待，但不要求具体需要多久时间，它们可能会非常简单或非常有创意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起来非常有趣，但是你并不想他们永远不停下来。
如你所见，如今的loading动画不仅仅只是一个系统状态的UI元素。
骨架动画
骨架动画展示了loading页面的变化过程，你可以把它理解为开始是一些页面占位图，逐步加载上一些可见的图片，文本和其他内容。
这个词最早出现在Luke Wroblewski 的文章中，Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用户界面中得到了应用。
举个栗子，如果你使用的是网页设计工具Figma，你会在页面顶部看到一个进度条，同时还在逐步loadingUI：首先你会看到占位符，然后才是可用数据：
Figma UI
简单处理还是精心制作
除了这篇文章中所展示的一些优秀案例和Dribbble上的设计概念，在目前大多数应用中，你可能能看到还是一个默认的Loading。
有一段时间，简单的Loading被大众所推崇，因为他们对于性能的影响最小（尤其是对于web）。使用默认的或开源的loading要容易的多，不需要设计师和开发花心思来设计和实现它。
如果你正在开发MVP或者项目的第一个版本，那么使用简单的或者开源的loading动画更符合逻辑。在这个阶段，即使把loading动画做的再怎么有创意，也并不会对你的产品有多么大的帮助，如果它不能解决真正的需求。
一些简单的loading动画案例
有趣的是，在2016-2019年，我们可以看到非常多精心的loading动画。注重细节，日益成熟的设计公司，更好的科技环境，更方便的设计工具，这些都使得loading动画变得更加富有创造性。如果你浏览Dribbble，能找到非常多超赞的Loading动画，所以这也成了展现自己设计能力的一种方式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在设计的时候，各种视觉要素以有序的方式排列，设计师需要通过对各部分空间的精妙设置来实现这一点。通常而言，我们的目光总会被最引人注目的部分吸引——无论它是视觉主体还是负空间。视觉主体和负空间，两者都很重要，尤其当你需要平和地呈现一个和谐、连贯、天衣无缝的设计。那么在一个网页设计作品中，设计师到底利用空间传达出怎样的一个故事呢？这就牵涉到我们今天要聊的主题了，格式塔原理。人类的大脑天生就能把规律性的散点连接起来，并对目之所及的事物赋予意义。设计是一个创造性的领域，是形式和空间的相互融合，并随之创造各种各样的体验。无论我们接触到什么样的设计作品，我们的大脑都会本能地将作品解构为更简单的各个组件，这些组件由基本的形状和不同的形态组成，而这些形状和形态则与空间息息相关。过往丰富的体验与经历，使得我们的脑海中充满了各种各样的记忆，于是我们很容易就能识别出这些特定的设计形式。
正空间，或者说显著的设计主体，构成了设计的「肉体」，它是你看到形状、颜色、图案等部分。相反，负空间多数情况下是指背景或大量留白。
文森特·梵高（Vincent Van Gogh）的这幅广受欢迎的作品，是一个以正负空间之间有着强对比的经典设计案例。
就像正空间似乎支配着负空间一样，两者都被用来平衡地传达一个和谐、连贯的设计理念。
在平衡的构图中，设计的正负空间都是相互配合、相互补充的，形成一个无缝、美观的整体。相反，不平衡的构图会让观众感到不适，传达出一个不完整的、扭曲的故事。
网页设计的好坏很大程度上取决于它的实用性和可用性。如果你的设计技巧很差，那么网页设计的整体效果和表现都会受到影响。但从另一个角度来看，在「内容为王」的时代，如果空间布局使用不当，内容将对您的网站产生显著的负面影响。
如果你认为你的开发技能很棒，但你的设计技能可能需要更多的改进，那这篇文章对你就太合适了。在本文中，我们将讨论：
我们还将讨论一些真实的网页设计实例，探讨每个案例如何体现格式塔原理，以及它对空间的创造性使用。
话不多说，一起开始学习吧。
空间由两个主要维度组成：正空间和负空间。正空间是可被直接感知到的视觉元素，负空间则为元素以外的留白和间隙。如前所述，正的是物体，负的是物体后面可以通常被忽略的留白区域。一个是焦点，另一个是背景。在前者产生活动和刺激时，后者则保持静止和模糊。一个是月亮，另一个是环绕着它的暗夜。
在网页设计中，正负空间相互作用，共同形成构图，传达理念。只有当正负空间通过对比来区分，同时又向更大的区域延伸时，才会产生视觉层次（脑补一下阴阳太极图吧）。
正负空间的交汇之处就是信息的交汇点。负空间拱卫着正空间元素，让后者更加突出和显著。
通常而言，正空间在绝大多数时候起主导作用，实际上负空间同样重要。负空间的优点在于:
设计中的负空间相反并不是负面的。当正负空间比例平衡得当时，两者在视觉上会显得非常舒适。而当其中一个占据主导地位，并给人一种「过于拥挤」或「空洞无物」的印象时，混乱才会发生。在这两种情况下，受众都无法处理如此复杂的信息，因此，而这样的空间设计是不符合网页设计的基本原则和设计动机的。
这是一个网页模板，它展现了何为「内容错位」和「空间混乱」:
△ 布局混乱
△ 空间失衡
△ 适当的布局调整
△ 网页设计中空间的合理运用
有意思的是，当谈到空间的概念和布局出现时，质疑声也随之而起。
类似的问题只能在理解基本概念后再来作答。黄金经验法则告诉我们——简单是最好的策略。
在文章开头，我曾提到在设计网页的时候，尽量创建简单的用户界面，这是一举两得的举措，既可以造福你自己，也可以惠及用户。或从表面上看，网页设计的重点在于增加网站的视觉吸引力，使用户操作更为简便。
我们的大脑总是在扮演侦探的角色，试图寻找隐藏的线索和空间之间缺失的联系。因此它会将当前的视觉信息与之前的经验进行比对。为了成为一名的网页设计师，你必须先了解大脑是如何感知周围环境的。它可以帮助你选择特定的视觉元素，利用它们来影响观众的感知。
伟大的设计师明白心理学在视觉感知中所扮演的强大角色。当某人的目光与你的设计作品相遇时会发生什么？他们对你的文章所传达的信息有何反应？——劳拉·布什，Autodesk 品牌内容策略师
作为设计师，你必须清楚地了解视觉设计和心理学是如何相互联系、相互影响的。换句话说，开发以用户为中心的简单界面，借助正负空间进行设计主要依靠格式塔原理，它可以帮助你理解和控制视觉和心理的联系。
格式塔在德语中是「形式」的意思。它更多的是一个概念而不是一个单纯的词汇，它最基本的概念是：
整体大于各个部分的总和。——库尔特·考夫卡（美籍德裔心理学家，格式塔心理学的代表人物之一）
当单个部分的集合以某种方式统一时，它们在我们的感知当中就是一组。我们把元素看作一个整体，这一概念或理论基本适用于所有的设计媒介：我们不把文本、颜色和形状看作单独的元素，而是把整个网页看作一个整体。同样的道理也适用于森林：我们看到的不仅仅是一堆树，就像我们在看海洋时看不到水滴一样。
格式塔原则描述了当特定的条件出现时，人类大脑是如何感知视觉成分的。它帮助大脑创造视觉图像。因此，格式塔原理通常会应到下面六个主要类别：
1. 图像和背景
「图形」是直观地、明显地与背景分离的物体。
目前最经典的例子是圣杯——两个镜面对称轮廓构成了花瓶。当你第一次看到这张照片的时候，你的眼睛会立即被吸引到画面上看起来最聚焦的视觉主体上，可能是相互对立的面孔，也可能是花瓶。当你的大脑在调整你的焦点时，背景或花瓶被模糊了，在那一刻，你的大脑直觉地在图像中感知到背景。
过了一会儿，你会注意到背景中的花瓶，并意识到它本来就在那里。尽管图形和基本原则看起来模棱两可，设计师常常创造视觉上吸引人的超现实和虚幻艺术，并将之运用于网页设计。
有时，图形与背景之间的关系是稳定的，而这种稳固的视觉关系使得两者之间，产生区别。这种关系有的时候又是不稳定的，这意味着图形和背景是无法清晰区分的。由于这种关系的模糊性，用户会很自然地开始困惑。
为了让大家直观地感受到图形和背景之间的关系，让我们详细的拿几个案例来进行讨论。这些例子都集中在图形-背景关系中的三个主要方面：对比度、Box 区块和阴影。这三方面涉及到诸多属性，包括颜色、尺寸和信息量，它们关系到内容的区分和视觉的纵深。
在下面的第一个例子中，Trellis 使用了一个全屏大图背景，并且搭配上清晰的 CTA 元素，图形-背景关系明确，该关系清楚地展示出了细节、色彩和尺寸上的差异。
页面中的文字是位于中央的手写风格字体，与背景中的图像相比显得很突出。和灰色背景图片构成对比的白色文本是吸引用户注意力的焦点，这使得文本在画面中是高度可见的。从另一个角度来看，背景图片是模糊的，所以清晰的文本会非常醒目。这些都表明，这里的文本被优先考虑为图形或正空间，而模糊的图像被用作背景或负空间，从而强烈地暗示了图形和背景之间的关系。
下一个案例是下图方框里的内容。 Ocean Health Index 巧妙地利用了框内区域的内容将图片与背景分离开来。这是你在浏览他们的网站时看到的：
当你第一次浏览这个页面时，哪个部分会吸引你的注意力？你会发现，它的主要文本为白色和蓝色背景构成对比，而更加醒目的是是两个与文字对比鲜明的 Box 区块。前者借助了深色背景和文本色彩上的差异，构造对比度。而 Box 区块本身的色彩和背景色构成对比的同时，还和更靠前的文本构成色彩对比。
背景使用了微妙的色调，使数字得以鲜明地展现，并突出细节。方框的运用使它们在页面上清晰可见。
一些网站还通过添加阴影来表现物与背景的关系，产生一种图象被置于背景之上的感觉。以下截图来自于 serious unsweet.com：
Seriously Unsweetened 的着陆页使用了不止一种方法来保持图形与背景的平衡关系。明亮颜色和阴影的配合；背景是纯粹的白色，使得前景元素更容易从中出来。背景之上的元素都是「正空间」，图中的物体呈现在背景的映衬下，有一种被置于「顶部」的错觉。而阴影并没有直接用在图片和文本上，而是应用在图片的内部，这让我们注意到在主要图像内部还有另一层视觉元素，这意味着里面还有一层图片-背景关系——这是一个非常智慧的设计。
2. 接近性原理
接近性是指页面中元素之间的接近程度。网页中的不同元素可以组合在一起，不同的接近程度会带来不同的关联属性。除了视觉特征上的接近性之外，这些元素与其他页面元素之间的距离接近度也会自动地在观众的脑海中产生关联感。
从图像到文本、导航栏到网页表单，这种接近性原则在网页设计中适用范围非常广。将类似的内容组合在一起时，它将在元素之间创建关联，为观者提供更好的视觉体验。
以下是 Mashable 网站导航显示的运用接近度的案例：
在上方的截图中，我们可以清楚地看到如何将相同类别的元素放在一起，以显示它们与主菜单的关系。由于颜色和文本大小的选择，使观者的目光自动被吸引到主标题下的子栏目上。
除了导航栏外，基于网格的内容也符合黄金比例的接近性。亚马逊的产品列表就是最好的例子：
这个案例体现的是接近性还是相似性还有待讨论。如你所见，具备视觉接近性的同类产品使用狭窄的留白进行分组和分隔。这种接近性会指示用户在类似的产品列表中，对其目标产品基于购买偏好进行排序。此外，封闭性原则也在类似项目的清单中发挥了作用。
现在，我们来仔细看看 Basecamp 的网页表单设计，它在网页设计中显示了另一种接近性的理想情况：
可以看到上图中的表单是被划分为两个主要部分的：个人信息和 ID 生成两个部分。第一部分被暗示为最重要的字段，第二部分则是一个次要的需求。这两个部分的标题都因颜色和字体大小的不同而产生区别。在这个网页表单中，接近度是一个重要指标，它将网页中呈现的信息按优先级排列。
3. 对称和秩序
对称是指两个元素呈现出镜像关系。它可以被看作是把一个物体一分为二的平衡。真实的对称图形包括等边三角形、圆形和正方形等几何图像。
人类的大脑会本能地渴望在面孔中找寻「平衡」和「对称」，这在美学上是令人愉悦的。大脑也倾向于在其他物体中找到对称，因为对称创造和谐，让观者在观看图像时感到舒适。
下面是 HvD Fonts 在网页设计中体现对称性的一个很好的案例：
这个页面不仅显示了典型的图形-背景关系，而且强调了对称性原则的运用。页面被分成四等份，字体大小和颜色相似。四个部分中的每个部分的背景都具有相同的主题色和灰度效果。你也可以注意到负空间不一定是白色的，黑色甚至其他的颜色也可以以图像作为背景。
对称性原则还可以衍生出了另一个概念：在网页设计中，不对称会使观感不佳，必须谨慎使用。许多网站使用不对称作为平衡间距的元素——非常规的正空间元素与中性的背景相互平衡，反之亦然。而 Xplode 的营销理念是不对称，Xplode 以独特的美观悦目的方式引发不对称。
这个网页利用视觉错觉和不对称，抓住了观者的眼球。作为正空间的物体被放置在一个不对称的布局之下，在负空间中创造了强烈的视觉吸引力。色彩是两个空间和谐的主要因素，并为观者创造了一种自然的联系。左边的图形也有很强的平衡性，而右边的则是带来更强的视觉吸引力。你觉得这个设计如何呢？
4. 相似性原理
相似性与接近性原理密切相关的原因，是相似分组对象之间共享属性的质量。无论是颜色、形状、形态、大小、方向或任何其他属性，当这些属性中的一个或多个在邻近对象中共享时，相似性将占上风。
即使正空间的元素看起来没有明显的联系，由于相似性原理，它们也会与负空间元素区分开。
看看这些 UrbanDecay 的商品列表：
虽然上面的商品各不相同，但在位置、色彩、产品布局、表现方式等方面却有一定的相似性。唯一不同的是左上角的眼影广告，在同类产品中独树一帜。这显然是一种营销策略，目的是在不损害页面整体对称和美观的情况下吸引注意力。这里要考虑的另一点是，尺寸上的相似性使其他图像与相似的产品类别区分开来。
除了产品展示之外，正空间可以与相似度结合使用，也可以与负空间结合使用。
让我们来看看 influenster 的着陆页：
上面例子中对齐的边框也运用了相似性原理。虽然每个正空间元素是不同的，但是相似的感觉是通过整个页面中一致的文本字段来传达的。风格、布局和主题都是相似的，因此带来了统一的视觉效果。
5. 封闭性原理
你是否曾经遇到过这样一幅画面，看上去是闭合的，但实际上是开放的？这是由于它采用封闭性原理。我们的大脑倾向于「脑补」不完整物体的空白，并利用我们的视觉感知来使图形完整化。
正空间和负空间一起构成一个整体。最好的案例就是负空间中隐藏的形状和形式，这要求对正空间中要传达的信息进行评估。在封闭空间创造性地使用着正负空间，可以产生有趣但简单的设计。
下面是 Magu Kambucha 的设计图：
在这个案例中，可以看到封闭性和图形-背景关系的平衡。瓶子和后面的粗体文字构成对比，背景则是和两者都构成对比的柔粉色。封闭性体现在哪里？看到瓶子后面的文字了吗？虽然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一个「K」和最后一个「A」，其他字母都是半隐藏的，这些字母都是凭观者的直觉自动完成的，整个形式开始成形，意义也随之成形。
下面是 Cult 的截图：
即使文本没有写得很清楚，我们的头脑可以很容易地读到 CULT 这个词。即使单词不完整，文本的排列和对齐也可以使其易于辨认。
6. 连续性原理
最后，根据一般格式塔原则，连续性遵循模式，即引导实现遵循一致的路径，建立从一个对象到另一个对象的线性模式。
在上面的图片中，尽管圆形色块的颜色变淡了，但是观者更倾向于将中间的间隙其看作一条直线。这使我们相信连续性的原理比色彩的力量更能引导用户的视觉感知。当我们借助负空间在视觉元素中画出路径，我们的眼睛倾向于优先感知正负空间之间的界限。
脑补出来的这条连续的线条是我们在设计中更应该引入的视觉线索。
让我们来看看 Crypton Trading 网站中的视觉线索设计：
看到页面右半部分设计的完美延续了吗？不管背景的明暗色调如何变化，图案在页面上的变化都非常显著。当你向下滚动时，你会看到图案和颜色是如何以连续和无缝的运动变化的。在这里，色调的变化是可以忽略的，我们所看到的是一个连续的线和点的模式。
另一个很好的例子是 OscilloScope 网站：
该网站借用连续性法则，将网站用户引入到工作室的 360 度视角中，他们可以在导航中选择所需的子栏目。
影片《Cargo》的着陆页也使用了连续性法则：滚动式的导航，以线性运动的方式让文本漂浮在网站上。由于 LOGO 是垂直展现的，所以用户必须向下滚动才能看到它的全貌。当页面向下滚动时，静态 LOGO 开始与并行的文本块一起浮动。导航引导用户经历不同层次的体验，而不会干扰隐藏在下面的内容。
由于我们的眼睛通常遵循最平滑的路径，设计师可以使用这样的方式来创建引导路径。
在这篇文章中，我们讨论了格式塔原则与网站 UI 的正负空间之间的关系。通过一些真实的案例，让大家清楚地知道如何运用简单有效的方法来改变设计的观感。关键是使用这些原理来设计的时候，可以达到 1 + 1 > 2 的效果。
人类是根据感知来思考的——主要是基于视觉。根据格式塔原理，我们倾向于看到更大的整体性图景，而不是第一眼看到的某一单个元素。
正负空间帮助我们区分、回忆、感知并识别理解。在格式塔原理的引导下，我们能够更好地在网页设计中利用不同元素来创造吸引人的作品。因为空间对于任何设计师来说都是一件复杂的事情，所以最好的方法就是保持格式塔原则的完整性。只有这样才能真正认识到空间在设计中的重要性、有效性，继而使自己成为网页设计领域的佼佼者。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
作为交互设计师，天天画的就是交互稿了。而对于很多新手交互设计师以及想转行做交互的同学们来说，一定都非常想知道大厂的交互设计师画出来的交互稿具体是什么样子的。但和视觉稿不同，交互稿里面体现了太多产品本身的逻辑，难免涉及到一些敏感内容，所以具体的交互稿不太适合直接分享，这就是比较尴尬的问题了。
不过，这不妨碍我为你们做一份交互稿模板。一来我自己也在用，二来可以帮助大家，何乐而不为。
但我必须重点强调一句话：框架是死的，人是活的，不一定要拘泥于某种形式，你可以根据自己的需要自由修改。
第一个是 PPT 型的分页交互稿，这个样式最早是从腾讯 CDC 团队流传下来的，我在第二家公司的时候就从他们的博客中看到过，当时还用 InDesign 做过一个模板。而我现在所在的团队用的也是这个，因此我过来后就自己重新用 Sketch 做了一版，方便以后使用。
1. 封面
封面很简单，就是文档标题和作者，顶部有一个通用的文档标题栏，上面的内容包括：
我在 Sketch 中为这个模板中需要改动的内容都定义了 Symbol，比如这个标题栏，你只要选中之后，就可以在右边的属性面板中自定义里面的内容。
2. 修订记录
修订记录这页，记录了从文档建立开始，每次更新的主要内容，以及相关人员，方便后期交接的时候给对应的产品经理、游戏策划和设计师查看。有时候交互稿更新一次只是修改一小处地方，如果不备注对方就会很难找到，可能以后你自己都会遗忘。
这一块我也定义了 Symbol 元件，你可以直接复制一行，然后修改里面的内容，「更新内容」的文本支持多行输入。
3. 目录
这种分页型的文档一定要有目录，备注好每个模块对应的页码，否则十几页看下来都晕了，每次想找到对应的界面还得重新翻一遍。
4. 内容页面
具体的内容页面才是交互稿的核心，一般会用小气泡和箭头进行标注，然后在右侧用对应的数字和它们对应，写下详细的交互说明。
结构可以有很多种，比如上面这种竖屏的界面可以是左右结构，如果是横屏界面还可以是上下结构等等，根据情况自由调整。文字段落的样式我已经定义好了，直接修改套用就行。
其中最重要的气泡我也做了元件，选中之后直接在右边修改数字即可。
5. 导出方式
使用这套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可将交互稿导出成 PDF 文档。我很喜欢这个格式，与 PPT 相比，PDF 在任何平台都可以通用，包括手机、Mac，不用特地装什么软件都能很好地打开。
另一种是更常见的交互稿形式，这也是我这几年进腾讯后一直使用的格式。
如果你曾经用过上文介绍的 PPT 型模板，你一定会发现：它的好处是 PDF 分页格式非常整齐，比较适合一次性做一个大产品的交互功能介绍，而不适合小功能的频繁修改。
今天介绍的这第二种，则是更加轻便快捷的类型。
这种长图型的交互稿，优点很明显：
来看一张基本样例：
它的结构分为：
交互稿标题、日期
按照项目、模块和功能的方式命名（如：电脑管家 V12 -清理垃圾-深度清理图标化改版），可以地规范交互稿名称，让其他人很容易理解交互稿涉及的是什么内容。
相关负责人
对应的产品经理，交互稿的作者，方便评审时或者交接后找人。
需求背景
简单介绍为什么要做这次设计，出发点是什么，遇到了什么问题。
主要界面
这次设计中，涉及到的所有主要界面，先陈列出来方便大家快速评审和讨论，视觉接手后可以根据这些来进行风格设计。
流程说明
有了主要界面后，我们还可能需要对一些操作流程进行说明，比如怎样发送一条语音消息，怎样删除一条会话等等。
异常状态
最后还要记得检查一下，每个界面在没有内容时的空状态、断网时的异常状态，弹出各种通知的位置等等，千万不要等到开发同学找你的时候才想起来。
上面所说的，就是一份交互稿的常见内容模块了。
该模板是专门给 Mac 平台的 Sketch 用的。
下载后（下载方式见文末），打开你会看到这个界面：
里面的每个模块我都做了 Symbol 元件，你只要选中就可以在右侧更改内容了。
比如下面的文档基本信息：
我还把可能会用到的各种字体大小、颜色、对齐方式都做成了文字样式：
选中文字后，在右侧下拉框中选择你要的样式就好。
交互稿用的都是黑白灰，还有蓝色作为标注。
我一直用的这几种，足够用。
是不是很心动？别着急，先把这个 Sketch 文件保存成 Template（模板）。
然后，你就可以在新建文件时，选择从模板处新建，直接用这个模板开始画稿。
下载链接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA
提取码：npq2
备用链接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA
作者：WingST（寇敬），男，33岁，腾讯高级交互设计师、腾讯学院认证讲师，9 年工作经验的资深互联网人，曾任 MIG 桌面安全产品部轩辕设计组组长，目前在腾讯游戏 NEXT Studios 工作室负责《乐高无限》创造型沙盒游戏的用户体验设计。
负责过的产品有腾讯电脑管家 V11.0、加速小火箭 V2.0、腾讯手游助手、腾讯网游助手等。曾在 OPPO 手机、金蝶软件等企业工作，有着 PC、Web、移动端等多平台的丰富设计经验。
感谢大家的阅读，末尾做个小广告，我的新书《交互思维：详解交互设计师技能树》马上就要上市了，这是我自己九年多来做交互设计师的经验总结，也是市面上第一本详细介绍交互设计师所应该掌握的职业技能的书，适合所有希望了解交互、学习交互的设计师和产品经理。同时书中也有我进腾讯的成长故事，以及一些个人工作和学习方法的分享，绝对物超所值 → https://item.jd.com/12576242.html
这是我所总结的「交互设计师技能树」。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com