看懂设计(合集):交互设计原则在设计工作中的理解和应用

2024-6-20    资深UI设计者




本篇旨在简明扼要地向大家介绍交互设计中的一些原则,帮助大家理解和真正在工作中应用


菲兹定律在交互设计中的应用是很普遍和广泛的,有时候在我们设计界面之时,不知不觉就应用了菲兹定律,但是我们却未察觉。

关于菲兹定律的具体内容,可以说是大家耳熟能详,甚至在学生时代就有所了解:从一个起始位置移动到最终目标点所需的时间由两个参数来决定,到目标的距离(D)和目标的大小(W),可以用数学公式表达为:

在当今互联网背景下简单来解释说,就是大而近的目标区域意味着用户用需要耗费太大的精力即可轻易点击或者关注到目标,反之,小而远的目标区域则意味着用户将耗费一些时间和动作才能触及到目标。在一般情况下,让用户耗费时间和动作的操作,会使人产生负面的用户体验。

以上说的,其实是对菲兹定律表象的解释,每个人在网上也会搜到很多类似的解 释。当你搜索时会发现,关于对菲兹定律的应用,网上绝大多数的资料都是在以PC端界面作为定律的解释,但移动界面却少之又少,这里面的一部分原因是菲兹定律提出的时间,一部分也是因为在移动端的设计中,菲兹定律会变得很零散和琐碎,很难真正用几句话来总结。


我在这一部分分了几种情况,分别进行讨论,其一呢,就是fab button。在现有的fab button中,大家会发现,虽然按照正常iOS的设计规范,一般按钮的大小都会被设计为88px,但是在设计fab button时,我们一般都会选择大一些的尺寸,例如100px、110px、120px。

其二就是页面内功能按钮的大小,我们在做界面设计的时候,都知道做到统一性,但很少去深入地想,界面统一的背后是在像用户传达一个什么意思。

举个例子,这是【洋葱数学】和【360家庭防火墙】的登录界面,市面上的登录界面大多大同小异,基本组成就是账号+密码+按钮(或手机号+按钮等)的组合。

那我们来思考一个问题:为什么在手机号只有11位已经确定的情况下,输入框和【下一步】按钮还要做这么长,接近通栏的一个样式。

我试着来找到这个问题的答案,第一个,是对于品牌设计规范的执行,对边距是有一定要求的,也就是我们常说的保持页面元素的统一性;第二个,即是对菲兹定律的应用,在这个页面中,最核心的两个功能【输入】和【下一步】给予他们一个足够的大小,会让用户的注意力更加集中。


这也和设计原则中的亲密性相一致。依旧可以用我们常见的信息输入界面来加以印证。这两个界面是我随手做的,对比一下即可看出优劣。

在相关性比较强的功能中,拉近彼此具体,既能够给信息一个清晰的层级,更能够减少用户的操作成本。


在研究交互界面的时候,我们总听到一个说法,“界面的边界是无限的”,它当然不是在说界面是无限大的,对于一块屏幕来说,在进行操作的时候,无论是PC的鼠标光标,还是移动屏幕的手指,在操作到界面边缘时,因为无法延伸,所以最精准。


这也是我们看绝大多数fab button弹出的菜单是在界面边缘,而不是在界面中央的原因。

除此之外,还有在很多安卓手机中,卸载app时会让用户把要卸载的app拖拽到屏幕上边缘的区域进行卸载,这样相比给一个【X】按钮,会更加精准,而且拖拽的操作也会给用户更多思考的空间和时间,减少误操作的概率。

在进行删除等负向操作时,很多app会把确认删除等操作做得离你的上一步操作区域更远,或者让确认按钮更加不明显,这是在帮助用户,或者说希望用户在做负向操作时,有更多的思考空间和时间,规避误操作的影响。




复杂性守恒定律是拉里·泰斯勒在1984年提出,泰斯勒先生因为最早在电脑中应用剪切、复制、粘贴的概念,也被称为“复制粘贴之父”,在2020年2月17日辞世。

复杂性守恒定律的内容:“每个事物都具有其固有的复杂性,无法简化。”

 

关于复杂性守恒定律的定义,无论复杂的还是简单的,在网上我们可以搜到很多,这里就不过多阐述,大致内容都相差无几。


在移动互联网时代,复杂性守恒定律的内容也可相应的引申为:“每个应用都有其内在的、无法简化的复杂性。”

所谓“复杂性”,即是这个应用或流程中的核心部分。例如:电商app的浏览、下单、付款;登录的输入账号密码(或验证码)等,这个流程是无法再继续简化下去的,如果简化,将失去应用或流程的核心意义。

在遭遇所谓的复杂性功能或流程时,或者说我们在设计产品功能和使用路径时,应考虑的是,在保证其核心意义的基础上,把“复杂性降到最低”。

