網(wǎng)頁設計實戰(zhàn)！阿里設計師總結(jié)的鉆石展位網(wǎng)站改版經(jīng)驗分享

阿里媽媽MUX：2015年10月底我們完成了對鉆石展位原有網(wǎng)頁的升級改版，在此為這次改版收貨的經(jīng)驗做一遍全面的梳理和沉淀。想知道阿里的設計師是如何尋找創(chuàng)意/優(yōu)化視覺層級/選擇配色…… 等等，進來學習就對了!

新版上線的地址為：http://zuanshi.taobao.com/ ， 歡迎大家點擊瀏覽。

一、背景

鉆石展位產(chǎn)品官方網(wǎng)站的改版，在需求層面，主要基于產(chǎn)品方向的部分變化，產(chǎn)品和運營內(nèi)容需要新增和豐富化。同時結(jié)合用戶和小二反饋，在舊版基礎上優(yōu)化體驗，讓站點內(nèi)容管理和維護更便捷。

再者，隨著2015年阿里媽媽品牌的升級;我們需要把品牌理念和品牌識別自然融入在網(wǎng)站中。

二、整體設計方向

2.1 全站統(tǒng)一的思路

阿里媽媽所有網(wǎng)站包括：阿里媽媽官網(wǎng)、旗下各產(chǎn)品網(wǎng)站、以及培訓和客服等服務支持類站點等。鉆石展位作為其中的產(chǎn)品網(wǎng)站之一，在設計優(yōu)化中，需要從全站的角度思考，解決共性上的問題;同時根據(jù)業(yè)務特性解決個性問題。

鉆石展位網(wǎng)站的共性問題包括站點結(jié)構、站點內(nèi)容的梳理;品牌升級后整體視覺風格的優(yōu)化統(tǒng)一;站點的無線適配方案等。

個性問題包括挖掘不同產(chǎn)品的利益點并通過精準的創(chuàng)意展現(xiàn);不同產(chǎn)品承載的運營類內(nèi)容量級不同而需要在設計模式和展現(xiàn)上精細化思考;共性問題則是通過品牌指南、設計規(guī)范和頁面模版來解決，包括站點的首頁、產(chǎn)品介紹頁、案例結(jié)合頁等，都已經(jīng)有比較成熟的經(jīng)驗和沉淀;個性問題在規(guī)范基礎上，根據(jù)各產(chǎn)品頁面的實際需求量身定做開放性方案，統(tǒng)一而不失靈活性。(圖2.1)

(圖2.1：全站統(tǒng)一的設計思路)

2.2 產(chǎn)品利益點挖掘與創(chuàng)意展開

作為商業(yè)產(chǎn)品的官方網(wǎng)站，主要承載了三大塊內(nèi)容：1、產(chǎn)品操作平臺的登錄入口，這也是老用戶使用頻次最高的模塊。2、產(chǎn)品利益點和詳細介紹，是用戶對產(chǎn)品了解的官方途徑。對于新用戶能夠起到利益點刺激與引導使用產(chǎn)品，3、運營類培訓與資訊的承載，通過定期更新和維護，方便新老用戶獲得幫助。

本次鉆石展位的網(wǎng)站改版中，除登錄入口外，二三兩塊我們都做了深入思考和優(yōu)化。首先來講解下利益點傳達。所謂利益點，就是產(chǎn)品最能打動用戶的價值和賣點，精準的利益點與用戶訴求高度吻合。

從文案來說，應當易讀易記，通俗簡潔，使用戶在短暫的一瞥中基本能感知到講述的內(nèi)容。文案需要說人話，撇棄以往那些冷冰冷但比較空洞的話語。

從創(chuàng)意來說，通過和產(chǎn)品及運營的反復討論，確定了鉆石展位的核心利益點在于“精準品牌營銷”。所謂“精準品牌營銷”，在于：一是鉆石展位區(qū)別于其他產(chǎn)品最大的亮點是品牌。這里提到的品牌是指賣家通過鉆展投放廣告，不是推銷單品，而是傳達整體的信息?？梢允瞧放?，可以是店鋪，也可以是某一季的活動。

