首页

超详细智能产品深度解析:交互动效篇

涛涛

智能产品的设计过程中,常常用到动效设计,那么动效设计用在哪些地方及对提升智能设备体验带来什么帮助,是这篇文章要讲的。

上期回顾:

流畅的操控感

通过大小、位置和透明度的变化,使得界面与界面之间、界面上元素的出现和消失都有关联,让用户和产品的交互过程更流畅,给用户更好的体验。请看以下案例:

1. Nest 温控器控制界面

超详细智能产品深度解析:交互动效篇

Nest 温控器从时钟转变到温控调节界面的过程中,时钟的指针向圆心收缩,周围的时间刻度生长并一起向中心收缩,指针收缩动效对应温控调节界面温度值的显现,时间刻度的生长收缩动效对应温度刻度的显现,由于元素之间进行有关联的变化,操控过程中会有丝滑流畅感。

2. Gira 窗帘设备

超详细智能产品深度解析:交互动效篇

当用户调节行程时,中间的控制点跟随手指实时运动,而进度条会有延时拖拽效果。为什么会是这样呢?原因是:用户在控制面板上的操作是需要由面板向窗帘设备发送指令的,也就是说面板上控制窗帘到窗帘设备运行中间会有一小段时间间隔,用户会有延迟感,所以 Gira 在控制窗帘行程的过程中,进度条为了与窗帘设备运行同步,加入延时效果,让用户感觉操控响应快的错觉。

3. Nest 新款温控器

超详细智能产品深度解析:交互动效篇

用户在滑动切换功能时,功能 icon 会按照先后顺序由大到小变化,由于连续性运动,每个元素运动都有衔接,会有流畅操控感受。

4. Nest 智能锁

超详细智能产品深度解析:交互动效篇

用户输入密码后至锁打开这段时间,数字依次向下消失,锁 icon 逐渐出现并且打开,体现出柔缓的感觉;实际上动效有时候可以弥补设备执行缓慢的不足,当设备需要长时间才能执行时,这段时间加入动效,动效运行时间和设备实际执行时间一致,用户就会觉得很顺畅;也可以让动效运行时间小于设备执行时间,这时用户会觉得操控反应更快。

直观明确,降低用户学习成本

通过动效能够帮助用户使用功能,对功能的方向、位置、唤出操作、路径等进行暗示和指导,方便用户在最短的时间内来学会操作产品的一些功能。请看以下案例:

1. Amazon Echo

超详细智能产品深度解析:交互动效篇

用户第一次设置好监控后,通过放射动效提示用户双击屏幕,通过上下扩张的箭头动效提示用户可以通过手指来进行监控画面的放大缩小。

2. Lenovo Smart Clock

超详细智能产品深度解析:交互动效篇

当设备第一次配好网重新开启后,通过遮罩、圆点大小位置运动搭配文字告诉用户长按屏幕可以控制什么功能。

超详细智能产品深度解析:交互动效篇

顶部弧形的上下变化,告知用户下拉可以控制什么功能。通过简单的元素既能起到提升用户的作用,还不打扰用户。

强调内容

通过动效给用户展示需要的内容及产品侧想让用户了解的内容,让用户更乐意更易于理解,强化功能感知。请看以下案例:

1. B&O 触控音箱

超详细智能产品深度解析:交互动效篇

双击音乐标题,进度条从左向右生长出现、操控点放大出现,既强调了进度条这个隐藏功能,还暗示用户可以拖动操控点从左向右拖动操作。

2. Google Nest Hub 调光灯界面

超详细智能产品深度解析:交互动效篇

用户从列表进入调光灯界面时,调光条灰底从左向右弧度生长,随后当前亮度条生长出现、亮度值出现,先暗示了用户可以从左向右弧度操作,后强调了当前设备状态。

3. Google Nest Hub 睡眠质量检测界面

超详细智能产品深度解析:交互动效篇

用户查看睡眠质量数据时,睡眠质量标题信息渐隐渐现,睡眠数据条、数字生长,让数据展示有主次之分,强调了用户想要看的内容据,更人性。

提升用户掌控感,让用户心中有数

产品设计里面有一个非常重要的原则:让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示,还有一种方式是让用户知道当前产品运行的状态,是正在等待还是正在加载,还是正在下载或变化,那这种状态的告知也是增强用户操纵感的方式之一。请看以下案例:

1. LG 智能洗衣机

超详细智能产品深度解析:交互动效篇

当用户往洗衣机里加入衣物后,出现量杯倒入洗衣液的动画,告知用户当前洗衣机正在进行哪一个环节,我们分析一下这里加入动效的用意,首先,一般的洗衣机没有屏幕,有的话也就显示当前的功能选项,LG 的这款洗衣机是液晶屏,那么它的定位就是高端人群,通过融入动效,打造差异化,提升使用体验,加深用户对 LG 品牌的印象。

2. Lenovo Smart Clock 起床闹钟功能

超详细智能产品深度解析:交互动效篇

用户设置好起床时间后,系统会根据时间段自动进行背景颜色的过度,来模拟天色的变化,直观的告知用户当前的时间是白天还是晚上或是黄昏。

3. Orvibo 除湿界面

超详细智能产品深度解析:交互动效篇

设备进行除湿的过程中,面板上圆形元素进行旋转,伴随粒子扩散效果,模拟水分子消失的过程,直观形象的告诉用户现在正在做什么。

4. Lenovo Smart Clock 猫眼通话界面

超详细智能产品深度解析:交互动效篇

用户接通猫眼后,通话 icon 进行电播扩散动效,模拟声波扩散效果,准确的向用户告知当前通话中的状态。

5. Google Nest Hub 语音唤起

超详细智能产品深度解析:交互动效篇

当用户说话唤起语音控制时,原先的全屏画面收缩,响应用户的指令,四周留白,为通话内容提供展示空间,然后彩色点元素起伏变化,通话内容出现,告知用户已接收到指令;随后彩色点元素旋转加载,体现正在执行中。在语音控制的每一个环节都加入动效反馈,会让用户觉得他不是在和一个冰冷的机器讲话,富有人情味。

6. Orvibo 窗帘控制界面

超详细智能产品深度解析:交互动效篇

运用轻拟物效果和与实物一致的运动方式,用户可以直观的看到窗帘的行程位置与开合状况,大大的提升了产品易用性。

明确层级关系,提升用户理解效率

面对一款新的智能产品时,用户可能不知道怎么操作它,通过动效向用户交待页面内容之间的关系,让用户清楚的知道从哪里来,到哪里去,更易于理解从而可以快速上手使用。请看以下案例:

1. Nest 温控器设置界面

超详细智能产品深度解析:交互动效篇

温控器的设置模块通过左右滚动以便在有限的屏幕中展现,那么模块的下一级页面跳转做成像 App 那样左滑切入是无法明确层级内容的,此时需要一个与左右滑动不一样的动效来区分模块的切换,Nest 运用翻转效果,强化了层级感,清楚交待了页面翻转后面的内容与页面前的关系。

2. Google Nest Hub 设备控制界面

超详细智能产品深度解析:交互动效篇

用户从顶部导航中进入设备列表过程中,设备列表页面从右向左进入,暗示用户“当你想返回上一级,可以左滑离开哦”,用户上下滑动设备列表时,屏幕左边滑动条出现,更加明确了“左滑返回上一页”的功能;

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

当用户通过列表进入操控界面以及切换功能页时使用淡入淡出的效果,弱化它们之间的跳出感,来强调它们是一个层级的内容,从细微处可见 Google 的设计师在动效的使用、选择上非常克制,值得我们学习。

