交互设计中的简约设计方法

交互设计中的简约设计方法

交互设计

交互设计从本质上而言,就是人与产品的交流、沟通。人发出指令,然后产品运作并将反馈告知于人。从业务的流程上而言,交互的路径越短,则效率越高。所以流程简约、符合用户思维与工作的逻辑,则使用上会更加便捷流畅。

从产品的使用角度而言,工业产品的指令输入一般是实体的按键、旋钮等,而产品工作时的声音、灯光等则告知用户它的状态。语音交互类产品如天猫精灵、亚马逊Alex等,交互中的输入与反馈都是通过语音的方式。对于一般的web产品、app产品而言,虽然有诸如语音助手、摇一摇等不同的输入方式,但是交互过程中的大部分输入与反馈都依赖于界面。所以,界面中的简约化可以让用户快速的输入信息,也可以迅速得到反馈。

因此,交互设计中简约化的设计可以从两个大的方面来考虑,一是流程的简约化,二是界面的简约化。

流程的简约化

工业产品的交互中,若按键过多,操作流程复杂,则用户往往会因为很难记的住而不知所措。语音交互受欢迎的原因是,交互流程天然的简约,一般只需特定语句唤起(如hi,Siri),然后直接说出指令即可,没有一层一层的操作路径。就像与人交谈一样,自然、流畅。


流程简约化

对于一般的web/app产品而言,可以从两个方面考虑将流程变得更加简约。一个是输入方式的简约化,另一个是输入路径的简约化。

输入方式简约化

输入方式的简约化一般是利用工具/媒介的特性,来简化用户的操作强度。如鼠标悬浮展开菜单而非单击才展开;小米手机通过双击侧面的AI键可以打开某种快捷方式,笔者设置的是双击打开微信扫一扫,这样在需要扫码付款时,不需要打开微信->发现->扫一扫这样在屏幕不同位置触击操作,只需要双击AI键即可,方便简洁;还有诸如在屏幕滑动代替逐个点击来多选等等输入方式的简约化。


鼠标悬浮打开菜单

输入路径简约化

输入路径简约化就是让用户跳过繁杂的操作步骤,简单几步就可完成操作。

智能辅助输入。通过用户使用场景判断用户目的,提供快捷选项,可以减少很多繁琐的中间操作。比如在刚拍完照片后打开微信,点击输入框右边的“+”号,会自动跳出刚刚拍的照片,省去了到相册选取照片的步骤。点击他人发送的位置时直接打开地图app的操作,也是简化输入路径的典型案例。还有收到验证码后,打开APP点击自动填入,省去了一个数字一个数字输入的繁琐步骤。


微信发送文件时的提示

将选项平铺,减少层级,从而减少点击次数。

对于前后关联的多层选项,可以考虑将层级平铺,可以减少功能层级,让操作路径更短。如某种场景下要先选择是否排序,然后再选择升序还是降序。可以考虑将选项改成不排序/升序/降序三选一的选项,可以减少点击的次数。


选项平铺

为常用功能设置快捷键/快捷手势。

利用快捷键、快捷方式来调出常用功能,对于专家用户而言,可以极大地提高操作效率。如通用的Ctrl+S保存、安卓系统的下拉和iOS系统的上滑调出快捷方式的操作,减少了一层层菜单寻找的复杂路径。


利用快捷方式减少操作层级

界面的简约化

在《简约化设计》这本书中,作者提出了4种简约化设计的策略:删除、转移、隐藏、组织。随着技术的进步,个人认为,基于场景和行为的目的判断,也是简约化设计的一个策略。

删除

奥卡姆剃刀原则:如无必要,勿增实体。一个页面若想要展示所有的功能,其结果是,用户会很难找到其想要的功能。从而使操作的流畅度大打折扣。所以,明确页面的存在的目的,关注核心功能,适当的精简或者分步,让界面更加简约。

《交互设计精髓》一书中认为,我们应当首先考虑为用户群体中占大多数的中级用户设计。新手用户会逐渐转化为中级用户,而只有少数中间用户会不断钻研,成为专家用户。中级用户一般更关注任务的完成,在此之外才是对产品的探索。而页面内容太多时,会增加人的认知负担,分散人的注意力,从而影响核心目标/核心任务的完成。所以,应当关注页面的核心功能,减少流程中无关紧要的分支,减少多余的视觉干扰元素,减少过多的样式和层次。让用户聚焦于当前的任务。

同时,在大多数情况下,产品应当帮助用户做选择(默认值,默认选项,默认视图样式等),而不是将所有选项平铺在用户面前,将决策交于用户。在提供选项时,也应当提供有效选项,而不是在用户选择后再告知其选择错误。比如:上传文件时,打开的选择弹框中,只能看到产品支持的格式类型的文件;在时间选择时,只提供有效时间段内的时间选项。


