不管是從事網站建設哪一個步驟的人，都會希望自己做出來的網站是可以從互聯網上脫穎而出的。網站設計師希望(wang)自(zi)(zi)己設計的(de)(de)(de)(de)東西是(shi)可以得(de)到(dao)用(yong)(yong)(yong)戶(hu)(hu)(hu)的(de)(de)(de)(de)肯定(ding)的(de)(de)(de)(de)，是(shi)受到(dao)用(yong)(yong)(yong)戶(hu)(hu)(hu)歡迎的(de)(de)(de)(de)，是(shi)可以成為一個讓自(zi)(zi)己驕傲的(de)(de)(de)(de)作(zuo)(zuo)品；而(er)后端開(kai)發人員，則是(shi)希望(wang)自(zi)(zi)己做(zuo)出(chu)來的(de)(de)(de)(de)功能是(shi)符合用(yong)(yong)(yong)戶(hu)(hu)(hu)需求(qiu)的(de)(de)(de)(de)，是(shi)能滿足用(yong)(yong)(yong)戶(hu)(hu)(hu)操作(zuo)(zuo)的(de)(de)(de)(de)。

所有(you)人都喜歡它能(neng)成功，所以在互聯(lian)網上(shang)讓(rang)網站脫穎而出的文章(zhang)有(you)很多。但(dan)是，他們大部(bu)分都是僅(jin)僅(jin)的探討了一下趨(qu)(qu)勢(shi)(shi)，或者(zhe)是拿出了某(mou)部(bu)分東(dong)西講一下。然后，一個(ge)成功的網站絕對不是單個(ge)趨(qu)(qu)勢(shi)(shi)或者(zhe)某(mou)個(ge)技巧(qiao)就能(neng)早就的。

對于廣大網站設計師來(lai)說，為什么(me)(me)自(zi)己看(kan)了那么(me)(me)多的(de)趨勢(shi)，看(kan)了那么(me)(me)多的(de)技巧，自(zi)己設計(ji)出(chu)來(lai)的(de)東西(xi)，還(huan)是(shi)那么(me)(me)的(de)平庸呢？究竟(jing)自(zi)己要(yao)怎樣(yang)做才(cai)能讓(rang)這個網站別(bie)具特色呢？其實，有時候我們不(bu)必這么(me)(me)的(de)執著，有時候原創不(bu)一定(ding)是(shi)好的(de)，也許(xu)你現在設計(ji)出(chu)來(lai)的(de)東西(xi)更是(shi)當下(xia)用戶(hu)的(de)需求(qiu)也是(shi)說不(bu)定(ding)的(de)。

但是(shi)，好設計(ji)的(de)呈現形態很多，能(neng)夠(gou)脫(tuo)穎(ying)而出(chu)的(de)設計(ji)，你其實也能(neng)做到(dao)。你需要(yao)堅(jian)持(chi)不(bu)懈地(di)嘗試原創，至少是(shi)尋(xun)求原創的(de)感(gan)覺，精心(xin)的(de)規(gui)劃(hua)，并且(qie)不(bu)斷地(di)努力。想要(yao)打磨出(chu)與眾不(bu)同的(de)優秀網站，你可以從(cong)下面5個維度入手，精心(xin)打磨。

1、布局與結構

當(dang)用戶進入(ru)一(yi)(yi)個(ge)(ge)網(wang)(wang)(wang)站(zhan)時(shi)，首先(xian)會(hui)吸引他的(de)(de)，就(jiu)是(shi)網(wang)(wang)(wang)站(zhan)的(de)(de)布(bu)(bu)局和(he)結構。所以，對于一(yi)(yi)個(ge)(ge)網(wang)(wang)(wang)站(zhan)來(lai)說(shuo)，想要區分它和(he)其他網(wang)(wang)(wang)站(zhan)的(de)(de)不(bu)(bu)同，布(bu)(bu)局和(he)結構就(jiu)是(shi)最(zui)明顯的(de)(de)手(shou)段(duan)之(zhi)一(yi)(yi)。從(cong)專(zhuan)業的(de)(de)角度來(lai)說(shuo)說(shuo)，當(dang)前沒(mei)有哪個(ge)(ge)排(pai)版時(shi)沒(mei)有人用過的(de)(de)，我(wo)(wo)(wo)們(men)基本是(shi)找不(bu)(bu)到一(yi)(yi)個(ge)(ge)沒(mei)有人用過的(de)(de)排(pai)版。但是(shi)，設計排(pai)版卻是(shi)一(yi)(yi)件(jian)比(bi)較(jiao)有趣的(de)(de)事情，同時(shi)也是(shi)一(yi)(yi)件(jian)比(bi)較(jiao)能(neng)磨煉人的(de)(de)創造力的(de)(de)事情。但是(shi)我(wo)(wo)(wo)們(men)創建出(chu)很(hen)多個(ge)(ge)網(wang)(wang)(wang)頁(ye)(ye)布(bu)(bu)局之(zhi)后，我(wo)(wo)(wo)們(men)就(jiu)會(hui)發(fa)現，我(wo)(wo)(wo)們(men)的(de)(de)網(wang)(wang)(wang)頁(ye)(ye)排(pai)版布(bu)(bu)局已經和(he)以前很(hen)不(bu)(bu)一(yi)(yi)樣了(le)。當(dang)然，這個(ge)(ge)時(shi)候拿出(chu)來(lai)的(de)(de)排(pai)版布(bu)(bu)局，可(ke)能(neng)會(hui)讓前端感覺到頭痛。

