設計者在網頁設計排版中應注意的一些問題

時間：2024-08-14 08:54:16 平面設計我要投稿

相關推薦

設計者在網頁設計排版中應注意的一些問題

　　導語：排版是一門藝術，也是一門技巧。我們每天都能在報紙，書籍等各種媒介上看到排版，或精美，或丑陋。如何能在準確傳遞信息的同時，又能排出精美的版面，這是設計師們值得深思的問題，因為這關系到讀者的閱讀感受。本文以網頁排版為例，從幾個方面闡述了成功的設計在排版中應該注意的問題和細節。

　　大體上來說，排版是為了信息分享而重新將字體進行排列的一門藝術和技巧。也就是說，排版是為傳遞信息而進行的簡單排列組合，然而，好的排版非常注重視覺精度和細節，甚至是很小的細節都不容忽視。排版最早出現在書寫當中，因此即便是最簡單的字母排列也可算一種排版。如今，印刷品，書籍，報紙，信件，電視，網絡等都會涉及到排版，簡直是無處不在。甚至連重要的網站在以前就開始關注排版了，并且在當時嘗試用現成的資源盡可能提高排版水平。

　　網頁排版

　　網頁排版是近年興起的一個普通排版的分支概念。雖然，圖片也可以傳遞信息，但網站上的內容大部分是由文字組成。這就是網絡排版如此受重視的原因。排版的重要性絲毫不亞于視覺層次，合適顏色的選取，網站功能以及其它特性。我們從來沒低估過網絡排版的重要性，也深知它在良好的用戶體驗中所發揮的重要作用。

　　任何追求漂亮版面的人都知道，印刷排版跟網絡排版完全是兩碼事。盡管有些規則可能相同，但網頁設計所處環境完全不同，兩者都有自己一套必須遵守的規則和準則。兩者的原理不同，不能同時存在，跨越這個界線可能會導致排版混亂。

　　層次結構

　　盡管，你可能已經熟悉了網頁設計的層次結構，你可能也明白排版中也少不了它。層級結構會給你一個閱讀顯示文本的起點。這點非常重要，因為這會幫助你準確傳遞信息，同時保證讀者準確理解。很多網站在這個問題上都做得很好，但是你還是應該牢記在心，這樣你的網站就不會顯得太過時。

　　間距問題

　　盡管，很少遇到網站排版中出現層級結構的問題，但相當多的網站排版卻存在間距排列的問題。網站所有元素的間距都必須按照一定的條理進行排列，因此你在處理間距必須遵循這些條理。你可能需要去了解以下的專用術語：行距大小(Leading Size)、字偶間距(Kerning)和字間距(Tracking)。

　　行距大小是一種增加或減少文本行之間產生的空格的方法。點擊此處閱讀，你就知道到為什么減少行距有利讀者閱讀。字偶間距是調節字符間空格，使其達到更愉悅的視覺效果的過程。使用字間距同樣能達到字偶距調整的效果，兩者之間的唯一差別在于空格的產生，字間距是在每個字符間產生等量的空格，而字偶間距是調整的基于字符對所產生的空格。

　　顏色和調色板

　　排版中的顏色并不專指單一的文本顏色，通常是指網站用到的所有顏色。網站用到的圖片和顏色相當于文本的“背景”，因此使用顏色時要謹慎。網站的元素要和排版顏色協調，不要讓文本顯得模糊不清。你也可嘗試較大尺寸的排版(又稱為宏觀排版)來達到更好的效果。簡單來說，宏觀排版就是使用更大的文本來吸引用戶。它的長度通常不能超過1到4個單詞，因此，保持文字的簡潔性和正確性就顯得格外很重要。在關鍵信息下，但是這并不是那么重要，因為這并不是你的網站的焦點，但大尺寸文字卻是。

　　網站宏觀排版示例

　　Purple Bunny

　　Matt Hall

　　字體配對

　　字體配對是將兩種或更多字體通過排列組合達到最佳效果的過程。這聽起來有意思，但對于初學者卻并非易事。選擇一種或多種的漂亮字體就夠了，但是，你只是想完美配對兩種字體，從理論上講，難度更大。字體配對可降低使用單一字體時可能所產生的單調感。你可以就此進行實踐，為網站中所有的大標題使用一種字體，在一些簡單段落里使用另一種字體，看看最終效果是否很單調。Douglass Bonneville書中就詳細羅列了數千種字體配對，有興趣的朋友可以去看看。

　　字體大小/粗細對比

　　如果你把字體弄得難以辨認，這是犯了大忌。你也知道字體配對對于精美排版的重要性，而不是用一些統一的文本。即使你找到了很棒的字體搭配，還是不要忘記為字體設置合適的大小和粗細。字體粗細和大小設置不當基本上就毀掉了之前的搭配，因為這會讓你已經使用的不同字體難以辨認。還應注意一點，背景圖片跟字體顏色相近或不匹配，會導致字體淹沒在背景圖片當中。

　　字體替換方法

　　在過去，設計師必須使用用戶電腦，甚至帶文本圖片上有的字體，這樣字體才會正確顯示。隨著技術不斷發展，HTML5很快克服了這些問題。另外還有許多很棒的字體替換工具，這些工具搜集了很多字體，用戶不用安裝專門的字體，字體照樣正確顯示。

　　@font-face

　　@font-face是最簡單的替換方法之一。幾年前曾對此做過介紹。因為沒有亂糟糟的JavaScript和jQuery“搗亂”，它實現起來非常簡單，只依靠CSS和額外的幾句代碼即可運行。font-face唯一的弊端可能在于，不同瀏覽器對渲染的處理方法不同，使用最新版本的瀏覽器應該能盡量避免這個問題，但是無論如何，既然遇到了問題，我們不能撒手不管。

　　Google字體

　　雖然Google在2010年就發布了自己的字體庫，并已收錄了大約500多種字體。Google字體的API因其簡單方便，值得信賴而被廣泛使用。不過它的唯一弊端就是缺乏高質量的字體。雖然它提供了完整的字體類型，由于缺乏優質字體，會削弱網站的實力。

　　Typekit

　　Typekit是一項存在很多年的知名服務。它收集的字體大約上千種，并且大部分都很漂亮，這也是它深受歡迎的原因所在。另一個原因則是，它提供了Google沒有的付費的@font-face字體解決方案。該服務于2009推出，一年之后小有名氣，比Google字體成名要早。唯一的弊端是讓許多潛在客戶頭疼的支付方法。它是按年收費，除此之外，不同的價格套餐，網站頁面瀏覽量，和每個網站使用的字體數都有限制。

　　FontSquirrel

　　它最給力的地方在于可使用的字體非常多，并且是完全免費的。它提供的字體深受喜愛，在許多網站上完全可免費使用。FontSquirrel甚至允許你使用@font-face生成器，創建你自己的@font-face字體包。

【設計者在網頁設計排版中應注意的一些問題】相關文章：