前端需要了解的一些UX原则

209 阅读3分钟

不想当UI的前端不是好测试

1.减少用户选择的心理负担

一个人做出决定所需的时间取决于他有多少选择,这被称为希克定律。

因此当选择过多时,就会对用户造成心理负担。 减少可选择项当然是最有效的方式,但并不总是能这么做,比如说select的选项就不能随意去掉,这时就可以试试下面的两个方法:

  • 将重要的或经常使用的选项放在靠前的、容易被点击的位置,这在菜单中更常用到;
  • 采用邻近原则,彼此接近的元素或内容更容易被大脑认知与接受,因此应当把相近的选项放在一起,或进行分组,这个原则在许多方面都适用。

对选项进行分组是一种十分有效的方法,截图来自Iview UI。

2.平衡人眼的视觉误差

我们需要记住的一点是,人眼所见到的景象与大脑所认知的景象是有一定差异的,这种差异造成的后果就是本来在物理上是完美的页面元素,在进入大脑后却产生了瑕疵。通常有下面几点:

  • 相同宽度的圆形与正方形,圆形看起来要小点;
  • 倾斜的线条比竖直的线条看起来更细;
  • 相同长度的垂直线与水平线,垂直线长于水平线。 因此就需要做出一些平衡来纠正人眼的错误,比如将圆形稍微放大,将倾斜的线条加宽以及延长水平线。

在使用一些边框和icon时,通常需要注意这一点。

正方形和圆形的对比(画图工具可以明确地说明他们的宽度是相等的)

3.始终保持阴影在同一个方向

阴影通常用来使页面元素更有层次感,但需要注意的是,当页面中有多处阴影时,应保持阴影在同一投射方向,这比较符合人们的日常认知,毕竟天空中的太阳只有一个。

假装有图(因为不想自己做图又没找到合适的例子_(:зゝ∠)_

4.增加按钮的实际可点击区域

按钮的实际可点击区域与按钮的视觉大小相同通常是没有什么问题的,但如果能稍微增加一点实际可点击区域,则会增加用户的心理满足感,这是一种十分微妙的感觉。

可点击区域越大越容易操作这是自然的事,但更为重要的一个原因是,用户会发现他实际移动的鼠标距离比心理预期要小,这就像你在跑一千米时发现操场一圈不到400米,因此你实际上只跑了800米就完成了任务。

掘金的顶部菜单,可点击区域要比文字大小大很多,现在越来越多的网站都是这样