導語：網頁設計(web design，又稱為Web UI design，WUI design，WUI)，是根據企業希望向瀏覽者傳遞的信息(包括產品、服務、理念、文化)，進行網站功能策劃，然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中壹種，精美的網頁設計，對於提升企業的互聯網品牌形象至關重要。
網頁美術設計(也稱網站美術、美工設計)從某種意義上來說可以稱為?eye ball work?，網頁的美術創作要能充分吸引訪問者的註意力，讓訪問者產生視覺上的愉悅感。因此在網頁創作的時候就必須將網站的整體設計與網頁設計的相關原理緊密結合起來。在某種意義上，網站美術設計是網站成功的主要因素。
網頁美術設計與網站整體形象壹致，符合藝術規範和網站標準，著重註意網頁色彩(主色調和次色調)、圖片的應用及版面規劃，保持網頁的整體壹致性。
網頁設計要點1、網頁是客戶遊覽網站獲取信息的主要窗口。為此，頁面下載速度快、遊覽頁面方便快捷、無錯誤鏈接是設計網頁最重要的要求。
2、網站是企業的門戶。為此，網頁美術設計壹般要與企業整體形象壹致，要符合CI規範。要註意網頁色彩、圖片的應用及版面規劃，保持網頁的整體壹致性。
3、在新技術的采用上要考慮主要目標訪問群體的分布地域、年齡階層、網絡速度、閱讀習慣等。
4、網頁設計要體現企業文化和經營管理。
5、制定網頁改版計劃，如半年到壹年時間進行較大規模改版等。
6、主頁是客戶登錄企業網站，首先看到的壹個頁面，也是獲取信息的開始，為此，主頁的設計除具體有以上特點外，還要求清晰的導航系統和獨特的創意設計
相關也讀》》自適應網頁設計與響應式網頁設計在現代網站開發使用中有兩種主要辦法,即自適應和響應式,這兩者都使用斷點的概念,這個概念是通過媒體查詢所創建的限制,在這些斷點上,網站的而已被強制更改.
自適應方法和響應式方法之間的差異可以歸結為,網站在斷點間變化,自適應配制上是壹系列寬度固定的布局而響應式使用的尺寸則很靈活,所以即使在斷點之間,網站仍有具有壹定的流動性.
介於不同設備屏幕尺寸的巨大差異,試圖令壹系列寬度固定的頁面適應即使是最覺的配置都是壹種不明智的做法,更好的做法是使用流動設計,它包括使用長度值的百分比以令頁面元素的尺寸適應窗口的大小 ,這種做法也是構建響應的關鍵.
大多數用戶所使用的臺式機或筆記本電腦的顯示器寬度大於或等於1024,那麽制作壹個寬度固定為960的頁面是可以被打官腔的,但這種情況已成為歷史,如果現在還按照上述方式設計,那將意味著使用移動設備的用戶看到是壹個按比例縮小的屏幕,他們只有通過放大,縮小和左右滾動才能完全瀏覽頁面.這種結果並不是不能接受,但也並不理想.
使用百分比而非固定值意味著頁面元素可以隨著窗口的尺寸進行綻放,從而使內容流進屏幕邊界內,這就是為什麽這種方法被稱為滾動設計,將這個方法與內容或設備的媒體查詢相結合,就得到是響應式設計的核心,這為用戶提供量身定制的稱心體驗,卻無需考慮用戶設備的情況.
響應式網頁設計排版需要註意什麽1. 精心挑選字體將為妳贏得靈活而高效的排版
自從客戶端字體(Font Face)被引入網頁設計中之後，網頁設計師們便擁有了將不同字體用於自己設計中的自由。此前，他們只能使用特定的，與網頁安全兼容的字體。
但面對這些可以自由使用的字體，設計師們還需要知道如何正確地使用它們。響應式網頁設計已經成為多數網站的標準設計模式，不過由於要顧及不同尺寸的設備屏幕，它對網頁排版也提出了壹些限制。所以網頁設計師在壹個響應式網頁系統中使用多種字體時，必須十分審慎。在同壹個網站中不要使用太多種字體，最好不要超過三種。同時也不要使用極為流行的字體，這並不能讓妳的網頁看起來比別的網頁更有優勢。
2. 突出顯示標題
網頁排版的壹個特點就是標題在版式中占據突出位置。別致的標題能吸引用戶在妳的網站停留更久。為了實現這壹點，妳可以利用字形(glyphs)和連字(ligatures)技巧創造外觀更獨特的標題。
連字指的是看起來似乎是連接在壹起的字母。例如，單詞?fish?中的f和i在某種字體裏可能聯成壹體(fi)。通過瀏覽器的字體設置功能或借助?文本渲染?優化清晰度?(Text Rendering- OptimiseLegibility)特性， 妳可以輕松地實現連字效果。火狐瀏覽器已經設置了默認的連字符。在某些字體中使用特定的連字組合效果能為妳的網頁版式增加美感和風格。在網頁排版軟件的Text, Type 或Open Type目錄中，壹般都可以開啟或關閉連字效果。當合適的字母相鄰出現時，這些軟件會自動為它們設置連字效果。
3. 合理搭配不同大小和顏色的字體
正如上面的圖片所傳遞的信息壹樣，我們在網頁設計中必須選擇能在桌面端和移動設備屏幕上都清晰顯示的.字體。壹款字體在印刷品中與在數碼設備中顯示的效果是不同的。因此我們必須理解font family屬性，風格和效果。根據W3C對於CSS字體的規定，Serif, Sans-Serif, Monospace, Fantasy 和Cursive等字體都具有font family屬性。
第二，應根據網站的主題或分類來選擇字體。這樣才能確保妳的網頁能引起目標受眾的***鳴，達到想要的效果。襯線字體同樣能用於提升文本的閱讀效果，強化要傳達的信息。這裏的問題是，襯線字體的特性決定了它只能在高解析度的屏幕上正常顯示，在低解析度的屏幕上可能會導致糟糕的結果。因此建議妳在短標題中使用藝術字體，在正文中采用更簡潔的字體。
4. 在響應式排版中，調節行寬十分重要
必須對網頁中的行寬(line length )進行調節，因為字體的行寬與排版的響應程度息息相關。響應式設計也包括在不同尺寸的屏幕上字體所發生的自適應式改變。所以調整字體的行寬是必須的。
理想的行寬為每行文本中字符數量在45-47之間，包含空格和標點。最長的限度我45-85個字符。這是對人們的閱讀習慣和眼動規律做出研究後得出的結論。根據這壹結論，有專家建議網頁內容采用左對齊的排版方式，因為人的視線在閱讀時壹般會按照從左至右的方式在水平方向上運動。
5.當用戶與屏幕的距離不同時，使用不同大小的字體能改善可讀性。在響應式排版設計中，必須考慮這壹點。
字體的大小要能保證字體在設備上可見，可讀。而要做到這壹點，可能會與前面所說的保持?理想行寬?發生沖突。因為?理想行寬?意味著要調小或調大字體尺寸，而這兩者都可能導致文本不可讀。這裏的底線是要保證瀏覽者能舒服地閱讀網頁內容。響應式設計非常關鍵的壹點就在於，根據用戶與設備屏幕距離的不同，應用於設備屏幕的字體大小也應該不同。對於字體大小與閱讀距離的關系，已經有計算的方法。
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就是此類工具中有代表性的兩款。當屏幕尺寸減小時，不同比例的網頁間的差異就會更為凸顯。因此就需要在網頁尺寸與縮放比例間找到平衡點。例如，用於標題的字體比用於正文的字體大/小多少倍，這就涉及比例問題。這也就是我們為何需要響應式排版的理由。我們需要在斷點中能自行縮小的字體，因為設計師們無法為網頁內的所有字體元素壹壹調整基線風格。