新闻类网站风格的设计原则.pdf

新闻类网站风格设计原则 编者按 ：尽管这篇文章针对的是新闻类的网站风格设计 ，但文中提到的12点原则 ， 用于每一个博 客和个站 ，对想要做大网站的设计师站长来说 ，尤其实用。对新手设计师而言 ，这些设计原则更是 必须掌握的。 正文 ： 这篇文章我们要来深度围观并学习一下某种风格的网站设计 ，没错 ！就是报刊风格的网站 ！在后面 的文字里 ，你会理解这个风格的一些基本特征 ，如果能吸收一些设计灵感或学到一些什么 ，并应用 到以后的设计中 ，那真是棒极了 ！ 风格这东西吧 ，说白了就是你是怎么设计网站的。网站也是与读者沟通的一个渠道。每种风格背后 都有一些固定构成。在网页设计中 ，大概有以下几种风格 ： 干净的 ； 丑而美的 ； 复古风格 ； 插画风格 ； 插画风格 ； 报刊风格。 报刊风格主要用在报纸或杂志的网站 ，通常都带有一些与纸质印刷品相似的结构。其实 ，这种风格 合各种网站 ，尤其是拥有大量内容的网站。报刊风格网站的特点十分鲜明 ：丰富的布局、多列分 栏结构、简洁的页面还有对比鲜明的颜色。 报刊风格网站的基本特征 1. 白底黑字 传统的印刷媒体便是这样的 ，白色或略带灰色的纸张上印刷着黑色的文字。对我们的眼睛来说这样 的组合很舒 ，可读性很高 ，这也是为什么传统媒体采用这 样的配色方案 ，因为这类网站的主体是 文字 ，这样的显示方式会让文字更加鲜明易读。我是鼓励设计师在传统的基础上有些创新 ，但是千 万不能忘了对比度 ！比如把 传统的模式反过来 ，黑底白字。但是以下几个组合强烈不推荐使用 ：黑 底黄字、蓝底绿字和蓝底粉字等等。如果您非不信邪 ，大可以试试看 ，看看会不会还是用回第 一稿 ！设计稿做出来之后自己先看看 ，如果自己觉得看着舒服 ，再应用在你的项目里。 黑白这两个颜色都是基本颜色 ，有时候也需要一些辅助色来让设计更勾人。举个栗子来说 ：蓝色很 合用在标题上 ；红色则更 合作为按钮 ；导航菜单有时候需要用阴影或发光特效来装饰一下 ，但 是装饰的颜色与主色对比度不要太高。这样可以让导航更明确 ，给予用户更好的视觉体验。 2. 图形元素最少化 报刊的布局是简单干净的 ，内容突出并且十分详实 ，结构明确 ，图形元素出现的方式与其他设计不 太一样 ，通常以下面几种方式出现 ：线条、形状、颜色、排版和纹理。 就像咱刚才说的 ，这样的网站里 ，配色通常很简单。纹理的应用很少见 ，想象一下 ，报纸杂志类的 网站 ，背景是一堵砖墙 ，或者是一块木板 ，或者是什么复杂 的纹理 ，会是怎么个感受 ？影响阅读 是肯定滴 ！纹理会分散读者的注意力 ，这违背了我们的设计初衷 ：突出文字。但是这类网站里 ，可 以采用纸质纹理。纹理可以出 现在背景里、按钮上或者是页眉页脚。 规范的网格设计或者是分栏布局可以减少线条和形状的使用 ，因为画面里已经被分割成很多部分了 ，无需再添加更多的。如果设计中添加过多线条和形状 ，反而不够简洁美观。 3. 基于网格的布局和分栏结构 报刊网站的布局基本上可以说是完美的结构布局 ，内容丰富的网站通常都是采用类似的布局 ，所以 网站结构是第一重要的。网格和分栏将内容有效地分布在阅 读媒介上 ，正如Mark Bo ult o n所说 ：“ 一个优秀的网格系统不仅可以让你的设计看起来整洁美观 ，也会增强可读性和易用性。”基于网格系 统的布局设计可以把内容分类 ，让用户 可以有选择地去阅读自己感兴趣的部分。 相似但不同的分栏布局可以有不同的宽度 ，但是应该注意内容的高度 ，更宽的分栏可以容纳更多的 文字。两个分栏的结构可以让网页更耐看 ，尽管三个或三个 以上的分栏可以让分类更明确 ，但是分 栏和网格的作用差不多 ，都只是让内容的分类更明确 ，让用户可以更快更方便地找到自己感兴趣的 内容 ，不要忘了这个初衷。 考量好了分栏的宽度 ，也不能忘了分栏内两段内容之间的间距 ，间距若 是太小会造成阅读不便 ，网站的体验也不会好。 4 . 标 和摘要 打开一个网站或博客 ，我相信任何人都不会想要迷失在在一篇又一篇充满文字的文章里 ，标题让找 寻文章的过程变得更简单。不管是网格系统中的一小块还是 一整个分栏 ，都需要一个标题告诉大家 ，这一块文字是在讲点啥 ，不然谁有那个耐性看下去然后再总结中心思想啊 ！标题要比正文的字号 大一些 ，也可以选择加粗或 是用其他颜色来标明 ，让它更醒目。 摘要则是一篇文章的简短概括 ，它要通过简短的几句话让人理解这篇文章主要是讲了啥事儿 ，也要 足够吸引人 ，让人产生兴趣进而阅读整篇文章。这几句话还是十分必要的 ，尤其是博客、在线期刊 和