最近(其实过了一个多月了,太懒了一直没写)开始了项目的移动端设计,在选择器上跟同事有一些分歧,所以开始小小探索了一下移动端的单选和多选,果然设计的探索往往出现在出其不意的地方,往往我们觉得不起眼的地方,可能已经有设计师精心打磨过,比如平常使用很多,但没有注意过的跨页单选。
在移动端,选项不多时的单选控件,通常是从下方滑出或上方下拉,而选项较多、经常变化、甚至不同角色看到的选项不同时,往往会将选项放在一个新开页面中,这时不同设计师会有不同的看法,比如选择选项后是否需要确认操作?自动返回是不是会容易导致误操作?通过遍历了一些常用APP(手机里仅有的几个适合遍历的),发现大家都已然在遵守相关交互规则。
首先,整理出的三种跨页单选形式:
- 无确认且不自动返回
- 点击选项后自动返回
- 确认后返回
1、无确认且不自动返回
说明:跳转到选项页后,会标记当前选项,一般初始状态会默认选择无或全部等选项,当选择后,仍停留在当前页面,仅在当前选项给出标记。
这种形式的常见于设置的时候选择设置项,,在这里返回按钮相当于一个“确认”操作,设置页里每个选项都是一个单独的功能设置,选择并返回后即生效;其次,从心理上考虑,用户来到每一个设置选项中时,也许并没有明确设置的目的,而是需要看到所有选项后再进行选择,所以不给出自动返回,能减少用户的误操作。
举个栗子
* 微博粉丝设置
* 网易云音乐音质设置
2、点击选项后立即返回
说明:跳转到选项页后,点击目标选项后即选择成功,然后自动跳转回前一界面。
这应该是最常见的一种跨页单选形式,其优点是减少了一步确认操作,在需要连续进行多次单选时优势更明显,比如在填写表单,发布信息时的一些附加选项。这种形式还有一个使用特点是,选择之后跳转到的页面,是需要进行确认、提交或发布的,比如发布微博时选择话题,选择后需要对此条微博进行发布。
举个栗子
*微博选择话题
*Lofter发布时的版权声明
3、确认后返回
说明:在选项页进行选择,点击右上角确认按钮后生效,并自动返回上一页面。
微信!!!从设置里的更改性别到发布朋友圈时选择地点,无论选项多少,都统一了单选的交互方式为点击右上方确认按钮后生效并返回,也是保证了整个APP的统一性,也可以理解为微信中的单选处并不多,且不会频繁使用,降低误操作和统一性更加重要。
* 微信-发送页
* 微信-设置页
总结
不只是跨页单选,在常见的滑出框中单选也是有规律可循的,具体选择哪种形式可根据设计目标决定:
如果操作较多较频繁、选错成本不高(选择完后还有进一步整体确认)时,倾向于减少用户操作成本,在选项较少时可考虑滑出页并且选择即确定,在选项较多甚至需要提供搜索功能时考虑新开页;
如果操作不频繁,比如类似设置项,可考虑选择后确定返回或返回即确定,让用户肯定自己的选项,避免手误。