綜上所述，最終確定創(chuàng)意點在于隱喻，以夜空繁星隱喻互聯(lián)網(wǎng)世界中無數(shù)網(wǎng)店，鉆石則隱喻了使用了鉆石展位后脫穎而出的店家。

從調(diào)性來說，首頁Banner采用了手繪的方法，在生活化、活力、溫情的阿里媽媽站點氣質(zhì)中，更凸顯出鉆展自身品牌氣質(zhì)中的人性化。

(圖2.2：草圖設計階段)

(圖2.3：banner設計最終成品)

2.3 運營資訊類頁面的優(yōu)化

其次是運營類培訓與咨訊的承載的優(yōu)化設計。這種類型的頁面，一般分為兩個層級：第一層級是內(nèi)容集合頁，匯聚各種內(nèi)容資訊，讓用戶瀏覽和尋找感興趣的文章。第二層級是文章詳情頁，用戶通過仔細閱讀獲得幫助。

我們首先優(yōu)化的是，提高內(nèi)容集合頁面的信息承載量。即不通過翻頁或多層級頁面的形式，單頁面展現(xiàn)出多的文章。讓用戶能夠在單頁面的瀏覽中就能發(fā)現(xiàn)目標。這在架構層級上，優(yōu)化了原先多層級并混亂的狀況;將用戶尋找并閱讀文章的步驟，縮短為2步。(圖2.4)

(圖2.4：左圖為新設計，右圖為舊的模版設計)

舊設計：頁面的信息效率較低，不適合資訊較多，資訊需要進行分類的情境

新設計：提高展現(xiàn)效率，在優(yōu)先級梳理、視覺層次和布局、內(nèi)容擴展性上有精細化思考

其次，單頁面的設計，需要在優(yōu)先級梳理、視覺層級和布局、未來內(nèi)容量的擴展性上做更多的推敲。做到整體信息量豐富但不混亂?！拔乙獙W習”案例根據(jù)內(nèi)容重點、以及新老用戶的不同面向，進行模塊區(qū)分。同時考慮內(nèi)容擴展性，部分模塊利用虛擬空間，頁內(nèi)刷新，增加信息承載量。

最后，建議運營建立內(nèi)容管理制度，陳舊過期的內(nèi)容需要定期去除，以保證站點內(nèi)容的有效性。定期的內(nèi)容管理和維護才能從源頭確保網(wǎng)站內(nèi)容的品質(zhì)和有效性。

2.4 全站無線化

15年品牌升級之后，網(wǎng)站部分我們陸續(xù)從阿里媽媽官網(wǎng)到各產(chǎn)品網(wǎng)站，逐步實現(xiàn)無線化。通過每個個案不斷積累經(jīng)驗，完善無線適配方案。

首先考慮是全站導航和登錄體系在無線設備上的適配。全站導航起到網(wǎng)站地圖的作用，貫穿阿里媽媽官網(wǎng)、旗下各產(chǎn)品網(wǎng)站、以及培訓和客服等服務支持類站點等。用戶通過網(wǎng)站地圖，能夠從媽媽官方跳轉(zhuǎn)旗下任何產(chǎn)品和平臺，也能從旗下任何產(chǎn)品、平臺回到媽媽官網(wǎng)。網(wǎng)站地圖展示了我們的品牌結(jié)構，在阿里媽媽品牌塑造的起步階段，讓用戶有完整的認知起到比較重要的作用和意義。

根據(jù)我們的品牌結(jié)構，全站導航分為一二兩級。在pc模式下，一二級導航有比較充分的空間排布，導航內(nèi)部的層級關系也可以通過懸停出現(xiàn)下拉菜單的模式出現(xiàn)。

在無線端，沒有懸停行為，同時需要考慮如何讓多層級導航在移動頁面上有清晰合理呈現(xiàn)。針對H5頁面的導航方式，我們最終采用將全站導航利用抽屜原則收納在頂部的菜單項中，并將一二級平鋪展現(xiàn)。登錄操作原理同上。而站點本身層級的導航(三級導航)則在頁面中直接展現(xiàn)，方便用戶快速切換。(圖2.5)

(圖2.5：無線適配方案)

2.5 輕量化，降低實現(xiàn)成本

