·LOGO 的“形”

·LOGO 的“色”

（1）LOGO 的“形”

首先，我們可以通過提取 logo 的形狀作為網(wǎng)站視覺設(shè)計(jì)中的「視覺符號(hào)」，也可以參考 VI 手冊(cè)中的「象征圖形」進(jìn)行延展，提取 logo 外形結(jié)構(gòu)做成相應(yīng)的 icon 或是動(dòng)效等是 logo 元素的直觀體現(xiàn)。

舉個(gè)例子，天虹的 logo 是一抹橙色極簡的彩虹形狀，天虹企業(yè)簡介的Banner 以及每個(gè)頁面的底部導(dǎo)航，都有將 Logo 這一特征延展出來的圖形設(shè)計(jì)。

▲天虹官網(wǎng)頁面 Banner 展示（增長超人出品）

▲天虹官網(wǎng)底部展示（增長超人出品）

這種方法需要我們很好地提取 logo 中的部分結(jié)構(gòu) , 或根據(jù)造型轉(zhuǎn)變?yōu)閯?dòng)效、icon 等，這樣在網(wǎng)頁中的融入感十分可觀。

（2）LOGO 的“色”

提取 logo 中的標(biāo)準(zhǔn)色或代表性的顏色與網(wǎng)頁元素相呼應(yīng)，也是一種常見的方式。將 Logo 顏色通過網(wǎng)站中的文字、頁面板式、icon 設(shè)計(jì)表現(xiàn)出來，這是很好的一種呼應(yīng)方法。

比如：綠色是綠革的標(biāo)志性顏色。打開綠革官網(wǎng)，可以清晰直觀地看到綠革將 logo 中的兩種綠色元素，融入到網(wǎng)站界面 UI 中，需要突出的文案也會(huì)運(yùn)用這兩種綠色去做表達(dá)和強(qiáng)調(diào)。

▲ 綠革L(fēng)OGO

▲ 綠革官網(wǎng)首頁展示（增長超人出品）

在網(wǎng)站設(shè)計(jì)中，我們可以將標(biāo)準(zhǔn)色換到標(biāo)題文字、icon、控件。訪客打開網(wǎng)站時(shí)會(huì)很容易被這些顏色吸引，也不會(huì)感到突兀，合理運(yùn)用 logo 顏色，可以統(tǒng)一網(wǎng)站的整體視覺且做到突出重點(diǎn)與更有效地傳達(dá)信息。

1.2 品牌 VI 在網(wǎng)站設(shè)計(jì)的應(yīng)用

品牌 VI 可以在三個(gè)維度應(yīng)用到網(wǎng)站設(shè)計(jì)，來提升網(wǎng)站的辨識(shí)度：

（1）ICON 圖標(biāo)設(shè)計(jì)

品牌 VI 的應(yīng)用常見的方式就是在 icon 圖標(biāo)的設(shè)計(jì)上。icon 作為網(wǎng)站的重點(diǎn)圖形，能夠讓訪客感知品牌，精致的 icon 可以讓表達(dá)更簡單高效，要打造一套精致的 icon，我們可以從識(shí)別性、規(guī)范性、整體性和品牌感四個(gè)方面著手。

識(shí)別性：icon 的作用即是幫助訪客理解網(wǎng)站信息，特別是在沒有文字說明 的情況下，icon 的設(shè)計(jì)需要具備讓訪客快速認(rèn)出的高識(shí)別度，不能讓訪客 產(chǎn)生疑惑。 

規(guī)范性：每個(gè) icon 要保持視覺大小、色彩等一致性，以及圖標(biāo)飽滿度等細(xì) 節(jié)都需遵循同一規(guī)律，例如：繪制風(fēng)格是否一致，使用的圓角或直角是否統(tǒng) 一等等。 

整體性：除了 icon 自身的設(shè)計(jì)之外，整體的設(shè)計(jì)風(fēng)格要與網(wǎng)站基調(diào)達(dá)成一 致，不同網(wǎng)站有不同定位，面向的目標(biāo)訪客群體自然有所差別，那么整個(gè)網(wǎng) 站的 icon 設(shè)計(jì)也不一樣。 