3. Google Nest Hub 日程提醒界面

超详细智能产品深度解析:交互动效篇

用户发出查看日程安排的命令时,日历界面从左到右进入,告诉用户这是一个新的页面,接着日期数字 21 进行大小位移变化,月份不做变化,为了强调这是 21 号的日程,2 条日程信息按照时间先后从下向上运动,交代了日程处理的优先级。Google 设计师将信息展现的每一步都让用户看的清楚明白。

品牌调性透传

在可用性良好的前提下,通过一致性、趣味性的动效设计和创新的交互方式为产品增加亮点,带来更惊喜的体验,传达产品的气质与态度。请看以下案例:

1. Google 多端运行动效

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

在品牌塑造上,Google 已被证明做得极为成功,而且在视觉表现层面,Google 系产品具备着“一致性”和“连贯性”,这让 Google 获得了品牌识别上的利益。在不同设备的动效设计中,Google 都统一使用代表品牌的红、黄、蓝、绿颜色和几何图形,遵循化繁为简的设计准则,通过简洁贴近真实的运动方式,让产品更有人情味,让用户更加专注于内容。

2. 智能圆镜

超详细智能产品深度解析:交互动效篇

用户在靠近圆镜设备时,镜面中心人脸识别 icon 缩放,周围点元素波动扩散,吸引用户的同时,传达出科技感。

3. Apple HomePod 命令反馈界面

超详细智能产品深度解析:交互动效篇

当 HomePod 在执行一项指令时,顶部的屏幕会出现彩球融合翻转动画,多变朦胧的色彩可以唤起用户情绪,球体间的融合过程让产品生动有趣,让用户感受到品牌的人情味。

4. Apple Watch 洗手提示界面

超详细智能产品深度解析:交互动效篇

Apple Watch 洗手功能开启后,会有一个 20 秒的倒计时,倒计时以肥皂泡沫消失扩散的形式展现,很贴合当前洗手的情景,让原本一个普通的倒计时变得生动且有趣味性,用户更加乐意使用,强化了用户对品牌的感知。

5. 智能温控器

超详细智能产品深度解析:交互动效篇

这款温控器已经有一定年代了,当时那个年代,能用到温控器,那就很有科技感了,智能温控器还将流动的线条动效运用至透明背景上,向用户传达了超前的科技感,只要见了就会记住这款产品。

下面为大家整理了一份动效在产品中的应用场景以及设计思路:

超详细智能产品深度解析:交互动效篇

总结

实际上智能产品中的动效设计,并不是要向用户炫技,也不是做的越炫酷越好。动效是以解决问题为目的的一种手段。我们要去观察现有好产品的动效设计落地点及分析他们的小心思,从而运用至自己产品中,提升产品使用体验。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:Aaron杜斌 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


通过动效助力业务拿结果

鹤鹤



写在前面


什么时候该使用动效,什么时候该保持应有的克制,什么样的动效是好的动效我在之前写过一遍文章,感兴趣都盆友可以了解下,标题《动效/动画在直播类应用中都运用和落地》,本篇文章应该可以算是上篇文章的下半场


接下来要说的这个案例,它可能和我们平常所见的动效体验原则是“背道而驰”的,因为它终究是一个等待运力调度的场景(简单的说就是等待司机接驾的过程)每天成百上千万订单的背后有着一套非常复杂的算法去支撑,这就造成了这个场景它本身不会像动效指导原则那样顺利,平滑,愉悦,但是既然是做设计,核心是去解决问题,所以绕不开这个场景本身。通过数据去解读用户的想法和行为,将设计与业务进行更紧密的结合,从而达到更好的效果


对用户 “等待应答“这个场景的动效改进,以拉美地区最终AB测试数据为结论,使我更加确信动效能做的不仅仅是体验上的提高,在特殊场景下完全可以解决视觉感知层面无法解决的痛点,为业务方拿结果


所有数据对外均作了隐藏处理~



项目背景


滴滴出行在拉美地区飞速发展,单量持续增高的同时,用户对产品本身的期望也越来越大,我们一如既往的重视用户体验。无论严寒酷暑,早晚高峰,我们和我们的用户都不希望等待接驾变成一件漫长、无预期、盲目的行为



数据分析


* 乘客等待时长主要分布在A时段左右,多数乘客会选择在此时间段内取消订单,而消订单的乘客并不会停止叫车服务,而是进行二次发单,重新进入等待队列,这就造成了因个人因素延长了等待应答的总时长


等待应答B分钟左右,是较容易叫车阶段,数据显示用户处于这个时间段内容易被接单


*延长乘客等待预期,调节愿等时长阈值的操作空间,乘客愿等时长的具有较大弹性,如在打车较为容易的时段为 xx 秒,在打车较难时段为 xxx 秒


结论:用户对于排队规则的并不理解,使得用户在最容易叫到车的时间段之前会选择二次发单,取消订单会导致重新排入队列,进行排序


抓手:知悉乘客取消应答集中时间段和容易打车时间段后前提后,在不通过增加物理运力/调整算法的前提下,通过设计的手法去缓解用户的等待感知,从而增加用户的等待应答时长,将用户的等待时长延伸至容易打车时段,从而促成订单的完成,是这次设计的突破口



了解问题,明确挑战


对用户的调研我们发现用户对等待应答动画存在以下感知


通过对用户数据进行分析后得出结论,筛选出核心问题进行优化,让用户对等待应答有一个新的认知,是这次的关键所在。我们希望通过这次设计的优化,乘客能强感知此刻所处运力调动的状态,并最大程度上弱化时间概念降低人脑对时间的敏感程度,减缓用户的焦虑情绪,使其相信这是一个可以等待运力到来的排期



面对的挑战有:


1.增强播单动画感知,让用户明确自己所处状态,从而减少应答前的取消率  P0助力业务

2.通过设计吸引视觉弱化时间概念,降低人脑对时间的敏感,从而增长应答前平均取消时长  P0助力业务

3.符合用户打车预期的前提下,尽可能让动画用起来连贯,顺畅,可预期,让用户感到愉悦,用户体验提高  D1体验提高

4.符合品牌调性的场景动画,让应答场景融入App保持体验上的流畅,统一和性能平衡  D1体验提高

5.涉及到地图开发/端上研发同学的密切配合,高度还原设计文件也将是一个挑战  D2设计诉求



决策方向,设计执行


明确目标之后,就开始了设计的决策方向和关键词


作为一个单量百万级的应用,面对的用户群年龄分布也是非常广泛,因此动画的效果一定要适合大众群体的认知,不应该为了吸引视觉焦点而有个性化存在-> 波纹效果


运力调度本身是一件等待的过程,长时间的等待消耗用户的耐心,应该给予更多的可预见的可期待的暗示 ->路径


俯视视角更适合对周围环境,路况,运力的的观察和掌控,适合打车前对环境的观察,而一旦进入等待场景,用户需要做的只是等待接单,将场景透视化,贴近高空观察事物的视角,更加符合真实世界-> 透视视角


老版本沿用的等待应答场景,可以在地图上进行交互操作,但是无法带来明确的有效信息。新版设计为了增强调度的感知,增强了动画效果。而动画效果在地图上需要一直靠渲染运算生成,任何的地图移动都将加大运算量,耗电发热则会大大增加,因此这里为了保证性能将一个可自由操作的场景,变成了一个固定的场景 -> 蒙层




设计执行


明确了方向和关键词之后,设计的思路其实就已经非常清晰。在框架层考虑清楚信息布局,整体页面交互流程。在表现层吸引用户视觉,加强感知,降低用户对时间敏感度即可

