報(bào)紙排版風(fēng)格的網(wǎng)頁設(shè)計(jì)原則

今天創(chuàng)新互聯(lián)要談的是網(wǎng)頁設(shè)計(jì)風(fēng)格，重點(diǎn)是報(bào)紙排版的風(fēng)格。在這篇文章中，你會(huì)發(fā)現(xiàn)這種風(fēng)格的最鮮明的特點(diǎn)，并得到一些有用的提示，把你學(xué)到的東西運(yùn)用到您的項(xiàng)目將獲得更大的收獲。

風(fēng)格是你的網(wǎng)站設(shè)計(jì)的一個(gè)總的組合方式。風(fēng)格也是你和你的用戶交流的一種方式。每個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格都有它自己的組件合集。

網(wǎng)頁設(shè)計(jì)中主要的風(fēng)格分類：

1、極簡主義；
2、破舊風(fēng)格；
3、懷舊風(fēng)格與時(shí)尚風(fēng)格；
4、插畫風(fēng)格；
5、報(bào)紙排版風(fēng)格個(gè)與雜志風(fēng)格。

報(bào)紙風(fēng)格的設(shè)計(jì)最時(shí)候用于在線報(bào)紙和雜志，因?yàn)樗鼈兊挠∷⑵芬彩沁@個(gè)結(jié)構(gòu)，所以這樣做用戶體驗(yàn)會(huì)更好。用這個(gè)風(fēng)格設(shè)計(jì)的網(wǎng)站必須是重視內(nèi)容的。報(bào)紙風(fēng)格的網(wǎng)站設(shè)計(jì)往往是靠內(nèi)容豐富排版，多列結(jié)構(gòu)，簡單的對比色，以及其他真實(shí)報(bào)刊種常用的手法。

報(bào)類網(wǎng)站布局：特點(diǎn)

1. 白紙黑字

傳統(tǒng)印刷的報(bào)紙都是白色的紙張黑色（灰、深灰）的字。這種色彩組合讓我們的眼睛非常舒適，可讀性好，這就是為什么報(bào)紙一直用這種配色的原因，特別是那種塞滿了內(nèi)容的版面。你也可以選擇黑底白字，但是千萬不要選黑底黃色、綠藍(lán)色、粉紅色和藍(lán)色等顏色的字體，檢視你的設(shè)計(jì)盡量在你的眼睛感覺好了之后再做，你也可以吸取經(jīng)典的色彩并用于你的網(wǎng)頁設(shè)計(jì)。

中性的亮和黑是基本色，你還可以使用更多的強(qiáng)調(diào)色。舉例來說，藍(lán)色是很好用的標(biāo)題，紅色是好的按鈕。導(dǎo)航菜單上的各種效果可以用原色的更亮或更暗的色來修飾，或者是一樣調(diào)性的色彩。這樣菜單會(huì)比較突出，整體的用戶體驗(yàn)也會(huì)比較好。

2. 極簡主義圖形

報(bào)紙排版風(fēng)格的網(wǎng)站界面是干凈的，內(nèi)容翔實(shí)的，結(jié)構(gòu)合理的，圖形是表達(dá)精準(zhǔn)的，極簡主義的。圖形元素有以下幾種：

1、線
2、形狀
3、各種顏色
4、版式樣式
5、紋理

如我們已經(jīng)提到，這類網(wǎng)站用色的種類總是很少。紋理更是少之又少，因?yàn)楦鞣N質(zhì)感的紋理只會(huì)分散讀者的注意力，讓內(nèi)容的可讀性變差。但是紙張的質(zhì)感是可以的，這個(gè)很重要，它可以是一個(gè)背景紋理，或者是有紙張質(zhì)感的按鈕，又或者只是頁眉和頁腳區(qū)域。

報(bào)紙風(fēng)格的設(shè)置總是會(huì)基于網(wǎng)格的設(shè)計(jì)，或者使用多列布局，減少對形狀和線條的依賴。因?yàn)樗鼈冇凶銐虻膬?nèi)容去形成你的網(wǎng)站。

3.基于網(wǎng)格的設(shè)計(jì)或多列式排版

