網(wǎng)站如何平衡藝術(shù)與商業(yè)，網(wǎng)站設(shè)計(jì)需要掌握哪些思維？

時(shí)間：2023-09-27 01:24:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-27 01:24:02 來源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)站如何平衡藝術(shù)與商業(yè)，網(wǎng)站設(shè)計(jì)需要掌握哪些思維？：作為互聯(lián)網(wǎng)產(chǎn)品，網(wǎng)站扮演著舉足輕重的角色。它既需要滿足用戶視覺上的藝術(shù)體驗(yàn)，又不可忽略通過其所傳遞給用戶的正確商業(yè)價(jià)值。因此，網(wǎng)站視覺設(shè)計(jì)該如何平衡藝術(shù)與商業(yè)價(jià)值？又需要掌握哪些商業(yè)網(wǎng)站的設(shè)計(jì)思維？

相信網(wǎng)站視覺設(shè)計(jì)的重要性大家應(yīng)該都清楚，對(duì)于訪客來說，網(wǎng)站的框架、交互邏輯等這些都是其次的，訪客首先感受到的是網(wǎng)站的視覺設(shè)計(jì)，同時(shí)通過視覺也能夠直觀地表達(dá)出我們所要傳遞的價(jià)值。因此，我們?cè)诮ㄔO(shè)網(wǎng)站時(shí)，一方面需要確保網(wǎng)站的視覺效果足夠優(yōu)秀，另一方面需要保證視覺能夠傳遞正確的商業(yè)價(jià)值。

網(wǎng)站視覺設(shè)計(jì)需要平衡藝術(shù)與商業(yè)。

藝術(shù)與商業(yè)的本質(zhì)其實(shí)是感性與理性，兩者之間沒有絕對(duì)的好與壞，相輔相成才是發(fā)揮價(jià)值的關(guān)鍵。

企業(yè)以盈利為目的，其網(wǎng)站不可避免也附帶了商業(yè)屬性，甚至是網(wǎng)站本身就是為了商業(yè)而創(chuàng)造出來的，其商業(yè)價(jià)值占比也更重。但人類作為視覺動(dòng)物，視覺感受對(duì)于訪客來說尤為重要，視覺上的演繹比起網(wǎng)站其他內(nèi)容，更會(huì)影響網(wǎng)站的可信度，因此，網(wǎng)站的視覺起碼需要保證符合受眾群體的基礎(chǔ)審美。

我們常見的企業(yè)網(wǎng)站存在著一個(gè)嚴(yán)重的問題，缺乏品牌辨識(shí)度，假如你把左上角的品牌LOGO遮住，你可能完全看不出這是那家公司的官網(wǎng)，又或者把左上角的品牌LOGO替換一下，就成了別家公司的企業(yè)官網(wǎng)，這是網(wǎng)站嚴(yán)重缺乏品牌視覺識(shí)別所導(dǎo)致，這種網(wǎng)站無(wú)法讓訪客記住其品牌，更無(wú)法在訪客心里占領(lǐng)一席之地。

品牌基礎(chǔ)VI設(shè)計(jì)的應(yīng)用是最基礎(chǔ)也是最容易忽視的細(xì)節(jié)，它不僅是存在于初期建站，更是在網(wǎng)站迭代中，持續(xù)保持企業(yè)網(wǎng)站差異化的關(guān)鍵。

如何設(shè)計(jì)一個(gè)高辨識(shí)度的網(wǎng)站？VI（視覺識(shí)別系統(tǒng)）是品牌的視覺符號(hào)化，是品牌識(shí)別中最具傳播力和感染力的部分，它可以將品牌識(shí)別系統(tǒng)的非可視化內(nèi)容，轉(zhuǎn)化為靜態(tài)的視覺識(shí)別符號(hào)，它包含了品牌LOGO、標(biāo)準(zhǔn)色、象征圖形、標(biāo)準(zhǔn)字體等等。另外還會(huì)包含品牌核心價(jià)值和個(gè)性，不同的品牌VI是各個(gè)品牌之間形成差異化的根本原因之一。

因此，我們可以通過與品牌VI相結(jié)合的方式進(jìn)行設(shè)計(jì)，品牌VI可以有非常豐富多樣的應(yīng)用形式，在廣泛的層面上進(jìn)行直接的傳播，能夠在不同場(chǎng)景中的進(jìn)行應(yīng)用，讓人們快速辨認(rèn)出該品牌。

