網(wǎng)頁設(shè)計排版技巧

第頁網(wǎng)頁設(shè)計排版技巧網(wǎng)頁〔制定〕排版技巧

以下就是網(wǎng)頁制定排版技巧等等的介紹，希望為您帶來幫助。

1、分割屏幕

在這種網(wǎng)頁制定中，網(wǎng)站要使用垂直分隔線來分割屏幕。這么做的原因有很多，通過大量的此類案例研究之后，其中主要的原因有兩個。

第一，在一套制定中，確實(shí)存在兩個同等重要的主體元素。

網(wǎng)頁制定的通常方法，是按照重要性給內(nèi)容排序。然后重要性會體現(xiàn)在制定的層次和結(jié)構(gòu)上。但是假如你就是要推廣兩樣?xùn)|西呢?這種方式，可以讓你特別兩者，并讓用戶迅速在其中做出選擇。

第二，有時你要表現(xiàn)出一種重要的兩重性。有的網(wǎng)站建設(shè)案例中，可以看出核心競爭力是直根在數(shù)字領(lǐng)域，他們還有多才多藝的員工，這就成全了他們，通過屏幕分割來表現(xiàn)這一點(diǎn)，是種令人愉快的方式。

2、去界面化

網(wǎng)頁制定中的主要元素之一就是容器元素，方塊、邊框、形狀和所有類型的容器，用于將內(nèi)容從頁面中分開開。想象一個古板的頁頭，元素剛好容納其中，與內(nèi)容分隔開。如今的一項普遍趨勢，就是去除所有這些額外的界面元素。這是種極簡主義的方式，但它更進(jìn)一步，帶來一些有趣的轉(zhuǎn)變?？梢园l(fā)現(xiàn)，移除任何感官上的頁頭和頁尾后，內(nèi)容得到了極大的強(qiáng)調(diào)。你會先看到公司名稱，然后是關(guān)于他們經(jīng)營內(nèi)容(和場所)的清楚描述，而不是先看到頁頭。之后才是主導(dǎo)航。讓用戶瀏覽之前先重點(diǎn)強(qiáng)調(diào)品牌，它造就了優(yōu)美的視覺流程。有趣的是，當(dāng)你滾動頁面時，頁頭和界面才出現(xiàn)。美觀且有效的排版，這種模式的運(yùn)用頗具啟迪性。

3、基于模塊或網(wǎng)格

接下來這些排版方式，建立在模塊化或類似網(wǎng)格的結(jié)構(gòu)上。在這些制定中，每個模塊都力圖依據(jù)屏幕尺寸伸縮調(diào)整。實(shí)際上這并不是什么新的方式，不過響應(yīng)式網(wǎng)頁制定讓它變得更加有用。它暗示了一種自適應(yīng)布局模式，可以像搭積木一樣，由各種模塊組件創(chuàng)建而成。

4、一屏以內(nèi)

最后，還有一些網(wǎng)站采納這樣的方式，讓制定完全在一屏內(nèi)展現(xiàn)。這是響應(yīng)式制定的一個分支，因?yàn)樗鼤m應(yīng)屏幕尺寸。不過在這個絕佳案例中，整個制定的適應(yīng)方式完完全全吻合屏幕，沒有產(chǎn)生滾動條。沒有滾動，意味著內(nèi)容必須極度聚焦，而且要建立清楚的內(nèi)容層次。我發(fā)現(xiàn)這些網(wǎng)站的聚焦能力和清楚程度，令人耳目一新。現(xiàn)代網(wǎng)頁的布局豐富且多樣化，足以滿足不同群體的個性化訴求。

說到網(wǎng)頁制定排版技巧，這是一個非常大的學(xué)問，大家都知道，網(wǎng)站上每一個元素都會影響瀏覽，而網(wǎng)頁制定排版技巧絕對能考驗(yàn)一個網(wǎng)頁制定師的基本功底。在我看來，好排版一定有著比較棒的閱讀性，文字內(nèi)容在視覺上是平衡和連貫的，并且有整體的空間感。布局、內(nèi)容擺放和欄目制定都會影響文字的閱讀性。從易讀性來看，必須要制定師合計字體、字號、行距、間距、背景色與文字顏色對比等。我在前面文章中已經(jīng)重點(diǎn)介紹了字體和字號，以下最正確易讀性規(guī)范則介紹行距和間距，分享適宜的行寬和行高，幫助瀏覽者堅持閱讀節(jié)奏，讓讀者擁有更好的閱讀體驗(yàn)。

5、行寬