不要过度简化。


那么复杂性守恒定律在APP设计中又是如何应用的呢?


引入第三方账号登录,减少注册账号的复杂步骤

注册登录的流程和步骤发展至今,已经非常简化了,基本都是输入手机号、密码或验证码来进行登录注册,这一流程基本处在不可再简化的阶段,那么合理地引入第三方账号登录或注册,将大大减少在这一流程上所要耗费的步骤和时间。


记忆上次登录方式,减少登录步骤

记忆上次登录方式这种功能,在移动应用中还是不常见的,多用在某平台旗下软件之中,比如腾讯旗下的各种软件,很多都有记忆登录方式来方便用户登录软件。

搜索时输入字符后同步联想搜索结果

这条很好理解,在进行搜索操作时,同步进行关键字或词的联想,将大概率节省用户输入动作和搜索时间,提升用户体验。

高频次输入行为给予快捷选项

这种方式多用在陌生人社交app中,尤其是招聘app。在交流意向不明显的时候,快捷回复的使用频次相当高(我简直是快捷回复达人~)

信息和功能归类展示

在国产app中,很多功能都会放在个人中心的页面中,一个页面当中甚至有十几、二十几个功能,在业务和功能的必要性影响下,它们不能由设计者的意志进行删除或隐藏,那么将层级相同的信息分别归类展示,将在一定程度上提升用户体验。

页面排不开的功能信息进行收纳隐藏

在三四年前的移动互联网时期,汉堡包菜单一度很流行,它可以将那些重要但是使用频次又相对较低的功能收纳起来。这种方式现在很多app仍在采用。除此之外,微信的添加好友、扫一扫、建群聊等功能,也都收纳在右上角的(+)按钮中。

但是如今有很多对汉堡包菜单的讨伐声,所以在使用汉堡包菜单时,我们需要思考地更多。关于汉堡包菜单的讨论,有兴趣的可以私聊我~


对于不同业务,很多公司在进行app设计时,为了更好地服务用户,也为了给app减重,采取的方式是进行拆分,比如滴滴、一起作业等等。

1.合理缩短用户使用路径

2.将复杂信息进行归类整理

3.将复杂信息进行收纳隐藏

4.对功能进行拆分


除此之外还需注意,在为流程和功能做减法时,时刻注意不可过度简化。




简单来说,席克定律所说的就是:你所面对的选择越多,做选择的时间就越长。引申到移动产品之中,核心即是,在视觉和交互层面上做出的设计,要引导或者帮助用户更容易做出选择。


这里其实简单来说,可以分为两种情况。第一,用户应该会做出什么选择;第二,我们希望用户做出什么选择。


我们分别来说,第一点,用户应该会做出什么选择。

一般来说,最理想的状态时,从用户开始操作到结束操作,能够走完一段完整的路径。这其实既是产品设计者的期望,同时也是用户所希望的。举个例子,闲鱼的购买流程中,用明显的颜色定义了下一步操作的按钮,明显的层级关系,帮助了用户一步一步做出购买选择,当然这是理想状态,在闲鱼这样的电商APP中,打断用户路径的因素多为商品因素。

作为设计者,在这个路径上的作用,就是帮助用户来完成用户希望完成步骤,让尽可能地让其他干扰元素都为主要流程让步。所以闲鱼选择将想要-购买-下单这一流程中的按钮设计得很突出。

除此之外,在无法避免选择时,为用户提供默认选择项,或清晰地选择项分类,也会为用户减少选择时间。

例如:飞猪等旅行类APP,在选择地点时,会提供当前城市的默认选项,很大概率减少用户在该选项上花费的时间,另外在选择地点时,会根据热门程度,提供热门城市的分类,同样很可能帮助到用户快速选择到自己想要的信息。


还有一点,可能是我们在平时会忽略的小细节,就是,设计要遵循用户习惯。当涉及到表单时,单选和多选的传统样式已经十分深入人心,用户不需要过多地思考即可识别出什么是单选,什么是多选,所以在这种情况下,就不要做多余的设计,遵循习惯即可。



第二点,我们希望用户做出什么选择。

这其实不难理解,在业务的包裹下,我们并不是在所有方面都要满足用户的需要,当用户想要做的选择与我们希望的方向背道而驰,那么我们就需要在他做选择时,给出一点干扰,让这个负向的选择不那么容易进行。拿APP获取权限举例,我们希望APP能够获得用户手机的更多权限,例如位置、通讯录、消息推送等等,但是一般情况下,用户的第一反应一定是对自己信息的保护,多半会第一时间拒绝这样的请求,所以我们一般会把“同意”按钮设计地十分明显并且容易点击,把“不同意”设计地小而弱。


1.对用户行为进行预测,并把对应操作的权重提高,例如使用突出的颜色、样式、大小等