報(bào)紙風(fēng)格的網(wǎng)站布局會(huì)有一個(gè)好的組織結(jié)構(gòu)，這些都是內(nèi)容豐富的網(wǎng)站，所以結(jié)構(gòu)一重要。網(wǎng)格和柵格是內(nèi)容排版好工具。這是是事實(shí)，“精心設(shè)計(jì)的網(wǎng)格系統(tǒng)可以使您的設(shè)計(jì)不僅美觀而且清晰實(shí)用（馬克博爾頓）”  網(wǎng)格布局設(shè)計(jì)的頁面會(huì)讓你的內(nèi)容突破條條框框，從而吸引用戶閱讀你的內(nèi)容而不離開。

相似而不相同的是多列柵格布局。這些可能有很多適合高度的柵格，但是寬度不一樣。柵格越寬闊可讀性越好。2種柵格會(huì)有一個(gè)很好的外觀，雖然3種柵格或更多當(dāng)然會(huì)更好。柵格和網(wǎng)格能很好的區(qū)分內(nèi)容，讓用戶更容易找到他感興趣的板塊。當(dāng)你使用這種布局的時(shí)候，你不能忘記柵格的空格。如果柵格太緊，網(wǎng)頁上的內(nèi)容就會(huì)非常難讀。

4.標(biāo)題和摘要

當(dāng)你進(jìn)入一個(gè)文字內(nèi)容很多的網(wǎng)站或博客的時(shí)候你會(huì)打開每一篇么？標(biāo)題會(huì)讓我們區(qū)分感興趣的和不重要的內(nèi)容。所以每個(gè)內(nèi)容板塊需要有標(biāo)題，哪怕這個(gè)區(qū)塊在網(wǎng)格和柵格中很小，它都必須有標(biāo)題，標(biāo)題的字體要大，最好是加粗的字體和色彩不同，這樣會(huì)更清晰。

摘要文字是對文章簡短的描述，這些經(jīng)常會(huì)讓讀者更容產(chǎn)生興趣，讓他們更容易理解長篇的文字內(nèi)容，摘要這個(gè)元素是非常好用的，特別是博客、新聞?lì)惖木W(wǎng)站。

5.主要和次要內(nèi)容

有一種老的辦法，就是繪制一條粗線在你的內(nèi)容之間，當(dāng)然形式不限，這樣會(huì)定義那些是最重要的那些是等待被讀的文字。例如：你能給你的前臺(tái)頁面中的文章頁面設(shè)計(jì)一個(gè)大標(biāo)題。這是一個(gè)有特征的區(qū)域，包含大圖和圖形。其他的內(nèi)容將會(huì)更小并根據(jù)網(wǎng)格系統(tǒng)排列。這樣將會(huì)更容易分享新內(nèi)容，并且獲取更多分享。

6.直觀和一致的導(dǎo)航

報(bào)紙風(fēng)格的網(wǎng)站排版是為內(nèi)容而設(shè)計(jì)的，而且這些內(nèi)容必須能容易被導(dǎo)航，由此可見，導(dǎo)航菜單的特征就是簡單，和正確的位置。

最好的位置在頁面頂部，因?yàn)檫@塊區(qū)域是最先被注意到的，而且總是在同樣的地方，如果你在頁面底部，你只需要滾動(dòng)頁面。如果，你喜歡垂直導(dǎo)航，而且非要不可，讓你的菜單在左邊垂直，因?yàn)槲覀兊拈喿x習(xí)慣是從左至右的。

報(bào)紙風(fēng)格的網(wǎng)站分享出大量的文字內(nèi)容，這些內(nèi)容都需要能傳達(dá)給用戶。

7.分類目錄

更好的分類目錄可以讓報(bào)紙風(fēng)格的網(wǎng)站有更好的布局效果，這種情況在博客上效果更明顯，其他網(wǎng)站也是。很多網(wǎng)站沒做好就是內(nèi)容沒組織好。分類目錄，在那些經(jīng)常發(fā)布大量不同內(nèi)容的網(wǎng)站（新聞?lì)悾┦欠浅１匾摹?/p>

將您的內(nèi)容進(jìn)行分類，并將其顯示在菜單欄上。

8. 廣告位