品牌感 : 提升品牌辨識(shí)度離不開品牌感， icon 設(shè)計(jì)要與品牌調(diào)性、理念相 符合，傳達(dá)給訪客一致的感受。比如：提取品牌色、采取品牌圖形作為圖標(biāo)設(shè)計(jì)視覺元素，從而加深訪客對(duì)品牌色的感知。

icon 設(shè)計(jì)中的品牌感是將品牌 VI 應(yīng)用到網(wǎng)站的關(guān)鍵，比如上方的那套icon，是由增長超人根據(jù)英威騰本身的品牌色彩和品牌調(diào)性進(jìn)行設(shè)計(jì)，應(yīng)用于官網(wǎng)是這樣的：

另外，icon 是網(wǎng)站中不可或缺的元素，充當(dāng)路標(biāo)，讓訪客能知道點(diǎn)擊后下一步是什么，也就有明確的心理預(yù)期。如果 icon 按鈕不夠明確，訪客可能會(huì)不知道下一步是要購買產(chǎn)品還是注冊(cè)用戶，并且可能直接瀏覽網(wǎng)站后就直接離開。

（2）版式設(shè)計(jì)

版式如何融入品牌調(diào)性是很多設(shè)計(jì)師會(huì)忽略的一點(diǎn)，訪客來瀏覽網(wǎng)站時(shí)，首先感受到的第一點(diǎn)是色彩，第二則是版式，也就是整體給訪客的感覺。符合品牌定位且具有辨識(shí)度的網(wǎng)頁版式設(shè)計(jì)應(yīng)該怎么做，它更需要從品牌特性中提取，無法像 icon 一樣從品牌 logo 和標(biāo)準(zhǔn)色中提取元素就可以做到的，更多是一個(gè)風(fēng)格化的設(shè)計(jì)。

（3）動(dòng)效設(shè)計(jì)

除了靜態(tài)的圖形設(shè)計(jì)，品牌 VI 也可以融入網(wǎng)站動(dòng)效，利用品牌 LOGO 的設(shè)計(jì)元素和結(jié)構(gòu)進(jìn)行設(shè)計(jì)的動(dòng)效，可以讓整個(gè)網(wǎng)站更有品牌風(fēng)格。一個(gè)好的動(dòng)效能夠滿足網(wǎng)站功能的表達(dá)，強(qiáng)化品牌特質(zhì)，而不是只追求表面炫酷花哨的效果。

▲天虹部分動(dòng)效展示（增長超人出品）

在網(wǎng)站視覺設(shè)計(jì)中，品牌 VI 的應(yīng)用不僅能夠形成區(qū)別于同行的差異化為品牌賦能，還能通過規(guī)范化的 VI 應(yīng)用，提高訪客對(duì)其品牌的信任度。

品牌的基礎(chǔ) VI 設(shè)計(jì)應(yīng)用于網(wǎng)站是我們的常規(guī)操作，但要注意細(xì)節(jié)，別忽視了其作為網(wǎng)站基礎(chǔ)的重要性，對(duì)于網(wǎng)站視覺設(shè)計(jì)，我們?cè)诒ＷC基礎(chǔ)設(shè)計(jì)無誤的情況下，需要深入到思維上，一個(gè)網(wǎng)站的設(shè)計(jì)看似簡單，像是色調(diào)、排版，都是設(shè)計(jì)師的基礎(chǔ)功夫，但是要真正做到一個(gè)優(yōu)質(zhì)的網(wǎng)站，其實(shí)并沒有想象中那么容易。

2.平衡藝術(shù)與商業(yè)的網(wǎng)站設(shè)計(jì)思維

開頭我們有提到：視覺設(shè)計(jì)如何平衡藝術(shù)與商業(yè)？大多數(shù)設(shè)計(jì)師在初入職場時(shí) , 都不具備商業(yè)思維，首先會(huì)經(jīng)歷一段自我懷疑的過程：完成一個(gè)稿件后，反反復(fù)復(fù)被要求改稿，始終無法達(dá)到上級(jí)的要求，個(gè)人價(jià)值開始逐漸模糊，淪為一介改稿工具人。

