版式设计基础:建立条理 2(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

undefined

统一线宽:相同属性的要素要统一线宽。

2.3 不同属性的要素,不同线宽

如果将不同属性的要素用同样的线宽会使视觉变得混乱,因为从视觉上来讲平面没有了层级关系,就看不出来优先级,不能明确优先级视线就会受阻碍,给人一种不知要从哪里阅读的感觉。

undefined

标题,正文和注释是有差异化和层级关系的,存在优先级的关系。如果把这些具有差异的要素全部使用统一线宽,会造成平面的视觉错乱。

undefined

统一线宽:不同属性的要素不要统一线宽。

* 要点

文字也是由线组成的,文字的一笔一划都是由直线和曲线组成的,所以在设计时要把文字也看做线。

为了营造页面层次感,要把相同属性的要素用同一线宽,不同属性的要素用不同线宽。

3、重量、重心与平衡

平面中的要素都有自己的“重量”,要根据每个要素的重量来进行契合主题的设计。

为了让平面达到一定平衡性,最好把重心放在水平中心的位置。

3.1 重量

平面中每个要素都有自己的重量,而要素的重量是由其面积大小和颜色所决定的。颜色则可以将要素变为灰阶色(消色)后再来考虑的。面积和灰阶度决定了要素的重量。面积越大要素越重,灰阶度越重要素越重。这里的灰阶度(消色)是专用术语,指的是颜色黑白灰的色阶,叫做灰阶色,又称消色。

灰阶色:

undefined

灰阶度越高颜色越纯,重量也就越重。

undefined

重量-大小:

undefined

要素的尺寸越大,重量越重。

重量-颜色:

undefined

要素的颜色越重,重量也就越重。

版式设计基础:建立条理 2

重量颜色指的是颜色的纯度越重,重量就越重。重量大小指的是要素的尺寸越大,重量就越重。

3.2 重心

重心体现了事物的重点,也是平衡点,合理的设计会增添美感。人体在平衡的状态才是最健康的,大脑皮层依靠生理力在追求平衡的过程中,在视觉上做出反应,觉得“平衡”看起来舒服 也就是有美感。不是说平面中所有要素水平居中对齐,达到了平衡不会失重,才会具有美感,不是这样的。而是平面中所有要素的“分量”能在平面中达到和谐,这时才是最具美感的。

undefined

平面中所有要素的重量达到一定的平衡,才具和谐之美。

undefined

上面的案例中左右的重心得到很好的平衡,左右结构的对角线构图使平面具有张力与动势,不仅生动有趣而且还十分的和谐,具有一定的美感。

3.3 平衡

重心与平衡相互呼应,重心呈水平垂直就得得到绝对的平衡,我理解的绝对的平衡是绝对平行于水平线的,水平居中才会得到绝对的平衡。绝对的平衡适用于水平居中对齐,一种较为死板的排版方式。而相对的平衡是基于不规则图形的重心而产生的,相对的平衡能使平面增添冲击力和节奏,使平面更灵动。

undefined

undefined

绝对平衡使平面规则死板,相对平衡使平面灵动有趣。

* 要点

重量:灰阶度越高颜色越纯,重量也就越重;尺寸越大,重量越重;颜色纯度越纯,重量越重。

重心:平面中所有要素的重量达到一定的平衡,才具和谐之美。

平衡:绝对平衡中的水平居中对齐会使平面变得很死板,相对平衡会使平面变得灵动有趣。

4. 对称的稳定感

好的对称性给人带来稳定和谐的美感。比较有名的一部电影《布达佩斯大饭店》中的构图就是对称性构图。对称性给人一种稳定而又舒服的体验,从影片的角度来讲,布景与视觉对称给人一种美感和和谐感,虽然说对称性构图相对死板,但与影片中的剧情节奏相互关联产生强烈的对比,从而提升视觉感官,扯远了。

对称分为几种形式:【镜像对称】【旋转对称】【平行对称】【居中对称】。

4.1 镜像对称

镜像对称就好比照镜子,很好理解。

undefined

4.2 旋转对称

旋转对称就是按中心轴进行旋转,得到的图形就是旋转对称图形。

undefined

4.3 平行对称

平行对称就是将你要移动的要素进行平行复制,得到的新图形就是平行对称。

undefined

4.4 居中对称

居中对称就是将要素进行水平居中,很好理解。

undefined

这篇文章篇幅有点长了,对称这章就不举例子了。

* 要点

对称能使页面赋予稳定性和美感,但对称过于死板,不适用于节奏感很强的主题上。

对称分为几种形式:【镜像对称】【旋转对称】【平行对称】【居中对称】。

5. 设定版心

排版设计以在版面中设定假想边框为基础,将要素全部摆放在这个边框内。

这里设计两个专业术语“版面”和假想边框。版面接下来会讲,先简单讲一下假想边框。

 收藏