上传文件时,只显示支持的格式类型的文件

在听取用户意见时,应当关注意见背后的实际问题。目的是解决问题,而不是增加功能。解决问题可以在产品之外、产品流程设计、旧有功能优化等方面解决。

在文案描述时,也要开门见山,简洁明了。而不是大段大段的文字,让人不知所云,昏昏欲睡。

在删除功能的时候,最关键的是不要剥夺了用户的控制感,即便是提供了默认选项,也要让用户可以主动修改,而不是只能被动接受。控制感的缺失,会让用户感到焦虑与不安。

转移

转移就是充分利用不同平台、不同设备的特性和优势,如手机APP具有便利性,随时随地可进行操作;PC端具有显示区域大,输入快捷的特点。


不同设备的特点

转移的另一种逻辑就是不做过多限制,以一种开放性的姿态满足不同用户的需求。让用户和产品分别做自己擅长的事情。用户负责灵活性的决策,产品负责逻辑计算与长期存储。如用户定制化的功能菜单、千人千面的算法推荐等。

隐藏

使用符合用户心理预期的隐形命令。在《交互设计精髓》一书中,作者将输入命令分为教学式命令、直接命令和隐形命令。

教学式命令就是利用描述性文本来教导用户如何使用的命令方式,如打开office左上角的文件菜单,弹出的对话框中会有详细的说明。


教学式命令

直接命令就是点击按钮或滑块进行的一些操作。去通过鼠标拖动滑块来调节音量


直接命令

隐形命令就是通过快捷键或快捷手势进行的操作,在界面上没有可视的操作按钮。如在视频播放界面右侧上下滑动可以增加/减小音量。


隐形命令

合理地使用隐形命令可以减少界面中的视觉元素,有助于让用户更多地关注于内容本身,具有更好地沉浸感。

将不常用的功能收纳起来,减少对用户注意力的干扰。

对于产品而言,一般会有一些使用频率比较高的核心功能和一些使用得较少但又必不可少的功能。去听歌APP常用的是搜索、播放等对音乐的一些操作。但是个人账号的登录、退出等管理操作也是必不可少的。一般而言,这些不常用的功能会整体收纳到一起,操作路径会相对深一些。但是这样也会使得整体的界面比较清晰简洁。


点击后展开菜单

组织

组织就是将同一类的东西放到一起,然后将不同类别做区分。这样整体信息架构会比较清晰有条理,寻找目标信息会更加方便快捷。用户首先看到的也是几个大的模块,从心理上来说,压力不会那么大。组织对应格式塔心理学的完形、接近、相似原则。也用到《写给大家看的设计书》中的重复、亲密、对齐原则。

组织结构的分类和排序应当从用户使用的流程、频率、功能关联性等角度考虑。这样更符合用户的心理模型。

在信息架构设计阶段,就可使用卡片分类的方式对功能进行合理分组,在满足简洁的同时也能确保用户快去找到想要的功能。


卡片分类

目的/场景判断

辛向阳教授提出的设计五要素中,包含了人、动作、目的、场景、工具或媒介这样五个交互设计的基本要素。通过场景、行为来判断用户的目的,在其需要的时候提供相应的选项,可以避免一开始就给用户展示过多的选择,让其不知所措的局面,让界面看起来更加简洁,同时又有完善的功能。

典型的案例如听歌软件在有网络时会进入发现新音乐的界面,而在没有网络时,会进入缓存、下载的音乐界面。满足用户想要听歌的需求。


场景判断

还有比如app在用户向上滑动时,判断其需要浏览页面下面的内容,因此隐藏底部的tab栏,增加页面内容的展示空间,也减少tab栏对于用户视觉上的干扰。而当用户向下滑动时,表明其对于新的内容不感兴趣,这时候显示tab栏,让其可以选择去往别的页面。


目的判断

通过场景和行为判断用户的目的,并适时的为之提供选项,就像在运动完一身汗后,有人默默给你递过来一瓶水。显得贴心而不呱噪。


参考:

简约至上 (豆瓣)

《交互设计:从物理逻辑到行为逻辑》

About Face 4: 交互设计精髓 (豆瓣)


相关文章

用超多案例,为你详细解析简化设计经典四策略 | 优设网 - UISDC

查阅超10 万字资料,总结了这份「简约设计」深度思考 | 优设网 - UISDC

查阅超10 万字资料,总结了这份「简约设计」深度思考(二) | 优设网 - UISDC

产品简化改版怎么做?资深设计师的 21 条实用建议 | 优设网 - UISDC

编辑于 2020-10-21 11:36