UI设计视觉差问题,总感觉没有居中对齐时怎么办
这篇文章发布于 2020/08/02,归类于 CSS
标签:
视觉差,视觉差怎么解决,UI视觉差,iconfont上为什么有的图标周围有留白,而有的图标没有留白的原因
当实现设计稿后,总感觉上下没对齐,怎么办呢?建议放大n倍,截图画框,看是否在一条水平线上。这里涉及到视觉差的问题,下面来看看相关知识
测量面积和视觉面积
- 视觉体量是人眼如何察觉物体的大小和感觉,不需要等同于物体的实际像素值
- 圆、菱形、三角形和其他非方形形状为了与方形形状保持一样的视觉大小,应适当放大
- 图标区域应为视觉平衡保留一定的空间,这一点对保持同系列图标视觉平衡很重要。(这也是iconfont上为什么有的图标周围有留白,而有的图标没有留白的原因)
不同形状之间的对齐
- 具有锐利边缘的形状应该更大,以便于其相邻的矩形对象保持视觉平衡
- 大写字母对齐是一种有效且被广泛运用的方法,用于文本和按钮背景对齐
- 将三角型图标正确放置按钮中的一种有效办法是,将其圈住并使此圈与背景对齐。
视觉圆角
- 几何圆角看起来假是因为人眼可以清楚地看到直线突然变成曲线的点
- 视觉正确的圆角需要一些特殊的算法或手动调整形状