优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 6 分钟
的确，相比于绘制插画、创作专题页面、设计UI这些富有创造性的设计活动而言，设计表单样式似乎确实是一件单调而苦逼的差事。但仔细想想，如果你设计的表单是支付流程中最重要的环节，那么情况就又不一样了，因为它将是用户选择你和你的企业的起点，也是用户信任的明证。所以这个环节的用户体验必须精雕细琢，尽量臻于完美。除了设计好表格和UI样式之外，合理地运用转场动画会让整个体验提高许多。
更多动效设计文章：
这个地方所用的动画并不是单纯的愉悦用户，更重要的目的是让用户明白这个环节是会发生什么，并且如何高效地使用这一产品。如果这个环节缺少动画会令人感到缺点儿什么，那么这个动画是成功的。如果移除了动画，用户觉得照样可以凑合着用，则意味着这个动画是可有可无的。
作为Stripe Checkout这一支付应用的设计团队，我们在移动支付的体验设计上进行了大量的探索，也耗费了巨量的时间经历。对于支付环节的动画设计，我们有着深入的理解。在着手设计Stripe Checkout的第一天，我们就开始专注于使用转场动画来强化交互，因为我们相信它会极大地提高这款支付APP的用户体验。为了展示它的运作原理，以下我将使用几个动画案例来向你说明。
上图中的转场动画足矣说明动画对于用户的实用性。点击“Remenber me”的选框，输入联系方式的选框随着转场动画逐渐展开。动画的发生会强化用户清晰地意识到“单机选框”和“输入联系方式”之间是有联系的，并且是直接的因果关系。
当我们在填写表单的时候，经常容易忽略一些细小的错误，这也使得我们往往需要将可能出错的地方从头到尾都梳理一遍。然而很多时候，系统提醒我们信息错误的时候（尤其是在支付环节中），报错信息会让用户感到沮丧，检查的过程会令人无所适从，最终会有用户直接因此而放弃继续填写表单。小幅震动的界面，配合着错误内容的标识会明确地告诉用户，信息有误。这种类似摇头的交互行为会更加人性化，从而降低了用户流失率。
用好转场动画，可能会让用户感觉时间过的比实际的更快。谁都明白，当用户在等待的时候，时间会慢如蜗牛。可是当等待过程中有动画效果的时候，即使等待时长不会改变，人的注意力会被吸引过去，自然而然地会感觉时间一会儿就过去了。这种动画效果就是利用了人对于时间的错觉。
微妙的动画转变是我的最爱。上图中从Payment Info转换到Pay $25.00使用了轻微的色彩转变和滑动特效，提醒用户这个过程正在推进。而当支付完成之后，色彩从蓝色转为绿色，转变明显而醒目。在点击了Pay之后，伴随颜色变化的还有一个显示支付成功的短暂的动态图标，提醒用户支付完成。我特别喜欢这个设计，因为它会让用户感到支付完成的快感，让他们觉得完成支付是一件轻松愉悦的事情，
额外的设计
这一转场动画其实有点多余，因为删除它也不会影响整个操作流程，也不会影响使用体验。但是它的存在，会提升操作流程的体验。
像别人一样，我也不喜欢10年前的网站设计。但是这个转场动画会提高用户的体验，让用户感受到设计的善意，吸引用户去注意支付的细节并获取信任。
我的这些案例，都是在平时大家不太在意的细节处增加了转场动画，改善了整体的用户体验。无论你在构建怎样的应用程序，合理地使用动画效果，会让用户更明白操作的结果，改变他们对于时间的感知，并且令他们愉快。
原文地址：
优设网翻译：
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量67万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
设计师必备手册：五种移动应用导航设计总结@mmdn 我觉得《移动应用UI设计模式》真是一本设计师必备的工具书，不过由于行业发展速度太快，里面的有些配图和模式已经发生不少的变化，根据这...
评论还可以输入字
验证码加载中....
评论就这些咯，让大家也知道你的独特见解
以上留言仅代表用户个人观点，不代表优设立场
阅读 14174上篇内容回顾：《最全最好用的动效落地方法，都帮你总结好了（上）》 接下来进入下篇。主题是：从 Web 前端的角度来讲，有哪些便捷的方法实现这些动效？ 在目前...阅读 11377毫无疑问，在UI和网页中使用动效已经成为大趋势。这种趋势是如此之明显，以至于越来越多的应用已经不是为了提升体验而设计动效，更多是为了强调动效本身。设计师 P...阅读 9829随着交互设计重要性的提升，动效也越来越被设计师所重视。它不仅仅是取悦用户的工具，而且被视作为改善用户体验的重要手段。从为界面营造氛围的微小动效，到用来沟通用...阅读 11628@Damon_Yuen ：如果你是一位AE新手，表达式对你来说可能会有点可怕。我经历了一段时间，才能慢慢开始自己在AE中使用表达式，而不是去从Google里...阅读 12626动效在如今的网站上已经无处不在了，尽管它们很常见，但是这些动效用的是否合适，是否真正创造了足够优秀的用户体验，还鲜有讨论。 今天我要聊的“滚动浏览动效”是网...阅读 25191编者按：如何从零开始临摹大神的作品？今天@Damon_Yuen 这篇文章提供了一个非常实用的临摹指南，教你从视觉语言的5种元素和10条动态设计原理入手，把复...阅读 25016田田：一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。 近两年，小到loading动画...阅读 65740讲座视频录播回放 https://uiiiuiii.com/photoshop/.html 报名方式 1. 关注优设微信公众号：yoush...阅读 8875转场动效在UI界面中所起到的作用无疑是显著的。相比于静态的界面，动态的转场动效更符合人类的自然认知体系，有效地降低了用户的认知负载，屏幕上元素的变化过程，前...
我们的团队
大家在关注
一扫"掌"握！
上周热门文章
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里中软卓越分享：UI设计怎么设计一款好的插画
最近讲的比较多的是利用插画技术去完成我们的设计作品，使我们的作品不会显得太过于单调。关于插画的分类有很多种，怎么穿插也是很有技巧的，我们就再一次看看怎么去做。
人是高度视觉化的生物，能够即时处理大量的视觉信息，据统计我们所获取的90%的信息都是视觉化的。单一图像比起大块的文本对于用户而言更容易消化吸收。因此，在许多情况下，静态的图片能够传达出相当复杂多样的想法，尤其是在进行大范围展示的时候，它比文本的表现力要强的多。人的大脑对与图像信息的处理速度要比识别文本要快得多。
长期以来，图片都作为UI界面中最具有表现力的元素而存在，而最近几年，插画在UI中出现的比例越来越高，在许多地方都有替代图片的趋势。其实原因并不复杂，插画比起图片可控性更强，更容易发挥创意，营造氛围，传递信息。从内容到技术细节，插画都在某种程度上超过现成的图片。
在今天的文章当中，我们聊聊插画在UI设计中的运用，探讨一下它是怎么提升用户体验的。
插画的特点
实际上，现在我们所说的插画(illustration)的词根 illustrate 原本的含义是“澄清，说明”。在现代平面设计中，插画是颇为常用的展示性元素，是视觉传达的重要工具。插画在设计作品中，常常用来引导、启发和呈现信息，更有针对性地、视觉化地同用户进行交流。真正高效的插画一定是有针对性的，易于识别的，并且能够被不同的用户轻松理解的。
想要让插画最大化地为用户创造价值，你可以参考下面的四个范例：
1、首页插画
好的网页设计设计对于潜在用户的影响是巨大的。许多用户在判断一个企业、团队或者品牌的优劣的时候，他们的网站的优劣是一个重要的判据。这也是为什么现如今网页设计师们都在想尽一切办法提升网页的用户体验。这一点，网页和现实世界是一样的，好的第一印象往往源自于优秀的视觉效果。吸引用户，激发想象力，这样才能和用户构建起紧密的关联。独特而传神的插画的价值就在这里，尤其是当这些独特的插画呈现在打开率最高的网页首页上的时候。和品牌气质所匹配的插画不仅能够帮网站筛选用户，而且能够强化品牌属性。
品牌所传递的感受、气质最好的落脚点就是品牌代言人和品牌吉祥物。吉祥物能够让虚拟的品牌调性更加真实，作为品牌的外化表现，吉祥物能够让品牌给人更加值得信赖的感觉，让品牌更加富有吸引力。吉祥物的呈现形式很多，在网页上，它通常是以插画的形式出现的。吉祥物在UI界面中出现，能够赋予界面交互以生命力，保持用户持续的注意力，成为整个用户体验中无法忽略的重要元素，提升整体的参与度。
目前，电子邮件服务供应商 Mailchimp 可能是借助吉祥物来提升用户体验最成功的案例。Mailchimp 每个页面上都有黑猩猩吉祥物 Freddie 扮演不同的角色，搞笑，甚至替代某个元素来强化互动，它的存在让Mailchimp 的体验和用户黏度都有了不小的提升。
优秀的吉祥物是积极用户体验的基础。
3、新手教程和新用户引导流程
插画还有一个重要功能，就是提供视觉引导。插画能够将复杂的概念简化为易于理解的视觉信息，图片比文字的呐喊更加响亮，这也是为什么插画会常常运用到新手教程和新用户引导流程中来。
新手教程和新用户引导流程常常会介绍应用或网页的主要功能、优点，插画以图形化的形式为用户提供上下文环境，让界面所要传递的信息更加明朗，帮助用户明白如何执行当前步骤，怎么进入下一步。当页面或者APP采用极简设计的时候，界面搭配一幅简单的插画来传递关键性的信息，不需要太多的文本就可以了。
富有吸引力的插画和强互动性的功能让刚刚进入新用户引导流程的用户对APP产生兴趣，从中感到快乐的用户会更加渴望使用APP。到了现在这个时间点，插画和动效往往会搭配起来使用，达到最大化的效果。
使用插画能将一个漫长无聊的教程变为一段有趣的旅程。相比于复杂的文本解释，图像、插画和动效能让用户更轻松吸收和理解。即使你不会绘制复杂的插画，简单的漫画也能够达到类似的效果。
4、奖励界面插画
对于游戏我们这代人应该有所接触，甚至非常熟悉。几乎每个游戏在达成成就、闯过关卡之后，都会出现奖励界面，“解锁成就”这个词就是由此而来的。解锁成就为什么对于用户这么重要呢?一方面，紧张的游戏过程带来的成就感让用户感到快感，另一方面，解锁成就的奖励界面能够给用户一种屏幕背后有个真实的人在为他们庆贺。这是一种情感上的交互。
奖励机制的核心在于，通过积极的情绪刺激来建立情感联系。这种积极的情绪激励严格意义上算是情感化设计的范畴，情感上的引导会让用户关注到他们想看的内容，或者让他们看的内容，部分应用的缺陷甚至可以被用户所忽略。
成就徽章是成就系统中最常见的元素，一系列设计精巧的徽章图标加上游戏和用户互动，能够让用户逐步沉迷到这套体系当中。
精致的插画出现在成功状态的页面当中，能够让你的用户感觉到被重视。
插画增强用户体验是客观存在的，它是提高UI吸引力的强大工具。虽然插画的运用并没有太多硬性的规定，但是务必记住一点：确保插画的可用性。插画最终是要应用到产品当中，成为产品和品牌的一部分。
好了，设计之路漫漫，喜欢我的内容可以关注或者分享，选择中软卓越UI培训，强化设计技能，成为明天的UI设计大师。中软卓越培训带领有明确目标的学子迈向成功之路!
文章来源：http://ui.whzrgj.com/news/3842.html
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
中软国际教育集团专注IT培训36年！学开发 敲代码 轻轻松松收入过万
专注IT培训36年！Java培训零起点教学,小班制授课,入门快,提高快,带薪培训
今日搜狐热点}