去年某日一個做商用硬件產(chǎn)品和相關(guān)服務(wù)的朋友來找我咨詢，說“為什么我們公司的網(wǎng)站已經(jīng)是照著Evernote抄了，抄出來感覺還是差很遠(yuǎn)呢？”“是不是因為圖片不夠高大上，你能不能幫我找點高大上的圖片呢？”“我們沒有美工，工程師自己做的，你就隨便給我點圖好了?！甭犃T我震驚了。都2016年了，竟然還有這么不重視自己公司形象和官網(wǎng)的商用產(chǎn)品團隊？因此列了一些坑，給朋友推薦了一些參考，也提了些建議。

至今有非常多的公司尤其是2B（哦是toB）的公司，覺得官網(wǎng)什么的純粹是套路，我有一個就行了。確實，很多純介紹類型的官網(wǎng)內(nèi)容模式化、更新內(nèi)容模塊較少、設(shè)計風(fēng)格單一，甚至套個模版就能解決。但套路要走好，也不是一件容易的事情。注意幾個誤區(qū)，你的套路才算像模像樣。

信息架構(gòu)：搞清楚產(chǎn)品賣點和客戶買點

誤區(qū)一：一般的產(chǎn)品官網(wǎng)內(nèi)容上不外乎是“首頁”“產(chǎn)品/服務(wù)/公司介紹”“功能詳解”“用戶/客戶好評””下載/購買”“聯(lián)系方式”幾個部分。但很容易造成“你想告訴客戶一大堆賣點但客戶根本看不懂”的尷尬局面。

解決方案：最直白的要求是“說人話”。通過線下和客戶的直接對話，去決定在官網(wǎng)上講什么內(nèi)容，怎么講。不是所有特色都值得在官網(wǎng)上告訴客戶。

誤區(qū)二：有些決策者總覺得自己的官網(wǎng)層級越多越表現(xiàn)產(chǎn)品優(yōu)秀，內(nèi)容豐富。然而在內(nèi)容枯草的時候，層級越多越顯得單薄乏味，反而帶給觀者“這貨不怎么行”的心理感受。

解決方案：盡量避免二級或者三級頁面出現(xiàn)“頭圖很大，內(nèi)容只有兩行文字”的情況。不僅在視覺上效果不好，其實在信息上也并不能帶給用戶很強的印象。如果信息上是值得單開一頁的話，盡量擴充你的有效內(nèi)容，用更強烈和突出的方式去展現(xiàn)。如果信息上無法擴充，但又必不可少的話，也許整合到首頁也是一種處理方式。

視覺設(shè)計：頭部視覺定位產(chǎn)品品牌

誤區(qū)：大圖很好看，但亂找圖就不好了。千篇一律的商務(wù)圖庫，強行按產(chǎn)品內(nèi)容找圖，都沒有讓客戶去進(jìn)一步去了解的欲望。

解決方案：

大圖并不過時，可以精確使用場景，或發(fā)散聯(lián)想

漸變回歸流行，實現(xiàn)品牌色的乾坤大挪移

單色也搶眼，加上插畫，過目不忘沖擊力強

視頻動起來，快速解說產(chǎn)品故事

交互前端：內(nèi)容分割及響應(yīng)式頁面的變化

誤區(qū)：有些人或許會覺得，做好了頭部設(shè)計也就完成了一半了，下面的內(nèi)容一溜地排下去就好了。其實還差得遠(yuǎn)。接下來的內(nèi)容，排列邏輯、層次和分割銜接上的處理，都會對整體效果有比較大的影響。先來看一個自我感覺良好的模版案例。在規(guī)定的寬度范圍內(nèi)，這個排版確實是錯落有致。但是一旦涉及到響應(yīng)式頁面，需要適配的時候，往往會在過大或者過小的寬度上造成效果上的偏差，很容易變成錯亂無序了。

解決方案：

通過色塊或背景等明顯的分割方式進(jìn)行模塊劃分關(guān)注

每一個層級寬度的頁面展示效果

寫在最后

這里只是列舉了些以往的踩坑經(jīng)驗和建議，并不是體系的設(shè)計歸納總結(jié)，姑且整合成一份資料，僅供切磋探討。