我們可以想象一下：如果一行文字過長，視線移動距離長，很難讓人注意到段落起點(diǎn)和終點(diǎn)，閱讀比較困難;如果一行文字過短，眼睛要不停來回掃視，破壞閱讀節(jié)奏。因此我們可以讓內(nèi)容區(qū)的每一行承載合適的字?jǐn)?shù)，來提升易讀性。傳統(tǒng)圖書排版每行最正確字符數(shù)是5575，實(shí)際在網(wǎng)頁上每行字符7585更流行。中文在14號字體時，建議3545個文字。

6、間距

行距是影響易讀性非常重要的因素，過寬的行距會會讓文字失去延續(xù)性，影響閱讀;而行距過窄，則容易出現(xiàn)跳行。網(wǎng)頁制定中，文字間距一般依據(jù)字體大小選11.5倍作為行間距，1.52倍作為段間距。比如12號字體，行間距是12px18px，段落間距則是18px24px。另外，行高/段落之間的空白=0.754。行間距正好是段落間距的75%是非經(jīng)常見的。比如簡書16號字體，行間距27px/段間距36px=75%。文字字號本身比較大，所以行間距也不必須要嚴(yán)格按照11.5倍的比例設(shè)置，不過行間距和段間距的比例符合75%，看起來很不錯，這樣的視覺效果讓人在閱讀時堅持一種節(jié)奏感，這就是在實(shí)際狀況中將規(guī)范的靈活應(yīng)用。

7、行對齊

排版中很重要的一個規(guī)范就是把應(yīng)該對其的地方對齊，比如每個段落行的位置對齊。不管哪種視覺效果，精美的、正式的、有趣的還是嚴(yán)正的，一般都可以應(yīng)用一種明確的對齊來達(dá)到目的。通常狀況下，建議在頁面上只使用一種文本對齊，盡量避免兩端對齊。

8、文字留白

在排版文字時，在版面必須要留出空余空間，留白面積從小到大應(yīng)該遵循的順序是：字間距、行間距、段間距。此外，在排版內(nèi)容區(qū)之前，必須要依據(jù)頁面實(shí)際狀況給頁面四周留出余白。

為了保證可讀性和專業(yè)性,你的網(wǎng)頁上不應(yīng)該使用超過3種字體。使用過多的字體會干擾你的用戶而且讓你的網(wǎng)站看起來很亂。相反,較少的字體讓你的網(wǎng)站顯得干凈易讀。你可以標(biāo)題使用一種字體,正文使用一種字體,最后logo或副標(biāo)題使用另外的字體。

如果你是一位開發(fā)者你可能想貼一些代碼在你的博客里。如果是這樣,請使用等寬字體。那么,什么是等寬字體?它就是字母和字符占相同水平寬度的字體。

CRAP是四項基本制定原理，包括對比(Contrast)、重復(fù)(Repetition)、對齊(Alignment)、親密性(Proximity),已經(jīng)被制定師廣泛應(yīng)用。這四個基本原則在網(wǎng)頁制定中對文字的排版也非常適用。

9、對比

我們將對比分為三類，主要是標(biāo)題與正文的字體與字號對比、文字顏色對比，以及文字顏色與背景顏色的對比。

標(biāo)題與正文對比

譬如標(biāo)題使用18號的微軟雅黑，正文使用12號的宋體，兩種字體字號的對比讓文字內(nèi)容富有層次，很容易吸引讀者眼球。

文字顏色對比

譬如，一部分文字采納了與主要文字不同的另一種顏色，這種對比是增加視覺效果的有效途徑之一，特別展示了段落的重點(diǎn)。

文字顏色與背景顏色對比

這是非經(jīng)常用的一種排版制定方式，正文文本與背景合適的對比可以提升文字的清楚度，產(chǎn)生激烈的視覺效果。

比如，白色背景、紅色標(biāo)題、黑色正文的對比，以及紅色背景與白色文字對比的應(yīng)用，將文字內(nèi)容清楚襯托出來，既有豐滿的層次感，同時有具有很強(qiáng)的視覺沖擊力。制定師在使用這一原則時必須要注意，必須保證文字是容易看清的，如果文字過小或過于纖細(xì)、色彩對比度不夠，會適得其反，制定師如果對色彩的對比度還不夠熟悉時，可以通過顏色對比檢測工具檢測色差和亮度差，保證網(wǎng)頁制定的易讀性。

10、重復(fù)

