阿里媽媽MUX鉆石展位的改版總結(jié)【網(wǎng)頁設(shè)計培訓(xùn)】

1、阿里媽媽MUX鉆石展位的改版總結(jié)【網(wǎng)頁設(shè)計培訓(xùn)】作者: 一網(wǎng)學(xué)   最后更新時間：2016-02-22 10:06:45小編：2015年10月底阿里設(shè)計師完成了對鉆石展位的升級改版，今天這篇文章就是對這次改版的收獲做一遍總結(jié)，想知道阿里設(shè)計師如何配色，尋找創(chuàng)意嗎？進(jìn)來學(xué)習(xí)就對了。新版上線的地址為： 歡迎大家點擊瀏覽。一、背景鉆石展位產(chǎn)品官方網(wǎng)站的改版，在需求層面，主要基于產(chǎn)品方向的部分變化，產(chǎn)品和運營內(nèi)容需要新增和豐富化。同時結(jié)合用戶和小二反饋，在舊版基礎(chǔ)上優(yōu)化體驗，讓站點內(nèi)容管理和維護(hù)更便捷。再者，隨著2015年阿里媽媽品牌的升級；我們需要把品牌理念和品牌識別自

2、然融入在網(wǎng)站中。二、整體設(shè)計方向2.1 全站統(tǒng)一的思路阿里媽媽所有網(wǎng)站包括：阿里媽媽官網(wǎng)、旗下各產(chǎn)品網(wǎng)站、以及培訓(xùn)和客服等服務(wù)支持類站點等。鉆石展位作為其中的產(chǎn)品網(wǎng)站之一，在設(shè)計優(yōu)化中，需要從全站的角度思考，解決共性上的問題；同時根據(jù)業(yè)務(wù)特性解決個性問題。鉆石展位網(wǎng)站的共性問題包括站點結(jié)構(gòu)、站點內(nèi)容的梳理；品牌升級后整體視覺風(fēng)格的優(yōu)化統(tǒng)一；站點的無線適配方案等。個性問題包括挖掘不同產(chǎn)品的利益點并通過精準(zhǔn)的創(chuàng)意展現(xiàn)；不同產(chǎn)品承載的運營類內(nèi)容量級不同而需要在設(shè)計模式和展現(xiàn)上精細(xì)化思考；共性問題則是通過品牌指南、設(shè)計規(guī)范和頁面模版來解決，包括站點的首頁、產(chǎn)品介紹頁、案例結(jié)合頁等，都已經(jīng)有比較成熟的經(jīng)

3、驗和沉淀；個性問題在規(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)品利益點和詳細(xì)介紹，是用戶對產(chǎn)品了解的官方途徑。對于新用戶能夠起到利益點刺激與引導(dǎo)使用產(chǎn)品，3、運營類培訓(xùn)與資訊的承載，通過定期更新和維護(hù)，方便新老用戶獲得幫助。本次鉆石展位的網(wǎng)站改版中，除登錄入口外，二三兩塊我們都做了深入思考和優(yōu)化。首先來講解下利益點傳達(dá)。所謂利益點，就是產(chǎn)品最能打動用戶的價值和賣點，精準(zhǔn)的利益點

4、與用戶訴求高度吻合。從文案來說，應(yīng)當(dāng)易讀易記，通俗簡潔，使用戶在短暫的一瞥中基本能感知到講述的內(nèi)容。文案需要說人話，撇棄以往那些冷冰冷但比較空洞的話語。從創(chuàng)意來說，通過和產(chǎn)品及運營的反復(fù)討論，確定了鉆石展位的核心利益點在于“精準(zhǔn)品牌營銷”。所謂“精準(zhǔn)品牌營銷”，在于：一是鉆石展位區(qū)別于其他產(chǎn)品最大的亮點是品牌。這里提到的品牌是指賣家通過鉆展投放廣告，不是推銷單品，而是傳達(dá)整體的信息?？梢允瞧放?，可以是店鋪，也可以是某一季的活動。綜上所述，最終確定創(chuàng)意點在于隱喻，以夜空繁星隱喻互聯(lián)網(wǎng)世界中無數(shù)網(wǎng)店，鉆石則隱喻了使用了鉆石展位后脫穎而出的店家。從調(diào)性來說，首頁Banner采用了手繪的方法，在生活化

