網頁設計排版技巧

以下就是網頁設計排版技巧等等的介紹，希望為您帶來幫助。

1、分割屏幕

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

第一，在一套設計中，的確存在兩個同等重要的主體元素。

網頁設計的通常方法，是按照重要性給內容排序。然后重要性會體現在設計的層次和結構上。但是假如你就是要推廣兩樣東西呢?這種方式，可以讓你突出兩者，并讓用戶迅速在其中做出選擇。

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

2、去界面化

網頁設計中的主要元素之一就是容器元素，方塊、邊框、形狀和所有類型的容器，用于將內容從頁面中分離開。想象一個古板的頁頭，元素剛好容納其中，與內容分隔開。如今的一項普遍趨勢，就是去除所有這些額外的界面元素。這是種極簡主義的方式，但它更進一步，帶來一些有趣的轉變。可以發現，移除任何感官上的頁頭和頁尾后，內容得到了極大的強調。你會先看到公司名稱，然后是關于他們經營內容(和場所)的清晰描述，而不是先看到頁頭。之后才是主導航。讓用戶瀏覽之前先重點強調品牌，它造就了優美的視覺流程。有趣的是，當你滾動頁面時，頁頭和界面才出現。美觀且有效的排版，這種模式的運用頗具啟迪性。

3、基于模塊或網格

接下來這些排版方式，建立在模塊化或類似網格的結構上。在這些設計中，每個模塊都力圖根據屏幕尺寸伸縮調整。實際上這并不是什么新的方式，不過響應式網頁設計讓它變得更加有用。它暗示了一種自適應布局模式，可以像搭積木一樣，由各種模塊組件創建而成。

4、一屏以內

最后，還有一些網站采用這樣的方式，讓設計完全在一屏內展現。這是響應式設計的一個分支，因為它會適應屏幕尺寸。不過在這個絕佳案例中，整個設計的適應方式完完全全吻合屏幕，沒有產生滾動條。沒有滾動，意味著內容必須極度聚焦，而且要建立清晰的內容層次。我發現這些網站的聚焦能力和清晰程度，令人耳目一新。現代網頁的布局豐富且多樣化，足以滿足不同群體的個性化訴求。

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

5、行寬

我們可以想象一下：如果一行文字過長，視線移動距離長，很難讓人注意到段落起點和終點，閱讀比較困難;如果一行文字過短，眼睛要不停來回掃視，破壞閱讀節奏。因此我們可以讓內容區的每一行承載合適的字數，來提高易讀性。傳統圖書排版每行最佳字符數是55—75，實際在網頁上每行字符75—85更流行。中文在14號字體時，建議35—45個文字。

6、間距

行距是影響易讀性非常重要的因素，過寬的行距會會讓文字失去延續性，影響閱讀;而行距過窄，則容易出現跳行。網頁設計中，文字間距一般根據字體大小選1—1.5倍作為行間距，1.5—2倍作為段間距。比如12號字體，行間距是12px—18px，段落間距則是18px—24px。另外，行高/段落之間的空白=0.754。行間距正好是段落間距的75是非常常見的。比如簡書16號字體，行間距27px/段間距36px=75。文字字號本身比較大，所以行間距也不需要嚴格按照1—1.5倍的比例設置，不過行間距和段間距的比例符合75，看起來很不錯，這樣的視覺效果讓人在閱讀時保持一種節奏感，這就是在實際情況中將規范的靈活應用。

7、行對齊

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

8、文字留白

在排版文字時，在版面需要留出空余空間，留白面積從小到大應該遵循的順序是：字間距、行間距、段間距。此外，在排版內容區之前，需要根據頁面實際情況給頁面四周留出余白。

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

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

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

9、對比

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

標題與正文對比

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

文字顏色對比

譬如，一部分文字采用了與主要文字不同的另一種顏色，這種對比是增加視覺效果的有效途徑之一，突出展示了段落的重點。

文字顏色與背景顏色對比

這是非常常用的一種排版設計方式，正文文本與背景合適的對比可以提高文字的清晰度，產生強烈的視覺效果。

比如，白色背景、紅色標題、黑色正文的對比，以及紅色背景與白色文字對比的應用，將文字內容清晰襯托出來，既有豐滿的層次感，同時有具有很強的視覺沖擊力。設計師在使用這一原則時需要注意，必須確保文字是容易看清的，如果文字過小或過于纖細、色彩對比度不夠，會適得其反，設計師如果對色彩的對比度還不夠熟悉時，可以通過顏色對比檢測工具檢測色差和亮度差，確保網頁設計的易讀性。

