版式设计基础:添加变化(2)

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

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

undefined

4、动势

有稳定感的版面,可以说是“没有动感”的设计。而“有动感”的版面不但生动有活力,而且还能使版面具有趣味性和容易引人注目的情感。这里指的”动感”是一种动能,是要素所爆发的能量趋势,称为动势。动势并不是奔驰的汽车、运动的人,飞行的鸟,而指的是动作进行中的一种状态。另外人的脸和视线也有方向性,可以用来营造动势。

undefined

此外,若是把图片和文字等要素完全对齐,就会失去动势。因此如果要营造动势,必须把版面的某部分平衡“打乱”。例如,排版时可以尝试不把各要素的位置对齐,不作水平、垂直方向对齐,不统一尺寸大小等打破平衡的方法。但是如果调整过度可能使版面太过松散,所以设计时要尽量体现畅快的节奏感。

undefined

在页面中通常文字和图片都以水平线、垂直线为基准来进行排版的。由于水平线、垂直线规则性强,会给人一种稳定的感觉。但想为版面添加动势,则应适当变换角度,假如非水平、垂直的直线或曲线的要素。

undefined

还有,可以用线营造出一定方向的动势,也可以配合箭头之类带有方向性或指向性的要素来表现动势。由于文章篇幅又被拉长了,且这个知识点就比较好理解,这里就不找案例了。

5、角版

角版指在一般的版面里,图片被配置在四方形的线框中。使用图片原本的四方形状,增加了水平、垂直的方向感。这种配置图片的方法叫做“角版”。若想为角版添加变化,可以将图片倾斜摆放,或者变化图片尺寸。

undefined

角版其实很好理解,就像PS里画个矩形,再将图片在这个矩形中创建剪贴蒙版一样。那刚开始画的这个四方形矩形,其实就是角版。

6、退底

退底是一种设计技法,就是将图片裁剪成特定形状,为版面带来更欢快的气氛。

根据图片中物像的轮廓剪切处理的方法叫做“退底”。通常的退底方法,是沿物像的轮廓不留背景地剪切图片。在垂直、水平要素较多的作品中,这种方法使图片的轮廓不规则,增加了活泼欢快的感觉。

undefined

图片的退底方法,不只是沿着物像的轮廓去除背景,也可以特意沿着物像的周围做粗略的剪切。在规则有序的版面中加入随意剪切的图片,能产生粗犷的跃动感。

undefined

还有一种方法是将图片做成与物像轮廓毫无关系的剪切。使用这种方法,读者对图片的印象将随着剪切下的形状而改变。若剪切成圆形或椭圆形,轮廓的曲线可以产生柔美的感觉;若剪切成多边形,形成的直线清楚明朗,给人一种刚硬的感觉。

undefined

另外,也可以利用类似心形或星形这些有意义的图案,来烘托版面的气氛。在特殊的例子中,也有将图片裁剪成文字形状的方法。

7、边界

配置要素多的情况下,如何设计要素之间的“边界”是很重要的。

在设计复杂的版面或配置要素很多的作品时,很难采用留白或加入动态效果等添加变化的方法。遇到这种情况,可以考虑设法在要素之间的边界下功夫,突显重点部分,分隔非同类要素,为版面带来变化。

undefined

最简单的方法,就是用分隔线作区分。较细的分隔线感觉纤细,但有时也让人感到冷酷。较粗的分割线给人感觉温和,但作为分割线过于醒目,有时会让人感到沉重的氛围,因此使用时需要多加注意。

undefined

分隔线有单纯的直线,手绘线、虚线或多层线条等等多种形态,不同形态给人的印象也不同。如果用虚线作为分隔线能为版面带来变化。有时可以显现出时尚流行的感觉。

undefined

除了使用分隔线做边界,比分隔线粗很多的带“形状”的线,或带有颜色的“面”的线也可以用来做分隔线。由于分隔线的线宽比较细,即便为分隔线改变边框颜色也不会影响到整体效果。而为一整块面添加颜色就可以显现出具有明显效果的变化。

undefined

8、点缀

点缀是指在版面中加入视觉元素,来添加细微的变化。

前面我讲过,是为了消除版式整齐页面的单调性,而用留白、线条粗细度、加入动感元素等方法为版面添加变化。这些都是为了“打乱”版面进行的工作,但是往往较难把握“打乱”的这个尺度。

undefined

我们可以用一种方法来使版面在基本不改变的基础上消除一些单调性,用到的这个方法就是增加点缀。通过追加一点新的视觉元素,使版面得到点缀,进而产生节奏感、动感和视线引导上的变化。为作品添加点缀,可以在理解内容后,设计符合内容的象征性图案,也可以利用类似几何图案那样不带有特定意义的图形。

undefined

因为用做点缀的元素在分量上没有那么沉重,所以单纯的点缀不会造成版面大幅变化。因此可以重复使用点缀元素。利用重复的方法,即使再小的元素都能影响整体的氛围。

undefined

 收藏