设计|字体选择、排版、色彩、规格

“满版构图”的使用攻略，当要营造丰富饱满、轻松热闹、充满趣味性等氛围的版面时，满版构图是不二之选。

什么是满版构图？

满版型构图，是将、文案和设计元素等充满整个版面，营造出丰富的画面效果，具有极强的代入感以及视觉感受，传递的情感也更加丰沛。满版构图以其独特的创作效果广泛运用于各类设计作品中，无论是饱满充实的形象，还是直观而丰富的视觉感受，或是轻松随意的趣味性，都是其它构图形式不可替代的。满版构图的优点：亲和力，满版构图常使用特写、俯视角度等手法营造身临其境的场景，画面鲜活生动。这样的设计主题突出，能够很好引起消费者的注意，从而唤起人们的购买欲望。冲击力，用设计元素布满版面空间，可以产生画面代入感，让版面具有良好的视觉张力，设计感强烈。热闹、欢快

满版构图版面能够传达出轻松活泼的印象，配合跳跃的元素，画面会出现热闹欢快的视觉感受。如在促销页面中经常可以看到满版构图的运用。饱满丰富

满版构图使用各种设计元素占据版面，不会有太大的留白出现，视觉效果饱满而丰富。趣味性

满版构图可以使用视觉元素灵活多变的形式自由编排，赋予版面丰富的跳跃感，显得更加活泼，富有趣味性。满版构图的形式：满版

将放大铺满整个版面，给人大气、舒展的感觉。文字信息一般压置于图像上方或放置在图像空白处，要注意保证文字的识别性和的完整性。文字满版文字不仅具有阅读的固有功能，同时肩负塑造版面视觉风格的审美功能。使用文字和装饰元素充斥整个版面，通过巧妙的编排与组织，也可以成为美观而有视觉冲击力的版面。适用于缺少素材、文字比较多的版面。图文混排，当遇到和文字内容都比较多的设计时，可以采取图文混合排版的方式，找到的“空白区”，安排文字穿插排版。放大主体，放大主体视觉元素布满画面，让视觉集中在主体，既能突出版面重点，还可以增加视觉冲击力，使版面效果充实饱满。总结：

1、“满版构图”可以营造出丰富的画面效果，具有极强的代入感以及视觉感受，传递的情感也更加丰沛。

2、“满版构图”具有良好的亲和力、强烈的视觉冲击力、丰富饱满的视觉效果、热闹轻松的氛围和自由活泼的趣味性。

3、“满版构图”常用的设计形式有：满版、文字满版、图文混排、放大主体。

字是传递寓意的直接载体，无论在任何传播媒介中，都是最重要的构成要素，文字排列组合的不同，版面传达的视觉效果不同。因此，可以说文字的设计排版是增强视觉传达效果，提高作品诉求力，提高版面审美价值的一种重要构成技术。

在画册设计中，如何把握文字的排版规则和注意事项呢

文字设计的原则

1 文字的可读性：

文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求效果，给人以清晰的视觉印象。因此，设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为了更好，更有效的传达作者的意图，表达设计的主题和构想意念。

2 赋予文字个性：

文字的设计要服从于作品的风格特征。文字的设计不能和整个作品的风格特征相脱离，更不能相冲突，否则，就会破坏文字的诉求效果。

3在视觉上应给人以美感：

在视觉传达的过程中，文字具有传达感情的功能，因而它必须具有视觉上的美感，能够给人以美的感受。字型设计良好，组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好的心理反应。反之，则使人看后心里不愉快，视觉上难以产生美感，甚至会让观众拒而不看，这样势必难以传达出作者想表现出的意图和构想。

4在设计上要富于创造性：

根据作品主题的要求，突出文字设计的个性色彩，创造与众不同的独具特色的字体，给人以别开生面的视觉感受，有利于作者设计意图的表现。设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个性的文字，使其外部形态和设计格调都能唤起人们的审美愉悦感受。

文字的组合

文字设计的成功与否，不仅在于字体自身的书写，同时也在于其运用的排列组合是否得当。如果一件作品中的文字排列不当，拥挤杂乱，缺乏视线流动的顺序，不仅会影响字体本身的美感，也不利于观众进行有效的阅读，则难以产生良好的视觉传达效果。要取得良好的排列效果，关键在于找出不同字体之间的内在联系，对其不同的对立因素予以和谐的组合，在保持其各自的个性特征的同时，又取得整体的协调感。为了造成生动对比的视觉效果，可以从风格、大小、方向、明暗度等方面选择对比的因素。

但为了达到整体上组合的统一，又需要从风格、大小、方向、明暗度等方面选择协调相同的因素。 将对比与协调的因素在服从于表达主题的需要下有分寸的运用，能造成既对比又协调的，具有视觉审美价值的文字组合效果。