10、重復

設計中的元素可以在整個網頁設計中重復出現，對文字來說，可能字體、字號、樣式的重復，也可能是同一種類型的圖案裝飾、文字與圖片整體布局方式等。重復給用戶一種有組織、一致性的體驗，可以創造連貫性，顯得更專業。比如一些網站在產品準則部分采用了統一的圖片 標題 正文形式。內容不同，而布局方式統一，圖片風格一致。用戶一眼看過去，就能知道這是屬于同一個版塊的內容，這樣的重復很容易有一種連貫、平衡美感。比如土巴兔裝修網的流程，標題文字在圖片同樣的位置、采用同樣形式，既與圖片背景顏色形成對比，又是文字樣式的重復。重復原則在網頁設計上應用非常廣泛，單一的重復可能會顯得單調，設計師卻可以根據不同網站的需求靈活使用，比如有變化的重復能增加創新，給網頁設計增加活力。

11、對齊

在網頁設計中，元素在頁面上不能隨意擺放，每一項都應與頁面內容存在某種聯系。對齊可對齊是網頁設計必不可少的部分，它可以幫助設計師做出吸引人的設計，是優秀網頁設計的潛在要求。左對齊和右對齊是文本看起來更清晰、效果分明;居中對齊顯得更莊重、正式、穩重。

12、親密性

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

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

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

14、創建樣式庫

讓你的網站產生視覺震撼的一個簡單高效的方法是給特殊的頁面創建特殊的樣式。例如,創建一個.warning的CSS類來向 你的用戶顯示“警告”。

15、按級別來排列標題和文本

為了增加可讀性,給標題、介紹段落和常規文本創建標簽層級是很重要的,這樣你的用戶可以看清你的文章結構并能很 快的找到他們感興趣的部分。

16、正確使用標點符號

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

網頁設計的排版技巧介紹

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

使用超過3種不同的字體讓網站看起來沒有結構且不專業。記住，太多的尺寸類型和風格也可能破壞任何布局。

為了防止這種情況，嘗試將字體數量限制在最小限度

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

確保字體系基于字符寬度互相補充

2. 使用標準字體

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

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

實際上，這種方法有一個很嚴重的問題：因為用戶更熟悉標準字體，因此可以更快地讀取它們。

除非你的網站對于自定義字體(如對品牌宣傳或創建沉浸式體驗)非常有吸引力，否則通常最好使用系統字體。最安全的方法是用一個系統的字體：Arial，Calibri，Trebuchet等。記住，好的排版可以吸引讀者到內容中去，而不是排版本身。

3.限制行的長度

每行擁有適當的字符數量是讓文本具有可讀性的關鍵。它不是你的設計，決定你的文本的寬度，它應該是一個可讀性的問題。考慮Baymard Institute關于可讀性和行的長度的建議：

“如果你想有一個好的閱讀體驗，應該每行約60個字符。每行擁有適當的字符數量是讓你的文本具有可讀性的關鍵。”

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

對于移動設備，應該每行30-40個字符。以下是在移動設備上查看的兩個網站的示例。第一個是使用每行50-75個字符(打印和桌面的每行最佳字符數)，而第二個使是用最佳的30-40個字符。

在網頁設計中，可以通過使用em或像素限制文本的寬度來實現每行最佳數量的字符。

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

用戶會從具有不同屏幕尺寸和分辨率的設備訪問你的網站。大多數用戶界面需要各種大小的文本元素(按鈕復制，字段標簽，章節標題等)。選擇一個能夠在多種尺寸和重量上運行良好的字體以保持每個尺寸的可讀性和可用性是非常重要。

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

5. 使用可區分字母的字體

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

6. 避免所有的大寫

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

7. 行間距的重要性

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

好的間距有助于可讀性。

正如Dmitry Fadeyev所指出的那樣，正確地使用段落之間的空白已被證明可以將理解提高20。使用空白的技能在于為用戶提供可消化量的內容，然后剝離無關緊要的細節。

左：幾乎重疊的文字。右：良好的間距有助于可讀性。

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

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

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

這些文本行不符合顏色對比度的建議，難以根據背景顏色進行閱讀。

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

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

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

