產品官網設計方法總結

前言：

一個產品的官網可以說是一個產品的門面，在使用者對產品沒有任何瞭解時，官網是向用戶傳達資訊的重要途徑。它承載了品牌宣傳、資訊展示、功能輸出等屬性，在某種程度上來說，官網影響著使用者對這家公司及其產品的認知和信任。

那麼，我們該如何把網站設計的更好呢？本文將以「有道智慧教育」「有道詞典桌面端」「有道ADS」三個產品的官網設計為例，總結官網設計方法，供大家一同參考和學習。

有道智慧教育：http://zhihui.youdao.com

有道詞典桌面端：http://cidian.youdao.com/index-mac.html#/

有道海外廣告平臺：http://youdaoads.com

1. 動手前要怎麼做? -  通過優化設計流程提升設計效率

1.1 首先找對人 -  找對需求方，是產品經理？業務運營？產品銷售？

由於需求的來源途徑很多，有時候是老闆的一句話，有時候是業務人員提出的，加上業務龐大比較複雜，負責人較多，所以會出現一個需求好幾個業務方參與。在開始設計有道ADS官網時由於沒有找對需求方和業務負責人，不知道該聽誰的，來來回回做了幾個版本 一直確定不了方向，前期耽誤了很久。

1.2 解決排期緊張問題 -  快速搭建頁面框架與產品確定內容，與前端溝通快速開發方法

確定原型（框架與內容）:  由於會碰到業務方沒有出原型圖，只把文字資訊和圖片用word或ppt大致排好發給設計師，所以我們需要快速把圖文資訊排好，再與業務方確定框架和內容是否正確，避免後期因為內容改動而出現返工的情況。

前端提前介入:  原型出完後，就可以進行前期的前端開發，搭建大致的HTML結構，然後設計出完設計稿後再進行頁面樣式的完善，這樣做的好處不僅能有效的提高開發效率，實現逐層開發，讓前端提前介入，減少整體消耗的時間。

溝通快速開發方法:  然後跟前端溝通好開發方式，比如某個模組直接全部切成圖，不需要用程式碼寫，或者頁面是怎麼樣的適配方式。

1.3 競品分析 -  研究競品的形色字構質以及它為什麼這樣設計

根據業務方提供的競品和確定產品想表達的設計關鍵詞，分析哪些競品風格上與我們類似，進而拆解競品的形色字質構，然後挖掘競品優秀的設計點，再思考怎麼結合自己的產品，學會站在巨人肩膀上成長。

1.4 快速確定設計方向-   拼貼不同風格的素材圖與產品確定方向

業務方確定不了風格，或者知道想要哪種風格但是描述不出來。我們可以將競品的圖片裁剪下來貼到自己的頁面上，分出幾種不同型別的方案，比如方案1-真實場景，方案2-卡通場景等。

然後讓業務方選擇，確定了方向之後再動手做設計，避免後期不必要的溝通麻煩。

2. 更直觀的設計 -  體現使用場景與抽象的概念具像化

2.1 產品裝置和所處環境 

多種裝置與環境結合，幫助使用者識比例、知場景： 由於智慧教育業務涉及到電腦、手機、平板、大屏、學習一體機等多端裝置聯動，加上使用場景在教室、操場、辦公室等多個地方，所以需要體現裝置與場景的結合，讓使用者一看就知道是用什麼裝置在什麼地方使用的，以及裝置大小有差異（特別是有道自研的學習一體機），有了場景後就知道裝置的體積。

首屏體現產品使用的裝置： 有道詞典有移動端、網頁版、桌面端各個端，此次需求需要推廣有道詞典桌面端，需要強調桌面端的概念，所以在首屏需要清晰的體現電腦裝置。讓使用者也好更快的認識到這是在電腦上使用的應用。

2.2 抽象的概念具像化 -  利用搜索引擎搜尋相關圖片提取圖中元素，幫助設計師視覺化

有道ADS是國際廣告投放平臺，國際與廣告是不存在實體物的抽象概念，將其視覺化是設計師的重要工作。有一個方法，用搜索引擎搜尋關鍵詞，會出現相關圖片，提取使用最多的元素。用結合資料的地圖、地球，以及在人物圖片選擇上選取了不同人種，體現國際化與廣告的概念。

3. 界限分明，不要曖昧 -  建立清楚的視覺層次

3.1 區分主體與背景層 -  突出強調裝置，背景場景作為陪襯

