网页的排版与布局

相关推荐

网页的排版与布局

　　每个网站的设计风格都有它自己的组件合集。你的网页设计风格是你和用户交流的一种方式。下面是小编分享的报纸排版风格的网页设计原则，欢迎学习!

　　网页设计中主要的风格分类：

　　极简主义;

　　破旧风格;

　　怀旧风格与时尚风格;

　　插画风格;

　　报纸排版风格个与杂志风格。

　　报纸风格的设计最时候用于在线报纸和杂志，因为它们的印刷品也是这个结构，所以这样做用户体验会更好。用这个风格设计的网站必须是重视内容的。报纸风格的网站设计往往是靠内容丰富排版，多列结构，简单的对比色，以及其他真实报刊种常用的手法。

　　报类网站布局：特点

　　1. 白纸黑字

　　传统印刷的报纸都是白色的纸张黑色(灰、深灰)的字。这种色彩组合让我们的眼睛非常舒适，可读性好，这就是为什么报纸一直用这种配色的原因，特别是那种塞满了内容的版面。你也可以选择黑底白字，但是千万不要选黑底黄色、绿蓝色、粉红色和蓝色等颜色的字体，检视你的设计尽量在你的眼睛感觉好了之后再做，你也可以吸取经典的色彩并用于你的网页设计。

　　中性的亮和黑是基本色，你还可以使用更多的强调色。举例来说，蓝色是很好用的标题，红色是完美的按钮。导航菜单上的各种效果可以用原色的更亮或更暗的色来修饰，或者是一样调性的色彩。这样菜单会比较突出，整体的用户体验也会比较好。

　　2. 极简主义图形

　　报纸排版风格的网站界面是干净的，内容翔实的，结构合理的，图形是表达精准的，极简主义的。图形元素有以下几种：

　　线

　　形状

　　各种颜色

　　版式样式

　　纹理.

　　如我们已经提到，这类网站用色的种类总是很少。纹理更是少之又少，因为各种质感的纹理只会分散读者的注意力，让内容的可读性变差。但是纸张的质感是可以的，这个很重要，它可以是一个背景纹理，或者是有纸张质感的按钮，又或者只是页眉和页脚区域。

　　报纸风格的设置总是会基于网格的设计，或者使用多列布局，减少对形状和线条的依赖。因为它们有足够的内容去形成你的网站。

　　3.基于网格的设计或多列式排版

　　报纸风格的网站布局会有一个完美的组织结构，这些都是内容丰富的网站，所以结构第一重要。网格和栅格是内容排版最佳工具。这是是事实，“精心设计的网格系统可以使您的设计不仅美观而且清晰实用(马克博尔顿)” 网格布局设计的页面会让你的内容突破条条框框，从而吸引用户阅读你的内容而不离开。

　　相似而不相同的是多列栅格布局。这些可能有很多适合高度的栅格，但是宽度不一样。栅格越宽阔可读性越好。2种栅格会有一个很好的外观，虽然3种栅格或更多当然会更好。栅格和网格能很好的区分内容，让用户更容易找到他感兴趣的板块。当你使用这种布局的时候，你不能忘记栅格的空格。如果栅格太紧，网页上的内容就会非常难读。

　　4.标题和摘要

　　当你进入一个文字内容很多的网站或博客的时候你会打开每一篇么?标题会让我们区分感兴趣的和不重要的内容。所以每个内容板块需要有标题，哪怕这个区块在网格和栅格中很小，它都必须有标题，标题的字体要大，最好是加粗的字体和色彩不同，这样会更清晰。

　　摘要文字是对文章简短的描述，这些经常会让读者更容产生兴趣，让他们更容易理解长篇的文字内容，摘要这个元素是非常好用的，特别是博客、新闻类的网站。

　　5.主要和次要内容

