本篇文章作者復(fù)盤了一次舊網(wǎng)站全新設(shè)計(jì)的整個(gè)過程，其中更多地介紹了過程中的一些思考。

記：第一次改版從2017年9月開始構(gòu)思，到2017年12月上線。再加上此次2018年底的改版（還未上線）來復(fù)盤一下一個(gè)舊網(wǎng)站的全新更迭的思考過程。如有不當(dāng)之處，望能指出。

一、項(xiàng)目背景

隨著互聯(lián)網(wǎng)浪潮的推動(dòng)，我們眼看競(jìng)爭(zhēng)對(duì)手的官網(wǎng)視覺效果越來越好，而我們的官網(wǎng)形象卻一直與時(shí)代格格不入，無法突出客服系統(tǒng)產(chǎn)品優(yōu)勢(shì)。

恰逢SaaS元年的大爆發(fā)，公司不得不將官網(wǎng)更新提上日程。于是開展了此次項(xiàng)目。

二、信息架構(gòu)重組

1. 老官網(wǎng)信息要點(diǎn)提取

過去十年的網(wǎng)站有一個(gè)特點(diǎn)，就是愛將所有信息和入口都放在首頁，雖然說有助于增加內(nèi)容曝光度，但無法在第一時(shí)間抓住用戶焦點(diǎn)。順應(yīng)新時(shí)代的趨勢(shì)，我們需要對(duì)信息架構(gòu)進(jìn)行梳理。

從老網(wǎng)站上，我們可以提取出如下幾個(gè)重要信息要點(diǎn)：

2. 信息層級(jí)排序

對(duì)于初次訪問的訪客來說，重要且高頻的是：注冊(cè)、產(chǎn)品列表、咨詢?nèi)肟?、案?解決方案、下載（此外還有 價(jià)格 這一重要信息）；

對(duì)于老用戶來說，重要且高頻的是：登錄、充值、咨詢?nèi)肟?、下載、我的快服。

因?yàn)槲覀兊墓倬W(wǎng)主要是面向新用戶宣傳的，只有少部分老用戶有用官網(wǎng)登錄的習(xí)慣，所以初步總結(jié)：

• 一級(jí)導(dǎo)航為：注冊(cè)/登錄、咨詢?nèi)肟?、產(chǎn)品列表、下載、案例/解決方案、價(jià)格；
• 二級(jí)為：充值、我的快服、幫助/常見問題、關(guān)于53；
• 三級(jí)為：網(wǎng)上營(yíng)業(yè)廳、友情鏈接、授權(quán)聲明/認(rèn)證。

3. 通用部分

基于整個(gè)網(wǎng)站的通用部分為頁首（頂欄和導(dǎo)航欄）和頁尾（尾部導(dǎo)航和注腳），所以應(yīng)先重列好這幾個(gè)部分的信息要點(diǎn)。

頂欄（可以沒有，一般是用于展示網(wǎng)站外的更多信息）：老版的企業(yè)會(huì)員數(shù)的不斷刷新，這點(diǎn)確實(shí)對(duì)于用戶有積極的心理暗示。所以這個(gè)特色給予保留。

導(dǎo)航欄：依次為 logo 、首頁、產(chǎn)品列表、案例/解決方案、下載、價(jià)格、關(guān)于我們、注冊(cè)/登錄。整體布局選擇了最常規(guī)的左logo+菜單+右注冊(cè)/登錄入口，減少用戶認(rèn)知負(fù)擔(dān)。

（由于我們的幫助中心的問題和回答已經(jīng)很多年沒有更新，重建起來非常的困難，所以我們?cè)趦r(jià)格頁面增加了常見問題模塊，將老的幫助中心鏈接放在頁尾）

尾部導(dǎo)航：放置其他產(chǎn)品鏈接；常見問題、網(wǎng)上營(yíng)業(yè)廳、會(huì)員俱樂部等次級(jí)鏈接；公司郵箱電話和微信公眾號(hào)等。

注腳：版權(quán)、許可證和網(wǎng)絡(luò)認(rèn)證。

三、設(shè)計(jì)探索

1. 頁面布局/內(nèi)容探索

以首頁為例，確定內(nèi)容的思路：

先思考做這個(gè)頁面是為了什么？

→ 告訴訪客我們的產(chǎn)品是干什么的，且行業(yè)優(yōu)勢(shì)是什么。

如何寫介紹讓訪客第一時(shí)間了解產(chǎn)品？?jī)?yōu)勢(shì)如何表現(xiàn)？