在無線端設計過程中，我們有意使無線端更加輕量化，在精簡內(nèi)容的同時，在閱讀情境下，考慮沉浸式的方式。

內(nèi)容信息整合和精簡： 部分頁面從PC到無線做到內(nèi)容精簡處理，以運營類的資訊類為例，根據(jù)實效性，設定篇幅數(shù)量限制?？紤]到陳舊的內(nèi)容在無線情境下對用戶會有干擾。

末端沉浸體驗：在文章詳情頁面上，去除多層級導航，只保留返回操作，給予用戶沉浸式的閱讀環(huán)境。

降低前端實現(xiàn)成本，我們適配無線的目的，是為了解決用戶在零碎時間通過無線設備了解阿里媽媽與閱讀相關資訊的需求。因此整體的響應方案需要快速適配、簡單實現(xiàn)。目前只提供pc、無線兩種臨界值。并少量利用彈性圖片。在重點模塊，如首頁banner區(qū)域利用彈性圖片(圖片分層，不同斷點比例不同)以聚焦重點;其他區(qū)域基本采用等比縮放適配和適當裁切機制。

(圖2.6：內(nèi)容信息整合和精簡)

(圖2.7：輕量化和沉浸式)

三、視覺風格升級

隨著阿里媽媽整體網(wǎng)站品牌識別系統(tǒng)的完善，鉆石展位的改版成為了品牌識別系統(tǒng)在網(wǎng)站中落地和應用的契機，因此在本次改版設計中， 遵循了品牌規(guī)范和風格定義，包括圖像、色盤、插圖、圖標、字體等模塊，以生活化、活力、溫情營造出阿里媽媽品牌氣質(zhì)。同時本期也逐漸把媽媽吉祥物合理地融入設計中去。

(圖3：視覺風格升級)

3.1 規(guī)范的傳承

對于多產(chǎn)品的品牌來說，統(tǒng)一的品牌形象和風格至關重要，阿里媽媽原有的基礎風格思考相對成熟，且經(jīng)過多次推敲。鉆石展位改版設計，傳承之前的視覺排版、柵格、組件、模塊等，透氣感的設計思維一直是我們主推的觀點，以內(nèi)容為王，通過合理的空間梳理，營造出信息層次，最大化降低視覺噪聲。

3.2 視覺語言的升級

伴隨著15年品牌的升級，網(wǎng)站的視覺語言在原有的基礎上，進一步從細節(jié)出發(fā)，將新的品牌識別體系中的各個點，逐步落實在頁面設計上。

首先是圖形設計，圖形設計在頁面中起到的作用是提煉文字的核心亮點，輔助理解介紹性文字。 (圖3.1)

從內(nèi)容上來說，圖形設計的內(nèi)容采用了一個核心元素配一到兩個輔助元素的組合方法，以便于和文案配合的更為精準。

從圖形上來說，在創(chuàng)作上圍繞著扁平化、輕擬物、主方正，次圓潤的原則繪制。

(圖3.1：圖形設計)

其次是配色，配色的基本原則依然是依據(jù)整體品牌規(guī)范而來，在提取出鉆石展位品牌色后，再比對阿里媽媽品牌色盤，取深色、對比色和中性色，形成鉆展品牌色盤。在色調(diào)控制中，采用了相對克制和有序的色調(diào)，具體來說：

鉆展品牌色的偏冷色比例相對較多;(圖3.2)

中性色為底色;

對比色和深色起視覺調(diào)節(jié)節(jié)奏的作用，因此相對較少;

每個畫面元素至多兩種顏色。

(圖3.2：配色)

本次視覺語言的升級的另一個亮點在于吉祥物的透出，本期改版融入了阿里媽媽全新的吉祥物形象，從細節(jié)入手，點滴滲透。

(圖3.3：吉祥物透出)

四、總結(jié)

本次鉆石展位的升級改版把品牌理念和品牌識別自然融入在網(wǎng)站中， 在舊版基礎上優(yōu)化體驗，讓站點內(nèi)容管理和維護更便捷，雖然整體設計仍有提升空間，但為品牌識別系統(tǒng)在網(wǎng)站中落地和應用積累了經(jīng)驗。與此同時，也要感謝各個參與項目同學的協(xié)同和支持，大家辛苦啦!