赞助商
立即赞助

用YouTube 为例,让你轻松读懂交互设计7大定律!

交互设计3年前 (2021)发布 流光
2.2K 0 0

以 YouTube 这产品例,解读交互设计7大定律在 YouTube 应用。

一、费茨定律(Fitts’Law)

Fitts定律提供一种人运动模型,由 Paul Fitts 1954年建立,以准确预测移动和选择目标所需的时间。

简而言之,Fitts定律指出:获取目标的间是目标距离和大的函数。光标达一个目标的间,当前光标所在的位置和目标位置的距离(D)和目标大(S)有关。它的数学公式是:间 T = a + b log2(D/S+1)。 随着距离的增加,运动需要更长间,随着尺寸减,选择再次需要更长间。

——Interactoin Design Foundation

用YouTube 为例,让你轻松读懂交互设计7大定律!

Fitts定律广泛应用于 UX 和 UI计。例如,该定律响了交互式按钮变大的惯例(别是在指操作的移动备上), 因为较的按钮不容易被点击。同,用户的任关注域任相关按钮之间的距离应尽可能短。

在 YouTube 首页和视频播放页,频「订阅」按钮以常明显红色展示用户,时按钮大小在页权是比较大。这表现,能够在最短时内,吸引用户注意力,激起用户生订阅欲望,使用户鼠标更容易到目标位。

此外,搜索框、单栏、人中、设置一些高频功能的入口,它们的置出浏览器窗口的。因,从费茨律的角度看,窗口或屏幕区域理论无限高或无限宽,一巨的目标,用户无法用鼠标超出它们,且易达到目标。

用YouTube 为例,让你轻松读懂交互设计7大定律!

提高用户点击准确率,一些按钮的实际点击区域比看到的,比如:视频播窗口下的拇指、分享、添加、多按钮组合。

用YouTube 为例,让你轻松读懂交互设计7大定律!

二、希克定律(Hick’s Law)

以英国和美国心理学家威廉·埃德蒙·希克和雷·海曼命名的希克定律或者希克 – 海曼定律,指一个人面临的选择(n)越多,所需要作出决定的间(T)就越长。它的数学公式是:反应间 T=a+b log2(n)。在的计中如果给用户的选择更多,那用户所需要做出决定的间就越长。

——《维基百》

于个以视频内容为核心品来说,视频质量会接影响用户兴趣、频质量、算法荐结。此,视频评价体系在设计时,YouTube 以最少选项完成了视频评价体系基础数据收工作,即上拇指和下拇指,两个按钮。仔细再看,在两个按钮下,有个类似进度状态条,笔者认为这是精简&弱化版评,而这按钮和评级条组合,既为用户提供了常快捷评价交互,也实时观地显示出了视频体评价结:蓝色占比越大,说明视频越被喜欢。

用YouTube 为例,让你轻松读懂交互设计7大定律!

笔者下要分享件事情,虽然与 YouTube 关,与视频评价和希克定律关系很大。

OK,我分享一下全球流媒体巨 Netflix 的一次改版历。去,Netflix 用「拇指向向下」的形式替了「5星打分制」,据今夏天 Netflix 还将关闭用户论区。Netflix 的产品理认,这种改变两好处:

  • 第个好处是去掉了用户评价模糊区,让算法学习更高效。比如,如有个用户喜欢个电影,又不想太高分,打了「三颗」,这喜欢程度不仅让很难理解,学习起来效率也很低。所以,赞这「是否」评判系统,可以消灭模糊灰色地带。
  • 第二好处,5颗星的选择相比,二选一易选,降低了用户的反馈门槛,这样一,不仅用户喜欢反馈,反馈的人也增加了,机器学习结果准确。也就,点赞能给出明确的信,让 Netflix 知道用户对这内感趣,从给用户推荐多类似的内,拇指向下则会让类似的内不再出用户的主页。

用YouTube 为例,让你轻松读懂交互设计7大定律!

三、特斯勒定律(Tesler’s Law)

特斯勒定律,又称复杂性守恒定律,指每一个应程序具有无法被转移或者隐匿的复杂固有量。相反,它必须在产开发或户交互中处。这就了谁应该解决复杂性的问题。例如,软件开发人员是否应该增软件代码的复杂性,使户更简单,或者户应该处复杂的界面,软件代码可简单。——《维基百科》

这个定律是说产/系统固有的复杂性存在一个界点,超过了这个点过程就再简了。我们只将这种复杂性转移。如我们如果发现页面的功是必须的,但当前的页面信息过载,那么就需要将次要的功收起或者转移。

YouTube 右上角的更按钮,里面包含 YouTube 品牌下的其他产品;视频下方的按钮也有一个更按钮;同样在视频介绍和评论区,设计展开和更按钮。

