快捷搜索:

UI设计师需要学习的保存功能设计总结

保存是后台产品中很通用的操作,它司空见惯到我们误觉得保存一样平常不会有体验上的问题。但笔者在事情中察看发明:纵然再通用,用户也可能会在保存功能上碰到疑心,以致轻忽了它的存在。这是为什么呢?保存功能应该若何设计呢?我想分享一下我的一些履历。

环抱保存,我感觉从机制上来分化,可以从手动保存、自动保存、保存兜底三个维度递进思虑,终极找到合理的保存设计要领。

一、手动保存

手动保存,即依附用户做额外操作才可以杀青的保存行径。此类保存,我们每每依附保存按钮。我会从保存按钮的位置个数,对齐要领和视觉样式来评论争论若何设计它。

1. 保存按钮的位置

保存按钮一样平常位于内容的下方,由于用户一样平常从页面上到下确认完内容后再进行保存。这也相符用户浏览路径方便点击。 假如设置设置设备摆设摆设内容较短,保存按钮一样平常紧跟内容,用户更轻易发明。

但假如表单内容过长且跨越一屏,保存按钮还紧跟内容的话它就不会在第一屏展现。此时用户必须把页面滑动到底部才可发明按钮。首次填写表单的话还好,但日后只对某几项内容改动的时刻,用户就很轻易轻忽按钮。而且即应用户意识到保存按钮在底部,操作效率也是对照低的。

为了办理这个问题,很多产品经由过程在页面底部供给一条弗成滚动的固定区域展示按钮。这样用户一眼便可以看到核心按钮,并且日常改动内容的时刻不必要滑动页面,可以直接保存。

不过刚才也说了这种样式一样平常用于内容较多并跨越一屏的环境。假如内容很少,用户的视线就必要超出一大年夜片空缺区域探求按钮。下图模拟了这样的环境,你是否也感觉按钮不轻易被发明,操作间隔也对照远呢?

总结一下:较短的表单建议斟酌保存按钮紧跟内容;内容跨越一屏的长表单建议用固定悬浮在底部的保存按钮。

2. 按钮的个数

其其实一个表单内不必然只有一个保存的。假如表单内容可以被清晰划分成多个功能模块,且各模块可以自力生效,那么表单可以为每一个模块零丁设置设置设备摆设摆设一个保存按钮。这样,用户在编辑某个模块的时刻,因为内容较少就可以清晰看到保存按钮了。这种设计是经由过程拆分一个保存为多个保存,办理页面较长单个保存不易发明的问题。

不过,假如划分得太细碎会造成操作资源太高的问题,同时太多的按钮也会让页面的视觉层级纷乱,冲淡用户对表单内容的关注。应用的时刻请留意这点。

3. 保存按钮的对齐要领

按钮该左对齐,右对齐照样居中,你有纠结过吗?

Luke Wroblewski 于2010年在《Web表单设计作者》一书中提到,他为评估哪一种主动作和次动作的排布要领效果最好,对23小我做了6种规划的用户测试(如下图)。测试结果是:规划A、B、C、D、F的成功率100%,且完成光阴和知足度都较好。

Luke 本人更倾向按钮左对齐的规划,来由是用户视觉的动线最短。有很多网站在保存的设计上参考了这一习气,这里就不多言了。

不过也有很多产品参考的是右对齐,比如 Zendesk。

右对齐我觉得有几点合理性。

与弹窗逻辑维持同等

表单里很多弹窗的操作区域都是右下角,表现了一种从左上到右下的视觉动线。假如这种动线对付用户成立,那么表单的操作按钮在右下角也挺合理。从统一性的角度,按钮在右下角与弹窗维持了同等,用户的心智也对照统一。

个别表单的特殊性

很多表单功能是更得当右对齐的。比如价格结算这样的功能表格,核心数据(比如价格)都在右侧展示,用户的主要视线会从右侧从上往下滑动。终极的提交按钮也就自然地选择在了右侧。是以这些产品会斟酌整体都将按钮放于右侧确保统一性。

居中对齐也是一种对齐要领,有些产品出于中立的角度选择了居中的对齐要领,维持了视觉的对称性,常用于弹窗。

关于对齐要领总结一下:设计师在设计对齐要领可以自行选择对齐要领。但在设计中要尽可能斟酌同等性和易用性。尽可能地用起码的对齐要领满意用户体验和营业需求。

4. 按钮的颜色大年夜小