在我們看來，企業(yè)網(wǎng)站的視覺設(shè)計(jì)必須具備商業(yè)思維，也就是視覺設(shè)計(jì)需要體現(xiàn)其想表達(dá)的商業(yè)價(jià)值。因此，在建設(shè)企業(yè)網(wǎng)站時(shí)，我們需要記住以下幾點(diǎn)。

2.1 不為設(shè)計(jì)而設(shè)計(jì)

不為設(shè)計(jì)而設(shè)計(jì)不是將藝術(shù)“一棒打死”，也并非拋棄創(chuàng)新創(chuàng)意，而是應(yīng)該更注重于強(qiáng)化產(chǎn)品，給滿足需求的產(chǎn)品力加持。市面上有很多花里胡哨的網(wǎng)站，第一眼可能會(huì)驚艷到你，但是再深入瀏覽發(fā)現(xiàn)內(nèi)容很空洞。事實(shí)上，能夠讓訪客長時(shí)間記住你的并非第一眼，而是其內(nèi)在，也是我們一直堅(jiān)持的長期主義價(jià)值。

過于強(qiáng)調(diào)設(shè)計(jì)、藝術(shù)、創(chuàng)意，不僅會(huì)給網(wǎng)站帶來開發(fā)難度，也給訪客瀏覽帶來沉重的負(fù)擔(dān)。

商業(yè)環(huán)境下，視覺設(shè)計(jì)的本質(zhì)應(yīng)該是強(qiáng)化產(chǎn)品，升華價(jià)值，實(shí)際上，設(shè)計(jì)同樣需要具備產(chǎn)品思維。增長超人在建站中已將產(chǎn)品思維全流程化，這種模式下，每一環(huán)都串聯(lián)起來，不管是用戶體驗(yàn)，還是價(jià)值傳遞都非常有利。

產(chǎn)品思維全流程化

設(shè)計(jì)需要理解功能目的，為什么策劃這個(gè)功能？如何通過設(shè)計(jì)讓訪客使用更順暢？如何讓訪客愛上這個(gè)功能？這都是設(shè)計(jì)需要不斷探討和思考的問題。設(shè)計(jì)與產(chǎn)品之間通過產(chǎn)品思維進(jìn)行聯(lián)動(dòng)，能夠確保核心目標(biāo)一致、步調(diào)一致，真正創(chuàng)造出一個(gè)有價(jià)值的網(wǎng)站。

我們始終要對(duì)設(shè)計(jì)的結(jié)果負(fù)責(zé)，各個(gè)環(huán)節(jié)的品牌維護(hù)及更新必須形成閉環(huán)的設(shè)計(jì)思考，最終達(dá)到“設(shè)計(jì)應(yīng)時(shí)輸出，信息精準(zhǔn)傳達(dá)，符合結(jié)果預(yù)期”，在落地層面始終執(zhí)行著的“四環(huán)建設(shè)”：

第一環(huán)：讓出品更好看（視覺側(cè)）

第二環(huán)：讓出品更好用（體驗(yàn)側(cè)）

第三環(huán)：讓出品高轉(zhuǎn)化（營銷側(cè)）

第四環(huán)：讓出品高價(jià)值（品牌側(cè)）

2.2 重視 UX 用戶體驗(yàn)

我們一直在講視覺設(shè)計(jì)，視覺設(shè)計(jì)不僅是靜態(tài)形式，還可以是動(dòng)態(tài)形式，也就是網(wǎng)站上的交互動(dòng)效，交互不可避免涉及到的領(lǐng)域就是「用戶體驗(yàn)」。08年蘋果推出 AppStore，App 興起至今，用戶體驗(yàn)就廣為人知，在 App 的設(shè)計(jì)領(lǐng)域更是奉為“宗旨”，當(dāng)然，在網(wǎng)站設(shè)計(jì)上同樣如此，“以用戶為本”就是產(chǎn)品的關(guān)鍵價(jià)值，這是我們不可忽視的方面。我們可以參考以下提高用戶體驗(yàn)的關(guān)鍵因素：

