如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
即便QQ已经陪伴大家20周年，我们依旧怀揣初心，保持科技改变生活的热衷。应运而生我们设计了太空企鹅探索科技作为本次20周年的品牌理念，来寓意新的里程碑到来。
https://v.qq.com/x/page/l087071z1ua.html
01 概述 | Overview
QQ 20周年，是互联网产品长青的一个传说，也是家喻户晓企鹅IP形象的成长，同时也代表了鹅厂精神的坚韧与奋进。即便已经陪伴大家20周年，但我们依旧怀揣初心，保持科技改变生活的热衷。应运而生我们设计了太空企鹅探索科技作为本次20周年的品牌理念，来寓意新的里程碑到来。就像宇航员勇于探索未知宇宙知识一样，QQ带着初心不断保持变革与成长，为用户提供更具科技力与创新的服务！也寓意鹅厂不断探索未来与科技向善的愿景！
02 logo设计ㅣLogo Design
我们在设计的第一阶段，logo设计，就是围绕“有趣和科技”来展开发散设计。我们决定从数字“20”开始入手，把QQ和20不断结合，同时融入宇宙太空元素，寓意QQ不断的对外探索，从多个维度来看世界，寻找有趣的内容。我们为了贴合“宇宙探索”这风格，为这次展览设计了专属徽章，徽章设计沿用了太空的概念，结合星球，星空，宇航员等科幻元素。简约的几何形状和大胆的配色贴合“QQ更好玩”的年轻潮流气息。
03 概念设计ㅣConcept & Design
1. Space QQ
太空QQ的太空服设计指的是科幻电影如《星际穿越》和《火星救援》中的太空服，我们也将的时尚潮流，2018年以来运动鞋领域最为明显的趋势，将 ugly & oversize 的潮流风格注入到运动鞋的设计当中。这种将时尚潮流与太空服相结合的新型运动鞋,使整体设计看起来时尚而风趣。如果没有它，太空服可能只是一个浅显的概念。
太空QQ创意草图
运动鞋设计草图
3D原型
2. QQ X PUPU
本次设定，由两只企鹅背靠背组成，20周岁的QQ与1周岁的PUPU，鹅厂拥有着各种企鹅IP形象，除了经典的企鹅QQ，还有各种其他特色企鹅，包括PUPU，BabyQ等等，同时PUPU来自外太空也是企鹅FM产品的主形象，经典企鹅QQ携带了新生代PUPU共同探索科技太空，寓意企鹅在不断创新与拥抱新生代相互合力，为年轻用户提供更具科技力与社交娱乐化的服务。
04 最终设计ㅣFinal Design
05 8米QQ模型制作ㅣ8m QQ Model
对于实际生产出这个巨型模型是个大挑战，我们先利用电脑三维模型生产出8米高的泡沫模型，反复检查生产的泡沫模型是否和设计模型一致，不断的打磨调整，待到确定泡沫模后开始翻模工作。
先给泡沫模喷上泥巴水，便于脱模，之后喷上石膏水，并加入麻丝增加石膏的牢固性，待石膏模晾干，把石膏里的泡沫模掏出后开始往里面涂一层泥巴水（便于后面玻璃钢脱模），然后涂上树脂和纤维布/毡，干了之后砸烂石膏模，里面的玻璃钢模型就出来了。
玻璃钢定型之后给内部焊接钢铁骨架，作为加固作用。刚脱模的玻璃钢是非常粗糙的，于是对玻璃钢的外观进行打磨，使得表面光滑和调整细节，打磨完成后开始批灰和上底色，前后三次，为的是填补空隙瑕疵使模型更逼真完整。接着我们便调模型身上的颜色，在不断尝试中调出最接近效果图的颜色，开始逐步上色。
上色完成后再喷保护漆防止褪色，待模型的漆干后清洗整个模型，为贴上专属贴纸做准备，接着确定贴纸位置并逐一贴上。最后开始搭建安装，因为在搭建过程中模型会有磨损，搭建完后再做最后的修补工作，最后巨型QQ模型完美地呈现出来。
06 贴纸设计ㅣSticker Design
配合QQ20周年庆，我们要给8m的巨型QQ模型搭配上了贴纸设计，以slogan “QQ更好玩” 为设计的出发点，希望把有趣好玩的态度注入各个品牌中，为品牌logo严肃的视觉带来玩味感和潮流感。同时配合巨型QQ宇航员的造型，我们在设计贴纸时参考了航天飞机，科幻机器等机械图案元素，每个品牌的设计方案除了有趣值得玩味外，同时需要贴合宇宙科技探险的风格。
我们针对这个大方向再进行了几轮细化，选出能代表各个品牌的最终的设计方案，并把贴纸模拟在太空QQ模型上反复测试贴纸最适合的位置，让贴纸和模型的整体风格可以完美契合。通过各个品牌的logo再设计贴纸和太空QQ的碰撞，把品牌推广做到最大化。
07 搪胶玩具设计ㅣFigure Design
作为QQ20周年庆的惊喜，我们制作了与巨型太空QQ同款的迷你搪胶玩具，在这次玩具设计上我们加入了小机关，在玩具内部放置了小磁铁，使得QQ和PUPU可以方便拆卸组合。
同时为其设计了专属包装盒，包装设计从“太空宇宙”的角度出发，以黑色为主基调，图案印花设计选用了太空QQ来进行设计，把太空QQ模型线体化，配合QQ20周年logo进行设计，利用烫金工艺与醒目的图形搭配，更有效的展现了QQ年轻化的品牌特点。同时为了减少后期生产制作之间的沟通误会，我们同期将几个较重要的角度的包装3D效果图快速渲染出来，有着非常直观的参考对照作用。
08 品牌物料设计ㅣProduct Design
1. 海报设计
设计QQ20周年展的宣传物料，我们采用了最能代表这次展览的太空QQIP为主体，作为本次展览的专属元素，太空QQ贴近科技，同时又具有趣味性和潮流感。我们结合了太空探索的特性，提炼出宇宙元素作为宣传的内容，让海报设计具有更多内容可看性和观赏性。
2. T恤设计
配合QQ20周年展，结合宇宙太空元素，并从QQ20周年logo图形中延展设计出各类代表图形，正面简洁直接地显示出本次主题，把醒目的图形放置于T恤背后，利用坐标轴和经纬度的信息图案配合各个抽象化的宇宙元素，增加T恤设计的科技感，更明确地展现了科技向善的愿景。
09 QQ20周年展览ㅣExhibition Design
QQ联合深圳福田星河COCO Park 举办了“QQ20周年主题展览”，展馆外形模拟宇宙太空站，以太空白灰色为主调，搭配简洁的立方体造型，白色灯条勾勒大门，并以QQ20周年专属徽章做门面，科技未来感扑面而来，就如大型QQ太空站坐落于地球。
展馆大门旁的墙上安置了颇具科幻气息的全息投影装置，上面展示着QQ在不同时期的形象以及20年关键大事记。代表着不同时期的QQ形象用全息投影的方式展现出来，从最开始的胖QQ到现在的新版QQ，让你一眼了解QQ演变史。中间放着QQ历届各个跨界Figure展示，总有一款捕获你的心！
同时本次展览还和% Arabica咖啡跨界合作，% Arabica咖啡展台设计简洁透气与QQ20周年展览风格完美融合。一边喝美味咖啡，一边畅游展馆，两全其美。
蓝色发光的隧道科幻神秘，一进去马上感受到了超强的氛围感，仿佛时光碎片擦肩而过。用QQ扫描墙上的二维码，立刻生成你的专属时光隧道“QQ个人轨迹”，各种瞬间涌上心头。
联合天天P图，用13个LED屏组成了“复古头像画廊”。走进互动装置小屋里，往镜头前一站，稍作等待后，以你的形象即时合成的13个复古头像就会出现在面前的13块屏幕上，体验即时“变脸”效果。让自己的头像和曾经用过的QQ经典头像合二为一，形成专属的复刻版头像海报。
结语
QQ20周年展不仅包含了展馆设计，还包含了市场营销，运营活动，周边商品等多个设计环节，环环相扣，缺一不可，一起构建了整个QQ20周年展的设计体系；展览设计了太空企鹅携带着新生代PUPU共同探索科技，寓意鹅厂不断创新探索与科技向善的愿景，为年轻用户提供更具科技力与社交娱乐化的服务，在打造“QQ更好玩”的路上奋力前行。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天我们来讲一讲大家期待已久的配色方面的干货。其实几年以前我就写过一篇关于配色的文章，早期的面粉估计还有印象，在那篇文章里我基本已经把设计师需要用的关于色彩构成的主要精华内容都汇总出来了（文末会附上文章链接的，别着急）。
但是因为不同设计行业的工作内容是有差别的，而且每个人的基础和理解能力也不一样，所以仅凭一篇文章是无法解决所有人的难题的，所以今天这篇文章算是关于那篇配色知识讲解文章的补充篇。
不过在讲解如何配色之前，我们还是先应该先记住一些关于色彩的理论知识，因为有了理论依据我们才能在做设计的时候有理有据，而不是胡乱配色和瞎试浪费时间。
所以这篇文章主要分为了以下几个部分：
简单点来说，色彩即颜色，颜色可以分成有彩色和无彩色两大类，看有彩色主要看色相／纯度／明度三个方面的属性，无彩色也就是白色／黑色／各种深浅不同的灰色，也可以说无彩色是饱和度为零的色彩。
色相，即可以明确表示颜色色别的名称，比如红橙黄绿蓝靛紫：
色彩有冷暖之分，我大致用温度的概念标注一下，其中「0」是指中性色，「－0」是指中性偏冷，「＋0」是指中性偏暖（当然，这里的温度是我自己为了具体化冷暖的概念而标记的，主要是方便大家理解，所以不用去纠结这个数值准不准确哈哈，你明白他们代表很冷／很热／一般冷／一般热就好了！～）
明度，就是指色彩的明亮程度（通俗点讲，在某种色彩里添加的白色越多就越明亮，添加的黑色越多就越暗）。
纯度（饱和度），就是指色彩的纯净度，我以红色举例，如下图所示：
如果大家想看更加详细的关于色彩构成原理的解说，可以看这个系列：《优设独家配色专题》
不管我们做什么方面的设计，设计练习也好，实际项目也好，在设计之前，我们最好是能先明确我们的设计目的是什么，然后确定一个主题，依据这个设计目的和主题，去构思创意，有了创意后再去去探讨具体的落地执行，其中包含了字体（标题文案）的设计排版配色、画面整体的构图和配色、细节优化、氛围渲染等等；
当然，这一次关于其他方面的内容我只会附带着讲一点，因为我们今天的主要内容是讲配色。
以我最近做的一张照片海报设计为例：
下面是我前几天用手机拍的一张照片，照片里的内容是我的手拿着一朵花。
1. 设计之前先确定主题
比如这一次我是确定了设计主题为：浪漫。
因为我看了下这张照片里面花是粉色的，我的手指甲油也是粉色系的，而我也是一个（年纪越大就越）喜欢粉色的女人～同时因为我喜欢尝试各种不同的风格主题，浪漫这个主题我之前是没有做过的，所以要不这一次就浪漫一回好咯。
那么说到浪漫，大家脑海里的第一反应会是什么呢？我不知道大家会想到什么，反正我会想到很多场景画面，比如2002年的韩剧《冬季恋歌》里，男女主角在雪地里相拥的画面，天上飘着雪花，同时背景音乐响起了《My memory》；
△ 《冬季恋歌》因为是2002年的韩剧，所以现在看海报是有点过时了，但剧是好剧的
再比如2017年的电影《爱乐之城》里，男女主角在繁星点点的绝妙夜空下翩翩起舞和拥吻的场景，同时背景音乐响起了《City Of Stars》；
△ 电影《爱乐之城》海报
再比如1995年上映的宫崎骏动漫《侧耳倾听》的结尾情节，时隔2个月才见面的男女主角一早就偷跑到一个可以俯瞰城市和日出的角落互相表白，微风轻拂着女主的短发，一栋栋高楼弥漫在朦胧的雾气当中，日出的余辉映射在波澜的水面，同时背景音乐响起了《Take Me Home, Country Roads》；
△ 宫崎骏动漫《侧耳倾听》剧照
等等等，还有很多浪漫有关的画面我就不多说啦。
总之，浪漫是有很多种表现形式和配色的，但是有一点是有共通性的，那就是要想打造出浪漫的感觉，背景音乐、色彩搭配和氛围渲染很重要。
比如除去听觉上的背景音乐渲染氛围以外，视觉上还有《冬季恋歌》里的白雪凯凯和雪花飘、《爱乐之城》的蓝紫色夜空和繁星点点、《侧耳倾听》里的暖黄色日出和微风波澜。
那么回到我自己拍的这张照片上面，这种大面积的灰白色背景只能让人感觉很性冷淡，一点都不浪漫，所以这张照片我肯定是要抠图才可以用的；从我自己的年龄、喜好、原照片内容限定等角度，可能走《爱乐之城》那种类型的浪漫色彩可能就更适合一点：用暗色调的紫色搭配我原本图片就有的粉色系。
ok，分析到这里先打住，我们先不要继续着急去细化到底该怎么去配色了这时候我们只需要有一个大概的色彩感觉就好了，因为配色之前，我们还有很重要的一步没有做，那就是构图。
2. 配色之前先构图
很多人之所以总是说自己不会配色或不管怎么配色都感觉不对劲，其实是因为，搭配颜色这个动作不能为时太早了，你得先把你整个画面的构图和基本框架先敲定了再去考虑配色。
先构图再配色，先构图再配色，先构图再配色，重要的事情说三遍！～
因为构图相当于化妆的时候先打好底子，底子不打好，你再怎么化妆都是徒劳的。同理，如果你的构图很乱或者基本型都没出来，你就去考虑配色，很有可能就是你磨半天都设计不出一个满意的结果，这就是很多人磨蹭半天，做出来的设计依旧不好看的很重要的一个原因。
因为你的设计步骤错了。
比如我今天要拿这朵花做一幅海报，我先不考虑配色和氛围渲染的事情，我就这样光溜溜的排个版出来再说，这里的排版方式和字体选择主要考虑乐个方面，一个是照片原本的条件限制，一个是围绕着浪漫这个主题去做，最终排版如下图所示：
一个浅色一个深色，大家可以对比看看效果。
这幅海报就这样随便看看其实也是可以看的，只是缺少细节和情感，也没有特别的吸引力罢了，最重要的是不够浪漫。
那么到这一步，我们就可以继续细化配色方案，分配色彩比例，优化细节，增加最重要的一些氛围渲染步骤了。
所以我继续优化海报，最终得到了下面这幅海报：
这张海报的背景是我用ps自带的笔刷刷出来的，顺着一个方向刷出一种坠感，这就是起到一种氛围渲染的作用。
然后，虽然粉色和紫色也算是同色系的颜色了，但是因为明亮的粉色与暗色调紫色在明度上有很大的落差，所以等他们组合在一起就会有一种碰撞的感觉，给人的视觉记忆力就会强一点，暗色也给人跟多神秘的感觉，让人琢磨不透。
毕竟，让人琢磨不透的人比一眼就能看穿的人给人更多联想和猜测，有插曲有意外的浪漫爱情给人的印象才会比较深刻一点，对吧～
同时，为了方便大家理解，我又做了以下几个版本，大家可以对比看看色彩的差异给人感觉上的变化。
比如，如果我改变画面的明度，提高画面的明度，如下图所示：
这样看，是不是画面给人的感觉要少女很多？而且给人一种很温柔的感觉，但是盯久了会觉得甜腻腻的。
如果前面第一版暗色调的是为20-40岁左右的女人而设计的浪漫，那么上面这一版则像是为20岁左右的小姑娘而设计的浪漫。
在这个基础上，如果我既改变明度，也改变配色，给画面加入非同色系的颜色，如下图所示：
这样看，其实感觉也很美对不对？美归美，但是却感觉比上面那一版还要腻，因为像是为儿童或小萝莉小公主而设计的浪漫了，适用的心理年龄段更小了。
ok，我们接着往下看。
如果我将背景随便换什么颜色，但是保持背景颜色是同色系不同明度的，画面里有明也有暗，如下图所示：
最后出来的感觉其实也是可以的，也很美，但就是少了一些抓眼球的感觉，觉得中规中矩的，没什么特别之处，就好比那种平平淡淡的感情，缺少激情的感情。
但是这种同色系的做法，却是平台和品牌为了统一形象方便视觉规范化管理最喜欢使用的一种配色方式，对此，大家可以去留意一下天猫或京东的一些频道页面或者大型活动各个分会场的页面配色。
ok，前面的配色技巧大家估计发现了，我要么是用同色系配色，要么是同色系改变明度和纯度，要么是用不同色系不同纯度但是保持明度一致，所以以这种方式去配色，无论你怎么配其实最后出来的感觉都是不会太差的，只是针对的受众不同罢了，可以各取所需。
所以如果你不会配色的话，那么就在这些基本的框架规则里去变化就好了。这是非常保险的一种配色方法。
但是如果你不遵守这种规则，而是胡乱瞎配色，则很有可能会出现下面这种情况，要么是画面显得脏，要么是画面显得艳俗、花哨和乱，如下图这些错误示范所示：
上面这几幅图虽然是一些错误的配色示范，但是很多对色彩不敏感的孩子可能也会觉得：「诶，其实也还行啊」，其实主要是因为有构图的基础在那里硬撑着，底子在那里，所以色彩即使配的不够好糊弄一下也还行。
拿化妆举个例子，为什么那些本身样貌底子就好的人，即使乱穿衣或乱化妆你也觉得看起来还行，一旦她好好的打扮画个妆，那简直就是神仙颜值了，可底子不好的人呢？可能你就算再会穿衣打扮，你也只能变成看起来还行，到达不了神仙颜值的地步。
所以我再强调一遍，配色之前先构好图，把底子打好，这很重要。
总结起来就是，做设计之前先确定主题，然后搭框架搞定排版样式，接下来再考虑配色，再然后氛围渲染，最后一步优化细节，over。
下面这些知识点都是我平时总结出来的一些配色小心得，是我屡试不爽的一些方法，分享给大家。
总结来说，我的配色技巧主要有以下几种：联想法、提取法、目的导向法则。
1. 联想法
所谓联想法就是，类似于头脑风暴那样，当拿到设计需求或确定设计主题后，我会提取一些关键词，根据关键词去联想很多相关的可能，然后再去筛选一些结果为我所用。
比如下面这张照片，原本照片的颜色是很简单单一的。
但因为我给他确定的主题是「野花的回忆」，所以我就会去联想：「野花都是什么样的颜色？」「回忆又是什么样的色调比较合适？」，后来我就确定了野花主要以比较艳丽的色彩居多，比如玫红色、亮黄色、白色等等，至于回忆嘛，可能就是有年代感了，所以大的基调是暗色调的。
于是下面这幅海报的色彩搭配就出来了。
其他用联想法配色的还有很多，比如下面这一组。
原照片：
做成海报后：
不过这里需要说明的是，联想法要求你会联想，所以大家平时最好是多留意身边的事物，多观察大自然什么的，还有适当去了解一下色彩心理学，你会明白每一种色彩都是可以代表不同的感情和事物的。
通过长时间的锻炼自己对于色彩的敏锐度，可以帮助你快速的配出自己想要的色彩。
2. 提取法
所谓提取法，就是当我们拿到某一个产品或模特需要围绕着它们做设计，我们就可以直接从它们身上吸取颜色，作为主色或点缀色都可以，这样搭配颜色的好处就是：省时省事不容易出错，而且还有呼应主题和画龙点睛的效果。
比如下面这张照片，原本照片的颜色就是绿色和淡粉紫色。
那我最后做出来的海报配色也是这些颜色咯，只是文字部分单独用了白色而已。
哦对了，一般白色和黑色这两种无彩色都是最适合用来作为标题或文字内容部分的颜色的，也是最不容易出错的，同时联想法和提取法其实是可以互相搭配使用的，不冲突。
但是，有时候我们如果希望画面可以更活泼一点，一般做那种比较卡哇伊风向的设计，标题也会用彩色，而不是黑白无彩色，至于标题用什么彩色，也是可以用联想法和提取法啦，如下图所示：
3. 目的导向法则
前面的联想法和提取法的配色方法是教大家如何选取颜色，但具体到哪里该用什么颜色，该用什么明度什么色相的颜色，则就取决于你的设计目的是什么了，所以我将它称之为目的导向法则。
比如，之前我给大家提到过，有的设计是走艺术路线（以传递情绪为主，重在情绪上的表达），而不是常人理解的一般的商业设计路线（以传递信息为主，重在信息产传达准确），前者适用于一切与艺术有关的设计或设计师个人的自由创作，后者适用于所有以卖货为目的的商业活动设计。
这2种类型的设计目的是不一样的，面向的受众群体也不一样，所以在色彩选择上就会有差异。
举个例子，当我们提到某某平台又做活动了打折了，他还做了一个卖场促销页面，你去看看，绝对基本是以红色、橙色等暖色系为主色，并且页面氛围做的非常热闹，就跟你去逛商场，映入眼帘的就是各种sale、大减价标牌，并且还有人拿着喇叭大喊：「进来看看进来瞧瞧啊！最后一天大减价买了不吃亏买了不上当啊！」的即视感。
并且，页面里一些特别希望消费者能注意到的信息，它一定会突出处理，不仅字号要够大，而且在色彩上也会突出。
拿我的书《这么设计能热卖》作为产品图做个示范，我做了一个促销海报，如下图所示：
但是，如果你去看一些比较性冷淡或大牌画风的店铺或官网看看，它完全就是一副我根本就不care你买不买的调调，倒不是因为他不想做生意，而是他的调性就那样，比较自我或端着。
好比人家的定位就是孤傲的，或则是你高攀不起的大小姐和公子哥类的，买ta东西的人本来也就是这种类型的，或者希望别人觉得自己就是这种类型的，毕竟要彰显自己的身价和品味，不能掉价撒。
所以，你看ta基本不会给你看大大的字号，也不会用一些很花里胡哨的颜色在标题上，而是以黑白灰这些无彩色居多，更不会特地用一些突出的颜色去醒目的区分一些字眼，总之页面看起来不会有太浓的促销氛围
虽然我的书籍封面设计本身其实就不是性冷淡和大牌的风格，但我依旧做个示范给大家看看，如下图所示：
而介于这之间的，也就是那些时尚类型的，或时尚里带点促销的，或放得下身段走点接地气路线的牌子，则是会在保持好看时尚的基础上，依旧会适当的用大点的字号或显眼的颜色去突出一些重要的信息，但色彩不会用的太花哨，如下图所示：
而像上面这种比大牌感亲切一点又比大卖场时尚一点这种介于之间的情况则是绝大多数的，毕竟小众的是少数，成为大牌是少数，虽然现在是大卖场但是不想走大牌路线路线的是少数，不想赚钱的商家也几乎没有，于是最终都沦为了不高不低的大多数。
总结来说，目的导向法则可以分为2种情况：
如果你想低调一点内敛一点，你在配色上就保守一点，尽量少一点颜色比如三种颜色以内，或者是用同色系或柔和点的颜色等。
就像一个性格很温和或者很内向的人一样，没有攻击性，安安静静的。
拿我之前做的一幅照片海报为例。
原先我是考虑让这幅海报看起来有视觉冲击力一点，但是我又不想画面太过于张扬，毕竟我那天穿的衣身衣服色彩是比较柔和的橘粉色，所以我用了对比色而没有用同色系，同时控制画面里的颜色不超过3种，并且这幅海报里色彩之间的明度是差不多的，如下图所示：
但如果我用同色系不同明度和纯度来配色，出来的感觉就是下面这样的，你会感觉画面更淑女安静一点，没有什么攻击性：
可是如果你想更加高调张扬一点，那么你在配色上就可以多用一些颜色，比如三种以上颜色，或则是用对比色或互补色而不是同色系配色，或则是纯度高一点明度高一点的颜色，然后不同明度纯度的颜色互相碰撞。
就像一个脾气火爆性格张扬的人，他们不愿意淹没在人群里，而是要做人群中最醒目的那一个。
我还是那上面那张海报改个颜色给大家看看，结果如下图所示：
如果我想继续突出大标题文案，那么我还可以将标题的无彩色白色换成亮黄色，画面里的颜色更多了，冲击更大了，甚至你会觉得有点花哨：
ok，上面这几张图，大家对比一下就会知道这其中的差异了。
所以记住啊，配色不是乱来的，它一定是有章可循的，也是要依据你的目的来配的。
当然，可能有人会说：「有时客户给的主题实在是太晦涩难懂了，我实在是联想不出来啊」，或者给到你的产品本身的配色就丑的不行了，如果你直接吸取颜色那做出来的设计肯定也是丑爆了，那么，这时候就要看你是不是有一颗灵活的脑袋能够随机应变咯！～
如果联想不出来说明你百度总可以吧，然后自己要多看多积累你的脑袋里才有货的。
如果原产品本身配色就丑那你就分析它丑在哪里加以改进不就行了嘛？比如它是因为纯度太高了很艳俗，那么用低一些纯度的同色系是不是就可以了？比如如果它是因为本身的色彩太多了很花哨，那么我们只选取一两种颜色用用是不是就可以了？
再比如还有人说，给我的产品根本就没有颜色，纯白、纯黑、纯灰色，那我该怎么吸颜色啊？
天哪！～这种类型最好搞定了，因为无彩色就是万能色，无彩色无论是搭配无彩色或者其他任意有彩色都可以的，这就又回到我前面提到的目的法则了，不懂的可以回头再仔细看看～
平时也经常会有人问我到底该看什么书来提高配色能力，其实我想说只要你掌握了我前面提到的基本的色彩构成原理这些基础知识，剩下的其实都不需要你继续去看其他的色彩书籍了。
因为看其他书籍无非就是要扩充你的知识面罢了，它只是其中一种增加知识储备的途径而已，但现实是很多人写的书一看就让人犯困，而且晦涩难懂，你买了也是浪费钱，倒不如通过看设计网站、看时尚杂志、看电影、多观察大自然等有意思的途径去培养自己对于色彩的敏锐度，然后看看我的干货文章勤加练习，多实践多思考来的有用。
尤其是大自然的色彩，那真的是一个超级大的配色宝藏啊，你随便看看那些花花草草、蓝天白云、日出日落、海底和大地，哪个配色不是美的让人惊叹？就连那些恶心的毛毛虫都有一身好看的不行的颜色。
我们做的很多设计，不管是什么行业的设计有关颜色的，电影也好，三维也好，平面的也好，其实基本都是来源于大自然的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
信息时代，每个人都需要具备基本的「搜索」技能，尤其是设计师，你有没有灵感枯竭不知所措的时候呢？今天我们召集了7位优秀设计师，对他们的设计灵感来源进行揭秘，希望这一期的轻访谈能够让你轻松Get设计大佬的搜索技巧！
优设轻访谈第八期，我们的话题是——不信息时代，能与我们分享一下你的搜索技巧么？平时的素材积累是如何进行的？
Dribbble：https://dribbble.com/creativemints
实际上，现在寻找灵感或资源变得非常容易。去Pinterest，你会获取到任何你能想到的灵感！查看stock网站，获取所有你需要的资源！
△ AGE / Online courses
尽管如此，我仍然建议从外部世界获得灵感——请几天假，去一个新的城镇或国家旅行，逛逛博物馆，你会发现真实生活会成为你最重要的灵感来源。
Dribbble: https://dribbble.com/glebich
是的，你是对的，搜索技巧对产品设计师来说是必不可少的。我在一家公司做了很长时间的分析师和研究部门工作，在那里我负责用户体验，这些经历帮助我理解如何搜索有意义的数据和信息，并使用它来定义一个产品的关键指标。
但是搜索不仅仅是关于用户分析和信息，也是关于设计语言——理解什么是可能的。最好的设计只有当你跨越了可能和不可能之间的界限时才会出现。这种平衡基本上是一种新的设计语言或产品的品牌。
我使用Pinterest进行图像搜索。这个网站帮助我创建情绪板，并找到一些更具体更具象的东西，Dribbble的作品帮助我研究UI布局。然而，我不会使用Dribbble来作为我的色彩搭配灵感库。
对于颜色，我使用自己的灵感素材库，在我的职业生涯中，我花了大量的时间从互联网上搜集素材，并进行创作和整理。我也有自己的平面设计素材库，我创建并管理这些素材库大约有10年了。我几乎每天都在捕捉的设计灵感素材。问题不仅在于你如何搜索，还在于你如何将这个搜索结果应用到你的工作中。
△ Water waves simulation for 3d icon
那如何应用呢？例如，当我看到好的设计时，我将视觉图像结构分离开来——有时我在情绪板中添加新图像仅仅是因为我喜欢形状，有时是因为我喜欢颜色，有时是因为图形效果等。在将该引用添加到库之前，设计人员需要了解在何处可以使用以及如何使用。对于设计师来说，搜索绝对是一项必不可少的技能，我通过创建情绪板促进了我的搜索。
我们相信灵感无处不在，当然也会取决于我们进行的项目类型。
我们在互联网上会搜索很多，比如Behance和Dribbble。然而，我们周围也有很多灵感。
△ Cellebrite Pictograms
例如，如果进行的是一个品牌项目，那么我们周围的自然环境就是我们获得灵感之所在。颜色、动效、形状和所有这些的组合使一切都在一个愉快的和谐场景中工作，这就是我们努力传递的。
对于UI/UX项目、网站和App设计，我们也是这样做的，但我们主要目的是理解用户的最终目标和每个行动背后的动机。我们不仅在数字世界中研究类似的解决方案，在现实世界中也会寻找类似的解决方案。
Dribbble：https://dribbble.com/phamduyminh
我不在本地存储灵感资源，因为想要方便浏览必须对其进行分类，而这对于本地存储来说比较困难，所以我非常依赖于在线资源，它们有很好的搜索引擎，所以，为什么不呢？
基于不同的目的，我更喜欢从多种来源获得灵感:
说到寻找灵感，我认为有两种人：使用Dribbble的人和使用Behance的人。Dribbble更像快餐，在这里你可以迅速的饱腹，Behance更像一家高档餐厅，你可以在那里度过整个晚上。
我个人喜欢吃快餐。我喜欢每天早上上班前查看Dribbble，当我发现好东西的时候，我就把它存起来以后用。
△ Promo Website Animation for Pocket Multilingual Assistant
如果你正在寻找真正的案例，而不仅仅是概念稿，你可以在Awwwards上找到一些主流的东西，也可以在这里找到一些更奇怪的东西。
哦，还有Pinterest，它的优势是推荐你可能喜欢的东西。我经常用它来做情绪板和寻找参考素材。
如果是插画资料，没有比Dribbble和Behance更好的地方了。只要滚动鼠标，所有的好东西和你喜欢的艺术家都会一步添加到你喜欢的作品中，简单!
△ Tempers Flare
Pinterest有利于发现新的想法、主题、不寻常的元素和灵感。每天浏览这些平台也会让你培养出一双训练有素的眼睛，这对提高你自己作品的质量和风格至关重要。」
Dribbble: https://dribbble.com/febinraj
我每天都想更新！我认为这是件大事。因为这个世界瞬息万变。
△ Evening From Kerala
通常，我的主要搜索源是Behance和Dribbble，同时我从其他来源获取了更多的数据，比如文章，博客。
Behance: www.behance.net/yihsuanli
信息时代，每个人都必备一个「搜索」技能，尤其是设计师，很多人在接单后,可能会第一时间在网络中或者日常的资料扩中搜索素材、参考、灵感等。
我还记得刚开始接触设计时因为没有太多经验，常常因为资料整理太久，压缩了执行时间，最后反而虎头蛇尾的完成作品。虽然创作作品时资料搜集、调查很重要，但其实整体过程有更有效率的方法。其实收集资料也是需要练习的，通过经验累积，可以渐渐增加效率与快速找到最精准的讯息，避免漫无目的搜寻。
△ ZENWATER
Work hard 不如 Work smart, 有了较有系统的资料搜寻方式后，可以将时间留给创作和尝试。随着经验累积，我开始养成了一些小技巧帮助自己更有效率的搜集资料，大家可以酌量参考：
1. 先用树状图整理出关键字
在开始找资料前我会先把设计关键字整理出来，先从Google或百度等网站去搜寻相关的话题或图片，以此方式让思考可以更突破。例如，我要做一张音乐会的海报，开始前，我会先写下关键字，例如：乐器、钢琴、音乐、琴键、流动、弹奏….，接着利用这些关键字进行中英文查询，随着找到越来越多资料，可以从其中找到更多可能性的延伸。这个阶段搜寻目的是从抽象方向出发，避免找到与别人相似的元素。一个一个关键字搜寻后，就可以把其中好的图片整理再一起，收敛成更明确的设计方向。
2. 擅用IG的＃hashtag功能
除了使用搜寻网站寻找资料，我觉得IG（instagram ）也是一个不错的选择。我会用IG 的hushtag去找大家对于某一个单字不同的想像，例如找#music，在其中除了可以找到音乐相关的画面，有时候也可以找到不同场域里的音乐元素。除了找灵感外，我也会利用hushtag搜集的设计作品，例如找#logo#graphicdesign时，可以看到大家正在进行中的作品，或是还未整理好放上Behance的作品。
△ One Team One Goal / IBM Taiwan Sport Day
3. 以pinterest分类整理资料库
我平常就有整理pinterest的习惯，建立资料库的习惯除了为了特定专案外，我也会以设计种类分类作品，例如以CI、packaging、poster…分类。除此之外，以风格分类的资料库也是必要的，例如：东方风格、美式、日本风格、欧式….。这些平常就累积好的资料库能够让我搜寻作品资料时，有一个快速的开始。 Pinterest会依据风格推荐更多的作品给使用者，因此当平常有了足够的累积，寻找资料就会有效率很多，能够快速找到很多需要的作品风格。
4. Behance搜集不同风格的设计师
Follow特定设计师的IG或是Behance也是我搜集资料的一个方法。我会搜集一群在每个领域最具代表性的设计师。在找不到灵感时，我会不断浏览他们的作品集，试着从他们角度出发，思考如果是他们遇见这个题目，他们可能怎么发展。除此之外，他们也是一个完整的风格库，每个作品都是该领域的标竿，当客户有特定风格的需求时，能够快速给自己一个明确的目标，期许自己能够达到他们作品的高度。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
前天看完大陆毕业展海报合集，不少小伙伴大呼看得不够过瘾。为了满足大家炙热的求知欲与上进心，美丫姐又花足工夫找来了今年港澳台、日本、欧美等地毕业展海报。依旧干货十足，依旧吐槽猛烈，希望优秀如你，能够看得开心。
首先我们来看看让人印象最为深刻的优秀作品。
渴望自由的金鱼
鱼缸中的生活再怎么无忧无虑，也拦不住金鱼一跃而出的渴望，就像喷薄欲出的创意，就像按捺不住跑出校园的毕业生。
架着一个歪斜的棚子，支撑着我们的二十二
猛然撞上了即将踏入社会的迷茫与不安，台科大的莘莘学子鼓起勇气，向老师询问着最后一个问题「老师您看这展厅，供电是不是不太够？」
伏流
有时候你以为自己发现了一股清泉，其实全是大佬手里玩剩下的，人外有人，天外有天。
喜欢做，肝愿受
其实大家刚毕业头几年也是这么想的，几年之后肝还好，头很冷。
后浪
长江后浪推前浪，后浪还有后后浪。大家都是被时代的洪流裹挟着前进，显然这届毕业生还没毕业，已经被学弟学妹们震得神志不清了。
超人请回答
整个童年，大人都忙着策划一个玩笑，让孩子天真的相信世界上真的有超人，等到成年之后他们再哈哈大笑「哈哈哈她真的信有超人」，偶有不愿从童真中醒来的人继续寻找，你们等着，迟早给你们找来真的超人。
青浪
用各式纹理堆叠表现出了「浪潮」的韵味，既能联想到青出于蓝胜于蓝，又有长江后浪推前浪的语境，画面动感，锐意十足，就是不知道早就毕业的学长们会怎么看。
那个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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com