官網(wǎng)，可以理解成企業(yè)的IP，或者企業(yè)的另一張“臉”，記載企業(yè)的概況和發(fā)展歷程。好的官網(wǎng)，能夠充分展現(xiàn)其內(nèi)涵，給人以美的感受；而糟糕的官網(wǎng)，不僅不能有效表達(dá)企業(yè)的愿景，更有可能將合作和發(fā)展機(jī)會(huì)拒之門外；至于沒有官網(wǎng)，那就真的是“我XX還能說什么？你是有多懶！！”。
筆者很有幸參與到公司此次官網(wǎng)的改版，故總結(jié)一下官網(wǎng)設(shè)計(jì)的tips。將官網(wǎng)當(dāng)做一個(gè)產(chǎn)品，圍繞“目的、定位、人群和功能”要素進(jìn)行設(shè)計(jì)，并用迭代的思路不斷改進(jìn)。講真，官網(wǎng)是最具性價(jià)比的長(zhǎng)期廣告。
產(chǎn)品規(guī)劃
-1- 需求分析
官網(wǎng)，是企業(yè)面向大眾的窗口，能夠傳達(dá)給閱讀者企業(yè)的形象，展現(xiàn)自身實(shí)力，以及解決用戶疑問。
不過，在規(guī)劃官網(wǎng)的時(shí)候，需要了解企業(yè)所處階段和官網(wǎng)改版的目的：
- 對(duì)于初創(chuàng)公司新上線的官網(wǎng)，需要以最小最優(yōu)產(chǎn)品（MVP）方式呈現(xiàn)公司的核心業(yè)務(wù)，和其他公司差異化；
- 對(duì)于成長(zhǎng)中的公司，需要添加新業(yè)務(wù)或者做適當(dāng)轉(zhuǎn)型，頁面內(nèi)容和當(dāng)前業(yè)務(wù)進(jìn)度對(duì)齊；
- 對(duì)于較為成熟的公司，需要細(xì)化單個(gè)產(chǎn)品線的內(nèi)容，將各個(gè)垂直產(chǎn)品線做到精致，例如針對(duì)一個(gè)產(chǎn)品就可以擁有一個(gè)官網(wǎng)。
-2- 目標(biāo)人群
- 最終使用產(chǎn)品的用戶（包括企業(yè)客戶和大眾用戶），這一類人群重視產(chǎn)品的使用感受；
- 投資方和業(yè)務(wù)相關(guān)人群，可能有進(jìn)一步進(jìn)行企業(yè)合作洽談的機(jī)會(huì)；
- 面試人群，會(huì)瀏覽官網(wǎng)形成產(chǎn)品印象，也就是說官網(wǎng)是吸納人才的第一道門。
-3- 總體定位
雖然各家企業(yè)的發(fā)展業(yè)務(wù)不同，但官網(wǎng)總離不開以下信息：slogan口號(hào)，核心業(yè)務(wù)，優(yōu)勢(shì)，產(chǎn)品簡(jiǎn)介，公司簡(jiǎn)介等基礎(chǔ)信息。
筆者所在公司是一家大數(shù)據(jù)營(yíng)銷公司，此次官網(wǎng)項(xiàng)目主要內(nèi)容可以總結(jié)為幾點(diǎn)：優(yōu)化視覺表現(xiàn)；突出營(yíng)銷業(yè)務(wù)；豐滿產(chǎn)品線。
產(chǎn)品設(shè)計(jì)
-1- 產(chǎn)品風(fēng)格確定
首先，需要根據(jù)產(chǎn)品或品牌的調(diào)性確定產(chǎn)品風(fēng)格，強(qiáng)化產(chǎn)品優(yōu)勢(shì)。例如Adobe作為一家全球性的設(shè)計(jì)公司，官網(wǎng)采用黑色封底和圖片拼接方式，低調(diào)而有逼格，吸引眼球。蘋果官網(wǎng)則秉承著“l(fā)ess is more”的簡(jiǎn)約風(fēng)，旗下系列產(chǎn)品就像精致的工藝品，黑白灰的色調(diào)搭配寬屏高清主圖，傳遞優(yōu)雅、極致、禪式的理念，營(yíng)造極佳的用戶體驗(yàn)。而某家傳統(tǒng)的食品公司，官網(wǎng)則重在宣傳獲獎(jiǎng)活動(dòng)，比較傳統(tǒng)保守，紅配綠的蜜汁審美，顯得有點(diǎn)特別（吃藕）了。
在我司官網(wǎng)的風(fēng)格設(shè)計(jì)中，則考慮了產(chǎn)品的定位：數(shù)據(jù)驅(qū)動(dòng)營(yíng)銷。既要體現(xiàn)出數(shù)據(jù)挖掘的技術(shù)優(yōu)勢(shì)，又要貼近營(yíng)銷。因此，除表現(xiàn)科技感之外，可以采用較為清新簡(jiǎn)約的配色，最好能跟企業(yè)的主題色對(duì)應(yīng)。
-2- 產(chǎn)品框架
產(chǎn)品框架建立的流程分為：拆解功能--確定功能優(yōu)先級(jí)--聚合重組。
將官網(wǎng)所有的功能平鋪成以下關(guān)鍵詞：index（首頁）marketing（營(yíng)銷）DSP（廣告管理平臺(tái)）DMP（數(shù)據(jù)管理平臺(tái)）SSP（供應(yīng)方平臺(tái)） ADX（廣告交易平臺(tái)） Software（軟件產(chǎn)品） solution（解決方案）Labs（實(shí)驗(yàn)室）intro（公司介紹）case（優(yōu)秀案例）News（公司新聞）。boss大大說盡量把功能都展示在菜單上，菜單多不怕，一行放的下，做出來了就要讓世界看見！ Orz 向大佬低頭。
在產(chǎn)品設(shè)計(jì)中，每個(gè)功能都突出，其實(shí)就等于沒重點(diǎn) 。在MUJI無印良品的設(shè)計(jì)中，學(xué)會(huì)“克制”，不過分邀功，而是用體驗(yàn)和細(xì)節(jié)去打動(dòng)用戶。也就是說，不能一昧橫向擴(kuò)充，還需要縱向加深，增強(qiáng)層次感。
回歸到我們的官網(wǎng)本身，需要對(duì)功能進(jìn)行優(yōu)先級(jí)劃分。綜合此次改版目標(biāo)：突出營(yíng)銷和豐滿產(chǎn)品線，因此把營(yíng)銷單獨(dú)作為一個(gè)菜單板塊，放置在首頁之后，把公司介紹放在最后。其次，根據(jù)關(guān)鍵詞的屬性聚合出分類，把DSP，DMP，ADX，SSP聚合成數(shù)字營(yíng)銷產(chǎn)品；把Labs歸入到軟件產(chǎn)品同樣有技術(shù)研究屬性的功能下；把案例歸入到營(yíng)銷推廣服務(wù)下。最后提煉出來的產(chǎn)品框架如下：
-3- 核心頁面設(shè)計(jì)
首頁設(shè)計(jì)
- 重點(diǎn)展現(xiàn)企業(yè)的愿景、產(chǎn)品的定位、實(shí)力
- 公司的業(yè)務(wù)介紹，使用戶有頂層的感受
-
把首頁當(dāng)成整個(gè)官網(wǎng)各個(gè)菜單功能的概述，并提供便捷入口，即目錄式的指引
首頁布局草稿
營(yíng)銷推廣服務(wù)
- 作為核心業(yè)務(wù)模塊，通過概述頁展示營(yíng)銷推廣服務(wù)涵蓋的范圍和優(yōu)勢(shì)
- 將廣告營(yíng)銷涉及的對(duì)象分頁面進(jìn)行闡述，分為媒體、人群、運(yùn)營(yíng)、案例頁面，以便能深入闡述每個(gè)對(duì)象的優(yōu)勢(shì)
- 確保頁面統(tǒng)一性，各個(gè)功能模塊盡量采取標(biāo)題及簡(jiǎn)單文案解釋、附帶圖片的方式
產(chǎn)品驗(yàn)證
每次上線前驗(yàn)證時(shí)，都是一臉懵逼，內(nèi)心OS：無fuck說，這真的是我當(dāng)時(shí)設(shè)計(jì)的嗎?。。〔贿^還是乖乖去測(cè)試bug和提意見，死磕功能和體驗(yàn)，Orz 向研發(fā)大大低頭。整個(gè)驗(yàn)證過程就是不斷提問題的過程：
功能路徑
功能是否有欠缺？跳轉(zhuǎn)路徑是否正確？
文案
語句是否通順，不存在歧義？
風(fēng)格UI
頁面主圖和配圖的風(fēng)格是否和模塊定位相對(duì)應(yīng)？
布局和設(shè)計(jì)稿是否有出入？
兼容性
考慮移動(dòng)端的適配問題，頁面是否會(huì)錯(cuò)亂？
性能
頁面跳轉(zhuǎn)時(shí)間、圖片加載時(shí)間是否太長(zhǎng)？
寫在最后
這篇文章對(duì)官網(wǎng)改版做了一個(gè)簡(jiǎn)單的復(fù)盤，工作一年來，視角漸漸從【功能倒推界面】轉(zhuǎn)化為【從產(chǎn)品定位自頂向下設(shè)計(jì)產(chǎn)品】，工作精力也從【體驗(yàn)參考無數(shù)競(jìng)品】轉(zhuǎn)移到【用戶行為和心理分析】。
《如何閱讀一本書》有這樣一句話：付錢擁有一本書，不過是真正擁有這本書的前奏而已。同樣，每一項(xiàng)技能能力只有在一個(gè)個(gè)“然后”（不斷思考、總結(jié)）才能創(chuàng)造價(jià)值。
好久沒寫文了，工作日回家就想睡覺，周末不浪一浪覺得不尊重周末。如果不想做一件事情，有千百個(gè)理由。而從最開始頭一熱拍腦袋做一件事情到事情完成，需要我們每次都再走一步的堅(jiān)持。
但行好事，莫問前程。
