作為互聯網産品，網站扮演着舉足輕重的角色。它既需要滿足用戶視覺上的藝術體驗，又不可忽略通過其所傳遞給用戶的正确商業價值。因此，網站視覺設計該如何平衡藝術與商業價值？又需要掌握哪些商業網站的設計思維？作者在本文中詳細論述了這兩大問題，推薦設計小夥伴們閱讀學習～

相信網站視覺設計的重要性大家應該都清楚，對于訪客來說，網站的框架、交互邏輯等這些都是其次的，訪客首先感受到的是網站的視覺設計，同時通過視覺也能夠直觀地表達出我們所要傳遞的價值。因此，我們在建設網站時，一方面需要确保網站的視覺效果足夠優秀，另一方面需要保證視覺能夠傳遞正确的商業價值。

網站視覺設計需要平衡藝術與商業。

藝術與商業的本質其實是感性與理性，兩者之間沒有絕對的好與壞，相輔相成才是發揮價值的關鍵。

企業以盈利為目的，其網站不可避免也附帶了商業屬性，甚至是網站本身就是為了商業而創造出來的，其商業價值占比也更重。但人類作為視覺動物，視覺感受對于訪客來說尤為重要，視覺上的演繹比起網站其他内容，更會影響網站的可信度，因此，網站的視覺起碼需要保證符合受衆群體的基礎審美。

我們這些年接觸了大大小小幾千家企業及企業官網，深入探究之後我們找到了一些規律，網站的視覺設計其實關鍵在于：

一、品牌基礎VI設計的應用

我們常見的企業網站存在着一個嚴重的問題，缺乏品牌辨識度，假如你把左上角的品牌LOGO遮住，你可能完全看不出這是那家公司的官網，又或者把左上角的品牌LOGO替換一下，就成了别家公司的企業官網，這是網站嚴重缺乏品牌視覺識别所導緻，這種網站無法讓訪客記住其品牌，更無法在訪客心裡占領一席之地。

品牌基礎VI設計的應用是最基礎也是最容易忽視的細節，它不僅是存在于初期建站，更是在網站疊代中，持續保持企業網站差異化的關鍵。

如何設計一個高辨識度的網站？

VI（視覺識别系統）是品牌的視覺符号化，是品牌識别中最具傳播力和感染力的部分，它可以将品牌識别系統的非可視化内容，轉化為靜态的視覺識别符号，它包含了品牌LOGO、标準色、象征圖形、标準字體等等。另外還會包含品牌核心價值和個性，不同的品牌VI是各個品牌之間形成差異化的根本原因之一。

因此，我們可以通過與品牌VI相結合的方式進行設計，品牌VI可以有非常豐富多樣的應用形式，在廣泛的層面上進行直接的傳播，能夠在不同場景中的進行應用，讓人們快速辨認出該品牌。

品牌LOGO則是最具辨識度的視覺符号，通過提取LOGO中的基因，延用到我們網站中，更有助于提升品牌辨識度。我們可以從兩個維度來提取：

1. LOGO的“形”

首先，我們可以通過提取logo的形狀作為網站視覺設計中的「視覺符号」，也可以參考VI手冊中的「象征圖形」進行延展，提取logo外形結構做成相應的icon或是動效等，是logo元素的直觀體現。

舉個例子，天虹的logo是一抹橙色極簡的彩虹形狀，天虹企業簡介的Banner以及每個頁面的底部導航，都有将Logo這一特征延展出來的圖形設計。

天虹【企業介紹】頁面頭尾展示（增長超人出品）

這種方法需要我們很好地提取logo中的部分結構，或根據造型轉變為動效、icon等，這樣在網頁中的融入感是十分可觀。

2. LOGO的“色”

提取logo中的标準色或代表性的顔色與網頁元素相呼應，也是一種常見的方式。将Logo顔色通過網站中的文字、頁面闆式、icon設計表現出來，這是很好的一種呼應方法。

比如：綠色是綠革的标志性顔色。打開綠革官網，可以清晰直觀地看到綠革将logo中的兩種綠色元素，融入到網站界面UI中，需要突出的文案也會運用這兩種綠色去做表達和強調。

綠革LOGO

綠革官網首頁展示

在網站設計中，我們可以将标準色換到标題文字、icon、控件。訪客打開網站時會很容易被這些顔色吸引，也不會感到突兀，合理運用logo顔色，可以統一網站的整體視覺，且做到突出重點與更有效地傳達信息。

品牌VI在網站設計中的應該如何應用？

品牌VI可以在三個維度應用到網站設計，來提升網站的辨識度：

1. ICON圖标設計

品牌VI的應用常見的方式就是在icon圖标的設計上，icon作為網站的重點圖形，能夠讓訪客感知品牌，精緻的icon可以讓表達更簡單高效，要打造一套精緻的icon，我們可以從識别性、規範性、整體性和品牌感四個方面着手。

