交互理论篇2.0:九大交互定律详解 _ 附保姆级案例分析
今天给大家带来的是基本理论的第二篇:九大定律的详细解析。希望对你有帮助。 第一篇没看过可以查看公众号,学习应该循序渐进。 先举个例子来理解一下:我要点击手机上的确认按钮所需要的时间,和 手与按钮的距离(D) 按钮的大小(S)有关。 当距离越长,所需要的时间越长。当按钮越大,所需要的时间越短。 自我理解:我们将日常看到的界面元素进行去色彩和去信息化,把这些控件/元素等都变成灰色色块,其实也就变成了最简单的原型图。 这些灰色色块抛开了视觉上的属性,其实有两大最基本的属性,即色块的位置和大小。 菲兹定律告诉我们,要通过控制色块或者说界面元素的 大小和位置(绝对距离和相对距离) 来进行界面布局,进而控制交互时间,达到我们设计或者业务层面的目的。 a 合理的自身大小 这里是说合理的大小。一般来讲越大用户越容易到达,但是屏幕的大小是一定的,某一按钮/目标越大就会降低其他按钮/目标的大小。所以大小是相对制衡的,要根据具体情景和需求制定合理的大小(包括肉眼大小和实际热区大小)。但是关于手指点击的最小热区有规定是44x44px,一般的图形的热区大小都要高于这个大小,才能便于点击。其他大小要根据功能需求进行制定。 b 控制合理的相对距离 相对距离指的是界面内部各个元素与控件之间的距离。一般通过研究 整个流程 的交互动作,相互关联的操作元素/操作手势 距离会相对比较近,这样能有效减少操作的时间。 c 特殊的绝对位置:屏幕边界 屏幕边界是可以确定的(鼠标向某一方向一直移动终会停留在屏幕边界),但是屏幕中央确是较难确定的(四个方向鼠标均能延展出去)。一些重要和主要的操作放在屏幕的边界,可以方便用户快速到达,也是菲茨定律的普遍应用。 d 反向设计:增加时间来达成业务目标 业务目标有时候是与用户目的是相违背的,也需要根据具体场景来判断菲茨定律的使用走向。在特殊情境下也会通过距离和自身大小来反向增加使用时间来完成目的。 自我理解:席克定律也在研究交互时间。我们需要通过控制席克定律所总结的两大因素:数目和复杂程度 进而去左右界面布局的形式,从而缩短交互时间,达成良好的体验。 a 精简选择的余地 选择增加也就意味着事情可以发展的方向更加多元化,用户就需要权衡事情该往哪个方向发展,而这就需要时间。不要让你的用户思考太多,所以一般给出的选项在满足需求的情况下要尽可能的少。(这里注意:一般情况下要少但也不能太少,强迫用户也是不可取。) b 减少事情的复杂程度 事情越复杂,越难处理。尽可能的将复杂的事件通过交互或者版式等手段进行简化,让用户觉得容易把握,而不是大量事物/流程/元素的堆砌。 自我理解:米勒定律对人的记忆数目进行了定量的研究,即 5-9 个是人脑接受起来比较合适的,多了就容易混乱。 a 控制选项的数量 同一类型或者同一层级的元素出现,数目一般控制在5-9个。 b 将多信息进行分段处理,便于理解记忆 面对有大量信息的时候(数字/文字/段落)将其分割到5-9个等大脑容易记住的数量。 c 顺应时代的取舍 看到了有一些设计并没有按照米勒定律去执行,因为随着时代的发展,有一些定律并不是万能适用的。定律不可照搬,要根据具体情境去做取舍,以最终效果为导向。 自我理解:和四大基本原则的亲密性原则类似,即在界面布局的时候性质相同的事物要相接近,不相同的要远离,这样更符合人们的既定认知。 a 将相近的功能的分为一组 在面临很多复杂功能时,简单的堆砌显得啰嗦,需求又不能随意删减。这时候就可以将相类似的功能放在同一个组别里面进行收纳整理,这与席克定律也相接近。 b 按照事物性质和关联程度严格把握布局的间距 这里与视觉设计也有很多重叠,即落实到页面的高保真的细节。保证内容想接近的元素间距要小,内容有区分的间距要大。 自我理解:任何事物都有其复杂性,不可避免。某些事物一旦失去其复杂性,其作用本质就可能失去效果。不要抱怨某些流程和工作,他们的复杂性是其发挥作用所必然带来的。所以才需要你来优化和简化。 a 把复杂性降到最低点 事物的复杂性是固定,但是要思考你所面对的是最简程度的复杂性么。首先优化内部系统的整个流程和不必要的步骤能够有效降低系统本身的复杂性。 b 把复杂性进行转移 组合 隐藏 再把复杂性降低到最低程度之后,事物/流程仍然表现出一定复杂性时。就要考虑造成复杂的元素是什么,是否要将造成复杂的元素进行收纳组合,甚至隐藏。 自我理解:在相同前提下我们选择最简单有效的。单纯的炫技是可耻的。 a 给用户清晰的引导 想清楚这张界面的主要目的是什么,顺着这个目标去引导用户,其他元素的视觉层级要让步,来让用户抓住重点。 b 少即是多 少代表流程/步骤/界面元素的减少,多意味着用户量的增加 ...