官網(wǎng)作為連接產(chǎn)品/企業(yè)與用戶(hù)的第一道門(mén)，給到用戶(hù)的第一印象至關(guān)重要。官網(wǎng)就像一個(gè)會(huì)自述的虛擬人物，我們通過(guò)視覺(jué)設(shè)計(jì)賦予它形象，它用符合人設(shè)性格的話(huà)術(shù)，向用戶(hù)介紹產(chǎn)品/企業(yè)。怎樣的形象、表述能獲取用戶(hù)好感及信賴(lài)，從而建立長(zhǎng)期合作關(guān)系呢？

我們先看下不同公司的云產(chǎn)品官網(wǎng)設(shè)計(jì)：

這 4 個(gè)"形象"，除了顏色和 logo 不同，風(fēng)格都是一樣的，語(yǔ)氣措辭也大同小異。如果我們拿掉 logo、去掉顏色是怎樣的效果？

大家是否能在第一時(shí)間辨別是哪家公司的官網(wǎng)？

話(huà)說(shuō)回來(lái)，這幾個(gè)網(wǎng)站的設(shè)計(jì)質(zhì)量都是行業(yè)內(nèi)的較高水準(zhǔn)，但同質(zhì)化嚴(yán)重。是我們被固化思維了嗎？是只有這樣的 3D 科技風(fēng)（或是 2.5D 擬 3D)才能體現(xiàn)云平臺(tái)的產(chǎn)品特點(diǎn)嗎？阿里站在行業(yè)的前端領(lǐng)跑，憑借其強(qiáng)大的技術(shù)實(shí)力和設(shè)計(jì)實(shí)力在前幾年就開(kāi)始將其產(chǎn)品官網(wǎng)、APP 的視覺(jué)風(fēng)格逐步 3D 化，并有了阿里動(dòng)物園大家族，其核心的產(chǎn)品都擁有了形象化 3D IP 形象。在他們領(lǐng)跑的同時(shí)，其他大廠不甘落后，紛紛改版意圖趕超，久而久之同質(zhì)化的問(wèn)題就越來(lái)越明顯。子曰："三人行，必有我?guī)熝?；擇其善者而從之，其不善者而改之?quot;借鑒學(xué)習(xí)是很正常的事情，但是在借鑒的同時(shí)更應(yīng)該體現(xiàn)自己的特點(diǎn)，否則就變成了"copy 不走樣"了。

比如說(shuō)現(xiàn)在被大量運(yùn)用的輕擬物 3D 圖標(biāo)，圖標(biāo)風(fēng)格酷炫科技有質(zhì)感，但卻大大削弱了識(shí)別性。由于單個(gè)圖標(biāo)本身復(fù)雜度就很高，在看的時(shí)候大腦就需要去解讀識(shí)別其含義，當(dāng)多個(gè)圖標(biāo)同時(shí)出現(xiàn)的時(shí)候，更是造成了識(shí)別超負(fù)荷。

我們單對(duì)比下面兩組圖標(biāo)，第一組識(shí)別度會(huì)更高，大多立體圖形的輪廓形態(tài)不一，彩色占比高，增加了豐富度和對(duì)比度；再看第二組圖標(biāo)，大多圖標(biāo)立體形態(tài)都是正方體、長(zhǎng)方體、圓柱體，相對(duì)規(guī)整，且彩色占比較少，圖標(biāo)的層次感和豐富度就不足，這樣識(shí)別度就降低了。

《設(shè)計(jì)師要懂心理學(xué)》這本書(shū)中提及：

1. 要讓某個(gè)物體易于識(shí)別，就用簡(jiǎn)單的幾何圖形來(lái)畫(huà)它。這會(huì)讓構(gòu)成物體的幾何離子更明顯，從而使人更快、更輕松地識(shí)別該物體。
2. 多用二維元素，少用三維元素。大腦以二維形式接收人眼觀察到的信息，因此屏幕上的三維圖形可能會(huì)減慢識(shí)別和理解的速度。

輕擬物立體圖標(biāo)可以用，但需適量，切忌過(guò)猶不及。