保存按钮被漠视的另一个缘故原由便是不敷显着。除了显着的颜色以外,按钮也必要在规范容许的环境下尽可能的大年夜而不易被遮挡。在客户反馈中,我们碰到过按钮固定底部且右对齐的时刻,用户的输入法功能条盖住了按钮的环境(就像下图)。我们无法节制桌面系统插件的一些遮挡,以是我们必要将按钮设计得尽可能显着。

二、自动保存

自动保存,即用户完成内容的输入即完成了对内容的保存。当然,不是所有环境都得当应用自动保存。接下来我会评论争论两种适用的场景。

1. 控件自动保存

有些控件自力性较高,直接操作就生效可以前进操作效率而不会孕育发生疑心。实际上用得最多的便是开关(switch)。

不管是无线端照样 PC端,越来越多的功能开启或权限节制都在应用开关组件。当点击开启或关闭时,控件急速生效,并经由过程成功提示做出反馈。这也越来越成为趋势。而且假如一个状态控件必要保存才可以确认的话,那操作之后保存之前的时刻用户会被未保存的状态所迷惑。

假如一个状态控件必要保存才可以确认的话,那操作之后保存之前的光阴段用户会被未保存的状态所迷惑,以致会忘了点击保存(如下图)。以是自动保存对付开关组件异常紧张。

无意偶尔候开关开启后是必要设置设置设备摆设摆设内容的,这里的处置惩罚要领就会发生一些变更,一样平常有两种环境(如下图):

一种环境是开关隶属的设置设置设备摆设摆设内容有默认值,这样开关和设置设置设备摆设摆设内容就可以分开保存。开关自动保存保留,编辑内容必要经由过程保存按钮自行保存。

另一种环境便是开关和设置设置设备摆设摆设内容必须强绑定不能零丁生效的时刻,比如设置设置设备摆设摆设内容无默认值,必然必要用户输入后才可正常开启。此时开关必要和内容一同编辑保存,即开关无法自动保存,必要一并编辑完后点击保存。

总结一下,开关在自力无需编辑的环境下得当自动保存。其他环境则得斟酌编辑保存了。

2. 全局自动保存

既然个别控件可以直接保存生效,那我们是不是可以想象一下全局自动保存呢?也便是说表单的每一内容都可以自动保存,这样可行吗?

笔者觉得在绝大年夜数环境下这种全局自动保存会有以下体验上的风险:

有些组件很难定义何时自动保存。比如输入框里,在编辑一大年夜堆翰墨的时刻,系统很难判断何时用户输入完毕并做保存。

每做一步就生效,没有容错余地。假想每一个操作履行就急速生效不能反悔,那你真的不敢随意马虎操作表单了。一个闪掉造成差错或资损那可不是开玩笑的。

频繁保存造成的滋扰和系统压力。每一步操作就保存生效一定带来每一步保存成功的提醒。频繁的成功提示真的会很滋扰用户的沉浸操作。别的如斯频繁的调用保存接口对付系统也有必然压力。

说完风险,我也总结了一些得当全局保存的环境:当你编辑的内容存在草稿状态,系统就可以随时或过一段光阴后自动为你保存草稿,但你照样必要有终极提交或生效的按钮做着末切实着实认。像周报系统这种必要大年夜量编辑的功能就得当自动保存。

三、保存兜底

当懂得到了自动保存有自身的局限性后,我们也会发明大年夜多半表单内容都照样必要手动保存的。既然是手动保存,就很难避免再怎么设计总有个别用户照样会忘怀保存。以是这时刻你就必要一个兜底规划。

这个一劳永逸的法子便是,当监测到用户有编辑行径但没有保存就想跳转或脱离的时刻弹出一个温馨的提示:您是否必要保存呢?用户可以选择去保存或者直接脱离。用兜底的法子就可以基础杜绝。

总结

一个繁杂表单的保存只有必要斟酌得手动保存、自动保存和保存兜底三个机制,才可以让功能体验变得易用又统一。盼望这份总结能赞助到你。

弥补一点,很多表单组件可能你会感觉微不够道,但简单的组件也会有很多体验细节。我们在设计时必要结合用户心智、产品特征、场景、统一性等综合斟酌。大概你会有设计规范,但当已有的组件影响到了用户体验和营业目标时,你要去判断组件是否分歧时宜。当谜底是 YES 的时刻请不要踌躇,更新换掉落它。

图片素材作者:Thunder Rockets

您可能还会对下面的文章感兴趣: