阿里設(shè)計師總結(jié)的鉆石展位網(wǎng)站改版經(jīng)驗

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

一、背景 鉆石展位產(chǎn)品官方網(wǎng)站的改版，在需求層面，主要基于產(chǎn)品方向的部分變化，產(chǎn)品和運營內(nèi)容需要新增和豐富化。同時結(jié)合用戶和小二反饋，在舊版基礎(chǔ)上優(yōu)化體驗，讓站點內(nèi)容管理和維護更便捷。
再者，隨著2015年阿里媽媽品牌的升級；我們需要把品牌理念和品牌識別自然融入在網(wǎng)站中。

二、整體設(shè)計方向 2.1 全站統(tǒng)一的思路 阿里媽媽所有網(wǎng)站包括：阿里媽媽官網(wǎng)、旗下各產(chǎn)品網(wǎng)站、以及培訓和客服等服務(wù)支持類站點等。鉆石展位作為其中的產(chǎn)品網(wǎng)站之一，在設(shè)計優(yōu)化中，需要從全站的角度思考，解決共性上的問題；同時根據(jù)業(yè)務(wù)特性解決個性問題。 鉆石展位網(wǎng)站的共性問題包括站點結(jié)構(gòu)、站點內(nèi)容的梳理；品牌升級后整體視覺風格的優(yōu)化統(tǒng)一；站點的無線適配方案等。 個性問題包括挖掘不同產(chǎn)品的利益點并通過精準的創(chuàng)意展現(xiàn)；不同產(chǎn)品承載的運營類內(nèi)容量級不同而需要在設(shè)計模式和展現(xiàn)上精細化思考；共性問題則是通過品牌指南、設(shè)計規(guī)范和頁面模版來解決，包括站點的首頁、產(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)品利益點挖掘與創(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)品最能打動用戶的價值和賣點，精準的利益點與用戶訴求高度吻合。 從文案來說，應(yīng)當易讀易記，通俗簡潔，使用戶在短暫的一瞥中基本能感知到講述的內(nèi)容。文案需要說人話，撇棄以往那些冷冰冷但比較空洞的話語。 從創(chuàng)意來說，通過和產(chǎn)品及運營的反復(fù)討論，確定了鉆石展位的核心利益點在于“精準品牌營銷”。所謂“精準品牌營銷”，在于：一是鉆石展位區(qū)別于其他產(chǎn)品最大的亮點是品牌。這里提到的品牌是指賣家通過鉆展投放廣告，不是推銷單品，而是傳達整體的信息?？梢允瞧放?，可以是店鋪，也可以是某一季的活動。 綜上所述，最終確定創(chuàng)意點在于隱喻，以夜空繁星隱喻互聯(lián)網(wǎng)世界中無數(shù)網(wǎng)店，鉆石則隱喻了使用了鉆石展位后脫穎而出的店家。 從調(diào)性來說，首頁Banner采用了手繪的方法，在生活化、活力、溫情的阿里媽媽站點氣質(zhì)中，更凸顯出鉆展自身品牌氣質(zhì)中的人性化。 （圖2.2：草圖設(shè)計階段） （圖2.3：banner設(shè)計最終成品） 2.3 運營資訊類頁面的優(yōu)化 其次是運營類培訓與咨訊的承載的優(yōu)化設(shè)計。這種類型的頁面，一般分為兩個層級：第一層級是內(nèi)容集合頁，匯聚各種內(nèi)容資訊，讓用戶瀏覽和尋找感興趣的文章。第二層級是文章詳情頁，用戶通過仔細閱讀獲得幫助。 我們首先優(yōu)化的是，提高內(nèi)容集合頁面的信息承載量。即不通過翻頁或多層級頁面的形式，單頁面展現(xiàn)出多的文章。讓用戶能夠在單頁面的瀏覽中就能發(fā)現(xiàn)目標。這在架構(gòu)層級上，優(yōu)化了原先多層級并混亂的狀況；將用戶尋找并閱讀文章的步驟，縮短為2步。（圖2.4
  （圖2.4：左圖為新設(shè)計，右圖為舊的模版設(shè)計） 舊設(shè)計：頁面的信息效率較低，不適合資訊較多，資訊需要進行分類的情境 新設(shè)計：提高展現(xiàn)效率，在優(yōu)先級梳理、視覺層次和布局、內(nèi)容擴展性上有精細化思考
