如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天我们来讲一讲大家期待已久的配色方面的干货。其实几年以前我就写过一篇关于配色的文章，早期的面粉估计还有印象，在那篇文章里我基本已经把设计师需要用的关于色彩构成的主要精华内容都汇总出来了（文末会附上文章链接的，别着急）。
但是因为不同设计行业的工作内容是有差别的，而且每个人的基础和理解能力也不一样，所以仅凭一篇文章是无法解决所有人的难题的，所以今天这篇文章算是关于那篇配色知识讲解文章的补充篇。
不过在讲解如何配色之前，我们还是先应该先记住一些关于色彩的理论知识，因为有了理论依据我们才能在做设计的时候有理有据，而不是胡乱配色和瞎试浪费时间。
所以这篇文章主要分为了以下几个部分：
简单点来说，色彩即颜色，颜色可以分成有彩色和无彩色两大类，看有彩色主要看色相／纯度／明度三个方面的属性，无彩色也就是白色／黑色／各种深浅不同的灰色，也可以说无彩色是饱和度为零的色彩。
色相，即可以明确表示颜色色别的名称，比如红橙黄绿蓝靛紫：
色彩有冷暖之分，我大致用温度的概念标注一下，其中「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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天遇到的就是z-index不起作用的问题。一个后台小哥不知道抽什么疯，写元素覆盖偏不让用absolute，搞的我之后废了9牛二虎之力写了一下，问题描述是这样的，
一对兄弟节点,insert和parent，parent有两个子节点subtop和subbottom，展现的结果是想让subtop在insert上面，subbottom在insert下面，
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.insert{
position: relative;
z-index:100;
background: green;
width:300px;
height:300px;
top:100px;
}
.parent{
/*position:relative;
z-index: 1000;*/
width:200px;
height:200px;
/*left:0;
top:-50px;*/
border:1px solid #eee;
}
.subbottom{
position:relative;
z-index: 50;
width:200px;
height:200px;
background: red;
top:-100px;
left:0;
}
.subtop{
position: relative;
z-index:1100;
width:100px;
height:100px;
left:0;
top:0;
background: blue;
}
</style>
</head>
<body>
<div class="insert"></div>
<div class="parent">
<div class="subtop"></div>
<div class="subbottom"></div>
</div>
</body>
</html>
其实原理也很简单，就是利用了z-index的覆盖问题，在写的过程中我发现无论怎么改变，insert的z-index总是无效的，于是百度了一下z-index无效的情况，一共有三种：
1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。
这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了，他的解决办法有是三个：
1、position:relative改为position:absolute；
2、浮动元素添加position属性（如relative，absolute等）；
3、去除浮动。
所以，去掉parent的position和z-index，达到了我想要的效果，如下图所示：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们都知道UI设计并不仅仅是做出好看的东西，还涉及到交互和数据还有转化率，就像是设计师通过界面在于用户交流一样，而底部导航栏就是交流对话中的一个。因为如果用户连他们在产品的哪里都不知道，那么我们的设计再好优秀也是没用的。
底部导航栏的用法
底部导航栏在屏幕底端展示3至5个目标选项，每一个选项由一个图标和文字标签展示，点击底部导航图标时，将带领用户前往与之关联的视图。
这里将目标选项放在底部的原因是，在手持的移动设备上容易被触及，符合拇指定律，方便用户单手操作。
底部导航栏的展示
根据我的观察，底部导航栏的表现形式一般分为三种，首先我们先来说第一种：
1、文字+图标
大部分的平台都是使用的扁平风格，只有在节假日的时候才会出现，而多数情况下，我们常见的底部导航栏都是以文字+图标的形式出现，在选中的状态下，设计师也会根据对整体风格的把控和产品调性，增加一些变化和趣味，来突出产品的风格。如下图所示：
全名K歌和知乎的底部导航栏就是使用文字加图标的形式，其中全名K歌的底部图标增加了一些有趣的变化，让底部图标变得更有趣，同时文字的存在能够更好的让用户对图标进行理解，提高用户识别效率。
2、文字
文字按钮目前来说产品里使用的也是比较多的，大多出现在以图片和视频为主的产品和界面中，如下图所示：
抖音、美图秀秀、小红书，这三款APP的底部导航栏都是文字作为模块切分，在使用的过程中，更能够关注与阅读内容，底部操作栏视觉层级相比上面的那种层级比较低，不影响浏览视觉，同时文字按钮降低了用户的理解成本。
3、图标
单图标按钮是很少见的，很多图标都没有很强的识别度，所以仅仅用图标放在底部操作栏，会造成用户的认知负担，不建议使用独立的按钮。如下图所示：
VSCO是一款给用户推荐产品的APP，因此底部操作栏只有三个按钮，从设计的架构和产品的逻辑上来说，比较有利于用户对图标点击操作。
Same的是一款社交的APP，有别于目前的大部分产品，它的底部是使用的单图标的形式，虽然整体界面比较简约，但是辨识度比较低，造成了使用产品时的认知负担。
小总结：
1、当页面图片以图片为主时，使用纯文字或者纯图标的能够降低底部图标对用户造成的干扰，但是纯图标的底部导航栏降低了用户的识别度，引起用户使用时的认知负担。
2、文字+图标的搭配属于最稳妥的方式，适用于大部分的产品底部图标设计。
底部导航栏图标的设计
当我们准备做APP底部导航栏设计的时候，不知道大家有没有遇到过经常不知道该用面性还是线性的纠结中，究竟要选择哪种对用户来说才是合适的呢？
大多数的人会觉得是出于个人喜好，但是一项名为《面性图标vs线性图标，对于可用性方面的影响》的研究表明：不同的图标存在着不同的识别效率，而面性图标一般会比线性图标更快被用户所识别。
1、特征线索
用户要辨认图标依靠的就是特征线索，如果一个图标没有明显的特征，是很难被用户所识别出来的。如下图所示：
如上图所示，发现的特征线索是它的眼睛，没有眼睛，发现就是个椭圆；目的地的线索特征就是中间的圆，没有了中间的圆，就是个小气泡；行程是做成了行李的样子，而没有了行李箱上的特征标志，就变成了一个很普通的包。
所以图标上的特征线索是用户识别的关键，在我们设计图标的时候，一定要确保它包含了用户识别的线索。
2、什么情况下用线性图标？
图标除了要包含特征线索以外，线性和面性图标之间也有区别，当一些图标的外部特征为它的特征线索时，线性图标会比面性图标的识别度来的更为突出。
当我们的底部图标的信息属于特征线索比较微妙，并且出现在边缘的时候，我们可以使用线性图标，或者换个角度来说，就是当我们选择底部图标为线性的表现形式的时候，在图标的表现形式上，尽量往形状的边缘特征来靠，这样能够让图标更加突出并且很快被识别。
3、什么情况下用面性？
大多数图标其实就是将现实生活中的对象变成一个小缩影，因此面性剪影的图标形式认知高于线性图标。
尽管如此，用户还是能够识别线性图标，但是当图标的内部空间比较狭窄的时候，用户识别线性图标需要花费更多的时间来识别。
对于内部空间比较拥挤，或者线条比较多的图标，最好使用面性图标，剪影的表现方式提供了一个更简洁也更具辨识度的方式，从这里我们可以发现一个事实，线性图标的设计表现要求要高于面性图标，因为线性图标要在具有表现力的同时还需要有很高的识别度，同时不能太过复杂，内部不能过于拥挤。
划重点
1、当页面图片以图片为主时，使用纯文字或者纯图标的能够降低底部图标对用户造成的干扰；
2、文字+图标的搭配属于最稳妥的方式，适用于大部分的产品底部图标设计。
3、图标是由有识别度的特征线索组成的，而面性图标的识别度速度更快；
4、线性图标的内部间距比较宽的时候，更容易识别，内部间距比较窄的时候，使用面性图标会更好；
5、图标的特征线索在边缘的地方，使用线性的图标识别度更高。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题，即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题。
先允许我梳理一下目录结构，以便阅读的时候不会一头雾水，你到底说的这个文件是哪个……
其中 /src/main 是存放主配置文件的，/src/render 下面有 store、router、components 等。
components 下面就是很多 .vue 文件，router 下面就是一些路由配置的 js 文件和一些拦截器的 js。
关键是 store，store 下面有一个 index.js 的主配置文件 index.js，和一个 modules 文件夹。
index.js 里面写的是（记住这句话，后面会用到）：
import Vue from 'vue'
import Vuex from 'vuex'
import { createPersistedState, createSharedMutations } from 'vuex-electron'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
modules,
plugins: [
createPersistedState(),
createSharedMutations()
],
strict: process.env.NODE_ENV !== 'production'
})
而 modules/ 下面存放各个实体，例如上图中的 Auth.js 和 Counter.js，并通过 index.js 全部引入。
/**
* The file enables `@/store/index.js` to import all vuex modules
* in a one-shot manner. There should not be any reason to edit this file.
*/
const files = require.context('.', false, /\.js$/)
const modules = {}
files.keys().forEach(key => {
if (key === './index.js') return
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default modules
然后来看一个 vuex 的官方样例：
const state = {
main: 0
}
const mutations = {
DECREMENT_MAIN_COUNTER (state) {
state.main--
},
INCREMENT_MAIN_COUNTER (state) {
state.main++
}
}
const actions = {
someAsyncTask ({ commit }) {
// do something async
commit('INCREMENT_MAIN_COUNTER')
}
}
export default {
state,
mutations,
actions
}
之后很显然的，我想要在 Vue 的组件调用 INCREMENT_MAIN_COUNTER 对计数器加 1。
this.$store.commit('INCREMENT_MAIN_COUNTER');
// this.$store.commit('INCREMENT_MAIN_COUNTER', payload);
1
2
如果是一般的 vue，就 OK 了，但是，我遇到了报错，说，Please, don't use direct commit's, use dispatch instead of this.
那好吧，没事，不就是不然用 Commit，非要用 Dispatch 嘛，那我就写一个 Action，里面直接调用 Mutation，就像这个样子：
const actions = {
JUST_INCREASE ({ commit }) {
commit('INCREMENT_MAIN_COUNTER')
}
}
1
2
3
4
5
然而奇怪的事情是，this.$store.dispatch('JUST_INCREASE') 并不能运行，没反应，计数器还是 0，不能赋值，就像是这个函数没有被执行一样。没有报错，没有任何异常，查也查不出什么问题。
网上的资料似乎也挺少。
折腾了很久，后来发现是 vuex-electron 里面一个插件的锅。
解决方法有两个。
方法一：
在 store/index.js 里面，就是上文特别强调了的那个文件，去掉 createSharedMutations 插件。
import Vue from 'vue'
import Vuex from 'vuex'
import { createPersistedState, createSharedMutations } from 'vuex-electron'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
modules,
plugins: [
createPersistedState(),
createSharedMutations() // 注释掉这一行
],
strict: process.env.NODE_ENV !== 'production'
})
这是因为 vuex-electron 引入了一个用于多进程间共享 Vuex Store 的状态的插件。如果没有多进程交互的需求，完全可以不引入这个插件。
注释掉以后重启项目，用 this.$store.commit('XXX') 就可以使用了。
然而，如果需要多进程来处理怎么办？
方法二：
https://github.com/vue-electron/vuex-electron#installation
看第 3 条：
In case if you enabled createSharedMutations() plugin you need to create an instance of store in the main process. To do it just add this line into your main process (for example src/main.js):
import './path/to/your/store'
1
这种时候就不能用第一种方法来解决问题了。
好在文档也说了，加上一行导入。
找到 /src/main/index.js，在前面加上一句：
import '../renderer/store'
1
之后一切正常，可以使用 Dispatch 来进行操作了。
最后还有一个比较奇怪的问题：
在直接调用 state 的时候，这样写 this.$store.state.loginStatus 是不行的，会 undefined，必须写成 this.$store.state.Auth.loginStatus，就像是 this.$store.state.Counter.main 一样，似乎可以解释为，不同的模块不指定名字的话就找不到。
但是，在写 Dispatch 的时候又不需要指定名字了，直接 dispatch('changeLoginStatus') 就行了，不然难道不应该是也按照 dispatch('Auth/changeLoginStatus') 这样子来写嘛……
蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
