浅谈简约交互设计四策略

2024-6-24    资深UI设计者

 
 
 

通过简约至上交互式设计四策略这本书,来了解一下要做到简约设计,设计师应该要注意什么

今天小编来带大家了解一下如何让产品能更加简单易用的四个设计策略:合理删除、分层组织、适时隐藏和巧妙转移;

 

首先咱们以书中遥控器的例子先简单介绍下这四个策略~

删除-去掉所有不必要的按钮,直到不能再减。 

组织-按照有意义的标准将按钮划分成组。 

隐藏-把那些不是最重要的按钮安排在活动舱盖下面去,避免分散用户的注意力。 

转移-只在遥控器上保留具有最基本功能的按钮,将其他控制转移到电视屏幕上的菜单里,从而将复杂性转移到电视。

 

• 删除 

 

删除的目的在于让用户在使用产品时聚焦于产品的核心功能,避免被其他因素所干扰,增加我们的认知负担。

 

那么哪些东西可以删除?

1.删除不必要的功能,让用户的注意力放在主要功能的完成上

不必要的功能会降低用户使用产品时的效率,或许你觉得一个功能没什么,当你慢慢进行功能的堆砌时,你会意识到整个产品是多么的混乱,甚至用户都不知道这个产品是做什么的。

 

2.减少选择项,降低用户在使用产品的决策负担

这里提供三个可参考策略:

(1)提供一个合适的默认值

(2)删除不必要的选项

(3)不要在选项中使用专业术语来表达

 

3.删除不必要的文字,多余的文字描述很难让用户聚焦于关键的信息上

这里提供三个可参考的策略:

(1)删除引见性文字,例如:欢迎光临我们的网站,我们希望您心情愉快...这些话听起来不会让人觉得你口才好,只会让读者感到尴尬,删掉这些文字,开门见山会更适合。

(2)删除不必要的说明,例如:填写完这些字段后,请您点击提交按钮把申请提交给我们,像这些说明的东西完全可以去掉,因为页面中的标题以及内容已经足以让用户明白我现在是在做什么。

(3)减少废话。

4.删除干扰用户的视觉元素,当混乱的视觉元素出现在界面上时,会大大增加用户的认识负担

这里提供四个可参考的策略:

(1)使用空白或轻微的背景色来划分页面,而不要使用线条,因为使用线条会更多的吸引人的注意力。

(2)如果要使用强调,使用其中一种强调方式就可以,不必又加粗,又放大,又变成红色。

(3)别使用粗黑线,匀称,浅色的线更好。

(4)减少元素样式的变化,例如在使用按钮样式时,最好只使用1种按钮样式,不要使用3-4种按钮样式。

 

这里引用一下蚂蚁金服设计规范中的一条原则,小编认为是一个很好的总结:“人在处理信息、学习规程和记忆细节方面的能力是有限的。现实中,人可能还面临各种中断和打扰,这些都进一步限制了人的能力。界面中过多的小细节会增加用户的认知负担,删除那些可有可无的功能、多余的选项、冗余的文字、花哨的修饰,可以减轻用户的负担”。

 

• 组织 

 

组织是简化设计最常见的一种方式,而且这种方式不用过多投入,只需要按照一些设计原则进行信息的重新组织就可以简化设计,这种设计策略不局限于使用在产品设计中,我们日常中也会遇到,例如:我们平常用的电脑键盘、洗衣机的控制面板、计算器的按钮等等。

 

1.分块

以微软的Word为例,其包含了数百项功能。为了便于管理,他们把这些功能组织到了9个菜单中,这些大大小小的功能通过分块,被组织成了清晰的层次结构,另外,分块的数量最好能控制在“7加减1”,因为这是人的大脑中瞬间能够记住的最大数目,不过分块越少,肯定越好,因为分块越少,选择越少,记忆也就越少,用户负担越轻。

 

2.围绕着行为进行组织

在开始组织之前要先理解用户的行为,例如人们一般都希望按照某种特定的步骤做事情,打乱这个步骤就会让用户感到迷惑,所以要先想,他们想要做什么,继而先做什么,后做什么。

 

3.确定清晰的分类标准

在对一组性质相同的产品(例如电商产品的分类)进行分类时,确定清晰的分类标准对用户非常重要,这样,用户才能明确到哪里可以找到自己想要的东西。

 

4.按照格式来排序

按照格式(文字、图片、视频)来对内容进行排序,例如在豆瓣APP搜索时,列表的内容会按照小组、电影、影评等进行排序,这也是组织的一种形式。

 

5时间与空间

按照时间线来组织信息是一种简单又通用的方式,例如相册,另外也可以按照空间来组织信息也是一种简单的方式,例如你要规划一个酒店的网站,可以按照门岗、前台、餐厅、会议室、客房等,因为每个人都能够轻易的记住这些空间。

 

