选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

报纸排版风格的网页设计原则

为什么我们要翻译《报纸排版风格的网页设计原则》是因为这篇文章确实有不少价值,虽然很多是英文规则,但是,还是能学到很多干货,对我们中文网页设计也会很有用。

今天我们要谈的是网页设计风格,重点是报纸排版的风格。在这篇文章中,你会发现这种风格的最鲜明的特点,并得到一些有用的提示,把你学到的东西运用到您的项目将获得更大的收获。

Design Principles for Newspaper Website Layout

风格是你的网站设计的一个总的组合方式。风格也是你和你的用户交流的一种方式。每个网站的设计风格都有它自己的组件合集。

网页设计中主要的风格分类:
  • 》极简主义;
  • 》破旧风格;
  • 》怀旧风格与时尚风格;
  • 》插画风格;
  • 》报纸排版风格个与杂志风格。

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

报类网站布局:特点

1. 白纸黑字

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

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

2. 极简主义图形

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

  • 》线
  • 》形状
  • 》各种颜色
  • 》版式样式
  • 》纹理.

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

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

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

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

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

4.标题和摘要

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

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

5.主要和次要内容

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

6.直观和一致的导航

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

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

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

7.分类目录

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

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

8. 广告位

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

9. 功能边栏工具条

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

边栏设计相关的要素:

  • 》尺寸(高和宽);
  • 》颜色;
  • 》字体;
  • 》位置。

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

10. 最大化留白

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

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

11. 经常更新

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

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

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

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

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

以下是用报纸风格排版的网页设计例子欣赏

Mijlo Blog

Mijlo Blog

International Civil Defence Organization

International Civil Defence Organization

Advertising Health

Advertising Health

Fashionising

Fashionising

Mano Teises

Mano Teises

Blackbox

Blackbox

Proven Quality

Proven Quality

The Boston Globe

The Boston Globe

Motonews

Motonews

The Brief

The Brief

New York Magazine

New York Magazine

Deadspin

Deadspin

The Wall Street Journal

The Wall Street Journal

MindBodyGreen

MindBodyGreen

TED Blog

TED Blog

I am a Food Blog

I am a Food Blog

Long Island Business News

Long Island Business News

Express

Express

Tribune

Tribune

你觉得报纸类风格的网页设计如何,能对您的项目有用么?如果你有什么建议,活其他的报纸类风格的网页设计分享,请在底部评论,谢谢。

原文:http://www.instantshift.com/2014/07/22/newspaper-website-design/  (云瑞译

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。