在上海網站建設過(guo)程(cheng)中，我們經(jing)常遇到(dao)客(ke)戶提出的，我要設(she)計一個簡(jian)(jian)潔大氣的網(wang)站(zhan)。但簡(jian)(jian)潔大氣的網(wang)站(zhan)，怎么(me)設(she)計？我們今天就是來討論這(zhe)個問(wen)題。

        簡潔并不等于極簡主義，上海網絡公司在保持(chi)網(wang)站(zhan)簡潔的(de)外觀的(de)同(tong)時，輔以其它(ta)元素(su)的(de)使用，同(tong)樣能夠達到要求(qiu)。那(nei)如(ru)何(he)做到這(zhe)一點呢？通(tong)過本(ben)文你能從(cong)中學到一些經驗。本(ben)文作(zuo)者邁克·埃文斯（Michael Evans）是一位(wei)熱情(qing)的(de)博(bo)客寫手。他擅長Photoshop，貢獻了多篇網(wang)頁設計和(he)開發(fa)的(de)教程(cheng)，并且受到了讀者們(men)的(de)喜愛。

站長之家（CHINAZ.com）4月16日編譯：潔凈和一(yi)塵不(bu)染之(zhi)(zhi)間(jian)是不(bu)能(neng)劃等(deng)號的(de)。去(qu)掉(diao)了(le)多余內容的(de)設(she)計(ji)看起(qi)來(lai)(lai)外形美(mei)觀，一(yi)目了(le)然，讓人心(xin)曠神怡(yi)，尤其是對網(wang)(wang)頁設(she)計(ji)領(ling)域更甚。設(she)計(ji)師(shi)在(zai)(zai)網(wang)(wang)站(zhan)設(she)計(ji)過(guo)程中(zhong)，時常會遇到(dao)過(guo)度(du)設(she)計(ji)的(de)例(li)子。保(bao)持(chi)(chi)審(shen)美(mei)需(xu)(xu)求(qiu)和實際需(xu)(xu)求(qiu)之(zhi)(zhi)間(jian)的(de)平衡，對整(zheng)潔，干(gan)凈和條理清晰的(de)網(wang)(wang)站(zhan)來(lai)(lai)說很重要。在(zai)(zai)激烈的(de)行業(ye)競爭中(zhong)，網(wang)(wang)頁設(she)計(ji)師(shi)想要獲得成功，先決條件(jian)之(zhi)(zhi)一(yi)就是要掌握簡潔的(de)網(wang)(wang)站(zhan)設(she)計(ji)基礎。在(zai)(zai)網(wang)(wang)站(zhan)設(she)計(ji)中(zhong)，并沒有保(bao)密規定，但(dan)相關的(de)從(cong)業(ye)人員仍(reng)需(xu)(xu)堅持(chi)(chi)一(yi)些基本原則：用(yong)外觀專業(ye)，整(zheng)潔的(de)網(wang)(wang)站(zhan)設(she)計(ji)來(lai)(lai)打動用(yong)戶。

但(dan)是(shi)(shi)(shi)，簡(jian)潔(jie)的(de)(de)(de)(de)(de)網(wang)(wang)頁(ye)設(she)(she)計并不(bu)(bu)就等同于(yu)我們在(zai)網(wang)(wang)頁(ye)設(she)(she)計中所強調的(de)(de)(de)(de)(de)極(ji)簡(jian)主義。簡(jian)潔(jie)的(de)(de)(de)(de)(de)網(wang)(wang)頁(ye)設(she)(she)計可能(neng)(neng)使用了多(duo)種元(yuan)素來(lai)襯托網(wang)(wang)站(zhan)(zhan)內(nei)容，但(dan)依然還(huan)能(neng)(neng)保持整潔(jie)有(you)序的(de)(de)(de)(de)(de)外(wai)觀。不(bu)(bu)過，極(ji)簡(jian)網(wang)(wang)站(zhan)(zhan)設(she)(she)計是(shi)(shi)(shi)以內(nei)容為核心，多(duo)余(yu)的(de)(de)(de)(de)(de)東西統(tong)統(tong)扔(reng)掉。而(er)簡(jian)潔(jie)網(wang)(wang)頁(ye)設(she)(she)計則使用了創意和美學元(yuan)素，在(zai)一(yi)定程度上，這是(shi)(shi)(shi)可行的(de)(de)(de)(de)(de)。也(ye)就是(shi)(shi)(shi)說，網(wang)(wang)頁(ye)設(she)(she)計師所追求的(de)(de)(de)(de)(de)擁有(you)整潔(jie)，專業外(wai)觀的(de)(de)(de)(de)(de)網(wang)(wang)站(zhan)(zhan)應該著重讓所使用的(de)(de)(de)(de)(de)元(yuan)素變得(de)高雅，而(er)不(bu)(bu)是(shi)(shi)(shi)丟棄這些元(yuan)素。但(dan)是(shi)(shi)(shi)，這并非一(yi)蹴(cu)而(er)就，一(yi)個簡(jian)潔(jie)的(de)(de)(de)(de)(de)網(wang)(wang)站(zhan)(zhan)可能(neng)(neng)要(yao)花上數天的(de)(de)(de)(de)(de)艱苦努力(li)才能(neng)(neng)完成。 

