“網站作(zuo)為(wei)企業的門(men)面，如果使用起來很糟糕，那(nei)憑什么讓客戶(hu)相(xiang)信我們的公司很優秀？”

好網站的定義

相信任何接觸網站業務的人，無論是建站客戶，抑或是網站建設供應商(shang)，都會(hui)在腦海中思(si)考“什么(me)才是好(hao)網站”這個問題。

對于這個問題，不同的人因為經歷經驗不同，會有不一樣的答案。行業外的人員，會說“高端大氣上檔次的就是好網站”；行業內的人員，會說“基于用戶體驗為中(zhong)心的(de)原則而設計的(de)網站才(cai)是好網站”。

很顯然，不(bu)同(tong)的(de)人員對于好(hao)網站(zhan)(zhan)的(de)定(ding)義是不(bu)一(yi)(yi)樣的(de)。即(ji)便如此，我們也不(bu)能忽略一(yi)(yi)個事實，那就是當一(yi)(yi)個優秀(xiu)的(de)站(zhan)(zhan)點呈(cheng)現在人們的(de)眼前時，無(wu)論你是否專業，你都會一(yi)(yi)眼認定(ding)這就是你心目中的(de)好(hao)網站(zhan)(zhan)。

作為一(yi)個(ge)在建站行業摸爬滾(gun)打(da)近十(shi)年的我想說，如(ru)果(guo)一(yi)個(ge)網站呈(cheng)現(xian)出了它的目(mu)標(biao)用戶所需要(yao)的內容又散(san)發出與(yu)之自(zi)身適(shi)合(he)的外觀風格(ge)，那么它就是(shi)一(yi)個(ge)好的網站。

網站建設的五個層次

想告(gao)訴大家一(yi)個確(que)定(ding)的(de)事實(shi)，一(yi)個擁有著絕佳用戶體驗的(de)網(wang)站，事實(shi)上是(shi)由(you)一(yi)系列完整(zheng)的(de)決策組(zu)成的(de)：網(wang)站看起來的(de)樣子如何、它如何運轉、它能讓(rang)你做什(shen)么。

決策(ce)在網站建(jian)設中最(zui)最(zui)重要

這些決(jue)策彼此依賴(lai)，告知并影(ying)響用戶體驗的各個方面。已經被無(wu)數人驗證并認可的決(jue)策依據來(lai)源于五個層(ceng)(ceng)(ceng)面，即戰略層(ceng)(ceng)(ceng)、范(fan)圍層(ceng)(ceng)(ceng)、結構層(ceng)(ceng)(ceng)、框架層(ceng)(ceng)(ceng)和表現層(ceng)(ceng)(ceng)。

五個(ge)層(ceng)(ceng)(ceng)(ceng)面中的每一(yi)個(ge)層(ceng)(ceng)(ceng)(ceng)面都是根據它的前置層(ceng)(ceng)(ceng)(ceng)所決定，即戰略層(ceng)(ceng)(ceng)(ceng)決定了(le)范(fan)圍層(ceng)(ceng)(ceng)(ceng)、范(fan)圍層(ceng)(ceng)(ceng)(ceng)決定了(le)結(jie)構層(ceng)(ceng)(ceng)(ceng)、結(jie)構層(ceng)(ceng)(ceng)(ceng)決定了(le)框架層(ceng)(ceng)(ceng)(ceng)、框架層(ceng)(ceng)(ceng)(ceng)決定了(le)表現層(ceng)(ceng)(ceng)(ceng)。

戰略層

當(dang)一(yi)家(jia)企業(ye)決(jue)定(ding)建設網站的(de)時候，他(ta)們是(shi)帶著一(yi)些(xie)期(qi)許的(de)。同樣的(de)，當(dang)一(yi)個(ge)用(yong)戶去搜索(suo)一(yi)個(ge)網站的(de)時候，他(ta)也是(shi)帶著期(qi)許來瀏覽這個(ge)網站的(de)。

網站建設的基(ji)礎要緊扣企業戰略發展規劃

戰略層的工作就是要回答好以(yi)下的兩個(ge)問題：

