设计法则 | 实例解析「交互设计七大定律」在设计中的应用(上

设计法则 | 实例解析「交互设计七大定律」在设计中的应用(上,第1张

设计法则|实例解析「交互设计七大定律」在设计中的应用(上

互动之女艾伦·库珀说“除非有更好的选择,否则你会遵守标准”;在互动想象的范畴里,有很多想象的规律,在功夫大战之前就已经有人研究过了。那些规律是从用户的行为逻辑中总结出来的。掌握这些规律将使我们能够快速有效地完成我的想法。接下来笔者会通过一些真实的例子来分析这些规则在想象下的运用~因为影响浏览体验的文章比较少,所以本文将分为两部分~

1、费茨定律(Fitts'Law)

1.菲茨定律简介

菲茨定律是由专家保罗·m·费茨(PaulM.Fitts)在停止讨论人类 *** 纵过程中的活动特征、活动时间、活动类别和活动准确性之后提出的。时间是1954年。这个定律作为一个数学模型,用来猜测从任意一边到目标的中间位置需要多长时间,但它是人机交互(HCI)领域最流行也是最接近的一个。

菲茨定律是指:使用辅导设备达到一个目标所需要的时间,以及当前设备状态与目标状态之间的间隔(d)目标(s)的大小是否关闭。数学教学公式为:时间T=a+blog2(D/S+1)。如下图:

上图中,T表示移动装备花费的时间更少;a、B指的是:经验参数,取决于辅导装备的详细物理特性,以及参谋战的 *** 控等因素;d指:装备起始位置与战争目的位置之间的间隔;s是指:目的地面积的大小。

2.设想使用菲茨定律。

(1)按钮等可以面对面打的区域越来越容易面对面打了。相反,能面对面打中的区域越小,越不容易 *** 控。

案例一:就像淘宝的脚机网页对中国银行的整个登录页面。

从下图可以看出,右边的淘宝登录世界的疑似信息输入区域比左边的中行登录世界要大很多,而且无论是视觉还是输入体验,淘宝都比中行登录好很多。查看两个页面中的登录按钮。中国左岸的按键视觉上很小,上圈验证码和输入框间隔很远。这样的按钮不仅不利于面对面点击,而且容易被误 *** 作。相反,左图中淘宝页面的按钮间距非常合适,输入面对面点击的体验比左图好很多。

案例二:就像小黄车对小蓝单车的尾页扫码按钮。

小黄车vs小蓝单车尾页最重要的按钮用的是圆形按钮。我们不看排列的位置,只看按钮的大小。黄色小汽车的尺寸比蓝色小自行车的尺寸大得多。作者两者都用到了。小黄车的 *** 作按钮比小蓝车舒服多了。这样一来,小黄车的按键比小蓝车的更强大,更容易面对。

(2)屏幕的角落适合布置像菜单栏中的按钮这样的元素。因为角落是一个宏大的目的,它们在大小或宽度上都是有限的,所以你无法用鼠标超越它们。也就是说,无论你移动得多近,鼠标最终都会停在屏幕边缘,定位在按钮或菜单的顶部。

案例1:这就像在知乎、Twitter和脸书中移动接受按钮一样。

通过上面的三个圆圈,我们可以看到,他们自己发布内容的按钮都是排列在屏幕的左下角。那种假设只是利用了顶角的关键点,使得用户的 *** 作简便,成本低廉,提升了用户体验。

情况2:例如,Windows表格中的底部导航与Mac表格中的顶部/底部导航栏。

以上两个 *** 作系统我想大家都不陌生,经常使用的人都知道,Windows表格中默契的导航条稳稳的在底部,而Mac导航的位置是在顶部和底部。当然,这两个导航系统看似在屏幕上的位置不同,但实际上它们都牢牢地在屏幕的边缘,所以当你设置导航条的位置时,它们都停在了屏幕的边缘,而没有出现在屏幕的中央,这是最典型的”。

(3)呈现在用户正在 *** 作的工具中间的主菜单(左键菜单)可以比下拉菜单或东西条更快地打开,因此不需要移动到屏幕上的其他位置。

案例一:在Android8.0和IOS11系统中,按APPless呈现的菜单。

下图是最新的Android和IOS系统呈现的快速 *** 纵菜单栏,图标很少,大大提升了使用APP二级功能的服从性,方便易用。

案例2:PC默认的左键 *** 作条

我们在 *** 作Mac系统表或Windows系统表上的文件夹。通常,在显示的 *** 作菜单中,通过在过程中单击鼠标左键的方法来停止对它们的响应是方便快捷的。有很多方法可以做到,比如在阅读器中停止一张图片的预约,用左键瞄准目标,呈现 *** 纵栏选择预约。

2、希克定律(Hick'sLaw)

1.希克定律简介

希克定律的意思是,一个人面临的选择越多,做决定的时间就越少。用数学公式表示:RT=a+blog2(n),其中RT表示反应时间,A表示做出决策的总时间,B表示由选项认知的处理时间导出的常数(那个例子是人去道约0.155s),N表示相同的选项数。举个例子,假设检测到报警并理解其含义需要两秒钟,然后假设可以按下五个按钮中的一个来处理震动报警,那么响应时间为RT=a(2s)+0.155s(log2(5))=2.36s。

2.希克定律正在被考虑使用。

想象一下,只给用户几个选择,就增加了他们解决方案的成本。

案例1:就像移动整个删除d出框。

当我们在使用网站移动产品时,经常会遇到很多 *** 作d出窗口,就像下图中的两个例子。基本上d窗只有两个 *** 控选项,二选一的成本对用户来说非常简单方便,选择成本极小。

案例二:就像打钉钉一样。第一次登录世界的疑惑。

用户第一次下载APP时,对其稍有怀疑,在进入一般用法之前,用户会看到那个页面。我们来看上面两张截图。页面上只有两个 *** 作按钮,一个“登录”按钮和一个“注册”按钮。在这种情况下,用户将确切地知道他下一步想做什么。

3.奇怪的数字72立法

1.奇数定律介绍72

7^2定律是美国思想家乔治·a·米勒在1956年发表的论文《奇怪的数7减2:我们减少工作和怀疑兴趣的能力的某些局限性》中正式提出的。1956年,乔治·米勒停止了对短期图像能力的定量研究。他发现人类思维的最佳形式能量图像揭示了7(2)个疑惑,而且是在人类思维开始退化之前成像5-9个疑惑。类似席克定律,经常用奇数7^2定律,也在用交互思想。如果不使用制表符,将会有五个以上的制表符。

2.奇怪的数字72定律正在被考虑使用。

(1)虽然1)PC端的导航或选项卡不超过9个,但使用的选项卡不超过5个。

案例一:苹果,人人都是产品经理,中国人民网UI导航栏。

我们可以看到三个支流网站的导航栏模块都有9个以上,空规划,使用方便快捷,尤其是Apple.com,就是一个比较复杂的例子。所以,只要把我想象中的网址导航做到9以下,就会让用户对网站内容了如指掌,更快更有用。

案例二:就像安卓版的微疑,为QQ的底层导航付费。

我们在用APP的时候,我们城市用的是硬件的底部导航区。如果大家仔细观察,会发现任何一个硬件的底部导航区都不会超过五个,就像下图的微疑、派单、QQ圈子,底部导航区也是五个以上的。

(2)如果导航或tab内容较多,可以用层次结构来展现每个段及其子段,并注意其深度和广度的平衡。

案例一:就像天猫商乡战亚马逊网站的商品类目标签。

导航分为多个级别。如果有很多导航内容放不下,可以放回类中,分层次支持。就像天猫和Amazon.com在商品分类上的处置方法一样,我们可以用女装级别的方法,把商品重新显示成类。

案例二:像JD.COM和当当的APP分类模块。

下图中,我们没有很好的看到JD.COM和当当APP的商品分类模块。两款产品的商品分类规划情况非常相似。他们都使用标签的方法来分类商品。层级分明,响应促进用户寻找商品的服从。

(3)将整块疑似好友划分成各个段,用隐藏标识表标记每个疑似段和子段,以便清晰识别各自的内容。

案例一:这就像Apple.com演讲版上iPhoneX的介绍部分。

如下图,演讲版的介绍模块介绍了一整篇演讲,红利四个模块的疑点,每个模块都需要我自己的题目,然后减少了最后一段和最后一段之间的留白,让这个疑点看起来清晰明了。

案例二:就像花一点钱去查卡号在卡界的可疑利益。

如下图所示,为了方便形象,我们采用了分割的方法,将卡号的可疑信息显示在银验卡的显示世界中,这也源于我们理想生活中使用的银验卡。大家都知道银支票卡的卡号是分段显示在卡上的。

4.接近接近定律

1.邻近定律介绍

塔式模式实际上是由M(Wetheimer)在1912年提出的,在德国正在迅速发展。因为对科勒(K,Kohler)和科夫卡(K,Kofka)的采访以及他们的著作都被翻译成了英文,那种新的现实引起了优秀的民族思想家的注意。塔现实是头脑教学中少数理性主义现实之一。如来派用一些相对笼统的观念来诠释熟悉的观察资料,走的是感性战争的气质和心智经验的封闭结构。格式塔认为,当工具离得太远时,认知会认为它们是相关的。

2.接近定律正在被设想使用。

只是把相似相关的问题放在一起,不要让用户混淆,让他知道在哪里可以找到自己想要的问题。

案例一:就像登录世界里的输入框按钮。

当我们在使用任何一个APP产品的时候,每次城市来到登录页面,必然会有一个输入内容部门的按钮,这个结果就是在接触输入内容按钮本身。这样一来,在输入内容之后,需要点击流程中的按钮来提交输入的内容,输入框周围必然会有一个提交按钮。

案例二:就像过去的头条和爱艺术的视频的策划。

在以往的头条中,我们一眼就能发现,标题图片是隐含的统一信息,因为它们是放在一起的,是有关联的。

5.新城市中的女性:预防错误的原则。

1.新城女性:错误预防规则简介

新城之妻(1909-1990)在人物管理圈做出了认真的贡献,在《好国家》的封闭人物圈发表了很多作品。在我20年的职业生涯中,他遵循系统的方法和粗心的笔记写了18本书和无数的文章。他指出“整体的好与坏”是品格要求的最低限度。被誉为“纠错之女”。他启动了防错(POKA-YOKE)的观点,其中一条是这样的:我们不能消除错误,但我们必须立即发明和纠正它,以避免错误造成缺点。

2.新城市的女人:防错原则是关于假设的成本。

错误预防认为部门中所有的突发事件都被假设忽略了,而不是被薪酬 *** 纵忽略了。因此,我们计划拥有必要的防错机;因此,在用户 *** 作具有破坏性结果的功能时,要特别注意提醒用户,以免用户犯下不可挽回的错误。

案例一:就像是在知乎上对安卓版的登录 *** 控。

用户在登录知乎时,在手机号的代码没有写出来之前,底部的登录按钮会灰显。只要这两项都写好了,底部的登录按钮就会以脸攻的形式,而且是蓝色的,这是为了防止用户犯更多的错误,也是防错原则的一种体现,如下图所示:

案例二:就像安卓版本中微可疑朋友圈静止时,点击返回键呈现的提醒d窗。

d出框的方法会降低 *** 作不当的难度。当用户接收到静态的一半时间,当用户 *** 纵其他东西退出当前表单时,使用d出窗口是一个无错的选择。因为用户的 *** 纵会使之前辛辛苦苦整理的内容被删除,找不到,用户想重新收藏只能重新开始,对用户造成很大的损失。这是防错规则的另一种表现形式,如下图所示:

摘要

以上内容是本文前半部分,包括交互想象七年定律中的五个,剩下两个:特斯勒定律和剃刀定律将在想象定律|实例分析《交互想象七年定律正在假设下使用(第二部分)》中发给大家。请等等~这篇文章有什么不合适的地方送大家去交流~~

一开始,打开每个人的浏览,喜欢,给他一个赞~~写下你的心声~~

出品人:熊猫小蝶,互动幻想家,4年互联网产品想象经验,曾主导多个互联网产品的想象。

本文由@发布丮丮丮丮丮丮丮丮。已经答应不再转载。

图片由作者提供。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/777455.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-03
下一篇 2022-05-03

发表评论

登录后才能评论

评论列表(0条)

保存