云產(chǎn)品的官網(wǎng)設(shè)計(jì)趨同化是一個(gè)比較明顯可見(jiàn)的例子，此類(lèi)官網(wǎng)都屬于軟件服務(wù)類(lèi)產(chǎn)品官網(wǎng)，其他常見(jiàn)官網(wǎng)類(lèi)型還有企業(yè)官網(wǎng)、電商官網(wǎng)（B2C\B2B\C2C\D2C\O2O）、門(mén)戶(hù)網(wǎng)站、綜合服務(wù)型網(wǎng)站等等。

一、萬(wàn)能的 "3W1H"法則

在任何事情開(kāi)始之前，我們都要找到方法和思路，幫助我們順利的推進(jìn)項(xiàng)目，這里我又要拿出萬(wàn)能法則了，這是一個(gè)基本思路，"3W1H"=What、When、Why、How。

What

1. 設(shè)計(jì)官網(wǎng)的目的是什么？你要做的是什么類(lèi)型的官網(wǎng)？
2. 目標(biāo)用戶(hù)是誰(shuí)？他們想要在網(wǎng)站上獲取什么信息？

When

1. 目標(biāo)用戶(hù)何時(shí)會(huì)想要訪(fǎng)問(wèn)網(wǎng)站，存在幾種可能觸發(fā)的場(chǎng)景？

Why

1. 目標(biāo)用戶(hù)為什么會(huì)訪(fǎng)問(wèn)網(wǎng)站？
2. 為什么沒(méi)有促成轉(zhuǎn)化？

How

1. 用戶(hù)如何搜索到該網(wǎng)站？
2. 如何在網(wǎng)站上快速找到有價(jià)值的信息？
3. 如何操作使用？

好的設(shè)計(jì)是能捕捉到用戶(hù)心智的設(shè)計(jì)。設(shè)計(jì)不僅需要有強(qiáng)邏輯性，還需要明白用戶(hù)為何使用、如何使用。我們需要了解用戶(hù)每次每個(gè)行為背后的動(dòng)機(jī)和認(rèn)知是如何的。想他所想，才可以幫助產(chǎn)品/企業(yè)最大程度的觸達(dá)用戶(hù)。

二、官網(wǎng)設(shè)計(jì) SOP

我們根據(jù)以往經(jīng)驗(yàn)的總結(jié)，沉淀了一套官網(wǎng)設(shè)計(jì)的標(biāo)準(zhǔn)流程，同時(shí)針對(duì)產(chǎn)品類(lèi)官網(wǎng)我們定義了一套標(biāo)準(zhǔn)化官網(wǎng)模版，面對(duì)矩陣式的家族產(chǎn)品，都可以套用該模版以保證其統(tǒng)一性和搭建效率。

那我們以公司企業(yè)官網(wǎng)的改版案例帶入來(lái)看看如何去做官網(wǎng)的視覺(jué)升級(jí)以及官網(wǎng)設(shè)計(jì)的標(biāo)準(zhǔn)流程。

1. 洞察 & 創(chuàng)意

① 項(xiàng)目背景

GTech 佳應(yīng)科技是數(shù)字化零售與電商技術(shù)服務(wù)商，業(yè)務(wù)遍布中國(guó)、新加坡、馬來(lái)西亞及印尼等多個(gè)國(guó)家。公司旗下的 SpeedShop 系列產(chǎn)品，其中 speedshop commerce 是企業(yè)級(jí)電商業(yè)務(wù)平臺(tái)，為全球品牌量身打造，助力品牌業(yè)務(wù) DTC 全球化拓展；還有 B2B 數(shù)字化平臺(tái)，助力企業(yè)實(shí)現(xiàn)端到端、全鏈路營(yíng)銷(xiāo)閉環(huán)和業(yè)務(wù)運(yùn)營(yíng)在線(xiàn)化。

隨著公司產(chǎn)品線(xiàn)的戰(zhàn)略調(diào)整以及公司業(yè)務(wù)的不斷發(fā)展，原有官網(wǎng)設(shè)計(jì)及內(nèi)容架構(gòu)已經(jīng)無(wú)法承載及精確傳遞新的企業(yè)發(fā)展藍(lán)圖，我們需要通過(guò)全新的品牌傳達(dá)，來(lái)迭代用戶(hù)對(duì)我們的品牌認(rèn)知。

