微信扫码登录

其他登录方式

绑定手机号

注册

我同意用户协议

忘记密码

用户协议

绑定手机号

近期有不法分子打着爱盈利的旗号,制作“爱盈利”名称的App,并伪造爱盈利证件,骗取用户信任,以抖音点赞赚钱或其他方式赚钱为名义,过程中以升级会员获得高佣金为名让用户充值。
爱盈利公司郑重声明:我司没有研发或运营过任何名为“爱盈利”的APP,我司做任务赚钱类产品从没有让任何普通用户充值升级会员。我公司产品均在本网站可查询,请将网站拉至底部,点击“关于我们”可查看爱盈利相关产品与服务。
温馨提示:当遇到此类问题请拨打官方电话或添加官方微信,以免财产损失。爱盈利官网地址:www.aiyingli.com。
  • 推广与合作
X

表单的交互设计:基于单选场景下的表单设计

来源: 2390

在做表单设计时,究竟该选用哪种控件,只要是根据情况而定的,无论哪种选择都有其优缺点,这就要结合选项数目、空间大小等因素,选择一种形式,可以最大程度的方便用户使用。

表单的交互设计:基于单选场景下的表单设计

表单是页面设计最重要的一部分内容,好的表单可以帮助人们快速填写,反之,会让用户直接点击关闭按钮。表单通常包含了:文本框、密码框、多行文本框、复选框、单选框、下拉选择框和按钮等。最近,天天和表单打交道,特别是单项选择,所以就写下这篇文章来深入思考一下,单选选择场景该怎么做交互设计。

单项选择这个场景目前有几种交互形式可以满足:单选框、开关、下拉选择框、弹出框。

一、单选框

表单的交互设计:基于单选场景下的表单设计

形式:将所有选项都列出来,每个选项前面添加单选框,选项之间互斥。优势:选项全部都列出来,方便用户查看对比。劣势:占用空间大。使用场景:通常选项少于7个,每个选项的重要性一样,用户需要进行对比才能选择。注意事项:1、点击范围

表单的交互设计:基于单选场景下的表单设计

作为单选选项,在用户使用的时候,最重要的就是点选上。点选范围决定着用户是否可以轻松选择上。有的时候,设计师通常会忽略这一点。像上图所显示的,第一种情况对用户来讲就很好点,第三种就相当难选择。所以,在设计单选的时候,需要把点选范围尽量做大。但是,还需要注意一点,就是不能影响其它选项,如下图所示的,用户的点选不会非常精确,明明想选择选项二的,结果选择了一。

表单的交互设计:基于单选场景下的表单设计

2、排列形式

表单的交互设计:基于单选场景下的表单设计

通常选项是平铺开来的,但是必须要注意距离,就像上图显示的,让用户很难判断出是选择的一还是二,尤其选项多的时候,就更需要注意。

二、开关

表单的交互设计:基于单选场景下的表单设计

形式:只有两个选择,通常就是开与关。优势:操作时体现了状态,然后可以很明显的表示所处状态。劣势:只有两个选项,并且是对立的,使用情况受限。使用场景:通常表示一个功能的开启或者关闭。注意事项:

1、开关状态一定要明确

表单的交互设计:基于单选场景下的表单设计

上图的这两种状态都是存在的。第一种,汉字表示按钮移过去会是什么状态,给用户心理预期;第二种,汉字表示的是当前的状态。如果去掉颜色,就是完全相反的两种情况。当用户看见这两种按钮的时候,也需要仔细的分辨。

表单的交互设计:基于单选场景下的表单设计

像苹果手机做的就比较好,去掉了开关的文字,完全通过视觉状态告诉用户目前的状态。不会出现认知偏差。

三、下拉选择框

表单的交互设计:基于单选场景下的表单设计

形式:采用下拉框的形式,点击下拉后,显示选项,可以将点击率高的选项放在前面,方便选择。优势:占用空间小,在展开所有选项后,可以按重要程度排列。劣势:不点击下拉,用户不知道选项都有什么,不方便比较。使用场景:选项多余5个,在20个以下,选项之间比较程度低,用户很清楚自己需要选择什么。注意事项:1、选项长度差别大

在下拉选项中,如果选项长度都差不多,那就比较容易设计,但是如果选项长度差别很大,就很烦人。选项虽然可以实现折行设计,但是通常下拉框里的选项没有分隔线,只是靠距离来分隔,如果折行,就需要增加分隔线,否则就不能区分折行选项。所以在设计的时候,尽量还是让选项一行显示,以最长的选项为基准设计下拉框的宽度。如下图所示。

表单的交互设计:基于单选场景下的表单设计

四、弹出框

形式:以弹出框的形式展示,在弹出框里面,除了选项以外,还有其它辅助控件。优势:可以有筛选控件,帮助选择。选项内容可以非常多。劣势:弹出页面,增加了等待时间,增加用户的操作步骤。使用场景:选项非常多,一般多余20个,需要筛选控件辅助。

在做表单设计时,究竟该选用哪种控件,只要是根据情况而定的,无论哪种选择都有其优缺点,这就要结合选项数目、空间大小等因素,选择一种形式,可以最大程度的方便用户使用。

文章作者系 @设计Zan


爱盈利(aiyingli.com)移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者,移动盈利指导。我们的目标是让盈利目标清晰可见!降低门槛,让缺乏经验、资金有限的个人和团队获得经验和机会,提高热情,激发产品。

评论

相关文章推荐

SELECT dw_posts.ID,dw_posts.post_title,dw_posts.post_content FROM dw_posts INNER JOIN dw_term_relationships ON (dw_posts.ID = dw_term_relationships.object_id) WHERE 1=1 AND(dw_term_relationships.term_taxonomy_id = 412 ) AND dw_posts.post_type = 'post' AND (dw_posts.post_status = 'publish') GROUP BY dw_posts.ID ORDER BY RAND() LIMIT 0, 6

京ICP备15063977号-2 © 2012-2018 aiyingli.com. All Rights Reserved. 京公网安备 11010102003938号