網頁排版設計的技巧

時間：2025-09-23 03:50:12 如意網頁設計

網頁排版設計的技巧

　　好的排版提高了用戶的閱讀積極性性，反之，差的排版會降低用戶的閱讀積極性。下面是小編收集整理的網頁排版設計的技巧，希望對大家有幫助！

　　網頁排版設計的技巧

　　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. 選擇一個能在各種尺寸中工作的字體

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

　　Google的Roboto字體

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

　　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. 避免使用閃爍的文字

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

　　避免閃爍文字!

　　結論

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

　　內容排版的存在是為了榮譽。

　　排版應以不會增加用戶認知負荷的方式來尊重內容。

　　拓展資料：響應式網頁設計的7類排版規則

　　1. 突出顯示標題

　　網頁排版的一個特點就是標題在版式中占據突出位置。別致的標題能吸引用戶在你的網站停留更久。為了實現這一點，你可以利用字形(glyphs)和連字(ligatures)技巧創造外觀更獨特的標題。

　　連字指的是看起來似乎是連接在一起的字母。例如，單詞“fish”中的f和i在某種字體里可能聯成一體(fi)。通過瀏覽器的字體設置功能或借助“文本渲染——優化清晰度”(Text Rendering- OptimiseLegibility)特性，你可以輕松地實現連字效果。火狐瀏覽器已經設置了默認的連字符。在某些字體中使用特定的連字組合效果能為你的網頁版式增加美感和風格。在網頁排版軟件的Text, Type 或Open Type目錄中，一般都可以開啟或關閉連字效果。當合適的字母相鄰出現時，這些軟件會自動為它們設置連字效果。

　　案例分析

　　請注意這個網站中優雅的連字。這些優美的字體如果用于網頁標題中的話，無疑會為訪客帶來更為卓越的用戶體驗。

　　2.合理搭配不同大小和顏色的字體

　　正如上面的圖片所傳遞的信息一樣，我們在網頁設計中必須選擇能在桌面端和移動設備屏幕上都清晰顯示的字體。一款字體在印刷品中與在數碼設備中顯示的效果是不同的。因此我們必須理解font family屬性，風格和效果。根據W3C對于CSS字體的規定，Serif, Sans-Serif, Monospace, Fantasy 和Cursive等字體都具有font family屬性。

　　第二，應根據網站的主題或分類來選擇字體。這樣才能確保你的網頁能引起目標受眾的共鳴，達到想要的效果。襯線字體同樣能用于提升文本的閱讀效果，強化要傳達的信息。這里的問題是，襯線字體的特性決定了它只能在高解析度的屏幕上正常顯示，在低解析度的屏幕上可能會導致糟糕的結果。因此建議你在短標題中使用藝術字體，在正文中采用更簡潔的字體。

　　3.精心挑選字體將為你贏得靈活而高效的排版

　　自從客戶端字體(Font Face)被引入網頁設計中之后，網頁設計師們便擁有了將不同字體用于自己設計中的自由。此前，他們只能使用特定的，與網頁安全兼容的字體。

　　但面對這些可以自由使用的字體，設計師們還需要知道如何正確地使用它們。響應式網頁設計已經成為多數網站的標準設計模式，不過由于要顧及不同尺寸的設備屏幕，它對網頁排版也提出了一些限制。所以網頁設計師在一個響應式網頁系統中使用多種字體時，必須十分審慎。在同一個網站中不要使用太多種字體，最好不要超過三種。同時也不要使用極為流行的字體，這并不能讓你的網頁看起來比別的網頁更有優勢。

　　案例分析

　　這個站點使用了兩種無襯線字體。所有的標題使用的都是Balto 字體，正文采用的是Alright Sans 字體。介于這兩者之間的是Harriet 字體。整個頁面外觀顯得十分簡潔優雅。

　　與之形成對比的是angelfire 網站，這個站點使用了多種不同的字體，看起來混亂，不專業。

　　4. 在響應式排版中，調節行寬十分重要

　　必須對網頁中的行寬(line length )進行調節，因為字體的行寬與排版的響應程度息息相關。響應式設計也包括在不同尺寸的屏幕上字體所發生的自適應式改變。所以調整字體的行寬是必須的。

