常见的版面排版设计方式有哪些?网页设计中文字排版设计的技巧

　　导语：常见的版面排版设计方式有哪些?网页设计中文字排版设计的技巧

　　常见的版面排版设计方式有哪些?

　　首先，好的版面排版设计的用途是广泛的，有效果的，例如一个要去讲课的PPT，如果版面排版设计不好，不仅会影响到演讲者的讲课逻辑，也会影响到观众的观看效果，演讲者也不会给观众留下深刻的印象或者不会留下良好的印象。

　　其次，常见的版面排版设计方式之一是标准式，即按照从上到下的顺序进行排版设计，将图片、标题、文字等等按照从上至下的方式进行版面排版设计，一般而言广告文案就是这样的设计方式的典型代表。

　　再次，常见的版面排版设计方式之二是定位式，即将文字和图片进行各自的定位，然后形成鲜明的对比，这种版面版式设计一般出现在图文并茂的内容之中，例如需要用数据说话的图表型PPT等等。

　　同时，常见的版面排版设计方式之三是斜置式，这种版面设计的目的是给观看者一种动画般的视觉感受，即将全部的视觉元素从左向右或者从右向左的角度做一些倾斜性的移动，从而展现出一种动画之感。

　　另外，常见的版面排版设计方式之四是中轴式，这是一种以我们习惯的对称美为标准的版面版式设计方式，即将标题、图片、文字等放置在整个画面的中轴线上，以达到一种平衡的对称美。

　　另另外，常见的版面排版设计方式五是图片式，即将整个版面用一张大的图片覆盖住，这种版式设计对于图片的清晰度有着非常严格的要求，如果图片的清晰度、质感不好，不建议用这种版面版式设计方式。

　　最后，常见的版面排版设计方式之六是文字式，即这种版面设计主要是以文字为主体，以图片作为点缀的版面设计方式，一般而言这种版面设计对于文字的要求比较高，要求文字简练，便于阅读的同时能够起到画龙点睛的作用。

　　网页设计中文字排版设计的技巧

　　行长

　　我们随手拿起一本书或者一份报纸，数一数每行的文字，一般情况下都不会超过40个汉字。这是因为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的，我们更要注意划分阅读区域。文本宽度控制在450-700px为宜，此范围内参照字号大小;英文每行80-100个字母(空格算一个字母)为宜;中文每行30-40个汉字为宜。

　　行宽

　　我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难;如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。因此我们可以让内容区的每一行承载合适的字数，来提高易读性。传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字体时，建议35—45个文字。

　　间距

　　通过设置间距，我们就可以控制文字的密度。网页设计中，如果每行间距太小，与文字过长一样，读者浏览文章时也容易串行;如果行距过宽，阅读时就会感觉文章不够连贯。间距没有固定的值，通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示，不管是中文网站还是英文网站，大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是25.6px。

　　关于段距，我们要考虑一下具体实际情况。比如文章篇幅较短，就不需要很宽的段距;二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思考的机会，且使文章更有层次和可读性。如(图)所示，1.5-1.8em的行距的确是非常适于阅读的文字密度。

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

　　行对齐

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

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

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

　　文字留白

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

　　对齐

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

　　7

　　亲密性

　　位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。亲密性可以从两点入手：适当留白、以视觉重点突出层次感。比如以下案例中图文搭配，这是多个元素在一起的组合排版。