另外一方面，在這個過程中我們會(hui)(hui)(hui)會(hui)(hui)(hui)同開發慢慢磨合，也會(hui)(hui)(hui)更加了(le)解哪些地方是(shi)用(yong)戶(hu)的痛點，明白(bai)信(xin)息(xi)架構要如何搭建。通過了(le)解，在做排版設計的時(shi)候，會(hui)(hui)(hui)更加清(qing)楚如何確保(bao)網頁的可(ke)用(yong)性和可(ke)訪問性。獨特而又(you)繁復的網頁布(bu)局(ju)很大程度(du)上會(hui)(hui)(hui)依(yi)賴Javascript 等技術，但是(shi)理(li)想(xiang)狀(zhuang)況(kuang)下的布(bu)局(ju)最好是(shi)不要這樣(yang)，否則調整(zheng)和修(xiu)改的成本會(hui)(hui)(hui)非常高(gao)昂。

2、品牌

品牌一直都(dou)是(shi)提高(gao)網站知名度的(de)(de)(de)(de)一個重要東西(xi)，也是(shi)突出網站的(de)(de)(de)(de)一個重要手段。通過強化(hua)品牌設計，是(shi)可以提升網站氣質和獨(du)特性的(de)(de)(de)(de)。如果你的(de)(de)(de)(de)客戶(hu)有著系統(tong)的(de)(de)(de)(de)品牌風格指(zhi)南(nan)，那(nei)么你所需要做的(de)(de)(de)(de)就是(shi)遵(zun)循(xun)它，按(an)照其中的(de)(de)(de)(de)指(zhi)引來進(jin)行(xing)設計，擁抱你客戶(hu)的(de)(de)(de)(de)品牌風格和用(yong)色。合(he)理的(de)(de)(de)(de)運用(yong)加上適當的(de)(de)(de)(de)優化(hua)，這(zhe)并不(bu)是(shi)一件太難的(de)(de)(de)(de)事情(qing)。

不過(guo)，想要(yao)通過(guo)強化(hua)品(pin)(pin)牌(pai)設計來(lai)得到這個效果(guo)的(de)(de)話，首先必(bi)須要(yao)保重(zhong)我(wo)們的(de)(de)客戶的(de)(de)品(pin)(pin)牌(pai)原創性和特(te)色要(yao)很明顯(xian)。如(ru)果(guo)他們的(de)(de)LOGO字體用的(de)(de)是Helvetica，色彩也(ye)沒有很獨(du)特(te)，甚至還不夠漂(piao)亮，那(nei)么這個情況(kuang)就比較尷尬了，在這種局(ju)面下做品(pin)(pin)牌(pai)風格化(hua)的(de)(de)網頁設計，并不會有啥好效果(guo)。

3、圖形和圖片

如果(guo)強化(hua)品(pin)牌設(she)(she)計(ji)都不能(neng)(neng)支撐(cheng)我們來(lai)設(she)(she)計(ji)網頁(ye)的(de)話，那么我們就需要通過獨(du)特的(de)圖(tu)形(xing)和圖(tu)片(pian)(pian)來(lai)支撐(cheng)整個網站的(de)視覺(jue)設(she)(she)計(ji)了。人(ren)，是一(yi)個視覺(jue)動物，通常會對一(yi)些善(shan)用高(gao)清大(da)圖(tu)的(de)網站比較感興趣。視覺(jue)刺激在很多時候能(neng)(neng)夠轉換甚至強化(hua)情感聯系，而(er)圖(tu)片(pian)(pian)和圖(tu)形(xing)在風(feng)格的(de)選取(qu)上，也有著近乎(hu)無限(xian)的(de)可能(neng)(neng)，這使得設(she)(she)計(ji)師可以通過它(ta)更好地傳遞情緒和情感。

不過，要知道一(yi)張(zhang)好的(de)(de)，高清的(de)(de)大圖(tu)可不便(bian)宜啊(a)。當然，我們也可以(yi)(yi)使用(yong)(yong)商用(yong)(yong)圖(tu)庫里面的(de)(de)圖(tu)片。但是，要記住，你懂得用(yong)(yong)這張(zhang)圖(tu)，別人也是可以(yi)(yi)的(de)(de)。這就在很(hen)大程(cheng)度上磨平了自己和其他設計(ji)師之間(jian)的(de)(de)差異了。

