用户 感官 动态 动效在 UI 设计场景中的运用强化了感官层面的体验，也使得交互设计更加易于理解，通过动效辅助功能操作的理解度。近期在体验产品的过程中，观察到了一些微动效的优秀案例，分享出来和大家一起探讨。拖拽头像营造趣味性体验头像属于个人中心的标配，通常不会带有互动体验，只会在装饰性设计上面营造氛围。最近在体验即刻 APP 的时候，个人中心头像可以长按拖拽，拖拽过程伴随着震动感，释放后弹出表情符号。带有互动体验感的头像增加了个人中心的互动感，趣味性的设计带给用户更高的亲和力。动态形象提高关注度品牌利用人物形象代言产品或者服务比较常见，在一些局部功能或者服务模块也会结合人物形象，带给用户更强的亲和力。通常的做法是静态展示，动态形象相对较少。开言英语 APP 学习模块中，顶部“立即测评”区域的人物形象采用动态形式，虽然只是简单的手势指引，也比静态图片带来的关注度要高。利用动态形象提高模块的关注度，也使得设计更加生动有趣。动态空状态趣味性更强空状态从文案提示到情感化设计的演变，从细微之处带给用户更好的感官体验。为了提高产品的体验，各种状态提示设计也在不断优化创新，利用动态的形式提高趣味性也是一个可取的方向。COVES APP 在空状态界面利用带有动态的形象进行设计表达，使得原本枯燥无趣的界面变得生动有趣。提高了用户的关注度，也提升了设计的感官度。动态极光风按钮设计极光风效果设计是近些年在 UI 设计中较为流行的趋势，不仅可以丰富视觉表现，也能使得产品设计更加年轻化。被广泛运用于背景装饰、卡片式装饰、弹窗设计、图标设计、按钮设计等场景中。优酷 APP 在会员栏目中，将打卡按钮以动态极光风效果进行设计，提高了按钮的关注度。设计风格显得更加年轻化，动感的表达形式打破了按钮设计的常规表达，带给用户更高的感官体验。动态引导提高关注度针对新功能或者重点功能在设计的时候，都会进行引导式设计，以此提高用户的关注度。除了通过设计的视觉化增强和浮层提示以外，动态的引导设计也是不错的选择。优酷 APP 在用户主页为了提高用户发布视频的参与度，每次新进页面就会以动态形式弹出引导设计。提示用户“抓住你的创作灵感”，青春活泼的视觉风格和动效的双重强化，提高关注度的同时也增强了用户的感官体验。带有互动感的品牌墙设计品牌 LOGO 展示常见的形式都比较中规中矩，横向或者纵向均以排版整齐为主。最近发现一个比较新颖好玩的品牌墙展示，结合互动性营造趣味感的体验。开眼 APP 在品牌墙展示 LOGO 时，使用圆形带有动态的形式，类似于一堆气泡相互碰撞，还能拖拽进行互动。停留时 LOGO 会自动飘起来，漂浮到界面顶部，真实感和互动性较强。该设计形式不仅打破了常规，也带给用户十分有趣的互动体验。弹幕强化内容关注度弹幕出现在视频播放中相信大家已经很熟悉，可以增强观看视频的互动性，也能激发大家的话题参与度。弹幕的运用不局限于视频，还能用于增强内容的关注度。LOFTER APP 首页在话题栏目中，单个内容区域增加了弹幕设计，提高了内容的关注度和氛围感。弹幕设计也可以出现在社区中，营造社区的氛围感。自如 APP 在发现生活栏目顶部视觉区域也运用了弹幕设计，以此来提高自如社区的氛围感，吸引更多用户参与分享和评论。卡片式轮播的色彩变化为了提高用户的关注度和强化信息的对比度，在设计的时候都会在背景层和信息设计层强化，针对卡片式设计在背景层强化是一个不错的方向。MOO 音乐在主题电台栏目，针对横向滑动切换的卡片背景做了色彩变化。利用极光风效果处理的同时，滑动的时候背景也会进行变化，色彩变化过渡自然，表现形式新颖独特。动画引导效果更直观针对功能或者业务进行引导设计，有助于让用户更快的理解，便于操作。提高引导设计的关注度和理解度，降低学习成本是设计的目标。MOO 音乐在引导设计的时候采用动画形式表达，传达意思更加直观清晰。动画的形式更能吸引用户观看，达到更好的信息传达目的，也能提高产品的感官体验。动感的音频波动打造独特记忆点音乐带来的不只是听觉体验，也有视觉享受的一面，让用户沉浸在音乐的氛围中。MOO 音乐在播放界面设计中，底部配合音量的大小弹出音频波动条，带给用户视听双享受。音频波动条采用不同的元素进行设计，体现不同音乐的差异，带给用户独特的感官体验。差异化的设计表达也能打造独特的记忆点，让用户在众多的音乐产品中形成独特的记忆。小结本期感官体验日记主要总结了动效范围的内容，根据特定的主题范围去体验分析，也能提高自己发现设计细节的能力。从细微之处体现设计差异，带给用户更强的品牌记忆和感官体验。本期分享到此结束，仅为个人角度的体验总结，希望可以带给大家更多灵感启发。超全面！腾讯出品的交互微动效设计指南本设计指南适用于UI界面中交互微动效，涵盖入场、出场动效，过渡动效和加载动效，在时间和缓动曲线的选择上提供了一些通用的设计建议，帮助设计师理清动效设计思路，提高设计效率。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/micro-motion-design
用户 优惠券 感官 感谢大家对黑马家族感官体验日记栏目的关注和支持，本栏目皆在为大家带来优秀的设计解决方案和不一样的设计思维。希望每一期的分享都能开启你对于设计的全新认知，提高设计思维和变通能力。下面就和黑马哥一起来看看本期的感官体验总结吧！本期内容涉及优惠券设计、轮播图设计、微动效技巧、刷新的情感化设计、春节主题和冬奥主题等等。不一样的优惠券叠加设计优惠券在电商购物场景中运用普遍，如何提高优惠券的关注度和使用率是至关重要的探索。特别是在多个优惠券叠加的场景中，如何在交互层面和视觉引导层面进行突破，作为设计师来说都在不断尝试新的解决方案。最近发现得物（毒）将多个优惠券设计成左右滑动的动效形式，方便用户关注到更多不一样的优惠券。将有效期设计成失效的倒计时，营造时间紧迫感，提高用户的关注度和优惠券的使用率。突出品牌感的轮播 Banner 设计轮播图在产品设计中较为普遍，以推广营销活动为主。除了在 Banner 设计本身进行创意发挥以外，在 UI 布局层面也是设计师探索的方向。得物（毒）在最近的一次新年活动中，利用品牌展示和轮播 Banner 相结合进行布局呈现，不仅突出活动主题，也强化了活动品牌的曝光度。除了自动轮播之外，也可以点击品牌卡片切换，操作也是非常便利。Banner 底部卡片的展示也能让用户在当前视野中浏览到其他品牌，提高了更多品牌的曝光度。多种分类下的轮播设计单轮播设计较为普遍，当我们遇到按照不同类别轮播类别的内容时，如何处理好类别的样式和轮播的呈现方式呢？相信这个设计解决方案是一个不错的思路。网易云音乐 APP 播客栏目中，随心听 FM 除了卡片轮播以外，下方设计了音乐类别的选择，模拟调频场景设计，操作不仅非常便利，感官体验也是非常不错的。背景颜色也会随着类别切换进行微变化，带给用户非常自然的视觉过渡。通过手势拖拽隐藏红点提示红点效应从强迫症已经开始过渡到治愈期，不过针对信息列表较多的部分，红点提示太多也是非常干扰用户体验的。在 MOMO 陌陌 APP 消息栏目中，如果你觉得红点提示消息过多时，可以通过拖拽红点隐藏显示，无需挨个删除或者阅读。配合微动效的设计表现，带给用户非常流畅自然的操作体验，借助手势交互的设计提升用户体验。这个功能最早是手机QQ设计团队创造的，设计过程见：背后的故事！手机QQ的一键消除红点功能是怎么诞生的？腾讯社交用户体验设计部 YU：人类似乎天生对不对称、不和谐的事物有厌烦心理，并且想要去纠正这些“错误”，简而言之就是大家平时所说的“强迫症”。阅读文章 > 右滑手势探索新的世界手势交互设计在产品中逐渐得到应用，可以在有限的空间里面探索更多的互动体验，带给用户更加便利的操作体验。最近研究手势交互的时候，发现 MOMO 陌陌 APP 首页右滑即可开启新功能，探索新的世界，吸引用户前往这个小宇宙去探索。刷新设计的情感化表达把简单的功能做到极致，把重复的动作做到更有情感化。想要抓住用户的情感共鸣，就要在细微之处带给用户更有情感化的体验。喜马拉雅 APP 在下拉刷新时，不是固定的文案提示，针对这个动作设置了不一样的文案提示。每一次刷新都会展示不一样的文案，让用户感受到这是一个有温度的产品，情感化设计的表达提高了用户的情感共鸣。融入春节元素的金刚区设计春节元素融入到 UI 设计中近期出现了很多案例，在金刚区图标设计中的表现尤为突出，带给用户情感化的场景代入感。自如 APP 就将春节中的元素融入到金刚区的图标设计中，带来的感官体验也是非常不错的。运用到的元素涉及鞭炮、福字、元宝、红包、糖葫芦等等，结合中国红营造出浓厚的春节氛围。醒目的引导提示设计针对新业务或者新功能的新手引导设计，有助于提高用户对于内容的熟悉度，也能降低摸索学习的成本。记账城市 APP 在打开应用时，会在底部弹出新增的一些功能或者交互玩法。通过俏皮可爱的卡通形象以对话式的形式传递内容，降低了用户的学习成本，一目了然且不会形成对主功能区域的干扰。用设计为北京冬奥会加油最近比较热门的话题就是北京冬奥会了，各大品牌都在不同的渠道通过各种形式进行曝光，借助营销策划或者单纯的加油祝贺，为北京冬奥会的举办增添色彩。高德地图 APP 在地图主页添加火炬元素突出冬奥主题，点击会展开“点燃昂扬斗志，中国队加油”。保持当前结构的基础上，通过元素的添加达到主题的突出，既不干扰用户操作，也能通过情感化的设计与用户产生共鸣。游戏化的签到积分设计签到挣积分获取相应的奖励，在产品中较为常见，特别是电商类产品。随着这种形式的普及，起初的新鲜感逐渐减少，有差异和创意的表达方式才能吸引用户的关注度。得物（毒）结合游戏化的形式表达签到和领取积分的设计，通过积分换取优惠券和礼品等。积分采用极光的形式表达，不足的情况下可以通过“找极光”获取，激发用户的参与度。小结从感官体验的角度体验产品，总结了在 UI 设计视觉层面的解决方案，有助于提高 UI 设计师的视觉表现能力。对比相同功能的不同视觉表达，总结优秀的设计呈现方案，希望这个栏目可以带给你更多帮助！第八波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/ui-design-skills
飞翔的企鹅