在有的版面中，文字的组合应相对较为集中。如果是以为主要的诉求要素，则文字应该紧凑地排列在适当的位置上，不可过分变化分散，以免因主题不明而造成视线流动的混乱。

说到排版，这是个大学问。网站上每一个元素都能影响浏览， 排版设计 的好坏绝对能考验一个设计师的基本功底，而短短的一篇文章并不能将 排版 介绍清楚，本文就先主要分享网站主题部分文字的排版，后期我们还会在不同系列文章中根据重点地穿插介绍排版技巧。

文字的排版需要考虑文字辨识度和页面易读性，本文就从最佳易读性规范和CRAP设计四原则的角度与大家分享怎样在网页中做出精彩的文字排版。

先想想，你觉得好的文字排版是什么样的？

在我们看来，好排版一定有着比较棒的阅读性， 文字 内容在视觉上是平衡和连贯的，并且有整体的空间感。

布局、内容摆放和栏目设计都会影响文字的阅读性。从易读性来看，需要设计师考虑字体、字号、行距、间距、背景色与文字颜色对比等。

我们在前面文章中已经重点介绍了字体和字号，以下最佳易读性规范则介绍行距和间距，分享适宜的行宽和行高，帮助浏览者保持阅读节奏，让读者拥有更好的阅读体验。

一、最佳易读性规范

1行宽

我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难；如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。

因此我们可以让内容区的每一行承载合适的字数，来提高易读性。

传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字体时，建议35—45个文字。

比如下图：

2间距

行距是影响易读性非常重要的因素，过宽的行距会会让文字失去延续性，影响阅读；而行距过窄，则容易出现跳行。

网页设计中，文字间距一般根据字体大小选1—15倍作为行间距，15—2倍作为段间距。

比如12号字体，行间距是12px—18px，段落间距则是18px—24px。

另外，行高/段落之间的空白=0754。行间距正好是段落间距的75%是非常常见的。

比如16号字体，行间距27px/段间距36px=75%。文字字号本身比较大，所以行间距也不需要严格按照1—15倍的比例设置，不过行间距和段间距的比例符合75%，看起来很不错，这样的视觉效果让人在阅读时保持一种节奏感，这就是在实际情况中将规范的灵活应用。

3行对齐

排版中很重要的一个规范就是把应该对其的地方对齐，比如每个段落行的位置对齐。

不论哪种视觉效果，精美的、正式的、有趣的还是严肃的，一般都可以应用一种明确的对齐来达到目的。

通常情况下，建议在页面上只使用一种文本对齐，尽量避免两端对齐。

4文字留白

在排版文字时，在版面需要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。此外，在排版内容区之前，需要根据页面实际情况给页面四周留出余白。

二、CRAP设计四原则在文字排版中的应用

CRAP是四项基本设计原理，包括对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）, 已经被设计师广泛应用。这四个基本原则在网页设计中对文字的排版也非常适用。

1对比

我们将对比分为三类，主要是标题与正文的字体与字号对比、文字颜色对比，以及文字颜色与背景颜色的对比。

>  标题与正文对比

在AnyForWeb网站案例页面中，标题使用18号的微软雅黑，正文使用12号的宋体，两种字体字号的对比让文字内容富有层次，很容易吸引读者眼球。

>  文字颜色对比

在伽然官网中，一部分文字采用了与主要文字不同的另一种颜色，这种对比是增加视觉效果的有效途径之一，突出展示了段落的重点。

>  文字颜色与背景颜色对比

这是非常常用的一种排版设计方式，正文文本与背景合适的对比可以提高文字的清晰度，产生强烈的视觉效果。

比如在埃森哲官网中，白色背景、红色标题、黑色正文的对比，以及红色背景与白色文字对比的应用，将文字内容清晰衬托出来，既有丰满的层次感，同时有具有很强的视觉冲击力。

设计师在使用这一原则时需要注意，必须确保文字是容易看清的，如果文字过小或过于纤细、色彩对比度不够，会适得其反，举个例子：

设计师如果对色彩的对比度还不够熟悉时，可以通过颜色对比检测工具（如Check My Colours、Colour Contrast Check）检测色差和亮度差，确保网页设计的易读性。

2重复

设计中的元素可以在整个网页设计中重复出现，对文字来说，可能字体、字号、样式的重复，也可能是同一种类型的图案装饰、文字与整体布局方式等。重复给用户一种有组织、一致性的体验，可以创造连贯性，显得更专业。

比如HeyJuice网站在产品准则部分采用了统一的“+标题+正文”形式。内容不同，而布局方式统一，风格一致。用户一眼看过去，就能知道这是属于同一个版块的内容，这样的重复很容易有一种连贯、平衡美感。

比如土巴兔装修网的流程，标题文字在同样的位置、采用同样形式，既与背景颜色形成对比，又是文字样式的重复。

