弹窗在设计中运用的非常广泛，基本上每个应用都会涉及到。恰好这段时间我也在整理公司设计组件这一块，所以就想总结分享一下
设计师都会使用弹窗，但对于弹窗背后的分类及运用可能还不是特别了解，在写这篇文章之前，我查看了很多应用及资料，所以下面会有大量的案例，相信大家看完可以对弹窗的认识更明确，做设计规范的时候也能有自己的想法。
现在的弹窗分为两种，一种是模态弹窗（重提示），一种是非模态弹窗（轻提示）。
常见的模态弹窗：Dialog/Alert、Actionbar、Popover/Popup
常见的非模态弹窗：Toast/Hud、Tips、Snackbar、
Dialog/Alert 对话框
对话框是我们常用的弹窗，安卓开发语言是Dialog，iOS开发语言Alert，它通常出现在页面的中间，对话框/警示框的类别非常多，对用户的干扰比较大。前面之所以说模态弹窗是一种重提示，是因为它需要用户主动触发选择才可以继续当前的操作。
① 信息-选择确定
特点：这类弹窗通常是一些系统功能的授权、版本更新、消息通知、重要提示等，通常只有1～3个主按钮，只需要用户进行简单的选择。
下图举例分析：
iOS询问是否删除APP，就属于重要提示弹窗，它一般会用在像删除、确认提交...一些比较重要的功能操作中。
小红书的这个是否允许使用网络弹窗，大家一定在许多APP中都见过，这属于一个系统自带的授权弹窗。
马蜂窝与天猫的消息提醒弹窗，一个属于初次使用APP时，系统自带的弹窗，一个属于使用后期APP为了推送消息，主动提示你开启消息通知。
有钱花和爱奇艺的版本升级弹窗，都属于偏运营类的弹窗，这一类的弹窗通常会弱化暂不升级的按钮，突出升级主按钮。
② 信息-输入勾选
特点：这类弹窗通常是输入一些比较少的信息或者勾选信息，常用于备注输入、规格选择、分组选择等，通常只有确定和取消两个按钮。
下图举例分析：
微博对于已关注人的分组及备注，都属于信息输入及勾选类弹窗，操作通常都比较简单。
③ 信息-传达展示
特点：这类弹窗通常是一些广告、红包优惠、节日活动等一些运营类弹窗，主要是吸引用户点击及参加活动，这类运营弹窗通常会设计的比较吸引人，造型各异，会突出领取、查看等大按钮，弱化关闭按钮。
下图举例分析：
拼多多和饿了么这类的红包优惠弹窗，就不多说了，大家都懂，它们最主要的目的就是吸引用户点击，提升购买率。
美团的变黄送好礼弹窗，属于一次比较大的品牌升级，它主要目的是让用户更好的了解并接受品牌色升级。整体的元素及动效设计都非常清晰，视觉感很强。
支付宝的这个猜世界杯赢蚂蚁积分的弹窗，属于活动弹窗，它的整体设计非常贴合主题。
Actionbar操作栏
Actionbar主要分为Action Views和Action Sheets。它们通常是由底部弹出，它的操作及信息会比对话框类型的弹窗更多更复杂。这种当前页面的下拉弹窗好处就是，可以让用户清楚的感知当前的操作，比跳转到新页面更加有安全感。还有一个特殊的抽屉式弹窗也顺便说一下。
① Action Views操作视图
特点：这类视图弹窗通常占屏比较多，以文字、图标等形式展示各种功能，也可以说这类的弹窗是一个小型的页面。它一般从底部弹出，不太强调归属，大多出现在购买、支付、分享等场景。
下图举例分析：
百度网盘的这个+号扩展弹窗比较特殊，它也可以说是浮层，占满整个屏幕，它最吸引人的还是它的小动效。
京东购买时的弹窗和支付宝付款时的弹窗，都是比较典型的，在各种电商产品及付款页面用的非常多。
转转这个的键盘与输入为一体的弹窗，设计的非常人性化，让用户一次就可以输入多个价格。大大提高了用户的操作效率。
网易云音乐的分享弹窗就是典型的以文字与图标来展示功能的。
微信读书的底部阅读设置弹窗，比较特殊，为了使用户沉浸阅读，它是比较隐藏的，而且非常轻量化。
② Action Sheets 操作列表
特点：操作列表相对于操作视图，它更单一。主要是以文字展示功能按钮，重要敏感的功能操作一般会用主题颜色或红色显示，主要运用在一些日常控件、功能选择、删除、保存等场景。
下图举例分析：
Keep的选择日期，属于iOS原生控件，非常常见。
淘宝的选择地址弹窗，整个展示的非常清晰全面，而且用户每选择一项，就会有相应的显示。
支付宝和天猫超市的两种列表弹窗，就不多说了，简单的功能选择都会采用这种。
③ 抽屉式弹窗
特点：这种抽屉式弹窗一般从左右两边弹出，经常运用在一些导航扩展和目录展示中，它能承载比较多的信息，基本上都是用来放一些不太常用的功能。
下图举例分析：
微信读书及一些其他阅读类产品，由于目录很长，而且一般是从上到下浏览的，所以基本都采用了这种抽屉式弹窗。
小红书的这个抽屉式弹窗，以图标和文字的形式展示了一些不是很常用的功能，为我的页面节约了不少空间。
Popover/Popup 浮层
Popover是ios的开发语言，popup是安卓的开发语言，浮层是指，用户点击某个功能后浮出一个临时气泡对其作出补充，它通常会伴随着半透明的遮罩或者投影衬底，用户需要点击功能区域操作，或者点击空白处取消，才能进入下一步操作。它与上面操作栏的最大区别就在于，它更强调归属，可以出现在页面的任何地方，而操作栏一般只出现在底部，不强调归属。
① 指向浮层
特点：这类的浮层一般伴随有小三角指向，强调归属。气泡里面的功能通常以单一的文字或文字与图标结合的形式来展示，主要运用在顶部加号补充、复制、分享转发等场景。
下图举例分析：
支付宝和美团的顶部加号补充浮层，展示形式是差不多的，只是UI样式不一样，一个是白色气泡黑色半透明遮罩，一个是深灰色气泡。
微信读书和微信的选择文字气泡，在文字复制中很常见，通常会与其他转发收藏小功能一起出现。
② 导航筛选浮层
特点：所谓导航筛选，自然是与导航分不开的，再加上浮层是比较强调归属的，所以它通常会与导航连在一起，一般出现在顶部。
下图举例分析：
美团的导航筛选，因为选项及开关很多，所以它的底部会有两个主按钮，一个完成，一个重置。
饿了么的这个只有一个功能选项，所以它一般是直接选择就收起浮层了。
③ 引导浮层
特点：引导浮层的作用就是引导用户更好的使用产品及交互，降低用户的学习成本。它通常会出现在用户首次进入APP的时候，一般只会出现一次，点击空白位置或我知道了浮层就会消失。
下图举例分析：
QQ音乐与微医的引导浮层都是用户首次进入应用时，给出的功能搬家提醒浮层。
Toast/Hud 提示框
Hud是ios的控件名词，Toast是安卓的控件名词，它们都属于一种轻提示，给予用户及时反馈，让用户知道自己当前所处的状态。
Hud一般只出现在屏幕的中央，以毛玻璃的样式表现，内容展示比较富丰富。
Toast可以出现在屏幕任意位置，通常以黑色半透明的小框来表现，内容一般是纯文字提示或者文字与图标结合提示。
① 状态提示
特点：状态提示的Toast，它们一般都是反馈用户当前操作的状态，只出现1到2秒就会自动消失，场景一般是关注成功、密码错误、音量提示、静音、清除缓存等。
下图举例分析：
移动的属于操作遇阻提示。
京东的属于操作成功反馈。
iOS的音量控制属于毛玻璃Hud。
微信的清除缓存属于正在操作状态。
② 按键提示
特点：按键Toast提示与状态提示不同，它们一般自动出现或者点击触发才会出现，用于对功能点的补充说明，让用户对功能有更深的了解。
下图举例分析：
蚂蚁森林里点击树木就会出现相关信息，当然它也会自动出现，点击其他区域也会自动消失。
知乎的消息标签不仅有小红点提示，还会在上方自动出现数字提示。
Snackbar
Snackbar是Android中的一个控件。它一般会在超时自动关闭或者在屏幕上滑动关闭，它没有Toast那么轻量，设置出现的时间会比Toast长，而且可以点击按钮进行交互。
下图举例分析：
UC浏览器的Snackbar，是在提示用户上滑，来查看更多内容，它需要滑动或者超时才能关闭。
京东的Snackbar，是在为用户推荐商品，提示用户点击箭头来查看喜欢的商品，它比UC浏览器多了一个关闭的按钮。
Tips提示
Tips与Snackbar最主要的区别就是：Tips它是内嵌在页面上的，而Snackbar则是浮在页面上的。Tips一般要让用户主动触发关闭按钮或点击进入下级页面才会消失，一般用于需要用户感知到的通知信息，或者植入广告。
下图举例分析：
百度网盘在下载视频时，就会出现一个Tips的提示，让用户观看广告来得到加速下载。这种提示虽说是广告，但它抓住了用户的场景及心理，观看广告的几率大大提升。
爱奇艺的Tips提示就属于重要通知提示了，提示用户VIP即将到期，续费可优惠，它们都有一个主按钮及关闭按钮，需要用户主动触发提示才会消失。
规范总结
目前的弹窗样式非常多，你能想到的，你想不到的基本都可以技术实现。但这同时也带来一个问题，那就是“不规范”。以上提到的弹窗种类，你只需要选择符合你产品要求的几个类型，最好不要在一个产品中运用多个同种类型的弹窗，否则后期会很难规范及组件化，当然运营广告类弹窗可以另当别论。
转自：站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
小小开关中的大学问
故事要从我搬到新出租屋开始讲起。半年前搬到新的出租屋后，房间里配置的洗衣机也比之前的大了一倍，而且操作区上分布着的密密麻麻的文字和按钮让洗衣机看起来更高级了，然而这种对它的好感并没有持续多久。在我第一次使用它时，我将衣物放进洗衣机后，选择好时间和洗涤方式，按下了启动按钮（如下图右侧白色按钮）。
按下后洗衣机发出了“滴”的一声，在我的认知里它应该是开始工作了，但是10秒过后没有任何抽水声和洗衣服的声音。我疑惑地想：“是不是刚才并没有成功启动？”，于是再次按下了启动按钮，又是“滴”的一声，但是这次我等了 1 分钟没有任何反应。之后的十分钟里，我与这台匪夷所思的机器“交涉”多次才理解了它的运行方式。这台洗衣机启动后需要等待大概十几秒才开始运行，但是在我按下启动按钮后我得不到任何反馈或者提示来告诉我洗衣机已经开始工作了，所以疑惑的我又按下了一次启动按钮，然而令人崩溃的是这台洗衣机的启动和暂停按钮是一体的，我第二次按下实际是进行了暂停操作，从而导致我第二次的困惑。
如果你是这台洗衣机的设计师，你会怎么解决上述的问题呢？
可能你的心中已经有了答案，在回答之前我们先试着探究问题的本质。
人们不管是使用日常物品还是与机器进行交互，都会面对两个阶段的问题。一个是「执行」，一个是「评估」。执行时用户需要理解如何操作，操作后可能会有什么结果。评估时用户需要知道具体发生了什么。作为设计师我们要通过合理的手段帮助用户解决这些问题，保证交互的可用性和流畅性。
通常我们会使用「意符」在用户执行前告知用户如何理解、如何操作、操作后会有什么结果。在评估前通过「反馈」告知用户结果是什么。
对于意符的定义，在《设计心理学 1-日常的设计》一书中，作者唐纳德·诺曼做出了这样的解释：
人们需要某种方式了解他们将要使用的产品或服务，某些标识表明的用途，会发生什么，有什么样的替代方案。人们寻找蛛丝马迹，寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号非常重要。设计师需要提供这些线索。人们所需要的和设计师必须提供的，就是意符。除此之外，优良的设计要求对产品的目的、结构和设备的操作与使用者进行良好的交代。那就是意符的作用。
简而言之，意符就是在用户使用前，机器为了让用户更好地理解和使用它而做出的提示。而反馈就更好理解了，机器在我们操作后做出的反应就是反馈，没有反应同样也是一种反馈。
下图展示了机器与用户如何进行交互。一个合理的设计可以让用户快速顺畅地进行 1234 四个步骤进而完成任务，而糟糕的设计会让用户不断重复这个流程。之所以会出现糟糕的设计，就是因为在步骤 1 和 3 没有进行合理的意符提示和反馈提示让用户摸不着头脑，进而导致用户根据自己的猜测和过往经验来进行操作，最后得到非预期的结果。
回到文章开始时的洗衣机开关问题，因为开始和暂停按钮是一体的，在没有任何意符和反馈的情况下我按下这个按钮时我并不知道我启动的是开始操作还是暂停操作。
我们可以就这个问题列出以下解决方案：
1.增加文字提示，如启动时在显示屏上显示“已启动”，暂停时显示“已暂停”；
2.增加语音提示，启动开关后使用语音告知用户“已启动”或“已暂停”。
当然解决方案有很多，每个人都可以根据场景想出不同的解决方案。
与现实机器的开关类似，在 UI 设计中我们如果进行开关设计也需要遵循相应的设计原则。
一个合理的开关设计主体包含的意符分别有两种：
1.表示当前状态；
2.表示操作后的状态。
主体之外我们还可以添加辅助提示更加清晰地传达意符和反馈。
接下来将介绍一些常见的开关类型和辅助提示类型，最后总结出体验优质的开关设计方法。
二.开关类型
1.icon
在 UI 设计中最常见的开关可能就是 icon 了，即由单一的 icon 通过颜色或图形的变化来表示开或关的状态。因为交互设计从古到今并没有统一的严格标准，所以到底是将开关 icon 的样式设计为「当前状态样式」还是设计为「按下之后的状态样式」并没有一个约定俗成的规则。然而，对比而言如今各类 App 设计中常见的且体验比较好的方案还是将开关样式设计为当前状态样式。如下图iPhone自带相机的实况照片开关icon就是显示当前状态。
然而，并不是说将开关样式设计为当前状态样式做法普遍且体验更好就可以这样做了，有些开关的设计因为使用广泛，已经在用户的心智中扎根，我们如果强行改变反而适得其反导致体验变差。最典型的就是视频和音乐的播放暂停开关，他们表示的就是操作后的状态而不是当前状态，如下图。
因此，大部分应用的开关类 icon 都是混用当前状态和操作后状态的，如下图哔哩哔哩的视频播放界面，播放暂停开关 icon 表示的是操作后状态，弹幕开关表示的是当前状态，而视频锁开关 icon 又变成了表示操作后状态了。
是否统一倒不是关键，关键是我们是否能够让用户理解相应的意符和反馈，目标是让用户在操作开关前能够知道当前状态是什么，操作开关后当前状态是什么。
举一个反例，下图中的美颜相机的夜拍模式开关就没有直观表现出当前是开还是关，这种有歧义的设计可能让新手用户手足无措，可能本来未开启的功能让用户误以为已开启，导致拍出来的照片不符合用户预期。
由此我们可以看出，单一的 icon 开关如果没有其他的辅助提示会造成意符和反馈的缺失，进而形成较大的歧义性，用户会在疑惑中按照自己固有的心理模型和过往经验进行判断，体验因此降低。
2.主体与开关分离（分离式）
上一部分举了美颜相机的反例，其意符和反馈不明产生的歧义问题导致了用户的困惑，但使用「主体与开关分离」（后文一致简称为“分离式”）的开关设计可以解决这个问题，它在意符和反馈层面都给予了用户提示，可视性很强，完全解决了开关状态无法被用户感知的问题。分离式开关指的是，主体不再充当开关，只当做开关的名称或icon，另外制作一个开关传达意符和反馈，解决了当前状态与操作后状态混淆的问题，其通常的样式如下图。
如下图，Faceu激萌不同于美颜相机设计方式就是将主体与开关分离，很清晰地传达了当前开关状态。
大部分App的设置页面使用的开关都是主体与开关分离的方式，如下图。
显而易见，分离式开关直观展示了当前状态，在消除歧义方面优于 icon 开关，但同时缺点也很明显，它占用了过多页面空间并美感欠佳。
3.名称变化
名称变化指的是开关依赖于其名称的变化告知用户开关的当前状态和操作，常见的类型如下：
部分 App 会将开关的名称变化的方式统一，但也有部分 App 会将这两类进行混用，即一个是表示当前状态，一个是表示操作。
下图为部分 App 的名称开关，我们可以将上图的开关名称类型的序号对号入座。
表示操作的按钮文字具有一定引导性，用户容易感知和触发，反之，表示状态的按钮文字由于不具有引导性，如果用户没有对这类按钮形成使用习惯甚至难以意识到它是可点击的，因此我们可以利用其特性进行逆向应用引导用户的行为。比如在直播App中，我们希望引导用户关注主播，又试图避免用户关注后又取关主播。我们就可以将“关注”制作为表示操作，文案写为“关注主播”（属于1.开启...）。将“取消关注”制作为表示当前状态，文案写为“已关注”（属于7.已开启...）。前后的颜色进行区分，“关注主播”的按钮制作得对比度强，吸引力大，“已关注”做得弱一些，让用户误以为不可点击，如下图的斗鱼直播。
然而，名称变化的开关由于语言的模糊性，仍然造成了部分歧义。我们可以发现很多App的名称变化开关设计中，都会在操作后加入其它提示来消除歧义（如：toast 提示），有些App则并未加入，因此在后文中会着重介绍辅助提示的优点和使用方法。
小结
icon、分离式、名称变化，如果按照消除歧义的优劣排列的话，大概是 分离式>名称变化>icon。
那这样的话是不是应该把开关都换成分离式呢？当然不是，分离式虽然在意符和反馈的层面很充分地消除了歧义，但是其也有明显的缺点，分离出的开关会占用部分空间，可能会影响美观，因此我们需要根据需求和页面结构选择最适合的开关类型。
那名称变化和 icon 类的开关如何消除歧义呢，我们可以通过添加下面介绍的辅助提示来解决。
三.辅助提示
1.环境暗示
环境暗示指的是用户在操作开关前，开关以外的区域给予用户的提示，这些提示本身存在于交互流程中并不是我们刻意加入的，用户根据这些提示可以判断当前状态以及按下开关后的状态。
例如在观看视频时，当用户去按下视频播放按钮前，用户会通过当前图像静止与无声音这个环境暗示明白当前状态是可能是视频未播放，所以应该按下播放按钮让视频播放。
再比如得到 App 的夜间模式，用户可以通过当前界面的样式判断当前是否已经开启了夜间模式，如下图。
看下图，如果没有环境暗示，你能分清得到的夜间模式的开关哪个当前状态是夜间哪个当前状态是日间吗？
因此，环境暗示的优势是我们不需要进行另外设计其他的意符和反馈告知用户当前状态，环境给予的暗示已经足够直观。
2.模态/非模态提示
当用户按下开关后模态和非模态提示可以在反馈层面告知用户，让用户知道自己是触发了开启还是关闭。
常见的模态提示控件是「警告框（Alerts）」，非模态提示控件是「提示框（Toast）」，前者提示强度大，使用在一些危险、重要的反馈中，后者则使用在一些轻量的提示中。
介绍 icon 开关的部分我们提到了美颜相机的夜拍模式的 icon 开关状态难以区分，但美图秀秀在这里使用了顶部的非模态提示在反馈层面告知用户当前状态，很好地解决了这个问题，如下图。
拉勾网的设置中，隐藏简历为危险操作，用户极有可能由于开关名称的歧义或由于疏忽触发开关导致简历被隐藏从而错过工作机会，因此此处设计了一个形式为警告框的模态提示来告知用户当前状态以及潜在风险。
3.辅助文案
辅助文案指的是在主体（主体可能是开关名称、icon 或二者皆有之）之外另外放置一些文案信息来充当意符和反馈。下图案例就是高德地图的下车提示的开关，开关的主体是名称，但是下面的一行辅助文案很清晰地传达了当前的开关是什么状态。
4.其他辅助提示
并不是所有提示都需要让用户看见，我们可以给予用户其他感官的信号告知用户当前开关的状态。
在现实生活中，我们会通过钥匙在锁中扭动发出的声音判断锁是否被打开，通过触摸感受摩托车是否继续震动判断其是否已经熄火。
同样，在 UI 设计中，我们也仍然可以使用听觉和触觉来消除开关的歧义。一个比较优秀的案例是高德地图，当用户打开下车提示之后，会出现语音提示“已开启下车提醒”，它充分考虑到身处户外的用户可能并不能很方便地获取屏幕上的视觉信息，因此使用语音的形式提示用户。
小结
辅助提示很好地补充了开关在消除歧义上的不足，但我们需要合理使用否则就会产生不必要的视觉噪声。如下图，试想音乐的暂停播放开关如果加入的 toast 提示会怎么样呢？由于我们已经可以通过“手机是否发出声音”这个环境暗示获知当前的开关状态，如果再加入 toast 提示必然会出现不必要的视觉噪声。
4.总结
介绍完开关类型和辅助提示后，我们如何将其应用到我们的产品中，设计出无歧义或低歧义的开关呢？
如果我们选择的开关类型已经足够的消除歧义，如分离式，我们就不太需要额外地增加辅助提示了。但是如果使用容易造成歧义的开关，我们可以按照（开关类型+辅助提示 1 +辅助提示 2 +......）的公式进行设计，即一种辅助提示不足够消除歧义，可以使用多种一起。
举个上文的例子，高德地图的下车提醒开关的设计就是「名称变化开关+辅助文案+语音提示」 的组合。
然而，任何设计都不是完美的，很多地方都需要我们做出妥协，虽然我们可以选择合适的开关类型和辅助提示解决歧义问题，但随之而来就可能出现其他问题。如分离式开关消除歧义效果很好，但是占用空间且不美观，模态和非模态提示给予用户的反馈比较强，但是可能打扰到用户。
综合上文提到的三款相机软件作为案例，如下图，我们可以发现在消除歧义的过程中避免不了对用户造成的干扰或页面美观度的降低。我们很难去评判Faceu激萌、美颜相机和美图秀秀哪个设计得更好，它们只是在易用性和美观性之间找到了它们所认为的平衡点。具体如何设计，还是要具体问题具体分析。
那么我们应该如何进行取舍呢，在这里我们要考虑另外的因素。我们可以从以下角度分析，使用频率、用户人群、潜在风险等。
使用频率：使用频率越高，用户对操作的熟悉度越高，歧义对用户造成的理解与记忆成本就降低了，设计可以偏向低干扰和美观度，反之使用频率越低，歧义对用户造成的理解与记忆成本升高，设计就应该偏向于易理解。
用户人群：不同的用户人群的风格偏好、认知能力是不一样的。例如，我们要设计一款目标用户为年轻人的相机产品，设计风格简约，此时我们比较偏向的设计方案可能就类似美颜相机。反之，如果我们的目标用户是中老年人，就要偏向于易用而牺牲美观度，方案转而偏向美图秀秀或 Faceu 激萌。
潜在风险：开关的切换如果会导致潜在风险，设计就应该偏向于易理解，且需要使用模态提示告知用户风险。例如用户如果关闭了推送通知开关，会导致接收不到实时重要的信息通知，此时不仅要使用易识别的开关类型，还需要添加模态提示告知用户风险。
我们可以将这些考虑角度放到雷达图，如下图所示，最终形成的面积越大我们越应该将按钮制作得易理解、易使用，反之我们可以偏向于将开关制作得更美观牺牲一些易用性。考虑到一些特殊产品的特殊用户属性，我们可以在下图中增加其他考虑角度，其并不是一成不变的。
以上是本次对开关设计的思考，看似小小的一个开关，包含的学问却不胜枚举。作为一个互联网产品设计从业者，一定要善于感受生活，用设计师细腻的内心去打量、洞察身边的一切事物，发现美与不足，思考改进方法，并在这个过程中逐渐提升自我的价值。
转自：站酷-Ballen贝林
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
介绍表单设计里经常会犯的错误~
无论是注册流程，还是信息输入的界面，表单都是产品设计里最重要的组件之一。本文重点介绍了表单设计里常见的注意事项。不过这些只是通用的规则，实际应用中总有例外~
少于6个选项的情况，建议全部显示
把选项内容放在下拉框里，不仅隐藏了选项内容，而且需要两次点击。如果大于5个选项，建议用输入选择器，如果超过25个选项，建议加上搜索功能~
输入框长度可以暗示内容长度
输入内容的长度决定了输入框的长度。这种做法适合应用在一些固定长度信息的情况，比如银行卡号、电话号码、邮政编码等。
标签顶部对齐
相比左对齐，标签顶部对齐的表单用户完成率更高。移动设备屏幕大小有限，顶部对齐的效果也更好（标签文案长度不可控）。然而在大量数据输入时，还是可以考虑左对齐标签，因为浏览更，还能节省高度。
不要把占位符当做标签
用户在输入的时候就会看不到标签内容是什么了。详见Nielsen Norman团队的总结。
*也可以参考Google的做法，默认把占位符当作标签，输入时标签移动到输入框上方
将复选框/单选框上下排列
上下排列方便浏览阅读，横向排列选项内容会被选框控件隔开。
指出错误在哪
告诉用户具体哪里出错了，以及错误的原因。
等用户填完了再进行验证
不要在用户正在输入的时候就去验证，除非这能帮到他。例如在创建一个有字数限制的密码～
不要隐藏帮助信息
尽量默认显示帮助信息。如果信息太复杂，考虑在输入时放在输入框的旁边。
不要用*星号表示必填项，标出选填字段
用户不一定知道星号代表什么含义。还不如明确的标出哪些是选填字段。
标签和输入框成组
标签和对应的输入框形成一组，他们之间的间距要比组与组之间的间距小，这样用户不会困惑标签是属于上面还是下面。
按钮的文案描述具体意图
比如按钮上的文字建议写“注册”，而不是“提交”。
主次按钮有层次区分
关系近的内容成组
太长的表单让用户感到不知所措。有逻辑地分组能让用户更快地理解表单。
转自：站酷-大秘密mimi
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
自从上一篇发文得到一些发表方向，以后决定以个人独特的总结以及符合商业的思维逻辑来写作设计拆解的相关文章教程，前期我还是按大类去诠释我的整个想法，看看大家的反馈，如果理解门槛还是有很大障碍，我在后期的文章中会再将文章细化出来。
拆解分类
拆解1、视觉面积的影响
拆解2、明度对比的影响
拆解3、色彩的影响
拆解4、视觉位置的影响
拆解5、丰富层度的影响
拆解6、其他（浮层、常用点、角标、动效）
拆解1、视觉面积的影响
视觉面积越大层级越高，而且与比较层的面积倍数有关，参考层如果为1级，那比较层的等级是由和参考层的倍数有关，大一倍那就为2级，大两倍那就是3级，依次类推。这是美术基础中的近远的关系，越靠近的视觉点越大，越靠远的视觉点越远，这样也很容易知道，越近获得关注越高，越远越低。
界面举例我们告一段落，这里再说一下比较常遇到的文字视觉面积，这块很容易被忽略，其实文字也是具有视觉面积的，而且有不同的视觉大小。接下来我会将所有可能性都拆解出来。
同字号大小，不同粗细层度的影响/文字的边宽形成的格式塔大小就是文字面积，但不一样的是，文字是线性结构，所以他不是实面，而是虚面，所以它相对于实面来说还是低一个等级，再说回到粗细的层级比较，越粗的文字他是越靠近实面的，所以这就能判断越粗的文字层级越高这个道理。
同粗细，同字号大小，一个是有文字底块，一个没有，这样有文字底块的视觉层级会比没有文字底块的视觉层级要高，因为有底块相当于为实面，这样就比没有文字底块的层级要高了
同粗细，不同字号大小，这个不难理解，这个不存在实面虚面的概念了，因为都是一样的粗细，但是这个格式塔大小不一样，也就是说，格式塔越大的层级越高，字号越大的层级越高。
拆解2、明度对比的影响
明度对比越高的视觉点会比明度对比低的视觉点视觉层级要高，这里其实也是美术基础中的空间的视觉差，越远的物体越模糊（对比小），越近的物体越清晰（对比大）。所以对比大的层级会比对比小的层级会高。（这里插一句，色相也是有明度的，不同的色相也是有不同明度解析，这个可以运用到电商banner的配色上）
下面来看看文字和背景不同对比度对视觉层级的影响。我们将统一文字大小和粗细，背景为白色。
拆解3、色彩的影响
有色的视觉点总会比无色的视觉点更吸引人，因为色彩也是美术的一类，给没有色彩的视觉上色是提升视觉体验的一步。
文字为例：同等大小同等粗细同等明度的字，有颜色的字体会有更大的关注点。
拆解4、视觉位置的影响
给界面一个横轴和纵轴，从横轴的左边到右边起视觉层级逐渐减弱，从纵轴的上到下边视觉层级逐渐减弱。这是因为用户阅读习惯的问题，人们习惯从左上方开始往右边阅读，然后慢慢的往下读取信息。
拆解5、丰富层度的影响
丰富层度越高的视觉层级越高，丰富层度越高的点信息量越大，越需要花时间停留。
文字为例：设计过的字体丰富层度会比默认字体高，所以有些需要强调的标题或者banner上的字体都是有精心设计过，为了拉开于界面的层级。
界面为例：界面首页中的banner是丰富层度最高，其次是金刚区，再是标签栏。
拆解6、其他
除了上诉的主要层级影响，还有其他一些特殊的影响，我这就说两三个子吧。一个呢是给模块直接加投影，硬生生的造成前后层级。还有角标的影响，在干净的页面中突然来个提示角标，例如微信有消息时的小角标。还一个就是用户常用关键点，那个视觉层级整个产品中的最高层级，这个需要打破所有规则，这个是由用户主动选择的视觉层级点，例如电商软件的搜索框，不管这个搜索框大小如何，层级怎么低都行，但对于用户进来，第一个渴望的点就是这里，最后是动效的影响，每个动效就是一个互动，动的东西永远比静止的东西有活力更加吸引人。
图片来源UIGREAT的作者JGM
总结
视觉层级的梳理可以很大幅度的提升视觉规范和用户体验，通过视觉层级的分析，可以从不同方面去诠释复杂的页面，也可以更好的去处理文本关系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
正确认识卡片式设计，什么是卡片、总结卡片优势、卡片正确设计知识通过设两个案例进行讲解，卡片在运用时的技法，望能帮助大家。
今天顺叔和大家一起聊一聊卡片式设计，无论是WEB还是APP卡片式设计运用的比较多，很多UI设计师比较偏爱这样的表现，卡片式设计会给人一种视觉上的享受，也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解，不能因为卡片式设计而卡片式设计，要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家，之后的几篇系列文章中，顺叔会从界面中比较趋势的设计技法进行分析，希望能帮助到一些设计的小伙伴。
引言
卡片式设计这几年比较流行，同样这样的设计表达也是个趋势，应用在APP PC界面中至今还流行着，从事UI设计的都会知道卡片式设计，具有把内容整合模块化，从视觉，个性化体验上进行呈现，是设计师在设计时常用的一种表现，同样也具有独特的创新概念。
在一些项目中，一些客户会说这个设计的APP界面有点太白，没有层次感怎么办，那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法，卡片式设计，可以解决在画面中有个性化、变化、层次感的设计。那客户又问什么是卡片式设计呢？
一、什么是卡片
无处不在的卡片设计具有个性的美感和很好的易用性，是以文字标题，小标题，图形或图片组成的模块化，以块状形式规整的整合内容，让内容更规整化，视觉上更个性化，也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势，而卡片在设计中也占用一定的优势，让整体更加的有层次感，在运用起来也比较方便，从视觉、体验、交互都具有不错的优点
设计效果图展示
二、卡片设计优势
1.趋势
无论是大平台还是小平台的产品都会运用这样的卡片式，跟风式设计趋势，也让卡片式设计成为了一个现在常用的优势，不过卡片式设计的确有很好的效果
2. 层次感
具有一定的层次感，能在页面版式中起到设计上的不同，个性化变化，页面层次感区分强烈，能更好的体现提炼出内容
3. 规整化
卡片式设计以图片、图标 、LOGO、标题、整合到一起以块状的形式在界面中展示，更规整的排版呈现。虽然内容多会导致页面乱，一个模块包含内容之后就会规整不少，也给页面设计上带来了更好的视觉
4. 视觉体验
卡片式给整个页面会增加视觉上的体验，特别那种大图片卡片式更具有视觉上的冲击力，背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、产品需求 、功能进行设计。以达到最好的用户体验、视觉体验。
不要为了卡片设计而卡片设计。
5. 易用性
卡片式设计在易用性和灵活性上比较高，在响应式设计中同样应用的也比较多一些。能更好的有序排列。
6.简约设计
简约设计会更显得品质，不需要过多的进行装饰，哪怕就是一个白色的色块，上面点缀有色彩的图标和标题副标的变化，也会觉得显得高大上，就算是一个带有颜色的色块卡片，也无须过多的设计内容上的标题 、图标、按钮就足以支撑起卡片
7. 交互效果
在卡片式的设计中会有一些动效交互，比如整体卡片放大、缩小 、左滑、右滑，可以整模块化滑动缩放。整体效果增加了不错的视觉交互体验。
三、卡片正确设计知识
一般在界面设计中卡片的存在的意义和表现手法都是什么样的呢，下面为大家举例了几种常用的正确的设计表达姿势。希望小伙伴在设计的同时有所灵感和参考，把一些表现手法加入到自己的设计中，适合才最重要。卡片式设计还是要根据整个风格和整个布局而进行展示，在做进一步的对比和布局中以最好的效果为最终展示方式，总结分析几个常见代表例子，如有不全请讨论补充，下面就是一些例子
1.卡片式形式一
以色块为主体并用现在比较流行的渐变色组成，其中四边为圆角，同样色块下边阴影衬托出主题，这个是在卡片中设计比较常见的运用手法，卡片的长高在设计中也是根据结构，内容功能而进行设定。正方形，长方形都是一个表现得手法，在色块上面标题文字，图标，图形是整个卡片的布局的形式，无非就是左右布局和上下布局
应用场景：卡包、天气、类别、入口、优惠劵，卡劵
此图片来自于网络
2. 卡片式形式二
这种形式共同点都是在头部C位出现的卡片式设计，其中承载着标题，副标题，以及图文版式，不难发现，如果图片有颜色，那么下面是白色底，这样在白底上面色块的出现还是比较简约凸显卡片，如果背景有颜色，卡片也有颜色那么卡片的凸显程度就不会那么强，图二很多在会员卡设计中常用的比较多，也比较简约，另外两个共同特点背景有颜色，一般底部背景颜色就是整个界面的主色调，背景有色块，上面就用白色卡片，卡片上方标题、文字、图片呈现。只不过排版的方式有所不同而已，在很多APP设计中，这样的表达也很多，通过主色调可以很融合的把上面的状态栏，导航栏融为一体视觉上统一性，底部背景颜色延续下来，上面凸显白色卡片，这样更具有视觉感和层次感。白色的卡片不需要过多的修饰，更能体现的上面的文字和图片。
应用场景：会员卡，滑动卡片，图文标题，入口
此图片来自于网络
3. 卡片式形式三
这种形式上图下文字，或者是上标题，下图片的形式，这种形式特别在图片素材的选择上尤为重要，有视觉效果好的图片通过剪切，处理，合成，摄影，插画等等方式，出现的图片质量上好的话可以带动整个设计的逼格，通过有效的图片传达，文字传达，让用户更清晰的了解。这样的形似一般在入口或者列表的形式出现的比较多，同样也能体现出整体化和视觉化
应用场景：滑动卡片，图文标题，入口，列表
此图片来自于网络
4. 卡片式形式四
大图卡片式，一般以摄影图片，插画形式，文字压与图片之上，这样的效果更具有冲击力，也能显得出比较潮流。体验也很不错，放大视觉，展示内容，图片相结合，让浏览者更愿意多看一会。表达的图片与文字内容相符，做到图文交融的程度。一般这样对于图片的选择上还是比较要求严格的。没有质量的图效果会降低。
应用场景：列表，说明，入口，天气
5.卡片式形式五
列表卡片设计，这种形式一般白色的卡片，上面标题，头像，按钮，扁平插画形式体现，更多应用在一级页面的下方内容，以及二级页面的列表页或者集合页，整体弱化背景以白色为主，给予圆角及阴影承托出层次感同时，体现上面内容部分。每个模块的单元体具有统一的视觉。
应用场景：列表，集合页，入口
6. 卡片式形式六
大卡片式设计，表现为一块特大的卡片式，上面会有标题，按钮等信息，同样表现出突出层次感，个性化设计的特质。体现出内容，一般背景有颜色上面卡片为白色，如下面背景为白色，那么卡片的形式也可色块，在对比上有个反差，才能突出卡片的作用性。
应用场景：提示，说明，优惠劵，劵，入口
以上总结的几种卡片的形式，在设计中可以根据情况而设计，卡片多样化，布局多样化，适合自己产品的才最重要，虽然在界面设计中常用的设计，但不要盲目的为了卡片而卡片套用设计，这样起不到作用反而效果达不到理想程度。希望几个卡片形式总结能给大家带来一些灵感和启发。
同样在这些卡片中会有一些基本的共同的特点
共同的特点是
1. 四个角都是圆角
2. 根据潮流渐变色或白卡片
3. 色块下的阴影，色块下的阴影更能体现出层次
4. 卡片上面组成部分，标题，副标题，图形，按钮，图片，头像
5. 字体大小，字体颜色的变化
6. 一般卡片应用在会员，列表，说明，优惠劵，分类，类别，集合页，欢迎页等场景常见
三、卡片正确设计知识
为了讲解一下，顺叔随便构思一个产品原型，而快速进行了简单的设计，一个第一版，一个优化版，主要为了讲解一下这个卡片设计一些问题，
以下此图为构思的原型图
经过分析原型图之后开始进行设计，首先设计一个版本的，如果这样卡片布局设计，这样色彩搭配的情况下，会怎么样呢，整体设计用了蓝紫色为主色调，首先铺蓝紫色的色块作为背景，然后上面放白色卡片，以至于卡片上详细的内容，比如数字，图形能更好的丰富支撑卡片。同样数据流也是比较重要的C位。也是比较重要的位置。接着根据原型图下面有两个卡片，通过扁平化设计，以色块为主设计一个蓝色，一个橙色的卡片，上面并有图标，头像，以及标题，两个颜色的对比，更让视觉有冲击力，整体看这个设计并没有什么，但有个问题在于单个模块拿出来效果的确都不错，但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉，当打开这个界面的时候视觉落点在彩色卡片上，那么这个整体设计上就出现了问题，上面的数据，白色卡片其实是比较重要的，而且整个画面都是卡片毫无设计上的变化，那么只能在这个基础上在进行优化，其实大家在做设计的同时也这样，在考虑功能模块前提下，用户体验，也要考虑视觉体验，那么视觉从哪方面来，色彩、层次、版式等等方面。那么能不能在进行一下优化呢，其实还是有空间在进行优化。（以下图为第一版）
设计第一版
根据上面的设计在进行优化，同样保留白色卡片部分元素，在卡片与卡片之间放一些颜色的图标，这样更好的给功能上快捷入口，也能给卡片设计增添了变化。使得整个画面更灵活
虽然白色卡片，但有一些色彩的点缀，也让白色卡片活跃起来，把颜色的卡片改成白色卡片，从上到下的版式舒服多了，也没有那么跳。整个风格更简约，同时功能也更全面。
调整后
从原型图，在到设计第一版，在到优化调整之后，证明一点，卡片不要因为卡片而套设计，反而会失去效果，考虑功能模块，用户体验，视觉体验也一定让整体舒服。一直都说，绘画中需要有主有次，设计中也一定要有主，有次的进行设计。这样层级关系才能更清晰。
但这些条件一定是从，体验、色彩、布局、版式等方面进行对比和研究的。设计不要先着急做设计，前期的进行思考，逻辑清楚了，在进行设计的时候会更加的顺畅。卡片式设计，大家都在应用，希望这个文章能给大家带来一点点知识点，那就不枉费我在熬夜写这篇文章。
不为别的，只是一个喜欢分享的肉团子。这篇文章就写到这里，如果喜欢请给个赞吧。如内容有没说到的地方，各位可以进行补充，以上两个图你稀罕哪个呢？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
编辑：蓝蓝
另外一种探索需要被定义和解決的问题的本质的方法是圏问题。
简单地说,我们向于用常具体的表达方式来定义问题,这会严重限探索解决方案的机会空间。
你同样可以运用可视化的方法去“圈问题”来跳出这个预设。
在运用这个工具的时候,比起在不同利益相关方的视角之间切换,更多的是要变换看待挑战的有利视角,例如从零距离、较远处、10000英尺去看,都会产生对问题的不同看法,以及新的解决问题的空间。
圈问题的定义
首先,在一页纸的中间,写下你对问题的定义,把它圈起来。现在考虑一个更广泛的、更考虑问题所处环境的定义,写在第一层定义旁,然后把它圈起来。
这样做一到两次,每次都让问题的定义变得更像是放在环境中考虑的,当然,要和原始的问题定义相关。
例如,或许你的团队正在开发一种液体洗涤剂,瓶盖有间题,液体很容易流出,搞得一片狼藉。
你可能把问题定义成“瓶盖封闭的问题”。把它写在中心,圈起来,这是一个非常具体的问题的定义,也很容易解决。
但就这样的定义方式,该问题解决起来可能是渐进的、很枯燥的。现在写一个更放在环境中考虑的问题定义,也许这是一个“倒液体的便捷性问题”,把它圈起来。
第三层再用更抽象的语言去定义:挑战是“使用无忧,有乐趣”。毎个定义不同,指向的解决方案就不同,最后一个或许是给了足够的开放的空间,以产生出创造性解决方案的,例如可分离式容器。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
作为交互设计师，天天画的就是交互稿了。而对于很多新手交互设计师以及想转行做交互的同学们来说，一定都非常想知道大厂的交互设计师画出来的交互稿具体是什么样子的。但和视觉稿不同，交互稿里面体现了太多产品本身的逻辑，难免涉及到一些敏感内容，所以具体的交互稿不太适合直接分享，这就是比较尴尬的问题了。
不过，这不妨碍我为你们做一份交互稿模板。一来我自己也在用，二来可以帮助大家，何乐而不为。
但我必须重点强调一句话：框架是死的，人是活的，不一定要拘泥于某种形式，你可以根据自己的需要自由修改。
第一个是 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
作为视觉设计师你是否会遇到这样的问题，当需要做一个 loading 或者其他动效的时候，总会或多或少的出现一些问题，如何使用更轻量的 Sketch 直接将矢量图形转到 AE 制作动效，如何不再受 GIF 导出的失真问题困扰，如何让开发完美还原我们的动效设计稿等，如果你也存在这些疑问，那以下介绍的2款插件就可以完美的解决这些问题。AEUX 是由 Google 团队推出的，运用在 Sketch 和 AE 的一组插件，能将 Sketch 里的图层以及整个画板一键导入到 AE 里，同时能在 AE 里解决图形分组和分层的问题，减少导出图片或者转入 Illustrator 处理带来的不必要的重复动作。
以下是我做的一个简单小案例，通过此次案例将介绍怎么更好的使用这个插件：
首先在 Sketch 内将图层进行分组，在多图层的情况下，需要在前期进行动效构思，根据构思在 Sketch 里对图层进行分组，所做的分组将会是你在 AE 里的合成分组。
方法一：直接复制选中图层
安装好插件后，打开 AEUX，选择你将导入到 AE 里的图层，点击 Send selection to Ae，同时在AE里打开安装的 AEUX插件，在 BUILD COMP 区域出现了从 Sketch 导入的图层数量，勾选 Precomp groups，点击将自动加载入 AE 合成里。
方法二：导出json文件
从 Sketch 的 AEUX 面板里点击 Export AEUX.json 导出 json 文件，打开 AE 的 AEUX 面板勾选中 Precomp groups，将导出的 json 拖入到 BUILD COMP 区域，或者点击「曲别针」icon打开 json 文件。
这样导入到 AE 里的图层是以合成的形式展示 Sketch 里的分组。
如果在 sketch 内，分组图层不在同一组内，导入 AE 后会出现变形和位移的情况。
如果 sketch 内形状图层有投影/渐变/point type 的编辑形状时，导入 AE 后将出现投影消失，渐变消失，形状变形的情况，在遇到这种情况时，会通过导出图片的方式处理。
导入 AE 的 AEUX 面板时如果没有勾选 Precomp groups，多图层导入的情况下，组内的图层都会生成在 AE 中的同一个合成中。
1. Detach symbols
这是一个解除 symbol 的功能，在 sketch 内如果没有解除 symbol，导入到 AE 里将出现图形位移和变形的情况。
2. Flatten shapes
AEUX 支持布尔运算，但是在一个组中混合不同的运算符（如添加然后减去）对于Ae来说比较困难。点击 Flatten shapes 可以合并布尔运算图形。
3. Images to symbols
Sketch 只能导出它在画板上看到的内容。如果在 sketch 内图像的一部分超出画板边界，复制到 AE 内部的图像将出现位移的情况。导出前点击 Images to symbols 不会发生被裁剪和位移的情况。
1. Come size multiplier：切换倍数
可以设置 sketch 画板的倍数合成。
2. Auto build artboards：自动构建合成
导入前勾选此功能，在 sketch 的 AEUX面板中复制图层后，在 AE 里不需要任何操作，它会自动复制图层导入到创建合成中。
3. Convert to precomp：创建合成
同时选中单一图层，可以将他们建立一个新的合成。
4. Un-Precomp group：解除合成分组
点击可以解除合成的分组，变成单一的一个一个的图层
5. Toggle Visibility：可以一键隐藏和显示所有的父级图层
6. Delete group layers：删除父级图层
虽然现在 AEUX 有些上面所讲的功能不能支持，但是在一步步完善，希望可以帮助一些习惯用 sketch 画插图的设计师提高动效制作效率，减少不必要的操作步骤。
在动效制作好后，通常我们会导出 mov 然后导入 PS 里生成 gif 格式，但是 gif 会出现质量过低的情况，比如渐变分层，边缘有毛边等情况，所以由2017年 Airbnb 团队开发的 lottie 动效可以完美的解决这些问题，而实现 lottie 动画需要在 AE 中安装一款名为 Bodymovin 的插件。
Bodymovin 以 Android/iOS 原生动画的形式在移动设备上渲染播放，在制作动效时导出 json 文件直接给到开发，可以帮助提高实现动效效率，同时提高动效质量。
1. 它还有很多的优点
2. 在使用中有几点注意
3. 所需软件
ZXP installer
下面是一组之前做的页面加载loading效果，开发小哥哥反馈：实现挺。
4. 步骤
下载ZXP installer：https://aescripts.com/learn/zxp-installer/
下载bodymovin：https://github.com/airbnb/lottie-web
下载之后，点开刚下载的 ZXP，点开顶部 file-open，打开 bodymovin插件。
当出现以下界面时代表已经安装成功。
意外情况：在用 ZXP 安装 bodymovin插件的时候出现以下提示。
原因是没有通过 Adobe Creative Cloud 下载 AE，需要重新通过 Adobe Creative Cloud 下载。
打开AE，After Effect CC – 首选项 – 常规，勾选允许脚本写入文件和访问网络。
打开窗口 – 扩展查看是否添加成功。
调出 Bodymovin 面板，选择需要导出的合成。
点击你要保存的 json文件地址，点击 Render。
点击 Brown 载入刚导出的 json文件，检查动效是否有误。
这时候就可以把 json 文件给到开发，如果 AE 合成中有图片，需要把图片放在文件夹内一起提供给开发，同时也会给到一个 gif文件，如果实现有不一样的地方，开发可以询问设计师。
如果想在移动端上浏览可以打开网址：https://www.lottiefiles.com/，下载安装移动端客户端（ios/Android）
注册登录成功后打开 Lottie Preview 添加 AE 里用 bodymovin 导出的 json文件。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
