網頁設計

在進行網站製作前，首先要進行網站頁面的整體設計。一個網站是由若干個網頁構成的，網頁是用户訪問網站的界面。因此，通常意義上的網站設計，即指的是網站中各個頁面的設計。而網頁設計中，最先提到的就是網頁的佈局。佈局是否合理、美觀，將直接影響到用户的閲讀體驗及訪問時間。

在互聯網高速發展的今天，網絡已成為人們生活的一部分，成為人們獲取信息資源的重要途徑。信息的呈現離不開網頁這個重要的界面，網頁的主要作用是將用户需要的信息與資源採用一定的手段進行組織，通過網絡呈現給用户。

隨着網絡技術及其帶寬的提高，網頁的組成元素也發生了很大的變化。在90年代末，網頁的構成元素主要就是大量的文本、表格、超鏈接和極少數量的靜態圖像和gif動圖。現在的網頁除了以上的組成元素外又增加了大量的圖像、動畫、視頻、音樂、橫幅廣告以及多種動態效果。 ^[1] 

網站伴隨着網絡的快速發展而快速興起，作為上網的主要依託，由於人們使用網絡的頻繁而變得非常的重要。由於企業需要通過網站呈現產品、服務、理念、文化，或向大眾提供某種功能服務。因此網頁設計必須首先明確設計站點的目的和用户的需求，從而做出切實可行的設計方案。

專業的網頁設計，需要經歷以下幾個階段：

在目標明確的基礎上，完成網站的構思創意即總體設計方案。對網站的整體風格和特色作出定位，規劃網站的組織結構。

Web站點應針對所服務對象（機構或人）的不同而具有不同的形式。有些站點只提供簡潔文本信息；有些則採用多媒體表現手法，提供華麗的圖像、閃爍的燈光、複雜的頁面佈置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現手法和有效的組織與通信結合起來。

為了做到主題鮮明突出，要點明確，應該使配色和圖片圍繞預定的主題；調動一切手段充分表現網站點的個性和情趣，辦出網站的特點。

充分利用已有信息，如客户手冊．公共關係文檔．技術手冊和數據庫等。

網頁設計作為一種視覺語言，特別講究編排和佈局，雖然主頁的設計不等同於平面設計，但它們有許多相近之處。

版式設計通過文字圖形的空間組合，表達出和諧與美。

多頁面站點頁面的編排設計要求把頁面之間的有機聯繫反映出來，特別要求處理好頁面之間和頁面內的秩序與內容的關係。為了達到最佳的視覺表現效果，反覆推敲整體佈局的合理性，使瀏覽者有一個流暢的視覺體驗。

色彩是藝術表現的要素之一。在網頁設計中，設計師根據和諧、均衡和重點突出的原則，將不同的色彩進行組合．搭配來構成美麗的頁面。 根據色彩對人們心理的影響，合理地加以運用。如果企業有CIS（企業形象識別系統），應按照其中的VI進行色彩運用。

為了將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義。

靈活運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關係建立整體的均衡狀態，產生和諧的美感。

網絡上的三維空間是一個假想空間，這種空間關係需藉助動靜變化．圖像的比例關係等空間因素表現出來。 在頁面中，圖片、文字位置前後疊壓，或頁面位置變化所產生的視覺效果都各不相同。通過圖片、文字前後疊壓所構成的空間層次不太適合網頁設計，根據現有瀏覽器的特點，網頁設計適合比較規範、簡明的頁面，儘管這種疊壓排列能產生強節奏的空間層次，視覺效果強烈。

網頁上常見的是頁面上、下、左、右、中位置所產生的空間關係，以及疏密的位置關係所產生的空間層次，這兩種位置關係使產生的空間層次富有彈性，同時也讓人產生輕鬆或緊迫的心理感受。

人們已不滿足於HTML（標準通用標記語言下的一個應用）編制的二維Web頁面，三維世界的誘惑開始吸引更多的人，虛擬現實要在Web網上展示其迷人的風采，於是VRML語言出現了。VRML是一種面向對象的語言，它類似Web超級鏈接所使用的HTML語言，也是一種基於文本的語言，並可以運行在多種平台之上，只不過能夠更多地為虛擬現實環境服務。

網絡資源的優勢之一是多媒體功能。要吸引瀏覽者注意力，網頁的內容可以用三維動畫、FLASH等來表現。但要由於網絡寬帶的限制，在使用多媒體的形式表現網頁的內容時不得不考慮客户端的傳輸速度。

如果人們看不懂或很難看懂的網站，那麼，如何瞭解企業信息和服務項目呢？使用一些醒目的標題或文字來突出產品與服務。並且即使擁有最棒的產品，如果客户從網站上看不清楚在介紹什麼或不清楚如何受益的話，他們是不會喜歡網站的，這對於網頁設計而言是失敗的。

