logo
当前位置:首 页 > 编程技术 >前端技术 > 查看文章

运动模式对应的心理预期

前端技术, 编程技术 你是第725个围观者 0条评论 供稿者:

这篇文章里把运动模式分作3大块来罗列。

  • 单体移动,是基本类型。
  • 单体定位,是指元素大体位置不变,只是自身在小范围变化,吸引注意力。
  • 相对运动,组合效应。

一、单体移动

①点对点

基础运动,包括点对点的曲线轨迹运动,无特殊意义。

②过冲

提示性比点对点要强。特殊意义:过冲暗示前方已不可通行(同一类操作下)。可逆向返回,不可顺向前进。逆向返回可无阻力,顺向需要阻力。包括使用在缩放、旋转上,道理一样。

③弹簧

提示性更强。可点击,可多方向拖拽。方向对应的功能可一致,也可不一致。由于「弹力」的心理预期,最好加上操作阻力,或3D偏角(例如某陌生人社交App)。

④蓄力

确认行为,一股脑向前,暗示不可撤销。但一般用在需要拖延时间掩盖系统延迟的地方。或非常需要突出打击感的地方。

⑤碰撞

触底,下方不可延伸。下落行为有不受控的倾向,一般用在被动触发的行为。主动触发的行为不易使用,否则会存在不可撤销、短时间内不可再次操作的印象。

由于「重力」的先入为主,操作会有受力的心理预期。如果能被拖拽,则需要模拟物质的重量,突出抓握受力点。否则认知误差会造成违和感,让人感觉软件不高级。

⑥翻转

对立、解开谜底。必须可逆操作。

⑦绳摆

单方向,向下拽。市面上很少见,有勾引的意味,比较挑衅和神棍。娱乐项目可以用。

二、单体定位

①透明度出现/消失

最弱的变化,无特殊意义。

②放大出现

强调可点击,带过冲、弹簧会更加跳脱。

③位置晃动

可拖动,或可点击。水平晃动比较成人向,垂直跳动比较儿童向。注意控制速率,摇快了就变成震动。

④震动

不稳定,错误。

⑤透明度闪烁

信息提示,一般不可操作。

  • 慢速规律闪烁:状态提醒。
  • 快速规律闪烁:错误提醒。
  • 不规律或高频闪烁:混乱,失控,严重警告。附加缩放变化,表试危险。

⑥旋转、勾边

不可点击,一般会被认为是在 loading

三、相对运动

①错帧、随动、联动、延迟

炫技项目,一般表示「这里没有什么设计问题需要解决,没有可发挥的余地了」。

②交叉

偏展示,一般不可操作。娱乐画面感。

③聚拢、缩小

退出,返回上一级。同时获得聚拢中心的视觉焦点,确认所处层级,确认从哪里退出到这里。

④散开、放大

(例图同上)

查看细节,打开。

曾见过有用「放大消失」来表示「退出」的,这是反直觉的用法,会让用户在系统中迷路。放大一定是往深处走,得到更多细节,而不是穿墙而出。除非你的艺术作品故意想让观众迷路:

看起来像进入了更深一层,而不是退出

⑤平移覆盖、露出

  • 水平:子母级切换,比较常见了。
  • 垂直:新层级插入,高层级打断。

3D界面会大量使用景深效果,层级的切换会偏向放大散开、缩小聚拢的模式,或者树状 + 轴旋转的模式。因为画幅扩宽以后,水平覆盖的运动幅度会变得巨大。但垂直向代表「插入打断」的行为不会改变。

运动模式是用来暗示潜在交互行为,或执行后果的。

正确的心理预期,提供预见性及定位。

总之,要灵活运用行为背后的含义,做出正确的选择,解决问题。即使不能解决问题,也不要造成新的问题。

以上是对运动模式的基本分析。先把基础的东西说清楚,确保我们都在同一个频道上。世界上存在的模式远不止这些。这里只是提出来这个概念,作为一个讨论的前提和预热。

这篇文章主要针对的是用户体验领域。罗列的大部分都是简单的、中性的模式,还没有涉及特别积极的、消极的、情感化的模式。

一个有大大梦想但是没有支撑这梦想的技术的攻城狮,大家就当这个博客是你的技术工具箱吧,我会吧我工作中遇到的问题贴在这,大家需要的记得把我放到收藏夹哦! 百度输入“子傲代码”就可以了

—— 陈子傲

admin
众说纷纭Comments
大眼 可爱 大笑 坏笑 害羞 发怒 折磨 快哭了 大哭 白眼 晕 流汗 困 腼腆 惊讶 憨笑 色 得意 骷髅 囧 睡觉 眨眼 亲亲 疑问 闭嘴 难过 淡定 抗议 鄙视 猪头
小提示:直接粘贴图片到输入框试试
努力发送中...
footer logo
未经许可请勿自行使用、转载、修改、复制、发行、出售、发表或以其它方式利用本网站之内容
Copyright ©ziao design Studio All Rights Reserved.沪ICP备14052271号-3