色盲是一種常見的情況，特別是在男性中(8的男性是色盲)，建議使用除這些顏色以外的其他顏色來區分重要信息。也避免單獨使用紅色和綠色來傳達信息，因為紅色和綠色色盲是最常見的色盲形式。

10. 避免使用閃爍的文字

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

避免閃爍文字!

結論

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

網站排版設計的小技巧

1 干凈，明快，清晰

通過提升文字內容和背景圖片之間的明暗對比來提升可讀性。通常使用純黑和純白的文字可以更為便捷地實現這一點。

2 保持簡單

保持簡單，但是別忘了最基礎的原則。使用有對比度的配色，用穩固而均衡的排版框架。

3 原創性與創造性

和研究一樣，平面設計的技能和思考一樣需要原創性和創造性。你并不一定非得使用大家都在用的字體和樣式，規避流行并探索自己的風格，會讓你的設計工作與眾不同。

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

7×24小時的奮斗固然突出，但是你很難保持并擁有持續的創造力。適當的放松能讓你恢復效率，產生靈感。適時地離開電腦屏幕看點別的，常常會有意外之喜。

5 使用同族字體

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

6 偉大的留白

留白會賦予設計中各種元素以足夠的呼吸的空間，給用戶以想象的空間。它讓內容更加集中和易讀，也不會因為凌亂而讓用戶分心。

7 創造情緒板

在設計之前，將你所搜集的相關的圖片、色板和其他視覺作品集中到白板上，這樣可以方便你尋找靈感，找到共同的特點、主題和調色板，并且最終應用到項目中去。

8 關注正在發生的事情

設計并不是脫離時代的存在。不論你此刻關注的是哪個領域，請務必關注正在發生的事情，保持對新動態的敏銳意識，從社交媒體到新聞時政，最新最重要的信息終歸是對你有所裨益的。

9 跳出來思考

最有創意的思考者總會跳出條條框框來看待這個世界的。不要用隨處可見的圖標來裝點你的設計，也許一個全新的設計更能代表你的想法。

10 隨身攜帶筆記本

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

設計頁面的排版技巧

排版是什么?

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

為什么要提供良好的排版?

一 個良好的資訊傳遞需要幾個要素來達成，分別是對的內容與對的方式以及對的人，唯有這三個要素都成立的時候，資訊就能夠有效率的被使用者給接受。排版扮演著 內容與使用者之間溝通的橋梁，良好的版面設計讓使用者不需要特別的努力、訓練就可以瞭解提供的內容;相反，糟糕的排版可能會讓使用者拒絕接受這些內容。

排版最重要的四個要點

排版設計中有非常多需要注意的細節，各種細節也會因為不同的情境、需求而不同，底下列出了四項排版最重要的要點，如下：

1. 對齊(Alignment)

任何東西都不能隨意擺放，每一個元素之間都有某種視覺關系。利用對齊建立一個清楚整齊的外觀。

2. 親密(Proximity)

彼此相關的內容應靠在一起，反之不相關的內容保持距離。利用親密性，強調畫面的組織與架構。

3. 重復(Repetition)

重復視覺要素的顏色、字體、大小、空間等，增強條理性，也增強了整體一致性。

4. 對比(Contrast)

避免頁面上元素太過相似，如果它們不同，哪就讓他們截然不同。讓重要的內容引人注目，讓使用者間看到它們。

文字排版要點

文字是內容的本質，人們透過文字、句子來闡述知識，讓我們透過瞭解文字排版，讓文字更容易被閱讀、被接受：

1. 使用適合閱讀的字體

字體大小與使用者螢幕大小、使用距離有關，清楚瞭解使用者使用的環境與習慣后，選擇一個適當的大小。

2. 選用適當的字體

有些中文字體的英文版本其實是不合適的，挑選與中文字體相對應的英文字體作為搭配的字體。

3. 設定恰當的行高

也就是“文字密度”，太擠的文字在換行時，眼睛不容易找到下一行的起點，較不容易閱讀。

4. 設定恰當的段距

清楚的段落區分，讓讀者可以清楚地瞭解現在正在閱讀的段落。

5. 注意段落的寬度

注意文字最后顯示的設備大小，太寬或太窄的段落寬度都會造成閱讀上的困難，一行文字以45字元~75字元是比較恰當的。

6. 清楚的區分標題與內文

使用對比的方式(例如顏色、大小、位置)將內文與標題清楚的區分開來。