網頁設計中導航使用超文本鏈接或圖片鏈接，使人們能夠在網站上自由前進或後退，而不必讓他們使用瀏覽器上的前進或後退。在所有的圖片上使用“ALT”標識符註明圖片名稱或解釋，以便那些不願意自動加載圖片的觀眾能夠了解圖片的含義。

很多的瀏覽者不會進入需要等待5分鐘下載時間才能進入的網站，在互聯網上30秒的等待時間與平常10分鐘等待時間的感覺相同。因此，建議在網頁設計中儘量避免使用過多的圖片及體積過大的圖片。主要頁面的容量應確保普通瀏覽者頁面等待時間不超過10秒。

在必要時適當使用動態“Gif”圖片，為減少動畫容量，應用巧妙設計的Java動畫可以用很小的容量使圖形或文字產生動態的效果。但是，由於在互聯網瀏覽的大多是一些尋找信息的人們，仍然建議要確定網站將為他們提供的是有價值的內容，而不是過度的裝飾。

讓客户明確能提供的產品或服務並讓他們非常方便地訂購是獲得成功的重要因素。如果客户在網站上產生了購買產品或服務的慾望，是否能夠讓他們儘快實現嗎？是在線還是離線？

因此，如果是產品或服務介紹網站，應該有留言、電話、在線諮詢等功能或信息呈現。

在企業的Web站點上，要認真回覆用户的電子郵件和傳統的聯繫方式如信件．電話垂詢和傳真，做到有問必答。最好將用户的用意進行分類，如售前一般瞭解．售後服務等，由相關部門處理，使網站訪問者感受到企業的真實存在並由此產生信任感。

測試實際上是模擬用户詢問網站的過程，用以發現問題並改進網頁設計。應該與用户共同安排網站測試。

企業Web站點建立後，要不斷更新網頁內容。站點信息的不斷更新，讓瀏覽者瞭解企業的發展動態和網上職務等，同時也會幫助企業建立良好的形象。

注意不要許諾實現不了的東西，在真正有能力處理回覆之前，不要懇求用户輸入信息或羅列一大堆自己不能及時答覆的電話號碼。 如果要求訪問者自願提供其個人信息，應公佈並認真履行個人隱私保承諾。

在網頁設計中，總是有傾向的特定技術來觀察，或跟蹤的網頁設計師加強的趨勢。這裏有專有和開源和免費的技術專用的支持者。然而，近些年來，又增加自由和開放源碼技術，包括由W3C和WHATWG進行監控和批准，監督和實施增加。

趨勢可以發現，不僅在看在時尚領域的使用的技術，如網站和匹配的標誌是清晰的喜好確定。著名的藝術字Web 2.0至今的重要作用的幫助。

網頁設計是一個不斷更新換代、推陳出新的行業，它要求設計師們必須隨時把握最新的設計趨勢，從而確保自己不被這個行業所淘汰。2013年，網頁設計主要流行響應式設計、扁平化設計、無限滾動、單頁、固定標頭、大膽的顏色、更少的按鈕和更大的網頁寬度。

網頁內容的選擇要不落俗套，要重點突出一個“新”字，這個原則要求在設計網站內容時不能照抄別人的內容，要結合自身的實際情況創作出一個網站。 放眼望去，網上的許多個人主頁簡直就是"雜貨店"，內容包羅萬象,題材千篇一律，人人都是"軟件下載",個個都有"網絡導航"，從頭到尾找不出一絲“鮮”意。在設計網頁時，要把功夫下在選材上。

因為網頁製作是一時的，而維護更新的工作是每天都要做的。要及時把網頁上已經作廢的連接應該立即刪除掉，比如用户無意中點擊了頁面中的一個連接，在苦苦的等待之後，換來的是無法訪問的結果，那麼他們會對網頁大失所望，可能以後再也不會光顧網頁了。若不能及時更新，也最好在主頁上發佈信息，告訴前來訪問的朋友，因有特殊情況需要離開一段時間，未能及時更新主頁，希望各位見諒，這樣就能給人一種對別人負責的感覺，同時能得到網友的信任。

設計Web頁面時，一定要用合適的分辨率來分別觀察。許多瀏覽器使用1024*768的分辨率，儘管在1280*1024高分辨率下一 些Web頁面看上去很具吸引力，但在1024*768的模式下可能會黯然失色。作一點小小的努力，設計一個在不同分辨率下都能正常顯示的網頁。

時刻注意網站的運行狀況。性能很好的主機隨着訪問人數的增加，可能會運行緩慢。但是，如果不想失去訪問者的話，一定要仔細計劃好升級計劃。

不要把一個網站的內容象作報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出網站重點突出，結構分明。

為了成功地設計網站，必須理解HTML（標準通用標記語言下的一個應用）是如何工作的。大多數的網站設計者建議網絡新手應從有關HTML的書中去尋找答案，用Notepad製作網頁。因為用HTML設計網站，可以控制設計的整個過程。但是，如果僅僅是網站設計的新手，應該尋找一個允許修改HTML的軟件包。