→ 直接在banner寫明我們的產(chǎn)品是：會(huì)營(yíng)銷的客服系統(tǒng)。我們的優(yōu)勢(shì)：價(jià)格低，轉(zhuǎn)化高。

→ 在首頁標(biāo)明價(jià)格和功能，但凡訪客有對(duì)比過其他競(jìng)品，就知道我們產(chǎn)品是真的價(jià)格低，功能全。轉(zhuǎn)化高體現(xiàn)在會(huì)主動(dòng)營(yíng)銷吸引訪客轉(zhuǎn)化。且足夠智能，能幫客服減少大量的時(shí)間，讓服務(wù)質(zhì)量提升以促成轉(zhuǎn)化。

其他增加品牌形象模塊：公司資質(zhì)、客戶量、客戶案例展示等。

簡(jiǎn)單思考過后，整個(gè)模塊布局大概就出來了。

• 頂欄+一級(jí)菜單：頂欄放置二級(jí)菜單與信息，一級(jí)菜單放置logo和各頁面入口、注冊(cè)登錄入口；
• banner：產(chǎn)品介紹+配圖+CTA按鈕；
• 各個(gè)版本價(jià)格+介紹：版本簡(jiǎn)介/價(jià)格+詳情轉(zhuǎn)跳鏈接，轉(zhuǎn)跳到對(duì)應(yīng)頁面；
• 優(yōu)勢(shì)功能：介紹產(chǎn)品優(yōu)勢(shì)，給訪客建立品牌形象和積極心理認(rèn)知；
• 注冊(cè)入口：注冊(cè)輸入框+大客戶品牌案例背書，增加訪客注冊(cè)動(dòng)力；
• 頁尾導(dǎo)航&注腳：友情鏈接和公司聯(lián)系方式；版權(quán)/許可證和網(wǎng)絡(luò)認(rèn)證，標(biāo)明網(wǎng)站可信度。

然后，我們需要考慮的是以競(jìng)品為參考基準(zhǔn)，如何在同模塊上做到比競(jìng)品更好。比如banner文案，怎么介紹才能讓客戶在同時(shí)看到我們和競(jìng)品的網(wǎng)站時(shí)選擇我們？

基于這個(gè)回答可以繼續(xù)問自己：這個(gè)文案突出了我們產(chǎn)品的最大賣點(diǎn)了嗎？各個(gè)模塊以此類推。

和同行比較時(shí)，有一個(gè)思路模板可以套用：人無我有，人有我優(yōu)，人優(yōu)我廉，于此出發(fā)來構(gòu)思會(huì)簡(jiǎn)單的多。

當(dāng)然，內(nèi)容層面上，我們起碼要先過了自己這關(guān)，自己覺得做的比競(jìng)品好了，訪客才有選擇我們的可能。

剩下的頁面也能通過問自己“該頁要達(dá)到什么樣的目的？怎么做”來推出模塊結(jié)構(gòu)。當(dāng)然前提是你要瀏覽過大量的同類網(wǎng)站，對(duì)各個(gè)模塊做到心中有底。

2. 網(wǎng)站風(fēng)格探索

有了內(nèi)容，接下來就是設(shè)計(jì)風(fēng)格的確立，很多工具類軟件網(wǎng)站和客服系統(tǒng)競(jìng)品網(wǎng)站都有的共同點(diǎn)，就是圖形化、配色艷麗，整體風(fēng)格很年輕，圖形化往往更能直觀的表達(dá)產(chǎn)品特性。

要把這個(gè)詞變成整個(gè)可執(zhí)行的規(guī)范不是可以一步到位的事情。第一步，先確定主題色（如果有傳承的品牌色則無需改動(dòng)或微調(diào)即可），再具象到網(wǎng)站配圖、圖標(biāo)等，慢慢的建立起整個(gè)風(fēng)格的雛形。

確定主題色：

最直接的方法就是印象板提取法：確定幾個(gè)網(wǎng)站或產(chǎn)品關(guān)鍵詞，并由關(guān)鍵詞開始具象到實(shí)物，再在百度上大量搜索相關(guān)圖片。這樣會(huì)形成一個(gè)大體色。再把這個(gè)大體色微調(diào)，作為自己的品牌色即可。

圖標(biāo)&配圖風(fēng)格：