　　有一种老的办法，就是绘制一条粗线在你的内容之间，当然形式不限，这样会定义那些是最重要的那些是等待被读的文字。例如：你能给你的前台页面中的文章页面设计一个大标题。这是一个有特征的区域，包含大图和图形。其他的内容将会更小并根据网格系统排列。这样将会更容易分享新内容，并且获取更多分享。

　　6.直观和一致的导航

　　报纸风格的网站排版是为内容而设计的，而且这些内容必须能容易被导航，由此可见，导航菜单的特征就是简单，和正确的位置。

　　最好的位置在页面顶部，因为这块区域是最先被注意到的，而且总是在同样的地方，如果你在页面底部，你只需要滚动页面。如果，你喜欢垂直导航，而且非要不可，让你的菜单在左边垂直，因为我们的阅读习惯是从左至右的。

　　报纸风格的网站分享出大量的文字内容，这些内容都需要能传达给用户。

　　7.分类目录

　　更好的分类目录可以让报纸风格的网站有更好的布局效果，这种情况在博客上效果更明显，其他网站也是。很多网站没做好就是内容没组织好。分类目录，在那些经常发布大量不同内容的网站(新闻类)是非常必要的。

　　将您的内容进行分类，并将其显示在菜单栏上。

　　8. 广告位

　　在你的网站火起来前，你有考虑会如何利用它赚钱么?广告是许多站长赚钱的好工具。广告banner放置的地方必须要定义好。正确的地方是侧边栏、左、右、页眉或页脚。宣传的banner经常在文字中间。这对你的广告位买家是好事，而且这些也可以刺激你的读者。

　　9. 功能边栏工具条

　　边栏不仅仅只是放广告，也可以放文章目录、最新内容、搜索框、电子邮件、导航、社交按钮、折扣或诱惑活动等。报纸风格的网站边栏是一个很好的位置，因为这里只是一个栅格而已。

　　边栏设计相关的要素：

　　尺寸(高和宽);

　　颜色;

　　字体;

　　位置。

　　边栏一般小于普通的栅格布局，不能做大，色彩保持中型，字体大小要可视，位置在页面的左边还是右边?我们之前已经说过，放在左边就是一切，因为用户会立刻看到。

　　10. 最大化留白

　　无论我们设计了多少网站，功能有多多，我们都不能忘记要留白，因为留白是报纸类网页设计风格的必要组成部分。让栅格之间留白，让空白存在于侧面和底部，用户必须有机会让他们的眼镜离开如墙一般的文本，去休息一会，并且思考。

　　一般情况下，留白被看作是没有内容的。在狭义上还有一层意思：留白是指行与行之间，字与字之间和内容元素周边。留白会让你的网站可读性更高，更简洁，即便是你的网站内容很多也如此。

　　11. 经常更新

　　报纸风格的网站布局必须有不断的内容补充与更新。因为用网格和栅格设计的网页如果没有充足的内容会很难看，因此你必须彻底填满你的网站，并且保持更新，保持与时事热点接轨。

　　内容和频率像是一对情侣，就想国王和王后。保持内容更新除了会让你的网站好看，还可以让搜索引擎更多的收录你的内容，从而影响人们的搜索结果。如果你的内容是过时的，人们会很少看你的网站，搜索引擎也一样(如：百度和谷歌等)，你的网站在搜索引擎的权重就会很低。

　　12. 开通社交软件分享功能

　　博客和新闻类网站报纸风格用得最多，而这些网站没有社交媒体的整合就不能存在。现在是大众分享时代，人们在社会网络上花费了大量时间。所以你的网站一定要有社交网络分享按钮，如：微博、微型、Facebook、谷歌、LinkedIn等，没有这些功能，你如果没这些功能，就等于放弃了大量入口。

　　还有一件事，就是报纸风格类网站必须是响应式的，这种布局效果无论在什么设备上都需要保持不变，移动类的网站不能有边栏，而且最好重新设计导航，因为移动网站滚动用得比点击多。

【网页的排版与布局】相关文章：

网页布局基础08-10