最新消息:文章中包含代码时,请遵守代码高亮规范!

版式设计的样式和版面【原创】

UI设计 Josie 437浏览 0评论

1.概念:在版面上,将图片、文字进行排列组合,以达到传递信息和满足审美需求的作用。
2.要素:图形、标题文字、正文和色彩
3.影响版式设计的因素包括样式和版面
样式:视觉度、图板率、文字跳跃度、照片跳跃度、网格拘束率、空白率、文字排列类型、字体印象
版面:明确主题、分开主副题、群化、避免暧昧、整理流向、抑制四角、利用版心线、造型技巧

一.样式(指文字、图片的外观)
1.视觉度:文字、图像(照片、插图)对人产生的视觉吸引力的强度。越引人注目的物体视觉度越大。
(1)图片视觉度高于文字
版面中插入照片或插图能够提高视觉度,增加阅读的兴趣。
(2)图片分类:抽象性、写实性(抽象图形视觉度高于写实图形)
写实性:人脸视觉吸引力最强,天空、大海、草原视觉吸引力最弱
* 低质量的图片极大的降低版式的品质
分辨率300dpi以上,无压缩;
图片等比例放缩。

2.图板率(版面中图片跟文字所占的面积比。全是文字图板率为0%,全是图片图板率为100%)
* 视觉度与图板率的区别
(1)提高图板率可以活跃版面
(2)完全没有文字的版面显得空洞(50%左右,亲和力急剧上升;超过90%,单调无味)
(3)适当的图板率:严肃文学 10%
一般读物 30%
趣味图书 50% —90%

3.文字跳跃度(版面中最大字与最小字,字体大小的比率。比率越大,跳跃率越高) 较高的文字跳跃率可以吸引人的注意力
降低跳跃率给人沉稳、高品质、历史感的印象
提高跳跃率给人健康、有活力的印象

4.照片跳跃度(版面中面积最小的图片与面积最大的图片的面积比叫做图片跳跃率,比率越大,跳跃率越高)
(1)图片跳跃率低,给人以稳重,高品质的感受。图片跳跃率高,给人以轻松俏皮的感受
(2)放大某些图片,形成主次,版面显得更加有条理,有生气
(3)大框架宜用局部特写的照片

5.网格拘束率(文字、图片受网格约束的程度)
* 严格拘束与网格的版面给人稳重的印象
脱离网格则有自由的感觉,产生轻松有趣的版面
* 要体现庄重、高格调,最宜使用高网格拘束率的版面设计
* 拘束率:严肃文学 高
趣味图书 低
* 图片的外形:角版、出血版、羽化版、挖版
角版拘束性强,给人严谨、高品质的印象;
出血版相较角版更富变化,更活泼;
羽化版边缘模糊的图片给人以柔美的印象;
挖版不规则的边缘给人以自由活泼的感受。
* 大量角版中插入少量挖版,即能打破沉闷,又不破坏原有冷静气氛;
大量挖版中插入少量角版,可以稳定画面;
* 重要事件或人物不宜使用挖版。

6.空白率(版面上的图片文字的所占的面积与空白面积的比率。空白越多空白率越高)
* 高版面率,体现使用者是个热情、有干劲的人;
低版面率,体现使用者是个沉静稳健、有品味的人。
* 要表现高品质、高质量的商品需要大面积的空白。
* 要传递古朴、恬静的感觉
* 低空白率体现丰富信息。
* 报刊使用低空白率
7.文字排列类型
(1)齐行型:齐头齐尾(中庸的、理性的、严肃的、冷静的)
齐头散尾(界于齐头齐尾和自由型之间,有中国书法的韵味)
(2)居中型:高格调的、优雅的、欧洲古典的;
(3)自由型:自由的、活泼的、轻松的、可爱的。
* 名片的文字排列方式可以体现使用者的性格
齐行型的文字排列,是所有排列方式中最理性、最稳重的类型,可以给人诚信可靠、精明干练的印象;
居中型的文字排列,可以传递高格调、有文化品味的印象;
自由型的文字排列,不会塑造使用者是商业者的形象;
齐头齐尾的文字排列,严谨理性;
齐头散尾的文字排列,自由浪漫。

8.字体印象
中文字体四类:黑体(给人以冷静、理性、现代之感)
宋体(有现代与古典结合之感,最易阅读)
书法体(可以创造古朴、艺术的气氛)
艺术体(艺术字体变化很大,新颖别致,个性鲜明)
* 选择与文章内容相符合的字体。
* 笔画粗的字体给人以力量男性化的感觉;笔画细的字体给人以柔美女性化的感觉;
大的文字体现精神和活力;小的文字体现高贵和品质。
* 大号字旁边使用小号文字,可以增加对比,从而增添活力。
二.版面(样式按什么样的关系排列)
两个步骤:选择样式
版面调整

1.明确主题(放大主题部分,缩小次要部分,并给主题以充足的空白)
* 明确主题可以使信息有条理,便于阅读
* 文字放在图片上,不好阅读(可以加底)

2.分开主副题(拉开版面中主体元素与次要元素之间的距离)
* 分开主副体产生动感(视觉流)

3.群化(区分物体间的关系)
* 群化使画面工整,各组图片和文字都有各自区域,使版面条理清晰

4.避免暧昧(避免暧昧就能避免混乱)
* 段距
* 图片说明文字适当靠拢图片
* 对齐文字、段落和图片

5.整理流向
* 统一流向能够使版面简洁美观

空白(文字、图片周围的空间)
* 高品质
* 空白可以划分区域,使版面条理清晰

6.抑制四角

7.利用版心线(让版面元素依照版心线构图)
* 依照版心线排列元素,版面显得工整

8.造型技巧
* 将文字排列的有节奏感,有助于加强画面的美感
* 将图片有节奏的展开,可以形成节奏感

重点突出
呼应(将两个相似的形态,分别放置在左右两个版面里,让它们相互呼应)
* 放置呼应的形,可以起到连接左右版面的作用,使左右两个版面显得统一,
并可以使观众的目光在左右两个版面里流动,产生动感和趣味。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23853.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Josie的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!