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

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

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

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

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

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

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

《設計師要懂心理學》這本書中提及：

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

輕擬物立體圖標可以用，但需適量，切忌過猶不及。

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

一、萬能的 "3W1H"法則

在任何事情開始之前，我們都要找到方法和思路，幫助我們順利的推進項目，這里我又要拿出萬能法則了，這是一個基本思路，"3W1H"=What、When、Why、How。

What

1. 設計官網(wǎng)的目的是什么？你要做的是什么類型的官網(wǎng)？
2. 目標用戶是誰？他們想要在網(wǎng)站上獲取什么信息？

When

1. 目標用戶何時會想要訪問網(wǎng)站，存在幾種可能觸發(fā)的場景？

Why

1. 目標用戶為什么會訪問網(wǎng)站？
2. 為什么沒有促成轉化？

How

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

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

二、官網(wǎng)設計 SOP

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

那我們以公司企業(yè)官網(wǎng)的改版案例帶入來看看如何去做官網(wǎng)的視覺升級以及官網(wǎng)設計的標準流程。

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

① 項目背景

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

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

② 競品分析

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

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

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

③ 用戶畫像

從訪問意圖上來看，可簡單分為兩類：尋求合作、瀏覽了解。

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

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

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

⑤ 設計趨勢

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

⑥ 頭腦風暴

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

內(nèi)部訴求

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

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

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

外部訴求

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

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

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

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

⑦ 產(chǎn)出概念

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

定稿設計解析

「顏色」

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

「框架」

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

2. 設計 & 定義

① 制定框架

市場部的同事會根據(jù)討論提供最終的網(wǎng)站結構圖。

② 內(nèi)容文案

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

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

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

③ 設計排期

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

④ 定義規(guī)則

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

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

明確每個頁面的交互動效

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

簡單說下基礎動效，這個最常用最實用。在 css 里 animation-name 定義要使用哪種動畫關鍵幀，animation-delay 是設置動畫開始之前的延遲時間，animation-direction 定義了播放動畫的方向，animation-duration 定義了動畫的持續(xù)時間，animation-iteration-count 定義動畫的播放次數(shù)，animation-timing-function 定義的是動畫的變速效果。

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

3. 上線 & 驗證

① 設計走查

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

走查過程中我們會在 wiki 建立走查表，如下：

② 網(wǎng)站埋點

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

③ 發(fā)布上線

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

④ 數(shù)據(jù)復盤

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

網(wǎng)站改版總結

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

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

寫在最后

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

最后，在做任何設計之時，請問問自己以下幾點我們做到了嗎？

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

美好的設計源于我們的熱愛，以及足夠的了解。讓我們做出更有靈魂的設計吧！

作者：Gtech UED