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