移动端的跨页单选控件设计-蜗牛派

移动端的跨页单选控件设计

最近(其实过了一个多月了,太懒了一直没写)开始了项目的移动端设计,在选择器上跟同事有一些分歧,所以开始小小探索了一下移动端的单选和多选,果然设计的探索往往出现在出其不意的地方,往往我们觉得不起眼的地方,可能已经有设计师精心打磨过,比如平常使用很多,但没有注意过的跨页单选。

移动端的跨页单选控件设计

在移动端,选项不多时的单选控件,通常是从下方滑出或上方下拉,而选项较多、经常变化、甚至不同角色看到的选项不同时,往往会将选项放在一个新开页面中,这时不同设计师会有不同的看法,比如选择选项后是否需要确认操作?自动返回是不是会容易导致误操作?通过遍历了一些常用APP(手机里仅有的几个适合遍历的),发现大家都已然在遵守相关交互规则。

首先,整理出的三种跨页单选形式:

  1. 无确认且不自动返回
  2. 点击选项后自动返回
  3. 确认后返回

1、无确认且不自动返回

说明:跳转到选项页后,会标记当前选项,一般初始状态会默认选择无或全部等选项,当选择后,仍停留在当前页面,仅在当前选项给出标记。

这种形式的常见于设置的时候选择设置项,,在这里返回按钮相当于一个“确认”操作,设置页里每个选项都是一个单独的功能设置,选择并返回后即生效;其次,从心理上考虑,用户来到每一个设置选项中时,也许并没有明确设置的目的,而是需要看到所有选项后再进行选择,所以不给出自动返回,能减少用户的误操作。

举个栗子

* 微博粉丝设置

移动端的跨页单选控件设计

* 网易云音乐音质设置

移动端的跨页单选控件设计

2、点击选项后立即返回

说明:跳转到选项页后,点击目标选项后即选择成功,然后自动跳转回前一界面。

这应该是最常见的一种跨页单选形式,其优点是减少了一步确认操作,在需要连续进行多次单选时优势更明显,比如在填写表单,发布信息时的一些附加选项。这种形式还有一个使用特点是,选择之后跳转到的页面,是需要进行确认、提交或发布的,比如发布微博时选择话题,选择后需要对此条微博进行发布。

举个栗子

*微博选择话题

 移动端的跨页单选控件设计      

  

*Lofter发布时的版权声明

移动端的跨页单选控件设计

3、确认后返回

说明:在选项页进行选择,点击右上角确认按钮后生效,并自动返回上一页面。

微信!!!从设置里的更改性别到发布朋友圈时选择地点,无论选项多少,都统一了单选的交互方式为点击右上方确认按钮后生效并返回,也是保证了整个APP的统一性,也可以理解为微信中的单选处并不多,且不会频繁使用,降低误操作和统一性更加重要。

* 微信-发送页

移动端的跨页单选控件设计

* 微信-设置页

移动端的跨页单选控件设计

总结

不只是跨页单选,在常见的滑出框中单选也是有规律可循的,具体选择哪种形式可根据设计目标决定:

如果操作较多较频繁、选错成本不高(选择完后还有进一步整体确认)时,倾向于减少用户操作成本,在选项较少时可考虑滑出页并且选择即确定,在选项较多甚至需要提供搜索功能时考虑新开页;

如果操作不频繁,比如类似设置项,可考虑选择后确定返回或返回即确定,让用户肯定自己的选项,避免手误。

分享到:更多 ()
Copyright © 2015-2025 woniupai.net 蜗牛派 版权所有
皖ICP备18016507号-1 | 本站内容采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议