配圖的話可以選取一個(gè)頁面，大致鋪出各個(gè)模塊，稍微做到高保真來進(jìn)行風(fēng)格預(yù)覽。高清大圖、手繪風(fēng)插畫、2.5D、C4D實(shí)物構(gòu)圖都可以嘗試，符合自己官網(wǎng)要表達(dá)的調(diào)性就行。

圖標(biāo)的風(fēng)格確定可以先找出三個(gè)需要圖標(biāo)來表達(dá)的關(guān)鍵詞（為什么要選三個(gè)？因?yàn)槿齻€(gè)圖標(biāo)能看出系列風(fēng)格的效果，兩個(gè)太少，四個(gè)的話工作量又太大了），顏色的話可以由品牌色略做擴(kuò)展，也可少量加入點(diǎn)綴色。

形式上不要太過局限，可參考其他別人的作品，2.5D、長(zhǎng)投影、MBE等風(fēng)格都可以嘗試一下。需要注意的是，圖標(biāo)和配圖風(fēng)格最好統(tǒng)一，不然會(huì)顯得不倫不類。

在圖標(biāo)和配圖搭配達(dá)到滿意的情況下再對(duì)圖標(biāo)進(jìn)行微調(diào)衍生以適用于不同場(chǎng)景。

四、規(guī)范制定

在確定好內(nèi)容和風(fēng)格以后，可以先做一頁高保真網(wǎng)頁來制定出設(shè)計(jì)規(guī)范，比如文字顏色大小間距、圖文大小位置等。然后根據(jù)這個(gè)規(guī)范來制作其他頁面。

在根據(jù)這個(gè)規(guī)則產(chǎn)出其他頁面的時(shí)候可能會(huì)發(fā)現(xiàn)這個(gè)規(guī)范特別局限。這時(shí)候就要好好思考一下通用性是否夠好，若不夠好的話就修改。

如果在衍生頁面制作過程中發(fā)現(xiàn)有些情況是規(guī)范中沒有的，那就及時(shí)添加上去。這樣下來，自己就有了一套成文的規(guī)范，做起來會(huì)更有底些。

五、適配

現(xiàn)在主流的網(wǎng)站都是做自適應(yīng)，即根據(jù)屏幕大小自動(dòng)來調(diào)整布局。可以擴(kuò)展一個(gè)更大的版本和移動(dòng)版來告訴前端如何去設(shè)置模塊的流動(dòng)和縮放規(guī)則，比如Apple官網(wǎng)。

當(dāng)然最重要的是定義好各個(gè)元素屬于哪種組件，適配規(guī)則是什么。

1. 設(shè)計(jì)稿尺寸

為了預(yù)覽不同屏幕的效果，可基于基礎(chǔ)版本（1200寬，內(nèi)容960）衍生出其他版本設(shè)計(jì)稿：

• 版本1：400寬（內(nèi)容320）
• 版本2：960寬（內(nèi)容768）
• 版本3：1200寬（內(nèi)容960）

400px為最小尺寸，小于400時(shí)，界面為版本1，固定間距。

大于400小于960時(shí)，界面為版本1，隨屏幕變寬自動(dòng)調(diào)整間距。

大于960小于1200時(shí)，界面為版本2，隨屏幕變寬自動(dòng)調(diào)整間距。

大于1200時(shí)，界面為版本3，隨屏幕變寬自動(dòng)調(diào)整間距。

2. 適配原則

1. 等比縮放：等比縮放指的是該元素的尺寸大小并不是固定的，是會(huì)跟隨著屏幕寬度變大而變大。適用于配圖
2. 流性組件：元素尺寸不變，位置或元素間距隨著屏幕的寬度變化。大部分網(wǎng)站主體內(nèi)容都是按照該原則變化。
3. 文字流自適應(yīng)：一行文字的數(shù)量多少和屏幕寬度成正比，屏幕越寬，一行能顯示的文字?jǐn)?shù)量也就越多。網(wǎng)站大部分的文字都可以保持字體大小不變，數(shù)量變化。僅少數(shù)標(biāo)題需要變化字體大小。
4. 適當(dāng)形變：在保持當(dāng)前結(jié)構(gòu)的情況下，換種形式來表現(xiàn)。比如導(dǎo)航欄適配到移動(dòng)端的時(shí)候就是折疊到一個(gè)漢堡圖標(biāo)中。變化前后的樣式需要保證用戶體驗(yàn)。

六、搜索優(yōu)化&網(wǎng)頁加載優(yōu)化

1. 搜索優(yōu)化

關(guān)鍵詞優(yōu)化