其次，單頁面的設(shè)計，需要在優(yōu)先級梳理、視覺層級和布局、未來內(nèi)容量的擴展性上做更多的推敲。做到整體信息量豐富但不混亂。“我要學習”案例根據(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)驗，完善無線適配方案。 首先考慮是全站導航和登錄體系在無線設(shè)備上的適配。全站導航起到網(wǎng)站地圖的作用，貫穿阿里媽媽官網(wǎng)、旗下各產(chǎn)品網(wǎng)站、以及培訓和客服等服務(wù)支持類站點等。用戶通過網(wǎng)站地圖，能夠從媽媽官方跳轉(zhuǎn)旗下任何產(chǎn)品和平臺，也能從旗下任何產(chǎn)品、平臺回到媽媽官網(wǎng)。網(wǎng)站地圖展示了我們的品牌結(jié)構(gòu)，在阿里媽媽品牌塑造的起步階段，讓用戶有完整的認知起到比較重要的作用和意義。 根據(jù)我們的品牌結(jié)構(gòu)，全站導航分為一二兩級。在pc模式下，一二級導航有比較充分的空間排布，導航內(nèi)部的層級關(guān)系也可以通過懸停出現(xiàn)下拉菜單的模式出現(xiàn)。 在無線端，沒有懸停行為，同時需要考慮如何讓多層級導航在移動頁面上有清晰合理呈現(xiàn)。針對H5頁面的導航方式，我們最終采用將全站導航利用抽屜原則收納在頂部的菜單項中，并將一二級平鋪展現(xiàn)。登錄操作原理同上。而站點本身層級的導航（三級導航）則在頁面中直接展現(xiàn)，方便用戶快速切換。（圖2.5）
（圖2.5：無線適配方案） 2.5 輕量化，降低實現(xiàn)成本 在無線端設(shè)計過程中，我們有意使無線端更加輕量化，在精簡內(nèi)容的同時，在閱讀情境下，考慮沉浸式的方式。 內(nèi)容信息整合和精簡： 部分頁面從PC到無線做到內(nèi)容精簡處理，以運營類的資訊類為例，根據(jù)實效性，設(shè)定篇幅數(shù)量限制。考慮到陳舊的內(nèi)容在無線情境下對用戶會有干擾。 末端沉浸體驗：在文章詳情頁面上，去除多層級導航，只保留返回操作，給予用戶沉浸式的閱讀環(huán)境。 降低前端實現(xiàn)成本，我們適配無線的目的，是為了解決用戶在零碎時間通過無線設(shè)備了解阿里媽媽與閱讀相關(guān)資訊的需求。因此整體的響應(yīng)方案需要快速適配、簡單實現(xiàn)。目前只提供pc、無線兩種臨界值。并少量利用彈性圖片。在重點模塊，如首頁banner區(qū)域利用彈性圖片（圖片分層，不同斷點比例不同）以聚焦重點；其他區(qū)域基本采用等比縮放適配和適當裁切機制。 （圖2.6：內(nèi)容信息整合和精簡） （圖2.7：輕量化和沉浸式）

三、視覺風格升級 隨著阿里媽媽整體網(wǎng)站品牌識別系統(tǒng)的完善，鉆石展位的改版成為了品牌識別系統(tǒng)在網(wǎng)站中落地和應(yīng)用的契機，因此在本次改版設(shè)計中， 遵循了品牌規(guī)范和風格定義，包括圖像、色盤、插圖、圖標、字體等模塊，以生活化、活力、溫情營造出阿里媽媽品牌氣質(zhì)。同時本期也逐漸把媽媽吉祥物合理地融入設(shè)計中去。
（圖3：視覺風格升級） 3.1 規(guī)范的傳承 對于多產(chǎn)品的品牌來說，統(tǒng)一的品牌形象和風格至關(guān)重要，阿里媽媽原有的基礎(chǔ)風格思考相對成熟，且經(jīng)過多次推敲。鉆石展位改版設(shè)計，傳承之前的視覺排版、柵格、組件、模塊等，透氣感的設(shè)計思維一直是我們主推的觀點，以內(nèi)容為王，通過合理的空間梳理，營造出信息層次，最大化降低視覺噪聲。 3.2 視覺語言的升級 伴隨著15年品牌的升級，網(wǎng)站的視覺語言在原有的基礎(chǔ)上，進一步從細節(jié)出發(fā)，將新的品牌識別體系中的各個點，逐步落實在頁面設(shè)計上。 首先是圖形設(shè)計，圖形設(shè)計在頁面中起到的作用是提煉文字的核心亮點，輔助理解介紹性文字。 （圖3.1） 從內(nèi)容上來說，圖形設(shè)計的內(nèi)容采用了一個核心元素配一到兩個輔助元素的組合方法，以便于和文案配合的更為精準。 從圖形上來說，在創(chuàng)作上圍繞著扁平化、輕擬物、主方正，次圓潤的原則繪制。 （圖3.1：圖形設(shè)計）
其次是配色，配色的基本原則依然是依據(jù)整體品牌規(guī)范而來，在提取出鉆石展位品牌色后，再比對阿里媽媽品牌色盤，取深色、對比色和中性色，形成鉆展品牌色盤。在色調(diào)控制中，采用了相對克制和有序的色調(diào)，具體來說： 鉆展品牌色的偏冷色比例相對較多；（圖3.2） 中性色為底色； 對比色和深色起視覺調(diào)節(jié)節(jié)奏的作用，因此相對較少； 每個畫面元素至多兩種顏色。 （圖3.2：配色） 本次視覺語言的升級的另一個亮點在于吉祥物的透出，本期改版融入了阿里媽媽全新的吉祥物形象，從細節(jié)入手，點滴滲透。 （圖3.3：吉祥物透出）

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