如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
通过点击、滑动、滚动和键盘快捷键来交互的日子吗？它们不再是唯一的交互方式,一起来了解一下~
还记得浏览网页时，只能通过点击、滑动、滚动和键盘快捷键来交互的日子吗？而现在，它们不再是唯一的交互方式，当苹果推出第一款iPhone时，多点触控技术成为了主流，用户们了解到，他们不仅可以在界面上指向、轻点还可以捏合、展开和滑动。手势成为新的操作方式。
一、UI中手势的力量
手势非常自然和直观，他们与真实世界反应类似。
对于使用手势，这里有三个主要的理由：
● 干扰少
App内，手势控制使用地越多，在屏幕上出现的按钮就越少，这样可以留出更多空间给更有价值的内容。这使得app以内容为重点，并让用户在没有障碍，或者在分心的情况下也能进行最重要的操作。
● 使用简单
一个手势一旦被用户发现和学习使用就会让用户在体验感到愉悦，而且手势可以减少步骤，来达到提高交互体验的目的。例如，当你需要删除一些项目时，用“一次点击删除一个”的方式的很浪费时间的，但是如果使用“滑动一下，删除一个”的滑动手势，就更简单快速，让用户更加愉悦。
● 无缝交互
虽然按钮看起来对于触发响应更加有用，但手势具有更大的潜力，使内容的交互更加直观。
二、手势的缺点
但同时，手势也存在难规范、易混淆等缺点。
● 增加用户负担
大多数手势学起来或者记起来不自然也不简单。举个例子，在大多数APP，一个手指的手势就对应一件事，用两个手指做一个同样的手势意味着另外一件事，其他对应事件的手势还有很多。
● 缺乏反馈
在大多数情况下，手势不会留下任何路径记录。这意味着，如果做一个手势但没有得到反应或者得到错的反应，这样就只能获得很少的信息或者不能获得有帮助的信息去解释为什么这么做。
● 缺乏一致性
大多数手势在app中还不是标准统一的。他们对于用户不总是显而易见的。甚至一个简单的滑动手势，在众多邮箱app内的邮件项目中也有着不同的工作方式。例如，在Apple Mail 中，删除一个未读项目，你应该向左滑动这个没有打开的邮件，然后界面会出现选项来删除这个项目。在Gmail里，向左滑动可以把邮件标记为未读状态。
三、手势成为移动端UI成功的关键
1.如何选择好的手势
如果你的界面里要使用手势，那你就必须要去了解你所在的市场以及你的目标用户会去使用的app。要尝试在你的app里使用和它们相同类型的手势。这样，你不仅基于你的目标市场的用户的行为优化了你的界面，还让用户从一开始就能舒适的使用你的app。
2.手势教学
虽然每个移动端app都必定会用到手势，但是要让用户很自然的就能知道如何操作(使用什么手势可以干什么)却一个挑战。可触摸的界面提供了很多条件来使用自然的手势，例如轻点、滑动和捏合来完成任务，但是不同于图形界面的操作，手势的交互用户往往是看不到的。
因此，要让用户能发现手势是很重要的。你需要确保你提供了正确的线索----通过视觉引导来帮助用户更容易的发现如何与界面进行交互。
3.如何在情境中教育用户
教程和演示的做法相当流行。在许多app中加入教程意味着要想用户显示一些说明内容来介绍界面。然而，UI教程不是介绍app的核心功能的最优雅的式。
良好执行的UI手势总是可以在易于实现视觉提示和渐进式披露的游戏中找到。这显而易见，最好的游戏可以使人们随着时间的推移来学习到技巧，而不是靠指导他们。例如，PuddingMonster 的游戏机器完全基于手势，但是他们允许用户得到基础的信息，他们不需要做很多的猜测。他们可以展示动画场景，让用户马上知道要做什么。
四、使用动效来传达手势
手势总是与移动app中的动效相关联。动效在维护用户体验中起着非常重要的作用。作为设计师，你可以利用动效来传达出用户可以进行某个操作。当动效与手势一致时，用户就会意识到自己与该物体正在相互作用。
动效在向用户提供视觉反馈上是非常重要的。没有动效，用户就不能获得足够的信息反馈，不能确定他们是不是成功地完成了手势动作。
这里有三种流行的基于动效来帮助用户学习手势。
第一种：动效视觉提示
显示一个在执行某个操作时如何和某一个界面元素进行交互的预览。它的目的是在手势和操作之间建立联系。例如下图中的这个游戏app是完全基于手势操作的，这个app让用户不用去猜测就能知道该如何操作。用动画来传达功能信息能立即让用户清晰的知道该怎么做。
第二种：内容的梳理
内容梳理是通过微妙的视觉线索来暗示用户进行手势操作。例如下图中卡片的展示，它表明这张卡的背后还存在着其他的卡片，这清晰的表明了可以滑动卡片。
第三种：功能可见性
你可以让你界面里的某些元素具有很明显的可供性来让用户知道这个是可以进行某种操作的。例如下图中点击相机icon后锁屏就会从下往上弹起，展示出在下面的相机功能。
五、总结
手势是一种强大的互动模式。移动设备已经从砖块发展到由我们手指驱动的复杂计算器。触摸和手势交互在使移动体验更加简便有趣方面，有很大的潜力。
设计一款移动端的app一定要思考手势设计。手势应该起到协调和节约时间的作用。为了设计一个有意义的手势，你应该规定一个动作以及与其配套的一个手势。提供反馈意见也非常重要，对于可能要进行的行动要有明确提示，并进行手势的引导。
蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
需求是拦截前端的网络请求和相应。
废话不多说，直接上干货。
我用的是vue-cli3所以这个config文件是我自己创建的。
先介绍env.js
//根据不同的环境更改不同的baseUrl
let baseUrl = '';
//开发环境下
if (process.env.NODE_ENV == 'development') {
baseUrl = '';
} else if (process.env.NODE_ENV == 'production') {
baseUrl = '生产地址';
}
export {
baseUrl,//导出baseUrl
}
在这里我首先设置了开发环境和生产环境的地址，并向外抛出。
在看一下axios.js
import {
baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
//引入vuex的js文件
import vuex from '../src/store/index';
// 创建 axios 实例
let service = axios.create({
baseUrl: baseUrl,//请求前缀
timeout: 20000, // 请求超时时间
crossDomain: true,//设置cross跨域
withCredentials: true//设置cross跨域 并设置访问权限 允许跨域携带cookie信息
})
// 设置 post 默认 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 添加请求拦截器
service.interceptors.request.use(
(config) => {
// console.log()
//下面的代码是如何在拦截器中调用vuex管理状态。
//我这里主要是做了一个蒙层的遮盖
// vuex.$store.commit('OPEN_LOADING');
//判断请求方式是否为POST，进行转换格式
config.method === 'post'
? config.data = qs.stringify({...config.data})
: config.params = {...config.params};
// 请求发送前进行处理
return config
},
(error) => {
// 请求错误处理
return Promise.reject(error)
}
)
// 添加响应拦截器
service.interceptors.response.use(
(response) => {
let { data } = response;
return data
},
(error) => {
let info = {},
{ status, statusText, data } = error.response
if (!error.response) {
info = {
code: 5000,
msg: 'Network Error'
}
} else {
// 此处整理错误信息格式
info = {
code: status,
data: data,
msg: statusText
}
}
}
)
/**
* 向外抛出service
*/
export default service
最后将这个axios.js文件引入main.js中，并将引入的axios挂载到Vue实例上就ok了。
完美！如有不对的地方还请各位大佬指点，万分感谢。
踩过的坑：
怎么在axios拦截器中使用vuex，首先我们要引入vuex的js文件，然后就可以用了，就这么简单。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
2019草莓音乐节的主题是“循环世界Circular World”。
摩登天空联合世界自然基金会(WWF)发起今年的音乐节主题“循环世界”，以环保为核心理念，携手海内外环保机构对草莓音乐节进行多方位环保实践，并聚合知乎、摩拜等多平台力量影响年轻人，让环保成为青年生活方式的一部分。
今年的主视觉海元素是被三个箭头环绕的草莓星球，表达了“循环世界”的主题。风格延续了去年的样式，色彩略有调整，并加入了太空元素。
今年的主视觉当然仍由摩登天空的当家工作室——MVM design label_工作室操刀。
这张是今年的主视觉海报。今年，MVM特地为各城市举办的2019草莓音乐节单独设计了专门的海报，一样的版式，不一样的内容，既统一又包含新意。
2019草莓音乐节武汉站
2019草莓音乐节成都站
2019草莓音乐节西安站
2019草莓音乐节上海站
2019草莓音乐节长沙站
在今年3月30日的“地球一小时”公益活动中，草莓音乐节把自己的参与定义为“草莓星球一小时”。
而武汉OYO酒店与摩登天空联合主办的活动中，一张以“音乐满房”为主题的插画也分外有趣——原来大家为了迎接音乐节，都关上门在房间里引吭高歌呀…
音乐节配套周边产品的销售，推广视觉设计也很有意思。
即使不是音乐迷，设计师对这样的设计也无法抗拒吧！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天分享一款运维相关的B端产品，主要阐述自身的设计思路及产品的优化过程。B端产品功能聚焦、讲究效能，对产品链路有着高流畅度与率的诉求。设计师在做B端产品的的时候要有全链路和小白用户视角，以体验及效率为先，我们需要协调全局一致性，遵循产品链路，在视觉上减少对于用户的负担和干扰，避免打断用户的使用流程，确保流畅、优质的用户体验。
在产品优化上，我们在每个版本迭代后，会对用户进行访谈及收集意见反馈，建议设计师可以制定一套自有的用户调研方式去了解用户的想法和自己产品的不足之处，这样的好处是可以让用户帮助你优化产品。
在产品的细节上我们可以深度地去挖掘和尝试更好更优的设计方式，对设计师来说打磨和优化每一个细节正是B端产品的魅力所在。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
全局组件和局部组件
* 1.先定义组件 Vue.component('组件名', { 组件模板对象 })
* 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写
* 例如: 组件-->mtText 使用时--> <my-text></my-text>
* 2.配置组件的模板 注意: 组件的模板内容有且只有一个根元素
* 3.在视图层里调用 ,用双标签
* 4.组件是一个独立的作用域, 也可以看成一个特殊的vue实例, 可以有data, methods,computed等等
* 注意: 组件的data是函数, 函数中需要返回一个对象作为组件的data
全局组件案例
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
//全局组件
Vue.component('myComponent',{
//1.组件的内容/模板
template: '<div><div>头部组件</div><h1 @click="fn">呵呵{{msg}}</h1></div>',
data(){
return {
msg:'hello,组件'
}
},
methods:{
fn(){
console.log(this.msg);
}
}
})
let vm = new Vue({
el:"#app",
data:{
},
methods:{
},
})
</script>
</body>
局部组件案例
<body>
<div id="app">
<my-component></my-component>
<my-test></my-test>
</div>
<template id="box1">
<h1>haha</h1>
</template>
<template id="box2">
<div>
<ul>
<li v-for="item in arr">
{{ item }}
</li>
</ul>
</div>
</template>
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
},
methods:{
},
//局部子组件
components:{
// 组件名: {配置项}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
}
},
"myTest":{
template:"#box2",
data(){
return {
arr:[1,2,3,4]
}
}
}
}
})
</script>
</body>
组件切换：法一
<body>
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
Vue.component("login",{
template:"<h1>登录组件</h1>"
})
Vue.component("register",{
template:"<h1>注册组件</h1>"
})
let vm = new Vue({
el:"#app",
data:{
flag: false
},
methods:{
},
})
</script>
</body>
组件切换：法二
<style>
.red{
color:red;
}
.v-enter{
opacity:0;
transform: translateX(150px);
}
.v-leave-to{
opacity:0;
transform: translateX(-150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s;
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<a href="" :class="{red: flag=='login'}" @click.prevent="flag='login'">登录</a>
<a href="" :class="{red: flag=='register'}" @click.prevent="flag='register'">注册</a>
<!-- vue提供了一个标签 component标签(理解为一个占位符), 用来展示对应名称的组件 :is属性设置指定的组件名 -->
<transition>
<component :is="flag"></component>
</transition>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
Vue.component("login",{
template:"<h1>登录组件</h1>"
})
Vue.component("register",{
template:"<h1>注册组件</h1>"
})
let vm = new Vue({
el:"#app",
data:{
flag: "login"
},
methods:{
},
})
</script>
</body>
父组件向子组件传值
<body>
<div id="app">
<my-component :fromfather="father"></my-component>
</div>
<template id="box1">
<h1 @click="change">
{{ fromfather }}
子组件的数据
</h1>
</template>
<template id="grandSon">
<h1>孙子组件的数据</h1>
</template>
<!--1.子组件不能访问父组件的数据
2. 解决办法: ①在引用子组件时, 通过属性绑定 v-bind方法, 把需要传递给子组件的数据以绑定的形式传过来
② 在子组件配置项里添加 props: ['传递过来的数据']-->
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
father:'啊~~这是父组件的数据'
},
methods:{
},
//局部子组件
components:{
// 组件名: {配置项}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
},
//在子组件配置项里添加 props: ['传递过来的数据']
//注意: 组件中所有的props中的数据, 都是通过父组件传递给子组件的, props中的数据是只读, 无法修改
props:['fromfather'],
methods:{
change(){
// this.fromfather = "被修改了"
}
},
//局部子子组件
components:{
'grandSon':{
template:'#grandSon'
}
}
}
}
})
</script>
</body>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在手机淘宝中，大至链路的衔接，小至一个按钮的点击响应，动效是体验无处不在的润滑剂，为用户每一步的操作提供了合理的预期与过渡。而通过动效衔接不同界面或不同响应状态，无论对流畅直观地表达流程意图，还是精雕细琢让体验更丝滑的微动效，动效设计都是淘宝设计师日常工作中非常重要的一环。
动效是体验链路散点间的“领路人”
针对项目不同阶段、不同使用需要，针对性地选用的工具，辅以便于理解的交付方式，是设计和落地环节沟通提效的关键。
相比提及动效首先都会想到的巨无霸AE而言，Flinto、Principle、Kite、Adobe XD等许多专门为体验设计量身打造的轻量级工具，更聚焦在互联网产品设计的高频功能上，多数工具都能快速输出视频或GIF，以及在移动端上进行实际的交互体验。
为体验设计量身打造的轻量级工具
这些工具在原型和动效快速表达方面独特的敏捷、的优势，让它们逐渐成为迭代频繁的国内互联网行业许多设计团队的新宠。
上述工具的核心功能都比较接近，各有千秋，差异多在于时间与属性之间关联的展现形式上，这里不做过多展开，也不做任何孰优孰劣的判断。毕竟工具只是兵器，提起趁手的兵器快刀斩乱麻，才是设计功力的体现。
本文将结合手机淘宝的动效设计实际案例，介绍淘宝设计师们在项目过程中进行动效设计、并与开发沟通的经验。
淘宝这样的大型应用中，任意提及一个细分链路都颇具复杂度，每个场景或大或小的版本迭代背后，都是设计师从交互流程设计、具体界面的视觉设计，再到最终交付落地，经历层层评审和修改完善的过程。
产品设计的2大不同阶段
那么在不同阶段，选用怎样的工具更符合我们对“”的追求？下面将按阶段拆分问题，分别进行分析：
产品流程、交互行为的设计与串联，无论是作为可以实际体验的可交互原型，还是纯用作展示，实际上也是一种最基础的广义动效。
曾几何时，交互流程的设计输出物是用流程箭头清晰标注每个控件交互行为的交互稿。
但在淘宝内各子产品“小步快跑”的版本迭代极度频繁，每天提案、评审这类快速碰撞不断的情况下，即使经过了合理的流程拆解、耦合度不是非常高的交互稿，对设计师而言改动返工量依然巨大。
更何况无论业务方还是设计内部评审时，其实没有人有时间仔细阅读你精心撰写的交互说明。
只适合在交付开发阶段采用的静态交互文档
（鞋类测码功能为例）
因此，这类交互稿如今最大的用途只在交付开发的环节。在快速碰撞方案的阶段，通过轻量级的动效工具迅速产出可交互原型是目前团队内更同行的做法。在评审中直接演示，可以帮助团队成员更好地对方案实际效果有一个更直观的体验。
在流程设计阶段，Flinto是一个非常好用的工具。同为体验设计专属的轻量级设计软件，Flinto和Principle有很多共通之处，也经常被一起比较，但底层思路都是通过定义元素的各项属性变化来实现过渡。不过，两者在定义方式上却有比较大的不同，简单概括来说，Flinto是通过元素的附加事件，而Principle则是通过不同画板间的属性差。
Flinto更擅长流程级表达
这点上的不同，决定了Flinto优势在于流程级表达，而Principle更擅长界面级（或很短的流程级）交互细节表达。
以分享宝贝、邀请好友出主意的“帮我选”功能中的新建清单流程为例：
「帮我选」新建清单流程Demo
流程对应的Flinto实现方式如下：
「帮我选」新建清单流程对应的Flinto工程文件
产出流程Demo时，只需要表达基本的页面结构与跳转关系即可。转场无需表达得很准确，以不引起误解为原则即可，时间有限的情况下，最简单的处理方式就是统一用渐隐渐现。
各种与页面滚动位置有关的动效也暂时不用表达，例如下滑时顶栏的状态过渡。同样，也完全没有必要让每个元素都可点击，这些交互细节以及分支用例，都更建议在交付开发阶段通过交互说明表达，寥寥数语可能就足够准确传达了。
与页面滚动位置联动的动效，可以在界面级设计中细化
当产品流程确定后，进入界面级设计阶段，就轮到对局部微动效逐一进行细化。
对不涉及位置联动的交互动效而言，在Flinto和Principle中的制作成本相差无几。例如纯粹由点击触发的事件：
不涉及位置联动的动效
但对于涉及位置联动的动效，Principle就比Flinto的表现优秀很多了。
Principle更擅长界面级动效表达
Principle中，时间轴和位置联动的设置比Flinto自由度更高，可以快速进行精细的设计和调整。例如在页面上滑过程中，导航栏跟随手指上滑动作而上移隐藏的动效：
导航栏随手指上滑动作而上移隐藏
下面是一些来自淘宝近年已上线项目有趣的动效示例：
案例一：手机淘宝导购产品“有好货”的商品列表中，会穿插视频及知识内容，在这些特殊内容滑动到用户视线中时会动态扩展，将内容自身特点完全呈现。注意，这些动效只能应用在特殊内容数量少、质量高的场景，否则会过于干扰。
视频形态扩展动效
知识形态扩展动效
案例二：用户在手淘中关注某个频道后，手淘首页会提供进入该频道的快捷入口，这个逻辑通过文案很难清晰的表达，因而采用了直观的动效呈现。
关注频道后的提示
上文分别介绍了流程级和界面级动效的设计建议，那么在实际项目设计中，我们需要有什么样的产出呢？
依据设计稿所起的作用，大致分为3种：
3个阶段的不同产出物
1、用于实操的demo：根据自己所希望表达的侧重点（流程还是细节？）选用一种工具完成全部设计；
2、用于演示的视频：可以同时使用两种工具完成不同部分的设计，分别录制视频再合并；
3、用于开发的方案：对需要动态呈现的部分单独提供动效设计稿及说明等产出物，然后再将所有设计以Keynote等载体整合起来。
手淘在动效设计过程中，也摸索出了一套便于与开发同学沟通、最优最快实现设计效果的设计产出方法。产出物包括2部分：
1、效果演示demo和视频：使开发同学快速了解设计效果；以宝贝详情主图的扩容与评价联动气泡为例：
效果演示和视频
2、动效参数文档：将自己在设计动效时所设置的全部参数，翻译为开发可以轻松读懂的图形表达方式。对于比较复杂的动效，虽在撰写文档时会多花一些功夫，但能够让开发一次性还原出理想的设计效果，免去后期反复沟通修改的麻烦。
下面以手机淘宝首页的2018年双11主会场入口为例，说明动效设计的输出方式。
我们选用Principle制作了所有动效，整体效果如下：
手机淘宝首页的2018年双11主会场入口
可以看出，动效包含以下几个部分：
1、主会场入口背景图旋转
2、主会场商品图及按钮出现
3、“立即抢购”按钮文案切换
我们要分别输出以上3部分的视频示意以及具体的动效参数。以其中相对复杂的第2部分“主会场商品图的出现和切换”为例，提供给开发的视频如下。注意在这个案例中，因为开发是针对图形元素的容器来编写动效，所以我们需要将图形抽象为容器。
经抽象为图形元素容器的交付版本
同时需要提供给开发的是动效参数。下图是我们使用的参数图形化表达方式，纵向为各个元素，横向为动效时间轴。
动效参数产出物
实际上，各位同学也可以根据自己的实际情况来绘制，原则是清晰明确即可。
从合理的工具选型，到严谨清晰的文档交付，技法层面的干货就写到这里。文章的最后，笔者想谈的是互联网产品中动效初心。
动效并非炫技的手段，而是实实在在用于衔接用户在各个体验散点之间的润滑剂，符合用户心理预期、不打扰用户，甚至让用户几乎无所察觉的动效，才是真正优秀的动效。
许多创意网站上初见确实惊艳的动效，如果在用户实际使用中过度使用，轻则有拖沓之感，重则引起焦躁。这一原则对于旨在让用户“买买买”更的淘宝而言，尤为重要。
动效技法只是基本功，在“不打扰”中体现同理心和精巧的构思，是动效设计更重要的导向。重剑无锋，大巧不工，与所有Motion designers共勉。
蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com