不藏了!设计「设置页面」时会踩的7个坑

1 评论 214 浏览 0 收藏 10 分钟

设置页面虽小,却直接影响用户体验。一个设计不佳的设置页面,可能会让用户在遇到问题时更加焦虑,而一个精心设计的设置页面,则能帮助用户快速解决问题,提升对产品的整体满意度。本文将分享设计设置页面时常见的7个坑,以及如何避免这些坑,帮助设计师们打造出更加友好、高效的设置页面。

一、堆砌设置项

设置功能在产品设计中通常不是最显眼的部分,用户遇到问题才会想到进入设置里解决。此刻的用户一定是焦躁不安的,因此设置界面的体验好坏决定了用户对这款产品的评价,体验好的设置面板设计会让用户的问题迎刃而解;不好的体验则会让本已在坏情绪中的用户放大对产品的负面印象。

在钉钉相关产品的设置页面设计中,踩过不少坑,跟设计师朋友们分享以下7个常见的「坑」,帮助大家避坑!

产品设计中,有些设置项其实不需要交给用户来做选择,但因为产品内部无法达成一致时,就会想到通过增加设置项作为个性化功能交给用户来做选择,比如导航的宽窄,内容的紧凑度,这部分「设置」功能不是用户出于第一性原理会想到的,缺少实际使用场景,是产品强加给用户的选择。

二、建议

1. 精简设置项

避免堆砌过多功能,影响用户体验;

定期清理不再使用或影响较低的设置项;

将不常用的设置归类为“高级设置”或隐藏在折叠菜单中。

2. 预设合理默认值,减少为「设置」而设置

为大部分用户提供适用的默认设置,减少调整设置的需求。

三、设置项布局和层次不清晰

设置界面通常汇集了产品内的多个业务设置项,如果不对设置项的信息结构进行梳理,进行合理的归类,很有可能用户一进来就迷失在一片列表中,无法「快速」找到想要的设置入口。

建议

可以通过以下方式进行有效的信息归类:

1. 逻辑分组

将设置项按功能或主题进行分组,例如“账户设置”、“通知设置”、“隐私设置”等。

2. 层次分明

使用标题、分隔线或间距区分各组设置,避免信息杂乱。

3. 避免过多层级

层级过深会增加用户操作成本,通常建议限制在2-3层内。

四、布局不统一

多数设置页面是一次次迭代丰富的,需要在设计之初就定义好设置页面的设计规范,避免在每次迭代后因为没有保持统一的对齐方式,开关时左时右,导致界面信息布局混乱,用户易用性较差。

建议

1. 统一的样式

按钮、滑块、输入框等交互元素在界面中保持一致的风格和大小。

2. 合适的对齐方式

采用左对齐或右对齐,使内容更加整齐,便于阅读。

3. 定义设置项类型及应用场景

按照布局方式定义设置项类型,如横向设置项、纵向设置项,以及通栏设置项,保证界面整洁易用。横向设置项

当设置项以开启、选择等方式居多,操作动线为由左至右,可使用横向设置项,保持布局为左右结构,操作居左。

若需要有单选设置时,可采用通栏设置项

纵向设置项

当设置项以多选、单选方式居多,操作动线为由上至下,可使用纵设置项,保持布局为上下结构,操作相对居右。

当某些设置项无法遵从纵向布局时,可辅助使用通栏设置项

五、设置项描述不清晰

钉钉的业务场景中有很多业务形态通过文案无法描述清楚,如果设置项仅有文案,用户是无法感知到设置后的效果及反馈,用户只能靠猜或试错。

建议

1. 易懂的语言

避免技术用语,确保普通用户能理解每个设置的功能。

2. 传递用户价值

避免业务视角或技术视角的功能描述,告知能给用户带来的价值。

3. 图文结合

有些设置通过文案无法精准描述,可以采用图文结合的方式,让用户更有体感。

六、使用双重否定描述

有些设置项默认是开启的,业务在描述设置项时,会站在业务视角,描述为禁止开启某某功能,开关是关闭的,这种双重否定表达跟用户的直观反应并不一致,用户进入设置后寻找的线索是「关闭」这个功能,而非「开启」。建议设置项采用正向肯定描述语句

无论功能默认开启或关闭,设置项都应该表述为开启功能带来的结果及价值。

七、错用开关和复选框组件

设置项开关(switch button)和复选框(check box)组件使用相对高频,两者的语义也有相似之处,可以用来表达是否选择某个条件,因此会造成混用,带来不符合用户预期的结果。

1. 开关(switch button)

表示即时状态的切换(如“开/关”、“启用/禁用”)适用场景:设置中需要立即生效的功能(如开启蓝牙、启用通知)。表示二元状态,且用户能即时看到切换结果。

建议:

只在状态需要立即生效时使用。

避免用于多个功能的组合操作。

2. 复选框(check box)

表示一个或多个独立的选择项,选中表示启用或选择。适用场景:

表示多选选项(如用户可以同时选择多个兴趣爱好);

用于提交或批量应用的场景(如勾选多项后点击“删除”)。

建议:

用于表示多选或需要确认的选项;

避免在实时反馈场景中使用,防止误导用户。

八、设置结果不易感知

设置后,用户预期要感受到设置的结果,比如界面发生了什么样的变化,如果设计上欠考虑,未能及时传递设置的结果,就会导致用户后知后觉,可能因为结果不符合预期,需要反复修改。建议:1. 设置界面用分栏替代弹窗

Gmail邮箱的设置通过在边栏出现,能让用户对邮箱界面的的设置效果实时可见。

2. 效果可预览

钉钉文档的界面偏好设置则是通过一张动态变化的示意片,让用户感知到设置后界面的变化。

3. 去除影响预览的阻碍

Slack的设置页面是一个模态弹窗,当设置项跟当前界面没有相关性时,会默认有一层遮罩,当设置项的结果会在界面上有反馈时,会把遮罩层去掉,让设置者可以直观感受到效果变化。

九、设计实践

钉钉邮箱的设置界面也存在如下问题:

堆砌设置项,常用设置项未优先透出

设置项描述不清晰

设置结果不易感知

按照上述总结的经验优化后:

把常用设置项优先透出,不再低效查找

设置页面和主界面在同一窗口,让设置结果所见即所得

设置项通过图文结合方式,一眼能懂

小结

理论永远只是指导实践的一部分,上述经验是在用户认知和易用性之间,找到一个相对平衡的点,具体的使用场景情况,还是要具体问题具体分析,希望能帮到大家~

本文由人人都是产品经理作者【钉钉用户体验】,微信公众号:【钉钉用户体验】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 哇,这篇关于设计设置页面的文章太实用了!之前我用一些APP时,设置页面总是让人头疼,现在才知道原来有这么多坑。希望设计师们都能避开这些坑,给我们带来更顺滑的使用体验呀!

    来自辽宁 回复