初稿的设计其实非常顺利,整个设计稿从需求分析到第一个DEMO落地大概用时1天左右,而且1稿过完设计内部。在设计之初,leader建议不需要考虑太多落地问题,可以适当天马行空的,不要因为技术的限制而限制自己的想法。在完成设计稿之后我们与技术评审之前就开始与端上开发同学进行逻辑层的分析,发现这个设计稿虽然满足要求,但是在细节位置需要分情况考虑,造成研发成本的大额增加,开启漫 漫 改 图 路 (细节就略过了)~


最终效果以这个动效为基础进行研发,中间涉及到了地图视角的偏移/定位点跟踪/X-panel规则/最佳view调整等复杂逻辑的调整



设计改进的细节


优化进入等待应答页的动效,优化页面布局

设计进场动效不仅仅是为了视觉上有强感知和更好的体验,核心是防止用户多次取消,多次叫单的行为发生


当长时间打不到车时,乘客会选择取消订单让系统重新派单,认为这样有可能会更快有司机接单。而真实情况则很像排队买票,前面的走不完买票流程后面的人则无法前进,所以当乘客选择取消,离开排队队列,只能重新回到对尾,重新排队


下方的等待应答信息卡片包含了等待时长和取消功能,规则是展示3s之后隐藏取消按钮,如果乘客要取消,需要上滑拉起卡片点击取消


通过调整视角和扩大蒙层动画范围,用户的视觉将会集中在屏幕的上方避免地图上的无效信息干扰,视觉持续注意力集中在3-6s左右,从而很好的为隐藏取消做了掩护


当用户的视觉从上方移动到其他位置的时候运力调度已经开始了6s+,无形中给用户时间感知的缓冲时间,使得平均等待时长延长,等待时长阈值向易接单时间段靠拢


后期通过数据分验证现乘客拉起卡片的几率相比之前刚发布时候已大幅下降,也从正面说明乘客已经适应了这种收起的策略



优化页面样式

旧版的等待应答,地图外露供乘客拖动地图观看周围情况。但是用户在等待接驾的情况下,是没有办法看到周围运力这条非常有用的信息,而地图上却外透了街道/店铺的信息,会使这个页面看起来非常沉重却没有很大的意义,且会弱化波纹扩散的感知


新版的等待应答,会在地图上方盖住一个80%透明度的的蒙层,同时会让地图视角整体抬高。让用户感觉到的是更大范围的运力调度,并且随着地图视角的抬高,街道/店铺的名称会得到隐藏,减少无意义信息的透传。通过对地图的缩放,自动减少了街道信息外透,无需通过代码层面的修改,减少了rd的工作量的同时让界面整体看起来更加清爽,拉美在发单前会有定位点的二次确认定位点,也保证用户正确感知到自己在空间上所处位置


旧版本的波纹,速度缓慢并且不够明显,很难给人一种强感知,不像是一个等待运力调度的场景

新版本的波纹,会增强波纹的速度,调整波纹的速率,让用户有一种强感知,此刻正在进行最大范围的进行运力调度的搜索


不再支持用户操作手机地图,查看周围信息。减少波纹因地图位移而产生的实时渲染,减少不必要的耗电行为发生



保证应答前后体验连贯性


在重新设计等待应答这个场景时,我不希望它是一个很重的loading的感觉


不希望像loading的原因在于loading处于数据调取状态,而数据调取一旦完成,会立刻跳转进入下个场景,会让整个体验被割裂,不流畅。而这里通过设计手法的表达我觉得可以做到体验上前后的一致,从而打通设计上的从发单->接单->送驾 这一小闭环


在得到了数据请求后,我们会将View_3D视角返回到正常2D的俯视视角,而车作为最终的载体则会自然而然的出现,同时会根据最佳视角算法自动调整到,人和车同时出现在屏幕正中(距离越远地图View缩放越大,人车始终出现在屏幕当中)


接着,真实的车载路线会以路径生长的方式呈现于用户的手机当中,会根据距离的远近来控制路径生长速度的快慢,同时司机卡片同时加载出来~


等待应答的收尾过程不会像竞品那样直接进行页面跳帧而是一种 合理的 有意义的(2D->3D->2D)完完整整的过程



推动落地,保证还原


完成了设计稿/产品/技术评审过后我们便开始与开发同学进行详细的对接

因为此次设计相对复杂,涉及到了端上和地图上的rd同学,所以非常考验研发的效果还原能力,既要把动效实现原理拆分的非常明确又要保证联调的时候前后一致性



这里就不多赘述,贴个输出图好了 (开发动效逻辑拆分图by zhoulu)

其中有用到lottie输出(感兴趣的可以翻看我之前的文章)-》《动效/动画在直播类应用中都运用和落地》


结论~Rd同学非常OK的完成了最终的效果DEMO,还原度90%+


非常感谢rd (鞠躬)



数据验证


在拉美地区上线,进行了的AB测试,核心评估指标收益显著,整体数据远超当初的预期~



总结


成长方面:这是我来国际化团队的参与的第一个项目,也是设计内部带头发起的一个项目,现在回头来看还有些地方能做到更好,可能那多一点的“更好”能让我在产出的时候更加细致,和研发对接思考的更加的完整,对业务的提升也许会更好


在说点题外的,现在的大环境讲究“全链”,赋予了设计师更多的权利,对于设计来说绝对是利大于弊,这点深有体会,更多的上游思考,更前一步对业务的理解,把业务的场景想的明白,把数据看懂,站在全局的高度看问题,站在产品的角度去设计,设计赋能,通过设计去助力业务去拿结果

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:大宝蛋

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


2021年UI设计发展新趋势,你Get到了吗?

seo达人



本文主要从以下5个方面介绍2021年UI设计发展趋势,废话不多说直接上干货!

趋势一:极简

一份来自微软的调查数据表明:2000年,人类的集中注意力的时间平均在12秒,而到了2015年,变成了8秒。而另一个研究发现:有47%的用户希望一个网页能在2秒之内加载完成。

但事实上,目前网页的平均加载时长达到了8.6秒,而在移动端,则变成了22秒。

网站的加载速度会受到很多原因的影响,UI设计是其中重要的因素之一。更少地使用图形元素和更简约的UI会在很大程度上加快一个网页的加载速度,同时更明确的「指引」和元素的区分也更能让用户快速熟悉网页的交互,甚至,简约的网站还能影响其搜索结果排名,Google 在今年就开始建议网站的加载时间不应超过3秒,并将其加入到搜索排名的影响因子中。

ui设计趋势


趋势二:微动画

今年是「全面屏」手势的加入,让厂商们发觉「跟手感」会在很大程度上影响用户体验到的品质感,于是许多国产厂商开始注重微动画的设计来尽量对用户在屏幕上的滑动产生回应。

但仅有系统层级实现的这些微动画还远远不够,当用户进入到APP中,如果这些微动画不复存在,那产生的割裂感会让整个用户体验大打折扣。所以,安卓手机系统UI 的精细化会倒逼 APP UI 设计的进步,当然,对于那些「懒得设计,照着iOS 版再做一遍喽」的厂商们,如果再不用心做,就要面临着被淘汰的风险了。

趋势三:重叠效应

什么是重叠效应?简单来解释就是,通过把不同的元素(如色块,文字和图像)重叠地放在一起以达到说明内容和视觉引导的效果。

本来由于对比度不足,重叠效应在LCD面板上的效果并不理想,一些明度接近或者色彩对比不够明朗的设计很容易让用户混淆不同的元素,同时一些低透明度的元素会让LCD 面板对比度不足的缺陷彻底暴露。而在 OLED 面板上,这些问题自然迎刃而解,未来必然会有更多的设计师来更加得心应手地运用「重叠效应」以实现他们想要的效果。

