![UI设计](https://wfqqreader-1252317822.image.myqcloud.com/cover/944/43737944/b_43737944.jpg)
2.5 视觉边界
2.5.1 位于视觉边界的错误信息
人的视网膜上中央区域的视锥细胞非常集中,比中央区域之外的部分要多得多,通常将这个区域称为中央凹。视锥细胞是分辨颜色的主要细胞。因此,实际上只有聚焦区域的物体才能够被真真正正地看清楚,而边界视野的分辨率和透过覆满水雾的浴室玻璃看东西一样,但经过大脑的整合填补,使人产生能够看清楚周围所有事物的错觉,也就是说,无论你把眼睛聚焦于什么地方,你真正能够看到的地方也只有那里(见图2.5-1)。
![](https://epubservercos.yuewen.com/82F748/23020635301635706/epubprivate/OEBPS/Images/42048_56_1.jpg?sign=1738849945-676i2QdvPKlIx71KdW2k5vEI2qMzDprt-0-95c1c4bc89e3dfcfae94fb99a9d9c7a1)
图2.5-1 边界视野的分辨率和透过覆满水雾的浴室玻璃看东西一样
视网膜的边界更多的是视杆细胞,这类细胞能够感光,但是不能感色。一般来说,只有在夜晚的时候才会发挥作用,边界视觉的作用如图2.5-2所示。
![](https://epubservercos.yuewen.com/82F748/23020635301635706/epubprivate/OEBPS/Images/42048_56_2.jpg?sign=1738849945-zeaIXeciEwQt9ICj3qV6GUsNVR1NsmzH-0-c97a7d2acc339a88614180a6a3b97817)
图2.5-2 视觉边界的作用
在UI设计上,有一些界面中的错误信息的放置位置违反了人眼的生理结构,常常将那些重要的错误提示信息放到用户当前的视觉边界的位置上(一般来说距离视觉焦点1~2cm,人的视觉就会严重下降),导致用户根本注意不到。如图2.5-3所示的注册网页,填写完用户名和密码后,用户的视觉焦点位于登录按钮区域附近。输入的信息有误,错误提示却出现在2cm之外的视觉边界的位置上,用户根本注意不到,单击登录按钮之后没有任何响应,用户就会感到莫名其妙。
![](https://epubservercos.yuewen.com/82F748/23020635301635706/epubprivate/OEBPS/Images/42048_56_3.jpg?sign=1738849945-KHyWzG1UMPYUjsqnxOgUiS1hTzkXpHdi-0-7276bdee8f8109733284f908bd65137c)
图2.5-3 重要的错误提示信息放到了用户当前的视觉边界位置
再如图2.5-4所示,用户也可能注意不到错误信息。
原因有两个:一是错误信息位于视觉边界区域;二是和错误信息非常接近的标题也是红色的,用户的视觉边界看到的图像大致如图2.5-5所示。
![](https://epubservercos.yuewen.com/82F748/23020635301635706/epubprivate/OEBPS/Images/42048_57_1.jpg?sign=1738849945-xGxDd63e9d77CCZJ2IlAX7kTfkxy4XgX-0-426cd02876ce4debb8616d9cf249ef47)
图2.5-4 用户注意不到错误信息
![](https://epubservercos.yuewen.com/82F748/23020635301635706/epubprivate/OEBPS/Images/42048_57_2.jpg?sign=1738849945-6LMjAzImr41yV5kEXTR34FI4PEOiLL6C-0-6cd4595292ad4c0aa744f42a8a334de6)
图2.5-5 用户的视觉边界看到的图像
关于上述问题的改进方法有很多,下面介绍几种常见的方法:
(1)明确标注错误,并放在用户的中央凹区域附近;
(2)在提交之前就动态地实时提示错误信息,而不是将错误提示全部放在提交之后,如图2.5-6所示。
![](https://epubservercos.yuewen.com/82F748/23020635301635706/epubprivate/OEBPS/Images/42048_57_3.jpg?sign=1738849945-zSDuAT6gPD41LpsD2zEgstwzA26O7G4X-0-bb1ccab5cf8be380cbddbe122c100bce)
图2.5-6 两种改进视觉边界问题的方法