怎樣使你的(de)網頁設計出彩？

作者：龍 時(shí)間：2018-07-30 浏覽：

幾乎每個(gè)參與網站建設的(de)人(rén)，都希望自己的(de)網站能夠在激烈的(de)競争中脫穎而出。設計師希望它效果拔群，成爲自己作品集中令自己驕傲的(de)存在；客戶希望它廣受歡迎，在用(yòng)戶和(hé)潛在用(yòng)戶心理(lǐ)紮下(xià)根；後端開發也(yě)同樣希望這(zhè)個(gè)網站能夠成功，這(zhè)樣他(tā)也(yě)能爲自己的(de)職業生涯加上濃墨重彩的(de)一筆。

所有人(rén)都是如此的(de)希望它能成功。而關于如何讓網站脫穎而出的(de)文章(zhāng)是如此之多(duō)，但是它們大(dà)多(duō)僅僅探討(tǎo)趨勢，或者僅僅拿出單一技巧作爲討(tǎo)論核心。成功的(de)設計案例從來(lái)都不是單個(gè)趨勢或者技巧可(kě)以造就的(de)。

對(duì)于廣大(dà)設計師而言，看了(le)那麽多(duō)的(de)技巧和(hé)趨勢，自己的(de)設計依然平庸，上線的(de)網站也(yě)依然大(dà)衆。靈感到底從何而來(lái)？創意到底在哪裏？Well，有的(de)時(shí)候過度執著(zhe)于原創并不一定是好事，也(yě)許你現在的(de)設計也(yě)更符合實際需求也(yě)說不定。

但是，好設計的(de)呈現形态很多(duō)，能夠脫穎而出的(de)設計，你其實也(yě)能做(zuò)到。你需要堅持不懈地嘗試原創，至少是尋求原創的(de)感覺，精心的(de)規劃，并且不斷地努力。想要打磨出與衆不同的(de)優秀網站，你可(kě)以從下(xià)面5個(gè)維度入手，精心打磨。這(zhè)篇文章(zhāng)當中不會展現一堆堆的(de)實際案例，因爲你的(de)目标不是複制，而是創造。

1、布局與結構

優秀的(de)排版布局是将自己網站和(hé)其他(tā)網站區(qū)分(fēn)開來(lái)的(de)最明(míng)顯手段之一，而它的(de)難度也(yě)是最高(gāo)的(de)。從專業的(de)角度上來(lái)說，沒有一個(gè)排版布局是沒人(rén)用(yòng)過的(de)，你幾乎不可(kě)能再找出一個(gè)别人(rén)沒用(yòng)過的(de)布局。但是，設計排版本身是一件非常有趣，也(yě)能夠磨練你的(de)創造力的(de)事情。在你創建出第52個(gè)網頁布局之後，也(yě)許你的(de)網頁排版布局能力已經和(hé)之前截然不同了(le)，當然，也(yě)有可(kě)能你這(zhè)個(gè)時(shí)候拿出來(lái)的(de)布局方案已經可(kě)以讓前端頭疼不已了(le)。

另外一方面，你在這(zhè)個(gè)過程中會同開發慢(màn)慢(màn)磨合，也(yě)會更加了(le)解哪些地方是用(yòng)戶的(de)痛點，明(míng)白信息架構要如何搭建，這(zhè)樣你才會在排版設計的(de)時(shí)候，越來(lái)越清楚如何确保可(kě)用(yòng)性和(hé)可(kě)訪問性。獨特而又繁複的(de)網頁布局很大(dà)程度上會依賴Javascript 等技術，但是理(lǐ)想狀況下(xià)的(de)布局最好是不要這(zhè)樣，否則調整和(hé)修改的(de)成本會非常高(gāo)昂。

2、品牌

強化(huà)品牌設計是提升網站氣質和(hé)獨特性的(de)有效手段。如果你的(de)客戶有著(zhe)系統的(de)品牌風格指南(nán)，那麽你所需要做(zuò)的(de)就是遵循它，按照(zhào)其中的(de)指引來(lái)進行設計，擁抱你客戶的(de)品牌風格和(hé)用(yòng)色。合理(lǐ)的(de)運用(yòng)加上适當的(de)優化(huà)，這(zhè)并不是一件太難的(de)事情。

不過，強化(huà)品牌設計能夠帶來(lái)好效果的(de)前提也(yě)很重要：你的(de)客戶的(de)品牌原創性和(hé)特色要足夠明(míng)顯。如果他(tā)們的(de)LOGO字體用(yòng)的(de)是Helvetica，色彩也(yě)沒有很獨特，甚至還(hái)不夠漂亮，那麽這(zhè)個(gè)情況就比較尴尬了(le)，在這(zhè)種局面下(xià)做(zuò)品牌風格化(huà)的(de)網頁設計，并不會有啥好效果。