趋势四:移动设备适配要优先考虑

在去年,移动端流量消耗占比为 52.2%,实现了首次真正意义上的赶超PC(包括 Tablet 电脑)。并且这个趋势在2021年会继续保持。

这意味着从今天起,一个网站(或互联网产品)的UI设计需要首先适配移动端,从而满足更多数的用户使用场景。

趋势五:深度空间

一个带有纵深方向的空间必然要比平面具有更高的信息效率,更能在视觉上对用户的操作进行正确引导。

其中发展最成熟以及最高效的还是「阴影」相比于普通的高斯模糊以及高级点的「毛玻璃」,阴影的特点在于不光能在UI中把某一个特定的页面提前,还能同时展现多个页面并赋予它们对应的纵深关系,以及大多数的 UI 设计工具(如 PS、AI、Axure)对阴影的支持都十分友好。


文章来源:传智教育

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

                                                            微信图片_20210513163802.png

 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

炫酷实用全部满分!「车道级导航」的设计探索

涛涛

相信很多人在开车时都用过手机或车机上的地图导航,而今天 Alibaba Design 想和大家分享的就是大家常用的地图导航的换代升级版——车道级导航

先来说说车道级导航有哪些不一样。相比于传统地图,车道级地图导航在信息精细度、定位准确性、动态信息丰富度上有大幅提升。比如,车道级导航能清晰显示道路上的虚实标线、自己的车行驶在哪条车道上,还能在地图上看到车身摄像头和雷达检测到的周围车辆、锥桶、防撞桶等。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

车道级导航在智能汽车的驾驶场景中,有两方面的用户价值:

  • 车辆自动驾驶时,提供驾驶环境实时模拟的视觉可视化界面,建立人对系统的认知和信任;
  • 在人开车时,提供贴合现实的路口形状、直观的并线引导,降低驾驶者对导航信息的认知成本。

目前,高德已经发布搭载了车道级导航能力的量产产品——高德第三代车载导航,已在小鹏P7车型的NGP*自动导航辅助驾驶系统中落地。

*NGP 是高级智能辅助驾驶系统,可以在全中国大部分高快速道路上进行自主并线、超车、驶入匝道等。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

车道级地图导航承载的信息与传统地图有明显差异,如何将这些信息加工转化为愉悦的驾驶体验,就是设计师要解决的问题了。下面分享一些我们在车道级导航设计中的思考。

车道级地图导航的体验设计框架

车道级导航应用于智能汽车的人车共驾场景,需要同时考虑用户的驾乘体验和车企客户的设计定制诉求。包含三部分内容:

  • 三维世界构建
  • 空间视角展示
  • 全局样式定制

炫酷实用全部满分!高德地图「车道级导航」的设计探索

1. 三维世界构建

车道级地图中所呈现的数据元素对比普通地图更多更复杂,而且在不断采集更新中,但大致能划分为三类:动态识别元素、高精道路元素以及场景氛围元素,如下图所示。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

我们要做的设计,就是将以上这些数据元素以三维视觉化的方式进行呈现,最终服务于驾驶场景中的驾驶者。我们总结了几个重要的构建原则:

「 清晰的空间关系展示 」

数字地图的优势在于能清晰展示复杂世界的空间结构、空间关系。空间关系的清晰表达能让驾驶者更了解当前所处道路环境,心里更有底,这对于开启自动驾驶的车辆尤为重要。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

炫酷实用全部满分!高德地图「车道级导航」的设计探索

空间关系表达的关键在于表现道路的上下层级和联通关系、坡度变化,加上仿真的车辆及视角变化,实现高架穿桥而过、相机视角由远及近的场景展示。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

炫酷实用全部满分!高德地图「车道级导航」的设计探索

空间关系表达的另一重点在于道路与周围环境的关系,比如道路与山脉,通过高精地图可以看到远方道路的弯曲路形,提前减速,提升山路驾驶安全性。

「 简约元素风格提炼 」

地图设计时整体风格选择需要克制,既要保证地图中各元素之间的区隔度,又要保证地图整体与上层业务组件拉开视觉层级。这样才能更好的突出当前需要驾驶者注意的重点元素,提升整体的信息传达效率和体验。

既要让驾驶者能快速识别地图中的元素是什么,又需要让画面整体有序,主次明确。所以我们使用介于写实与抽象风格之间的简约风格,既能写实展示元素的关键特征,整体又不复杂。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

对于单个元素的设计上,主要是通过元素现实中的关键特征提取,去掉一些不影响认知的细节,让驾驶者一眼就能明确这个元素是什么。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

炫酷实用全部满分!高德地图「车道级导航」的设计探索

「 动静风格统一 」

静态元素是由高精地图生成,而运动元素则是车辆传感器识别的车辆、交通设施等。地图上的这些元素的仿真表达,能够反应车周围的实时动态环境信息,增强驾驶者对车辆感知能力的信任。

对于这些动态识别元素,我们推荐客户在设计风格上与地图相呼应,在保证识别性的前提下,两者风格尽量统一,形成整体感。

下面是客户设计团队制作的动态元素模型:

炫酷实用全部满分!高德地图「车道级导航」的设计探索

对于行人、自行车等出现人体的元素,我们通过循环的骨骼动画原地播放,以及传感器确定的运动轨迹,来模拟对应的人体运动。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

2. 空间视角展示

地图画面是由渲染引擎程序的摄像机拍摄出来的。摄像机的位置、俯仰角、投影中心、裁剪区域等都会影响用户看到的画面内容。

「 远近兼顾的视野 」

为了让驾驶者有全局的掌控感,车道级地图的摄像机视野需要兼顾眼前和远方的信息呈现。在地图上既可以看清眼前的车道标线、周围的车辆,又可以看到 500 米甚至一公里后的路形变化、高速出口等。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

「 自动驾驶动态视角 」

我们与客户设计团队一起,对自动驾驶场景拆分做了多次讨论,最后决定对车速和并线这两个变量设计动态视角。

在自动驾驶场景中,摄影机与自车的距离会随着车速大小在一定范围内变化。当车速较慢时,拉近摄影机与自车的距离,以强化显示自车周围的动态信息。当车速较快时,拉远摄影机与自车的距离,获得更远的视野和足够的预判时间。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

自动驾驶的关键场景是车辆自动并线。为了强化驾驶者对车辆并线决策的感知,在汽车进入并线等待状态时,相机的投射中心会移动到目标车位。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

「 车道级导航动态视角 」

与自动驾驶相对的是人驾驶的场景。按与下一个转向路口的距离远近,人在驾车导航时可抽象为 4 个阶段:顺行、预判、确定、动作。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

不同的驾驶阶段需要不同的摄像机视角,来强调最相关的信息。例如:当下一个转弯路口在几公里以后时,驾驶员对几公里范围内路况的需求要强于对前方路口位置的需求;当临近路口时,驾驶员对前方从哪里转弯、走哪条车道的需求又会强于对几公里后路况的需求。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

下面详细介绍一下临近路口时,摄像机视角的动态过渡策略:

过程 1:根据用户位置和交通情况,提示用户并线,此时将摄像机拉近,画面从 2D 地图视野平滑放大到车道级地图视野,突出并线引导和目标车道;

过程 2:保持摄像机与自车距离不变,仰角随着自车与路口的距离逐渐减小(即锁定路口在屏幕上的位置)。这样既能有清晰的路口距离感知,又能让路口形状逐渐清楚,规避了大仰角导致的离路口越近,路口形状越扁平的问题。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