有用：內(nèi)容能夠滿足需求。

可用：網(wǎng)站的內(nèi)容應(yīng)該很容易被找到。

可取：設(shè)計(jì)元素應(yīng)該貼合情感且具備可欣賞性。

可發(fā)現(xiàn)：網(wǎng)站內(nèi)容容易被定位、被找到且可導(dǎo)航。

無障礙：為有障礙的用戶提供幫助。

可信：網(wǎng)站內(nèi)容應(yīng)該有權(quán)威性且值得被相信。

網(wǎng)站的視覺設(shè)計(jì)一方面需要服務(wù)于內(nèi)部，另一方面則服務(wù)于用戶，內(nèi)部指的是內(nèi)部需求，比如上級(jí)、老板等他們的視覺審美，這是不可避免的，其中平衡的技巧在這里就不過多講解了。

重點(diǎn)還是在于用戶身上，也就是訪客。先通過市場調(diào)研分析出訪客畫像，可以掌握對(duì)訪客的審美基礎(chǔ)和交互邏輯認(rèn)知，結(jié)合起來進(jìn)行設(shè)計(jì)，當(dāng)然我們也提倡盡可能簡化交互，并且讓網(wǎng)站貼合訪客喜好，內(nèi)容一目了然。

舉個(gè)例子：兒童教育服務(wù)的品牌網(wǎng)站，在慣性思維中，大多數(shù)人會(huì)將其設(shè)計(jì)得更偏向兒童 , 迎合兒童的喜好 , 但是真正瀏覽這個(gè)網(wǎng)站的訪客其實(shí)是父母。

因此，從偏向兒童的思路一開始就是錯(cuò)誤的，這也是很多企業(yè)建設(shè)網(wǎng)站的時(shí)候會(huì)掉入的誤區(qū)，了解用戶是設(shè)計(jì)不可缺少的一步。

2.3 增長思維保證商業(yè)價(jià)值

增長思維作為增長超人網(wǎng)站建設(shè)三大思維之一，也是三大思維中最能激發(fā)網(wǎng)站商用價(jià)值的思維。在視覺設(shè)計(jì)當(dāng)中，運(yùn)用增長思維能夠有效強(qiáng)化網(wǎng)站，加強(qiáng)網(wǎng)站價(jià)值。

我們需要先探討“網(wǎng)站內(nèi)容中哪些信息最重要？”“傳遞這些信息的目的是什么？”例如，一個(gè)促銷活動(dòng)版塊的營銷點(diǎn)是免費(fèi)領(lǐng)取資料，我們需要理解：最打動(dòng)訪客的是資料還是“免費(fèi)”，是資料的圖片需要更突出還是“免費(fèi)”的文案更突出？在商業(yè)之下，設(shè)計(jì)也需要理解營銷，也需要懂增長。

理解了基礎(chǔ)邏輯，就需要進(jìn)行下一步——強(qiáng)化它們，有效傳遞價(jià)值，實(shí)際落地可以參考兩個(gè)基礎(chǔ)理論：

·視覺動(dòng)線

·視覺層級(jí)

（1）視覺動(dòng)線

視覺動(dòng)線是指人們?cè)陂喿x時(shí)，視覺移動(dòng)時(shí)所形成的方向路徑。早在十多年前，用戶體驗(yàn)專家雅各布·尼爾森博士提到“人們很少逐字閱讀網(wǎng)頁，相反，他們掃描頁面，挑選單個(gè)單詞和句子”。正是如此，人們?cè)陂喿x的時(shí)候才會(huì)形成幾種常見的視覺動(dòng)線規(guī)律。

Z 型

F 型

