交互设计原则在设计工作中的理解和应用

2023-06-05 0 271

交互设计原则在设计工作中的理解和应用

交互设计原则在设计工作中的理解和应用

嗨小伙伴们他们好~☀️那时小贴士给他们增添的该文是可视化结构设计准则在结构设计组织工作中的认知和应用领域第一集该文意在言简意赅向他们如是说可视化结构设计中的许多准则,协助他们认知和或者说沃苏什卡应用领域,一起来看一看吧!👀

(概要总计5648字,写作约须要13两分钟)

交互设计原则在设计工作中的理解和应用

交互设计原则在设计工作中的理解和应用   交互设计原则在设计工作中的理解和应用

巴隆运动定律在可视化结构设计中的应用领域是很两极化和广为的,有时在他们结构设计介面之时,不经意就应用领域了巴隆运动定律,但他们却未察觉到。

有关巴隆运动定律的概要,能说是他们脍炙人口,即使在学生黄金时代就略有介绍:从两个初始边线终端到最终终极目标点所需的天数由三个模块来下定决心,到终极目标的距(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减重,采取的方式是进行拆分,比如滴滴、一起作业等等。

交互设计原则在设计工作中的理解和应用

交互设计原则在设计工作中的理解和应用

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

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

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

4.对功能进行拆分

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

交互设计原则在设计工作中的理解和应用

简单来说,席克运动定律所说的就是:你所面对的选择越多,做选择的天数就越长。引申到终端产品之中,核心即是,在视觉和可视化层面上做出的结构设计,要引导或者协助用户更容易做出选择。

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

交互设计原则在设计工作中的理解和应用

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

一般来说,最理想的状态时,从用户开始操作到结束操作,能够走完一段完整的路径。这其实既是产品结构设计者的期望,同时也是用户所希望的。举个例子,闲鱼的购买流程中,用明显的颜色定义了下一步操作的按钮,明显的层级关系,协助了用户一步一步做出购买选择,当然这是理想状态,在闲鱼这样的电商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,很多都应用领域着这一原理。

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

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

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

它能简单地被认知为:“如无必要、勿增实体”。

交互设计原则在设计工作中的理解和应用

我把奥卡姆剃刀原理放在最后一条来说,其实想抒发的是,在可视化结构设计当中,很多运动定律、准则是很宏观而且被广为使用的,它们比起实用的方法,更像是提供给结构设计师两个思考模型,让他们按照某个思路来做结构设计,它们可能会被应用领域在各种不同的场景当中。

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

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

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

我也只是一名普通的结构设计师,写这篇该文的初衷也只是为自己的所学做两个记录,其实这算不得什么真本事,拾人牙慧罢了。如果它能够让你介绍到更多的可视化知识,能够认知方法论的作用,即使能够有应用领域的思路,那就是我的额外所得,十分开心。

小贴士:@Kerr Xu

更多写作1.视觉和可视化都必须知道的可视化结构设计模式2.2018结构设计师超详细面试指南3.产品结构设计心得-视觉篇4.扁平描边插画呕血教程5.老司机教你3步解析品牌结构设计6.【只言片语01】结构设计的逻辑7.【只言片语02】结构设计中的加载8.【只言片语03】无效的用户测试9.【只言片语04】体验结构设计杂谈10.【只言片语05】app中5种形式的地址选择11.可视化输出文档12.用户体验结构设计师的8个关键问答

交互设计原则在设计工作中的理解和应用

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务