阿裡設計師總結的鑽石展位網站改版經驗

 　　2015年10月底我們完成了對鑽石展位原有網頁的升級改版，在此為這次改版收貨的經驗做一遍全面的梳理和沉澱。想知道阿裡的設計師是如何尋找創意/優化視覺層級/選擇配色…… 等等，進來學習就對了!

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

　　一、背景

　　鑽石展位產品官方網站的改版，在需求層面，主要基於產品方向的部分變化，產品和運營內容需要新增和豐富化。同時結合用戶和小二反饋，在舊版基礎上優化體驗，讓站點內容管理和維護更便捷。

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

　　二、整體設計方向

　　2.1 全站統一的思路

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

　　鑽石展位網站的共性問題包括站點結構、站點內容的梳理;品牌升級後整體視覺風格的優化統一;站點的無線適配方案等。

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

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

　　2.2 產品利益點挖掘與創意展開

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

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

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

　　從創意來說，通過和產品及運營的反復討論，確定了鑽石展位的核心利益點在於“精准品牌營銷”。所謂“精准品牌營銷”，在於：一是鑽石展位區別於其他產品最大的亮點是品牌。這裡提到的品牌是指賣家通過鑽展投放廣告，不是推銷單品，而是傳達整體的信息。可以是品牌，可以是店鋪，也可以是某一季的活動。

　　綜上所述，最終確定創意點在於隱喻，以夜空繁星隱喻互聯網世界中無數網店，鑽石則隱喻了使用了鑽石展位後脫穎而出的店家。

　　從調性來說，首頁Banner采用了手繪的方法，在生活化、活力、溫情的阿裡媽媽站點氣質中，更凸顯出鑽展自身品牌氣質中的人性化。

　　(圖2.2：草圖設計階段)

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

　　2.3 運營資訊類頁面的優化

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

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

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

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

　　新設計：提高展現效率，在優先級梳理、視覺層次和布局、內容擴展性上有精細化思考

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

　　最後，建議運營建立內容管理制度，陳舊過期的內容需要定期去除，以保證站點內容的有效性。定期的內容管理和維護才能從源頭確保網站內容的品質和有效性。

　　2.4 全站無線化

　　15年品牌升級之後，網站部分我們陸續從阿裡媽媽官網到各產品網站，逐步實現無線化。通過每個個案不斷積累經驗，完善無線適配方案。

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

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

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

　　(圖2.5：無線適配方案)

　　2.5 輕量化，降低實現成本

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

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

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

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

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

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

　　三、視覺風格升級

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

　　(圖3：視覺風格升級)

　　3.1 規范的傳承

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

　　3.2 視覺語言的升級

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

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

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

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

　　(圖3.1：圖形設計)

　　其次是配色，配色的基本原則依然是依據整體品牌規范而來，在提取出鑽石展位品牌色後，再比對阿裡媽媽品牌色盤，取深色、對比色和中性色，形成鑽展品牌色盤。在色調控制中，采用了相對克制和有序的色調，具體來說：

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

　　中性色為底色;

　　對比色和深色起視覺調節節奏的作用，因此相對較少;

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

　　(圖3.2：配色)

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

　　(圖3.3：吉祥物透出)

　　四、總結

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