• 識别性：icon的作用即是幫助訪客理解網站信息，特别是在沒有文字說明的情況下，icon的設計需要具備讓訪客快速認出的高識别度，不能讓訪客産生疑惑。

• 規範性：每個icon要保持視覺大小、色彩等一緻性，以及圖标飽滿度等細節都需遵循同一規律，例如：繪制風格是否一緻，使用的圓角或直角是否統一等等。

• 整體性：除了icon自身的設計之外，整體的設計風格要與網站基調達成一緻，不同網站有不同定位，面向的目标訪客群體自然有所差别，那麼整個網站的icon設計也不一樣。

• 品牌感：提升品牌辨識度離不開品牌感，icon設計要與品牌調性、理念相符合，傳達給訪客一緻的感受。比如：提取品牌色、采取品牌圖形作為圖标設計視覺元素，從而加深訪客對品牌色的感知。

icon設計中的品牌感是将品牌VI應用到網站的關鍵，比如上方的那套icon，是由增長超人根據英威騰本身的品牌色彩和品牌調性進行設計，應用于官網是這樣的：

另外，icon是網站中不可或缺的元素，充當路标，讓訪客能知道點擊後下一步是什麼，也就有明确的心理預期。如果icon按鈕不夠明确，訪客可能會不知道下一步是要購買産品或者注冊用戶的步驟，并且可能直接浏覽網站後就直接離開。

2. 版式設計

版式的如何融入品牌調性是很多設計師會忽略的一點，訪客來浏覽網站時，首先感受到的第一點是色彩，第二則是版式，也就是整體給訪客的感覺。

符合品牌定位且具有辨識度的網頁版式設計應該怎麼做，它更需要從品牌特性中提取，無法像icon一樣從品牌logo和标準色中提取元素就可以做到的，更多是一個風格化的設計。

舉個例子，這是一家高端的共享辦公室服務企業，從他們的品牌VI中可以感受到高端、輕奢、個性等關鍵詞，在其官網中，我們可以看到其與衆不同的闆式設計，一眼就能感受出其品牌調性。

3. 動效設計

除了靜态的圖形設計，品牌VI也可以融入網站動效，利用品牌LOGO的設計元素和結構，進行設計的動效，可以讓整個網站更有品牌風格。一個好的動效是能夠滿足網站功能的表達，強化品牌特質，而不是隻追求表面炫酷花哨的效果。

在網站視覺設計中，品牌VI的應用不僅能夠形成區别于同行的差異化，為品牌賦能，還能通過規範化的VI應用，提高訪客對其品牌的信任度。

品牌的基礎VI設計應用于網站是我們的常規操作，但要注意細節，别忽視了其作為網站基礎的重要性，對于網站視覺設計，我們在保證基礎設計無誤的情況下，需要深入到思維上，一個網站的設計看似簡單，像是色調、排版，都是設計師的基礎功夫，但是要真正做到一個優質的網站，其實并沒有想象中那麼容易。

二、平衡藝術與商業的網站設計思維

開頭我們有提到：視覺設計如何平衡藝術與商業？大多數設計師在初入職場時，都不具備商業思維，首先會經曆一段自我懷疑的過程：完成一個稿件後，反反複複被要求改稿，始終無法達到上級的要求，個人價值開始逐漸模糊，淪為一介改稿工具人。

在我們看來，企業網站的視覺設計必須具備商業思維，也就是視覺設計需要體現其想表達商業價值，因此，在建設企業網站時，我們需要記住一下幾點。

1. 不為設計而設計

不為設計而設計不是将藝術“一棒敲死”，也并非抛棄創新創意，而是應該更注重于強化産品，給滿足需求的産品力加持。市面上有很多花裡胡哨的網站，第一眼可能能夠驚豔到你，但是再深入隻是空洞，事實上，能夠讓訪客長時間記住你的并非第一眼，而是其内在，也是我們一直堅持的長期主義價值。

過于強調設計、藝術、創意，不僅會給網站帶來開發難度，更是給訪客浏覽帶來沉重的負擔。

商業環境下，視覺設計的本質應該是強化産品，升華價值，實際上，設計同樣需要具備産品思維，增長超人建站更是将産品思維全流程化，這種模式下，每一環都串聯起來，不管是用戶體驗，還是價值傳遞都非常有利。

産品思維全流程化

設計需要理解功能目的，為什麼策劃這個功能？如何通過設計讓訪客使用更順暢？如何讓訪客愛上這個功能？這都是設計需要不斷探讨和思考的問題。這時設計與産品之間通過産品思維進行聯動，能夠确保核心目标一緻、步調一緻，真正創造出一個有價值網站。

2. 重視UX用戶體驗

我們一直在講視覺設計，視覺設計不僅是靜态形式，還可以是動态形式，也就是網站上的交互動效，交互不可避免涉及到的領域就是「用戶體驗」。08年蘋果推出AppStore，App興起至今，用戶體驗就廣為人知，在App的設計領域更是奉為“宗旨”，當然，在網站設計上同樣如此，“以用戶為本”本就是産品的關鍵價值，這是我們不可忽視的方面。