制定中的元素可以在整個網(wǎng)頁制定中重復(fù)出現(xiàn)，對文字來說，可能字體、字號、樣式的重復(fù)，也可能是同一種類型的圖案裝飾、文字與圖片整體布局方式等。重復(fù)給用戶一種有組織、一致性的體驗(yàn)，可以創(chuàng)造連貫性，顯得更專業(yè)。比如一些網(wǎng)站在產(chǎn)品準(zhǔn)則部分采納了統(tǒng)一的圖片+標(biāo)題+正文形式。內(nèi)容不同，而布局方式統(tǒng)一，圖片風(fēng)格一致。用戶一眼看過去，就能知道這是屬于同一個版塊的內(nèi)容，這樣的重復(fù)很容易有一種連貫、平衡美感。比如土巴兔裝修網(wǎng)的流程，標(biāo)題文字在圖片同樣的位置、采納同樣形式，既與圖片背景顏色形成對比，又是文字樣式的重復(fù)。重復(fù)原則在網(wǎng)頁制定上應(yīng)用非常廣泛，單一的重復(fù)可能會顯得單調(diào)，制定師卻可以依據(jù)不同網(wǎng)站的必須求靈活使用，比如有變化的重復(fù)能增加革新，給網(wǎng)頁制定增加活力。

11、對齊

在網(wǎng)頁制定中，元素在頁面上不能隨意擺放，每一項都應(yīng)與頁面內(nèi)容存在某種聯(lián)系。對齊可對齊是網(wǎng)頁制定必不可少的部分，它可以幫助制定師做出吸引人的制定，是優(yōu)秀網(wǎng)頁制定的潛在要求。左對齊和右對齊是文本看起來更清楚、效果分明;居中對齊顯得更莊重、正式、穩(wěn)重。

12、親密性

位置的接近意味著存在關(guān)聯(lián)，親密性是指將相關(guān)項組織在一起讓它們從整體看看起來和諧統(tǒng)一。親密性可以從兩點(diǎn)入手：適當(dāng)留白、以視覺重點(diǎn)特別層次感。人眼首先被Banner圖和里面文字吸引，然后再向下移動到文字描述及鏈接文字，這些元素的親密性與對比形成一種平衡。

13、只給鏈接的文本加下劃線

瀏覽器用在鏈接的默認(rèn)樣式一直是藍(lán)色文本加下劃線。雖然這個藍(lán)色常常被改成另外的顏色,但下劃線一直被當(dāng)做是鏈接的常規(guī)樣式。這就是為什么除了鏈接你不要給其他的東西加上下劃線的原因。否則,這可能對你的用戶造成很大的疑惑。

14、創(chuàng)建樣式庫

讓你的網(wǎng)站產(chǎn)生視覺震撼的一個簡單高效的方法是給特別的頁面創(chuàng)建特別的樣式。例如,創(chuàng)建一個.warning的CSS類來向你的用戶顯示"警告'。

15、按級別來排列標(biāo)題和文本

為了增加可讀性,給標(biāo)題、介紹段落和常規(guī)文本創(chuàng)建標(biāo)簽層級是很重要的,這樣你的用戶可以看清你的文章結(jié)構(gòu)并能很快的找到他們感興趣的部分。

16、正確使用標(biāo)點(diǎn)符號

如果你想提升你的排版水平不容忽視的一點(diǎn)是正確使用標(biāo)點(diǎn)符號。例如,引號常常用雙撇符號代替(譯者注:我想要表達(dá)的意思應(yīng)該是全角符號和半角符號的區(qū)別,就像中文的引號和英文的引號不同一樣)。

網(wǎng)頁制定的排版技巧介紹

1.減少不同類型字體的使用

使用超過3種不同的字體讓網(wǎng)站看起來沒有結(jié)構(gòu)且不專業(yè)。記住，太多的尺寸類型和風(fēng)格也可能破壞任何布局。

為了防止這種狀況，嘗試將字體數(shù)量限制在最小限度

一般來說，將字體數(shù)量限制在最小限度(兩個很充足，通常一個就足夠了)，并粘貼相同的字體到整個網(wǎng)站。如果使用多個字體，請保證字體系基于字符寬度互相補(bǔ)充。以下面的字體組合為例。Georgia和Verdana(左)的組合具有相似的價值，配對的很和諧。比較與Baskerville和Impact(右)的配對，其中大大加重的Impact使與其對應(yīng)的襯線字體沒有光彩。

保證字體系基于字符寬度互相補(bǔ)充

2.使用標(biāo)準(zhǔn)字體

字體的嵌入服務(wù)(如GoogleWebFonts或Typekit))可以為你的制定提供新鮮的和意想不到的許多有趣的字體。它們也非常容易使用。以Google為例：

選擇任何字體，如OpenSans在HTML文檔的中生成代碼并粘貼。完成!

