UI知识，尺寸对UI设计的影响

 

 

 

 

 

影响UI设计结果的因素

 

 

(一)视觉尺?篇

 

 

 

 

 

并不想写一个类似软件使用说明书的UI制作范例，同样是设计UI元件，所以选择了另一种角度作为切入点，讲述一下UI的设计取选过程吧。

 

人机互交里，最重要的部分，是信息传达。当你眼睛所见信息越少，你判断信息的效率就越高。而在UI设计工作里，首要的是信息传达效率，其次是信息传达次序最后才是审美需求。

 

我们先拟定一个命题：比如做一个放大镜的UI元件

 

 

多数人都可能认为我交出这么一个稿子，会被直接否掉，原因就是太简单，太单调了。但是这种命题练习的命题内容并不完善，如果这是为手机搜索条做提示用的UI元件。那么它就很适合——

 

 

对比清晰，辨识方便，它的尺寸，可以做得足够小，这种元件没有操作需求，仅仅是提示用，所以，只要肉眼辨识不困难，可以要多小就多小。顺便说一下，为什么手把的倾斜角度是45度？因为在像素矩阵里，当你要去放大缩小的时候，45度可以排列出最规整的直线，最不易变形。如果图片不是用程序缩放的时候，也最容易匹配。

 

在视觉引导范围里，信息传递的效率不仅仅受信息的繁复程度影响，也有其他影响因素，例如：尺寸。尺寸过小，辨识不容易，尺寸过大，不能一眼辨识主要信息，也影响辨识效率。

 

那么在UI里，最小和最大尺寸应该是多少呢？

 

最小尺寸参考，请低头看一下你的键盘按钮和按钮上的字母大小，这是经过工程设计师精密计算的，一臂长辨识最优尺寸。再小就会产生辨识困难，你就需要花时间去分辨了。

 

 

所以在UI设计工作中，你先要明确你的设计是为哪种硬件服务的，电脑显示器的操作距离就是一臂长以内，其尺寸可以直接参考键盘按钮大小。而手持设备基本都是半臂距离，那么最小尺寸就是四分之一键盘按钮大小。

 

当然这是一个相对模糊的标准，因为目前市场上硬件尺寸不同、解析度不同，同时还有智能电视等远距离观看设备，从而无法用像素级别来确立精准的大小标准。所以建议同学们经常留心体会一下常用物品的尺寸（这里的尺寸不是像素尺寸，而是实际的感官尺寸）。

 

那么再说最大尺寸：最大尺寸基本没有设计师会违规操作，因为UI设计里寸土寸金，相信很少有人会去制作超比例尺寸的UI原件，最多是构图偏大。构图是以后的讲述内容，所以今天先放一放。

 

以上的内容讲述的基本都是视觉尺寸，而说到像素尺寸，随着硬件的发展，解析度的提高，设备的使用距离变化，UI的像素尺寸，其实越来越贴近人的视觉辨识尺寸和操作尺寸，而不再像原来一样，16*16／32*32／64*64那种标准尺寸了，这算是技术给设计带来的新课题吧。

 

不过请记住，无论你使用什么尺寸去绘制UI最好遵守一条规则：所有图片尺寸数均为偶数，因为在像素矩阵里，奇数的图片缩放形损相对会更加严重。

 

我们来复杂化一下刚才那个放大镜，简单的增加一些细节：

 

 

与之前相比，其实区别不大，但是这种方式，比纯面片细节可以更多一点，很多物品只靠剪影是很难区分的，所以线性的方式，能提供的信息更多，更精准，但是适用的尺寸，可能就要更大一点了，因为以像素为单位去构成线型是有极限的。

 

在同样缩放的条件下，细节越多，越难以辨识。所以当你去制作越小尺寸的UI原件的时候，就越需要简单“粗”暴。

 

 

嗯，终于看上去有那么点意思了。

 

 

 

比之前复杂，并不等于比之前高端，UI原件的视觉尺寸增加的时候，可承载的细节也可以增加，原则就是，不能超过视觉辨识度。

 

在相同尺寸下，可承载的细节是有限的，精细化原件内容还是的根据实际尺寸来定夺。

 

为什么很多元件下面都有边框？

 

 

UI中有大量的信息来源。

 

 

在没有边框的情况下，元件不可能都整齐划一，这等于复杂了视觉信息，降低了信息传达的效率。图标本身其实已经很简单了，但是因为都集中在一起，信息量还是比较复杂的，你只要稍微看久一点，就会有视觉疲劳，分辨信息效率会越来越慢。

 

 

人眼在识别视觉信息的时候，首先做的第一件事就是只辨识相同形状，所以增加了底板之后，虽然降低了识别效率，但是图标内容的识别变得更独立了。你很难同时去注意两个图标内容。降低视觉信息读取量，等于增加了视觉耐受性，你可以看的更久。

 

 

利用人的视觉习惯，去有目的的引导用户信息读取次序，就是所谓的视觉引导了。

 

人最先看到的是占视觉面积最大的部分，但是最容易观察到的，确是最不同的最小部分。所以为了便于用户区别信息，UI中，才会出现多态按钮，多态边框。

 

提示关注的方法有很多：

 

色彩明暗区别

 

 

形状区别

 

 

可视面积对比

 

 

当你希望极度引起用户注意的时候，你使用的方法可能是综合而多样的。

 

 

这种看起来就精致很多了吧？可能很多人更关心的是这种效果是怎么做出来的 ，那是以后的问题，有时间我可以像软件使用说明书一样去记录一个商用矢量的效果。

 

这种相对复杂元件，实际上在UI里并不多，细节丰富，等于不太可能做非常小的尺寸，而UI的构图设计里，能给这类元件发挥空间的地方，多是展示区域。

 

视觉尺寸决定你工作的内容繁复程度，信息传递的效率虽然最重要，但是也是最容易被割舍的部分，引导用户的层级往往反客为主，成为决定你设计构图的主要因素。怎么在有限的尺寸下，权衡信息效率与视觉美观的平衡点，是设计功力的一种体现吧。

 

根据实际硬件条件，功能需求，信息层级，操作体验等有限条件下，去合理调控功能与视觉的平衡点，才是UI设计师的本质工作。

 

今天就谈到这里，希望大家在工作中能意识到尺寸的重要性，从功能的角度更有效率的完成每一份工作。