網(wǎng)頁設計排版需要注意什么
網(wǎng)頁必須以有吸引力的，高效的方式方式呈現(xiàn)信息。以下就是小編精心推薦網(wǎng)頁設計排版需要注意的事項，希望對大家有幫助!
1. 精心挑選字體將為你贏得靈活而高效的排版
自從客戶端字體(Font Face)被引入網(wǎng)頁設計中之后，網(wǎng)頁設計師們便擁有了將不同字體用于自己設計中的自由。此前，他們只能使用特定的，與網(wǎng)頁安全兼容的字體。
但面對這些可以自由使用的字體，設計師們還需要知道如何正確地使用它們。響應式網(wǎng)頁設計已經(jīng)成為多數(shù)網(wǎng)站的標準設計模式，不過由于要顧及不同尺寸的設備屏幕，它對網(wǎng)頁排版也提出了一些限制。所以網(wǎng)頁設計師在一個響應式網(wǎng)頁系統(tǒng)中使用多種字體時，必須十分審慎。在同一個網(wǎng)站中不要使用太多種字體，最好不要超過三種。同時也不要使用極為流行的字體，這并不能讓你的網(wǎng)頁看起來比別的網(wǎng)頁更有優(yōu)勢。
案例分析
這個站點使用了兩種無襯線字體。所有的標題使用的都是Balto 字體，正文采用的是Alright Sans 字體。介于這兩者之間的是Harriet 字體。整個頁面外觀顯得十分簡潔優(yōu)雅。
與之形成對比的是angelfire網(wǎng)站，這個站點使用了多種不同的字體，看起來混亂，不專業(yè)。
2. 突出顯示標題
網(wǎng)頁排版的一個特點就是標題在版式中占據(jù)突出位置。別致的標題能吸引用戶在你的網(wǎng)站停留更久。為了實現(xiàn)這一點，你可以利用字形(glyphs)和連字(ligatures)技巧創(chuàng)造外觀更獨特的標題。
連字指的是看起來似乎是連接在一起的字母。例如，單詞“fish”中的f和i在某種字體里可能聯(lián)成一體(fi)。通過瀏覽器的字體設置功能或借助“文本渲染——優(yōu)化清晰度”(Text Rendering- OptimiseLegibility)特性， 你可以輕松地實現(xiàn)連字效果。火狐瀏覽器已經(jīng)設置了默認的連字符。在某些字體中使用特定的連字組合效果能為你的網(wǎng)頁版式增加美感和風格。在網(wǎng)頁排版軟件的Text, Type 或Open Type目錄中，一般都可以開啟或關閉連字效果。當合適的字母相鄰出現(xiàn)時，這些軟件會自動為它們設置連字效果。
案例分析
請注意這個網(wǎng)站中優(yōu)雅的連字。這些優(yōu)美的字體如果用于網(wǎng)頁標題中的話，無疑會為訪客帶來更為卓越的用戶體驗。
3. 合理搭配不同大小和顏色的字體
正如上面的圖片所傳遞的信息一樣，我們在網(wǎng)頁設計中必須選擇能在桌面端和移動設備屏幕上都清晰顯示的字體。一款字體在印刷品中與在數(shù)碼設備中顯示的效果是不同的。因此我們必須理解font family屬性，風格和效果。根據(jù)W3C對于CSS字體的規(guī)定，Serif, Sans-Serif, Monospace, Fantasy 和Cursive等字體都具有font family屬性。
第二，應根據(jù)網(wǎng)站的主題或分類來選擇字體。這樣才能確保你的網(wǎng)頁能引起目標受眾的共鳴，達到想要的效果。襯線字體同樣能用于提升文本的閱讀效果，強化要傳達的信息。這里的問題是，襯線字體的特性決定了它只能在高解析度的屏幕上正常顯示，在低解析度的屏幕上可能會導致糟糕的結果。因此建議你在短標題中使用藝術字體，在正文中采用更簡潔的字體。
4. 在響應式排版中，調節(jié)行寬十分重要
必須對網(wǎng)頁中的行寬(line length )進行調節(jié)，因為字體的行寬與排版的響應程度息息相關。響應式設計也包括在不同尺寸的屏幕上字體所發(fā)生的自適應式改變。所以調整字體的行寬是必須的。
理想的行寬為每行文本中字符數(shù)量在45-47之間，包含空格和標點。最長的限度我45-85個字符。這是對人們的閱讀習慣和眼動規(guī)律做出研究后得出的結論。根據(jù)這一結論，有專家建議網(wǎng)頁內容采用左對齊的排版方式，因為人的視線在閱讀時一般會按照從左至右的方式在水平方向上運動。
案例分析
網(wǎng)站suite 將沒行文本的字符數(shù)限定為75個。正如你能看到的，頁面中的文本看起來十分優(yōu)美，能讓用戶懷著興趣一直讀下去。
5.當用戶與屏幕的距離不同時，使用不同大小的字體能改善可讀性。在響應式排版設計中，必須考慮這一點。
字體的大小要能保證字體在設備上可見，可讀。而要做到這一點，可能會與前面所說的保持“理想行寬”發(fā)生沖突。因為“理想行寬”意味著要調小或調大字體尺寸，而這兩者都可能導致文本不可讀。這里的底線是要保證瀏覽者能舒服地閱讀網(wǎng)頁內容。響應式設計非常關鍵的一點就在于，根據(jù)用戶與設備屏幕距離的不同，應用于設備屏幕的字體大小也應該不同。對于字體大小與閱讀距離的關系，已經(jīng)有計算的方法。
案例分析
請查看 moonbase 網(wǎng)站。這是一個幫助其他公司設計網(wǎng)站的網(wǎng)站。網(wǎng)頁中央的文本十分顯眼，它傳達了這個站點的功能。我們只需看一眼就能明白。突出的字體能緊緊地抓住用戶的注意力，并促使他們繼續(xù)閱讀網(wǎng)站的其余部分。
6. 響應式排版要求瀏覽器支持不同大小的字體
如果你設計的網(wǎng)頁中需要用到某些自定義字體，你必須確保瀏覽器支持加載和顯示這些字體。即便你的字體本身清晰，沒有錯誤，但瀏覽器兼容問題可能會使你前功盡棄。你還必須檢查你保存的字體文件格式與你想應用于網(wǎng)頁中的字體是否兼容。不兼容的字體無法正常加載，最終會影響網(wǎng)頁的顯示。
案例分析：從上面的示例中我們可以發(fā)現(xiàn)，我們需要使用標準字體或“字體庫”。第一步是通過“字體測試”來確定一款字體是否適用于網(wǎng)頁中。瀏覽器對于每個系列的字體都有“第一選項”，“第二選項”，“第三選項”……的區(qū)分。如果瀏覽器在這個系列中趙愛不到任何合適的字體，它會自動選擇默認的無襯線字體，襯線字體或Monospace字體。
舉例來說，很多瀏覽器都自帶 Century Gothic字體。你可以創(chuàng)建一個字體庫，將Century Gothic字體視為你的第一選項，之后是Arial, Helvetica，最后是一款無襯線類的字體。注意，在CSS中，標題中含有多個單詞的字體需要加上引號。例如： font-family:“Century Gothic”, Arial, Helvetica, Sans-Serif.
這樣一來，瀏覽器會首先采用Century Gothic字體。由于很多瀏覽器都自帶這款字體，多數(shù)用戶在瀏覽網(wǎng)頁時看到的也會是Century Gothic字體。對于沒有配置 Century Gothic的瀏覽器，瀏覽器會按照Arial, Helvetica,事前設置的無襯線字體的順序尋找替代。
7.與字體的物理屬性相關的因素會影響字體在設計中的靈活度
響應式排版可能會受制于影響字形的因素。這些因素包括字重，字寬，筆畫對比，字體高度，光學尺寸等等。這些因素的些微變化都會影響站點的觀感。當然，現(xiàn)在已經(jīng)有了不少的工具可以讓設計師部分地修正這些限制。
Superpolator 和FlowType.js就是此類工具中有代表性的兩款。當屏幕尺寸減小時，不同比例的網(wǎng)頁間的差異就會更為凸顯。因此就需要在網(wǎng)頁尺寸與縮放比例間找到平衡點。例如，用于標題的字體比用于正文的字體大/小多少倍，這就涉及比例問題。這也就是我們?yōu)楹涡枰憫脚虐娴睦碛伞Ｎ覀冃枰跀帱c中能自行縮小的字體，因為設計師們無法為網(wǎng)頁內的所有字體元素一一調整基線風格。
案例分析
請查看flowtype網(wǎng)站。借助 Superpolator 和FlowType.js之類的工具，只需拖動滑塊，你便能清楚地看到響應式排版的作用。
響應式排版的操作需要在實踐中不斷完善。通過對媒介查詢(media queries)知識的學習和對不同屏幕尺寸的設備進行測試，你將會逐步掌握響應式排版的要點。現(xiàn)在你已經(jīng)知道了要達到最好的響應式排版效果需遵循哪些原則，今后便可以將這些原則貫徹到自己的設計中。
【網(wǎng)頁設計排版需要注意什么】相關文章：
網(wǎng)頁設計需要注意什么10-20
網(wǎng)頁設計文字排版10-06
網(wǎng)頁設計時需要注意什么問題01-20
網(wǎng)頁設計需注意什么09-12
網(wǎng)頁設計需注意什么01-04
web網(wǎng)頁設計和排版10-02
網(wǎng)頁排版設計的技巧09-23
網(wǎng)頁設計文字排版技巧03-05