② 競(jìng)品分析

公司分為產(chǎn)品部門(mén)和項(xiàng)目實(shí)施部門(mén)，從產(chǎn)品定位來(lái)看，競(jìng)品公司是 shopline、shopify、bigcommerce 等 SaaS 建站公司，從項(xiàng)目來(lái)看，競(jìng)品公司是商派、百盛、伯俊等 IT 項(xiàng)目公司。我們分別對(duì)其進(jìn)行了視覺(jué)及網(wǎng)站結(jié)構(gòu)、內(nèi)容的分析，從而得出以下結(jié)論：

第一，是清晰有條理的內(nèi)容及網(wǎng)站結(jié)構(gòu)，明確的傳達(dá)出公司產(chǎn)品能力及項(xiàng)目實(shí)施能力，抓住差異化的點(diǎn)去突出描述，讓用戶(hù)能夠明確認(rèn)識(shí)到我們與他們的不同之處，從而幫助及推動(dòng)用戶(hù)做選擇；

第二，是商業(yè)化產(chǎn)品是公司核心價(jià)值的體現(xiàn)，我們所有的產(chǎn)品都支持多語(yǔ)言，官網(wǎng)的視覺(jué)語(yǔ)言也需要與國(guó)際接軌。

③ 用戶(hù)畫(huà)像

從訪(fǎng)問(wèn)意圖上來(lái)看，可簡(jiǎn)單分為兩類(lèi)：尋求合作、瀏覽了解。

不同用戶(hù)在網(wǎng)站上瀏覽的重點(diǎn)是不同的，對(duì)于面試者，他們關(guān)注公司介紹及業(yè)務(wù)范圍，在面試時(shí)更加有的放矢，同時(shí)也考察是否符合自己的求職目標(biāo)。對(duì)于公司員工，需要關(guān)注公司的產(chǎn)品動(dòng)向，最新戰(zhàn)略。對(duì)于核心用戶(hù)-中小企業(yè)及大企業(yè)客戶(hù)，需要通過(guò)官網(wǎng)上的業(yè)務(wù)范圍和產(chǎn)品功能介紹，去和自己公司的需求進(jìn)行匹配，同時(shí)會(huì)查看客戶(hù)案例及背書(shū)，當(dāng)基本符合訴求的時(shí)候就會(huì)發(fā)起咨詢(xún)，所以官網(wǎng)上的意圖傳遞需要精準(zhǔn)明確。

④ 企業(yè)/產(chǎn)品理念

我們?cè)L談了公司了領(lǐng)導(dǎo)層及產(chǎn)品負(fù)責(zé)人，對(duì)齊了大家對(duì)公司及產(chǎn)品的定位及發(fā)展愿景，提煉出了 3 個(gè)關(guān)鍵詞"國(guó)際化、商業(yè)化、數(shù)智化"，同時(shí)會(huì)作為企業(yè)官網(wǎng)的底層內(nèi)核。

⑤ 設(shè)計(jì)趨勢(shì)

我們可以輕易的從網(wǎng)上獲取到近些年的網(wǎng)站設(shè)計(jì)趨勢(shì)，比如新極簡(jiǎn)主義、超大文本排版、交互式網(wǎng)站、以 3D 場(chǎng)景或者動(dòng)畫(huà)展示為主題、抽象插畫(huà)（以圖形、符號(hào)為主）、流體漸變、彌散柔光、玻璃風(fēng)格等等，在了解了這些形式之后，我們結(jié)合實(shí)際需要展示的內(nèi)容以及后續(xù)維護(hù)的靈活性、拓展性，去進(jìn)行方案設(shè)計(jì)。

⑥ 頭腦風(fēng)暴

企業(yè)官網(wǎng)與市場(chǎng)部、產(chǎn)品部、銷(xiāo)售部息息相關(guān)，我們邀請(qǐng)了相關(guān)同事一起進(jìn)行"頭腦風(fēng)暴"，另外我們還組織了一場(chǎng)外援腦暴，邀請(qǐng)了合作公司的幾位同事在線(xiàn)參與，目的是想了解，用戶(hù)究竟想要在我們的官網(wǎng)上看到哪些內(nèi)容，優(yōu)先級(jí)是怎樣的？

