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

影响UI设计结果的因素 (一)视觉尺?篇 并不想写一个类似软件使用说明书的UI制作范例,同样是设计UI元件,所以选择了另一种角度作为切入点,讲述一下UI的设计取选过程吧。

图片画册平面设计排版ps理论教程

副标题 副标题 副标题 副标题 副标题 副标题 副标题

 

 

 

 

 

影响UI设计结果的因素

 

 

(一)视觉尺?篇

 

 

 

 

 

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

 

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

 

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

 

UI知识,尺寸对UI设计的影响插图

 

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

 

UI知识,尺寸对UI设计的影响插图(1)

 

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

 

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

 

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

 

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

 

UI知识,尺寸对UI设计的影响插图(2)

 

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

 

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

 

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

 

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

 

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

 

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

 

UI知识,尺寸对UI设计的影响插图(3)

 

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

UI知识,尺寸对UI设计的影响插图(4)

 

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

 

UI知识,尺寸对UI设计的影响插图(5)

 

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

 

UI知识,尺寸对UI设计的影响插图(6)

 

 

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

 

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

 

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

 

UI知识,尺寸对UI设计的影响插图(7)

 

UI中有大量的信息来源。

 

UI知识,尺寸对UI设计的影响插图(8)

 

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

 

UI知识,尺寸对UI设计的影响插图(9)

 

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

 

UI知识,尺寸对UI设计的影响插图(10)

 

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

 

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

 

提示关注的方法有很多:

 

色彩明暗区别

 

UI知识,尺寸对UI设计的影响插图(11)

 

形状区别

 

UI知识,尺寸对UI设计的影响插图(12)

 

可视面积对比

 

UI知识,尺寸对UI设计的影响插图(13)

 

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

 

UI知识,尺寸对UI设计的影响插图(14)

 

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

 

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

 

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

 

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

 

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

 

 

 

 

 

影响UI设计结果的因素

 

 

(一)视觉尺?篇

 

 

 

 

 

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

 

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

 

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

 

UI知识,尺寸对UI设计的影响插图

 

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

 

UI知识,尺寸对UI设计的影响插图(1)

 

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

 

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

 

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

 

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

 

UI知识,尺寸对UI设计的影响插图(2)

 

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

 

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

 

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

 

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

 

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

 

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

 

UI知识,尺寸对UI设计的影响插图(3)

 

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

UI知识,尺寸对UI设计的影响插图(4)

 

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

 

UI知识,尺寸对UI设计的影响插图(5)

 

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

 

UI知识,尺寸对UI设计的影响插图(6)

 

 

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

 

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

 

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

 

UI知识,尺寸对UI设计的影响插图(7)

 

UI中有大量的信息来源。

 

UI知识,尺寸对UI设计的影响插图(8)

 

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

 

UI知识,尺寸对UI设计的影响插图(9)

 

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

 

UI知识,尺寸对UI设计的影响插图(10)

 

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

 

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

 

提示关注的方法有很多:

 

色彩明暗区别

 

UI知识,尺寸对UI设计的影响插图(11)

 

形状区别

 

UI知识,尺寸对UI设计的影响插图(12)

 

可视面积对比

 

UI知识,尺寸对UI设计的影响插图(13)

 

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

 

UI知识,尺寸对UI设计的影响插图(14)

 

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

 

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

 

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

 

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

 

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

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部