1.企業要(yao)通過網(wang)站得(de)到什(shen)么？【這個問題描述了網(wang)站的目標】

2.瀏覽用戶想通(tong)過網站(zhan)得(de)到什(shen)么？【這個問題闡明了用戶的需求(qiu)】

當一個網(wang)站能都清楚地(di)表達(da)企業要展示(shi)的(de)(de)內容，以及確切地(di)知道用(yong)戶想要什么的(de)(de)時候。這個網(wang)站就在(zai)邁向好網(wang)站的(de)(de)路上，完成了至關重要的(de)(de)一步“戰略層(ceng)定義”！

范圍層

當我(wo)們對彼此的(de)期許熟諳于心，我(wo)們就可(ke)以將這些期許通過有(you)(you)計劃地(di)梳理落實到紙面(mian)。網站是由一個(ge)個(ge)的(de)頁(ye)面(mian)構成，每個(ge)頁(ye)面(mian)需(xu)(xu)要展示什么內容，需(xu)(xu)要多(duo)少張(zhang)頁(ye)面(mian)，當你擁有(you)(you)一個(ge)明確的(de)戰略層規劃，那么你就知道這些頁(ye)面(mian)范(fan)圍該如何界定。

界定(ding)范圍是(shi)(shi)一(yi)個有價(jia)值(zhi)的過(guo)程，同(tong)時可以(yi)產生有價(jia)值(zhi)的產品。網站的范圍層(ceng)定(ding)義(yi)，其實(shi)是(shi)(shi)在(zai)做(zuo)兩件事，一(yi)是(shi)(shi)過(guo)程，二是(shi)(shi)產品。

過(guo)程(cheng)(cheng)的價(jia)值在(zai)于，當(dang)網站處于立項初期的時候，我們(men)(men)有非常(chang)多的各種各樣的天馬行空的想(xiang)法，過(guo)程(cheng)(cheng)能(neng)迫使我們(men)(men)去考慮潛在(zai)的沖(chong)突和產品(pin)中粗略的地(di)方，我們(men)(men)能(neng)確定現在(zai)能(neng)解決哪些事(shi)情，而哪些必須(xu)推(tui)遲(chi)解決。

產品的(de)價值在(zai)于，它是一個參考點，可以明確網(wang)站要(yao)完成的(de)全部工作(zuo)。產品的(de)定(ding)義，可以保證(zheng)在(zai)設計過程中不(bu)會出現(xian)模(mo)棱兩可的(de)情況(kuang)，即(ji)便(bian)出現(xian)，也會有(you)一把衡(heng)量的(de)標尺，而不(bu)至于無從下手。

結構層

當一(yi)股腦的(de)內(nei)(nei)容涌入你的(de)腦海，尤其是還(huan)沒有分類的(de)時候，你無(wu)法快速有效地(di)獲取到內(nei)(nei)容的(de)輕(qing)重緩(huan)急，內(nei)(nei)容的(de)表現也(ye)會(hui)大(da)(da)打折扣(kou)，為了百分百還(huan)原甚至加倍放大(da)(da)內(nei)(nei)容的(de)力度(du)，我們需要對內(nei)(nei)容做結構分層。這件(jian)工作并不陌生，你之前聽過(guo)的(de)信(xin)息架構和(he)交互設計正(zheng)是它。

網站建設(she)-交(jiao)互(hu)設(she)計與信息架構

信息架構要求創(chuang)建分(fen)類體系(xi)，這個分(fen)類體系(xi)將會(hui)對應并(bing)符合我(wo)們的(de)網站目標、希望滿足的(de)用(yong)戶需求，以及將被合并(bing)在網站中的(de)內容。

交互設計考慮的(de)是內容呈現的(de)先后，以及內容節點之間的(de)關聯規則。

