2022-4-24 周周
相信網(wǎng)站視覺設(shè)計的重要性大家應(yīng)該都清楚，對于普通訪客來說，網(wǎng)站的框架、交互邏輯等這些都是其次的，訪客首先感受到的是網(wǎng)站的視覺設(shè)計，同時視覺也能夠直觀地表達(dá)出我們所要傳遞的價值。因此，我們在建設(shè)網(wǎng)站時，一方面需要確保網(wǎng)站的視覺效果足夠優(yōu)秀，另一方面需要保證視覺能夠傳遞正確的商業(yè)價值。
藝術(shù)與商業(yè)的本質(zhì)其實是感性與理性，兩者之間沒有絕對的好與壞，相輔相成才是發(fā)揮價值的關(guān)鍵。
企業(yè)以盈利為目的，其網(wǎng)站不可避免地也附帶了商業(yè)屬性，甚至是網(wǎng)站本身就是為了商業(yè)而創(chuàng)造出來的，其商業(yè)價值占比也更重。但人類作為視覺動物，視覺感受對于訪客來說尤為重要，視覺上的演繹比起網(wǎng)站其他內(nèi)容，更會影響網(wǎng)站的可信度，因此，網(wǎng)站的視覺起碼需要保證符合受眾群體的基礎(chǔ)審美。
增長超人這些年接觸了大大小小幾千家企業(yè)及企業(yè)官網(wǎng)，深入探究之后我們找到了一些規(guī)律，網(wǎng)站的視覺設(shè)計其實關(guān)鍵在于：
·品牌基礎(chǔ) VI 設(shè)計的應(yīng)用；
·平衡藝術(shù)與商業(yè)的網(wǎng)站設(shè)計思維。
我們常見的企業(yè)網(wǎng)站存在著一個嚴(yán)重的問題，缺乏品牌辨識度，假如把網(wǎng)站左上角的品牌 LOGO 遮住，可能完全看不出這是哪家公司的官網(wǎng)，又或者把品牌 LOGO 替換一下，就成了別家公司的官網(wǎng)。
這是網(wǎng)站嚴(yán)重缺乏品牌視覺識別所導(dǎo)致地，這種網(wǎng)站無法讓訪客記住其品牌，更無法在訪客心里占領(lǐng)一席之地。
品牌基礎(chǔ) VI 設(shè)計的應(yīng)用是最基礎(chǔ)也是最容易忽視的細(xì)節(jié)，它不僅是存在于初期建站，更是在網(wǎng)站迭代中，持續(xù)保持企業(yè)網(wǎng)站差異化的關(guān)鍵。
VI（視覺識別系統(tǒng)）是品牌的視覺符號化，是品牌識別中最具傳播力和感染力的部分，它可以將品牌識別系統(tǒng)的非可視化內(nèi)容，轉(zhuǎn)化為靜態(tài)的視覺識別符號，它包含了品牌 LOGO、標(biāo)準(zhǔn)色、象征圖形、標(biāo)準(zhǔn)字體等等。另外還會包含品牌核心價值和個性，不同的品牌 VI 是各個品牌之間形成差異化的根本原因之一。
因此，我們可以通過與品牌 VI 相結(jié)合的方式進(jìn)行設(shè)計，品牌 VI 可以有非常豐富多樣的應(yīng)用形式，在廣泛的層面上進(jìn)行直接的傳播，能夠在不同場景中進(jìn)行應(yīng)用，讓人們快速辨認(rèn)出該品牌。
品牌 LOGO 則是最具辨識度的視覺符號，通過提取 LOGO 中的基因，延用到我們網(wǎng)站中，更有助于提升品牌辨識度。我們可以從兩個維度來提?。?
·LOGO 的“形”
·LOGO 的“色”
首先，我們可以通過提取 logo 的形狀作為網(wǎng)站視覺設(shè)計中的「視覺符號」，也可以參考 VI 手冊中的「象征圖形」進(jìn)行延展，提取 logo 外形結(jié)構(gòu)做成相應(yīng)的 icon 或是動效等是 logo 元素的直觀體現(xiàn)。
舉個例子，天虹的 logo 是一抹橙色極簡的彩虹形狀，天虹企業(yè)簡介的Banner 以及每個頁面的底部導(dǎo)航，都有將 Logo 這一特征延展出來的圖形設(shè)計。
▲天虹官網(wǎng)頁面 Banner 展示（增長超人出品）
▲天虹官網(wǎng)底部展示（增長超人出品）
這種方法需要我們很好地提取 logo 中的部分結(jié)構(gòu) , 或根據(jù)造型轉(zhuǎn)變?yōu)閯有?、icon 等，這樣在網(wǎng)頁中的融入感十分可觀。
提取 logo 中的標(biāo)準(zhǔn)色或代表性的顏色與網(wǎng)頁元素相呼應(yīng)，也是一種常見的方式。將 Logo 顏色通過網(wǎng)站中的文字、頁面板式、icon 設(shè)計表現(xiàn)出來，這是很好的一種呼應(yīng)方法。
比如：綠色是綠革的標(biāo)志性顏色。打開綠革官網(wǎng)，可以清晰直觀地看到綠革將 logo 中的兩種綠色元素，融入到網(wǎng)站界面 UI 中，需要突出的文案也會運(yùn)用這兩種綠色去做表達(dá)和強(qiáng)調(diào)。
▲ 綠革L(fēng)OGO
▲ 綠革官網(wǎng)首頁展示（增長超人出品）
在網(wǎng)站設(shè)計中，我們可以將標(biāo)準(zhǔn)色換到標(biāo)題文字、icon、控件。訪客打開網(wǎng)站時會很容易被這些顏色吸引，也不會感到突兀，合理運(yùn)用 logo 顏色，可以統(tǒng)一網(wǎng)站的整體視覺且做到突出重點與更有效地傳達(dá)信息。
品牌 VI 可以在三個維度應(yīng)用到網(wǎng)站設(shè)計，來提升網(wǎng)站的辨識度：
品牌 VI 的應(yīng)用常見的方式就是在 icon 圖標(biāo)的設(shè)計上。icon 作為網(wǎng)站的重點圖形，能夠讓訪客感知品牌，精致的 icon 可以讓表達(dá)更簡單高效，要打造一套精致的 icon，我們可以從識別性、規(guī)范性、整體性和品牌感四個方面著手。
識別性：icon 的作用即是幫助訪客理解網(wǎng)站信息，特別是在沒有文字說明 的情況下，icon 的設(shè)計需要具備讓訪客快速認(rèn)出的高識別度，不能讓訪客 產(chǎn)生疑惑。
規(guī)范性：每個 icon 要保持視覺大小、色彩等一致性，以及圖標(biāo)飽滿度等細(xì) 節(jié)都需遵循同一規(guī)律，例如：繪制風(fēng)格是否一致，使用的圓角或直角是否統(tǒng) 一等等。
整體性：除了 icon 自身的設(shè)計之外，整體的設(shè)計風(fēng)格要與網(wǎng)站基調(diào)達(dá)成一 致，不同網(wǎng)站有不同定位，面向的目標(biāo)訪客群體自然有所差別，那么整個網(wǎng) 站的 icon 設(shè)計也不一樣。
品牌感 : 提升品牌辨識度離不開品牌感， icon 設(shè)計要與品牌調(diào)性、理念相 符合，傳達(dá)給訪客一致的感受。比如：提取品牌色、采取品牌圖形作為圖標(biāo)設(shè)計視覺元素，從而加深訪客對品牌色的感知。
icon 設(shè)計中的品牌感是將品牌 VI 應(yīng)用到網(wǎng)站的關(guān)鍵，比如上方的那套icon，是由增長超人根據(jù)英威騰本身的品牌色彩和品牌調(diào)性進(jìn)行設(shè)計，應(yīng)用于官網(wǎng)是這樣的：
另外，icon 是網(wǎng)站中不可或缺的元素，充當(dāng)路標(biāo)，讓訪客能知道點擊后下一步是什么，也就有明確的心理預(yù)期。如果 icon 按鈕不夠明確，訪客可能會不知道下一步是要購買產(chǎn)品還是注冊用戶，并且可能直接瀏覽網(wǎng)站后就直接離開。
版式如何融入品牌調(diào)性是很多設(shè)計師會忽略的一點，訪客來瀏覽網(wǎng)站時，首先感受到的第一點是色彩，第二則是版式，也就是整體給訪客的感覺。符合品牌定位且具有辨識度的網(wǎng)頁版式設(shè)計應(yīng)該怎么做，它更需要從品牌特性中提取，無法像 icon 一樣從品牌 logo 和標(biāo)準(zhǔn)色中提取元素就可以做到的，更多是一個風(fēng)格化的設(shè)計。
除了靜態(tài)的圖形設(shè)計，品牌 VI 也可以融入網(wǎng)站動效，利用品牌 LOGO 的設(shè)計元素和結(jié)構(gòu)進(jìn)行設(shè)計的動效，可以讓整個網(wǎng)站更有品牌風(fēng)格。一個好的動效能夠滿足網(wǎng)站功能的表達(dá)，強(qiáng)化品牌特質(zhì)，而不是只追求表面炫酷花哨的效果。
▲天虹部分動效展示（增長超人出品）
在網(wǎng)站視覺設(shè)計中，品牌 VI 的應(yīng)用不僅能夠形成區(qū)別于同行的差異化為品牌賦能，還能通過規(guī)范化的 VI 應(yīng)用，提高訪客對其品牌的信任度。
品牌的基礎(chǔ) VI 設(shè)計應(yīng)用于網(wǎng)站是我們的常規(guī)操作，但要注意細(xì)節(jié)，別忽視了其作為網(wǎng)站基礎(chǔ)的重要性，對于網(wǎng)站視覺設(shè)計，我們在保證基礎(chǔ)設(shè)計無誤的情況下，需要深入到思維上，一個網(wǎng)站的設(shè)計看似簡單，像是色調(diào)、排版，都是設(shè)計師的基礎(chǔ)功夫，但是要真正做到一個優(yōu)質(zhì)的網(wǎng)站，其實并沒有想象中那么容易。
開頭我們有提到：視覺設(shè)計如何平衡藝術(shù)與商業(yè)？大多數(shù)設(shè)計師在初入職場時 , 都不具備商業(yè)思維，首先會經(jīng)歷一段自我懷疑的過程：完成一個稿件后，反反復(fù)復(fù)被要求改稿，始終無法達(dá)到上級的要求，個人價值開始逐漸模糊，淪為一介改稿工具人。
在我們看來，企業(yè)網(wǎng)站的視覺設(shè)計必須具備商業(yè)思維，也就是視覺設(shè)計需要體現(xiàn)其想表達(dá)的商業(yè)價值。因此，在建設(shè)企業(yè)網(wǎng)站時，我們需要記住以下幾點。
不為設(shè)計而設(shè)計不是將藝術(shù)“一棒打死”，也并非拋棄創(chuàng)新創(chuàng)意，而是應(yīng)該更注重于強(qiáng)化產(chǎn)品，給滿足需求的產(chǎn)品力加持。市面上有很多花里胡哨的網(wǎng)站，第一眼可能會驚艷到你，但是再深入瀏覽發(fā)現(xiàn)內(nèi)容很空洞。事實上，能夠讓訪客長時間記住你的并非第一眼，而是其內(nèi)在，也是我們一直堅持的長期主義價值。
過于強(qiáng)調(diào)設(shè)計、藝術(shù)、創(chuàng)意，不僅會給網(wǎng)站帶來開發(fā)難度，也給訪客瀏覽帶來沉重的負(fù)擔(dān)。
商業(yè)環(huán)境下，視覺設(shè)計的本質(zhì)應(yīng)該是強(qiáng)化產(chǎn)品，升華價值，實際上，設(shè)計同樣需要具備產(chǎn)品思維。增長超人在建站中已將產(chǎn)品思維全流程化，這種模式下，每一環(huán)都串聯(lián)起來，不管是用戶體驗，還是價值傳遞都非常有利。
產(chǎn)品思維全流程化
設(shè)計需要理解功能目的，為什么策劃這個功能？如何通過設(shè)計讓訪客使用更順暢？如何讓訪客愛上這個功能？這都是設(shè)計需要不斷探討和思考的問題。設(shè)計與產(chǎn)品之間通過產(chǎn)品思維進(jìn)行聯(lián)動，能夠確保核心目標(biāo)一致、步調(diào)一致，真正創(chuàng)造出一個有價值的網(wǎng)站。
我們始終要對設(shè)計的結(jié)果負(fù)責(zé)，各個環(huán)節(jié)的品牌維護(hù)及更新必須形成閉環(huán)的設(shè)計思考，最終達(dá)到“設(shè)計應(yīng)時輸出，信息精準(zhǔn)傳達(dá)，符合結(jié)果預(yù)期”，在落地層面始終執(zhí)行著的“四環(huán)建設(shè)”：
第一環(huán)：讓出品更好看（視覺側(cè)）
第二環(huán)：讓出品更好用（體驗側(cè)）
第三環(huán)：讓出品高轉(zhuǎn)化（營銷側(cè)）
第四環(huán)：讓出品高價值（品牌側(cè)）
我們一直在講視覺設(shè)計，視覺設(shè)計不僅是靜態(tài)形式，還可以是動態(tài)形式，也就是網(wǎng)站上的交互動效，交互不可避免涉及到的領(lǐng)域就是「用戶體驗」。08年蘋果推出 AppStore，App 興起至今，用戶體驗就廣為人知，在 App 的設(shè)計領(lǐng)域更是奉為“宗旨”，當(dāng)然，在網(wǎng)站設(shè)計上同樣如此，“以用戶為本”就是產(chǎn)品的關(guān)鍵價值，這是我們不可忽視的方面。我們可以參考以下提高用戶體驗的關(guān)鍵因素：
有用：內(nèi)容能夠滿足需求。
可用：網(wǎng)站的內(nèi)容應(yīng)該很容易被找到。
可?。?/strong>設(shè)計元素應(yīng)該貼合情感且具備可欣賞性。
可發(fā)現(xiàn)：網(wǎng)站內(nèi)容容易被定位、被找到且可導(dǎo)航。
無障礙：為有障礙的用戶提供幫助。
可信：網(wǎng)站內(nèi)容應(yīng)該有權(quán)威性且值得被相信。
網(wǎng)站的視覺設(shè)計一方面需要服務(wù)于內(nèi)部，另一方面則服務(wù)于用戶，內(nèi)部指的是內(nèi)部需求，比如上級、老板等他們的視覺審美，這是不可避免的，其中平衡的技巧在這里就不過多講解了。
重點還是在于用戶身上，也就是訪客。先通過市場調(diào)研分析出訪客畫像，可以掌握對訪客的審美基礎(chǔ)和交互邏輯認(rèn)知，結(jié)合起來進(jìn)行設(shè)計，當(dāng)然我們也提倡盡可能簡化交互，并且讓網(wǎng)站貼合訪客喜好，內(nèi)容一目了然。
舉個例子：兒童教育服務(wù)的品牌網(wǎng)站，在慣性思維中，大多數(shù)人會將其設(shè)計得更偏向兒童 , 迎合兒童的喜好 , 但是真正瀏覽這個網(wǎng)站的訪客其實是父母。
因此，從偏向兒童的思路一開始就是錯誤的，這也是很多企業(yè)建設(shè)網(wǎng)站的時候會掉入的誤區(qū)，了解用戶是設(shè)計不可缺少的一步。
增長思維作為增長超人網(wǎng)站建設(shè)三大思維之一，也是三大思維中最能激發(fā)網(wǎng)站商用價值的思維。在視覺設(shè)計當(dāng)中，運(yùn)用增長思維能夠有效強(qiáng)化網(wǎng)站，加強(qiáng)網(wǎng)站價值。
我們需要先探討“網(wǎng)站內(nèi)容中哪些信息最重要？”“傳遞這些信息的目的是什么？”例如，一個促銷活動版塊的營銷點是免費(fèi)領(lǐng)取資料，我們需要理解：最打動訪客的是資料還是“免費(fèi)”，是資料的圖片需要更突出還是“免費(fèi)”的文案更突出？在商業(yè)之下，設(shè)計也需要理解營銷，也需要懂增長。
理解了基礎(chǔ)邏輯，就需要進(jìn)行下一步——強(qiáng)化它們，有效傳遞價值，實際落地可以參考兩個基礎(chǔ)理論：
·視覺動線
·視覺層級
視覺動線是指人們在閱讀時，視覺移動時所形成的方向路徑。早在十多年前，用戶體驗專家雅各布·尼爾森博士提到“人們很少逐字閱讀網(wǎng)頁，相反，他們掃描頁面，挑選單個單詞和句子”。正是如此，人們在閱讀的時候才會形成幾種常見的視覺動線規(guī)律。
Z 型
F 型
基于這兩種常見的視覺動線，我們在做網(wǎng)站的版式設(shè)計時，可以更合理地策劃視覺動線，其好處不僅能夠幫助訪客快速閱讀，快速獲取信息，提升用戶體驗，還可以幫助我們引導(dǎo)訪客閱讀預(yù)設(shè)的信息，高效傳遞高價值信息，提高營銷效率。
視覺層次應(yīng)該很好理解，即人們在閱讀時，能從視覺中感受到信息的層次，優(yōu)秀的視覺層次能夠非常高效地引導(dǎo)訪客閱讀更多內(nèi)容，并且通過信息的優(yōu)先級設(shè)計更直觀地幫助我們達(dá)成相應(yīng)的數(shù)據(jù)指標(biāo)。
比如下面兩個示例：
視覺動線可以作為網(wǎng)站整體的版式設(shè)計思路，而視覺層次則是單個版塊的設(shè)計方向，版塊的視覺層級設(shè)計應(yīng)分為三層：
第一層：訪客掃一眼就能理解整個版塊的主要內(nèi)容；
第二層：訪客通過仔細(xì)瀏覽能夠獲取關(guān)鍵內(nèi)容；
第三層：訪客想深入了解可以查看更多，引導(dǎo)深入。
通過上述三層，能有效實現(xiàn)我們增長的目的。 常見的設(shè)計技巧為 : 通過「大小」、「色彩」、「重量」形成信息之間的層級對比，建立信息優(yōu)先級。
除此之外，我們在策劃一些網(wǎng)站轉(zhuǎn)化路徑時，還涉及到了「 CTA 行動號召按 鈕」的設(shè)計，這在網(wǎng)站的增長思維中是常見的應(yīng)用，我們必須確保 CTA 足夠 顯眼、突出、目標(biāo)清晰，常規(guī)技巧包括：顏色對比、放置顯眼位置、層級引導(dǎo)、 文案簡潔清晰。
通過這兩個基礎(chǔ)的設(shè)計理論與增長思維的結(jié)合，我們可以延伸出很多合理的設(shè)計思路，形成有理有據(jù)的設(shè)計語言，有了方法論才是真正的有效設(shè)計，而非“摸瞎過河”。
網(wǎng)站的視覺設(shè)計可以被視為一種藝術(shù)形式，但與純藝術(shù)截然不同，網(wǎng)站的視覺設(shè)計需要建立在牢固的科學(xué)基礎(chǔ)之上，以理性客觀去審視這樣設(shè)計是否真的能有效傳遞價值。
視覺設(shè)計的本質(zhì)是什么？很多人認(rèn)為只是單純的美，或者無非就是關(guān)于審美的答案。其實，這種理解是十分表象的，大多數(shù)人并沒有理解視覺設(shè)計的根本價值。
視覺設(shè)計是網(wǎng)站的一個重要層面，網(wǎng)站作為互聯(lián)網(wǎng)產(chǎn)品，其視覺設(shè)計的本質(zhì)是價值傳遞，我們一直以增長思維和產(chǎn)品思維與視覺設(shè)計相融合，就是為了實現(xiàn)高效傳遞高價值信息。
訪客通過對視覺信息的感知，來決定自己的行為。當(dāng)我們從信息的角度去理解視覺設(shè)計時，可以打破慣性思維對我們的限制，因為視覺設(shè)計是一個由抽象信息轉(zhuǎn)換為圖像信息的過程，理解這層道理才能真正打造出一個具有高顏值和高價值的網(wǎng)站。
文章來源：站酷 作者：增長超人
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.sillybuy.com