专栏名称: 交互设计学堂
系统学习交互知识,就找老D。干货分享、在线培训、行知书院三大版块帮你提升自己。 最新资讯-全是干货还有老D点评,每天推送; 交互培训-在线课程帮助小伙伴进入交互行业,只要3个月; 行知书院-老D帮小伙伴们解读经典设计书籍,都是“硬”知识。
目录
相关文章推荐
庞门正道  ·  搞,包,装。 ·  2 天前  
庞门正道  ·  来自澳大利亚的订单。 ·  4 天前  
ZaomeDesign  ·  SPARK新作: 孟加拉国吉大港市 One ... ·  3 天前  
字体设计  ·  盒子和展开图纸 ·  6 天前  
51好读  ›  专栏  ›  交互设计学堂

钉钉的体验改进 (2) 开关与提交按钮的博弈

交互设计学堂  · 公众号  · 设计  · 2024-10-31 21:30

正文


上图,来自 钉钉用户体验 公众号,它的不优雅之处:提交按钮之前,存在开关(Toggle/Switch)。


开关的特点是“切换马上生效”,这就和行动召唤(CTA)产生潜在矛盾:认知存在两类“生效”,如果一切都要等待CTA按钮生效,那么切换开关生效将是摆设。


典型的“时间差陷阱”!


图片来自 https://in.pinterest.com/iuserexperience/


进一步理解,每个开关都自备提交按钮:



增加提交按钮,将产生逻辑冲突:



微信也存在相同矛盾:



任务相似,采用相似设计,居然破坏了一致性!背后原理:添加好友成功之前,设置对方权限无法生效;权限生效必须发生在添加好友成功之后。



流程的差异,来自任务基因:添加好友是一种协作,双向;修改好友权限是一种自主任务,单向。(表单高手课程学员,复习第39讲:多人协作表单)


■设计改进


复选框 Checkbox,支持选项等待CTA生效。这是复选框和开关的重要差异之一。


 from: Checkbox vs Toggle Switch, Saadia Minhas
https://medium.com/ux-planet/checkbox-vs-toggle-switch-7fc6e83f10b8


复选框支持单选,往往会被转换为“选项清单”:



复选框在移动APP设计中地位尴尬:原生iOS并没有标准的 Checkbox 样式。移动设备APP中的“勾选”,往往是图片按钮和列表视图(容器)的组合应用,形成“选项清单”界面。



苹果公司Swift开发体系提供“列表容器”的选择视图:


https://developer.apple.com/documentation/swiftui/list


“选项清单”的好处:选项显而易见,可以扩展更多选项,随时从单选转化为多选。



“选项清单”等效的原生HTML控件是


https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select


“选项清单”等效的 Windows控件 是 列表框 Listbox:


https://learn.microsoft.com/en-us/windows/apps/design/controls/combo-box#list-boxes


坚持采用原生控件,如履平地;体验设计,先学会走,再考虑跑,然后起飞。


(未完待续)


- END -


注:交互设计学堂公众号接受投稿啦,如果你有好的原创设计类文章,可联系客服。别让灵感溜走,快来投稿吧~~