相比于默认模式主要依靠阴影营造模块层级,深色界面下的阴影感知更弱,需更加注意模块
间的层级对比,通常使用不同层级的黑色和阴影来体现层次感。
从零售服务场景中手递手传递的动作提炼出亲和稳定的曲线特征。亲和的运动强调物体的减速过程,让观者对运动结果有一定心理预期,有助于提升页面体验效率及降低页面理解成本。
我们根据亲和稳定的曲线特征延展出京东零售运动曲线体系,在不同的曲线类型下传递于用户统一的运动感知。
运用“临界阻尼”定义弹性运动特征。
“临界阻尼”在运动结束前夕呈现舒缓的运动衰减过程,传递亲和稳定的运动感知。
弹性数值受模块的大小、速率、应用场景、层级等因素影响,制定单一的弹性数值难以满足京东零售下的多元业务。为此我们制定了弹性体系,分为产品 /
营销两大场景,设计师们可根据动效场景适配弹性数值。
当页面出现过多的弹性运动会严重干扰用户注意力,影响用户体验。使用弹性运动前设计师们需要优先评估以下方面:
信息传递优先级 —— 动态是否需通过弹性吸引用户注意力?
页面动态过载程度 —— 评估页面动态模块占比,是否还能使用弹性运动?
弹性运动幅度——目前的弹性幅度是否过大让用户感到突兀?
自然界中的运动多为弧形运动的组合,而线性运动只存在于机械运动中。符合弧形运动规律的元素更显自然亲和。
界面上的动效应根据使用场景表现的张弛有度。太快的动效难以让用户感知页面中的变化,太慢的动效则会造成过多的等待使用户失去耐性。
大脑形成稳定图像感知的最小时间间隔为150ms。但也需要考虑实际动效的应用场景,元素的大小、位移距离等因素都会影响动效的时长感知。
为了统一动效时间维度的体验,我们根据组件类型以及应用场景(产品交互动效/营销视效动效)划定了时间梯度。其中时间梯度规范非固定数值,设计师们可视情况进行灵活调整。
交互动效最短动效时间为160ms,总时长不超过640ms。
考虑到视效类动效的复杂程度及信息提示性,不宜设置过短的运动时长。大于1s的动效显得拖沓影响信息传递效率。营销动效最短动效时间为320ms,总时长不超过1s。