如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Loading动画，在现在的设计中已经是一个必须要设计的系统元素，它能减缓用户等待焦虑的心态，也能用来作为品牌透传，增加曝光。
那关于loading动画相关知识，我觉得对于设计师来说是有必要去了解的，所以我找到了这篇优秀文章，让大家能够深入了解loading动画，透过现象看本质，学以致用。
图片来源：Domaso
没有人喜欢等待
在用户心目中，优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。
举一个真实的例子：最近我们新发布了一个用户评价的应用，第一个版本并不完美，loading延迟在2-3秒。
你猜怎么着？
很多人认为这3秒是一个故障。在实际开发中，你可能要面对龟速的网络，没有优化的代码，操作时间长或数据处理太多等问题。因此，App的运行速度可能没有用户预期中的那么快。虽然早期用户可能会给你的产品第二次机会，但绝大多数人会立即退出它。
除非你的产品界面对用户的行为提供了明确的即时反馈。刚才发生了什么？是操作错误还是在等待服务器的请求？用户需要等待多长时间才能正常使用这个工具或网站？用户为什么要等待呢?
让我们一起深入了解Loading动画：
1、loading动画的历史由来
2、优秀loading动画所具备的特征
3、细节可以做出精彩
4、简单处理还是精心制作
loading动画的历史由来
对于这种类型的反馈，设计师会使用进度条、loading示意图、预loading、或旋转器。它们向用户解释什么时间发生了什么或正在loading的过程，以减少用户的心理焦虑。
你觉得设计师是从什么时候开始考虑加上这种反馈的？
我很惊讶的看到关于Nielsen Norman的一篇文章，提到响应时间和loading动画是在1993年（参考1985年的资料）：
如果计算机无法提供快速响应，则应该以百分比的形式向用户提供持续反馈。【Myers 1985 论文，“计算机-人机界面百分比进度指标的重要性”】
显示进度的三个主要优点：向用户保证系统没有崩溃且正在处理他们的问题；告诉用户还需要等待多久时间，让用户能腾出时间来做其他的事而不只是干等；甚至可以向用户提供一些可以阅读和查看的内容，减少等待的焦虑。— Jakob Nielsen, on January 1, 1993
自从Web 1.0以来，几乎每个网站都有loading状态，用户可以注意到当页面内容正在loading时，这些Loading动画活跃的身影。
在2007年的时候，网站的Loading形式大概是下面这张图上的样子：
2007年时的Loading
在那个年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）这样的工具来做这些 loading动画。
到了2010年，随着CSS3的迅猛发展，出现了很多教程教大家如何做CSS3动画，也能找到大量的loading 动画预设包。设计师也可以在Ps cs5中做这种loading动画，这个在10年前是非常流行的。
在那时，Loading动画更像是web的专属问题，因为页面loading确实是一个问题。在2010年的时候，很多Flash网页都做了一些很有创意的loading动画：
30个创意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
渐渐地，设计师们开始不满足于简单的进度条和旋转Loading，到2014年-2016年的时候，变得更加关注这块的设计。所以，你能发现更多关于loading教程，免费的Loading设计资源，插件和开源项目。
2016年出现的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
设计趋势和方法已经发生了变化，但向用户提供有效反馈的原则依然需要遵循。
优秀loading动画所具备的特征
在一个完美的世界里，loading动画应该：
尽可能少的显示给用户
如果你的工具或网站工作的足够快，那就是非常完美的。或者至少要使得它们的速度符合用户的预期，显示好看的loading动画只是一个缓兵之计，等待太久了一样会惹恼用户。所以，首先应该是解决内容的loading问题。
给出具体时间
它可以是一条简单的文本信息，告知大致的等待时间，也可以是可视化的图形来表示。总共上传了多少文件？更新需要多少分钟？已经进行到了什么阶段？这些体验上的设计细节都可以给用户预期并减少焦虑。
宇航员数据loadingby Cream M.
告诉用户为什么需要等待
一些应用的loading过程，通常让用户不大容易理解。一个好的Loading动画，应该要告知用户等待的原因以及等待的背后软件正在做什么：
文件获取动画 by Vinoth
让我们说回我的案例，那个反馈工具软件。当我们的等待时间超过1秒时，我们决定给这段等待时间增加一段解释。动画说明应用目前正在处理截图资源，这清晰的表明，我们的工具没有崩溃，它只是正在处理请求：
好的loading动画
让等待的过程不那么让人无聊
可以放一个有趣的动画来吸引人，让用户的眼睛始终保持忙碌。
动画来源：Alex Kunchevsky
减少用户等待时间的心理感知
这与上面提到的一点非常相关，如果你在等待的过程中发现了一些能够吸引用户注意力的东西，那么感觉上时间就会过得更快。它可以是一个引人注目的色彩搭配，有趣的想法，或者是一个什么特别的东西。
蛋糕loading by Pierre Kleinhouse
透传公司品牌形象
如果用户在用你的应用或者网站时会有一段等待时间，为什么不机智的利用好这段时间呢？我不建议仅仅只是为了做loading而做一个loading动画或者去在动画里使用一些心理学技巧。我觉得最好是将品牌的声音融入整个Loading动画中，让它成为一个非常重要的设计细节：
BCG的车票应用动画 by Antonin
细节可以做出精彩
虽然有些人可能会认为Loading只是一个很小的UI细节，但它其实也有许多类型和变化。一般来说，我把loading动画分为几类，进度条，无限循环的loading图和骨架图。
进度条
当可以明确loading时间时使用，进度条可以通过数字或视觉化的形式来表现。
有数字进度的，有时也称为百分比指示符。他们可以简单直接，也可以很有创意，需要对你的用户业务表达更有效：
一个app loading页 by Nguyen Tran
你也可以找到有趣的进度条和循环动画结合的loading图。
Loading动画by Dragonlady
进度条背后的主要思想是显示一个操作将花费多长时间以及目前所处的状态。根据UI需求的不同，进度条也可以是线性的，没有百分比的形式。
想想Gmail，它没有显示进度百分比，但是用户同样可以感觉到加载的进度。下面是两个简单而又创意的例子：
Gamil loading和一个创意loading动画 by Allen Zhang
无限loading动画
当loading的时间是未知的时候来使用，它可以是默认的旋转图，也可以是一些创意动画，显示应用正在做一些事情。
计算loading图标 by Hoang Nguyen
创意性loading动画一样可以与业务紧密相关，并帮助支持品牌发声。请思考下那些应用会使用这种loading动画？
LittlePin Spinner by Daniel Sofinet
无限循环动画要求用户在上传或执行某些操作时等待，但不要求具体需要多久时间，它们可能会非常简单或非常有创意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起来非常有趣，但是你并不想他们永远不停下来。
如你所见，如今的loading动画不仅仅只是一个系统状态的UI元素。
骨架动画
骨架动画展示了loading页面的变化过程，你可以把它理解为开始是一些页面占位图，逐步加载上一些可见的图片，文本和其他内容。
这个词最早出现在Luke Wroblewski 的文章中，Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用户界面中得到了应用。
举个栗子，如果你使用的是网页设计工具Figma，你会在页面顶部看到一个进度条，同时还在逐步loadingUI：首先你会看到占位符，然后才是可用数据：
Figma UI
简单处理还是精心制作
除了这篇文章中所展示的一些优秀案例和Dribbble上的设计概念，在目前大多数应用中，你可能能看到还是一个默认的Loading。
有一段时间，简单的Loading被大众所推崇，因为他们对于性能的影响最小（尤其是对于web）。使用默认的或开源的loading要容易的多，不需要设计师和开发花心思来设计和实现它。
如果你正在开发MVP或者项目的第一个版本，那么使用简单的或者开源的loading动画更符合逻辑。在这个阶段，即使把loading动画做的再怎么有创意，也并不会对你的产品有多么大的帮助，如果它不能解决真正的需求。
一些简单的loading动画案例
有趣的是，在2016-2019年，我们可以看到非常多精心的loading动画。注重细节，日益成熟的设计公司，更好的科技环境，更方便的设计工具，这些都使得loading动画变得更加富有创造性。如果你浏览Dribbble，能找到非常多超赞的Loading动画，所以这也成了展现自己设计能力的一种方式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在设计的时候，各种视觉要素以有序的方式排列，设计师需要通过对各部分空间的精妙设置来实现这一点。通常而言，我们的目光总会被最引人注目的部分吸引——无论它是视觉主体还是负空间。视觉主体和负空间，两者都很重要，尤其当你需要平和地呈现一个和谐、连贯、天衣无缝的设计。那么在一个网页设计作品中，设计师到底利用空间传达出怎样的一个故事呢？这就牵涉到我们今天要聊的主题了，格式塔原理。人类的大脑天生就能把规律性的散点连接起来，并对目之所及的事物赋予意义。设计是一个创造性的领域，是形式和空间的相互融合，并随之创造各种各样的体验。无论我们接触到什么样的设计作品，我们的大脑都会本能地将作品解构为更简单的各个组件，这些组件由基本的形状和不同的形态组成，而这些形状和形态则与空间息息相关。过往丰富的体验与经历，使得我们的脑海中充满了各种各样的记忆，于是我们很容易就能识别出这些特定的设计形式。
正空间，或者说显著的设计主体，构成了设计的「肉体」，它是你看到形状、颜色、图案等部分。相反，负空间多数情况下是指背景或大量留白。
文森特·梵高（Vincent Van Gogh）的这幅广受欢迎的作品，是一个以正负空间之间有着强对比的经典设计案例。
就像正空间似乎支配着负空间一样，两者都被用来平衡地传达一个和谐、连贯的设计理念。
在平衡的构图中，设计的正负空间都是相互配合、相互补充的，形成一个无缝、美观的整体。相反，不平衡的构图会让观众感到不适，传达出一个不完整的、扭曲的故事。
网页设计的好坏很大程度上取决于它的实用性和可用性。如果你的设计技巧很差，那么网页设计的整体效果和表现都会受到影响。但从另一个角度来看，在「内容为王」的时代，如果空间布局使用不当，内容将对您的网站产生显著的负面影响。
如果你认为你的开发技能很棒，但你的设计技能可能需要更多的改进，那这篇文章对你就太合适了。在本文中，我们将讨论：
我们还将讨论一些真实的网页设计实例，探讨每个案例如何体现格式塔原理，以及它对空间的创造性使用。
话不多说，一起开始学习吧。
空间由两个主要维度组成：正空间和负空间。正空间是可被直接感知到的视觉元素，负空间则为元素以外的留白和间隙。如前所述，正的是物体，负的是物体后面可以通常被忽略的留白区域。一个是焦点，另一个是背景。在前者产生活动和刺激时，后者则保持静止和模糊。一个是月亮，另一个是环绕着它的暗夜。
在网页设计中，正负空间相互作用，共同形成构图，传达理念。只有当正负空间通过对比来区分，同时又向更大的区域延伸时，才会产生视觉层次（脑补一下阴阳太极图吧）。
正负空间的交汇之处就是信息的交汇点。负空间拱卫着正空间元素，让后者更加突出和显著。
通常而言，正空间在绝大多数时候起主导作用，实际上负空间同样重要。负空间的优点在于:
设计中的负空间相反并不是负面的。当正负空间比例平衡得当时，两者在视觉上会显得非常舒适。而当其中一个占据主导地位，并给人一种「过于拥挤」或「空洞无物」的印象时，混乱才会发生。在这两种情况下，受众都无法处理如此复杂的信息，因此，而这样的空间设计是不符合网页设计的基本原则和设计动机的。
这是一个网页模板，它展现了何为「内容错位」和「空间混乱」:
△ 布局混乱
△ 空间失衡
△ 适当的布局调整
△ 网页设计中空间的合理运用
有意思的是，当谈到空间的概念和布局出现时，质疑声也随之而起。
类似的问题只能在理解基本概念后再来作答。黄金经验法则告诉我们——简单是最好的策略。
在文章开头，我曾提到在设计网页的时候，尽量创建简单的用户界面，这是一举两得的举措，既可以造福你自己，也可以惠及用户。或从表面上看，网页设计的重点在于增加网站的视觉吸引力，使用户操作更为简便。
我们的大脑总是在扮演侦探的角色，试图寻找隐藏的线索和空间之间缺失的联系。因此它会将当前的视觉信息与之前的经验进行比对。为了成为一名的网页设计师，你必须先了解大脑是如何感知周围环境的。它可以帮助你选择特定的视觉元素，利用它们来影响观众的感知。
伟大的设计师明白心理学在视觉感知中所扮演的强大角色。当某人的目光与你的设计作品相遇时会发生什么？他们对你的文章所传达的信息有何反应？——劳拉·布什，Autodesk 品牌内容策略师
作为设计师，你必须清楚地了解视觉设计和心理学是如何相互联系、相互影响的。换句话说，开发以用户为中心的简单界面，借助正负空间进行设计主要依靠格式塔原理，它可以帮助你理解和控制视觉和心理的联系。
格式塔在德语中是「形式」的意思。它更多的是一个概念而不是一个单纯的词汇，它最基本的概念是：
整体大于各个部分的总和。——库尔特·考夫卡（美籍德裔心理学家，格式塔心理学的代表人物之一）
当单个部分的集合以某种方式统一时，它们在我们的感知当中就是一组。我们把元素看作一个整体，这一概念或理论基本适用于所有的设计媒介：我们不把文本、颜色和形状看作单独的元素，而是把整个网页看作一个整体。同样的道理也适用于森林：我们看到的不仅仅是一堆树，就像我们在看海洋时看不到水滴一样。
格式塔原则描述了当特定的条件出现时，人类大脑是如何感知视觉成分的。它帮助大脑创造视觉图像。因此，格式塔原理通常会应到下面六个主要类别：
1. 图像和背景
「图形」是直观地、明显地与背景分离的物体。
目前最经典的例子是圣杯——两个镜面对称轮廓构成了花瓶。当你第一次看到这张照片的时候，你的眼睛会立即被吸引到画面上看起来最聚焦的视觉主体上，可能是相互对立的面孔，也可能是花瓶。当你的大脑在调整你的焦点时，背景或花瓶被模糊了，在那一刻，你的大脑直觉地在图像中感知到背景。
过了一会儿，你会注意到背景中的花瓶，并意识到它本来就在那里。尽管图形和基本原则看起来模棱两可，设计师常常创造视觉上吸引人的超现实和虚幻艺术，并将之运用于网页设计。
有时，图形与背景之间的关系是稳定的，而这种稳固的视觉关系使得两者之间，产生区别。这种关系有的时候又是不稳定的，这意味着图形和背景是无法清晰区分的。由于这种关系的模糊性，用户会很自然地开始困惑。
为了让大家直观地感受到图形和背景之间的关系，让我们详细的拿几个案例来进行讨论。这些例子都集中在图形-背景关系中的三个主要方面：对比度、Box 区块和阴影。这三方面涉及到诸多属性，包括颜色、尺寸和信息量，它们关系到内容的区分和视觉的纵深。
在下面的第一个例子中，Trellis 使用了一个全屏大图背景，并且搭配上清晰的 CTA 元素，图形-背景关系明确，该关系清楚地展示出了细节、色彩和尺寸上的差异。
页面中的文字是位于中央的手写风格字体，与背景中的图像相比显得很突出。和灰色背景图片构成对比的白色文本是吸引用户注意力的焦点，这使得文本在画面中是高度可见的。从另一个角度来看，背景图片是模糊的，所以清晰的文本会非常醒目。这些都表明，这里的文本被优先考虑为图形或正空间，而模糊的图像被用作背景或负空间，从而强烈地暗示了图形和背景之间的关系。
下一个案例是下图方框里的内容。 Ocean Health Index 巧妙地利用了框内区域的内容将图片与背景分离开来。这是你在浏览他们的网站时看到的：
当你第一次浏览这个页面时，哪个部分会吸引你的注意力？你会发现，它的主要文本为白色和蓝色背景构成对比，而更加醒目的是是两个与文字对比鲜明的 Box 区块。前者借助了深色背景和文本色彩上的差异，构造对比度。而 Box 区块本身的色彩和背景色构成对比的同时，还和更靠前的文本构成色彩对比。
背景使用了微妙的色调，使数字得以鲜明地展现，并突出细节。方框的运用使它们在页面上清晰可见。
一些网站还通过添加阴影来表现物与背景的关系，产生一种图象被置于背景之上的感觉。以下截图来自于 serious unsweet.com：
Seriously Unsweetened 的着陆页使用了不止一种方法来保持图形与背景的平衡关系。明亮颜色和阴影的配合；背景是纯粹的白色，使得前景元素更容易从中出来。背景之上的元素都是「正空间」，图中的物体呈现在背景的映衬下，有一种被置于「顶部」的错觉。而阴影并没有直接用在图片和文本上，而是应用在图片的内部，这让我们注意到在主要图像内部还有另一层视觉元素，这意味着里面还有一层图片-背景关系——这是一个非常智慧的设计。
2. 接近性原理
接近性是指页面中元素之间的接近程度。网页中的不同元素可以组合在一起，不同的接近程度会带来不同的关联属性。除了视觉特征上的接近性之外，这些元素与其他页面元素之间的距离接近度也会自动地在观众的脑海中产生关联感。
从图像到文本、导航栏到网页表单，这种接近性原则在网页设计中适用范围非常广。将类似的内容组合在一起时，它将在元素之间创建关联，为观者提供更好的视觉体验。
以下是 Mashable 网站导航显示的运用接近度的案例：
在上方的截图中，我们可以清楚地看到如何将相同类别的元素放在一起，以显示它们与主菜单的关系。由于颜色和文本大小的选择，使观者的目光自动被吸引到主标题下的子栏目上。
除了导航栏外，基于网格的内容也符合黄金比例的接近性。亚马逊的产品列表就是最好的例子：
这个案例体现的是接近性还是相似性还有待讨论。如你所见，具备视觉接近性的同类产品使用狭窄的留白进行分组和分隔。这种接近性会指示用户在类似的产品列表中，对其目标产品基于购买偏好进行排序。此外，封闭性原则也在类似项目的清单中发挥了作用。
现在，我们来仔细看看 Basecamp 的网页表单设计，它在网页设计中显示了另一种接近性的理想情况：
可以看到上图中的表单是被划分为两个主要部分的：个人信息和 ID 生成两个部分。第一部分被暗示为最重要的字段，第二部分则是一个次要的需求。这两个部分的标题都因颜色和字体大小的不同而产生区别。在这个网页表单中，接近度是一个重要指标，它将网页中呈现的信息按优先级排列。
3. 对称和秩序
对称是指两个元素呈现出镜像关系。它可以被看作是把一个物体一分为二的平衡。真实的对称图形包括等边三角形、圆形和正方形等几何图像。
人类的大脑会本能地渴望在面孔中找寻「平衡」和「对称」，这在美学上是令人愉悦的。大脑也倾向于在其他物体中找到对称，因为对称创造和谐，让观者在观看图像时感到舒适。
下面是 HvD Fonts 在网页设计中体现对称性的一个很好的案例：
这个页面不仅显示了典型的图形-背景关系，而且强调了对称性原则的运用。页面被分成四等份，字体大小和颜色相似。四个部分中的每个部分的背景都具有相同的主题色和灰度效果。你也可以注意到负空间不一定是白色的，黑色甚至其他的颜色也可以以图像作为背景。
对称性原则还可以衍生出了另一个概念：在网页设计中，不对称会使观感不佳，必须谨慎使用。许多网站使用不对称作为平衡间距的元素——非常规的正空间元素与中性的背景相互平衡，反之亦然。而 Xplode 的营销理念是不对称，Xplode 以独特的美观悦目的方式引发不对称。
这个网页利用视觉错觉和不对称，抓住了观者的眼球。作为正空间的物体被放置在一个不对称的布局之下，在负空间中创造了强烈的视觉吸引力。色彩是两个空间和谐的主要因素，并为观者创造了一种自然的联系。左边的图形也有很强的平衡性，而右边的则是带来更强的视觉吸引力。你觉得这个设计如何呢？
4. 相似性原理
相似性与接近性原理密切相关的原因，是相似分组对象之间共享属性的质量。无论是颜色、形状、形态、大小、方向或任何其他属性，当这些属性中的一个或多个在邻近对象中共享时，相似性将占上风。
即使正空间的元素看起来没有明显的联系，由于相似性原理，它们也会与负空间元素区分开。
看看这些 UrbanDecay 的商品列表：
虽然上面的商品各不相同，但在位置、色彩、产品布局、表现方式等方面却有一定的相似性。唯一不同的是左上角的眼影广告，在同类产品中独树一帜。这显然是一种营销策略，目的是在不损害页面整体对称和美观的情况下吸引注意力。这里要考虑的另一点是，尺寸上的相似性使其他图像与相似的产品类别区分开来。
除了产品展示之外，正空间可以与相似度结合使用，也可以与负空间结合使用。
让我们来看看 influenster 的着陆页：
上面例子中对齐的边框也运用了相似性原理。虽然每个正空间元素是不同的，但是相似的感觉是通过整个页面中一致的文本字段来传达的。风格、布局和主题都是相似的，因此带来了统一的视觉效果。
5. 封闭性原理
你是否曾经遇到过这样一幅画面，看上去是闭合的，但实际上是开放的？这是由于它采用封闭性原理。我们的大脑倾向于「脑补」不完整物体的空白，并利用我们的视觉感知来使图形完整化。
正空间和负空间一起构成一个整体。最好的案例就是负空间中隐藏的形状和形式，这要求对正空间中要传达的信息进行评估。在封闭空间创造性地使用着正负空间，可以产生有趣但简单的设计。
下面是 Magu Kambucha 的设计图：
在这个案例中，可以看到封闭性和图形-背景关系的平衡。瓶子和后面的粗体文字构成对比，背景则是和两者都构成对比的柔粉色。封闭性体现在哪里？看到瓶子后面的文字了吗？虽然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一个「K」和最后一个「A」，其他字母都是半隐藏的，这些字母都是凭观者的直觉自动完成的，整个形式开始成形，意义也随之成形。
下面是 Cult 的截图：
即使文本没有写得很清楚，我们的头脑可以很容易地读到 CULT 这个词。即使单词不完整，文本的排列和对齐也可以使其易于辨认。
6. 连续性原理
最后，根据一般格式塔原则，连续性遵循模式，即引导实现遵循一致的路径，建立从一个对象到另一个对象的线性模式。
在上面的图片中，尽管圆形色块的颜色变淡了，但是观者更倾向于将中间的间隙其看作一条直线。这使我们相信连续性的原理比色彩的力量更能引导用户的视觉感知。当我们借助负空间在视觉元素中画出路径，我们的眼睛倾向于优先感知正负空间之间的界限。
脑补出来的这条连续的线条是我们在设计中更应该引入的视觉线索。
让我们来看看 Crypton Trading 网站中的视觉线索设计：
看到页面右半部分设计的完美延续了吗？不管背景的明暗色调如何变化，图案在页面上的变化都非常显著。当你向下滚动时，你会看到图案和颜色是如何以连续和无缝的运动变化的。在这里，色调的变化是可以忽略的，我们所看到的是一个连续的线和点的模式。
另一个很好的例子是 OscilloScope 网站：
该网站借用连续性法则，将网站用户引入到工作室的 360 度视角中，他们可以在导航中选择所需的子栏目。
影片《Cargo》的着陆页也使用了连续性法则：滚动式的导航，以线性运动的方式让文本漂浮在网站上。由于 LOGO 是垂直展现的，所以用户必须向下滚动才能看到它的全貌。当页面向下滚动时，静态 LOGO 开始与并行的文本块一起浮动。导航引导用户经历不同层次的体验，而不会干扰隐藏在下面的内容。
由于我们的眼睛通常遵循最平滑的路径，设计师可以使用这样的方式来创建引导路径。
在这篇文章中，我们讨论了格式塔原则与网站 UI 的正负空间之间的关系。通过一些真实的案例，让大家清楚地知道如何运用简单有效的方法来改变设计的观感。关键是使用这些原理来设计的时候，可以达到 1 + 1 > 2 的效果。
人类是根据感知来思考的——主要是基于视觉。根据格式塔原理，我们倾向于看到更大的整体性图景，而不是第一眼看到的某一单个元素。
正负空间帮助我们区分、回忆、感知并识别理解。在格式塔原理的引导下，我们能够更好地在网页设计中利用不同元素来创造吸引人的作品。因为空间对于任何设计师来说都是一件复杂的事情，所以最好的方法就是保持格式塔原则的完整性。只有这样才能真正认识到空间在设计中的重要性、有效性，继而使自己成为网页设计领域的佼佼者。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
作为交互设计师，天天画的就是交互稿了。而对于很多新手交互设计师以及想转行做交互的同学们来说，一定都非常想知道大厂的交互设计师画出来的交互稿具体是什么样子的。但和视觉稿不同，交互稿里面体现了太多产品本身的逻辑，难免涉及到一些敏感内容，所以具体的交互稿不太适合直接分享，这就是比较尴尬的问题了。
不过，这不妨碍我为你们做一份交互稿模板。一来我自己也在用，二来可以帮助大家，何乐而不为。
但我必须重点强调一句话：框架是死的，人是活的，不一定要拘泥于某种形式，你可以根据自己的需要自由修改。
第一个是 PPT 型的分页交互稿，这个样式最早是从腾讯 CDC 团队流传下来的，我在第二家公司的时候就从他们的博客中看到过，当时还用 InDesign 做过一个模板。而我现在所在的团队用的也是这个，因此我过来后就自己重新用 Sketch 做了一版，方便以后使用。
1. 封面
封面很简单，就是文档标题和作者，顶部有一个通用的文档标题栏，上面的内容包括：
我在 Sketch 中为这个模板中需要改动的内容都定义了 Symbol，比如这个标题栏，你只要选中之后，就可以在右边的属性面板中自定义里面的内容。
2. 修订记录
修订记录这页，记录了从文档建立开始，每次更新的主要内容，以及相关人员，方便后期交接的时候给对应的产品经理、游戏策划和设计师查看。有时候交互稿更新一次只是修改一小处地方，如果不备注对方就会很难找到，可能以后你自己都会遗忘。
这一块我也定义了 Symbol 元件，你可以直接复制一行，然后修改里面的内容，「更新内容」的文本支持多行输入。
3. 目录
这种分页型的文档一定要有目录，备注好每个模块对应的页码，否则十几页看下来都晕了，每次想找到对应的界面还得重新翻一遍。
4. 内容页面
具体的内容页面才是交互稿的核心，一般会用小气泡和箭头进行标注，然后在右侧用对应的数字和它们对应，写下详细的交互说明。
结构可以有很多种，比如上面这种竖屏的界面可以是左右结构，如果是横屏界面还可以是上下结构等等，根据情况自由调整。文字段落的样式我已经定义好了，直接修改套用就行。
其中最重要的气泡我也做了元件，选中之后直接在右边修改数字即可。
5. 导出方式
使用这套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可将交互稿导出成 PDF 文档。我很喜欢这个格式，与 PPT 相比，PDF 在任何平台都可以通用，包括手机、Mac，不用特地装什么软件都能很好地打开。
另一种是更常见的交互稿形式，这也是我这几年进腾讯后一直使用的格式。
如果你曾经用过上文介绍的 PPT 型模板，你一定会发现：它的好处是 PDF 分页格式非常整齐，比较适合一次性做一个大产品的交互功能介绍，而不适合小功能的频繁修改。
今天介绍的这第二种，则是更加轻便快捷的类型。
这种长图型的交互稿，优点很明显：
来看一张基本样例：
它的结构分为：
交互稿标题、日期
按照项目、模块和功能的方式命名（如：电脑管家 V12 -清理垃圾-深度清理图标化改版），可以地规范交互稿名称，让其他人很容易理解交互稿涉及的是什么内容。
相关负责人
对应的产品经理，交互稿的作者，方便评审时或者交接后找人。
需求背景
简单介绍为什么要做这次设计，出发点是什么，遇到了什么问题。
主要界面
这次设计中，涉及到的所有主要界面，先陈列出来方便大家快速评审和讨论，视觉接手后可以根据这些来进行风格设计。
流程说明
有了主要界面后，我们还可能需要对一些操作流程进行说明，比如怎样发送一条语音消息，怎样删除一条会话等等。
异常状态
最后还要记得检查一下，每个界面在没有内容时的空状态、断网时的异常状态，弹出各种通知的位置等等，千万不要等到开发同学找你的时候才想起来。
上面所说的，就是一份交互稿的常见内容模块了。
该模板是专门给 Mac 平台的 Sketch 用的。
下载后（下载方式见文末），打开你会看到这个界面：
里面的每个模块我都做了 Symbol 元件，你只要选中就可以在右侧更改内容了。
比如下面的文档基本信息：
我还把可能会用到的各种字体大小、颜色、对齐方式都做成了文字样式：
选中文字后，在右侧下拉框中选择你要的样式就好。
交互稿用的都是黑白灰，还有蓝色作为标注。
我一直用的这几种，足够用。
是不是很心动？别着急，先把这个 Sketch 文件保存成 Template（模板）。
然后，你就可以在新建文件时，选择从模板处新建，直接用这个模板开始画稿。
下载链接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA
提取码：npq2
备用链接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA
作者：WingST（寇敬），男，33岁，腾讯高级交互设计师、腾讯学院认证讲师，9 年工作经验的资深互联网人，曾任 MIG 桌面安全产品部轩辕设计组组长，目前在腾讯游戏 NEXT Studios 工作室负责《乐高无限》创造型沙盒游戏的用户体验设计。
负责过的产品有腾讯电脑管家 V11.0、加速小火箭 V2.0、腾讯手游助手、腾讯网游助手等。曾在 OPPO 手机、金蝶软件等企业工作，有着 PC、Web、移动端等多平台的丰富设计经验。
感谢大家的阅读，末尾做个小广告，我的新书《交互思维：详解交互设计师技能树》马上就要上市了，这是我自己九年多来做交互设计师的经验总结，也是市面上第一本详细介绍交互设计师所应该掌握的职业技能的书，适合所有希望了解交互、学习交互的设计师和产品经理。同时书中也有我进腾讯的成长故事，以及一些个人工作和学习方法的分享，绝对物超所值 → https://item.jd.com/12576242.html
这是我所总结的「交互设计师技能树」。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天分享一款运维相关的B端产品，主要阐述自身的设计思路及产品的优化过程。B端产品功能聚焦、讲究效能，对产品链路有着高流畅度与率的诉求。设计师在做B端产品的的时候要有全链路和小白用户视角，以体验及效率为先，我们需要协调全局一致性，遵循产品链路，在视觉上减少对于用户的负担和干扰，避免打断用户的使用流程，确保流畅、优质的用户体验。
在产品优化上，我们在每个版本迭代后，会对用户进行访谈及收集意见反馈，建议设计师可以制定一套自有的用户调研方式去了解用户的想法和自己产品的不足之处，这样的好处是可以让用户帮助你优化产品。
在产品的细节上我们可以深度地去挖掘和尝试更好更优的设计方式，对设计师来说打磨和优化每一个细节正是B端产品的魅力所在。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
互联网让全世界都无线互联，大家可以无视距离随时浏览世界另外一头的设计师所上传的设计作品。无论是 Dribbble、Behance、Pinterest 还是国内的各大社交媒体，想浏览别人作品获取灵感，几乎是0成本的事情。那么这样做对于做设计、激发灵感进行创造，真的有好处吗？它所引发的抄袭的问题，其实是最现实可见的，对此，昨天所发布的文章《如何界定借鉴和抄袭？看这7位设计大咖怎么说！》里，7位来自世界各地的设计师，已经对此发表了看法，而今天的文章里，99U 邀请了三位顶尖的创意人，阐述他们如何看待这种设计师中的「时代病」。不断上网浏览别人的作品这种「灵感时代病」对于做设计激发创意而言，到底有哪些利弊？在的设计辩论中，Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 对无休止的灵感素材的视觉进行了权衡分析。
过于关注在线设计灵感类素材，会让设计思路趋于千篇一律，扼杀创意。这就是为什么我们必须明智地管理我们的个人信息流。——插画师 Nadine Kolodziey
我们每时每刻都在上网，这意味着我们将会不断地接触到各种各样的视觉刺激。
如果你总是在公交车上或休息时关注别人的设计作品，那么你就会不自觉地把它融入到自己的作品中。很快你就会意识到：「糟了，我刚刚做了一些看起来和其他人完全一样的东西。」你会发现，你在不断地复制和重复别人的东西，尽管可能一开始是下意识的，但最终你会成为潮流的一部分。你忽略了你个人独特的视角，别人的作品开始影响你的判断和直觉。
而属于你自己的那部分最独特的东西，才是最有力道的。
我完全理解为什么人们想成为潮流的一部分。客户可能想要一些入时的东西——在特定的圈子里以特定的方式行事，这样做是有所帮助的。但最终这种做法所带来的同质化，对双方的发展都会有所制约。插画师在他们的作品中没有个性，所有的客户都在购买类似的风格——这意味着他们的品牌缺乏独特性。
如果你想获得灵感，看其他的创意作品并不是最好的选择。
看看其他的设计作品固然重要，这可以让你紧跟行业发展步伐，但是要适度。如果你想获得灵感，看其他的创意作品并不是最好的选择。当我在网上关注其他插画家的作品时，我个人很难受到启发。我已经使用 Instagram 两年半了。起初我总是看其他插画家的作品，这是我的本职工作，我热爱插画。但后来我发现，这阻碍了我的创作潜力。
我开始注意到我的配色方案与其他人的相似。我注意到，看其他的作品降低了自己尝试新事物所需的勇气。当我看到另一位插画家的作品时，我不可能洞悉他的创作潜力。当我在模仿他人的时候，我不可能有属于自己的独特创造力。
但是这个问题并非是无解的。解决之道就在于有选择地关注。看同事的作品和看一般的图片是有区别的。我对线上的灵感素材很感兴趣，但是我更多地将这些素材视作为一个个「小贴士」，因此我注重于管理我的社交媒体所关注的账号。我不再关注 Instagram 上的其他插画家，而是关注那些在审美上吸引人的内容。例如，我将关注那些收集不同寻常的石头的人，或者为摆放得精美的和风食物拍照的人。
我特别喜欢「I’m Google」这个账号，它不是按主题而是按视觉来排列图片。当我看到这样的图片时，尤其是当我开始着手准备新项目的时候，它们会立即在我的脑海中激发出新的概念和全新的思路。这些资源成为我的灵感来源：当我滚动鼠标时，我将看到来自外太空的岩石图像，它的形状将启发我如何安排构图。
线上灵感素材固然可以鼓励国际交流和对话，但问题出现在这些图像在传播的时候脱离了相关语境。——Thomas Kronbichler Mut工作室的创始人 创意总监
在 Mut 工作室，我们是当之无愧的互联网拥簇，我们从不害怕灵感素材过载这种问题。我们是阿尔卑斯山脉中部一个叫做海蒂·兰德小镇上的一个小工作室，互联网不仅为我们提供了来自世界各地令人叹服的灵感，而且提供了一个展示自己作品的平台，这在10年前是不可想象的。
正是因为图片可以在网上广泛地传播，我们才能让欧洲和美国的用户看到我们的作品。由于有了在线订阅和社交媒体，平面设计社区现才有了如今繁荣的模样。当然，这也有负面影响，很多人说如今平面设计在审美上变得太相似了。但积极的一面是，现在有更多的平面设计作品涌现出来。任何地方的人都可以进入这个行业而不再受到地域的限制，平面设计行业变得更具包容性。例如，欧洲各地的小镇上都会有人在尝试更疯狂的创作，我们能透过网络在不同的地方跟进观察，支持彼此。丰富的网络灵感图片的流通，最终有利于平面设计作为一种艺术形式而广泛存在。
我并不是受到某张特定的图片启发，而是在听设计师讲述设计思路的过程中获益良多。
问题是对此互联网并没有过多关注。一些博客和自媒体上并没有关于图片来源的解释。为朋友设计的项目和为大公司做的项目都在同一个空间中流通，这很有趣，但同时也弱化了应有的差异化和环境。
作品背后的故事，以及设计过程中各种问题的解决过程，才是真正重要的内容。我并不会受到某张特定图片的启发，而是在听设计师讲述设计思路的过程中获益良多。了解设计师的独特理念，则更有可能启发我，我对设计师处理客户关系的部分也很感兴趣。当然，这一切是不能用一张简单的图像来进行概括的。
我已经不再浏览 Tumblr 和 Pinterest，因为我最感兴趣的点，是了解一个问题是如何解决的。最终，我在设计师会议上发言的视频实录中获得了最多的灵感。听设计师们讲述作品诞生的过程是最令人振奋的。我从一个人如何构建一个项目，以及如何实现它的过程中学到了很多。我喜欢听他们谈论客户关系，讲述他们遇到的困难以及如何克服它们。确切地说，更能鼓舞人心的是设计态度和思维方式。
在阿尔卑斯山的工作室中足不出户，我就可以看 Michael 所有的视频。
例如，就在上周，我狂看了所有 Michael Bierut 在线演讲的视频。我喜欢他展示作品的方式，喜欢他大方地和别人分享成果，我钦佩的是他的工作态度。在阿尔卑斯山的工作室中足不出户，我就可以看遍迈克尔所有的演讲视频，这简直太棒了。
对正在发生的事情有所知觉是非常重要的，而上网获取灵感会简化这个过程。——Polina Joffe，艺术总监和平面设计师
如果你知道别人在做什么，你可以选择参与其中，也可以选择拒绝。而形成自己的观点并做出明智决策的前提是你足够了解。
我一直在关注其他人在网上会做什么，我也会在博客和社交媒体上上传一些实用的干货。当涉及到具体的项目时，我会做具体的项目研究。我们会从互联网上获得大量的灵感，这使得研究阶段变得非常简单和。我经常会想起设计师们以前在社交媒体上使用过的概念和想法，然后我会把这些想法和我自己的想法进行重新转化，组合并且更新，这样它们就可以运用在我的设计大纲中了。
浏览在线灵感素材，然后它们会形成属于我自己的一个巨大的视觉词典，里面有我脑海中所有的概念和方法，每当我开始一项新的任务时，我都可以沉浸其中。
我们经常谈论来自内心的创造力，但我不确信我是否真的要相信这一点。万物皆有源头。
我最近为泰特伦敦美术馆的教育团队做了一个项目。这个项目是针对年轻人的。首先，如果你的目标受众是年轻人，了解年轻人都在做什么是很重要的事情了，因为这些信息很有参考价值。你需要运用观众能够理解的视觉语言。在项目的研究阶段，我看了其他设计师是如何处理和学习这些属于年轻人的理念的。最初我想用笔记本和活页夹做点什么。然后我想起了我在网上看到的那些用活页夹或记事本纸做的项目，然后我回去重新又看了一遍，看了其他人如何处理类似的主题，由此激发了我的新想法。
我们经常谈论来自内心的创造力，但我不确信我是否真的要相信这一点。万物皆有源头。我认为创造力通常是学习前人如何混搭各种想法，然后自己进行特定的调整组合，二次创造。
诚然，视觉交流的发展是一部复制、更新、转移的历史。但重复别人已经做了太多遍的东西，并使用类似的元素来直接窃取它们是有危险的。当你在做研究获取灵感时，你必须通过多种方式参考海量的资源。如果我们能妥善地使用现有的大量图像，就能鼓励创新，跟上时代发展的步伐。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
质感是什么？如何让画面拥有更高端的质感？本文由质感的原理出发，深入分析质感表现所需要的要素，并通过实例来讲解如何在作品中表现高端质感。很多同学在设计完成后，总是会发现页面很单薄，导致整体看起来很粗糙、不耐看。究其原因，大多数是因为页面缺乏质感。
质感，对于设计作品来说，是一个非常重要的视觉元素。它能够提升作品的层次，让整个作品更高端、更有品质。
质感，基本释义为所表现的物体呈现出的物质真实感和细腻的品质感。这是一种视觉的综合感受，会触动你的某种本能的综合感官，让你感觉非常舒服、非常爽。
我找了几张比较富有质感的图片，大家可以感受一下这种感觉。
观察完这些图片后，你发现有什么共同点了吗？我们可以试着来分析一下。
首先，物体本身的型是好看舒服的，并且细节足够精致。
其次，在光的影响下，物体的表面呈现出细腻的光泽变化，以及通透而舒服的阴影，展现了丰富的层级关系。正是光的作用，让这些视觉元素得以表达，让我们没有触摸便能感知到这种质感。
我们再来看一些优秀的拟物作品。大家对照一下，是否都遵循相同的要素。
观察这些优秀的拟物作品，为什么会觉得有质感呢？首先图标很精致，它的形具有一定的美感。但是这不足以让它富有质感，关键是它也符合了上面所说的几个质感要素。
最后，我们可以总结一下，质感产生的要素：
所以除了作品本身足够精美以外，整个作品的光感需要和谐统一。每个元素表现的色彩变化规律（渐变色）、投影大小和投影间的相互影响，都需要与光感严谨的统一。
这就要求你在绘制所有元素时，需要去假定一个统一的光源，这样才能让物体拥有更真实的质感。
我们已经了解了质感产生的原理，下面就开始实际案例。每一个步骤我都会讲解思考的过程和原因，方便大家理解。
1. 整体背景和主体框架绘制
建立画布（1200 x 900）。用矩形工具绘制背景和主体框架（1100 x 700），图层样式为渐变叠加，光线方向统一。
渐变是为了模拟背景的质感和在光线下的变化，两层光线方向需要统一。背景颜色稍浅且饱和度低，符合远近的视觉规律。
2. 绘制投影和主体背景
复制矩形作为投影层，颜色调整为黑色，转为智能对象后，加入高斯模糊效果。调整矩形图层的模糊度和透明度，移到适当位置。具体参数对照图中。投影的位置根据假定光源位置而定，使其符合视觉原理（详见光线分析图）。
绘制主体深色背景（1070 x 670），添加渐变叠加模式，渐变方向与前面保持一致。渐变的颜色对于质感非常重要，恰当且高级的渐变色，能够在本质上提升画面质感。而渐变方向则需要根据假定光源进行判定。
为什么要这么绘制渐变与投影的位置呢？我绘制了一张光线分析图，大家可以从图中看出假定光源的位置，以此来确定渐变的方向以及投影的位置。
只有整体光感的统一，整个画面才能表现出强烈的质感。大家在绘制这一步时，需要用心体会假定光感的这个过程。
3. 将人物融入背景，提升发丝层次和质感
放入人物图片，图层模式改为正片叠底。调整图层透明度，添加蒙版使人物下半部分渐隐，与背景融合。
复制人物层，取消图层模式和透明度。用选择颜色命令提取发丝高光，添加蒙版抹去不需要的高光，图层模式改为变亮模式，调整透明度使其融合进人物。
为什么要做这一步呢？单纯的人物在画面中显得太平了，所以需要丰富细节、增加层次。
4. 主体字体和投影绘制
输入主体文字，图层模式调整为渐变叠加，根据光源调整颜色渐变。案例中的英文字体为「Monotype Corsiva Regular」。这一步需要反复的尝试，大家可以换一些字体尝试一下。
复制一层作为投影，文本颜色改为黑色，图层样式设置为正片叠底，转智能对象后模糊对象，调整图层的透明度和大小，放在字体后面。字体的立体感依靠的仍然是统一的光源，需要想象字体在假定光源下的阴影关系。
投影能够模拟真实感，需要若有若无的感觉，让文字悬浮在图层上面，丰富画面层次。
5. 主体文字细节刻画
根据字体的结构，用形状工具绘制出字体的立体关系。每一个形状图层绘制后需要两层蒙版，一层为了限制字体范围，一层为渐变蒙版。让充满立体感的文字悬浮于画面中央，提升视觉中心的细节品质。
6. 穿插细文与投影绘制
输入细文，并复制一层作为阴影。不过因为字体较小，距离拉远后投影肯定是看不清细节的，所以已经模糊的若有若无，但还是需要有的。
表现文字穿插关系，让「is an」悬浮于「L」上，并留下近距离投影。让「attitude」穿过「e」字，遮挡部分文字。丰富的穿插和相互投影，进一步增加主体文字的细节和层次，让画面细节丰富且更加耐看。
7. 绘制辅助图形，增强画面流动感
为了丰富画面细节，增强画面流动感，可以适当加一些飘零的辅助元素。
绘制时需要注意的是，你需要明确整体视觉中心与运动的方向。辅助图形沿着整体画面，水平中心向右运动，你可以想象图形散开后的画面，并反复调整元素的合理位置。
如果没有一定的规律，所有图形就不像一个整体，就会看起来很乱。大家可以根据这点来判断辅助元素是否需要进一步调整。
8. 收尾工作，大功告成
最后，根据页面需要，搭配上合适的元素，让画面更完整。
需要注意的一个细节是，由于所处的位置不同，这些元素在光照中呈现的颜色也会出现深浅变化，所以左边的元素较浅，而右边的元素会深一些。
怎么样，是不是看起来并不难？
希望大家可以抽空认真地跟着教程去尝试一遍。只要你能够理解每个步骤的目的，耐心地绘制每一个细节，相信你也能够做出这种非常高端的质感。
如果你能在制作时，用心思考和体会整个过程。就能在以后的作品中举一反三，让这个技能成为你自己的技能了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
筛选是资源聚合类APP中不可缺少的功能，可帮用户快速、精准地找到需要内容信息，根据资源分类形式的不同有多种筛选类型，并且不同的筛选类型还可以进行自由组合，让复杂的内容信息更容易被筛选出来。
1. 横向tab式筛选
2. 标签筛选
3. 下拉筛选
4. 底部筛选
5. 抽屉式筛选
这是最常见的筛选样式，属于一级筛选。通常出现在导航栏或者是导航栏目的下方，根据分类层级的多少有4种展现形式。
一个层级
分类2~5个：所有类目都可以直接在tab栏目上展示出来，用户可快速地在各个分类之间进行切换；
分类大于5个：所有类目以相同的间距进行横向排布，引入横滑操作，方便用户浏览被隐藏的分类信息；有些产品也会在栏目右侧增加下拉操作，点击后下拉展示所有的分类，用户可对所有分类进行直观的浏览；
两个层级分类
Tab 栏目上只展示推荐分类或者用户自己选择的分类
当内容分类有两个层级且分类比较多的时候，产品会根据用户的喜好推荐几种分类在tab上进行展示；右侧有筛选操作，点击后在一个页面里展示所有的分类。用户可以在这个页面自主选择增减展示在tab上的分类，并且可以调整展示的顺序。
交互细节
用户在不同的类目间进行切换的时候，筛选内容在当前页面刷新展示；
不同的tab分类可以通过横滑进行切换；
位于内容信息的上方，对下方的列表内容进行控制；
当触发筛选条件时，筛选栏目直接定位到导航栏下方。
是一种辅助筛选样式，通常位于某一分类标题下方，或者跟tab筛选和下拉筛选搭配使用，有4种表现形式
① 内容分类标签，充当内容入口。产品设定的内容分类，分类层级较高，且内容之间无交集，当触发操作的时候，会跳转页面进行内容展示。
② 大分类下的子筛选条件，分类层级比较低，当用户触发操作时，内容在当前页面进行展示。
③ 筛选页面，多维度的筛选条件以列表的形式进行排布，标签是单一维度下的多种分类，可横滑操作，这种方式可以帮助用户快速进行多维度的内容筛选。筛选的结果直接展示在筛选条件下方，最常出现在视频类APP内做电影、电视筛选；马蜂窝游记中也使用了这种分类形式。
通常是在一个大的分类下做具体选择的时候使用，这种筛选样式可以承载1~3级分类层级。
单一层级
分类以列表的形式展示在页面中，当分类字段少且分类较多的时候也可以排2~3列进行展示。
两个层级
有三种排布方式
①直接以栏目标题加列表内容的形式排列。适用于两个层级分类都较少，或需要用户进行操作（比较输入框、滑块）的场景使用。
②左侧为一级分类信息展示区，右侧为二级分类信息展示区，可以通过左侧的一级分类控制右侧的二级分类。适用于两个层级分类都比较多的情况使用。
③上面为tab式的一级分类，下面是二级分类内容的展示。适用于一级分类较少，二级分类较多的场景使用。
三个层级
一级分类为tab形式展示在最上面，二三级为左右排布形式。
交互细节
放在内容信息的上面，对下方内容进行控制；
当触发筛选条件时，筛选栏目直接定位在导航栏下方；
有2~3种信息层级的筛选，结果通常取得是不同信息之间的交集，所以需要在筛选中向用户展示筛选结果数量，帮助用户判断是否调整筛选条件 ；如图左
我们也可以选择在筛选结果页展示筛选标签，用户可以在当前页面删除部分标签，以查看更多的内容信息；如下图
备注：下拉筛选通常是多维度组合在一个栏目上展示，通常应用在电商、外卖等内容分类层级比较多，且层级内的分类也比较多的场景里
某一具体内容需要通过多个筛选维度辅助筛选时使用，比如XX-XX的火车票展示列表、马蜂窝的地图酒店筛选。这种筛选通常能承载1~2级的筛选层级，每种层级下的分类目都不能过多，是一种比较简单轻便的筛选过程
单一筛选层级
① 与下拉筛选筛选一样都是以列表的形式展示在筛选内容
两个筛选层级
① 直接以栏目标题加列表内容的形式排列。
② 左侧为一级分类信息展示区，右侧为二级分类信息展示区
交互细节
处于页面的底部导航栏的位置
当用户出发操作的时候，内容从下往上弹出展示。
电商平台应用较多的分类形式，通常是有两个分类层级，一、二级的分类类目都比较多，默认情况下，如果分类特别多时可以只展示第一层级信息，用展开收起辅助用户浏览二级类目信息。
交互细节
因为筛选的分类比较多，且通过展开收起会将已选择的内容遮挡上，所以我们需要以一种方式将已筛选的条件展示出来，方便用户及时调整。eg.马蜂窝将所有用户选择的内容都放置在最前面，而京东选择在栏目上方展示出来。
显示有多少个符合筛选条件的内容，帮助用户决策筛选条件是否合理。
本文主要讲述了5种内容筛选种类：tab筛选、标签筛选、下拉筛选、底部筛选和抽屉式筛选，选择何种筛选类型跟内容分类层级和分类数量相关，所以设计之前要先了解产品的分类及数量，有助于选择更适合用户使用的筛选样式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
程峰，滴滴出行高级设计总监，具备互联网和广告行业工作双重经验，同时拥有用户体验思维跟创意思维的他，对互联网设计和创意设计都有着自己的独到见解。
如今互联网设计圈，方法论大行其道，很多设计师为了走捷径过分依赖方法论，但他一直保持着初心，不骄不躁，他认为：方法可以被总结创造，但设计功夫与思维是更可贵的东西，功夫+思维>方法论。
本次访谈，程峰分享了自己的观点，包括设计师如何融合创意和用户体验，在遭遇灵感枯竭的时候如何理性的找灵感等干货内容。不仅如此，他还偷偷告诉湖湖他在招聘设计人才时最看重的特质。
△ 程峰，滴滴出行高级设计总监
滴滴出行高级设计总监；曾就职于搜狐、百度、Ogilvyone、Cheil鹏泰等知名互联网公司及 Digital Agency；资深创意人、设计师，获奖众多，对创意、设计有深入的了解。
蓝湖：
介绍一下你自己，另外，可以跟大家详细讲讲您的工作成长经历吗？
程峰：
Hello，大家好，我是程峰。
我毕业后的第一份工作在是一家正版音乐公司担任 GUI设计师，当时正版音乐行业的市场土壤还没有形成，所以公司没能发展下去，一年后，公司成为了行业「先烈」，我也只能选择离开，那是我第一次接触 UI设计。
在05年的时候，产品用户体验设计在国内开始萌芽，我出于对这个行业的喜欢和好奇，加入搜狐从事体验设计的工作，07年的时候，加入百度做交互/UI，在这个阶段，体验设计思维方式深深扎根在我的脑海。
后来，因为当时国内的用户体验设计还不够成熟，同时出于对广告视觉表达有极大的兴趣，在互联网用户体验行业呆了几年之后，我投身广告行业，将本土、4A Digital、媒介型公司都体验了一把，我在这个阶段形成了创意思维思考方式。
体验设计思维跟创意思维，对我来说都有非常大的价值，可以让我更灵活面对不同的任务。这两种思维方式的区别在于：一个是解决产品体验问题；一个是解决沟通问题。我认为现在的设计师/创意者需要同时具备这两种思维。
几年之后，我又回到了互联网，来到了滴滴。
总体上我的经历跟大部分设计师朋友一样，其中不同的可能是我接触过的领域比较多，在音乐、游戏、搜索引擎、交通、广告等行业都有过职业经历，我个人也比较喜欢跨界。
蓝湖：
您同时拥有互联网公司（甲方）及广告公司（乙方）的工作背景，甲乙方最大的区别是什么？这种经历对您在工作中分析、解决问题会有什么帮助和优势？关于这种交叉背景带来的优势，您可否深入和我们分享一下？
程峰：
设计师在一般的互联网公司工作跟乙方公司工作相比还是有区别的。
在乙方，由于接触到的行业领域比较多，所以适合产出跨领域的通用方法论，思考方式更加横向，更重视规律，从而能够解决不同行业的共性化、模块化问题，但也有可能因信息不够及时对等，跟进不够持续，可能导致对问题的理解片面，无法深入。
而在互联网公司，设计是服务于单一企业产品和业务的，比较单一，但更专注，会对具体行业的具体问题理解更加深入，具备持续性，更重视对变化的即时响应，但同时也容易陷入视角局限，导致脱离规律，无法全局思考。
对我个人来说，甲乙方的双重经历使我更加灵活，看待问题具备了更多视角，更容易保持客观，可以快速切入找到符合规律的问题本质，同时还可以深入并持续性地解决。
蓝湖：
创意&设计是服务于品牌和产品的，您是否可以举一个实例来详细讲讲，好的创意&设计是如何服务于产品和品牌的？
程峰：
以滴滴为例，首先，滴滴CDX 很重视不同专业之间的打通与整合，聚沙成塔、汇点成线，这对于创意&设计产生好的效果尤为重要。
2017年，我们曾经在 CDX 内部构建了一个需求关联池，把产品、品牌、运营三块设计需求主动整合，并关联思考，跨专业团队协作，输出了司机端App 5.0升级+司机故事+司机教育等相关项目设计，提升了司机师傅们对平台的认同感，最终达成了1+1+1>3的效果。
设计师要具备敏锐的全局观和主动性，任何一个体系组织都不可能做到彻底扁平化，信息只要在流通，多少会出现一定程度的不对等和信息失真，各职能都不可能对所有信息细节彻底掌握到位，大多数时候需要主动接触，主动思考，以建立项目间的共性联系，而不是坐等被告知，不能过度理想主义。
△ 滴滴「司机故事」创意设计
△ 滴滴「司机故事」创意设计
△ 滴滴「司机端」5.0配色标准
△ 滴滴「司机端」5.0启动页面
△ 滴滴「司机端」5.0导航设计
△ 滴滴「司机端」测试环节
蓝湖：
创意和用户体验是设计师必须思考深入的两个点，要更好地融合创意和用户体验，设计师应该怎么做？举一个例子？
程峰：
这两种思维方式虽然一个偏产品，一个偏传播，但最终都会回归到一个点上，也就是以用户为中心，站在用户的角度思考，基于这个点衍生出来，站在产品层面叫做痛点，站在创意层面叫做洞察。
举个通俗的例子：一个人早上很难起床，需要借助外力才能被叫醒，这是痛点；一个人早上很难起床，但如果第二天早上有重要的事情要赶飞机，他按时起床的可能性就会变大，这是洞察。
再举个例子：小朋友容易把衣服弄脏，妈妈洗起来很累。用某品牌洗衣液，针对小朋友衣服常见污渍进行洗涤，省时省力，这是基于用户妈妈的痛点想出的产品解决方案。小朋友容易把衣服弄脏，但妈妈总是会在第一时间，像变魔术般把干净如初的衣服放在他的床边，这是基于妈妈勤劳，母爱的洞察表达。
痛点与洞察交融在一起，可以使设计师在思考的时候更周全，在进行产品体验设计思考的时候更具备情感引导性，在进行创意思考的时候不至于忽略功能性。
蓝湖：
设计类工作需要创造力的支撑，您是否可以跟我们分享一下，如何科学、系统地提高自己的创造力？
程峰：
不得不说，创造力很大程度上是天生的，可以理解为直觉。但洞察力是创造力的前提，是创造力被激发的基础，洞察力是可以被后天锻炼的。我个人并没有总结过科学系统的方法，但我相信一话：「观察和经验和谐地应用到生活上就是智慧。」
如果一定要说方法的话，就是把自我提升需求转换为习惯，养成针对性定期阅读并定期总结的习惯。这里的关键词是：定期、针对性。说得再直白点，就是多看多想并持续下去，任何事情的通用诀窍都是持之以恒。
提到这点，想多说几句，近几年看到了太多设计师过度重视方法，期望通过方法论找到解决问题的捷径，我认为这是浮躁的。对于创意&设计，我个人并不否定方法论的价值，但设计本质上还是功夫活，思维的跨越也是从量变到质变积累的过程。在这个阶段，我更想跟大家说的是：功夫+思维>方法论。
尤其是希望很多年轻设计师，多下点苦功，多思考，不要把希望都寄托在方法论上。方法可以被总结创造，但设计功夫与思维是更可贵的东西，是设计师真正的能力壁垒。
蓝湖：
在滴滴拥有众多产品，设计师持续提出服务于产品和品牌的好创意和设计似乎并不容易，在设计师们遇到瓶颈时，您会给他们什么建议？在灵感枯竭的情况下，您有什么快速找灵感的好方法吗？
程峰：
滴滴虽然产品众多，但好在都是在解决出行问题，所以很多产品之间是具备共性的。
作为设计师，不该局限于自己的产品，应该横向多看，找到不同产品之间的关联，多加以借鉴，找到可持续的复用性的解决方案，这是避免陷入到困境的好办法。
在灵感枯竭的瓶颈期，设计师应该明确一点：任何灵感都来源于对事物、信息的重新组合，当把不同的元素组合应用在不同场景中的时候，会有意想不到的收获。
脑洞是不能随意大开的，我认为，找灵感、开脑洞需要两个前提：第一是持续关注，日常积累，只有一定量的持续积累才能让大脑里的数据库足够大，才能确保可以在需要的时候，第一时间任意调取信息并进行重组。第二是逻辑性的结构化思考，可以确保将信息进行有条理、有效、有价值的组合。
蓝湖：
面试的时候，您会比较关注候选人的哪些特质？是否具备优秀的创造力，可以通过面试得出结论吗？您有什么能在短暂的面试时间内找到更适合的人选的秘诀吗？
程峰：
坦白讲，我认为在面试的有限时间空间环境下，很难做到全方位的考察，我个人也无法做到，这也是为什么会有多次面试的原因。
但是关于面试设计师，我还是有一些心得的。首先，设计师的专业能力是根本，除此之外，最重要的是心理成熟度的考察。就设计师的发展来看，很多时候遇到的问题都不是技术问题，大多是心理问题。创造力也同样重要，虽然个人是否具备创造力可以在沟通中发现一些，但最好的办法还是设置笔试题来考察。
除此之外，恒心、雄心、好奇心，分别体现了一个人达成目标的能力，自我提升的可能性，以及对专业探索的热情，优秀的设计师，这三个特质缺一不可。
蓝湖：
在提拔设计人员成为设计管理者时，您会重点考察候选人的哪些方面？
程峰：
如果将设计团队比喻成一支球队的话，我对团队内设计管理者的要求是从明星球员变成主教练。
最简单的考察标准：
蓝湖：
滴滴CDX 内部是如何分工协作的？设计有时会是一个比较主观的，容易出现分歧的工作内容，如果团队内部的意见出现分歧，您是如何做决策的？
程峰：
CDX 专业分为两侧：体验设计+创意设计。既解决产品的体验设计问题，同时也关注业务运营效率及品牌创意设计问题。
我想目前的分工是阶段性的，未来的趋势应该是设计师职能更加融合，最终合并成只有「设计」这个职能。
在面对专业分歧的时候，最的解决办法依然是沟通。事实上大部分的分歧都是因为目标不一致导致的，所以在遇到分歧时，要保持让产品、品牌更好的端正、开放的心态，就会被更有道理的观点说服。
△ 滴滴「CDX」部门成员合照
蓝湖：
您作为设计管理者，对于提升产品设计效率，有什么经验分享给大家吗？
程峰：
首先，推进设计师成为更「复合」型的人才，设计细分专业之间的融合，能够降低理解成本。
其次，要继续推进产品组件化的建设和组件使用率。
最后，针对性使用设计工具，比如使用蓝湖完成自动标注和切图，通过工具规范标准化流程，避免无效沟通和重复劳动。
这些都是提升设计效率的办法。
蓝湖：
对于相对年轻的设计师，您有怎样的职业发展建议？
程峰：
保持初心，永远记得你为什么踏上设计这一行，并且时刻具备长远规划。
坚信设计的价值，任何职能都不可能解决全世界的问题，专注设计能解决的领域，设计自然更有价值。
保持思考，不仅是对专业的思考，更是对业务的思考，甚至生活和世界的思考。
我也是这样要求自己的，希望对各位也有帮助。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
什么是插图呢？或者艺术中插画的定义是什么？插图的样式有哪些？将在本文揭晓！
写在前面
什么是插画呢？或者艺术中插画的定义是什么？插画的样式有哪些？
插画是指艺术家将一段文字，甚至是社会意义翻译成一幅图画。
插画是用来创造情感或传达信息的。它在风格上很有表现力，不需要注意。插画用于书籍，杂志，广告，漫画书，漫画，时装设计，故事板和视频游戏。没有单一的方法来说明，有很多的说明风格。
插画风格
虽然有许多不同的插图风格，但这些可以分为以下几组：
文字插画
文字插画风格以与非小说类书籍相似的方式描绘现实。这幅画描绘了一个可信的场景，即使使用幻想或戏剧。我们来举一些文字说明的例子：
创造一个摄影图像
艺术家以照片为素材，以细腻的细节创造出逼真的复制品。
在现实主义摄影中，艺术品常常被误认为是照片。绘画、透视和色彩的选择对这种艺术形式至关重要。艺术家经常使用喷枪，或手画与丙烯酸或油达到最终的结果。
展示历史或文化的插画
这种类型的插画用于描述历史或文化事件。通常被一种文化用来描述场景或环境，这种形式的插画也可以用来描述情绪或增加戏剧感，甚至在摄影的时代。
虽然有时用来美化或贬低文化或人物，这些插图是现实的，足以被视为文字图像。
超现实主义
这种形式的插画试图抹去艺术和现实之间的界限，被认为是对摄影现实主义的一种进步。
有时，一些额外的功能被添加到一个代表或艺术家可能与单色铅笔工作，以创建一个社交信息。然而，我们的目标是创造一个尽可能接近现实的形象。这种形式的插画试图抹去艺术和现实之间的界限，被认为是对摄影现实主义的一种进步。
概念插图
概念插画是隐喻性的，以思想或意象取代了现实主义。虽然这部作品可能包含现实的元素，但其目的是传达情绪、隐喻和主观性。这种形式的插画可以与小说相比，在任何地方。我们来举几个例子:
图像顺序
按顺序排列的图像讲述一个故事，可以用于卡通、漫画小说，甚至是电影场景的规划。风格可能有所不同，从快速素描，以喷枪的细节微调图纸。根据信息的不同，一幅图像可以使用清新干净的颜色，也可以使用墨水、锯齿状的线条和混乱的布局来描述政治的混乱事务。
信息图形
这些是知识的图形表示。它们通常用于帮助理解复杂的信息。
虽然它们向观众展示了他们正在看的内容，但这通常以包含其他见解的方式表示。有些可能看起来像文字插画。
抽象或扭曲的设计
一种表现形式的说明，从现实中分离出来，从想象中显现出来。因为它是如此主观，两个抽象的艺术品看起来会非常不同。
手绘数字图纸或插画
在这种类型的插画中，艺术家在一个数字画板上作画，允许光影之间的平滑过渡。艺术家可以使用图像层来创建复杂的背景和添加精细的细节。许多这样的图像使用栅格(或点)格式，限制了它们在失去质量之前可以放大到的大小。
矢量图形和插画
利用矢量图形，用数学方程进行设计。由于矢量图不像徒手数字绘图那样使用笔画，图像不像徒手设计那样平滑。然而，它们可以在不损失质量的情况下被炸毁。这些图像有清晰的形状和轮廓，非常受欢迎的网络插画。
儿童插画
儿童插画讲述一个故事，或给予一个故事，甚至一个虚构的存在的视觉表现。插图的风格取决于孩子的年龄。有些可能是复杂和现实的，而另一些可能是天真的。许多儿童插画色彩丰富，包含许多动作或活动。人物通常是明亮的，丰富多彩的和友好的。
社区书籍和图形小说插画
漫画书或超级英雄通常会让角色参与到行动中。样式通常很复杂，从线条图到喷绘图像都有。然而，漫画通常是漫画中最常用的风格之一。
漫画图片通常以小组形式出现，并经常涉及到对话框或叙事。有些词可能与动作结合在一起，比如POW!面板的大小以及它们出现的频率有助于设定故事的节奏。
书籍封面和出版物
在许多旧书中，例如那些侧重于地理或自然历史的书，插图都是手工设计的，然后再版。然而，现在，书籍插画被设计成许多不同的方式，然后印刷。
插画家经常被用来设计书籍的封面，以便使他们在书店中脱颖而出。封面常常暗示书中的内容，并给人以幽默、严肃、文化或运动的印象。
书籍插画从卡通风格的图画到历史或文化形象。虽然“不要以貌取人”这句话经常被重复，但它实际上是能卖书的封面，并能帮助书吸引正确的读者。
标志或品牌设计
logo是一种非常特殊的插画风格。通常他们的目标是提供有关产品的信息，使用颜色、字体或图像。流行的和容易辨认的标志包括耐克勾或与麦金塔相关的苹果。标识通常很简单，但却能抓住人们对产品的注意力，将其定义为属于某个特定品牌。
通常，这个品牌与想象中的品质有关，比如速度、力量或创造力，而商标有助于唤起这种情感信息。有时，企业不仅仅使用一个标志来辅助品牌建设。
许多公司使用吉祥物或员工形象来传达信息。这有助于超越鞋子这样的产品，让它在顾客心中有更深的含义。
发展你的插画风格的技巧
使用互联网，我们经常被介绍到插画在网上新闻文章，我们可以下载的音乐，漫画书，广告，甚至电子邮件。这向我们展示了广泛的样式，这是一件好事，因为它创建了广泛的示例供我们借鉴。
然而，如果你经常被许多高质量的插画轰炸，你如何发展自己的风格？这里有一些建议：
了解基本原则
虽然可以通过实践来学习插画，但这往往意味着要模仿其他已经形成自己风格的插画家的风格。释放你自己的创造潜力是非常重要的，这样你才能建立和成长，发展你自己的才能和分享你自己的信息。
没有复制，你可能会问“什么是插画师?”“正规的教育将教会你插画的基本原则、动机和技巧，这样你就可以用这些积木来创造你自己的设计。”
除了向那些已经在这个领域内的人学习，你还会学到一些哲学，这些哲学将使你能够加入其中，在你这样做的时候表达你自己的风格。
探索新的插画风格
如如果你觉得自己陷入了风格的窠臼，重复做了很长时间的工作，你可能想学习一些新的插画风格或技巧，进一步发展自己的作品。
然而，请记住，没有理由强迫自己进入不舒服的空间。如果你觉得停滞不前，或者不喜欢你正在尝试的工作，请记住，没有一个艺术家能够做所有的事情，如果有些事情感觉不太好，准备好继续前进。
尝试新媒体
如果你因为你的钢笔画而出名，试试丙烯酸树脂怎么样?转换你使用的媒介可能会给你的工作带来一个新的维度，专注于一个新的氛围，颜色或闪光。如果您已经使用多种介质，您可以尝试纹理、蚀刻、模板甚至金属。
您可以将您的格式从小型绘图更改为大型画布，或者从大型绘画更改为漫画书大小的图像。尽管一开始你的结果可能并不出众，但探索新的媒介会让你走出舒适区，走出你的风格窠臼。你的实验是值得的。
做真实的自己
当定义你的插画风格时，不要围绕当前市场上销售的东西来设计它。你的第一个委托是一个巨大的成就，从艺术中赚钱是值得的。
然而，在市场上分享你自己的风格，这样你才能发展自己的艺术身份。随着市场的不断变化，试图模仿或模仿当前的趋势会让你落后一步。
通过发展你自己的风格，你将不断地在你自己的技术上工作，改进和发展他们，而不是保持一个二流版本的插画家你钦佩。发展你自己的风格意味着分享你自己的意思，把你自己的想象带到前台。
没有这些，你就不会有创造性的能量来帮助你定义你的工作和保持你的动力。没有这些，你可能会失去你对插画的热爱。
最后说一下对插画风格的思考
有许多不同的插画风格或技术。有些是重复的。然而，理解不同的风格和它们所使用的技术使您能够了解每种不同设计背后的原则，使您能够探索和扩展您的插图实践。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
