童话说说技术创业美文职业
快好知
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

单选、复选、开关应该如何使用?

11月23日 楚倾云投稿
  今天来探讨工作中遇到的一个问题:单选、复选、开关。先说一下前提,淘宝的确认订单页面,积分抵扣是用开关做选择的,而唯品用的是复选框,同样都是选择,复选框和开关到底哪个更合适?和同事讨论了半天也没得出一个明确的原则。因此想写篇文章总结一下单选、复选、开关应该如何使用。
  先来解释一下单选、复选、开关这三个词的定义:
  单选,通常都在在圈圈中显示圆点或者打钩、在同一个列表中只能选择一个选项,点击热区为整个列表项。
  复选,通常都是在方框中打钩选择,或者没有方框仅用打钩选择、在同一个列表中可以选择多个选项,点击热区为整个列表项。
  开关,拟物化开关的扁平化设计,常用于功能的开启和关闭,同一个列表中可以出现多个开关。开启通常指开启及操作,即某个选项开启后,会有后续操作或者动作;关闭通常指关闭某项功能,以及关闭功能下的选项。
  例如,iOS系统设置中开启与关闭WiFi(如下图)
  在词条定义方面我们可以看出单选其实是争议不大的,一般最常用的三种状态如下:
  1、只能选择一个选项、且必须所有选项保持可见时,在本页面使用,下图为唯品会结算页面单选支付方式。
  2、只能选择一个选项、且内容不需要保持本页面可见时,在下级页面进行选择时使用。下图为淘宝确认订单页面开启花呗分期后,在分期详情页面进行单选。
  3、只能选择一个选项、且内容不需要保持本页面可见时,使用下拉菜单进行选择时,下图为京东白条页面下拉菜单选择优惠券。
  而复选和开关是比较有争议的,我们回到文章开头的问题:淘宝的确认订单页面,积分抵扣是用开关做选择的,而唯品用的是复选框,同样都是选择,复选框和开关到底哪个更合适?我们来重点探讨一下:
  对比唯品会的结算页和淘宝的确认订单页面,唯品会无论是在Android系统还是iOS系统,都使用了复选框并将优惠的金额独立显示在列表项右侧;而且复选框点击区域更大,更适合唯品币、唯品卡这种诱导用户享优惠且比较随意的选项。
  而淘宝在Android上使用了复选框,且复选框的位置在列表右侧,优惠金额和其他文字融合在一起,不够独立突出,也就是让“用户看到此优惠可选”和“优惠了多少钱”相比,淘宝选择了先让”用户看到此优惠可选“;但在iOS系统上,淘宝使用了开关,优点是icon比较大,开启后视觉反馈更强,缺点是和复选框相比点击区域比较小,用户操作需要更慎重更精准。但为什么要在两个系统中做出不同的设计?iOS系统和Android系统都频繁使用开关,MaterialDesign中也把开关作为了基础元件,并不存在差异化设计的需求,是为了做abtest吗?如果有淘宝的UED偶然看到这个问题,可以来解答一下。
  但是单从词条定义上来说,唯品币、唯品卡和天猫积分、天猫点券一样,都是选择了之后不会有后续操作的选项,而且复选框和开关相比,复选框点击区域更大、更容易点击,在这里使用复选框是更合理的选择。
  因此,我的结论是:
  唯品会可以坚持使用复选框,而且复选框放在左侧,更容易突出右侧的优惠金额,但选中后的视觉反馈可以作出加强。
  淘宝上我更赞同天猫积分、点券等没有后续操作的选项使用复选框,而花呗分期是开启后有后续操作且需要慎重选择的选项,使用开关会更合适,在设计上可以区分对待。但如果考虑到设计的统一性,其他选项也可以使用开关。
  设计没有对错,只有合不合适。复选和开关都能达到相同的效果,但不同APP的选择却不同,我们要弄清楚他们为什么要这么设计,知道不同设计的优劣,才能在我们自己的设计中更好的运用,而不是盲目模仿大公司的设计。
  最后,给京东一点建议,如下图:
  左侧这张图片是京东白条现在选择优惠的设计,当用户进入购物的心流状态时,很容易忽略白条优惠,因为它设计的实在太不明显了。京东白条目前还是推广阶段,是希望更多的用户因为优惠而尝试使用京东白条的,因此在这个阶段,建议使用更明显的优惠方式开关,开启后默认选择一个优惠,且用户可以下拉选择其他优惠。这样的设计在视觉上更加吸引用户,优惠的反馈更强。
  总结
  只能选择一个选项、且必须所有选项保持可见时,才使用单选框,不然可以使用下拉菜单或下级页面
  在同一个列表有多项选择,且选择后不会有后续操作、建议使用复选框。但在某些场景下(例如购物),选中后需要给出用户更加明显反馈。
  功能的开启与关闭、某个选项开启后,会有后续操作或者动作、建议使用开关,如果不是需要用户慎重选择的选项,开关的点击热区可以设计的更大一些,方便用户操作,当然需要考虑视觉反馈和设计的一致性。
  评论中有童鞋说淘宝的设计也许根本没有想那么多,这样的设计是偶然的结果,分析偶然更像是一种意淫。但无论是淘宝、京东、唯品会的设计,尤其是结算页这么重要的页面设计,一定是他们的UED团队经过深思熟虑,多种方案优中选优的结果,每一个icon、字体的大小、列表的间距都经过了数次迭代。我不觉得是偶然的结果,至少我们团队每做一个需求都是提供几个方案,每个方案都是细节上稍有不同,从中选取一个。
  如果设计都是偶然的结果,那就不存在设计理论了,UED团队也就没有多少存在的意义了,淘宝和京东我都不可能有用户数据,但我喜欢大胆的去分析他们的动机,大胆的去按照自己的想法去优化,也许我的分析有一些正好是正确的呢,这是我个人的成长方式。
  我还在成长期,很多观点都是自己的大胆分析,皆不具有规范性参考、每个人的观点都不同,用辩证的眼光去看,取其精华去其糟粕。
