几个APP中的选择设计案例

  • A+
所属分类:经验思维

本文来源: THE TAO(公众号:产品与体验), 共 759 字

前几天在一个交互设计群里,小伙伴们激烈的讨论了APP设计中“是否有必要区分单选和多选”、“样式的选择”、“放在选项前/选项后的适用场景和利弊”等三大问题。不像web端和桌面应用设计中,radio单选框和checkbox多选框的适用原则已经深入人心,APP中“单选/多选”的设计规范还未定型。当然这也是好事,毕竟设计始终处于不断的发展和进化中。特此收集几个案例,供小伙伴们开脑洞。

1.唯品会结算页面

唯品会算是比较良心的,“组合支付”是真组合,优惠可同时使用,给了用户很大的自由。样式上基本沿用了web范式。

几个APP中的选择设计案例

2.花呗分期与白条分期

对比下方两张图片,淘宝花呗分期和京东白条分析:

几个APP中的选择设计案例几个APP中的选择设计案例

对比后我们发现,单选可以用小卡片代替,在放置位置上则可左可右(或可前可后)。而前后位置是争论的焦点,设计时应该基于哪些因素进行选择?是基于选项内容的多少/高低,还是基于是否需要激活/进入编辑态选择后再进行下一步操作,或者有其他考虑。因为比较纠结样式,我还截了iOS原生应用-闹钟里面的图,发现放在选项内容前后其实并没有明确的规范。

几个APP中的选择设计案例

3.百度网盘和腾讯微云的小创新

文件管理属于强编辑性的操作,一般需要进入专门的编辑态页面进行操作。百度网盘:在列表后面默认都显示小圆圈,点击任意一个选项,选中该项,并进入编辑态,可继续选择其他项,或直接进行后续操作。

几个APP中的选择设计案例

腾讯微云:点击右上角选择进入编辑态,文件图标缩小至圆形浅灰区域内,选中后,选中图标覆盖原有文件图标。(PS:这选中图标的个头确实够肥...)

几个APP中的选择设计案例

小思考:

  1. 样式上不必区分单选和多选,在复合平台规范的前提下,产品内部统一即可。用户选完一项后,不能再选其他选择,则为单选。如果用样式区分,反而有可能增加用户记忆和学习负担。
  2. 按钮位置放在选项前还是选项后,暂无明确的规则。
  3. 选择按钮常显还是编辑态再显示,视具体业务而定。


发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: