產品官網設計方法總結

語言: CN / TW / HK

前言:

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

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

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

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

有道海外廣告平臺:https://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當中。品牌相關設計:https://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