4、文案和內容

在文(wen)案和(he)(he)內(nei)容上和(he)(he)其他(ta)的(de)(de)網站區分開來，這件事(shi)很重要，但(dan)是同時也(ye)可能(neng)是拉開距離最艱難(nan)的(de)(de)方(fang)式(shi)。網站應該能(neng)夠反映(ying)出公司或者品牌的(de)(de)個性和(he)(he)文(wen)化，而這些東西通常是通過文(wen)案和(he)(he)內(nei)容來呈(cheng)現(xian)，從Banner 的(de)(de)標題到圖標和(he)(he)按(an)鈕上的(de)(de)微文(wen)案都應該凸(tu)顯這些內(nei)容。

不過，想要做到這一(yi)點，也就意味著(zhu)(zhu)你需(xu)要同客戶進行深入的溝通和協作了。你要讓文案擁有(you)(you)(you)相應的氣質(zhi)(zhi)，擁有(you)(you)(you)人應該有(you)(you)(you)的語氣和氣質(zhi)(zhi)，而這也是最難的地方。絕(jue)大多數的營(ying)銷文案都有(you)(you)(you)著(zhu)(zhu)非常明確(que)的語調和感覺。

我之前曾經為網站設計過(guo)全部的(de)(de)文(wen)案和內容，用戶在Banner和輪播圖這樣(yang)的(de)(de)地(di)方期望能看(kan)到(dao)推(tui)(tui)薦甚至推(tui)(tui)銷產品的(de)(de)文(wen)案，而在網站(zhan)其(qi)他的(de)(de)地(di)方諸如設置、導航中又不喜歡被當作客戶——他們更期望文(wen)案能像是人和人之間的(de)(de)溝通一樣(yang)自然。這樣(yang)的(de)(de)設計往(wang)往(wang)能讓網站(zhan)脫(tuo)穎而出(chu)。

5、動效

這(zhe)些年，動(dong)效(xiao)(xiao)這(zhe)個(ge)東西在設計圈(quan)是變(bian)得(de)越來越種重要了(le)(le)。但是，這(zhe)種變(bian)化并不是不無道理的。通(tong)過(guo)(guo)一(yi)個(ge)優秀(xiu)的動(dong)效(xiao)(xiao)，可以(yi)讓網(wang)站的體驗變(bian)得(de)更(geng)優秀(xiu)，也讓人(ren)(ren)更(geng)加(jia)難以(yi)忘懷(huai)。從動(dong)畫片誕生一(yi)直到動(dong)效(xiao)(xiao)大規模地運用(yong)在網(wang)頁設計中，整整間隔了(le)(le)一(yi)個(ge)世紀之久。在網(wang)頁剛剛誕生的年代就有人(ren)(ren)嘗試過(guo)(guo)在網(wang)頁中運用(yong)動(dong)效(xiao)(xiao)，但是效(xiao)(xiao)果之粗糙簡直令人(ren)(ren)發指。

隨著技術(shu)的(de)(de)(de)進步，動(dong)效設計可(ke)謂是變得越來越成(cheng)熟了。但是，真(zhen)正好(hao)的(de)(de)(de)動(dong)效還是不多的(de)(de)(de)。

我在最后才提及動效，原因并不復雜：動效確實很好用，但是好動效并不容易獲得。我的意思是，動效的設計和制作成本確實在逐步降低，但是濫用而導致的可用性和體驗上的問題，同樣很多。缺少動效，我們會覺得過渡生硬，而動效做的太過明顯（比如彈跳），用戶又會覺得鬧心。而且，在網站上使用太多的動效，是會影響到網站打開速度的，是比較影響用戶體驗的(de)。所以，盡可能讓動(dong)效微妙(miao)，才是關鍵。

結語

現在你回頭看看那些設計得比較優秀的網站，他們的設計師也只是運用了上述降到的策略中的一種，甚至有的設計師在5個方面都做的非常的突出。不過，作為一個網站設計師(shi)，我(wo)(wo)們(men)應(ying)(ying)該懂得(de)輕重(zhong)緩急(ji)，有(you)策略有(you)偏向地(di)制(zhi)定設計(ji)(ji)策略。搞清楚自(zi)己的(de)優勢在哪里，是(shi)視覺設計(ji)(ji)還(huan)是(shi)信息架構(gou)，是(shi)品牌優化，還(huan)是(shi)動(dong)效設計(ji)(ji)，圍繞著我(wo)(wo)們(men)最得(de)心應(ying)(ying)手(shou)的(de)部分來推(tui)進整個設計(ji)(ji)。最后，當我(wo)(wo)們(men)在創造某(mou)些全(quan)新的(de)東西的(de)時候，我(wo)(wo)們(men)應(ying)(ying)該學會(hui)享受這(zhe)個過程。