這(zhe)兩方(fang)面的工作(zuo)都(dou)遵從于正向(xiang)推(tui)理和反(fan)向(xiang)驗(yan)(yan)證(zheng)(zheng)(zheng)的方(fang)法(fa)，即從前至(zhi)后再從后至(zhi)前，通過正向(xiang)和逆向(xiang)的雙重(zhong)推(tui)演去驗(yan)(yan)證(zheng)(zheng)(zheng)一個流程設計(ji)的合(he)理性(xing)。在(zai)推(tui)演的過程中，網站(zhan)目標和用戶需求(qiu)始終以(yi)線索的方(fang)式(shi)鑲嵌在(zai)全生命周期的流轉中，并保證(zheng)(zheng)(zheng)其始終被滿足。

所需都在，所在都有價值，是結構層完美(mei)的真實寫(xie)照。

框架層

框(kuang)架(jia)層的(de)(de)工作，其(qi)實就是布局設計(ji)(ji)的(de)(de)工作，主(zhu)要(yao)體現在(zai)三(san)方面(mian)：導航(hang)設計(ji)(ji)、界面(mian)設計(ji)(ji)、信息設計(ji)(ji)。這些工作的(de)(de)目(mu)的(de)(de)是，讓用戶瀏覽網站時感(gan)覺(jue)更(geng)容易和輕松。

導(dao)(dao)(dao)航(hang)設計，旨(zhi)在(zai)幫助(zhu)人們(men)找(zhao)到想要的東(dong)西。全局(ju)導(dao)(dao)(dao)航(hang)、局(ju)部導(dao)(dao)(dao)航(hang)、輔助(zhu)導(dao)(dao)(dao)航(hang)、上下文(wen)導(dao)(dao)(dao)航(hang)、友好導(dao)(dao)(dao)航(hang)、網站地圖(tu)和索引(yin)表，這些都是導(dao)(dao)(dao)航(hang)設計的存在(zai)形式。

界(jie)面設計，旨在(zai)將雜亂無章的內容有序地歸類和分(fen)層(ceng)。諸(zhu)如圖片(pian)、圖標、視(shi)頻、文本、復(fu)選框(kuang)、單(dan)(dan)選按鈕、下拉菜(cai)單(dan)(dan)、多(duo)選菜(cai)單(dan)(dan)這些元素，該單(dan)(dan)獨呈(cheng)現還是(shi)一(yi)起(qi)上陣，你需要(yao)考慮一(yi)個合(he)理的方案(an)來確定(ding)如何擺(bai)放。期(qi)間還要(yao)統籌兼顧到(dao)視(shi)重(zhong)、平衡和點(dian)線(xian)面的設計原理。

信息(xi)設(she)計，旨在(zai)將(jiang)無序的內容(rong)調(diao)整為有序的內容(rong)。你可(ke)以(yi)用數學(xue)中的合并同(tong)類(lei)項法(fa)則來(lai)理解(jie)這一調(diao)整過(guo)程(cheng)。我們在(zai)呈現(xian)內容(rong)的時(shi)候，可(ke)以(yi)按照樹狀結構來(lai)逐層呈現(xian)。

表現層

表現(xian)層(ceng)處在(zai)五層(ceng)模型的(de)(de)頂端，是用戶進(jin)入(ru)網(wang)站首先就會感(gan)知到的(de)(de)部分。在(zai)這一層(ceng)，內(nei)容(rong)、功能和美學融為一體進(jin)而產生一個最終的(de)(de)設計(ji)，完成其他四(si)層(ceng)的(de)(de)共(gong)同(tong)目標，并(bing)同(tong)時滿足(zu)用戶的(de)(de)感(gan)官感(gan)受，呼應企業的(de)(de)品(pin)牌形(xing)象(xiang)。

柵(zha)格設計原理確保多終端適配的穩定

在這一層，我(wo)們需要(yao)用到不可背離的美(mei)學設(she)計法(fa)則(ze)，需要(yao)用到風(feng)格字體排版等(deng)多種設(she)計手法(fa)，需要(yao)用到赤(chi)橙黃綠和三原色的配(pei)色法(fa)則(ze)。在這一層，視覺設(she)計師(shi)可以讓一件泥(ni)塑搖身一變(bian)成為(wei)萬世景仰的青花瓷，也可以讓一頁宣(xuan)紙經由筆墨的點(dian)染成為(wei)萬古流芳的經典之作。