　　理想的行寬為每行文本中字符數量在45-47之間，包含空格和標點。最長的限度我45-85個字符。這是對人們的閱讀習慣和眼動規律做出研究后得出的結論。根據這一結論，有專家建議網頁內容采用左對齊的排版方式，因為人的視線在閱讀時一般會按照從左至右的方式在水平方向上運動。

　　案例分析

　　網站suite 將沒行文本的字符數限定為75個。正如你能看到的，頁面中的文本看起來十分優美，能讓用戶懷著興趣一直讀下去。

　　5.當用戶與屏幕的距離不同時，使用不同大小的字體能改善可讀性。在響應式排版設計中，必須考慮這一點。

　　字體的大小要能保證字體在設備上可見，可讀。而要做到這一點，可能會與前面所說的保持“理想行寬”發生沖突。因為“理想行寬”意味著要調小或調大字體尺寸，而這兩者都可能導致文本不可讀。這里的底線是要保證瀏覽者能舒服地閱讀網頁內容。響應式設計非常關鍵的一點就在于，根據用戶與設備屏幕距離的不同，應用于設備屏幕的字體大小也應該不同。對于字體大小與閱讀距離的關系，已經有計算的方法。

　　案例分析

　　請查看 moonbase 網站。這是一個幫助其他公司設計網站的網站。網頁中央的文本十分顯眼，它傳達了這個站點的功能。我們只需看一眼就能明白。突出的字體能緊緊地抓住用戶的注意力，并促使他們繼續閱讀網站的其余部分。

　　6. 響應式排版要求瀏覽器支持不同大小的字體

　　如果你設計的網頁中需要用到某些自定義字體，你必須確保瀏覽器支持加載和顯示這些字體。即便你的字體本身清晰，沒有錯誤，但瀏覽器兼容問題可能會使你前功盡棄。你還必須檢查你保存的字體文件格式與你想應用于網頁中的字體是否兼容。不兼容的字體無法正常加載，最終會影響網頁的顯示。

　　案例分析：從上面的示例中我們可以發現，我們需要使用標準字體或“字體庫”。第一步是通過“字體測試”來確定一款字體是否適用于網頁中。瀏覽器對于每個系列的字體都有“第一選項”，“第二選項”，“第三選項”……的區分。如果瀏覽器在這個系列中趙愛不到任何合適的字體，它會自動選擇默認的無襯線字體，襯線字體或Monospace字體。

　　舉例來說，很多瀏覽器都自帶 Century Gothic字體。你可以創建一個字體庫，將Century Gothic字體視為你的第一選項，之后是Arial, Helvetica，最后是一款無襯線類的字體。注意，在CSS中，標題中含有多個單詞的字體需要加上引號。例如： font-family:“Century Gothic”, Arial, Helvetica, Sans-Serif.

　　這樣一來，瀏覽器會首先采用Century Gothic字體。由于很多瀏覽器都自帶這款字體，多數用戶在瀏覽網頁時看到的也會是Century Gothic字體。對于沒有配置 Century Gothic的瀏覽器，瀏覽器會按照Arial, Helvetica,事前設置的無襯線字體的順序尋找替代。

　　7.與字體的物理屬性相關的因素會影響字體在設計中的靈活度

　　響應式排版可能會受制于影響字形的因素。這些因素包括字重，字寬，筆畫對比，字體高度，光學尺寸等等。這些因素的些微變化都會影響站點的觀感。當然，現在已經有了不少的工具可以讓設計師部分地修正這些限制。

　　Superpolator 和FlowType.js就是此類工具中有代表性的兩款。當屏幕尺寸減小時，不同比例的網頁間的差異就會更為凸顯。因此就需要在網頁尺寸與縮放比例間找到平衡點。例如，用于標題的字體比用于正文的字體大/小多少倍，這就涉及比例問題。這也就是我們為何需要響應式排版的理由。我們需要在斷點中能自行縮小的字體，因為設計師們無法為網頁內的所有字體元素一一調整基線風格。

　　案例分析

　　請查看flowtype網站。借助 Superpolator 和FlowType.js之類的工具，只需拖動滑塊，你便能清楚地看到響應式排版的作用。

　　給大家列舉了這7個網站案例，響應式排版的操作還需要在實踐中不斷完善，在應用中針對不同屏幕尺寸的設備進行測試，你將會逐步掌握響應式排版的要點。

【網頁排版設計的技巧】相關文章：