品牌LOGO則是最具辨識(shí)度的視覺符號(hào)，通過提取LOGO中的基因，延用到我們網(wǎng)站中，更有助于提升品牌辨識(shí)度。我們可以從兩個(gè)維度來提取：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是一抹橙色極簡(jiǎn)的彩虹形狀，天虹企業(yè)簡(jiǎn)介的Banner以及每個(gè)頁(yè)面的底部導(dǎo)航，都有將Logo這一特征延展出來的圖形設(shè)計(jì)。

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

2. LOGO的“色”。

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

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

在網(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á)信息。

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

icon設(shè)計(jì)中的品牌感是將品牌VI應(yīng)用到網(wǎng)站的關(guān)鍵，比如上方的那套icon，是由樂逍遙網(wǎng)站設(shè)計(jì)根據(jù)英威騰本身的品牌色彩和品牌調(diào)性進(jìn)行設(shè)計(jì)，應(yīng)用于官網(wǎng)是這樣的：另外，icon是網(wǎng)站中不可或缺的元素，充當(dāng)路標(biāo)，讓訪客能知道點(diǎn)擊后下一步是什么，也就有明確的心理預(yù)期。

如果icon按鈕不夠明確，訪客可能會(huì)不知道下一步是要購(gòu)買產(chǎn)品或者注冊(cè)用戶的步驟，并且可能直接瀏覽網(wǎng)站后就直接離開。

版式的如何融入品牌調(diào)性是很多設(shè)計(jì)師會(huì)忽略的一點(diǎn)，訪客來瀏覽網(wǎng)站時(shí)，首先感受到的第一點(diǎn)是色彩，第二則是版式，也就是整體給訪客的感覺。

符合品牌定位且具有辨識(shí)度的網(wǎng)頁(yè)版式設(shè)計(jì)應(yīng)該怎么做，它更需要從品牌特性中提取，無(wú)法像icon一樣從品牌logo和標(biāo)準(zhǔn)色中提取元素就可以做到的，更多是一個(gè)風(fēng)格化的設(shè)計(jì)。

舉個(gè)例子，這是一家高端的共享辦公室服務(wù)企業(yè)，從他們的品牌VI中可以感受到高端、輕奢、個(gè)性等關(guān)鍵詞，在其官網(wǎng)中，我們可以看到其與眾不同的板式設(shè)計(jì)，一眼就能感受出其品牌調(diào)性。

除了靜態(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ì)，而不是只追求表面炫酷花哨的效果。

在網(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ì)無(wú)誤的情況下，需要深入到思維上，一個(gè)網(wǎng)站的設(shè)計(jì)看似簡(jiǎn)單，像是色調(diào)、排版，都是設(shè)計(jì)師的基礎(chǔ)功夫，但是要真正做到一個(gè)優(yōu)質(zhì)的網(wǎng)站，其實(shí)并沒有想象中那么容易。

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

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

不為設(shè)計(jì)而設(shè)計(jì)不是將藝術(shù)“一棒敲死”，也并非拋棄創(chuàng)新創(chuàng)意，而是應(yīng)該更注重于強(qiáng)化產(chǎn)品，給滿足需求的產(chǎn)品力加持。

市面上有很多花里胡哨的網(wǎng)站，第一眼可能能夠驚艷到你，但是再深入只是空洞，事實(shí)上，能夠讓訪客長(zhǎng)時(shí)間記住你的并非第一眼，而是其內(nèi)在，也是我們一直堅(jiān)持的長(zhǎng)期主義價(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)品思維，樂逍遙網(wǎng)站設(shè)計(jì)更是將產(chǎn)品思維全流程化，這種模式下，每一環(huán)都串聯(lián)起來，不管是用戶體驗(yàn)，還是價(jià)值傳遞都非常有利。

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

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

重點(diǎn)還是在于用戶身上，也就訪客，先前通過市場(chǎng)調(diào)研分析出訪客畫像，可以掌握對(duì)訪客的審美基礎(chǔ)和交互邏輯認(rèn)知，結(jié)合起來進(jìn)行設(shè)計(jì)，當(dāng)然我們也提倡盡可能簡(jiǎn)化交互，并且讓網(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ì)不可缺少的一步。

增長(zhǎng)思維作為增長(zhǎng)建設(shè)三大思維之一，也是三大思維中最能激發(fā)網(wǎng)站商用價(jià)值的思維。

在視覺設(shè)計(jì)當(dāng)中，運(yùn)用增長(zhǎng)思維能夠有效強(qiáng)化網(wǎng)站，加強(qiáng)網(wǎng)站價(jià)值。

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

在商業(yè)之下，設(shè)計(jì)也需要理解營(yíng)銷，也需要懂增長(zhǎng)。