內(nèi)部訴求

「你希望在官網(wǎng)展示哪些內(nèi)容，并進(jìn)行優(yōu)先級(jí)排序」

「選出能體現(xiàn)企業(yè)文化的圖片」

「你心中好的企業(yè)官網(wǎng)是怎樣的？哪些官網(wǎng)你覺(jué)得設(shè)計(jì)的很棒？」

外部訴求

「你希望在官網(wǎng)看到哪些內(nèi)容，并進(jìn)行優(yōu)先級(jí)排序」

「哪些內(nèi)容或是數(shù)據(jù)讓你產(chǎn)生興趣，并想與我們進(jìn)一步聯(lián)系」

「你覺(jué)得官網(wǎng)上還缺少什么內(nèi)容嗎？」

所有的 idea 收集完成后，我們需要聚合、提取出有價(jià)值有共性的點(diǎn)進(jìn)行后續(xù)的方案設(shè)計(jì)的。

⑦ 產(chǎn)出概念

經(jīng)過(guò)各種維度的調(diào)研之后，需要將提煉出的關(guān)鍵字、代表色融入到設(shè)計(jì)中，更直觀的進(jìn)行比對(duì)。我們用 2 周的時(shí)間產(chǎn)出了 3 稿方案進(jìn)行全公司范圍的投票，加之領(lǐng)導(dǎo)層的投票，最終一錘定音。

定稿設(shè)計(jì)解析

「顏色」

舊版的視覺(jué)語(yǔ)言以天藍(lán)色、彩色插畫(huà)進(jìn)行構(gòu)建，對(duì)于專(zhuān)業(yè)度、國(guó)際化、數(shù)智化的感知力不足，新版的配色使用深藍(lán)、黑、白、淺灰，深藍(lán)色所傳達(dá)的是"冷靜、睿智、專(zhuān)業(yè)"的；黑色更增加了"神秘而炫酷"的科技感，白色、淺灰用以調(diào)和深藍(lán)和黑色的壓抑感，讓整體視覺(jué)平衡且具有呼吸感。

「框架」

我們定義了一套標(biāo)準(zhǔn)化官網(wǎng)模版，保證矩陣式的家族產(chǎn)品官網(wǎng)的統(tǒng)一性和搭建效率。模版不會(huì)限制風(fēng)格，每個(gè)產(chǎn)品在框架結(jié)構(gòu)層根據(jù)規(guī)范，使用統(tǒng)一的文字層級(jí)、柵格系統(tǒng)、組件布局、交互規(guī)則，視覺(jué)層都可以根據(jù)產(chǎn)品定位發(fā)散設(shè)計(jì)，確保讓每個(gè)產(chǎn)品都能有個(gè)性化的差異設(shè)計(jì)，從而提升辨識(shí)度。

2. 設(shè)計(jì) & 定義

① 制定框架

市場(chǎng)部的同事會(huì)根據(jù)討論提供最終的網(wǎng)站結(jié)構(gòu)圖。

② 內(nèi)容文案

網(wǎng)站結(jié)構(gòu)確定后，需要填充每個(gè)頁(yè)面的內(nèi)容，并且對(duì)于文案進(jìn)行反復(fù)斟酌，我們需要根據(jù)預(yù)設(shè)的人物性格，進(jìn)行情感化表達(dá)。清晰明確的語(yǔ)言表達(dá)能夠讓用戶(hù)更容易理解；情感化的措辭更加親切，能拉近與用戶(hù)的距離；全站統(tǒng)一的文案，能讓用戶(hù)感受到一致的體驗(yàn)和專(zhuān)業(yè)性。好的文案和內(nèi)容，就像是在官網(wǎng)的框架（骨架）之上賦予血肉之軀。

另外，我們提供中、英文雙語(yǔ)，要考慮語(yǔ)境去翻譯文字，使得不同國(guó)家的用戶(hù)都能準(zhǔn)確理解官網(wǎng)所傳遞的信息。

*下圖為產(chǎn)品市場(chǎng)部的同事在 wiki 上維護(hù)的官網(wǎng)內(nèi)容。

