如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
响应式已经成为网页设计的主流，目前已很多网站能兼容手机端 ，但是唯有 dashboard 的界面是相当难在移动端显示，特别是数据复杂、内容较多的后台数据，是很难直接展示到移动端的。
今天我们分享一系列 dashboard UI 设计作品，主要展示一些用户数据、图表的可视化组合设计。这些作品界面布局合理，层级分明，设计美观，对要做这类 UI 的同学有很好的参考价值。
– 01 –
by limor.tabeka
– 02 –
卡路里消耗跟踪器 by Cuberto
dribbble.com/cuberto
– 03 –
健身活动追踪 by Cuberto
– 04 –
医院 APP 设计 by Nicat Manafov
dribbble.com/nicatmanafovv
– 05 –
by Stelian Subotin
– 06 –
– 07 –
by Zoeyshen
dribbble.com/zoeyshen
– 08 –
by Gabe Becker
– 09 –
by Cedrica
dribbble.com/rddstudio
– 10 –
by Michal Parulski
http://dribbble.com/Shuma87
– 11 –
by Divan Raj
dribbble.com/divanraj
– 12 –
by Maciej Kałaska
dribbble.com/themce
– 13 –
by Gregory Muryn-Mukha
dribbble.com/murynmukha
– 14 –
by Saepul Rohman
dribbble.com/SaepulRohman
– 15 –
by Dmitro Petrenko
dribbble.com/ortimd
– 16 –
健康生活 APP，by OKatarina
dribbble.com/OKatarina
– 17 –
暗色系移动端后台 by ortimd
dribbble.com/ortimd
– 18 –
by Riko Sapto
dribbble.com/RikoSapto
– 19 –
by Taras Migulko
dribbble.com/migulko
– 20 –
电子单车 APP 后台设计 by Arnar Ólafsson
dribbble.com/pollur
– 21 –
by Cedrica
dribbble.com/cedrica
– 22 –
交易证券数据界面设计 by Iftikhar Shaikh
dribbble.com/iftikharshaikh
– 23 –
记帐应用统计界面 by Matt Koziorowski
dribbble.com/mattkoziorowski
– 24 –
by Matt Koziorowski
dribbble.com/mattkoziorowski
– 25 –
银行 APP 数据界面 by Vlad Ermakov
dribbble.com/ermalength
– 26 –
比特币交易界面设计 by Pawel Kwasnik
dribbble.com/pawelkwasnik
– 27 –
医疗护理app用户后台 by Masudur Rahman
dribbble.com/uigeek
– 28 –
by Manoj Rajput
dribbble.com/manojrajput
– 29 –
这个展开菜单很好看呢 by Martin Mroč
dribbble.com/martinmroc
从收集的这些 Dashboard 界面来看，它的展示形式和PC 端有很大的区别，移动端的后台只能显示少量或简化版的数据。比如 PC 一个页面的功能，在移动端可以分开1-2个页面来区分，或者使用类似 Tab 的形式来展现。
如果是手机 WEB 端可以用响应式来解决，以节省成本，但这样通常交互并不十分友好，如果时间和成本允许的话，建议产品和交互人员策划新的后台版本。
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在多人团队里，通常不同的设计师负责不同的流程，如果没有UI设计规范，不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作，效率比较低。而制作设计规范和UI KIT之后，则可以直接利用KIT里的组件快速搭建好页面，把设计师从基础工作中释放出来，大大提升设计效率。
目录
一、为什么要建立规范
二、规范的适用范围
三、如何建立规范
1 利于多人协作，提率
2 增强一致性，塑造品牌感
制作和遵循设计规范，能够保证整个产品的交互效果和视觉风格、乃至文案的统一性，提升用户的体验。
3 减少冗余内容，方便维护和更新
同类内容使用一样的组件，能够降低输出的内容量，减少冗余的控件和代码。同时也便于维护，在迭代时进行统一的更新和应用。
4 利于工作交接
方便设计团队和其他团队交接，如果团队有人员变动，也方便后续入职的同事能够通过规范迅速熟悉产品，快速上手。
前面的文章我提到过，如果产品处于启动期的话，这个时候最重要的事情是圈到第一波用户，让自己活下去。在这个阶段产品会频繁的改版、验证，迭代非常快，整个团队可能都处于拼命加班的状态。在这种情况下做设计规范文档显然事倍功半，一个是浪费人力资源，另外就算做了，在频繁更新的背景下也很难去执行。
因此设计规范文档更适合于那些跨越0-1阶段的产品，这个时候产品已经用有了一定的用户，团队也会扩张。这个时候我们可以选择制作基础的设计规范，比如栅格、配色、字体、图标规范等等。对于成熟期的产品来说，大版本更新的周期是非常长的，这个阶段通常会制作更为详细的设计指南、设计原则、do & don’t、品牌书、图标手册等等。
电商类的产品对于大家来说都是比较熟悉的，就算不从事这个方面，日常使用也会很频繁，所以此次案例我们以下面这个电商APP作为示范。
做规范时通常会有这两种情况：
1、不打算进行大版本更新的产品
对于小版本迭代的产品来说，建立规范只需要在sketch里把所有设计稿进行归拢和分类。直接根据现有的稿子梳理出规范，再对不符合规范的文件进行调整即可。
2、新版本 新规范
而对于需要做新版本并且建立新版本规范的产品来说，在做设计稿之前，我们就需要先统一一些基础的内容，比如颜色、字体、栅格等等，然后在设计过程中去制作KIT、对基础的规范进行补充。
1 制定统一的栅格系统
因为现在都是一稿适配多端，所以首先需要确定设计的基准尺寸，是基于iphone8？还是iphone 8P？或者1080*1920等等……每个公司设计稿的基准都不一样，我们是以一倍图为基准进行设计的，所以我这里的基准尺寸就是375*667，单位为pt。
栅格一种情况是制定网格系统，网格系统的话首先要制定最小的设计单位，比如淘宝的最小单位是3，掌阅的最小单位是4，airbnb的最小单位是6……定好最小设计单位之后，界面中所有间距采用最小单位的倍数。
假定我们最小单位4的网格，排版时横向和纵向的间距都是4的倍数，比如8、12、24。
第二种情况是可以直接建立横向栅格系统，常用的是12栅格，12栅格比较好的地方是能够同时被2、3、4整除，因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化，是不需要这么复杂的栅格的，可以根据需求设置6、4甚至2栅格等等。
2 色彩规范
色彩规范主要表明色彩的色值和使用范围，一般会从品牌色、辅助色、基础色、状态用色等等。如下图所示。
如果产品常用到渐变的话，需要注明渐变的角度以及渐变色的色值。包括产品如果有夜间模式的话，要额外注明日间和夜间模式下各个颜色的对应色值。当然这里的夜间模式说的是真·夜间，而不是微博那种直接加一个黑色透明度蒙层的伪·夜间。
额外提一句，重要内容和正文内容要保证文本的可识别度，WCAG指南中指出，文本和背景色的对比度需要达到3：1。大家可以通过
https://webaim.org/resources/contrastchecker/ 的颜色对比检查器来核对颜色。我这里的品牌色和强调色对比度为3：1和6.3：1，而辅助颜色（比如标签）的对比度则在2-3之间。
3 字体
字体规范最需要注意的是提取出各个场景下需要用的字体和字号。
需要注意的是，要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。
4 图标
通常来说图标分为两种，功能性图标和展示性图标。
功能性图标是为了引导用户理解和操作，需要表现和简介，方便用户识别其含义。功能性图标常规状态下为无彩色。
展示性图标通常为页面入口，会有更多形状、颜色、质感的表达，吸引用户的注意力和点击欲望，强调差异性，比如各种品类区的图标、徽章、等级图标等等。
图标规范通常来说会先定一些基础尺寸，梳理好各个页面的图标尺寸，进行整合，最后确定好几个基础尺寸，比如我这里的基础尺寸是4个。功能层级一致的图标尺寸要一致。
为了保证不同形状的图标在视觉上保持大小一致，会制作一个图标的基础制作说明。制作说明里会统一图标的圆角、描边的粗细；如果是涉及到展示性图标的话，还会有图标的视角选择、配色的选择、以及如何表现质感等等等等
5 默认图
电商APP的话有大量的产品图片，所以我们也把默认的占位图样式进行了统一。因为我们这里样式都是一致的，所以采用了统一的规范，如果有多种默认样式，或者有其他类型的占位图，需要分别进行说明。
页面组件通常包括导航栏、工具栏、弹框、列表、卡片、空状态等等，按照原子设计理念来说，还可以把组件拆分为原子、分子等更小的基础设计组件，比如角标、标签、按钮、图像、优惠券、选择器、进度指示器等等
页面组件除了梳理出规范之外，通常会整理成一整套UI KIT，保存为sketch文件日常拖拽使用，或者导入为Libraries直接调用。当然，也可以直接在KIT上备注出规范和注意事项，具体输出什么格式这个看团队的需求即可。
因为组件部分是一个比较庞大的内容，需要根据具体产品
1按钮
按钮一般有悬浮按钮、填充按钮、线框按钮和文本按钮等类型。其中悬浮按钮具有最高的优先级，属于强引导型按钮。
按钮通常会有三种状态，常规状态、点击状态和不可用状态。因此在规范中需要标明按钮在这三种状态下的样式，比如颜色、投影、圆角、文字大小等等
除此以外，也可能会有加载状态，也就是在点击按钮后，如果有1S以上的数据延迟，通常会考虑触发按钮的加载状态。加载状态的按钮样式为按钮上显示进度指示器。
2 导航
对现有页面的导航进行收拢和分类，比如我这里分类为常规标题样式、标签样式、搜索框样式、无标题样式、字母导航……
标题需要注意文字的极限值，ICON尺寸和位置的话要考虑最小可点击区域，我这里icon的尺寸设置为24pt，但是热区是44pt，所以要注意间距的设置，热区不能重叠。
3 标签
标签通常有多个使用场景，我们可以对标签进行分组，比如运营类标签、内容属性标签、筛选标签等等
然后对每类的标签统一样式、文字内边距以及说明适用场景。
4 弹窗
弹窗是为了提示和通知用户而位于页面内容之上的一种控件。它是引导用户专注于某一项任务，用户可以通过操作来关闭弹框。弹框包含模态（对话框、操作菜单）和非模态（toast、 snake bar等）两种形式。
模态弹窗需要定义蒙层的样式（颜色、透明度），以及弹框内的文字说明和按钮。
我这里拿一个对话框的规范进行举例，这是一个无ICON的双按钮对话框，因此在这里我们需要说明标题、正文文本、按钮以及背景遮罩的信息，还有字号、行距、文字极限值、文字色、按钮的状态等等……
除此之外，组件类的规范可以配上常用案例、don’t&do，会更方便团队人员理解，防止错误状况。
5 列表
列表是由多个等宽的行组成的、按照一定规律排列的连续条目。列表在一些资讯类产品里会有更多的组合形式。我这款产品里用到的列表主要是单行和双行列表，那么我们就整理出对应的列表类型和需要说明的事项。
写这篇文的初衷，是因为从去年底我建立公众号，并且在站酷发表了一些文章，得到了很多人的认可。很多粉丝私信我各种问题，陆续有人问我设计规范怎么做、交互规范什么样之类的问题。但是公司内部的文件确实没有办法公开分享，所以我就想说，那不如专门写一篇文章详细教大家制作移动UI设计规范吧。
这篇的基础部分我做的比较详细，组件部分写的有些概括，主要是因为组件部分不是通用的，要根据自己的稿子进行整理和归纳，归纳好之后做好标注和规范说明即可，这部分是一个罗列的内容，所以就不必展开了……
当然还有很多内容没有展开说，比如在Sketch里把KIT制作成Libraries统一使用，但是我想作为一篇设计规范入门教程目前应该足够了，更多的内容我在后续开新文去补充吧。
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则，是由Ollie Johnston和Frank Thomas在他们的书《The Illusion of Life》中提出来的观点（译者注：这本书在豆瓣的评分有9.3分，值得一看）。这些原则最初是用来为动画片这种传统的形式设计的，然而，这些原则也同样适用于UI设计。所以，我想在这里做一个有趣的尝试，看能否将这些动画原则联系起来。
在动画中，挤压和拉伸代表了物体的重力，质量，重量和灵活性。举例来说，当一个弹球在它撞击地面时会发生形态变化，就是挤压和拉伸。
在界面中，挤压和拉伸很容易就联想到按钮。当一个按钮被按下时，就可以理解为受到了挤压，通过控制按钮的挤压和拉伸，我们可以很轻易的做好一个按钮的交互动画。除了按钮之外，这种原则也可以应用于UI中的任何交互元素上。
按钮在交互时的挤压和拉伸
挤压和拉伸被应用于侧边栏
让观众能预先知道接下来将会发生什么，它是先于下一步会发生的动作。举例来说，迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳、正在跑步的人要停止跑步前会逐渐变慢步伐等等。
在界面中，悬停状态就是很好的例子。当我们把鼠标悬停在元素上时，元素会提供反馈，表明它是可以点击的，并且在点击时，又会有一些别的反馈。
悬停的交互通常会暗示这个按钮是可以点的
在有水平滚动界面里，通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子，因为它是在告知用户下一步的一些信息。
在传统动画中，时间会决定关键帧的绘制方式。帧数越多，动画就越流畅，同时也更慢，时间能够给动画赋予情绪和性格。
时间的节奏感是任何动画的基础，速度在元素编排中起着非常重要的作用。速度太慢，用户会不耐烦，速度太快，用户又会错过一些内容。一般来说，大多数UI动画在200-600ms之间，其中悬停和反馈交互时长大约为300ms，精细的转场动画大约在500ms。也可以去参考谷歌的动画规范（https://material.io/design/motion/speed.html#duration），里面非常详细的解释了每种动画类型的持续时间。
一些设计系统，如Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把运动的节奏感视为一个很重要的方面，并为每种类型的过渡都制定了严格的规范。
右边的过渡动画显得太过于漫长，繁琐。
在现实世界中，大多数物体都遵循着缓动运动规律。也就是说，物体的运动并不会瞬间开始或瞬间结束，就像一个物体自由落体，也是一开始很慢后面才变会变快。
左侧的卡片是没有缓动的，右侧的是带有缓动的，看起来会自然很多。
给UI中的元素加上缓动会让它看起来更加自然，缓动和节奏感都是可以有效的提升动画的品质。
舞台中的表演需要合适的编排才会精彩。也就是说，对象在场景中如何摆放，每个动画又如何出现，关乎演出的质量。通过这种编排，能够将注意力引向最重要的角色。
在界面中，呈现方式能够决定元素的位置，以及在交互时，它应该如何编排才能将用户的注意力引向预期的元素。
比如现在有一个基于兴趣的音乐APP，对这个应用来说，最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此，有必要将类似的操作与其他元素分开编排，有目的的引导用户。
一个从高处抛出的小球，运动轨迹会做抛物线轨迹运动，弧线能使物体的运动更加自然。
在界面中，沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时，多尝试使用弧线轨迹。
通过对比，能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。
在动画中，次要动作能够起到烘托主要动作，比如动画中的角色在走路时，头部的晃动就是次要动作，却能够让角色行走显得更加自然。
在界面中，次要操作能够起到强化关键动作，当元素需要向用户提供反馈时，这个方法非常管用。所有的微交互都是基于这个附属动作原理。
按钮边上的粒子效果强化了主按钮的点击效果
场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。
在界面中，重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的FAB按钮就是一个很好的例子，FAB按钮在不动的时候也比较能引起注意，因为它通常会带有比较鲜明的颜色，并且是独立悬浮在界面元素之上的。当它被点击时，FAB的动画被放大，把整个界面都占满，使得它完全占据用户的注意力。
FAB 夸张的交互形式
对于支付这么重要功能的按钮，通过夸张的动效引起用户的注意
想象一只兔子从高处跳下来，当兔子开始起跳时，它的耳朵动作会与身体动作发生错位。然后当它着陆时，它的身体停下来了，但是耳朵还在动。前者称之为跟随动作，后者被称为重叠动作。其原理说的就是：没有任何一种物体会突然停止，物体的运动是一个部分接着另一个部分的。
在界面中，可以使元素在停止之前超过它们原本的位置，使得元素运动更加自然。（译者注：大白话就是我们常说的回弹效果。）
界面有一定的回弹，会显得更加自然。
当界面滚动时，文字会跟随图片的运动，图片与文字以不同的速度运动会更加自然。（译者注：像是被拖着走的那种感觉）
界面中的每一次交互都必须在适当的场景中精心设计，让整个体验更具沉静感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。
这些原则正在以不同的形式应用于当今的数字产品中，值得敬畏的是，30年前设计的一套规则到今天仍然适用。
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
现在市面上的汽车大部分都是过时的，没有吸引力的用户界面，正因为如此，很多设计师都在思考未来的汽车用户界面将会如何改善我们的驾驶体验。今天这篇译文，一起来学习特斯拉和Apple Carplay 是怎么设计的！
汽车行业似乎每天都有着新的发展。很多证据都表明在接下来的20年里我们将会看到比上个世纪都要剧烈的变革。因此，顶尖的数字设计师们应该把重点放在对这个行业的关注。那么，到底什么才是车辆用户界面的未来？它能从根本上改变我们和汽车之间的关系么？
下面是我收集的一些由全世界不同的设计师设计的美丽和未来的汽车抬头显示器、用户界面交互、第三方app控制器。这些设计想法，有一些是真实存在的，有一些还正在发展中。
它为什么会让人震惊？
当你想确定你是否已经锁好车，关上灯，或者把你的车钥匙交给刚考完驾照的小屁孩的时候，你是否觉得自己是个偏执狂？
这个移动app可以让你在不离开座位的时候检查这一切，有一个柴油混合动力车？你甚至可以在你吃早餐的时候启动引擎。直观的动画会反馈你这个动作是否已经完成。
它为什么会让人震惊？
这个用户界面看起来是一个用肌肉记忆和手势驱动的通用控制模型，不同数目的手指可以触发不同事件，你可以通过iPad面板，无线鼠标等控制它。你可以通过动作来控制数值的大小等等。
这个用户界面去掉了所有需要用户记忆的小控件和视觉元素，从而你可以使用相同的手势或者它的变体，来完成多个不同种类的任务。
你可以在这里查看整个案例研究：A New Car UI
它为什么会让人震惊？
汽车将会变得更加的智能，为我们的公共场所腾出更多的空间，并且汽车的功能也将变得越来越互相关联起来。随着这些发展，数据在我们面前将会变得势不可挡，试想一下不久之前，我们的手机和其它东西一样还是一个单一功能的设备。我们在我们看到什么和如何看上有我们的控制权，它应该变得更加自然和方便使用。人工智能和机器学习将会采取直觉控制。这个由Bureau Oberhaeuser制作的原型让我们提前看到了这一切的到来。
你可以在这里查看整个案例研究：Behance
它为什么会让人震惊？
当汽车所有的零部件都变成电子系统时，你想拿起扳手就能发现问题变得越来越不可能了。这个移动app原型试图用一种你能理解的语言去描述汽车当前的健康状况，让你知道你是否有必要在开启你的海岸线之旅前修一下它。
它为什么会让人震惊？
当进行轮胎检查时，这个界面将会告诉你每个轮胎的压力范围并且告诉你它们的极限在哪里。这个用户界面提供了如此重要的反馈，我觉得它应该被纳入常用标准中去。
它为什么会让人震惊？
不用说大家都知道司机应该保持视线在路上，但是现在的手机导航都需要司机把注意力来回切换在手机屏幕和路面之间，这个叫Hudway的app把你的第二块屏幕跟挡风玻璃很好的结合了起来。你面前的那块挡风玻璃很有可能就是未来的显示界面。
你可以在这里查看整个案例研究：Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]
它为什么会让人震惊？
这个用户界面对于勇敢的探险家来说非常完美，如果你想快速的知道你周围有什么，这个用户界面可以让你在有限的路线里来一段自发的旅行。
它为什么会让人震惊？
每个人都在关注它的到来，想都不要想，如果你已经有了一堆苹果的产品，你也会在你的汽车上装上它的。Apple Carplay将会是下一代的第二块屏幕。
它为什么会让人震惊？
没有什么能和发动引擎点亮仪表，汽车轰鸣犹如巡游乐队组成的和旋一样。身边的一切，声音和延迟的视觉互动，都给与你感官的反馈。仪表会通过动画直观的告诉你，合适讲切入下个转弯，油量是否变低，以及胎压是否过低。
然而，用数字型号在方方面面代替模拟型号也会开始令人担忧，因为无法人工手动介入账款车子，当保险丝熔断，或者电子仪器故障时，汽车很快会失控。
它为什么会让人震惊？
当可穿戴设备成为我们设备的一部分时，它很明显会帮助我们的手持设备分担掉一部分的操作功能。这个原型很好的说明了它是如何将这一切展示到手腕上来的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
想必很多前辈都会告诉大家，提高设计水平，最重要的一点就是多看多练多想。这句话，没有任何毛病。
刚入门的同学肯定都会一直这样做。特别是在“多看”方面，很热衷于去收集各种各样不同的站点，譬如自己碰到最多的问题就是：“米田，你有什么好的设计网站推荐给我们？”这样的问题，我每周都会被问到数十次之多。
但是当东西真的变得很多的时候，往往会产生很严重的问题。不知道从哪里开始找起。特别是关于图片方面的问题，这点更为严重。因为图片能清楚描述的可能性很小，譬如一张一年前看过的海报，让你再次清楚描述它是很难的。
所以这里就会引出一个话题，如何让我们辛辛苦苦收集的图片。能更好的使用，这是每个设计师必须要面对的问题。
要了解这个问题，最重要的一点是，知道什么东西是适合的。
图片整理术，合适是什么？
举个简单的例子吧。图中的这位人物叫卢冠廷，填词人。或许很多人对这个名字比较陌生，没关系。你肯定听过他唱的歌。
是以下这首一生所爱。大话西游里的主题曲，相信华人都听过他唱的这首歌曲。
那么经典的一首歌，创作时间需要多久呢？
答案是一个晚上。你的眼睛没看错，真的就是一个晚上创作出来的。这是我在一次线下分享会的时候。问过卢冠廷先生这个问题，他的回答就是这样。
那么他是怎么做到的呢？相信每一个人都特别好奇。
和作曲一样。好的设计创意也不一定需要长时间去思考。很多时候，创意来源于洗澡的时候。相反你花越多时间去思考，却越想不出来。
这就是做灵感创意的魅力所在。
回到一生所爱这首歌曲的创作过程，卢冠廷先生是怎么做到在一晚时间，创作出经典的歌词呢？
答案就是。答案就是，答案就是，画重点了。
将他听过关于爱情最好的十首音，一首一首反复听。
抽取其中的精华，变成这首歌的主要内容。为什么要选取十首最好的？因为哪怕你创造出来的作品是在这些歌曲里最差的那一首，那也是从最好的结果内得到的最差答案。比单纯自己凭空想象，效果要好很多。
那么对于设计同样如此。我们不是需要填词，但是要做设计，参考是必不可少的内容。
好的参考流程，找到合适的关键字很重要。你就要采用观看，丢弃和应用这三步将看到的东西，消化吸收。
持续建造你的灵感水库
为了让我们持续拥有最好的灵感，这时候，就需要建造灵感水库。
一般建造水库来说。最重要的就是这四点
● 第一、找到坐标（建造地）。
● 第二、投入鱼苗（商品）。
● 第三，保持它的时效性，常常要去维修这个水库（定期上班）。
● 第四、每条鱼苗都标记好（记账）。
当然，这是比较形象的比喻，其实就是要建立属于自己的图库。坐标系所用的工具。投入的鱼苗是图片。时效指的是定期去删减图片。标记为每张图片打上标签。
坐标
最理想的。图库工具应该有这样一个功能，就能找到类似的图片。
这不是很复杂的技术，不过却很有用。有这个功能的工具，能够一下子推荐相似风格的作品给我们参考，这大大提高了工作效率。
因为这个是图片类的。整理工具。
三常用的工具如下图。
● 花瓣
● Eagle
其中最理想的图库工具是Pinterest。它的相关度，联想功能是最强大。简单来说，你能用最短的时间找到。最多相似的图。
对比花瓣。就明白其中的差异。
同样是一张类似的图。Pinterest找到的图片是比较接近的风格，而花瓣找到的图片风格就比较迥异了。
你或许会说。你这两个工具我都不一定用到，我常常用的只是百度。那直接通过百度搜到的图片，能有类似的效果吗？
但饶可以，所有的搜索引擎都有一个功能叫做“以图搜图”。
以谷歌浏览器为例吧，就在浏览器的红色箭头部分上传你需要寻找的图片，它就会在显示结果里自动推荐相似的图片。
得到的结果类似这样。
一般谷歌浏览器，点击图片右键的时候。都能发现有一种叫做在Google搜索相关图片，这也是能达到相同的效果。
嗯，或许你不一定能访问谷歌搜索，不过以下推荐的这些站点同样能实现相同的效果。
有兴趣可以去看看。
投入
好了，你要储备自己私人图库的工具后，接着就是要将我们看到的图片一张张放进去。找到坐标，修建水库后，你需要定期定量的投入鱼苗，不然这个水库也只是空置的水库，是没有任何作用的。
举个简单的例子，如何保持庭院的整洁？肯定是需要时时打扫。这是日式庭院里面很重要的组成部分。定期的清扫落叶，保持整个庭院是处于相对空灵的状态。
时效
同样我们的水库。也是需要进行这样的一个修缮工作。一般我自己会将其分为性和临时性两种项目大的分类。
● 性：会收藏一些最常用的，而且以后肯定能用到的一些图片素材。
● 临时性：会根据每个项目收集有针对性的素材进行放置，可能项目结束之后就会进行封挡或直接删除处理。
网络端整理：
通过线上工具，比如chrome花瓣插件通过一个“采集到花瓣”的功能，就能将网络上的图片直接转载到相应的工具里。
本地端：
可能有些项目不太想被人知道的话，本地整理很不错的方法。譬如这里用到的工具是Eagle。它的分类功能很强大，可以通过颜色、大小、类型进行筛选。
标记
为什么要修建自己的水库，即整理图库呢？
最终目标跟前面那两课讲的很类似，就是要在未来的时候，能通过模糊搜索找到快速相对应的图片。如果你找不到，那其实整理图库意义不大了。
这就好比一个很庞大的图书馆里面没有任何分类系统的话，你肯定是找不到你需要的东西。
案例：一小时10个设计参考
讲了比较这么多内容，我觉得应该举一个案例，会更容易理解。
这种方法对快速想到多种关键字很有用，因为图片往往需要通过关键字才能找到。这种方法叫做一小时10个设计参考。当然找到十个参考时间可以更短，最快只需要十分钟就可以了。
比如我们要做一款产品。希望薄荷糖去吸引上班族购买，最终设计的成果是一条广告片或者平面海报。
首先如果按我们普通的思考模型。大概是这样的，你会思考出一堆薄荷糖的作用或者营销方案。这种方法不好么？当然不是，只是效率有点低。
现在介绍的办法就是希望通过技巧，能快速想到十个甚至100个不同的创意方向（关键字）。这有什么用呢？就对于最后的在临时项目里面寻找相对应的参考图片，就会有非常大的帮助。
简单来说，先在左边的三角形内写下与主题相关的资讯。可以理解为，跟口香糖这个产品有关系的感受，都可以放在这个三角形里呈现。
随后在右边的三角形内写出目标客户群喜欢的东西。就是年轻的白领，他们最喜欢的是什么东西？可能有以下的这些关键词。
最终我们要做的就是将左侧的三角形的关键字与右侧三角形的关键字进行随机的拼合。
就是这么一个简单的过程，就能形成很多看上去特别酷炫的关键词。
● 清凉的音乐
● 变态的重金属
● 头发竖起来的温柔
● 甜甜的色眯眯
● 透心凉的帅气
我们循着这些酷炫的关键字去寻找相对应的素材参考，就完成了我们最基础的灵感构思阶段，得到以上这些图片内容。
很多朋友都在问一个问题。老觉得自己构思设计的时候感觉没有灵感，不知道怎么提高。很重要的原因是看的东西不够，或者看的东西太过单一。
解决办法很简单，当你每天去看100-200张设计参考图片的时候，再来回答这个问题，相信不用我告诉你答案，你自己也有自己的判断了。
这百张图并不是来源于单一的网站，这就需要你根据自身习惯。筛选过程，与每个人的购物习惯一样，没有一个完全的标准的答案。试试这节课交给大家的创意思考法。做延伸思考时很有帮助。
最后，当看到足够多的时候。就不会太依赖图库，进而能够将不同的元素进行拆解，形成属于自己的原创东西。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在过去几年当中，插画开始以一种坚挺的姿势，站在设计趋势的最前列。不止是原本身处各个领域的画手和插画师开始越来越受追捧，而且连网页、UI和动效设计师都纷纷学习插画设计。当然，更显著的变化，是插画在网页和UI中的使用越来越多，越来越频繁，甚至越来越多样。
多年来，插画被广泛地运用在杂志、图书、报纸、海报、传单等不同的传统载体之上，新的工具和技术使得它更加轻松地植根于数字化媒体当中。
作为设计中，最具有表现力的元素，一张插画所传递的信息比文字更多更丰富。在UI和网页中，使用插画来辅助传达信息，无疑更加直接到位。而插画的可定制性之强，犹在图片之上。
插画在UI界面中的运用，可以说相当广泛了，它更清晰，更时尚，也可以更加精准，甚至更有表现力，为什么不用呢？就适用范畴而言，我们可以观察到，它可以运用到这些地方：
页面主题图
网页首图和Banner
吉祥物和形象插画
博客文章配图
新用户引导教程
工具提示
奖励页面和成就页面
游戏化设计的页面
通知和系统消息
聊天表情
讲故事的辅助配图
信息图
营销和广告图
图标和装饰性内容
社交媒体页面
支持性内容的页面
插画的适用范围之广，这些总结出来的使用场景，并不是全部。插画本身的属性很有意思，它连接了设计，作为内容呈现，还带着明显的艺术化的属性。今天的文章，我们总结一下在设计中使用插画的10个理由和注意事项。
1. 插画是设计的原创性和艺术性的基础
无论是印刷品、品牌设计还是UI界面，更加风格化的插画能够将不同的风格和创意加入其中，在激烈的竞争中更容易因此脱颖而出。留下用户才有转化。
同样的，在博客、新闻和Banner 中使用插画，也是看准了插画可以根据内容进行深度定制的优势，这种微调能让内容更加统一一致，更加符合产品目标，借助色彩、角色、环境甚至暗藏的隐喻，来吸引特定的用户。
2. 插画是视觉触发器，瞬间传达大量信息
我们常说「一图胜千言」不是没有道理的。人的视觉感知能力很强，看到图片的一瞬间，也许还没有来得及进行逻辑思考，但是大脑已经接收到大量的信息和内容。
心理学研究表明，人类只需要大概1/10秒就可以感知到场景中绝大多数的元素和基本视觉信息。
视觉信息可以更快传递到大脑，而重要的信息，人类也通常会被固化为视觉图像，而非文本化的记忆。
文本需要依托可读性设计，而图片和插画则会被直接识别。
图片和插画更容易打破文化和语言隔阂，传递内容含义。
对于视障用户、阅读障碍用户和儿童，图片插画更容易被理解。
3. 插画是标题和文本的重要支撑
虽然图片一瞬间传递的信息很多，但是图片在很多时候是无法提供精准而详细的内容。用户依然需要文本来呈现清晰而可以被阅读和记录的内容，所以文本依然是不可或缺的。在另外一方面，文本和标题已经具备的情况下，经过定制的插画能够辅助用户理解，更清晰的记忆。
在很多特定的领域，举个例子比如说金融，插画能够借助色彩、图形和形象来讲述故事，让用户更清晰的理解复杂的金融功能，甚至强化信任感，而这是文本所不具备的。插画能带来强烈的情感连接。
4. 插画更适宜呈现故事
故事是最令人难忘的内容，剧情的走向和起承转合会给人留下深刻的印象。而插画则以清晰的形象将文字和意象勾连起来，无论是在网页、UI设计还是内容和体验上，都有着足够突出的体现。
营造氛围，渲染情绪，描摹环境，呈现角色，插画让故事更加鲜活、易于理解。在内容制造上，有着难以替代的作用。
5. 插画独有的情感吸引力
人是情感动物，看似理性的皮囊之下，几乎每个决定都是在情感和情绪的驱动下完成的。如果某个设计除了能够帮你达成某个目标，还能让你感到愉悦，会心一笑，那么通常下一步就是将它收藏起来并且分享给朋友。而在诸多设计因素当中，插画在撬动用户情绪这一点上，有着无与伦比的效用——从线条、色彩到面部表情和曲线和动效，都在竭尽全力地为你阐述故事，营造氛围，将你拉到故事和场景当中去。
6. 插画赋予设计以美学价值，更容易被接受
即使所有人都在分析和争论产品的可用性和易用性，大家在对美的追求上，始终保持着一致的态度。一个设计是否具备可取性，是否能够通过甲方、客户和实际用户，是每个设计人都需要面对，都力求做到最好的事情。精心设计的插画在美学和风格上更加扎实，风格化的设计不弱于现成设计素材所提供的价值。
7. 插画能让品牌识别度更高
和文本相比，插画的视觉化属性无疑是更强的。图片插画所提供的定制化内容能够从各个方面来贴合品牌的需求，更加到位地表达品牌所需呈现的信息。这也使得插画不仅仅在品牌宣传的时候，运用在广告、海报等显而易见的地方，而且也成了品牌 APP 中新用户引导和教程中必不可少的元素。
就像 Perfect Recipes 这个应用的新用户引导屏中，就借助插画来呈现。而 Toonie 这个可爱的闹钟应用当中，甚至借助游戏化的设计，集成了大量有趣的表情和贴纸，当然，它们都是使用定制化的插画来呈现的。
8. 数字插画还能强化交互，应用在短视频中
数字化的好处就在这里，通过不同的数字软件，合理的处理之后，不仅能够变成动态的，运用于视频当中，还能够作为微交互，强化产品的整体体验。
一旦涉及到的动效和短视频，整个数字插画就开始具备更多的可能性了，不同的动效能带来截然不同的感觉和体验，更不用说这种玩法正贴合时下的流行趋势。
Whizzly 这个动态图标就是基于插画，给一个创意分享社区所准备的。
9. 插画的独特性来自于其中的隐喻和引人入胜的视觉
和艺术一样，设计中同样需要借助隐喻来传达一些相对更有趣、更深刻、更有意思的信息。插画的独特性也是借此来构成，包含的隐喻使得其中的价值更加复合，值得反复咂摸，而不是一眼就可以完全看穿。
在这个约会应用的网页当中，插画无疑传递出了多重的信息，暗含的隐喻告知了用户产品的功能和属性。而下面这幅插画则是为一篇如何找到原创风格的文章所准备的，图中的金鱼指代的则是难以被抓住的灵感和风格。
10. 插画让用户可以更快理解和操作
无论是图标还是大幅的插画，都能帮助用户理解，更加直观地知道要看哪里，要做什么。面对如今的数字界面，用户的注意力持续的时间越来越短，而插画则让用户更快、更直接地获取信息，并且决策下一步要做什么。如果插画或者图标内容不能被用户一眼看出来，那么用户就只能借助文本标签来了解功能是什么。设计师可以通过测试来测试图标和插画的可用性和识别度。
当然，插画的设计是没有门槛的，在设计的时候，要求也是比较高的。在使用和设计插画的时候，需要考虑以下的几个方面：
目标受众（身体能力，年龄，文化背景，教育水平等）
产品的使用环境
产品和内容的在全球范围内和当地的传播水平
所选图形的隐喻以及是否容易被识别
插画是否会让人分心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
现在，当你打开 Instagram、Airbnb、Apple Music、Twitter、Dropbox 这些应用的时候，乍一看很难区分清楚彼此的区别：带有圆润边缘、现代感极强的非衬线字体大标题，极简的黑白色调为主的界面，大量的留白，少量的提亮色甚至没有提亮色。
这种现代的界面设计风格，乍一看很简陋。而具有讽刺意味的地方在于，它们出自于最大的公司，是也是受众最广的产品，在视觉观感上，让人觉得几乎没有被设计过。
Instagram 的深蓝的页头怎么变了？Lyft 中经典的亮粉色元素怎么不见了？这些有着深厚底蕴的品牌是否已经放弃了标识性的设计？又或者是它们开始共享相同的模板了？
问题在于，这不止是 Instagram 和 Lyft 这样了，有迹象表明，Google 这样的大厂也有类似的倾向。比如Gmail 中标志性的红色大幅度减少，白色的背景，白色的交互按钮，白色的输入框，其他的Ui控件都很精准到位地保持了这种简约而一致的风格。
身在硅谷的大型企业，互相之间的借鉴学习是常有的事儿，但是至少保持了足够的差异化。但是现在的局面则不同，这种高度趋同的趋势，让整个事情看起来非常反直觉。
到底是怎么回事？
好吧，我们认为产品设计的一致性是好事情，这里有几个值得注意的原因。
让用户更加关注内容和结果
对于大量APP 的视觉和信息疲劳是谁都无法忽略的真实存在，绝大多数人已经厌倦了在太多应用之间来回切换，每一次下载新的应用都要花费大量的时间来重新了解界面的设计
调研表明，超过四分之一的应用，在首次下载之后，用户只用过一次就卸载了。绝大多数人日常使用的APP 其实是非常固定的，它们中绝大部分，核心在于帮助人们节省时间和金钱（或者兼而有之），让生活更轻松。
对，让生活更轻松。而这需要数字产品具备良好的一致性，而设计师也越来越多地将注意力投注在这一个点上。
正如同我们熟知的UX设计专家唐纳德·诺曼所说的：「很多用户界面所存在的真正的问题，在于它仅仅只是用户界面。很多用户界面的设计阻碍了功能。我想努力达成某个目标，而不是将精力耗费在界面上。」
更一致意味着更好的可用性
所有的电商网站基本上都遵循着类似的交互逻辑和视觉元素，你不会搞错购物车的图标，也不会错过任何环节。这些约定俗成的惯例，意味着用户不再需要重新学习在某个新的平台上购物，降低学习成本。
绝大多数约定俗成的规则和流程都被用户不自觉地印刻在大脑中，成为一种自然的习惯，而独特的设计，截然不同的规则，则常常会成为习惯以外的东西，引起混乱，让初次上手的用户感到受挫和沮丧。
以 Snapchat 为例，今年早些时候曾经发布过一个版本，其中包含有一些比较有争议的设计。这个版本当中，被重新修改过的导航和几乎随意堆砌的功能模块，让用户活跃度几乎立刻下降了73%，甚至直接导致了用户流失和股票下跌。
正如同 Snapchat 所证明的那样，新颖的设计是有风险的。一致的设计，确实有一定的机率降低用户在面对新兴事物时候的不安感。
设计不应止步于视觉
明白用户的需求和意图，在不断探索解决方案的过程中，才能真正创造出伟大的用户体验。相比于独特的外观，差异化的体验是更有价值的。
当然，样式和风格很重要，它们也确实会影响到体验，当人们感知到有视觉吸引力的设计的时候，即使有一些混乱和无效的设计，也是可以忍受的。
但是设计师的精力是有限的，用户的也是如此，相比于在色彩和花哨的动画上反复尝试，帮助用户找到更好完成任务的方式，无疑更有价值。设计好的产品，最终能够给用户带来价值的东西，是需要看似无限的测试和迭代，来向着可用和易用的产品更进一步。
奥巴马、乔布斯和扎克伯格每天穿着相同的衣服，他们的衣服和这种行为同样出名。心理学家将这种现象称之为「决策疲劳」，它们每天需要用有限的能量来做大量的决定，而为了给更重要的事情留下足够的精力，他们穿相对固定的衣服，就可以省心很多。
设计师面对的是同样的局面。随着界面设计的趋同化，设计师可以花费更少的时间来决定用什么色彩，而可以将更多的精力投注在更为深入的设计当中，比如更有效的布局，反思为什么要这样设计，等等。
趋同的设计是否会扼杀创造力
我想你一定在思考这种设计趋势之下的缺点，比如这样的设计是否会显得缺乏创新，甚至会扼杀创造力。老实说，我觉得这样的影响是存在的。
但是，即使每个产品设计师都参与到极简主义设计的运动当中来，仍然有大量的设计工作有待完成，设计的范畴太广泛了，需要设计的东西远超用户界面本身。
事实上，界面中的趋同化在近期看来是颇为有益的，对于长期的影响也是非常巨大的。
首先，最重要的一点，VR、AR 和人工智能的逐渐普及，用户和数字设备之间的互动可能会变得更加隐形，小屏幕同样在普及，手势操作将会成为最基本的交互语言，我们将会越来越多地参与到无屏幕的交互当中去。
即使我们在iPhone 上，人工智能加持下的 Siri 越来越好用，越来越多的用户开始习惯使用类似的语音助手来创建待办事项，选择音乐，发送消息，查看天气，简单的功能它们已经可以很好地完成了，复杂的功能和需求也会通过机器学习逐步习惯、越做越好。
在诸如人工智能、机器学习这样相对高深的概念背后，是软硬件正在更好地帮助人类完成任务，做对事情。设计师的角色需要更进一步，更深入地参与到产品当中。
如果设计师要改进 Siri 的设计，那么要做的工作远不止设计界面，已经有很多相关领域的专家讨论过这个问题了，设计师所需要了解、掌控的维度越来越多，设计正在变得更加深入和复杂。更通俗的讲，设计师需要考虑新的方式，更加富有创造力的策略来吸引用户的注意力，甚至要深入到情感和感知当中去，而不是单纯的视觉。
如果我们仅仅将优秀的设计局限于我们在屏幕上看到的内容，未来更多的可能性，可能就止步于此了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