重复原则在网页设计上应用非常广泛，单一的重复可能会显得单调，设计师却可以根据不同网站的需求灵活使用，比如有变化的重复能增加创新，给网页设计增加活力。

3对齐

在网页设计中，元素在页面上不能随意摆放，每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分，它可以帮助设计师做出吸引人的设计，是优秀网页设计的潜在要求。

对齐的案例就非常多了，我们随意列举两个。

曼秀雷敦网站的左对齐：

Darry Ring网站的居中对齐：

左对齐和右对齐是文本看起来更清晰、效果分明；居中对齐显得更庄重、正式、稳重。

4亲密性

位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。

亲密性可以从两点入手：适当留白、以视觉重点突出层次感。

比如以下案例中图文搭配，这是多个元素在一起的组合排版。

人眼首先被Banner图和里面文字吸引，然后再向下移动到文字描述及链接文字，这些元素的亲密性与对比形成一种平衡。

以上就是本次分享的内容啦。如前文所言，排版的好坏考验一个设计师的基本功底，平时的功夫可是必不可少的哟，我们期待大家设计的精彩排版！

本文地址： http://wwwsiweiwcom/sjinfo7282html

（一）文章排版要求，请大家务必遵守

为保证帐号文章简约、清晰、大方的排版风格，在四大不允许

1，绝对不允许出现三种以上颜色

2，三种以上字号

3，三种以上字体

4，三种以上格式模块

（二）版式统一，形成独有风格，咪蒙的两边缩进通过135和秀米都可以实现。

咪蒙就是一个短句子的集合，很多句子随意复制，就可以发朋友圈了。

（三）纯文字阅读成本高：

大标题小标题男人图文并茂

除非就是喜欢看文字的，可以全写文字。一般情况下要配个的。

文字的排版

小标题比正文大一号到两号字体，可以粗或者用不同颜色来突出。

正文用14号字体更美观，说明用12号字体

正文可以用深灰色，更显得清新文艺有逼格

若文字较多，正文里面的重要文字可加粗，或者用不同颜色突出，更有层次感，能一眼看出重点。

给段落来点边距，似乎更有逼格，但是注意关照下小屏手机，是否会显得特别窄。还可以给段落宽点的字间距，看上进心来更舒服。

，好的，是决定整个文章逼格的重点

1足够清晰，少用一些清晰度不高的图。

创客贴这个工具，可以用来做封面，有很多模板

内文图：质量必须高。

拍图一定要呈现出立体感，比如从侧面，或者仰视的角度拍食物，就会有立体感。知乎上面有很多拍摄技巧的文章。

高清，做点文字设计

1一个缺亮点的店，可因排版而增色

2一人有亮点的店，可因排版而锦上添花。

2风格统一：要尽量避免之间差异过大。

比如，上图还是一个静物，下图突然是个性表情包。

好像18岁少女带了个81岁女人的丝巾。

3足够简洁：判断一个的好坏，其很重要的一个标准就是中元素的多少。

一张如果元素过多，或者分布杂乱，就会失云它本身应该具有的表达能力，也非常不美观。

单图和组图相结合，不会单调。

再来占动图配合下就更完美

4不带水印：尽量不要用带水印的，原因是，带有水印的，往往是有版权归属，未经同意使用容易产生纠纷，另外也确实不美观，如果一定要用，可以考虑用百度搜图搜一些类似的，无水印无版权的，或者联系原作者请求授权。

另外，所别人水印P掉或者截掉是一件很掉价的事，真的不鼓励这样做。

5不宜过大/过小

过大，打开速度就会变慢。也会占用比较大的空间，影响阅读

过小也不美观，如果一定要小用图，那就尽量居中排版，不然左边密集，右边留出好大一片空白会显得更丑。

在形式上，儿童绘本的文字排列形式多数是通过版式的编排，来产生新意。

文字设计是组成绘本的重要部分。或许一本完美的绘本应该是无字的，但是再精美的插图，也总是有不能完整表达作者意图的时候，这时文字就起到了补充说明的作用，甚至是画龙点睛之笔。绘本中的文字设计，多数是通过版式的编排，来产生新意，达到补充甚至是深化画面的作用。

绘本语言或文字的文学性要求至少体现在如下几个方面：

1、 想象性、创造性与虚拟性：文学是创造性的艺术，文学用语言创造一个虚构的世界。

2、 情感性：文学是情感的形式，或“情感的象征”，文学表现人类对生活、事物所产生的情感，即使表达思想或说理，也以情感烘托出来 ，情感被客观化，成为了形式，可被观赏 。

3、 体验性：文学是作者生命体验的结晶，它是生活的反映，又超越于生活。

4、 人文关怀、表现人类生存的母题：反映和关注人类普遍或共同的价值。

5、 审美性与愉悦性：文学具有审美功能，能使人愉悦。