一個簡單明瞭的網站介紹，不僅能讓別人對網站能夠提供些什麼有個瞭解，引發共鳴或是表達誠意，常常最能打動讀者，而且還能使訪問者能快速找到想要的東西。但是，許多設計者都沒有這樣做。有效的導航條和搜索工具使人們很容易找到有用的信息，這對訪問者很重要。告訴訪問者所提供的正是他們想要的信息。

但是仍然需要考慮到Netscape以及Opera這些瀏覽器用户。設計風格的考慮，如色彩的搭配，圖形、線條的使用等等。要時刻為用户着想，必須最少在幾種不同類型的瀏覽器下測試網站，看看兼容性如何。

網頁上所有的圖像、文字，包括像背景顏色、區分線、字體、標題、註腳什麼的，要統一風格，貫穿全站。這樣子讀者看起來舒服、順暢，會對留下一個“很專業”的印象。

一個靜態網頁始終給人一種呆板的感覺，缺少一種活力和生氣。最好在網站上提供一些回答問題的工具以及其他具有交互性能的設計，使得訪問者能從網站上獲得交互的信息，從而使訪問者有一種參與網絡建設的新鮮感和成就感。 ^[2] 

網頁可以説是網站構成的基本元素。當輕點鼠標，在網海中遨遊，一副副精彩的網頁會呈現在面前，那麼，網頁的精彩與否的因素是什麼呢？色彩的搭配、文字的變化、圖片的處理等，這些當然是不可忽略的因素，除了這些，還有一個非常重要的因素——網頁的佈局。下面，就有關網頁佈局談論一下。

也可以稱為“同”字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯繫方式、版權聲明等。這種結構是在網上見到的差不多最多的一種結構類型。

這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。

這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或註冊頁面等就是這種類。

這種類型基本上是出一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分是企業網站和個人主頁，如果説處理的好，會給人帶來賞心悦目的感覺。

所謂“T”結構佈局，就是指網頁上邊和左邊相結合，頁面頂部為橫條網站標誌和廣告條，左下方為主菜單，右面顯示內容，這是網頁設計中用得最廣泛的一種佈局方式。在實際設計中還可以改變“T”結構佈局的形式，如左右兩欄式佈局，一半是正文，另一半是形象的圖片、導航。或正文不等兩欄式佈置，通過背景色區分，分別放置圖片和文字等。

這樣的佈局有其固有的優點，因為人的注意力主要在右下角，所以企業想要發佈給用户的信，大都能被用户以最大可能性獲取，而且很方便，其次是頁面結構清晰，主次分明、易於使用。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人“看之無味”。

這是一個形象的説法，指頁面上下各有一個廣告條，左邊是主菜單，右邊是友情鏈接等，中間是主要內容。

這種佈局的優點是頁面充實、內容豐富、信息量大，是綜合性網站常用的版式，特別之處是頂部中央的一排小圖標起到了活躍氣氛的作用。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站使用多幀形式，只有頁面中央部分可以滾動，界面類似遊戲界面。使用此類版式的有多維遊戲娛樂性網站。

這種佈局多用於國外網站，國內用得不多。其特點是頁面上橫向兩條色塊，將頁面整體分割為4個部分，色塊中大多放廣告條。

顧名思義，它指採取左右或者上下對稱的佈局，一半深色，一半淺色，一般用於設計型網站。其優點是視覺衝擊力強，缺點是將兩部分有機地結合比較困難。

POP源自廣告術語，指頁面佈局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用於時尚類網站，優點顯而易見：漂亮吸引人，缺點是速度慢。 ^[1] 

1、沒有遵循網頁設計基本原則

在移動終端網頁設計環節要積極體現精簡原則，在頁面設計中要儘量做到重點突出、精簡，這樣的設計才能更好的滿足用户的個性化要求，提升網頁瀏覽的便捷性和畫面感，給用户帶來不同的視覺體驗。然而，當前在移動終端網頁設計的過程中相關人員沒有嚴格按照標準流程進行設計，設計重點不突出，不夠精簡，手機屏幕尺寸偏大，這給用户造成了諸多不便，網頁瀏覽起來不方便，網頁相應內容不夠簡明扼要。

2、自動彈窗設計不夠合理

用户在網頁瀏覽的過程中，網頁自動彈窗，用户等待時間過長，從而導致了流量消耗過多，這使得用户的滿意度降低，不利於移動終端網頁設計工作的更好發展。

3、對目標終端屏幕特徵掌握不夠

在移動終端網頁設計的過程中相關人員一定要積極瞭解目標終端屏幕特徵。然而在實際工作中，設計人員卻沒有做到這點，對目標終端屏幕特徵的瞭解不夠，頁面渲染效果受到瀏覽器像素寬度的影響。多數用户都經常使用豎屏手機，而平板電腦是橫屏使用的，因此，實際設計中由於沒有考慮到這點，導致了用户頁面的渲染效果受到了一定影響，對分辨率範圍的劃分不夠合理，沒有考慮到移動終端不同，相應的屏幕分辨率就會不同。 ^[3]