③ 設(shè)計(jì)排期

與此同時(shí)，設(shè)計(jì)會(huì)在 wiki 上建立設(shè)計(jì)排期表，市場(chǎng)部的同事將頁(yè)面內(nèi)容準(zhǔn)備好的時(shí)候，Content 列會(huì)標(biāo)記為"DONE"，此時(shí)設(shè)計(jì)師可以進(jìn)行排期，將頁(yè)面設(shè)計(jì)狀態(tài)更新為"DONE"時(shí)，前端工程師就可以開(kāi)始了。這樣，項(xiàng)目相關(guān)者可以看到每個(gè)頁(yè)面的設(shè)計(jì)和開(kāi)發(fā)負(fù)責(zé)人、設(shè)計(jì)起始時(shí)間，開(kāi)發(fā)起始時(shí)間，使得官網(wǎng)項(xiàng)目的管理更加有序直觀。

④ 定義規(guī)則

明確頁(yè)面適配規(guī)則

主流的 PC 屏幕寬度是 1280px～1920px，我們以 1200px 作為頁(yè)面版心進(jìn)行設(shè)計(jì)，自適應(yīng)布局到移動(dòng)端，移動(dòng)端的設(shè)計(jì)需要注意盡量不要過(guò)長(zhǎng)，突出核心內(nèi)容，次要信息可以折疊或者通過(guò)橫向滑動(dòng)查看。

明確每個(gè)頁(yè)面的交互動(dòng)效

網(wǎng)站的設(shè)計(jì)，從點(diǎn)到面再到點(diǎn)，從視覺(jué)到交互事無(wú)巨細(xì)。比如頁(yè)面滾動(dòng)時(shí)文字和圖片如何展示、按鈕的交互、輪播 banner 的切換效果及速度等等。設(shè)計(jì)師首先需要了解你所想要的動(dòng)效能否被實(shí)現(xiàn)，并將你想要的效果傳達(dá)給開(kāi)發(fā)，達(dá)成一致。

簡(jiǎn)單說(shuō)下基礎(chǔ)動(dòng)效，這個(gè)最常用最實(shí)用。在 css 里 animation-name 定義要使用哪種動(dòng)畫(huà)關(guān)鍵幀，animation-delay 是設(shè)置動(dòng)畫(huà)開(kāi)始之前的延遲時(shí)間，animation-direction 定義了播放動(dòng)畫(huà)的方向，animation-duration 定義了動(dòng)畫(huà)的持續(xù)時(shí)間，animation-iteration-count 定義動(dòng)畫(huà)的播放次數(shù)，animation-timing-function 定義的是動(dòng)畫(huà)的變速效果。

我們前端目前是引用了 animate.css，js 文件會(huì)控制標(biāo)記了 animation 的元素進(jìn)入到 viewport（視口）時(shí)，元素自下而上漸顯展示。在設(shè)計(jì)師具備基礎(chǔ)知識(shí)的情況下，再去跟前端溝通想要的效果，會(huì)事半功倍。

3. 上線(xiàn) & 驗(yàn)證

① 設(shè)計(jì)走查

設(shè)計(jì)稿一般會(huì)分批次交付，開(kāi)發(fā)也是在第一批設(shè)計(jì)交付的時(shí)候開(kāi)始正式加入，第二批設(shè)計(jì)稿完成前第一批交付的就開(kāi)發(fā)完成上到開(kāi)發(fā)環(huán)境，設(shè)計(jì)師在此時(shí)就可以開(kāi)始走查，一些全局性的問(wèn)題在此時(shí)提出，后續(xù)再開(kāi)發(fā)的時(shí)候就可以避免重復(fù)修改，也能提前和開(kāi)發(fā)磨合想法，這樣后期的效率會(huì)提升很多。

走查過(guò)程中我們會(huì)在 wiki 建立走查表，如下：

② 網(wǎng)站埋點(diǎn)