選用富有沖擊力的圖片元素

設計(ji)任何(he)網(wang)站類型，恰到好處又吸引眼(yan)球的(de)圖(tu)片總是(shi)非常(chang)(chang)重(zhong)要(yao)的(de)。雖然讀者通常(chang)(chang)只關注(zhu)網(wang)站的(de)內容，但吸引人的(de)相關圖(tu)片也(ye)可以起到對內容補(bu)充的(de)作用(yong)(yong)，同(tong)時也(ye)增添(tian)了美感(gan)。不過(guo)，在網(wang)頁中使用(yong)(yong)圖(tu)片元素(su)時，不管它(ta)是(shi)靜態還是(shi)動(dong)態圖(tu)片，都要(yao)注(zhu)意顏(yan)色的(de)搭配(pei)。顏(yan)色使用(yong)(yong)過(guo)多容易造成視覺(jue)混亂，使用(yong)(yong)單一顏(yan)色往往會產生強烈(lie)的(de)視覺(jue)沖擊。

小心使用頁面空白

毫無疑問，簡潔的網頁(ye)設(she)(she)計(ji)(ji)成功的先決(jue)條件之一(yi)就是(shi)做到整潔有序。設(she)(she)計(ji)(ji)師在網頁(ye)中(zhong)熟練地添加flash動(dong)畫，視(shi)頻(pin)，3D圖形等多種(zhong)(zhong)元(yuan)素(su)的同時，不過(guo)應(ying)盡量避免(mian)過(guo)度使用這(zhe)些(xie)元(yuan)素(su)。如今，大家都經常使用各種(zhong)(zhong)便攜式(shi)設(she)(she)備瀏覽(lan)網頁(ye)，因(yin)此(ci)也應(ying)該充分考慮到移動(dong)網絡(luo)用戶的需求。在網頁(ye)設(she)(she)計(ji)(ji)中(zhong)，應(ying)該小心，準確地處理頁(ye)面的邊距和空(kong)白。但是(shi)，空(kong)白間距過(guo)多會讓(rang)網站失去吸(xi)引力(li)。因(yin)此(ci)維持設(she)(she)計(ji)(ji)過(guo)程中(zhong)的流動(dong)性非常重(zhong)要(yao)，切勿過(guo)度使用。

用“第三只眼”為監管設計細節

任(ren)何與設(she)計(ji)的相(xiang)關(guan)工作，小細節都發揮大作用。網(wang)頁(ye)設(she)計(ji)也不例外(wai)。想要(yao)成功設(she)計(ji)出(chu)簡潔的網(wang)站(zhan)，你需要(yao)“第三只(zhi)眼(yan)”來(lai)監控這些小細節。網(wang)站(zhan)的邊框，投(tou)影，高(gao)光和(he)(he)紋(wen)理等元素容易讓瀏覽(lan)者印(yin)象深刻，但設(she)計(ji)師們往往卻忽(hu)略了(le)這些小細節。在某(mou)些情況(kuang)下，忽(hu)視動畫和(he)(he)圖(tu)(tu)片(pian)的優化問題會影響(xiang)到(dao)網(wang)頁(ye)圖(tu)(tu)像(xiang)質量。為了(le)設(she)計(ji)出(chu)最佳的網(wang)站(zhan)圖(tu)(tu)片(pian)，可在Photoshop中啟用“對(dui)齊到(dao)像(xiang)素”（Snap to Pixels），對(dui)圖(tu)(tu)片(pian)進行適當的優化。網(wang)頁(ye)中內容排版(ban)錯(cuo)亂時(shi)有(you)發生，這會從視覺上降低內容的吸引力，影響(xiang)讀者閱讀。

