对话框里的确认按钮,到底是放左还是放右?
最近发现B端设计师明显变多了。原因也很简单:C端市场已经饱和,设计师职位也因此陷入了增长停滞。B端市场增长迅速,自然需要更多的设计师。对于B端界面,交互比UI相对来说更重要一些。因为B端的UI,可发挥性不大,很难说明设计的价值。而交互设计,重点是通过分析和探索,产出合理的方案。因此更容易说明设计师的思考,从而突出价值。因此,我开启了这个全新的系列:PC端交互控件解析。我将带大家学习苹果、Windows、Ant Design这3个比较主流的设计规范中,关于PC端交互控件的知识。说起对话框,相信大家都比较熟悉。但有一个普遍问题,在我之前进行某PC端软件的交互梳理时,也遇到了:软件里对话框的按钮位置完全是乱的:有时确认按钮在右边,有时又在左边。Windows规范建议将主要操作按钮(比如“确认”、“删除”)放在左边,苹果和Ant Design都建议放在右边。比如,Windows的设计规范里,给出了以下定义:
: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);margin-bottom: 24px;line-height: 2em;margin-left: 8px;margin-right: 8px;\">表达“执行”含义的操作按钮(主按钮)应放在最左边。安全、无损操作(通常为取消操作)应放在最右边。一般来说,将人们最可能选择的按钮放在一行按钮的尾端或一堆按钮的顶部(比如3个按钮上下排列)。取消按钮通常位于一行按钮的前端或一堆按钮的底部。Ant Design规范中,给出的对话框例子,主按钮都在右边:规范里对按钮位置的不统一,造成了设计师们的方案也不统一。另外,由于大多数设计师对手机端更熟悉,而手机应用应用都普遍遵循苹果和谷歌的设计规范,将主操作按钮放在右边,因此很多设计师把这个原则迁移到了PC端的设计上。建议按照Windows规范,把主操作按钮放在左边。