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

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

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

一、背景

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

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

二、整體設(shè)計方向

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

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

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

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

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

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

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

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

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

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

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

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

(圖2.2：草圖設(shè)計階段)

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

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

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

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

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

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

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

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

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

2.4 全站無線化

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

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

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

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

(圖2.5：無線適配方案)

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

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

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

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

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

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

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

三、視覺風(fēng)格升級

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

(圖3：視覺風(fēng)格升級)

3.1 規(guī)范的傳承

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

3.2 視覺語言的升級

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

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

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

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

(圖3.1：圖形設(shè)計)

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

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

中性色為底色;

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

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

(圖3.2：配色)

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

(圖3.3：吉祥物透出)

四、總結(jié)

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