6.大小和位置

不太重要的界面元素应该小一些;对于相似的元素,要放在一起。

 

7.感知分层

伦敦地铁图包含了13条线300多个站点,为了防止信息混乱不清,使用了一种名为感知分层的技术,每条线路都用一种不同的颜色表示,人们在无意的状态下,只会感知自己关心的那条线路的颜色,将其他线路排除在意识之外,尽管各条线路交叉纵横。

 

感知分层借助于颜色很容易实现,除了颜色之外,使用灰色阴影,大小缩放,甚至形状变化,都可以实现感知分层。

8.色标

色标系统是随处可见的。例如文件夹、交通信号灯、仪表盘等,因为颜色是利用了人们的记忆原理,因此用户能快速理解。

 

9.期望路径

在描述用户的使用路径时,千万不要被自己规划图中清晰的线条和整洁的布局所迷惑,多观察下用户在做同样的事情时的路径。

 

• 隐藏 

 

隐藏也就是将使用频率较低的功能隐藏的更深,在隐藏之前,我们需要知道哪些功能可以隐藏,哪些不能隐藏,如果这个不清楚的话,反而会降低用户的体验。

 

1.哪些功能可以隐藏

(1)事关细节(例如,对服务器进行配置或设计电子邮件的签名)

(2)选项与偏好(例如,修改绘图应用程序的单位,由英寸改为厘米)

(3)特定于地区的信息(例如,时间和日期等需要频繁自动更新的信息)

 

2.隐藏的形式

(1)自定义

不太赞成让用户根据自己的需求来自定义界面,因为这样会显得设计人员懒惰,没有主见,给用户自己选择的权利,听起来很公平,但是问题在于自定义可能是一件非常耗费时间的问题,因此,自定义并不能解决问题,而且在简化用户界面之前,必须对这个软件的各种各样的功能了如指掌。

 

(2)自动定制

根据用户的习惯来自动定制,例如系统会给你一个默认菜单,你在使用这个菜单时,程序会记住你经常使用的命令,并对菜单自动调整,最终只显示你最常用的的命令,隐藏其他命令,看起来好像简化了设计,其实也有缺陷,

例如很难保证默认菜单的准确性,因为每个人想要的东西都不一样。

 

(3)渐进展示

通常,一项功能会包含少数核心的供主流用户使用的控件,另有一些是为专家级用户准备的扩展性的控件,隐藏这些扩展性的控件是保持设计简单不错的选择。

例如,当你点击文件的“保存”时,对于主流用户应该先展示核心选项,如命名、保存到哪里,对于专家级用户,可以单击扩展按钮,然后找到更高级的选项,如创建新文件夹、希望在保存之前看看哪个硬盘有空间等。

 

(4)阶段展示

除了在软件中的某个部分隐藏功能,还可以随着用户逐步深入界面而展示相应的功能,例如,用户一开始可能只会使用简单的文本框来搜索,如果找不到自己想要的,还可以通过筛选和排序来寻找。

 

(5)适时出现

例如你在网页框选一个英文单词时,会出现一个问号图标,点击后会给出该单词的解释,这种设计的聪明之处在于它隐藏了功能,并且会在你需要的时候在合适位置上出现该功能。

 

3.如何做好隐藏

(1)隐藏使用频率非常低的功能

(2)隐藏专家级选项,但专家用户必须能够让这些选项始终保持可见

(3)不可强迫或寄希望于主流用户使用自定义功能,不过可以给专家提供这个选项

(4)巧妙的隐藏,就是首先需要彻底隐藏,其次是适时出现

 

同时对于隐藏,小编建议可以参考以下四象限表格来考虑。

•重要且高频的功能应该放在显眼并方便使用的位置

•重要但不高频的功能应该要适当隐藏

•不重要但高频的功能可以考虑做到方便使用的位置上面,不需要显眼

•不重要且低频的功能需要隐藏得比较深

 

 • 转移 

 

以遥控器为例,只保留最常用的功能,例如播放和暂停,把其他功能转移到电视的控制菜单中去,就可以将复杂性转移到电视。

 

1.在不同平台之间转移

任何设备或者平台都有自己的长处和不足,因此,把某项任务的某些部分(如拍摄)转移到不同的平台上可能是一种更好的选择。

 

2.用户最擅长于做什么

像之前提到不同设备会有自己的长处和不足,那么人和设备之间也会有长处与不足,有些事情是程序擅长的,就让程序去完成,如果不是,还是需要用户去完成,所以让用户感到简单设计的一个前提是,要先搞清楚把什么工作交给计算机,把什么工作留给用户。

 

作者:麦克优艾
链接:https://www.zcool.com.cn/article/ZODk1NzIw.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

 

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

日历

链接

个人资料

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

存档