几乎每个应用程序UI都会有设置界面,但似乎只有在UI设置界面存在问题或缺陷时,才会引起人们的注意,堪称应用界面中的“小透明”。精心设计的UI设置界面允许用户根据自己的需求,定制和管理应用程序,从而降低客户支持成本并提高参与度,同时可以帮助公司降低客户支持成本,帮助用户管理推送通知、时区和登录凭据等项目。

1. 设置界面UI设计小技巧

1.1 组类别

当应用程序有多个设置时,用户可能很难找到他们所需要的内容,解决的方法是将设置分组,便于浏览和查找。如示例中分为会员、电子邮件设置和草稿设置等等。

论坛资讯类APP

论坛资讯类APP

1.2 建立视觉层次

如果没有视觉层次结构,设置面板的用户体验就很难得到提升。我们可以将常用设置放在首位,当选项较多时,也可以将类别分成子页面以减少认知负担。如示例中游戏直播类APP,将用户常用的游戏音量和话筒音量放在首位,方便用户使用。

游戏直播APP

游戏直播APP

1.3 提供清晰的描述

设置需要明确说明其具体用途,最好用常见的带有指示功能的简单词汇来描述设置,避免使用会让用户感到困惑的技术名词,但要注意不要提供太多信息,以免分散用户注意力,忽视了重要细节。如示例中的蓝色音乐主题播放APP,以离线模式、自动混音等简单清晰的语言告诉用户重点的同时,在每个具体设置下面以灰色小字的形式补充说明了选中设置后会对用户产生什么影响。

蓝色主题音乐播放APP

蓝色主题音乐播放APP

1.4 提供状态指示器和对已保存状态的反馈

在大多数的应用程序中,更新的设置会自动保存,但用户有时会不确定操作是否成功,仍需要界面反馈以确认其更改。示例中的资讯类APP设置页,用户更改了主题颜色,会在对应的颜色圆圈中显示√号,以告知用户更改结果。

资讯类APP

资讯类APP

1.5 使用适当的UI控件

单选按钮和复选框是设置面板中的标准UI控件,但它们不可互换:单选按钮要求用户从选项列表中进行一项(且仅一项)选择;复选框允许用户从选项列表中进行多项选择(或根本不选择)。当操作不需要审查或确认时,可以使用拨动开关并考虑添加“开/关”标签以提高清晰度

Salala购物软件

Salala购物软件

1.6 提供基本和高级设置

处理具有多种设置的应用程序的一种聪明方法是提供两个级别的输入,如基本设置和高级设置。基本设置默认填充设置面板并满足普通用户的需求,而高级设置则吸引需要更精细控制的用户。

资讯类APP

资讯类APP

2. 应用程序设置界面的设计过程

2.1 从信息架构和用户流开始

用户流程是用户为了达到目标所需要进行的各个步骤;信息架构则是在整个产品中,信息的分类与归属方式。在这个阶段,我们可以使用卡片分类练习来了解用户如何对设置进行分组,然后在出现的类别之间建立层次结构,为每个设置设计用户流程,生成符合用户期望的设置标签,并尽量将顶级类别的数量保持在四个或五个。

2.2 定义默认模式

默认设置为用户提供理论上最佳的首次交互体验,其目的是让用户轻松上手,并为用户提供支持其目标的设置(用户研究如此重要的另一个原因)。例如,1Password LastPass 等密码安全应用程序具有旨在保护用户机密信息的默认设置。

2.3 在设计过程的早期联系团队成员

开始设计协作,并与团队成员相关者讨论他们与设置相关的需求,与产品经理、安全专家、设计师、工程师和任何对设置感兴趣的人提前沟通,以免等到设置设计过程的后期才发生修改,可能会导致昂贵的重新设计。设计细化从识别用户的痛点开始,客户支持团队每天都在处理用户的问题。他们知道应用程序的哪些方面令人困惑,哪些设置难以管理。如果可能,请定期参加客户支持会议,以深入了解设置面板的未来迭代方向。

2.4 原型和测试

构建和测试原型,以了解设置如何与核心产品功能一起发挥作用。高保真原型是在可用性会话中测试UI控件有效性的绝佳方式。再次提醒,等到设计过程的最后一分钟可能会面临代价高昂。

2.5 以周到的应用程序设置改善用户体验

经过前期的系列努力,你的设计团队使已经使应用程序的设置页易于使用,这时就可以投入市场了。一般来说,尽管突出的功能最受关注,但通常是不太明显的设计细节提高了可用性和用户体验。良好的设置体验是有条理的、直观的,并允许用户微调他们的日常交互。我们可以在投入过程中,设置提供相关反馈的通道,采用与用户心智模型一致的UI组件,使用户无需联系客户支持即可进行更新和信息反馈。

3. 小结

UX设计无小事,从小小的按钮到默默无闻的设置页面,都会影响着我们的用户体验。用户体验的提升可以说是没有尽头的,它是一个不断发展,循环上升,需要UX设计师不断整合知识和经验,不断迭代和完善我们的设计。

Pixso资源社区

以上的设计素材都可以在Pixso资源社区找到!Pixso内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范,提供海量设计模板和素材,本地化字体资源。在跳转、弹窗、切换、关闭等情景下,提供丰富的转场交互动画自定义设置,可组合实现上百种转场形式,赶快来试试吧!