我們可以參考以下提高用戶體驗的關鍵因素：

• 有用：内容能夠滿足需求。
• 可用：網站的内容應該很容易被找到。
• 可取：設計元素應該貼合情感且具備可欣賞性。
• 可發現：網站内容容易被定位、被找到且可導航。
• 無障礙：為有障礙的用戶提供幫助。
• 可信：網站内容應該有權威性，且值得被相信。

網站的視覺設計一方面需要服務于内部，另一方面則服務于用戶，内部指的是内部需求，比如上級、老闆等他們的視覺審美，這是不可避免的，其中平衡的技巧在這裡就不過多講解了。

重點還是在于用戶身上，也就訪客，先前通過市場調研分析出訪客畫像，可以掌握對訪客的審美基礎和交互邏輯認知，結合起來進行設計，當然我們也提倡盡可能簡化交互，并且讓網站貼合訪客喜好，内容一目了然。

舉個例子，兒童教育服務的品牌網站，在慣性思維中，大多數人會将其設計得更偏向兒童向，迎合兒童的喜好，但是，真正浏覽這個網站的訪客其實是父母，因此，從偏向兒童向的思路開始就是錯誤的，這也是很多企業建設網站的時候會掉入的誤區，了解用戶是設計不可缺少的一步。

3. 增長思維保證商業價值

增長思維作為增長超人網站建設三大思維之一，也是三大思維中最能激發網站商用價值的思維。在視覺設計當中，運用增長思維能夠有效強化網站，加強網站價值。

我們需要先探讨“網站内容中哪些信息最重要？”，“傳遞這些信息的目的是什麼？”例如，一個促銷活動版塊的營銷點是免費領取資料，我們需要理解：最打動訪客的是資料還是“免費”，是資料的圖片需要更突出還是“免費”相關文案。在商業之下，設計也需要理解營銷，也需要懂增長。

理解了基礎邏輯，就需要進行下一步——強化它們，有效傳遞價值，實際落地可以參考兩個基礎理論：

1. 視覺動線

視覺動線是指人們在閱讀時，視覺移動時所形成的方向路徑。早在十多年前，用戶體驗專家雅各布·尼爾森博士提到“人們很少逐字閱讀網頁，相反，他們掃描頁面，挑選單個單詞和句子”。正是如此，人們在閱讀的時候才會形成幾種常見的視覺動線規律。

Z型

F型

基于這兩種常見的視覺動線，我們在做網站的闆式設計時，可以更合理地策劃視覺動線。其好處不僅能夠幫助訪客快速閱讀，快速獲取信息，提升用戶體驗，還可以幫助我們引導訪客閱讀預設的信息，高效傳遞高價值信息，提高營銷效率。

2. 視覺層次

視覺層次應該很好理解，即人們在閱讀時，能從視覺中感受到信息的層次，優秀的視覺層次能夠非常高效地引導.訪客閱讀更多内容，并且通過信息的優先級設計能更直觀地幫助我們傳網站達成相應的數據指标。

比如下面兩個示例：

視覺動線可以作為網站整體的闆式設計思路，而視覺層次則是單個版塊的設計方向，版塊的視覺層級設計應分為三層：

第一層：訪客掃一眼就能理解整個版塊的主要内容；

第二層：訪客通過仔細浏覽能夠獲取關鍵内容；

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

通過上述三層，即能有效實現我們增長的目的，常見的設計技巧為：通過「大小」、「色彩」、「重量」形成信息之間的層級對比，建立信息優先級。

除此之外，我們在策劃一些網站轉化路徑時，還涉及到了「 CTA 行動号召按鈕」的設計，這在網站的增長思維中常見的應用，我們必須确保CTA足夠顯眼、突出、目标清晰，常規技巧包括：顔色對比、放置顯眼位置、層級引導、文案簡潔清晰。

通過這兩個基礎的設計理論以及增長思維的結合，我們可以延伸出很多合理的設計思路，形成有理有據的設計語言，有了方法論才是真正的有效設計，而非“摸瞎過河”。

三、總結

網站的視覺設計可以被視作一種藝術形式，但與純藝術截然不同，網站的視覺設計需要建立在牢固的科學基礎之上，以理性客觀去審視一下這樣設計是否真的能有效傳遞價值。

視覺設計的本質是什麼？很多人認為隻是單純的美，或者無非就是關于審美的答案。其實，這種理解是十分表象的，大多數人并沒有理解視覺設計的根本價值。

視覺設計是網站的一個重要層面，網站作為互聯網産品，則其視覺設計的本質是價值傳遞，我們一直以增長思維和産品思維與視覺設計相融合，就是為了實現高效傳遞高價值信息。

訪客通過對視覺信息的感知，來決定自己行為。當我們從信息的角度去理解視覺設計時，可以打破慣性思維對我們的限制，因為視覺設計是一個由抽象信息轉換為圖像信息的過程，理解這層道理才能真正打造出一個具有高顔值和高價值的網站。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部