在你的網(wǎng)站火起來前，你有考慮會(huì)如何利用它賺錢么？廣告是許多站長賺錢的好工具。廣告banner放置的地方必須要定義好。正確的地方是側(cè)邊欄、左、右、頁眉或頁腳。宣傳的banner經(jīng)常在文字中間。這對你的廣告位買家是好事，而且這些也可以刺激你的讀者。

9. 功能邊欄工具條

邊欄不僅僅只是放廣告，也可以放文章目錄、最新內(nèi)容、搜索框、電子郵件、導(dǎo)航、社交按鈕、折扣或誘惑活動(dòng)等。報(bào)紙風(fēng)格的網(wǎng)站邊欄是一個(gè)很好的位置，因?yàn)檫@里只是一個(gè)柵格而已。

邊欄設(shè)計(jì)相關(guān)的要素：

1、尺寸（高和寬）
2、顏色
3、字體
4、位置

邊欄一般小于普通的柵格布局，不能做大，色彩保持中型，字體大小要可視，位置在頁面的左邊還是右邊？我們之前已經(jīng)說過，放在左邊就是一切，因?yàn)橛脩魰?huì)立刻看到。

10. 大化留白

無論我們設(shè)計(jì)了多少網(wǎng)站，功能有多多，我們都不能忘記要留白，因?yàn)榱舭资菆?bào)紙類網(wǎng)頁設(shè)計(jì)風(fēng)格的必要組成部分。讓柵格之間留白，讓空白存在于側(cè)面和底部 ，用戶必須有機(jī)會(huì)讓他們的眼鏡離開如墻一般的文本，去休息一會(huì)，并且思考。

一般情況下，留白被看作是沒有內(nèi)容的。在狹義上還有一層意思：留白是指行與行之間，字與字之間和內(nèi)容元素周邊。留白會(huì)讓你的網(wǎng)站可讀性更高，更簡潔，即便是你的網(wǎng)站內(nèi)容很多也如此。

11. 經(jīng)常更新

報(bào)紙風(fēng)格的網(wǎng)站布局必須有不斷的內(nèi)容補(bǔ)充與更新。因?yàn)橛镁W(wǎng)格和柵格設(shè)計(jì)的網(wǎng)頁如果沒有充足的內(nèi)容會(huì)很難看，因此你必須徹底填滿你的網(wǎng)站，并且保持更新，保持與時(shí)事熱點(diǎn)接軌。

內(nèi)容和頻率像是一對情侶，就想國王和王后。保持內(nèi)容更新除了會(huì)讓你的網(wǎng)站好看，還可以讓搜索引擎更多的收錄你的內(nèi)容，從而影響人們的搜索結(jié)果。如果你的內(nèi)容是過時(shí)的，人們會(huì)很少看你的網(wǎng)站，搜索引擎也一樣（如：百度和谷歌等），你的網(wǎng)站在搜索引擎的權(quán)重就會(huì)很低。

12. 開通社交軟件分享功能

博客和新聞?lì)惥W(wǎng)站報(bào)紙風(fēng)格用得最多，而這些網(wǎng)站沒有社交媒體的整合就不能存在?，F(xiàn)在是大眾分享時(shí)代，人們在社會(huì)網(wǎng)絡(luò)上花費(fèi)了大量時(shí)間。所以你的網(wǎng)站一定要有社交網(wǎng)絡(luò)分享按鈕，如：微博、微型、Facebook、谷歌、LinkedIn等，沒有這些功能，你如果沒這些功能，就等于放棄了大量入口。

還有一件事，就是報(bào)紙風(fēng)格類網(wǎng)站必須是響應(yīng)式的，這種布局效果無論在什么設(shè)備上都需要保持不變，移動(dòng)類的網(wǎng)站不能有邊欄，而且最好重新設(shè)計(jì)導(dǎo)航，因?yàn)橐苿?dòng)網(wǎng)站滾動(dòng)用得比點(diǎn)擊多。

本文題目：報(bào)紙排版風(fēng)格的網(wǎng)頁設(shè)計(jì)原則
分享網(wǎng)址：http://www.bm7419.com/news/67506.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)、Google、營銷型網(wǎng)站建設(shè)、企業(yè)建站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)