如百度關(guān)鍵詞，可以在百度站長(zhǎng)之家中為自己的頁面添加關(guān)鍵詞，選對(duì)關(guān)鍵詞可以增加搜索曝光量。但數(shù)量不能過多，否則可能導(dǎo)致權(quán)重降低。可在網(wǎng)頁代碼的head中的meta標(biāo)簽→keyword內(nèi)容查看。

搜索結(jié)果優(yōu)化

可以在百度百科建立自己的詞條，建立權(quán)威形象。還有目標(biāo)用戶群的宣傳推廣，如在百度知道、知乎等平臺(tái)就客服系統(tǒng)這一領(lǐng)域多回答和曝光。酒香也怕巷子深，產(chǎn)品再好也需要曝光量。

還有最重要的一條，就是官網(wǎng)搜索詞條優(yōu)化：

例如百度搜索客服系統(tǒng)出現(xiàn)的官網(wǎng)詞條，包含以下四個(gè)內(nèi)容：

• 標(biāo)題：標(biāo)題在代碼的title中編輯，需簡(jiǎn)單清晰有重點(diǎn)，如品牌名和產(chǎn)品類型等。
• 關(guān)鍵圖：關(guān)鍵圖是百度自動(dòng)抓取你的網(wǎng)站上被點(diǎn)擊最多的一張?jiān)谝欢ù笮?nèi)的圖，具有不確定性。但我們可以可在百度站長(zhǎng)自己上傳，需清晰出挑，最好能做到在一眾結(jié)果中抓人眼球。
• 描述：可在網(wǎng)頁代碼的head中的meta標(biāo)簽→description內(nèi)容編輯，簡(jiǎn)介是客戶對(duì)產(chǎn)品了解的第一步，所以必須要寫一些對(duì)客戶來說有吸引力的事實(shí)數(shù)據(jù)優(yōu)勢(shì)。
• 評(píng)價(jià)：之前一直是放任自由的狀態(tài)，不打廣告，也不去注意百度評(píng)價(jià)等，導(dǎo)致好評(píng)率和差評(píng)率幾乎持平。其實(shí)在正常情況下，客戶覺得產(chǎn)品不好用會(huì)來差評(píng)發(fā)泄的動(dòng)機(jī)比覺得產(chǎn)品好用來好評(píng)的動(dòng)機(jī)要大的多的多，且負(fù)面評(píng)論會(huì)導(dǎo)致部分潛在客戶的流失。所以我們可以請(qǐng)客戶來幫忙好評(píng)一下，提高星級(jí)，有意識(shí)的經(jīng)營(yíng)自己的產(chǎn)品口碑。

2. 頁面加載優(yōu)化

用戶最滿意的打開網(wǎng)頁時(shí)間是2-5秒，如果等待超過10秒，99%的用戶會(huì)關(guān)閉這個(gè)網(wǎng)頁。頁面加載過慢對(duì)于訪客初次接觸我們的產(chǎn)品來說是非常不友好的情況。所以對(duì)于頁面加載速度的優(yōu)化是必要的。

可以從以下幾點(diǎn)來展開：

1. 合并樣式表和腳本文件；
2. 壓縮組件；
3. 將樣式表放在頭部；
4. 用js事件處理機(jī)制來動(dòng)態(tài)改變?cè)貥邮剑?/li>
5. 壓縮圖片，用svg代替png和jpg；
6. 使用圖片懶加載；
7. 精簡(jiǎn)代碼；
8. 避免重定向。

七、總結(jié)

in a word，整個(gè)過程應(yīng)該是先思考信息層級(jí)，再推導(dǎo)內(nèi)容，調(diào)整模塊布局，最后再做視覺設(shè)計(jì)和規(guī)范制定（當(dāng)然這是基于老版本的設(shè)計(jì)規(guī)范已經(jīng)沒法用的情況下）。

網(wǎng)站上線后，我們還是應(yīng)該多去看別人做的好的網(wǎng)站，分析他到底是哪兒做的比我們好（用戶體驗(yàn)、視覺效果、信息表達(dá)都可以），并思考結(jié)合我們網(wǎng)站的實(shí)際情況，融入到設(shè)計(jì)中，并控制變量進(jìn)行效果測(cè)試。選擇轉(zhuǎn)化效果好的那一版上線。只有對(duì)自己的網(wǎng)站保持批判態(tài)度，才能讓它不被時(shí)代拋棄。

其他推薦文章：《學(xué)生作品vs商業(yè)產(chǎn)品，差的是什么？》

本文由 @?JUN 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議