需要注意的是，中國(guó) PIPL《個(gè)人信息保護(hù)法》出臺(tái)之后，如果繼續(xù)按照以往的認(rèn)知使用 GA 分析工具，那你就可能會(huì)涉及數(shù)據(jù)出境的問(wèn)題了。因?yàn)? GA 的數(shù)據(jù)中心在中國(guó)沒(méi)有布點(diǎn)，那我們通過(guò) GA 獲取的用戶(hù)行為數(shù)據(jù)，最終就是存儲(chǔ)到境外的數(shù)據(jù)中心，這也就造成了前面說(shuō)的問(wèn)題。所以為了不要給公司帶來(lái)不必要的麻煩，我們可以使用國(guó)內(nèi)的第三方埋點(diǎn)服務(wù)商。

③ 發(fā)布上線(xiàn)

發(fā)布之前，我們需要檢查走查表上記錄的問(wèn)題是否都被解決，并且協(xié)同市場(chǎng)同事再進(jìn)行最后一次的文案復(fù)查，一切就緒之后就可以提交上線(xiàn)申請(qǐng)。網(wǎng)站正式上線(xiàn)之后也需要第一時(shí)間再全部 review 一遍，避免發(fā)布過(guò)程中產(chǎn)生了 bug 或數(shù)據(jù)遺漏。

④ 數(shù)據(jù)復(fù)盤(pán)

網(wǎng)站上線(xiàn)后，我們需要對(duì)比改版前后的數(shù)據(jù)變化，利用數(shù)據(jù)分析發(fā)現(xiàn)問(wèn)題并著眼于用戶(hù)訪(fǎng)問(wèn)過(guò)中的流失點(diǎn)，進(jìn)行持續(xù)的運(yùn)營(yíng)調(diào)整和設(shè)計(jì)調(diào)整。

網(wǎng)站改版總結(jié)

期望這次的網(wǎng)站升級(jí)更為精準(zhǔn)的將公司戰(zhàn)略傳達(dá)至用戶(hù)，并建立"國(guó)際化、商業(yè)化、數(shù)智化"的企業(yè)形象，讓用戶(hù)形成認(rèn)知，并產(chǎn)生價(jià)值認(rèn)同，從而提升企業(yè)的行業(yè)影響力。

以上就是我們做官網(wǎng)升級(jí)全流程，靜態(tài)網(wǎng)站的設(shè)計(jì)相對(duì)動(dòng)態(tài)網(wǎng)站的流程簡(jiǎn)單很多，動(dòng)態(tài)網(wǎng)站比如內(nèi)容型的知乎這種內(nèi)容平臺(tái)，用戶(hù)需要注冊(cè)登錄、發(fā)布問(wèn)答、評(píng)論等功能型的網(wǎng)站，或是品牌電商官網(wǎng)有標(biāo)準(zhǔn)的購(gòu)物、售后流程。除了網(wǎng)站的視覺(jué)效果設(shè)計(jì)，交互體驗(yàn)的設(shè)計(jì)會(huì)花費(fèi)更多的時(shí)間與精力。

寫(xiě)在最后

設(shè)計(jì)師并不只是在"設(shè)計(jì)"，不要只流于表面，要對(duì)內(nèi)在進(jìn)行深層的探索與思考，才能讓設(shè)計(jì)更有價(jià)值。官網(wǎng)的設(shè)計(jì)及升級(jí)也不僅僅是設(shè)計(jì)師的事情，需要跨部門(mén)協(xié)同開(kāi)發(fā)、運(yùn)營(yíng)一起，分工明確，各自的工作計(jì)劃、進(jìn)度都公開(kāi)透明，可供任何相關(guān)者查閱。

最后，在做任何設(shè)計(jì)之時(shí)，請(qǐng)問(wèn)問(wèn)自己以下幾點(diǎn)我們做到了嗎？

1. 做足功課，才能高瞻遠(yuǎn)矚
2. 不盲目跟隨趨勢(shì)，尋求差異化，出奇制勝
3. 不要為了設(shè)計(jì)而設(shè)計(jì)，符合企業(yè)/產(chǎn)品內(nèi)核最重要
4. 讓你的設(shè)計(jì)不言而喻

美好的設(shè)計(jì)源于我們的熱愛(ài)，以及足夠的了解。讓我們做出更有靈魂的設(shè)計(jì)吧！

作者：Gtech UED