2.对选项或信息进行分类,并尽可能提供默认选项

3.弱化负向选项,对用户选择做出干扰




米勒定律是我们作为设计尝尝听到和用到的一个定律,即7±2法则。

心理学家乔治·米勒发现了人在短时记忆时,一旦信息超出了7±2这个范围,就会容易出现错误。

在交互设计当中,这个法则会更多地应用在信息分层和排序、功能排列等,这里应用的原则一般是,在组织信息或功能时不要超过9个,最理想的是控制在5个之内。

将同类的信息提取并重新划分,这样就会更加容易记忆,上图我将一些散乱的信息按照衣、食、住、行进行重新归类,信息就变得清晰起来了。

在APP中,米勒定律的应用是极其广泛的,在一个界面中,几乎每一处都遵循着这一定律。


在数字类的展示时,我们一般会将例如手机号、银行卡号、金额等进行分段,方便识别、确认和记忆。


一般APP的tab bar图标都不会超过5个,而在进行收纳菜单设计时,也最好将菜单内功能数量控制在5个以内。


很多时候我们可能无法再进行数量的减少,那么可以选择将同类型的信息进行归类,再分别展示,也能够在一定程度上提升用户体验。


1.数字分段展示

2.菜单数量控制

3.信息分类划分再展示




邻近性原则在定义上与亲密性原则很类似,在界面中彼此靠近的元素通常会被视为一组。相对应的,彼此疏远的元素会被视为两类不同信息。


这一点和米勒定律其实有一定重复性,在功能数量很多时,进行分类展示,有助于提升用户体验。


在信息比较大、文字比较多的页面中,将同类信息和不同信息利用间距的控制区分开,可以有效地使页面层级更清晰,帮助用户更好地浏览信息。


1.同类功能归为一组

2.不同类信息控制间距




和绝大多数交互设计原则一样,防错原则最初也并不是为了交互设计而产生的,但是,发展至今,防错原则确实交互设计中十分重要的一个原则。


防错原则的含义是:大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。


在移动互联网鼎盛的今天,防错原则已经被应用得相当广泛和熟练,我们可以把犯错原则简单理解为:在设计一个功能或流程时,我们要通过一些反馈来让用户知道,他的哪些操作时可以继续进行的,哪些操作时错误的无法继续的。看似有点复杂,但其实通过案例我们可以瞬间理解它是如何来应用的。


操作之前的防错提醒

很多时候我们会因为一些原因,对产品中的某些功能进行限制,或者当用户进行某些不可逆的负向操作时,对用户进行容易感知的提醒。比如在社交软件中,个人简介或文字发布的字数限制,需要有限制提示等。


对用户的操作进行实时的反馈,能让用户及时观测到自己的操作是否在APP允许的规则内。


对于已经发生的结果,有些APP会给予用户“反悔”的机会,使用户在操作后可以挽回上次的错误。



比起其他的交互设计定律,奥卡姆剃刀原理更像是一个思考方式,而不像一个实操性很强的设计方法。所以这一条,如果给大家举例子,可能会举很多例子,我们手机里的APP,很多都应用着这一原理。

当我们在设计界面之时,在保证核心信息展示完全的情况下,尽量不去设计很多其他东西来干扰用户,比如我们很少见到登录注册界面还放着运营广告,很少见到瀑布流界面还掺杂着十字交互等等。这些都是奥卡姆剃刀原理的应用。

如果想举例子,那可以举出一万种。


我的理解:在面对一种问题时,优先选择优化用户使用路径、优化交互方式,而不是选择增加新的功能。


它可以简单地被理解为:“如无必要、勿增实体”。



我把奥卡姆剃刀原理放在最后一条来说,其实想表达的是,在交互设计当中,很多定律、原则是很宏观而且被广泛使用的,它们比起实用的方法,更像是提供给设计师一个思考模型,让我们按照某个思路来做设计,它们可能会被应用在各种不同的场景当中。


在上面的这些方法论和设计原则中,大家可能也会发现,在展示案例时,有一些是重复出现的,其实这种重复性还有很多很多,可见,每一个单独被总结出来的设计原则,并不是相互独立的存在,它们可能会互斥,也可能会相融。


一个成熟的设计师并不是要把这些方法论奉为圣经,在不断的学习和工作中,我们要学会在合适的场景应用合适法则。


这个世界上,没有什么是一成不变的。


我也只是一名普通的设计师,写这篇文章的初衷也只是为自己的所学做一个记录,其实这算不得什么真本事,拾人牙慧罢了。如果它能够让你了解到更多的交互知识,能够理解方法论的作用,甚至能够有应用的思路,那就是我的额外所得,十分开心。


谢谢大家的点赞和评论。


作者:灵感大王NinE
链接:https://www.zcool.com.cn/article/ZMTExMzkxMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档