B端设计师绕不过去的10个灵魂拷问.docxVIP

B端设计师绕不过去的10个灵魂拷问早上9:30,A产品的产品设计规范评审会如期展开。

设计师、产品经理、研发小哥哥悉数到场。

产品经理主持会议，说明了今天的会议主题后，设计师开始介绍产品设计规范的设计理念了。

当设计师介绍到表单规范时，大家问了很多问题。

设计师一脸懵，但只得一个个问题耐心解释着……这些问题，很多B端设计师都遇到过，今天，我们一起来看看吧~

一、必填项的*「要」还是「不要」灵魂拷问场景：

拷问者说：我们的表单项默认都是要填写的，还有必要在label前加个产」吗？我们觉得没必要。

设计师说：要。

1.「要力的理由

antdelement近知票日记

antd

1.理由唐纳德?诺曼在《日常的设计》中说：产品外观必须能够说明问题，能自然而明显地表达外观与其作用之间的关系，使用户一看就明白。

「加减」数字选择器其实是个不错的选择，它符合唐纳德?诺曼的说法。但「加减」在选择器的两端，对用户来说，需要通过鼠标左右跨度移动才能完成操作行为，比拟费力费时。

而antd的「上下」hover设计，对于用户来说不够直观，用户并不能一眼知晓这是数字选择器，表象上来说，就是一个文字输入框。但优势是，鼠标停留在一个区域，就可以完成数字的增减。

因此，结合了它们两者的设计优势，及抹去了设计劣势，我们用了现在的数字输入框。

结果：采纳设计师的建议。

拷问者连连拍手称赞，认为设计师有思考，做的好。

八.用「checkbox」还是「switch」灵魂拷问场景:

拷问者说：这个节点复用〃字段不要用「checkbox」,用fswitchj,它看着更好看点。

设计师说不能因为它长得好看而用它，还是要以用户认知和操作提效角度出发。

[checkboxJ的使用场景checkbox用于在一组选项可以多项选择时使用。单个复选框可以表示在两种状态间切换，例如我们在注册APP时,APP会让我们选择是否同意该协议〃，如果同意，我们在checkbox上打钩即可。

fswitchj的使用场景switch用于切换单个选项的状态，类似电灯按钮的开和关。在开关本身可以表达清楚状态的情况下，可以不在开关上加文字。假设无法表达清楚的情况下，建议在开关内加入例如〃禁用/启用等说明状态的文字。

由上我们可以发现：

checkbox（单个复选框）和switch都有让用户在两个状态下选择的寓意，但switch最初的设计起源就是与开和关”相关的，后来才慢慢被拓展使用。在使用switch时，给用户的感觉更是强调开/关之类的动作态的互斥状态。

checkbox的优势是,可以让整个组件描述会更清晰，就像在做填空题一般。

结果：采纳拷问者的建议。

节点复用〃并不需要如做填空题一般，复用/关闭是和开/关一样的动作态选项。

九、label用「左对齐」还是「右对齐」灵魂拷问场景：

拷问者说：我看业界产品表单项的label左对齐和右对齐都有，你说说我们该用哪种呢？

设计师说：定义一种，特殊场景再定义。

1.一番深挖马泰奥?彭佐在2006年进行了label对齐的眼动实验，结果如表所示。

对齐

右对齐

左对齐

从label到输入区

50充秒

240q杪

500*($

填写通度

最快

快

慢

完成率

最高

高

-?

认知压力

小

大

最大

.C知果日记

可见，从用户填写速度、完成率、认知压力等方面来说，label顶对齐优于

Tabei右对齐优于label左对齐。

对于Tabei顶对齐〃来说：虽然占用大量的垂直空间,但label和输入框非常紧密，有利于用户浏览和填写。

对于label右对齐”来说：人类的阅读习惯是从左往右读，而偏偏label左边是不对齐的，因此会有些影响用户的阅读效率，但label与输入框联系紧密，填写速度也较快。

对于“label左对齐〃来说：label与输入框联系不紧密,特别是当label之间的长短差距非常大的时候，还会导致用户填写表单的时间过长，但label可读性较强，且界面整体看起来较为清晰。

除上述外，还有一种输入框内label”的设计模式,这种模式会让界面干净整洁，且与输入框联系很紧密，唯一的缺点是，当用户激活输入框准备输入内容时,label会消失，不利于他们回忆表单所需要他们填写的信息。

结果：采纳设计师的建议。

拷问者听完设计师的阐述，认为这块在自己的认知范围之外，听设计师的没错。

十、短页面表单主次操作按钮怎么摆放灵魂拷问场景：

拷问者说：我看表单的主次按钮顺序有好多种，到底哪种比拟合理呢？

设计师说：这个有人做过实验，我们一起来看看。

1.一番深挖LukeWroblewski和伦敦的可用性专家Etre做过一次实验,专门对网页表单设计的主次按钮进行眼动研究。首先确定什么是主次按钮。例如我们期望用户对表单进行保存