炫酷实用全部满分!高德地图「车道级导航」的设计探索

不同的路口形状适合不同的仰角参数。例如分叉路口用“大仰角”就能既看清路口形状,十字路口则需要偏鸟瞰的“小仰角”才能看清路口形状。另外,当转弯路口之前很近的位置还有一个路口时,还需要调整相机的旋转角度,来清晰传达两个路口的位置和形状,防止驾驶员走错。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

3. 全局样式定制

车道级地图与自动驾驶关联紧急,且依赖于车辆的精准定位能力,是车辆智能化的核心功能展示,对于设计上每个车企都会考虑进行深度定制,与自身 HMI 风格统一,且功能上有与其他车企的差异化与卖点,这就需要我们考虑规模化设计中的效率问题。

规模化难点在于,与客户产研设团队的合作链路摸索和优化;车道级元素种类多、状态多,设计产出的落地文件生成方式也不同;预览验证困难,导致新接触的客户设计师理解门槛高,缺乏对应的工具集。

「 低成本风格定制 」

第一阶段,我们为客户提供了各个设计阶段需要的设计规范、源文件、教程。第二阶段,客户可以使用高德设计团队打造的 D-Map 平台,通过所见即所得的方式进行设计方案配置,并且能快速预览设计效果。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

炫酷实用全部满分!高德地图「车道级导航」的设计探索

「低成本增减元素」

对于车道级地图中新增三维元素,梳理了对应的元素新增流程,规范前期建模中的模型面数、坐标、法线等,减少返工调整。

炫酷实用全部满分!高德地图「车道级导航」的设计探索

总结

传统导航地图的使用对象只是人,而车道级导航地图是人车共用的。在自动驾驶时,车道级导航地图不仅为自主驾驶系统提供地图和导航路径,驾驶者与乘客也可以通过地图更清楚地了解车辆做决策的依据,增强对于车辆的信任感;而在人驾驶时,通过车道级的精细引导,可为驾驶员带来更舒适、更安全的导航体验。

地图是人类文明的坐标,随着科技进步,地图不断被赋予新的内涵。对于车道级导航的设计探索才刚开始,未来,我们也会尝试利用不断增强的车载硬件算力,与车企一起创造次世代的车载导航体验,为用户提供更准确好用的高德地图。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:AlibabaDesign

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





「玻璃拟物化」你知多少?

鹤鹤

去年大家看到更多的设计和文章都在围绕“新拟物化”展开行动,随着各种硬件的提升,代码的优化,更多的风格和效果一一出现在我们的生活中,而今天呢,我们一起探索一下生活中最常见的,你可能没有注意到的设计风格——“玻璃拟物化”风格,英文“Glassmorphism”,这也可能会成为新的设计趋势。 




什么是玻璃拟物化呢? 


在生活中的摄影,通过玻璃的层次感,给人以朦胧的美感,那什么是玻璃拟物化呢?



显而易见,Glassmorphism 这个词是 Glass(玻璃)和 Skeumorphism(拟物化)的结合,我们姑且将其称之为「玻璃拟物化设计」。 




油管一管主Malewicz 小哥对于这种风格特征归结为4点:


  • 透明:使用带有模糊磨砂质感背景的透明效果

  • 悬浮:带有明显悬浮感的多个层级

  • 鲜明:使用鲜艳色彩作为强调色并且从半透明层中透出

  • 微妙:使用轻薄微妙的边框来强化物理质感



简单的来说,「玻璃拟物化」在某些方面和「新拟物化」是一脉相承的,但是它有着相对更加具体的视觉隐喻,也就是我们日常接触的「玻璃」。  



玻璃拟物化的优点有哪些? 


1.愉悦感 

玻璃拟物化的应用,让扁平的UI界面不那么单调,打破了人们的视觉疲劳,增添欢快、愉悦的设呈现效果。 

2.层次感 


通过玻璃透明,加周围颜色环境的烘托,页面的层次能更容易的呈现出来。 
















3.呈现语境 

你在哪,从哪里来,玻璃拟物化就很明白的告诉你了。通过透明的玻璃材质,能告诉你所覆盖的层级。



4.微妙高级感 


例如,以往的电商产品设计界面,更多的体现材质或者简约风体现产品本身,但玻璃拟物化会让产品在呈现中更显高级。  







玻璃拟物化的设计风格从哪里来呢?

追根溯源。其实还是要追更到苹果头上。  



苹果的合计将玻璃拟物化的风格运用的惟妙惟肖,无论是mac,iPhone还是iPad,设计风格都保持着相对一致的玻璃拟物化风格。 


重点来了,

玻璃拟物化如何用Sketch来设计一个玻璃面呢? 

首先:我们打开sketch,建立一个画板,随便找张图片作为背景,画一个白色矩形 



接下来:调整矩形的属性,再填充色中设置透明度为50%,边框可以吸取一个30%透明的白色,2px,再添加一个环境色的10%阴影,做出层次感,最后就是调整玻璃模糊的效果了,玻璃拟物的关键就在于sketch自带的背景模糊功能,我们常常以为这里只有一个高斯模糊,但却忽略隐藏在里面的其他模糊效果。设置背景模糊值为10%,不用太大,太大的话模糊效果就没有那么真实了,具体调整还是要看效果。我们看效果: 



单层的效果不是很明显,我们复制两个调好的玻璃效果,调整他们的透明度,底部的透明度为70%、中间的为50%,最上层的为30%,看效果:


在界面设计中,就可以通过不同层级,调整对应的参数,达到更好的层级效果。 


那深色模式怎么办呢?


很简单,我们复制这三个矩形,填充色设为黑色,可以不是纯黑色,根据设计规范来定,看效果:  



在图标中怎么用玻璃拟物化设计呢?


玻璃是属于透明物体,所以我们就了解到,通过玻璃看物体,层次感就出来了。 
所以图标这这里设计的关键就在于 玻璃面和层次感,下面我们来看几个图标设计的案例 






看得出来,玻璃拟物化的设计很出效果。 
下面根据我说的我们来分析如何运用玻璃拟物化设计图标 



我们以这个照片的图标为例来拆解分析,通过运用刚才绘制的玻璃面的方法,与图标色块组合起来,在组合的时候,调整好层级,一个轻巧且富有玻璃质感的图标就绘制出来了,很简单、很容易上手对不对?一起来快来试试吧 



注意的细节:


1.在纯白色背景中,一定要给玻璃面添加底部色块的颜色,不然就不会出现看不见玻璃层的尴尬画面; 
2.背景模糊值也是需要根据具体的需要来调整。  



玻璃拟物化在界面中的应用越来越多,所以大家也要根据自己的业务有选择性尝试的去使用,不要盲目的跟随设计趋势设计而设计。  


就到这里儿吧,大家有空多去收藏一些类似的设计,多去吸取灵感,设计出更好用好看的产品!  


最后,让我们再来总结一下

一玻璃拟物化的特点:


  • 透明:使用带有模糊磨砂质感背景的透明效果

  • 悬浮:带有明显悬浮感的多个层级

  • 鲜明:使用鲜艳色彩作为强调色并且从半透明层中透出

  • 微妙:使用轻薄微妙的边框来强化物理质感


玻璃拟物化的优点有哪些?

场景化设计

涛涛

前言

——

随着科技的进步和互联网的发展,过去机械的单向交互方式逐渐被打破,用户使用移动端的场景越来越丰富,设计师也开始需要通过主动的观察用户所处的不同场景,感受用户情感,预判用户意图,来为用户提供更智能更便捷更贴心更高效的服务,场景化设计已经融入互联网设计的方方面面,下面的文章当中,我将从三个方向去阐述和列举场景化设计。