視覺動(dòng)線是指人們?cè)陂喿x時(shí)，視覺移動(dòng)時(shí)所形成的方向路徑。

早在十多年前，用戶體驗(yàn)專家雅各布·尼爾森博士提到“人們很少逐字閱讀網(wǎng)頁(yè)，相反，他們掃描頁(yè)面，挑選單個(gè)單詞和句子”。

正是如此，人們?cè)陂喿x的時(shí)候才會(huì)形成幾種常見的視覺動(dòng)線規(guī)律。

基于這兩種常見的視覺動(dòng)線，我們?cè)谧鼍W(wǎng)站的板式設(shè)計(jì)時(shí)，可以更合理地策劃視覺動(dòng)線。

其好處不僅能夠幫助訪客快速閱讀，快速獲取信息，提升用戶體驗(yàn)，還可以幫助我們引導(dǎo)訪客閱讀預(yù)設(shè)的信息，高效傳遞高價(jià)值信息，提高營(yíng)銷效率。

視覺層次應(yīng)該很好理解，即人們?cè)陂喿x時(shí)，能從視覺中感受到信息的層次，優(yōu)秀的視覺層次能夠非常高效地引導(dǎo)。

訪客閱讀更多內(nèi)容，并且通過信息的優(yōu)先級(jí)設(shè)計(jì)能更直觀地幫助我們傳網(wǎng)站達(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(zhǎng)的目的，常見的設(shè)計(jì)技巧為：通過「大小」、「色彩」、「重量」形成信息之間的層級(jí)對(duì)比，建立信息優(yōu)先級(jí)。

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

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

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

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

視覺設(shè)計(jì)是網(wǎng)站的一個(gè)重要層面，網(wǎng)站作為互聯(lián)網(wǎng)產(chǎn)品，則其視覺設(shè)計(jì)的本質(zhì)是價(jià)值傳遞，我們一直以增長(zhǎng)思維和產(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)站。

舉個(gè)例子，網(wǎng)站建好之后，往往會(huì)有一些重要的信息，想要傳遞給用戶，但是這些重要的信息是在頁(yè)面的上方還是下方，如何保證用戶在最短的時(shí)間內(nèi)看到重要的信息，這就是用戶體驗(yàn)需要研究的地方。

網(wǎng)站結(jié)構(gòu)的設(shè)計(jì)，有些公司為了讓自己的手機(jī)網(wǎng)頁(yè)更吸引人，所以會(huì)設(shè)計(jì)出一些個(gè)性鮮明的手機(jī)網(wǎng)站，其實(shí)這樣的網(wǎng)站效果并不好，網(wǎng)站設(shè)計(jì)的時(shí)候，一定要保證網(wǎng)站的界面干凈、清晰，也就是說，用戶看到你的網(wǎng)站，就會(huì)知道重點(diǎn)在哪里，這是一種視覺上的享受，讓人愿意繼續(xù)看下去。

從用戶的行為出發(fā)進(jìn)行設(shè)計(jì)，本質(zhì)上是一種行為，因?yàn)樾袨槭怯脩粜枨蟮耐庠诒憩F(xiàn)，因此，設(shè)計(jì)的本質(zhì)上是一種行為。

用戶需求是設(shè)計(jì)的重要依據(jù)，一切設(shè)計(jì)都應(yīng)以用戶的具體需求為出發(fā)點(diǎn)，以用戶的具體需求為出發(fā)點(diǎn)。

所以一個(gè)好的、科學(xué)的、合理的用戶界面，可以提高用戶的體驗(yàn)度，從而吸引用戶。

站在用戶的角度去思考，網(wǎng)站怎么做才能讓用戶更舒服，那就怎么做。

綜上所述，以上就是樂逍遙網(wǎng)站設(shè)計(jì)介紹網(wǎng)站設(shè)計(jì)需要掌握哪些思維，網(wǎng)站配色和網(wǎng)站內(nèi)容規(guī)劃，希望可以幫助到對(duì)此感興趣的朋友們更好的理解和加深對(duì)網(wǎng)站建設(shè)開發(fā)的印象，共同促進(jìn)網(wǎng)站開發(fā)技術(shù)的學(xué)習(xí)與穩(wěn)固，助力優(yōu)質(zhì)網(wǎng)站的崛起。

————————————————

版權(quán)聲明：本文為CSDN博主「樂逍遙網(wǎng)站設(shè)計(jì)」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：網(wǎng)站如何平衡藝術(shù)與商業(yè)，網(wǎng)站設(shè)計(jì)需要掌握哪些思維？