5、、活力、溫情的阿里媽媽站點氣質(zhì)中，更凸顯出鉆展自身品牌氣質(zhì)中的人性化。（圖2.2：草圖設(shè)計階段）（圖2.3：banner設(shè)計最終成品）2.3 運營資訊類頁面的優(yōu)化其次是運營類培訓(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

6、.4：左圖為新設(shè)計，右圖為舊的模版設(shè)計）舊設(shè)計：頁面的信息效率較低，不適合資訊較多，資訊需要進(jìn)行分類的情境新設(shè)計：提高展現(xiàn)效率，在優(yōu)先級梳理、視覺層次和布局、內(nèi)容擴展性上有精細(xì)化思考其次，單頁面的設(shè)計，需要在優(yōu)先級梳理、視覺層級和布局、未來內(nèi)容量的擴展性上做更多的推敲。做到整體信息量豐富但不混亂。“我要學(xué)習(xí)”案例根據(jù)內(nèi)容重點、以及新老用戶的不同面向，進(jìn)行模塊區(qū)分。同時考慮內(nèi)容擴展性，部分模塊利用虛擬空間，頁內(nèi)刷新，增加信息承載量。最后，建議運營建立內(nèi)容管理制度，陳舊過期的內(nèi)容需要定期去除，以保證站點內(nèi)容的有效性。定期的內(nèi)容管理和維護(hù)才能從源頭確保網(wǎng)站內(nèi)容的品質(zhì)和有效性。2.4 全站無線化15年

7、品牌升級之后，網(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ù)支持類站點等。用戶通過網(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)下拉菜單的模式出

8、現(xiàn)。在無線端，沒有懸停行為，同時需要考慮如何讓多層級導(dǎo)航在移動頁面上有清晰合理呈現(xiàn)。針對H5頁面的導(dǎo)航方式，我們最終采用將全站導(dǎo)航利用抽屜原則收納在頂部的菜單項中，并將一二級平鋪展現(xiàn)。登錄操作原理同上。而站點本身層級的導(dǎo)航（三級導(dǎo)航）則在頁面中直接展現(xiàn)，方便用戶快速切換。（圖2.5）（圖2.5：無線適配方案）2.5 輕量化，降低實現(xiàn)成本在無線端設(shè)計過程中，我們有意使無線端更加輕量化，在精簡內(nèi)容的同時，在閱讀情境下，考慮沉浸式的方式。內(nèi)容信息整合和精簡： 部分頁面從PC到無線做到內(nèi)容精簡處理，以運營類的資訊類為例，根據(jù)實效性，設(shè)定篇幅數(shù)量限制?？紤]到陳舊的內(nèi)容在無線情境下對用戶會有干擾。末端沉浸

9、體驗：在文章詳情頁面上，去除多層級導(dǎo)航，只保留返回操作，給予用戶沉浸式的閱讀環(huán)境。降低前端實現(xiàn)成本，我們適配無線的目的，是為了解決用戶在零碎時間通過無線設(shè)備了解阿里媽媽與閱讀相關(guān)資訊的需求。因此整體的響應(yīng)方案需要快速適配、簡單實現(xiàn)。目前只提供pc、無線兩種臨界值。并少量利用彈性圖片。在重點模塊，如首頁banner區(qū)域利用彈性圖片（圖片分層，不同斷點比例不同）以聚焦重點；其他區(qū)域基本采用等比縮放適配和適當(dāng)裁切機制。（圖2.6：內(nèi)容信息整合和精簡）（圖2.7：輕量化和沉浸式）三、視覺風(fēng)格升級隨著阿里媽媽整體網(wǎng)站品牌識別系統(tǒng)的完善，鉆石展位的改版成為了品牌識別系統(tǒng)在網(wǎng)站中落地和應(yīng)用的契機，因此在本次

10、改版設(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è)計思維一直是我們主推的觀點，以內(nèi)容為王，通過合理的空間梳理，營造出信息層次，最大化降低視覺噪聲。3.2 視覺語言的升級伴隨著15年品牌的升級，網(wǎng)站的視覺語言在原有的基礎(chǔ)上，進(jìn)一步從細(xì)節(jié)出發(fā)，將新的品牌識別體系中的各個點

11、，逐步落實在頁面設(shè)計上。首先是圖形設(shè)計，圖形設(shè)計在頁面中起到的作用是提煉文字的核心亮點，輔助理解介紹性文字。 （圖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：配色）本次視覺語言的升級的另一個亮點在于吉祥物的透出，本期改版融入了阿里媽媽全新的吉祥物形象，從細(xì)節(jié)入手，點滴滲透。（圖3.3：吉祥物透出）四、總結(jié)本次鉆石展位的升級改版把品牌理念和品牌識別自然融入在網(wǎng)站中， 在舊版基礎(chǔ)上優(yōu)化體驗，讓站點內(nèi)容管理和維護(hù)更便捷，雖然整體設(shè)計仍有提升空間，但為品牌識別系統(tǒng)在網(wǎng)站中落地和應(yīng)用積累了經(jīng)驗。與此同時，也要感謝各