基于這兩種常見的視覺動(dòng)線，我們?cè)谧鼍W(wǎng)站的版式設(shè)計(jì)時(shí)，可以更合理地策劃視覺動(dòng)線，其好處不僅能夠幫助訪客快速閱讀，快速獲取信息，提升用戶體驗(yàn)，還可以幫助我們引導(dǎo)訪客閱讀預(yù)設(shè)的信息，高效傳遞高價(jià)值信息，提高營銷效率。

（2）視覺層次

視覺層次應(yīng)該很好理解，即人們?cè)陂喿x時(shí)，能從視覺中感受到信息的層次，優(yōu)秀的視覺層次能夠非常高效地引導(dǎo)訪客閱讀更多內(nèi)容，并且通過信息的優(yōu)先級(jí)設(shè)計(jì)更直觀地幫助我們達(dá)成相應(yīng)的數(shù)據(jù)指標(biāo)。

比如下面兩個(gè)示例：

視覺動(dòng)線可以作為網(wǎng)站整體的版式設(shè)計(jì)思路，而視覺層次則是單個(gè)版塊的設(shè)計(jì)方向，版塊的視覺層級(jí)設(shè)計(jì)應(yīng)分為三層：

第一層：訪客掃一眼就能理解整個(gè)版塊的主要內(nèi)容；

第二層：訪客通過仔細(xì)瀏覽能夠獲取關(guān)鍵內(nèi)容；

第三層：訪客想深入了解可以查看更多，引導(dǎo)深入。

通過上述三層，能有效實(shí)現(xiàn)我們?cè)鲩L的目的。 常見的設(shè)計(jì)技巧為 : 通過「大小」、「色彩」、「重量」形成信息之間的層級(jí)對(duì)比，建立信息優(yōu)先級(jí)。

除此之外，我們?cè)诓邉澮恍┚W(wǎng)站轉(zhuǎn)化路徑時(shí)，還涉及到了「 CTA 行動(dòng)號(hào)召按 鈕」的設(shè)計(jì)，這在網(wǎng)站的增長思維中是常見的應(yīng)用，我們必須確保 CTA 足夠 顯眼、突出、目標(biāo)清晰，常規(guī)技巧包括：顏色對(duì)比、放置顯眼位置、層級(jí)引導(dǎo)、 文案簡潔清晰。

通過這兩個(gè)基礎(chǔ)的設(shè)計(jì)理論與增長思維的結(jié)合，我們可以延伸出很多合理的設(shè)計(jì)思路，形成有理有據(jù)的設(shè)計(jì)語言，有了方法論才是真正的有效設(shè)計(jì)，而非“摸瞎過河”。

總結(jié)

網(wǎng)站的視覺設(shè)計(jì)可以被視為一種藝術(shù)形式，但與純藝術(shù)截然不同，網(wǎng)站的視覺設(shè)計(jì)需要建立在牢固的科學(xué)基礎(chǔ)之上，以理性客觀去審視這樣設(shè)計(jì)是否真的能有效傳遞價(jià)值。

視覺設(shè)計(jì)的本質(zhì)是什么？很多人認(rèn)為只是單純的美，或者無非就是關(guān)于審美的答案。其實(shí)，這種理解是十分表象的，大多數(shù)人并沒有理解視覺設(shè)計(jì)的根本價(jià)值。

視覺設(shè)計(jì)是網(wǎng)站的一個(gè)重要層面，網(wǎng)站作為互聯(lián)網(wǎng)產(chǎn)品，其視覺設(shè)計(jì)的本質(zhì)是價(jià)值傳遞，我們一直以增長思維和產(chǎn)品思維與視覺設(shè)計(jì)相融合，就是為了實(shí)現(xiàn)高效傳遞高價(jià)值信息。

訪客通過對(duì)視覺信息的感知，來決定自己的行為。當(dāng)我們從信息的角度去理解視覺設(shè)計(jì)時(shí)，可以打破慣性思維對(duì)我們的限制，因?yàn)橐曈X設(shè)計(jì)是一個(gè)由抽象信息轉(zhuǎn)換為圖像信息的過程，理解這層道理才能真正打造出一個(gè)具有高顏值和高價(jià)值的網(wǎng)站。

文章來源：站酷 作者：增長超人



分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)