3、圖形和(hé)圖片

如果品牌化(huà)設計并不足以支撐你要設計的(de)網頁，那麽你需要使用(yòng)獨特的(de)圖片和(hé)圖形來(lái)支撐你的(de)整個(gè)視覺設計了(le)。人(rén)是視覺動物(wù)，這(zhè)也(yě)能夠解釋爲什(shén)麽那些善用(yòng)高(gāo)清大(dà)圖的(de)網站，常常擁有良好的(de)轉化(huà)率。視覺刺激在很多(duō)時(shí)候能夠轉換甚至強化(huà)情感聯系，而圖片和(hé)圖形在風格的(de)選取上，也(yě)有著(zhe)近乎無限的(de)可(kě)能，這(zhè)使得(de)設計師可(kě)以通(tōng)過它更好地傳遞情緒和(hé)情感。

不過，好的(de)圖片往往不便宜，高(gāo)素質的(de)圖片素材大(dà)多(duō)是精心定制的(de)，使用(yòng)商用(yòng)圖庫的(de)問題在于，别人(rén)也(yě)能購(gòu)買使用(yòng)，這(zhè)在很大(dà)程度上抹平了(le)你和(hé)其他(tā)設計師之間的(de)差異。

4、文案和(hé)内容

在文案和(hé)内容上和(hé)其他(tā)的(de)網站區(qū)分(fēn)開來(lái)，這(zhè)件事很重要，但是同時(shí)也(yě)可(kě)能是拉開距離最艱難的(de)方式。網站應該能夠反映出公司或者品牌的(de)個(gè)性和(hé)文化(huà)，而這(zhè)些東西通(tōng)常是通(tōng)過文案和(hé)内容來(lái)呈現，從Banner 的(de)标題到圖标和(hé)按鈕上的(de)微文案都應該凸顯這(zhè)些内容。

不過，想要做(zuò)到這(zhè)一點，也(yě)就意味著(zhe)你需要同客戶進行深入的(de)溝通(tōng)和(hé)協作了(le)。你要讓文案擁有相應的(de)氣質，擁有人(rén)應該有的(de)語氣和(hé)氣質，而這(zhè)也(yě)是最難的(de)地方。絕大(dà)多(duō)數的(de)營銷文案都有著(zhe)非常明(míng)确的(de)語調和(hé)感覺。

我之前曾經爲網站設計過全部的(de)文案和(hé)内容，用(yòng)戶在Banner和(hé)輪播圖這(zhè)樣的(de)地方期望能看到推薦甚至推銷産品的(de)文案，而在網站其他(tā)的(de)地方諸如設置、導航中又不喜歡被當作客戶——他(tā)們更期望文案能像是人(rén)和(hé)人(rén)之間的(de)溝通(tōng)一樣自然。這(zhè)樣的(de)設計往往能讓網站脫穎而出。

5、動效

動效在設計圈中越來(lái)越重要了(le)，這(zhè)不是沒有道理(lǐ)的(de)。優秀的(de)動效能夠讓體驗更優秀，更令人(rén)難忘。從動畫(huà)片誕生一直到動效大(dà)規模地運用(yòng)在網頁設計中，整整間隔了(le)一個(gè)世紀之久。在網頁剛剛誕生的(de)年代就有人(rén)嘗試過在網頁中運用(yòng)動效，但是效果之粗糙簡直令人(rén)發指。

今天的(de)動效設計已經逐步成熟，但是真正好的(de)動效依然不多(duō)。我在最後才提及動效，原因并不複雜(zá)：動效确實很好用(yòng)，但是好動效并不容易獲得(de)。我的(de)意思是，動效的(de)設計和(hé)制作成本确實在逐步降低，但是濫用(yòng)而導緻的(de)可(kě)用(yòng)性和(hé)體驗上的(de)問題，同樣很多(duō)。缺少動效，我們會覺得(de)過渡生硬，而動效做(zuò)的(de)太過明(míng)顯（比如彈跳），用(yòng)戶又會覺得(de)鬧心。所以，盡可(kě)能讓動效微妙，才是關鍵。

結語

仔細看看那些設計優秀的(de)網站，你會發現稍有設計師會隻用(yòng)上述策略中的(de)一種，甚至有的(de)設計師在5個(gè)方面都做(zuò)的(de)非常的(de)突出。不過，作爲設計者，你應該懂(dǒng)得(de)輕重緩急，有策略有偏向地制定設計策略。搞清楚自己的(de)優勢在哪裏，是視覺設計還(hái)是信息架構，是品牌優化(huà)，還(hái)是動效設計，圍繞著(zhe)你最得(de)心應手的(de)部分(fēn)來(lái)推進整個(gè)設計。最後，當你在創造某些全新的(de)東西的(de)時(shí)候，享受這(zhè)個(gè)過程。