随着移动端的不断发展,从固定电话到移动电话,移动端的设计渐渐的融入在用户的身边,深度的跟随着用户,陪伴着用户,慢慢的,开始观察用户,感受用户,在这个过程背后当中,场景设计逐渐产生,设计师通过针对用户所在的实际场景来设计,建立用户与场景之间的联系,给用户带来更贴心,更高效的体验设计。



1-1  基于不同用户的场景化设计

——————————————


腾讯视频 - 播放器护眼模式

如今各大产品都在上线了“青少年模式”,越来越多的产品关注到了成人与儿童这两个不同的用户群体,腾讯视频在青少年模式中推出的播放器护眼模式,通过摄像头来获取用户当前距离手机屏幕的距离,当用户离屏幕太近会有提醒并停止播放,当用户位置在正常距离以后,提醒消失。帮助青少年养成合理观看手机,爱护视力的好习惯。


滴滴打车 - 关怀模式

滴滴打车新增了“关怀模式”,在关怀模式下,整体的页面字号放大,在功能上,更极简的打车模式,将复杂的任务拆分为拆分为目标清晰的子任务,并提供清晰的反馈,来方便用户的使用,关怀模式更有利于老年用户以及视障用户使用产品。

产品在体验上的提升不应该仅仅是针对主要群体,跟多的是考虑到特殊群里的体验,以上两个案例,根据不同的年龄人群“青少年和老年”,适应了不同的产品体验模式,让更多的用户群体都能够得到更好的产品体验。


腾讯地图 - 左手操作功能

当用户在腾讯地图设置中开启左手操作功能,首页地图上的侧方操作控件会移动到屏幕的左侧,方便左手用户点击和操作,人性化的设计容纳了拥有不同使用习惯的用户。


高德地图 - 视觉障碍模式

在地图软件当中,我们通常都会用红色表示路段拥堵,绿色表示通畅,在色盲色弱人群当中,红绿色盲也是比较常见的色盲类型,所以在高德地图中,为色盲色弱用户做了专属的路况配色,贴心的考虑到了特殊人群的体验。


优酷视频 - 色弱模式

优酷视频在更多模式选择中,为用户提供了“色弱模式”,并有不同色弱人群的细分“红色弱”“绿色弱”“蓝黄色弱”


饿了么 - 无障碍色盘

在饿了么送货骑手中,约8%受色盲色弱的困扰(全国男性群体中红绿色盲色弱占比达8%-9%,饿了么骑手男性占比90%),为此饿了么设计团队在2019年对app的进行了重新设计,包括使用WCAG无障碍色彩对比度,以及无障碍色盘,以及调整字阶,使用辅助图形等设计手段来解决部分骑手在送货途中使用APP的痛点问题。



1-2  基于不同时间的场景化设计

——————————————


美团/美团外卖 - 不同时间段展示不同推荐

外卖行业本身就具有一定的时间属性细分,用户早中晚点餐上肯定会有不同的诉求,美团外卖在不同的时间顺应用户的不同诉求来推荐不同的内容,帮助用户挑选在该时间段内的用餐。

美团在一些周末和特殊节日上,用户在不同时间的诉求不同的,相关推荐也会有所不同。


QQ音乐 - 不同时间的个性化push推荐

QQ音乐会根据不同的时间,给用户推荐不同的个性化push通知,早上是“每天起床气一句”“最气不过起床气” 冬日是“冬夜需要”。结合用户当前时间段下推荐相关的push,不仅增加了用户的点击欲望,也拉近了和用户的距离,让用户时而暖心,时而感到有趣,这么可爱的push通知,也是辛苦QQ音乐的运营小编了~



1-3  基于不同地点的场景化设计

——————————————


iOS - 勿扰模式新增位置属性

在iOS12系统当中,新增了地点勿扰模式,长按勿扰模式的按钮,可以选择“直至我离开此位置”,用户在看电影,会议或一些特定的地点可以灵活的使用该功能。


大众点评 - 首页根据地理位置个性化推荐

在使用大众点评时,当我的地理位置在我的常驻地北京时和将地理位置切换到“重庆”时,首页展示的信息和内容框架都发生了变化,产品根据我的地理位置推断出我现在搜索的目标地不是我的常驻地,预判到我可能存在即将出游到当前定位的城市,会直接给我推荐一些攻略,和一些“怎么玩”“”订住宿“”游景点“的旅游攻略向内容。



1-4  基于不同环境的场景化设计

——————————————


iPhone -  接听功能

iPhone在用户接电话的场景下,根据用户所处环境不同,适配了不同的方案。不同的当iPhone处于息屏状态接电话时滑动接听,防止误触;当iPhone在使用时接听电话为按键接听。减少用户操作成本。


支付宝 - 收款码功能键盘

在支付宝的收款码扫一扫功能中,用户向他人展示收款码时,手机向下倾斜后,扫码的提示文字和用户的头像会发生旋转,其他功能会相应弱化或者直接消失,以便方便付款人阅读,充分考虑到了现实中的操作环境,保证了双方的使用体验。


支付宝等金融类产品 - 后台运行下模糊处理

支付宝等金融类的产品,在用户开启后台后,会对页面进行高斯模糊处理,避免了后台场景下用户无意中泄漏自己的信息,也防止了被偷窥。(支付宝在页面底端还添加了温馨提示:支付宝全力保护你的信息安全)



1-5  基于不同事件的场景化设计

——————————————


支付宝 - 停车缴费功能

在输入车牌省份时,会直接弹出各省/直辖市的缩写专用键盘,并且可以直接进行大写字母与城市简称的切换,降低了用户的输入成本,提高了整个功能的使用效率。


百度键盘 - 横屏游戏模式

百度键盘在游戏模式下,会接入游戏快捷回复语并自动开启和谐模式,增加趣味性的同时方便了我们在游戏进程中的快捷输入,将九宫格按键进行等比缩小展示,方便用户点击。


iPad OS键盘 - 浮动式键盘/速滑输入

Pad OS键盘在使用中,可双指捏合可以快速缩小键盘,然后将它移到合适的位置,即能单手打字,又能给你的app留出更多的空间,并且增加了快速输入的功能,只需要在键盘之前轻扫,即可打字。



情景预判的交互设计是建立在整个产品的框架上和对用户深刻理解上的细节迭代。预判设计主要有两类目的:一是在用户初次体验某种功能时引导用户,避免用户陷入困惑;二是提前判断用户行为,缩短行为路径。新功能引导更倾向于产品功能本身的逻辑和价值,这次我们主要主要讲第二点,提前判断用户行为。



预判设计强调主动性和智能性,是决定产品是否体贴、聪明的重要因素,是走向人工智能的基础,对微交互中的预判设计进行分类研究有助于加深对其了解和认识,进而在实践中应用以提升用户体验。预判设计可以很好的在用户的操作过程当中进行简单高效的引导和预判,帮助用户更流畅舒适的使用产品。



2-1  顺应用户行为的预判设计

——————————————


在互联网发展中,产品功能的流程越长,操作步骤越多,越要求用户的理解能力和学习成本更大,耗时也会相应增加。因此体验设计师在理解用户行为的交互设计的基础上能够做到减少冗余步骤,简化操作流程。顺应用户行为的预判设计也可总结为四个字:以简驭繁。抛开繁杂的操作过程,运用更少的任务和行为来达成用户目标。简约不仅仅是视觉的形容词,同样适合行为。


支付宝 - 转账功能