用YouTube 为例,让你轻松读懂交互设计7大定律!

四、亲密法则(Law of Proximity)

亲密法则是感知组织格式塔法的一分,它指彼此接或接的物体往往被组合在一起。换句话说,我们的大脑可很容易地将物体彼此靠地联起来,分开很远的物体更好。这种聚类的发生是因为人类具有组织和组合事物的自然倾向。 从另一个角说,此相的物体应当靠,归组到一起。这种同类相吸的亲密法则在 Robin P Williams 的《写给大看的设计书》中被及。

YouTube 将功能口和按钮按照一定的规则进行区域、位置、视上的划分。

用YouTube 为例,让你轻松读懂交互设计7大定律!

五、奥卡姆的剃刀定律(Occam’s Razor)

Occam的剃刀( 拉丁文:lex parsimoniae 「 简约法则 」)一种解决问题的原则,简单的解决方案往往确的解决方案。当提出相互竞争的假设解决问题时,应该选择具少假设的解决方案。这法归功于奥克汉姆的威廉(约1287-1347),他英方济各会修士,学者哲学家神学家。————《维基科》

回忆自己的绘画、摄影还设历,笔者认:绘画加法,摄影设减法。

奥卡姆的剃须刀法则要就是说我们做产/系统时功上可太繁琐,应该保证简洁和工具。为么要将复杂变简单呢?因为复杂容易使人迷失,只有简单后才利于人们解和操作。随着社会、经的发展,时间和精成为人们的稀缺资源。从这个意义上讲,简才意味着对事物真正的掌控,正谓「大道至简」。如 iPhone 和 iPad 只有一个圆形的物按钮,简单到连岁的小孩都会使。

YouTube 移动端的载页仅一个 Logo;在收件箱页,当用户没有时,系统通一个明显的按钮引导用户操。

用YouTube 为例,让你轻松读懂交互设计7大定律!

六、米勒定律(又称7±2定律)

1956年美国科米勒对人类短时记忆进行了研究,他注意到年轻人的记忆广大约为5到9个单位之间,就是7±2法则。这个法则对我们做界面设计的启迪就是如果希望户记住导航区域的容或者一个路径的顺序,那么数量应该控制在七个左右,移端标签通情况最多是5个。

用YouTube 为例,让你轻松读懂交互设计7大定律!

七、防错法则

防错法则认部分的意外都由设的疏忽,不人操作疏忽。通过改变设可以把过失降到低。该原则初用于业理的,但交互设也十分用。

一个走心、友好的防错设计通表现在:

  • 及时告诉用户哪里操作错了。比如填写表单时,系统给出及时报错提示;
  • 重要、谨慎的操作,系统通会有二次确认;
  • 为用户提供撤销的机;
  • 为用户提供纠错的机会。

用YouTube 为例,让你轻松读懂交互设计7大定律!

总结

Unless you have a better choice, you will follow the standard.

除非好的选择,否则就遵从标准。

——Alan Cooper

用YouTube 为例,让你轻松读懂交互设计7大定律!

本文遵循7±2律,就分享7律 YouTube 的应用。其实还很多典的设计法则,比如格塔等,笔者以后会找款品,为你详细分享。

欢迎关注作者的微信公众:「设意志」

用YouTube 为例,让你轻松读懂交互设计7大定律!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@某个呆Sir: 众所周知,移动设备的触摸键盘相比于电脑的实体键盘而言,易用性较差。原因有很多,比如使用习惯,人机工程原理...
交互设计
2021 年的第一篇万字长文,文章主题是一次偶然的反思中总结出的设计师思维进阶的过程,详细讲述了我在两年间从一名应届非科班...
交互设计
这是一个总会被问到的问题,所以我就专门写一篇文章来解答这个疑惑了。 先阐述观点,交互设计完全没有到达一个饱和的程度。...
交互设计
按钮是最常使用的组件之一,但是在与人交流时,还是会觉得大家存在很多误区,所以本文将围绕如何使用按钮展开分析,希望能给...
B端设计
上一篇《用我搭建的 PST 框架,帮你系统掌握产品的信息引导设计方法》讲了信息引导的策略层:可切入的场景和机制。这篇就总结...
交互设计
《名侦探柯南》中总是提到福尔摩斯的一段话:「When you have eliminated the impossible, whatever remains, however improb...
干扰效应
读者提问: 呆总,为什么微信群红包不即时显示当前领取状态,而需要用户点击后才可查看呢? 呆呆:每个人对于这个问题的...
交互设计
@苏大牙牙牙 :身为设计师,我们对自己的工作再熟悉不过,有说不完的兴奋、讲不完的委屈、吐不完的槽… 但你有没有发现,别说...
交互设计