如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们在设计中除了接触到图形，还需要了解文字的设计。特别的文字设计或者排版可以使整体的画面效果更加有氛围，甚至超过图形表达的感受，更加直观地表达出内容的主旨。文字的设计方式有很多种，例如通过字体变形，结构重组等方式来让文字变得更加特别，但往往会让我们耗费比较多的时间。
因此我一直在思考有没有一些既简单又的设计方式来提高文字的设计感。在浏览国外的一些设计网站的过程中，做了一下文字设计形式方面的收集，并整理出十种我认为具有代表性的文字设计形式。另外还参考这些设计方式，使用中文字体进行了一些尝试。
拉伸的处理手法，让文字更具有张力，整体氛围更具标题感和图形化，但依然保留着文字该有的识别度。常见于纯文字排版的海报，既满足阅读需要，同时具有设计感。
拉伸与文字本身的字形、字体有着很大程度的关联，并不是所有的文字都适合拉伸，例如下面的案例。
1. 不同字体对比
从方案尝试中看出，左边字体在进行拉伸之后，文字本身的结构会遭到破坏，而右边的效果可以较为接受。因此在设计的过程中尽量选择可适用于拉伸的字体，另外在拉伸的过程中需要对细节重新处理，使字体保留原有字体的细节美感。
2. 不同字形的对比
从下面案例中对比，O 在进行上下拉伸的时候效果比较好，而左右拉伸的时候会失去字体本身的美感，而 Y 在上下左右拉伸后整体视觉效果都相对平衡。
3. 细节处理对比
优化字体线条的细节可以使得整体文字更加规整、方正（右边）。而未进行细节的设计则会显得笔画参差不齐（左边）。
4. 传统与现代对比
传统的字体拉伸后（如下图中间的字体），字体本身的韵味就失去了，因此不建议对一些较为传统的字体进行拉伸设计。
5. 设计尝试
中文字的笔画比较多样性，因此在细节的设计上比英文来得更加复杂，在处理「撇、捺、点、折、弯、勾」时需要保持原本的笔画结构性。
6. 拓展案例
结合实际要表达的内容，使用拉伸的设计手法，例如结合物体，叠加颜色或者交错拉伸等。
虚实结合即为线面/阴阳的设计手法，通过虚实的处理，可以突出一组或一段文字中的重点信息。在一些强调主次的设计中，可以尝试这种方式来做区分，线面结合的处理手法让原有都是面的字体多了一些透气感和空间感。
虚实处理的方法需要考虑本身字体的粗细，过分纤细的字体效果可能并不明显。
1. 尝试对比
从对比中，发现粗体相比于细体来得更加直接更容易出效果，对比明确。
2. 中文字体的尝试
从尝试中来看，与上面中的结论较为一致，较细的字体使用虚实结合效果并不理想。对于书法体的应用，更多需要考虑字体的收边效果是否工整，收边过碎，会影响在描边之后的细节美感。
3. 设计尝试
通过递增或者递减的设计手法，让原本简单重复的文字元素，变得更加具有层次感和节奏感，让文字的生命力变得更加丰富多样。
在设计的过程中需要提前规范好各个字体之间的差异关系及变化的效果过程。按照一定的数值倍数差异比进行变化。
1. 不同方式的尝试对比
在尝试的时候发现，粗细变化的模式可能更多会依赖于字体本身的模式。
2. 中文字体的尝试
中文在使用递进渐变的方式中需要考虑整体文字的结构感和块状感，由于字形较为复杂，整体视觉效果会过于零碎。
与递进渐变接近但却又有差别的文字设计形式。扩展变化的文字具有张力的同时有一定的速度感和发射性，就像向四周展开的波纹效果，具有延续性。
按文字的行高或者字宽作为基础值，按一定的比例，对文字进行破形切割处理，上下左右进行扩展发散。
1. 比例值示意效果
2. 中文字体的尝试
外观的完整度还算可以，但由于中文本身自有的特性（笔画较为丰富多样），因此在扩展层次的数量上需要进行一定的控制，不宜过多，以短语或标题使用较好，避免过于形式而导致文字识别性降低。
3. 设计尝试
文字作为纹理出现在画面中，区别于图形化的纹理。既有图形感，同时可以辅助传达一定的信息和态度。
在字体的选择上尽量适用字形较为简洁的字体，避免影响前景内容的展示。设计上可以结合其他的设计形式，例如虚实结合/拉伸变形/扩展变化等方式，提升画面的丰富程度。
1. 中文字体的尝试
常规的中文字体，整体效果还算不错。但结合中国书法字作为底纹，可以让整体的设计更具有不同于英文的设计感，整体效果更具有力量感，因此建议在设计中文底纹的时候可以大胆尝试中文书法字。
通过叠加的方式，让原本简单的文字和背景产生了融合。既提升了背景的层次感，又让文字变得具有设计感。
粗细的字体会产生不一样的视觉感受，较细的字体会产生若隐若现的视觉效果，文字的识别性会稍弱，较粗的字体识别度基本上没有太大问题，因此在设计的过程中可以结合实际的情况选择不同粗细的文字。
1. 粗细对比尝试
穿透的文字设计，对于打造设计的大片感具有很突出的视觉效果。例如漫威的电影片头设计。
2. 中文字体的尝试
结合不同的语意使用不同的字体，再结合穿透的设计方式，使画面具有中文的文艺感。
3. 拓展案例
结合实际的内容设计，穿透文字的玩法还可以拓展出更多不一样的设计，例如下面这些例子。
扭动的设计，让文字具有曲线的动态感，提升了文字的装饰性。不同曲线的动态变化，赋予文字不同的律动感。变形的文字并未影响到文字该有的识别性和阅读感，却具有了设计感。
如下面的三个案例，曲率的差别，赋予文字不同的动态规则，有不同的视觉感知，有时柔美，有时却具有速度感。因此在设计的时候，可根据具体的内容设计不同的扭动趋势。
1. 中文字体的尝试
对比可见较细的字体使用扭动的设计，效果并不理想。由于中文笔画的差异点，经过扭动之后整体外形较为不规整，而粗体的效果则较为规整，动态曲线趋势也较为明显。
2. 设计尝试
扭动+虚实+底纹的效果。
3. 拓展案例
更高级的设计手法是利用自然环境的介质结合文字，起到扭曲的视觉效果。
与扩展变化有异曲同工之妙，文字通过一定的角度和位移间隔，由二维向三维的视觉效果进行变化，让文字更加多变化和有重量感、层次感。
立体层叠的设计对于字体本身具有一定的要求，较为纤细的字体出来的效果并不理想。
1. 不同的字体尝试
从对比中看出，细体或较细的衬线字体，层叠后会出现衔接不上或视觉黑点的情况（如下面左图和右图）。因此设计时建议使用粗体，并且整体笔画较为平均的字体（中间的图）。
2. 中文字体的尝试
虽然具有了层次感和空间感，但也会让整体变得更加复杂，因此需要根据文字的多少情况进行使用。
3. 拓展案例
立体层叠还不止单向的设计，例如可以进行轨迹变化，向外扩展层叠，或是增加一些颜色渐变来丰富整体的设计。
文字通过错位，叠加，颜色变化，透明度变化，切割等方式的设计之后，具有故障的视觉偏差感受。整体视觉感知类似双重曝光的照片，文字具有丰富的层次感。
颜色叠加的效果，对于颜色的选择极为重要，两个颜色交错之间的颜色可以为过渡色或者互补色。
细体的效果并不理想（如上图左边第一个），建议设计的过程中使用较粗的字体，另外在使用的过程中需要考虑文字的识别度（如右边的效果），重叠之后文字的识别度或多或是会受到影响。
1. 中文字体的尝试
由于中文字比英文复杂，因此使用中文字在设计的时候，可以寻找一些共笔的地方进行重叠（如下图左边的设计），利用字体笔画粗细一致的情况下，进行了边与边的重叠。另外在设计的过程中建议加大字间距，这样可以避免不同文字的重叠，产生过度复杂的效果，影响文字的识别性（如下图最右边的设计）。
2. 拓展案例
在简单的叠色之外，结合不同质感和肌理，可以让整个文字具有不一样的视觉感受。
文字按照立方几何结构进行排版，通过颜色差异，阴阳，线面等方式设计处理后形成空间感和立体感。相比于平面排列的文字更具有空间感和层次感，提升整体画面的设计感。
1. 设计尝试
使用空间错位结合虚实的设计，让简单重复的文字变得具有空间感和立体感。
2. 拓展案例
除了常规的空间打造，甚至可以融入到场景中或者结合物体本身的设计。
以上设计风格，常常会在一些运动品牌的设计中看到。例如，Nike 的设计中应到的文字，也会结合这些方式，来丰富和提高整体的设计感。
火箭队出场片头的字体应用，线形字体叠加渐变的效果，具有层次感又有未来感。
阿迪达斯的广告：
Converse 的广告：
Under Armour 的广告：
除了一些品牌的设计，音乐唱片的封面也有应用到这些类型的设计手法。
我们除了在一些常规的媒介上会看到相关的文字设计，在这两年的耐克或阿迪达斯的鞋子设计中，也会加入文字元素的设计，甚至球员会直接在鞋子上写上文字。
文字设计的拓展叠加
文字的设计已经成为一种新的设计趋势，结合实际需要表达的想法，对于设计手法进行活学活用是做出好设计的关键。当然只有掌握了基础手法才可能做到举一反三的设计思考。在实际设计的过程中，我们往往不会是单独使用某一种方式，而是对不同的设计手法进行重组再设计，或者使用 2~3 种方式叠加设计来打造整体的画面效果。如下：
在这十种基础的文字设计中，通过结合发散可以迸发出远远不止于十种的创意设计。本次收集总结除了自身学习提高之外，希望可以起到抛砖引玉的作用，激发设计师对于文字的设计思考。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
动效有助于让UI具有更好的表现力及更易于使用，尽管具有如此大的潜力，但可能由于它是UI设计家族中的新成员之一，所以它大概是所有设计学科中最不被大众所了解的。视觉设计和交互设计可追溯到早期的GUI，但由于动画必须由现代硬件来顺畅的渲染，而且UI动效和传统动画之间的重叠区间也使得两者之间的区分变得复杂。传统动画需要掌握迪斯尼的12个基本原则，那么这是否意味着UI动效也像传统动画一样复杂？我经常能听到人们说，动效设计很复杂，不知道如何选择相对应的动画模式，但是我认为至少在UI领域，动效设计是可以很简单的。
从哪里开始
动效主要是通过UI元素之间关系过渡来帮助用户浏览App。当然还可以通过使用图标、勋章以及插画动效来为App增色，但是建立产品可用性应该优先于增加动效表现力。在展示你的动效设计技巧之前，让我们先从设计一个基本的动效开始，即产品导航之间的过渡。
过渡模式
在设计导航之间进行动效过渡时，简单性和一致性是最关键的点。为了达到这个目的，我们将以下2种动画模式中进行选择：
1、基于容器的过渡。
2、没有容器的过渡。
基于容器的过渡
文本、图标和图片等元素在容器内进行分组
如果动画涉及像按钮，卡片或列表这样的内容，则使用基于容器的动画设计，容器通常有很明显的边界，这种模式分为三个步骤：
1.使用Material的标准缓动为容器设置动画（意味着它可以快速加速，然后逐渐的慢下来）。在下图的示例中，容器的尺寸和圆角半径从圆形按钮动画过渡到填充整个屏幕的矩形。
2.缩放容器中的元素进行宽度自适应，将元素固定在顶部但是仍然存在容器内，这样在容器和内部元素之间创建了清晰的关系链。
*放慢动画速度以说明元素在容器内如何缩放
3.随着容器加速，在过渡期间逐渐淡出消失。当容器减速时输入的元素逐渐淡入。当元素进行快速移动时，通过淡入淡出来实现元素的更替。
*放慢动画速度以说明元素如何使用淡出淡出
将此模式应用于所有涉及容器过渡的动效，这样会建立起来一致的动效规则。这样还使得开始和结束之间的关系更加清晰，因为它们是由两个动画容器互相衔接的。为了展示这种模式的灵活性，这里将它分为五种不同使用场景：
*放慢动画速度以说明容器如何连接开始和结束
有的容器只是使用Material的标准缓动从屏幕外滑入，它滑动的方向取决于与之关联的组件位置。例如点击左上角的抽屉导航，图标将从左侧滑动容器。
如果容器从屏幕边界进入，则它会淡入并放大。它并不是从0％的比例制作动画，而是从95％开始，以避免元素之间的过渡幅度太大。缩放动画使用Material的减速缓动，这意味着它以峰值速度开始并逐渐减速停止。在元素退出时，容器会在没有缩放动画的情况下淡出。为什么退出动画会有这样微妙的设计呢，这样做是便于将注意力集中在新内容上。
*放慢动画速度以说明容器如何通过淡入淡出进行缩放动画
没有容器的过渡
有些作品将使用没有容器的过渡来构建动效设计，例如点击底部导航中的图标，将用户带到新的页面，在这些情况下，将使用以下两个步骤：
1、起始元素通过淡出消失，然后最终元素通过淡入进入。
2、随着最终元素逐渐出现，使用Material的减速运动来巧妙的展现。但同时缩放仅适用于新旧内容的替换。
*放慢动画速度以说明没有容器的过渡如何使用淡入淡出和缩放
如果开始和结束的组合元素具有清晰的空间或顺序关系，则可以使用共享动画来强化它。例如当下图触发导航组件时，开始和结束的动画都在垂直维度进行滑动，这加强了他们的垂直布局。当点击下右图入门流程中的下一个按钮时，从左向右水平动画强化了序列进行的的概念。共享动画使用Material的标准缓动。
*减慢动画以说明垂直和水平共享动画
最佳方案
把事情变的更简单一些
鉴于其动画频率高低与产品可用性密切相关，导航过渡通常应该优先于功能展示。引人注目的动画通常最适用于小图标，勋章，加载或空状态等元素。下面这个简单的案例可能不会得到Dribbble的那么多关注，但是它更像一个真实的产品。
*放慢动画速度以显示不同的动画风格
选择合适的时间及缓动类型
导航过渡应该使用合适的时间，快速过渡优先考虑功能，但是速度也不要太快，防止动画路径迷失。根据动画占用的屏幕比例来选择动画持续时间。由于导航过渡通常占据屏幕的大部分，因此300ms是一个比较有经验的动画时长。相比之下，像开关按钮这种小组件动画持续时间很短，大概在100ms左右。如果过渡感觉太快或太慢，请以25ms的增量调整其持续时间，直到它达到合适的动画节奏。
Easing描述了动画加速和减速。大多数导航过渡使用Material的标准缓动，这是一种不对称的缓动类型。这意味着元素会快速加速运动，然后缓慢减速以将注意力集中在动画结束时。这种类型的缓动为动画提供了自然的感觉，因为现实世界中的物体不会立即开始或停止移动。如果动画看起来很僵硬或死板，那么可能是由于你选错了缓动类型。
*放慢动画速度以说明不同的缓动类型
本文所说的动效模式在建立一种实用而又微妙的动画风格。这适用于大多数产品，但某些品牌可能需要更激进的动效表达。要了解更多有关动效的内容，请阅读Material motion指南。
一旦处理好了导航之间的过渡动画，在你的产品中添加角色动画的挑战就开始了。这意味着简单动画模式是不够的，这时候动传统的动画工艺会真正闪耀起来。
角色动画可以增加趣味性
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
新人设计师可能都会遇到这样的问题：在设计一个复杂需求的时候，各种场景、可能性在脑中来回乱窜，常常觉得逻辑不够严密。设计完成后，又被各方质疑，提出各种异常场景，导致频繁修改，缝缝补补。本文将和大家分享下解决以上问题的小方法。本文就以「企业内部权限分配平台」的需求为案例，整理了之前处理复杂需求的一些思路。讲讲在交互设计的过程中，如何避免以上两种情况，让我们的工作更好地服务用户，体现价值。
首先，我想任何设计师在设计产品的时候第一步都是理解需求，这包括了需求的目标背景、角色场景、产品逻辑等，不同的需求侧重点会不同。以「企业内部权限分配平台」的需求为例，目标背景和角色都比较简单，但是一般涉及权限的产品，背后的逻辑就会很复杂，场景情况也很多。
和产品沟通，和用户沟通，甚至网上找资料，都是理解需求的一些好方法。比如本次设计的需求是关于权限分配，这一篇《网易高手：角色权限设计的100种解法》的文章，就很好地帮助我理解权限分配背后的设计逻辑。
包括理解需求内的专有名词，为其建立特殊的标识样式，也是帮助自己、团队、用户更好地理解产品需求的一种方式。
△ 名词解释
我们在最初思考需求的时候，肯定会从场景/问题出发，思考怎么去解决这个问题，是以「人」的思维来思考这个问题的，这是必然的，也是正确的。但此时我们的思维是散点式的，例如当我们想到权限分配的需求时，可能会说：这次我们要新增一个「岗位」的概念，让权限和岗位绑定，不要和人绑定。对了，还有人员离职这个问题困扰业务很久了，我们这次要在人员离职的时候进行……
所以，在最初的需求框架确定后，我得到的是这样两段文字：
看上去已经非常全面了，但由于我们是散点式地收集需求，很多时候可能还是会有遗漏，或者说错误关联了内在逻辑，导致一些逻辑冲突、漏洞。
此时，我们需要将我们的思维从「散点式收集」转为「结构化梳理」。从需求说明里抽丝剥茧，我们可以得到：
各个对象之间的关系又是怎样呢？我们把所有的对象两两组合，再把没有关系的删掉。
也就是：
这个具体的业务逻辑并不重要，不需要去费心理解，重要的是这样一种结构化思考的方法，可以应用在后续各种各样的设计中。
对象间的关联，再和我们刚才梳理的人物、操作相结合，就可以还原成一系列的需求描述：「角色」可以在「A对象」下「操作」「B对象」，例如：超级管理员可以在部门下新增岗位。
至此，我们已经可以建立「需求→功能对应表」：
其中，红色部分都是在之前散点式的需求罗列中没有考虑到的功能点，通过结构化的梳理，我们可以提前把它们都一一补齐。
这个过程可以减少我们最小颗粒功能点的遗漏，避免在做完大部分设计后，突然发现遗漏了某个功能，任务时间点又已经到了，慌慌忙忙地加功能，就可能会影响整体的设计思路和框架。
完成了功能点的整理归纳后，就可以开始我们的界面设计了。在最初的界面设计中，这三点需要做减法：
当然，可以先把可能存在的异常、细节都记录下来，以便后续补充。
比如，在人员权限分配的界面结构中，分为三个大模块：
在有了界面框架和功能对应表后，我们做设计会变得比较简单，按照之前整理的「需求→功能对应表」，把每个小颗粒的功能细节填充到界面框架内即可。
当主流程设计完毕之后，我们就要开始做加法了，在之前，我们一直是用一种纯理性的视角来完成我们的设计，保持纯理性的设计会有两个问题：
例如，纯从逻辑思维角度你能想到在一个企业里有人是没有任何部门归属的吗？然而现实中就存在这样的情况──外包人员。不结合实际场景，我们也不知道用户一天需要处理多少次重复操作，目前的设计对他是否足够便捷。
作为一个企业内部权限分配平台，我们可以把部⻔、岗位、人员等对象作为初始线索，站在不同的用户使用角度，沿着线索去全面地思考场景，修改功能。有一些实在难以理解的业务，找用户聊聊也是一个好方法。
很快，我们就找到了下面这些特殊场景。
1. 人员变动
处理方法：行政架构自动同步，红点待办。
我们与 OA 系统数据打通，自动形成四类待办红点：人员新增、人员离职、行政部门新增、行政部门删除。
这样 HR 就不需要重复做新人员的添加操作，只需要业务管理员把 OA 内无法覆盖的人员岗位设定好就可以，也不会出现遗漏的情况。
2. 高管兼职
例如某位高管：本身为 A 部门负责人，临时兼任 B 部门负责人，那么当他不再负责 B 部门时，该如何处理他的岗位？离职？转岗？似乎都不合适。
处理方法：新增岗位移除功能。
3. 外包人员
了解到现实情况中，外包人员是没有部门归属的，但是实际上他们肯定也有自己负责的业务范围和岗位，在初始化时如何安置没有部门的人？
处理方法：新增一个部门，叫做「无岗位人员」，并且标红作为待办，提醒操作者去处理这些「无岗位人员」。
4. 人员离职/转岗
在进行功能设计整合时，我考虑是否「人员离职」应该叫「人员删除」更系统化？是否可以直接整合为一个「人员编辑」的功能，将离职、转岗的操作合并？（实际上这2个功能操作起来确实比较相似）
处理方法：最终我依然保留了「人员离职」、「人员转岗」的功能，因为这样更场景化，用户清晰地知道自己当前该操作什么。
目前对一个人进行离职操作的路径是：找到原部门→找到岗位→找到人→处理离职，而我们的企业有 2500+ 员工，对于离职操作者 HR 来说，这个路径是否现实？是否快捷？
处理方法：新增搜索功能，直接搜索人名→处理离职，这个功能也方便了其他找人的场景。
5. 更多
诸如此类的考虑还有很多，例如新建部门的时候是否会有空部门，在企业进行组织架构重组时是否会有大批量的人员、组织变动，进而需要有批量操作等等。找到最初的线索，站在用户的角度沿着线索思考，进行全局扫描，就会发现很多需要做加法的地方，发现的方式可以是观察、访谈、思考等任何方式。
在已经保证了主流程的简洁、清晰后，再用全局扫描的方式去搜集特殊场景，给我们的设计做加法，可以保证我们整体的设计框架是清晰可用的，而特殊场景是散落在骨干上的各种小分支。
如果我们可以做到，对所有的主干场景、分支场景了然于心，并且有自己的优先级考虑，那么对于项目成员、用户提出的质疑，我们也有足够的理由来证明自己设计的合理性。
当然，场景基本考虑全面后，还有最后一步，就是统一交互，完善细节，这一步也是设计上的加法。
以上，就是一个针对复杂需求的加减设计法案例，总结来说有四个大步骤：
所以，交互设计师是需要理性和感性的结合，要有抽丝剥茧，提炼总结的能力，也要有贴近用户关注情感的细腻。把自己的工作规范化，减少无效付出，也是我们的一种能力。希望本篇文章对新人设计师有一些帮助，也欢迎大家一起探讨交流。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
栅格系统在UI设计和前端开发中是被应用的很广泛一套体系，但真正能掌握并很好运用的人却不多，一起来学习吧！
环顾身边常见的优秀设计很多都使用了栅格系统，你可能非常赞同在界面中使用栅格系统，但却没有人告诉你应该如何使用它们。
印刷中也会用到栅格，但就本文而言，我主要想讨论的是用于PC和移动设备上的栅格系统设计。
紫色块放内容
内容块包括文本，图片或者是两者的组合形式，背景颜色实际上不能算是内容元素，除非是作为文本或者图片的容器。
上图中的粉色块作为栅格中的列，它们构成了内容宽度。一般来说，列宽是不会变的，只是列数会随着设备的不同而变化，比如从PC端的12列变为平板电脑上的8列，然后在移动端变为4列。严格来说，你其实可以定义任何想要的列宽，但大多数情况下的网格列宽都设置在60-80px之间。选择合适的列宽是最重要的，因为它是内容宽度的主要决定因素。
水槽是在列与列之间的空间。20px是一个常见的尺寸设置，当设计块状或者卡片元素的网格时，这种间距非常重要，比如做照片类设计的时候。有些系统会随着设备宽度的增加而增加水槽的宽度，但也可以保持固定。
外边距也称为外水槽，是内容宽度之外的空白区域。为了更方便的设计，外边距会随着设备宽度的增加而增加。移动设备的边距通常为20-30px，而在平板电脑和PC端，这个间距通常会差异很大。
下面会介绍一些基本的准则，但要明白在实际设计中其实没有任何硬性的规定。
1. 内容元素必须位于若干列上
其核心思想是内容元素必须位于若干列上，你可以任意分割，比如6x2,3x4,4x3。下面的例子中，我展示了不同分割方式设计的信息卡片。
不同栅格设计展示
很棒，这看起来很简单对吧。有的时候，你想把内容严格的套用在栅格布局上，会发现可能不够美观，比如下面的例子。
如果我们把内容都放在网格上，文本内容会显得很长，最佳的位置是不严格在任何网格上，这也是可以的，只要理解了整个元素实际上是一个不可见的，更大的容器就行。
这也是4x3的布局，只是给了它内部不可见的填充。当把这样的设计稿给到开发时，他们就能很直观的知道这一点，所以这更利于去理解如何实际地分配好内容。
2. 不要将内容元素留在水槽中
内容元素应该要在列宽以内，而不能流出在水槽之外，这样会违背栅格化的目的。
3. 只要父级元素对齐栅格，子级可以不完全对齐列
有些时候，你想要将设计和卡片分成两部分，一半是图片，一半是文字。你可能遇到这样尴尬的情况，图片没有完全落在一列上，文字被迫以一种奇怪的方式自适应。其实不用担心，只要“父”容器对齐栅格，这就没有关系。
父子级内容栅格排版示意
4. 除非有意，否则不要把列作为外部填充
所有重要内容都应该与栅格列宽相适应。一开始会觉得奇怪，因为如果不习惯使用网格，可能会把网格宽度当成全部内容区域，所以还需要给它设定一定的内边距。此时外边距就起到了留白的作用，它们充当了内边距。不要在网格内部利用列宽当成内边距，而是要与网格最外面保持对齐，利用网格外的间距来当做留白区域。根据代码实现方式，要么网格内的内容按比例缩放，边距固定，要么外边距与内容同时缩放。
正确的内容填充方式和不正确的把栅格当做边距
所以如果有人说“我需要一个1200px宽的设计”，这并不意味着你的设计就是1200px宽，这其实是说设计内容宽度在1200px的画布内，实际内容占位是960px，这样就会有空间留出外边距。
5. 完全出血的元素或纹理图形应该设计在画板边缘，并理解为出血的列网格
这个页面布局的顶部图片被设计成完全出血
这是一个例外的规则，当背景颜色或者图片在完全出血的情况下，开发同学会把它理解为一个全屏的内容元素。
如果设计的是装饰元素之类的内容，可以接受它被裁切掉，此时也可以脱离栅格化的设计。
一些图片和文字的出血设计
页眉和页脚有时也有例外，它们不被认为是内容的一部分。有些设计将它们固定在浏览器边缘，有些则喜欢保持内容的宽度，这取决于自身功能和内容的情况。将它们保持在内容宽度内的好处是，当用户在宽屏显示器上看页面时，不需要来回扫视；将它们固定在浏览器上的好处是可以为导航元素提供更多的空间。
栅格化布局如何做到响应式
图片来源Intuit
在传统的栅格化系统设计中，列的宽度和水槽的宽度是保持不变的，只是列的“数量”发生变化。为什么要这么处理呢？这是为了让设计更简单。如果一组三张卡片分别放在桌面的四列上，那么在平板电脑上，会显示两张卡片，并把第三张卡片进行折行显示在第二行上。不需要做任何的调整，因为已经知道它位于第四列上了。在手机上，答案也很简单，只需要一张卡片，其他的就会自动堆到下面的行中。如果你愿意，也可以变得有创意，选择只在手机上显示一张卡片，或者做一个水平滚动。这些列的自适应对于代码来说就是很简单的参考。
实际上，web必须呈现任何浏览器的宽度。例如，有一个大显示器，它可以看到1600像素宽的东西，实际上pc端的网页设计是1200px宽，平板电脑上是768px宽，手机是360px宽。所以你会看到一个小于1200px的设计，有大量的留白。但是当你的浏览器再小一个像素，1199px，会发生什么呢？
固定网格
固定栅格示意
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在900px的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。但当达到768px临界点时，设计马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。
流动网格
流动网格的示例
现在来看看流动网格的特点，当窗口缩小时，内容将动态的发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。
所以我想说的是，设计的临界值只是一个更改布局的参考点。这就是为什么列宽和水槽在网格中不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。
混合网格
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。
一些做的很酷的栅格系统
不需要太死板地去坚持传统栅格套路，12、8、4这样的分布，甚至不需要20px的水槽。下面是一些在设计中使用栅格系统做的很棒的设计灵感。
Invision’s Genome Project
可以看到，他们的设计故意不去使用任何的水槽，所以看起来是无缝的。
这个网站不仅设计的很好，他们还利用了在设计中展示他们自己的栅格系统来让整体的设计变得更加酷炫。
Dropbox Design
他们没有设计水槽和外边距，相反，整个页面被分成两半，然后将内容填充到这两部分。
Wordpress
Wordpress创建账号页面
使用网格的方式取决于你自己。你可以在主要内容部分使用网格，次要内容则不使用。在Wordpress的例子中，页面中间的部分使用栅格化设计，左侧的侧边栏则没有使用。
The Mockup Club
内容和网格也并不总是从中间开始，对于模型网站，内容在左边也未尝不可。
我非常确定的说，Instagram的PC端是用上了6列栅格布局。
要点总结
写这篇文章的目的是想提供一些关于如何在响应式设计中使用栅格系统。我知道对于我自己来说，我花了很多年的时间写了大量的代码来理解网格是如何工作的。我在YouYube上看了很多视频，也阅读了大量的文章，但每个人都在关注它为什么重要，却不去注重到底怎么在自己的项目中使用这些原则。
你要做的最好的事情就是从现在开始注意那些优秀设计是如何对齐元素的，你将会开始看到这些模式。为了帮助理解，这里有一些设计系统概述了它们的网格使用：
Google’s Material Design System
Intuit’s Design System
IBM’s Carbon Design System
…And here’s huge list of other systems you can look through
在完全理解了网格的工作原理之后，我已经成为了一名更好的设计师，因为我知道我的设计将如何在临界值之间进行转换。我也可以落地我的设计，使它们能够有一个完美的像素对齐。这样的规范带来了更一致，更简洁的设计，当用户从一个界面到另一个界面流转时，这真的提升了产品的档次。我建议在你的设计中去应用这些网格，并和开发一起，以相同的方式将它们落地，这将会是一个非常不错的进步。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
阿里巴巴副总裁、中国内贸事业部总经理汪海在对外分享时提出 1688 已经从信息平台时代进入数字化营销平台时代，让 1688 用户在平台内完成营销和销售一体化的整个商业闭环。1688 的使命也升级成「在数字化经济时代，让天下没有难做的生意！」在全新的业务态势下，为了更好的满足用户需求，阿里巴巴（1688）主客升级势在必行。
首页既是业务分流的中心场景，也是平台卖家判断平台打法，买卖家感知平台价值的重要「门面」。从 UED 专业视角来看，首页是定义 APP 内体验范式及视觉风格的核心场景。
1. 盘点现象，定义问题
满足业务新的诉求：平台阶段性战略不同，1688 从曾经的信息平台过渡到交易平台，如今向数字营销平台转型，旧的内容框架难以承载业务的新发展。
提升分流质量：从过去的数据效果来看，需重新判断，在 For 特色采购需求和服务大面采购需求之前，如何平衡调优，提升首页的流量转化效能。
体验升级：移动端 APP 天然生长在手机系统上，系统的风格更迭也牵动着 APP 的变化和升级。在 8.0 升级前，1688APP 存在着 5.0、6.0、7.0 多个由不同设计师在不同时间点所设计的场景，到8.0，APP 趋待从框架层、表现层以及品牌等方面进行统一及升级。
APP 升级前与业务对焦，我们收到三点诉求：
在内容框架制定上，我们聚焦用户价值，舍掉 7.0 时的内容版块个性化，聚焦做商品的个性化，仅保留For大面用户的营销、内容场景，提升算法推荐区的曝光率，以此区域的商品做首页的直接转化。
视觉容器升级
做平视觉框架，选择「大间距分隔」，为内容留出干净、简洁的视觉空间。
精简内容栅格，避免形式给用户阅读带来的负担。
提高留白率，提升页面整体的透气性，为内容留出更清爽、轻松的阅读空间。
拉大字体大小的梯度，加重字体颜色梯度，提升文字的清晰度和可读性。
强调版块特性，塑造买家心智感知，达成业务目标
强化搜索：7.0时，曾上线过将搜索做到「主观上觉得显眼」的测试方案，但相较于之前沉浸式搜索，数据几乎没变化。
8.0 阶段，从视觉表现层跳出看：「强化搜索」并不意味把搜索设计得更「显眼」，而是达成「让更多用户更高频地使用搜索」这一目标。如提升搜索底纹词、热搜词精准度和吸引力、增加搜索布点等，都可能助力达成业务目标。
基于用户单手操作时，拇指在屏幕不同区域的点击体验，选择将搜索组件移到更易于点击、视线更聚焦的屏幕位置，上线后数据提升非常明显。
Banner 升级：7.0 的 Banner 画面丰富度高，加之描述字段多，用户阅读有一定成本，较难在 3 秒内掌握全 Banner 的信息。此外，相比于 C 类用户，B 类用户会更偏理性，我们选择以更冷静、克制的「视觉语气」与 B 类商人对话，而非渲染氛围引导点击。（上线后，同样的活动内容，按新、老两版规范设计投放两套 Banner，新版较老版 UV CTR 约高出 48%）
For 新人：以差异化的利益、个性化秒杀、新人攻略做用户的承接。
营销场景心智差异化表达：营销由伙拼爆品、天天特卖两部分组成，我们判断爆品主打心智为「卖得火爆又便宜」，特卖主打心智是「限时限量抢便宜」，选择将两个区块最关键的特质做强化表达。
内容场景（直播）动态化、互动感、实时性传递：抽象出直播间的方形版面+内容叠加形式来设计，大坑位以动图传递给用户直播的动态感，以红包、个性化商品的多维实时轮播气泡传达直播的互动感、实时性。
为什么要做APP应用内的品牌设计？
品牌设计是将内容层（平台价值）与接收层（用户）做柔性链接的一环，譬如在 APP 场景中，由于有商品、商家、商机等「干货」，即使不特意做品牌设计，用户也能与平台保持刚性、稳定的连接。而反过来看，品牌做得很好，但平台没有「干货」，用户也不会单奔着品牌设计来平台。我们认为，做 APP 应用内的品牌设计，核心价值在于助力用户认知到平台特性，感知平台价值。从设计专业视角来看，APP 应用内的品牌设计，有利于定义并统一 APP 内体验范式及视觉风格，保障用户的体验。
每位设计师所处的业务环境不一样，解决问题策略和方式也千差万别，在 APP 应用内的品牌设计中，个人选择是通过厘清内容层（平台）多层次诉求及 For 用户的价值点，认知、感知接收层（用户）特质及内容倾向，基于内容层底料+接收层用户特质确定设计底层范式，塑造用户感知。
在阿里巴巴商业操作系统中，1688 聚焦做 B 类业务，直接服务对象是 B 类买卖家，业务细分出档口尖货、淘工厂、企业采购、淘货源、微商代发、工业品超级店、跨境专供等，这些都是具有一定 B 类特质及体量感的场景，故在 APP 业务门洞及常规图标的表达上，基于扁平 vs 写实、轻盈 vs 厚重、活泼 vs 稳重的维度，图形选定轻拟物、弱对比的设计范式，塑造 B 类场景 For 买家的沉稳、份量感。
此外，异常/空白场景也是平台与用户互动，塑造用户感知品牌的机会。在空态情感化插图部分的绘制上，力求塑形出有份量、易读、有意味的场景以示对应空态，并佐以轻微动效，增强空态的互动感。（在收藏夹、我的供应商等工具型场景，基于空态信息的价值考虑，将空态与工具新手引导相结合，并未做常规的插图。）
标准色
随着业务的发展，我们基于新的业务态势，丰富了 1688 品牌色，以橙红色作营销、利益属性的表达，以商务蓝作服务、数字化属性的表达，以金色作权益属性的表达。
辅助色
在实际产品设计中，品牌色并不足以表达各类业务场景中的多层次的内容。因此，基于 VI 品牌色，裂变出不同重量、层次更丰富的品牌辅助色。
场景用色规则
基于买家角色及场景特征定义用色规则。
1688色域及选色示意
以 HSB 模式划定出偏沉稳的 1688 色域，在日常 banner 及业务场景中可灵活取用。
动效是设计的重要手段，良好的动效表达能增强信息表达强度，清晰信息层级关系，提升用户体验的舒适度。做动效之前，将 APP 信息结构平整到三层，保障内容在页面简洁明畅地呈现。
在实际落地中，动效实现非常依赖技术资源，故动效设计之前，应考虑一个前提：动效设计增益内容表达，价值可论证，效果可衡量；同时，考虑接收层用户的商人特质，我们期望动效表达给用户以稳定感，并且在设计表达上能兼顾效率。
在动效呈现部分，主要以缓入、缓出、缓动结合曲线来调节，总的来说，内容入场时节奏稍慢，速度缓，分层加载，交代清信息在 Z 轴上的层次关系，内容出场时节奏快，速度快，内容层级不用再做分层消失。
APP 内典型场景的动效案例及演示：
此外，除以上在图形、色彩、动效等基础维度收口外，我们也需要将业务品牌放声给买卖家，以达成业务品牌的价值传递。在 1688 向数字营销平台转型的阶段，业务提出了「源头厂货通天下」的口号，我们通过设计手段，利用 APP 开机启动页及下拉刷新的空间，将「货通天下」的概念强化表达。
以上便是此次首页改版阶段性的记录。在 8.0 的视觉体系里，为更好地突出内容，视觉容器选择尽可能做轻、做平，以冷静、克制的「视觉语气」与 B 类商人对话。当然，这是设计师和业务同学阶段性的选择。后续品牌的完善及产品的优化，仍需结合数据持续打磨。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
即便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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