聊天页转账:在支付宝聊天页,很多时候我们想给对方转账,会习惯性的在输入框中输入相应的数字,但在操作错误之后,支付宝会在输入框上方弹出相应数字的转账,点击之后会直接进入转账页面进行操作。对我来说,这个功能已经不是简单的帮助用户纠错,现在更像是一个快捷键一样方便着我们的操作。


手机号转账:当我们复制手机号后打开支付宝转账功能,会弹出该号码的转账气泡引导,提前判断了用户通过手机号去转账的路径。用户可以点击气泡一键跳转到转账页面。


消息页 - 找人转账:在消息页面,当用户开始上滑操作时,会出现「找人转账」的气泡提示,点击进入用户列表的简约页面,去掉了一些生活号服务号企业号等无用的对话框,提高了用户寻找的效率。

一个转账的功能,在不同的页面不同的场景下,支付宝在体验上把用户情景预判设计做到了极致,事实上,用户的行为中渗透了意识。从用户的行为推断用户意图,将用户的意图结果化,结合用户的使用场景,顺应用户的行为,缩短用户的路径,才能给用户带来最流畅的交互体验。

正如《一目了然》中所说,“当一个软件设计得很糟的时候,我们往往能立刻指出哪里做的很差;但一个优秀的软件,你却往往难以解释优秀从何而来”,因为沉浸式的流畅体验为你减轻了很多思考的路径与时间。


淘宝 - 智能填写地址功能

在新建收货地址的场景下,填写复杂的地址信息的过程往往都是繁琐而费时的,而设计师在此场景下考虑到用户需要地址的多样性,以及用户行为背后的含义,当用户复制了一段收货地址,打开新建地址页面时,App将主动提示弹窗“是否粘贴刚复制的信息”点击“确认粘贴”即可粘贴收货地址到对应列表项,这种预判设计对于用户来说是自然且让人愉悦的。我们不仅顺应了用户的操作行为,还在其中大大的帮助用户减少了很多操作。



2-2  分析用户行为的预判设计

——————————————

预判设计的主体是用户行为,从用户的视角出发,分析用户行为,是设计师建立在整个产品的交互里路程和功能框架上,对用户的行为深刻洞察后进行细节的改进。


Mac - 鼠标放大功能

当我们使用电脑时,总会发现找不到鼠标位置的情况,iMac设计师在识别到用户开始连续晃动鼠标时,分析到用户当前的状态可能是在寻找鼠标的位置,会对鼠标做一个放大的效果,帮助用户快速定位到鼠标的位置。


抖音 - 刚刚看过功能

在抖音我们刷到一些连载视频后,我们都会去进入作者的个人页去寻找上下集,在作者个人页作品很多的情况下,可能要寻找好久,抖音在个人页的作品卡片上添加“刚刚看过”的提示,方便了用户在浏览中能够更快速的定位到刚才的视频。方便继续衔接观看。虽然一个小小的功能提示,我们从用户行为,预判到用户的需求,带给用户更方便更快捷的体验。


美团外卖 -「再来一单」和「相似商家」

在美团外卖中用户可以在订单页面直接点击「再来一单」按钮选择和上次一模一样的商品加入购物车,如果一家店没有营业的话那么则会显示一个「相似商家」按钮。

结合实际我们操作的场景,外卖产品,我们重复下单的频率会比较高,当我们来到这个订单页面,「再来一单」的按钮可以更方便更快速的帮助我们下单,但当商家休息的时候,这个时候继续展示「再来一单」按钮对用户来说也是无效的,我们往往会回到首页去搜索相关类似的相关产品,然后再重新下单,而这时候「相似商家」按钮直接帮助用户一键定位到后续的一系列操作,真正的做到在分析用户行为中,预判用户操作。



2-3  符合用户行为的预判设计

——————————————


设计师做需求时,往往需要考虑在特定情景下,用户行为背后的思考与需求。因此符合情景的预判,我们也可称其为“符合用户感知的预判”。思考用户使用产品的情景,及时而高效的迎合用户对于当前场景的需求。


墨迹天气 - 降水雷达图

墨迹天气的降水雷达走势图,进入之后,放大、缩小屏幕就可以查看全中国的云图了,墨迹天气的云图可以查看到降水情况、闪电、积雪(冬天才有的功能),并且伴有文字提示,在未来两个小时的天气情况,方便了有出门需要的同学实时查看天气。


微信聊天 - 用户撤回消息/避免误点删除

在微信聊天功能中,我们可以对两分钟以内的消息进行撤回,但相信大家都有跟我一样的尴尬经历,发了错误的内容想要撤回,却一不小心点了删除,再也没有机会撤回了。

微信在这个功能上做了很好的改进,当我们的发出的消息小于两分钟时,该消息只能撤回,去掉了删除功能,在该消息超过两分钟后,则撤回按钮消失,只能进行删除操作,两个功能进行了互斥处理,很好的避免了这个场景下用户会误触。


宝 - 评价操作

当我们选择好评的时候,会自动勾选到“公开状态”,当我们勾选差评时,系统会自动取消”公开“状态勾选,默认匿名发送该评价,很好的保障了差评用户的人身安全问题和个人隐私问题。


宝 - 搜索结果页标签展示

当我们在淘宝搜索电脑包时,展示的内容下方会自动展示商品的容量标签“可放14寸电脑”,帮助用户在列表页面就能筛选到更合适自己的商品,当搜索玩具时,也会展示当前商品适用的年龄段。产品根据用户搜索的内容,自动匹配能够帮助用户进行筛选的标签。


小结

——

预判设计当中我们从三个层面进行了分析,从顺应用户行为的预判设计,到分析用户行为的预判设计和符合用户行为的预判设计。一个好的产品,往往会更多的使用用户语言,通俗易懂地让用户可以对整体的使用方式一目了然,而不是产生一系列的问题,迫使用户停下来,进行不必要的思考。用户的每一次停顿对我们来说可能都是一次用户流失。而预判设计要做的,是根据用户的行为/用户所在的场景,让功能主动找到用户,并让用户与之产生自然的交互。



场景化设计中,以情感化为目标的设计同样需要具体场景具体分析,通过细节上的改变使得产品在当前场景下能够与用户产生更多共鸣,主要从细节出发满足用户在当前场景下的情感需求,让用户感动,给用户惊喜。

其实用户在使用产品的过程中,同样渴望在使用产品时能够得到情感上的互动,这反映在设计上即是产品情感化设计。情感化把握得好的产品往往更能抓住用户的心。



3-1  本能层的情感化设计

————————————


躺平 - 空状态页面

躺平是一款阿里旗下的生活方式APP可爱的小人和拟人的语气,设计师让每一个空白枯燥的空页面瞬间变得可爱和有趣起来。


快手 - 节日开屏设计

快手在每一个特殊的节日都会给用户送来精美的开屏祝福,让用户在节日当天打开app就能接受感受到产品满满的心意和祝福。


B站/快手/网易云音乐 - 生日祝福

在用户生日的这个特定时间和特定场景下,很多产品都给予了用户不同的生日祝福,B站是一张有关于星座的动漫海报,快手给用户定制了专属生日开屏,网易云音乐的每日推荐为用户献上生日快乐歌,不同的产品结合自身不同的产品属性,给一位用户都带来了不同的生日祝福。



3-2 行为层的情感化设计

————————————


腾讯视频 - 夜深了提示

想必大家都有熬夜刷剧的经历,在腾讯视频中,在全屏模式下点击退出清屏模式下,页面上方的时间旁边会显示夜深了,只是简简单单的三个字,这深夜在这个场景下,感觉内心也有一瞬间被人关心的触动,体验了一个产品的人文关怀和对用户的体贴。