選用合適的字體

簡潔的網(wang)(wang)頁(ye)設計(ji)成功離不開排版(ban)，排版(ban)應該(gai)獲得和(he)(he)圖片同(tong)樣的重視。雖(sui)然可(ke)供(gong)選擇的字(zi)(zi)體(ti)(ti)很(hen)多，設計(ji)師要(yao)考慮的方(fang)面很(hen)多，比(bi)如說，目(mu)標(biao)客戶和(he)(he)客戶公司的性質(zhi)。為(wei)網(wang)(wang)站(zhan)(zhan)頁(ye)眉和(he)(he)內容選用合適的字(zi)(zi)體(ti)(ti)是必不可(ke)少的，無襯線(xian)字(zi)(zi)體(ti)(ti)（sans serif）和(he)(he)有襯線(xian)（sans serif）字(zi)(zi)體(ti)(ti)通常會為(wei)設計(ji)帶(dai)來良好的效果。除此之外，你(ni)還可(ke)以(yi)結合其它字(zi)(zi)體(ti)(ti)，專(zhuan)為(wei)孩子和(he)(he)女性打造(zao)網(wang)(wang)站(zhan)(zhan)。

為你的網站選擇合適的配色方案

任何網(wang)站的(de)(de)設計都離不了合適的(de)(de)配色(se)(se)方(fang)案，這(zhe)對(dui)創建一個(ge)(ge)整潔干(gan)凈(jing)的(de)(de)網(wang)站同樣適用(yong)(yong)(yong)。堅持使(shi)(shi)用(yong)(yong)(yong)淡(dan)色(se)(se)和(he)非(fei)彩色(se)(se)的(de)(de)投(tou)影(ying)對(dui)成功(gong)設計一個(ge)(ge)簡潔網(wang)站大有裨益。淺色(se)(se)的(de)(de)投(tou)影(ying)可以幫助用(yong)(yong)(yong)戶(hu)把(ba)焦點(dian)轉向(xiang)網(wang)站內容。標志使(shi)(shi)用(yong)(yong)(yong)黑色(se)(se)和(he)較深(shen)的(de)(de)投(tou)影(ying)，網(wang)頁中的(de)(de)頁眉和(he)導(dao)航(hang)元素使(shi)(shi)用(yong)(yong)(yong)淺色(se)(se)背景(jing)，這(zhe)些(xie)都是不錯的(de)(de)案例，并沒有規(gui)定(ding)在簡潔網(wang)頁設計中不能(neng)使(shi)(shi)用(yong)(yong)(yong)大膽的(de)(de)顏色(se)(se)，但是這(zhe)樣的(de)(de)顏色(se)(se)要(yao)(yao)(yao)小(xiao)心，克制地使(shi)(shi)用(yong)(yong)(yong)。有時候，網(wang)站有必(bi)要(yao)(yao)(yao)使(shi)(shi)用(yong)(yong)(yong)深(shen)色(se)(se)背景(jing)色(se)(se)來(lai)吸(xi)引(yin)某些(xie)目標用(yong)(yong)(yong)戶(hu)。比起(qi)漸變(bian)色(se)(se)，有些(xie)網(wang)站更鐘愛純(chun)色(se)(se)。如果(guo)你的(de)(de)網(wang)站非(fei)得(de)要(yao)(yao)(yao)使(shi)(shi)用(yong)(yong)(yong)紋理和(he)漸變(bian)色(se)(se)，也(ye)不要(yao)(yao)(yao)用(yong)(yong)(yong)得(de)太過(guo)火。

導航欄與可用性

你對網站(zhan)設(she)計滿意時，認為一(yi)切都趨于(yu)完(wan)美，這時，你可(ke)以通過實際(ji)試(shi)用來測試(shi)它(ta)的使(shi)用性(xing)。不妨站(zhan)在(zai)局外人的角度，客觀地對網站(zhan)作出評(ping)價。在(zai)網站(zhan)發布之前，你可(ke)以詢問(wen)(wen)一(yi)下跟網站(zhan)設(she)計無(wu)關的人的看法。保持網站(zhan)導(dao)航的直觀性(xing)，避(bi)免使(shi)用的導(dao)航元素讓初次訪(fang)問(wen)(wen)者和技(ji)術新手產生(sheng)挫敗感。