投诉 评论 转载

绘制用户体验在今年的UXWeeks大会上,JimKalbach组织了一场MappingExperience的工作坊,提出在产品和服务之间关系日益密切的今天,如何形成一个服务生态系统,是商业……交互设计框架PACT浅谈(一):关于人的部分本文内容来自于《交互式系统设计:HCI,UX和交互设计指南》,交互设计框架一章的思考。本文是PACT交互设计框架系列文章的第一篇,主要讨论在进行交互系统设计的时候,我们所……5个关键词看小程序和App的UI设计异同微信总喜欢在深夜推出一个大新闻,昨晚10点,小程序开放公测的消息一出,我公号的文章都推不出去了,一直显示系统繁忙,那得是多大的流量啊,心里暗想,能分我一点零头就好了,估计是我想……你知道交互稿完成过程中的六个要点吗?目标明确的情况下,再开展设计!对于交互设计师而言,一个项目的开始,是从接到产品经理的需求文档开始的。从需求的确认到交互稿的确认,再到产品开发效果的确认,都考验着交互设计师……决战双11,哪些技巧可以让你的专题页设计脱颖而出?这是小编见过讲双十一专题设计的最完整最有帮助的文章,我只是看了十遍而已。考虑到我们都是做商业设计的正经人,商业的东西肯定就涉及到竞争了嘛,所以我们作为设计师不只是要会把页……聊聊UI界面中搜索入口的设计搜索几乎是现在所有网站,APP甚至操作系统的标配,不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道,起到了一个引导用户走向的重要作用。在不同的系统,不同用途的网站……单选、复选、开关应该如何使用?今天来探讨工作中遇到的一个问题:单选、复选、开关。先说一下前提,淘宝的确认订单页面,积分抵扣是用开关做选择的,而唯品用的是复选框,同样都是选择,复选框和开关到底哪个更合适?和同……商业模式驱动视频互动设计:手淘的视频就该这么玩儿当商业目标和设计碰撞在一起之后,商业模式使设计的目标更明确,而设计能为商业模式带来更好的体验。为什么说现在是一个内容为王的时代?丰富的内容为App带来了流量,优秀的内容为……UI设计中下拉刷新有什么讲究?最早的下拉刷新设计源自于Tweetie这款应用的设计,设计师LorenBrichter是这种令人欲罢不能的交互的缔造者。现在,下拉刷新的交互几乎无处不在,但即便如此也让人无法轻……那些年苹果做错的设计设计不是艺术,它不是孤立存在的,更不是设计师的自娱自乐。设计永远和人、使用场景、用户需求相关联。iOS会不断地更新迭代它的设计,除了有商业目的上的考虑外,更多的是根据时代(人、……平面设计里怎样提高作品的视觉冲击力?提高视觉冲击力的方法非常非常多,我将结合下我的平面设计经验,总结归纳一下我所学习到的平面设计理论。我一直觉得学习平面设计不能只着眼于平面,应该让眼光开阔些,所以我下面的一些例子……双十一来了,淘宝的登录页有bug?我有解决方案!关于淘宝的登录页设计中的BUG,本文作者就用所学的用户研究、交互设计以及产品经理相关的知识来分析一下,并提出了自己的解决方案。双11来了,小伙伴们有没准备“卖卖卖”呢?作……
业余时间是为了未来闲扯到底什么是“竞品”对产品经理这个角色的理解产品的轻与重需求管理:确认、跟踪、变更控制产品经理的出身问题做产品,前轻后重Google程序员转型产品经理经验分享常见的需求分析方法说明如何书写好的产品需求文档PRD从360周鸿祎身上学习产品营销的方法什么是产品经理,职责是什么?如何入门?
植树节的作文300字热议聚热点网 女生第一次应该怎么做会疼吗松软可口的面包制作方法油价或再跌,预计下调100元吨,2022年第8次油价下跌中秋节赏月吃月饼作文300字腰闪岔气(急性腰扭伤)的治疗方法有哪些?如何通过直通车提升淘宝爆款流量?和刘昊然是同学,在千古玦尘颜值比女主高,她还曾是川外校花时尚职业女装十大品牌排行榜时尚职业女装哪个牌子好让优秀的你拥有优秀的人际关系羽坛盛会决战襄阳二战时日军的大佐是个什么级别的军官

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界