雖然我們定義的有道智慧教育官網需要有校園場景，但是它的核心仍然是裝置，為了不搶主體物的注意力，將背景弱化，烘托主體裝置。

3.2 區分模組之間的關係 -  卡片式佈局幫助區分複雜的不同模組

有道詞典的官網需要展示的模組比較多，單個模組裡巢狀的內容層級多，很容易設計的很散。所以我們用卡片式佈局進行資訊分層和整合，在卡片式設計中,一張卡片就是一個資訊模組,使用者即使快速瀏覽,也不會產生混亂。同時塊狀的卡片使得頁面更加整齊美觀。

3.2 區分首頁與二級頁的關係 -  首頁的張揚與二級頁的內斂

在開始設計二級頁的時候，我們就一股腦的延續首頁的設計風格，沒有考慮二級頁的內容較多的情況，所以設計出來很亂。首頁與二級頁應當區分前後層次，首頁的“首”自然要比二級頁的“二”要突出。

4.  我們不是閱讀，而是 掃描 -  降低視覺噪聲與提升屏效

4.1 簡化展示 資訊，突出 核心內容 -  強調每個模組所表達的核心內容，避免不重要的資訊干擾

有道詞典官網有很多模組是功能的展示，涉及到具體介面，但介面的資訊非常多，直接放上去顯得很雜亂，所以我們與業務方溝通確定必須要展示的功能，然後將其突出強調，其他的內容用灰色塊或降低透明度等方式弱化。

4.2 合併同類資訊，提升屏效  -  如無必要，勿增實體

有道詞典官網的翻譯對比展示模組，會出現同樣的資訊，全部展示出來會增加頁面的高度。所以需要合併同類資訊，減少頁面高度，同時需要設計出內容想要表達的遞進關係（準>更準>太準了）。

5. 融入品牌  -  塑造品牌認知

5.1 重複法  -  重複使用同一個圖形，加深記憶

有道智慧教育官網:  將品牌符號融入到場景、icon當中。品牌相關設計：http://www.zcool.com.cn/work/ZNTc2ODgyMjg=.html

有ADS官網:  圖形用蒙板的形式巢狀圖片或重複形式作為氛圍點綴。

5.2 品牌色的剋制運用  -  當品牌色與業務方要求不一致的情況

有道詞典的品牌色是紅色，非常的鮮豔，大面積使用會非常刺眼，顏色變淡的話略顯女性化，所以對於品牌色我們只在重要的地方加一點就行，其他的用灰色來襯托品牌紅色。

6.  情感化設計  -  滿足功能的前提下融入情感，觸及使用者內心

6.1 溫度的表達  -  教育行業所需要的溫度

每一個孩子都是一棵新栽的小苗，只有和煦的陽光才能讓其健康成長，而這縷陽光的溫度就是我們想要在設計上表現的。我們在教室場景中融入了陽光、綠植等元素，使冰冷的教室煥發生機。

6.1 效率感的表達  -  工具類產品的效率感

由於工具類產品較為注重效率和體驗，業務方也強調需要專業權威感，所以在設計上我們用動感的幾何圖形表現速度感、效率感。

6.3 創造性的表達  -  KOL、廣告營銷平臺的創造性

前期與業務方溝通，他們強調KOL營銷是一個內容的生意，具有創造性、時尚性，因此不能太死板沉悶。所以我們在設計上排版比較大膽，突破中規中矩沉悶的排版模式，比如圖片的破形，大色塊與背景紋理、文字與圖片的疊壓關係、錯位。

7.  潤物細無聲  -  打磨細節，提升設計品質

7.1 圖片處理  -  處理圖片融合畫面

由於通常業務方提供的圖片質量參差不齊，到不到預期的效果，所以為了使圖片能更好的融入到畫面當中，需要對圖片的顏色、亮度等進行調節，必要時還需要用畫筆修補。

7.2 剋制的微創意  -  擬物化標題文字

工具類產品在視覺創意上面需要儘量剋制，所以我只在細節處做一些不影響識別的小創意。基於文字意思，融合圖形於字型，使頁面增加趣味性。

7.3 中英文排版差異  -  針對不同文字調整版式

漢字和拉丁字母的間距、行距等有很大差別，會出現用相同排版方式出來的不一致，所以對於中英兩版官網，在排版上做了細節調整。

結語：

感謝看到這裡，以上是通過我自己的理解，在官網設計專案當中總結的一些共性的經驗方法，可以指導下一個相同的專案。第一次寫文章，有很多不足，希望以後能多提升在方法論建設上的能力。

Powered by Froala Editor