實(shí)際上，這種方法有一個很嚴(yán)重的問題：因?yàn)橛脩舾煜?biāo)準(zhǔn)字體，因此可以更快地讀取它們。

除非你的網(wǎng)站關(guān)于自定義字體(如對品牌宣揚(yáng)或創(chuàng)建沉醉式體驗(yàn))非常有吸引力，否則通常最好使用系統(tǒng)字體。最安全的方法是用一個系統(tǒng)的字體：Arial，Calibri，Trebuchet等。記住，好的排版可以吸引讀者到內(nèi)容中去，而不是排版本身。

3.限制行的長度

每行擁有適當(dāng)?shù)淖址麛?shù)量是讓文本具有可讀性的關(guān)鍵。它不是你的制定，決定你的文本的寬度，它應(yīng)該是一個可讀性的問題。合計BaymardInstitute關(guān)于可讀性和行的長度的建議：

"如果你想有一個好的閱讀體驗(yàn)，應(yīng)該每行約60個字符。每行擁有適當(dāng)?shù)淖址麛?shù)量是讓你的文本具有可讀性的關(guān)鍵。'

如果行太短，視線必須常常返回，這就會打破讀者的節(jié)奏。如果一行文字太長，用戶的視線將很難專注于文本。

關(guān)于移動設(shè)備，應(yīng)該每行30-40個字符。以下是在移動設(shè)備上查看的兩個網(wǎng)站的示例。第一個是使用每行50-75個字符(打印和桌面的每行最正確字符數(shù))，而第二個使是用最正確的30-40個字符。

在網(wǎng)頁制定中，可以通過使用em或像素限制文本的寬度來實(shí)現(xiàn)每行最正確數(shù)量的字符。

4.選擇一個能在各種尺寸中工作的字體

用戶會從具有不同屏幕尺寸和分辨率的設(shè)備訪問你的網(wǎng)站。大多數(shù)用戶界面必須要各種大小的文本元素(按鈕復(fù)制，字段標(biāo)簽，章節(jié)標(biāo)題等)。選擇一個能夠在多種尺寸和重量上運(yùn)行優(yōu)良的字體以堅持每個尺寸的可讀性和可用性是非常重要。

保證你說選擇的字體在較小的屏幕上清楚可辨!嘗試避免使用草書的字體，例如Vivaldi(在下面的示例中)：雖然它們很美麗，但它們很難閱讀。

5.使用可區(qū)分字母的字體

許多字體讓相似的字形很容易混淆，特別是與"i'和"L'(如下列圖所示)以及在字母間距較小的空間中，例如當(dāng)"r'和"n'看起來像"M'。因此，在選擇你的排版時，請務(wù)必在不同的文本環(huán)境中檢查你的排版，以保證不會為用戶造成問題。

6.避免所有的大寫

所有大寫字母：意思是文本中的所有大寫字母，在不涉及閱讀的上下文中很好(如首字母縮略詞或標(biāo)識)，但是當(dāng)你的信息涉及閱讀時，不要強(qiáng)制用戶閱讀所有大寫文字。正如MilesTinker所說，在他的具有里程碑意義的作品中，可讀性的印刷，全部大寫印刷與小寫排版相比，大大地延緩了用戶的閱讀速度。

7.行間距的重要性

在排版中，我們有一個特別術(shù)語，用于兩行文本之間的間距(或行高)。通過增加行高，可以增加文本行之間的垂直空白空間，通常提升可讀性以換取屏幕空間。作為一個規(guī)則，行高應(yīng)該是字符高度的30%，以提升可讀性。

好的間距有助于可讀性。

正如DmitryFadeyev所指出的那樣，正確地使用段落之間的空白已被證實(shí)可以將理解提升20%。使用空白的技能在于為用戶提供可消化量的內(nèi)容，然后剝離無關(guān)緊要的細(xì)節(jié)。

左：幾乎堆疊的文字。右：優(yōu)良的間距有助于可讀性。

8.保證你有足夠的顏色對比度

不要在文本和背景中使用相同或相似的顏色。文本越顯然，用戶就能更快地掃描和閱讀它。W3C建議對身體文字和圖像文字的對比度如下：

與其背景相比，小寫文字的對比度應(yīng)至少為4.5：1。大文字(14pt/常規(guī)18pt及以上)的背景對比度應(yīng)至少為3：1。

這些文本行不符合顏色對比度的建議，難以依據(jù)背景顏色進(jìn)行閱讀。

這些文本行符合顏色對比度建議，易于閱讀背景顏色。