QQ音乐 - 会员到期弹窗

QQ音乐的绿钻到期挽留弹窗真的是别出心裁,推荐了4首歌曲,连起来就是VIP我们舍不得重要的你,用歌曲的的名字来表达对用户的诉求,趣味化的设计让这个小小的挽留弹窗不仅没有感觉到打扰,还感觉很有趣。


美团外卖 - 订单页面的天气

当有特殊天气时,我们打开美团外卖的配送页面时,页面会在页面中做当前天气的拟实物效果,下雨天整个页面也是下着大雨,下雪天整个页面飘着雪花,甚至雾霾天气整个页面是是伴着黄黄沉沉的云,设计师预判到用户打开该页面是想看外卖到了哪里,看到外面的天气如此糟糕,大家都不忍心催促外卖小哥了,大大减少了特殊天气下配送不及时的投诉率。


Bibilibi - 密码输入

在B站输入密码的时候,页面上方的小人会遮住眼睛,潜台词:我不看,你放心输入吧。在输入密码的情景下,设计师用趣味生动的卡通形象给用户带来了更信任更安全的感知。


Bibilibi - 黄油相机加载动画

黄油相机的加载动画,是一个可爱的切黄油的小人,并且加载当中的文案,会告诉用户当去前正在加载的内容是什么,能够让用户对于加载的时间有预期,让等待加载的过程不会枯燥。


3-3 反思层的情感化设计

————————————


苹果 - 残章人士emjio

苹果新增 13 个与残障人士相关的 emoji,包括导盲犬、轮椅、义肢、戴着助听器的耳朵等。有意思的是,苹果不仅按照以往的做法为涉及人物的 emoji 按照性别和肤色提供多个版本,而且在表示辅助器具的 emoji 中还做了细节上的区分,比如轮椅有手动和自动之分,不同导盲犬的导盲鞍样式也有所不同。

回看历年苹果emoji的更新,从肤色平等,到性别、性向平等,再到为残疾人设计,这让我想起了苹果为残章人士做的广告 - 科技属于任何人



豆瓣 - 悼念已故用户

最近,快手B站豆瓣等都陆续上线了“纪念账号”,产品的意义不仅仅是留住生者的精彩瞬间,更多的也是留住逝者的人生印记,对已故用户的账号进行保护,豆瓣在已故账号上做了悼念用户的活动“在他/她的头边放一束山茶花”的方式来纪念已故的用户。


腾讯公益 - 404页面

腾讯公益的404页面,这个项目的灵感源于欧洲失踪儿童联合会主导的,名为“NotFound Project”的网络公益工程。就是利用404页面展示那些被拐卖儿童、失踪儿童的信息,帮助那些孩子重新找到家人。


丁香园 - 404页面

丁香园404页面界面展现了因恶性医患遇害的医生同道,文案是“你所访问的页面就如那些遇害的同道,已离我们远去。”下面还会有这些白衣天使的照片和名字。以这样的方式悼念亡者,也侧面展现了丁香园的社会价值。

在页面走失的这种特殊场景下,404页面视作可被利用的空间,来呈现公益信息,这种方法暂时减弱了用户对产品页面走失的愤怒,将注意力转向对弱势群体或社会问题的关心,侧面感受产品的社会价值,这种方法适用于社会公益性质或相关业务的产品。以上的腾讯公益和丁香园对于这块的设计都是很好的案例参考。


快手 - 搜索页负面情绪引导

在快手搜索一些负面的情绪词汇时,会提示用户“别怕,我们都在”。并附有24消失免费心理危机咨询热线,从推荐位banner点击后会进入一个群聊,里面都是其他用户留下的暖心话语,这些情感化的设计让那些正在经历困难,或者想要终止生命的人传递以温暖。我们可以帮助你,你并不是孤单一人。微信/知乎等搜索引擎下都有不同的对于该情况的情感化设计。


京东/淘宝 - 搜索页面濒危动物保护

在京东搜索穿山甲,会直接挑战到保护濒危动物页面,传递出了一个企业对动物的保护意识。页面中的穿山甲≠治病,向全民科普濒危动物的现状和对于人们对于野生动物的错误认知。淘宝更是对野生动物保护启动了绿网计划,搜索穿山甲/象牙等都会进入到该活动页面。


小结

——

情感化离不开场景化设计,上面四个案例分别是两个404页面以及两个搜索引擎的不同设计,不同的产品赋予了不同的含义。不同的场景下设计师也需要有不同的思考,陪伴产品一同进步。

情感化设计更多的是带给用户瞬间感动,很难形成长期的用户激励或用户增长,因此情感化设计主要目的是通过情感累加,提升产品品牌形象;产品不仅是所有功能的集合,他们真正的价值可以是满足人们的情感需求,而其中最重要的需求就是建立自我形象与社会地位。 反思层是包含并超越前两个层次,我们要经常思考,为什么同类型的产品,我们要选择它,为什么它给我留下了很深刻的印象,这都是反思水平的设计需要做的。


文章来源:站酷  作者:刘狗蛋

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


2021设计趋势分析-3D/动效/插画

鹤鹤







文章来源:ui中国   作者:百度MEUX

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


文字动效原来这么简单

周周


       文字,是最常见的动效对象之一。我们可以通过对透明度、位置或者角度的改变,制作出丰富的动态效果。但你可能不知道的是,AE内置了超多的文字预设,只需用鼠标点击几下,就可以完成复杂丝滑的文字动效。 

AE文字动效预设使用方法 


       在AE的窗口中打开“效果和预设”面板,所有和文字有关的效果都在动画预设中的Text文件夹内,共十七种动效类型

在AE的窗口中打开“效果和预设”面板,所有和文字有关的效果都在动画预设中的Text文件夹内,共十七种动效类型。

       将动效预设拖动到对象上,即可应用动效。

17种动效预设预览


      十七种类型分别为:3D文字动效、入场动效、离场动效、模糊动效、曲线动效、表达式动效、填充与描边动效、图形动效、亮度与透明度动效、机械化动效、多样化动效、多行文案动效、拟态化动效、路径动效、旋转动效、缩放动效以及字间距动效。

预设搭配组合


          有些效果可以相互叠加组合,理论上我们能做出成百上千种不同的效果。 






文章来源:UI中国       作者:设计师深海



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



设计,看得见也看不见

鹤鹤

设计是沟通,是人和人、人和物之间,通过某些形式传递和反馈信息的过程。


设计时刻都在为产品或商业提供有价值的帮助,例如产品转化率的提升、品牌好感度的提升、还有商业变现等等;与此同时  创新性的设计,很可能会带来数据上的质变,体验上的颠覆,甚至是改变某个领域的发展方向。



-


设计的本质,是对人性视角的转化。


通过洞察用户在产品使用过程中的痛点,提出全新体验的可能性,实现体验和业务的平衡;

设计不是产品可视化,它是全局的,是通过用户视角对设计机会点的洞察。






-


设计包括,但不仅仅是形式。


形式是设计的外层映射,设计本身是广义的;设计形式是设计理念的承载,是设计满足用户需求、实现商业目标和呈现品牌调性的具象化结果。







-


设计的价值在于创新,探索出解决问题的更多可能性。

设计是通过创新思维,对问题本质的探寻和对常规框架的突破,为体验和业务赋能。





-


设计是价值导向的,需要为业务负责,为行业负责;好的设计,需要能比常规方案产生更多价值,驱动业务和行业发展;设计不是单独的原型图或者视觉稿,而是一个全局性的创新型解决方案。


我们在做的设计,是大设计。

 


文章来源:站酷   作者:乐信用户体验设计

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档