一旦你選擇了顏色，必須要在大多數(shù)設(shè)備上與真有用戶進(jìn)行測試。如果測試顯示閱讀副本有問題，那就可以確定你的用戶具有完全相同的問題。

9.避免文本為紅色或綠色

色盲是一種常見的狀況，特別是在男性中(8%的男性是色盲)，建議使用除這些顏色以外的其他顏色來區(qū)分重要信息。也避免單獨(dú)使用紅色和綠色來傳達(dá)信息，因?yàn)榧t色和綠色色盲是最常見的色盲形式。

10.避免使用閃爍的文字

閃爍的內(nèi)容可能會引發(fā)敏感個體的癲癇發(fā)作。它不僅可以引起癲癇發(fā)作，而且關(guān)于一般用戶來說，這是令人討厭且使人分心。

避免閃爍文字!

結(jié)論

排版是一件重要的事情。做出正確的排版選擇可以讓你的網(wǎng)站看上去更優(yōu)雅。另一方面，糟糕的排版選擇會讓人分心，往往會引起對排版的注意。讓排版具有可讀性，可理解性和清楚度是至關(guān)重要。

網(wǎng)站排版制定的小技巧

1干凈，明快，清楚

通過提升文字內(nèi)容和背景圖片之間的明暗對比來提升可讀性。通常使用純黑和純白的文字可以更為便捷地實(shí)現(xiàn)這一點(diǎn)。

2堅持簡單

堅持簡單，但是別忘了最基礎(chǔ)的原則。使用有對比度的配色，用穩(wěn)固而均衡的排版框架。

3原創(chuàng)性與創(chuàng)造性

和研究一樣，〔平面制定〕的技能和思索一樣必須要原創(chuàng)性和創(chuàng)造性。你并不一定非得使用大家都在用的字體和樣式，規(guī)避流行并探究自己的風(fēng)格，會讓你的制定工作與眾不同。

4時不時讓你的雙眼放松一下

724小時的奮斗固然特別，但是你很難堅持并擁有繼續(xù)的創(chuàng)造力。適當(dāng)?shù)姆潘赡茏屇慊謴?fù)效率，產(chǎn)生靈感。適時地離開〔電腦〕屏幕看點(diǎn)別的，經(jīng)常會有意外之喜。

5使用同族字體

想要讓文字排版擁有高度的一致性，最好的方法是找到一套包涵各類字重、字形的字體族，這樣保證了多樣性和一致性。此處我們使用了LibreBaskerville字體族中的粗體、細(xì)體和斜體。

6偉大的留白

留白會賦予制定中各種元素以足夠的呼吸的空間，給用戶以想象的空間。它讓內(nèi)容更加集中和易讀，也不會因?yàn)殡s亂而讓用戶分心。

7創(chuàng)造情緒板

在制定之前，將你所搜集的相關(guān)的圖片、色板和其他視覺作品集中到白板上，這樣可以方便你尋找靈感，找到共同的特點(diǎn)、主題和調(diào)色板，并且最終應(yīng)用到項目中去。

8關(guān)注正在發(fā)生的事情

制定并不是脫離時代的存在。不管你此刻關(guān)注的是哪個領(lǐng)域，請務(wù)必關(guān)注正在發(fā)生的事情，堅持對新動態(tài)的敏銳意識，從交際媒體到新聞時政，最新最重要的信息終歸是對你有所裨益的。

9跳出來思索

最有創(chuàng)意的思索者總會跳出條條框框來看待這個世界的。不要用隨處可見的圖標(biāo)來裝點(diǎn)你的制定，或許一個全新的制定更能代表你的想法。

10隨身攜帶筆記本

無論你是在火車上，在工作還是睡前，靈感會在任何隨時閃現(xiàn)出來，因此做好準(zhǔn)備是很有必要的。在筆記本上用草圖記錄下你隨時閃現(xiàn)的想法，或許它就是你下一次重要制定的核心思路。

制定頁面的排版技巧

排版是什么?

排版是將文字、圖片等元素在版面調(diào)整，使版面布局條理化的過程。一般來說，透過來版，讓人們更容易的去閱讀、接受這些提供給他們的資訊。

為什么要提供優(yōu)良的排版?

一個優(yōu)良的資訊傳遞必須要幾個要素來達(dá)成，分別是對的內(nèi)容與對的方式以及對的人，唯有這三個要素都成立的時候，資訊就能夠有效率的被使用者給接受。排版扮演著內(nèi)容與使用者之間〔溝通〕的橋梁，優(yōu)良的版面制定讓使用者不必須要特別的努力、訓(xùn)練就可以瞭解提供的內(nèi)容;相反，糟