阿里媽媽MUX：2015年10月底我們完成了對(duì)鉆石展位原有網(wǎng)頁(yè)的升級(jí)改版，在此為這次改版收貨的經(jīng)驗(yàn)做一遍全面的梳理和沉淀湖雹。想知道阿里的設(shè)計(jì)師是如何尋找創(chuàng)意/優(yōu)化視覺(jué)層級(jí)/選擇配色…… 等等赦颇，進(jìn)來(lái)學(xué)習(xí)就對(duì)了二鳄！
新版上線的地址為：http://zuanshi.taobao.com/， 歡迎大家點(diǎn)擊瀏覽媒怯。
一订讼、背景
鉆石展位產(chǎn)品官方網(wǎng)站的改版，在需求層面扇苞，主要基于產(chǎn)品方向的部分變化欺殿，產(chǎn)品和運(yùn)營(yíng)內(nèi)容需要新增和豐富化寄纵。同時(shí)結(jié)合用戶(hù)和小二反饋，在舊版基礎(chǔ)上優(yōu)化體驗(yàn)脖苏，讓站點(diǎn)內(nèi)容管理和維護(hù)更便捷程拭。
再者，隨著2015年阿里媽媽品牌的升級(jí)棍潘；我們需要把品牌理念和品牌識(shí)別自然融入在網(wǎng)站中恃鞋。
二、整體設(shè)計(jì)方向
2.1 全站統(tǒng)一的思路
阿里媽媽所有網(wǎng)站包括：阿里媽媽官網(wǎng)蜒谤、旗下各產(chǎn)品網(wǎng)站山宾、以及培訓(xùn)和客服等服務(wù)支持類(lèi)站點(diǎn)等。鉆石展位作為其中的產(chǎn)品網(wǎng)站之一鳍徽，在設(shè)計(jì)優(yōu)化中资锰，需要從全站的角度思考，解決共性上的問(wèn)題阶祭；同時(shí)根據(jù)業(yè)務(wù)特性解決個(gè)性問(wèn)題绷杜。
鉆石展位網(wǎng)站的共性問(wèn)題包括站點(diǎn)結(jié)構(gòu)、站點(diǎn)內(nèi)容的梳理濒募；品牌升級(jí)后整體視覺(jué)風(fēng)格的優(yōu)化統(tǒng)一鞭盟；站點(diǎn)的無(wú)線適配方案等。
個(gè)性問(wèn)題包括挖掘不同產(chǎn)品的利益點(diǎn)并通過(guò)精準(zhǔn)的創(chuàng)意展現(xiàn)瑰剃；不同產(chǎn)品承載的運(yùn)營(yíng)類(lèi)內(nèi)容量級(jí)不同而需要在設(shè)計(jì)模式和展現(xiàn)上精細(xì)化思考齿诉；共性問(wèn)題則是通過(guò)品牌指南、設(shè)計(jì)規(guī)范和頁(yè)面模版來(lái)解決晌姚，包括站點(diǎn)的首頁(yè)粤剧、產(chǎn)品介紹頁(yè)、案例結(jié)合頁(yè)等挥唠，都已經(jīng)有比較成熟的經(jīng)驗(yàn)和沉淀抵恋；個(gè)性問(wèn)題在規(guī)范基礎(chǔ)上，根據(jù)各產(chǎn)品頁(yè)面的實(shí)際需求量身定做開(kāi)放性方案宝磨，統(tǒng)一而不失靈活性弧关。（圖2.1）
（圖2.1：全站統(tǒng)一的設(shè)計(jì)思路）
2.2 產(chǎn)品利益點(diǎn)挖掘與創(chuàng)意展開(kāi)
作為商業(yè)產(chǎn)品的官方網(wǎng)站，主要承載了三大塊內(nèi)容：1唤锉、產(chǎn)品操作平臺(tái)的登錄入口世囊，這也是老用戶(hù)使用頻次最高的模塊。2窿祥、產(chǎn)品利益點(diǎn)和詳細(xì)介紹茸习，是用戶(hù)對(duì)產(chǎn)品了解的官方途徑。對(duì)于新用戶(hù)能夠起到利益點(diǎn)刺激與引導(dǎo)使用產(chǎn)品壁肋，3号胚、運(yùn)營(yíng)類(lèi)培訓(xùn)與資訊的承載，通過(guò)定期更新和維護(hù)浸遗，方便新老用戶(hù)獲得幫助猫胁。
本次鉆石展位的網(wǎng)站改版中，除登錄入口外跛锌，二三兩塊我們都做了深入思考和優(yōu)化弃秆。首先來(lái)講解下利益點(diǎn)傳達(dá)。所謂利益點(diǎn)髓帽，就是產(chǎn)品最能打動(dòng)用戶(hù)的價(jià)值和賣(mài)點(diǎn)菠赚，精準(zhǔn)的利益點(diǎn)與用戶(hù)訴求高度吻合。
從文案來(lái)說(shuō)郑藏，應(yīng)當(dāng)易讀易記衡查，通俗簡(jiǎn)潔，使用戶(hù)在短暫的一瞥中基本能感知到講述的內(nèi)容必盖。文案需要說(shuō)人話(huà)拌牲，撇棄以往那些冷冰冷但比較空洞的話(huà)語(yǔ)。
從創(chuàng)意來(lái)說(shuō)歌粥，通過(guò)和產(chǎn)品及運(yùn)營(yíng)的反復(fù)討論塌忽，確定了鉆石展位的核心利益點(diǎn)在于“精準(zhǔn)品牌營(yíng)銷(xiāo)”。所謂“精準(zhǔn)品牌營(yíng)銷(xiāo)”失驶，在于：一是鉆石展位區(qū)別于其他產(chǎn)品最大的亮點(diǎn)是品牌土居。這里提到的品牌是指賣(mài)家通過(guò)鉆展投放廣告，不是推銷(xiāo)單品嬉探，而是傳達(dá)整體的信息擦耀。可以是品牌甲馋，可以是店鋪埂奈，也可以是某一季的活動(dòng)。
綜上所述定躏，最終確定創(chuàng)意點(diǎn)在于隱喻账磺，以夜空繁星隱喻互聯(lián)網(wǎng)世界中無(wú)數(shù)網(wǎng)店，鉆石則隱喻了使用了鉆石展位后脫穎而出的店家痊远。
從調(diào)性來(lái)說(shuō)垮抗，首頁(yè)Banner采用了手繪的方法，在生活化碧聪、活力冒版、溫情的阿里媽媽站點(diǎn)氣質(zhì)中，更凸顯出鉆展自身品牌氣質(zhì)中的人性化逞姿。
（圖2.2：草圖設(shè)計(jì)階段）
（圖2.3：banner設(shè)計(jì)最終成品）
2.3 運(yùn)營(yíng)資訊類(lèi)頁(yè)面的優(yōu)化
其次是運(yùn)營(yíng)類(lèi)培訓(xùn)與咨訊的承載的優(yōu)化設(shè)計(jì)辞嗡。這種類(lèi)型的頁(yè)面捆等，一般分為兩個(gè)層級(jí)：第一層級(jí)是內(nèi)容集合頁(yè)，匯聚各種內(nèi)容資訊续室，讓用戶(hù)瀏覽和尋找感興趣的文章栋烤。第二層級(jí)是文章詳情頁(yè)，用戶(hù)通過(guò)仔細(xì)閱讀獲得幫助挺狰。
我們首先優(yōu)化的是明郭，提高內(nèi)容集合頁(yè)面的信息承載量。即不通過(guò)翻頁(yè)或多層級(jí)頁(yè)面的形式丰泊，單頁(yè)面展現(xiàn)出多的文章薯定。讓用戶(hù)能夠在單頁(yè)面的瀏覽中就能發(fā)現(xiàn)目標(biāo)。這在架構(gòu)層級(jí)上瞳购，優(yōu)化了原先多層級(jí)并混亂的狀況话侄；將用戶(hù)尋找并閱讀文章的步驟，縮短為2步苛败。（圖2.4）
（圖2.4：左圖為新設(shè)計(jì)满葛，右圖為舊的模版設(shè)計(jì)）
舊設(shè)計(jì)：頁(yè)面的信息效率較低，不適合資訊較多罢屈，資訊需要進(jìn)行分類(lèi)的情境
新設(shè)計(jì)：提高展現(xiàn)效率嘀韧，在優(yōu)先級(jí)梳理、視覺(jué)層次和布局缠捌、內(nèi)容擴(kuò)展性上有精細(xì)化思考
其次锄贷，單頁(yè)面的設(shè)計(jì)，需要在優(yōu)先級(jí)梳理曼月、視覺(jué)層級(jí)和布局谊却、未來(lái)內(nèi)容量的擴(kuò)展性上做更多的推敲。做到整體信息量豐富但不混亂哑芹⊙妆妫“我要學(xué)習(xí)”案例根據(jù)內(nèi)容重點(diǎn)、以及新老用戶(hù)的不同面向聪姿，進(jìn)行模塊區(qū)分碴萧。同時(shí)考慮內(nèi)容擴(kuò)展性，部分模塊利用虛擬空間末购，頁(yè)內(nèi)刷新破喻，增加信息承載量。
最后盟榴，建議運(yùn)營(yíng)建立內(nèi)容管理制度曹质，陳舊過(guò)期的內(nèi)容需要定期去除，以保證站點(diǎn)內(nèi)容的有效性。定期的內(nèi)容管理和維護(hù)才能從源頭確保網(wǎng)站內(nèi)容的品質(zhì)和有效性羽德。
2.4 全站無(wú)線化
15年品牌升級(jí)之后几莽，網(wǎng)站部分我們陸續(xù)從阿里媽媽官網(wǎng)到各產(chǎn)品網(wǎng)站，逐步實(shí)現(xiàn)無(wú)線化玩般。通過(guò)每個(gè)個(gè)案不斷積累經(jīng)驗(yàn)银觅，完善無(wú)線適配方案。
首先考慮是全站導(dǎo)航和登錄體系在無(wú)線設(shè)備上的適配坏为。全站導(dǎo)航起到網(wǎng)站地圖的作用，貫穿阿里媽媽官網(wǎng)镊绪、旗下各產(chǎn)品網(wǎng)站匀伏、以及培訓(xùn)和客服等服務(wù)支持類(lèi)站點(diǎn)等。用戶(hù)通過(guò)網(wǎng)站地圖蝴韭，能夠從媽媽官方跳轉(zhuǎn)旗下任何產(chǎn)品和平臺(tái)够颠，也能從旗下任何產(chǎn)品、平臺(tái)回到媽媽官網(wǎng)榄鉴。網(wǎng)站地圖展示了我們的品牌結(jié)構(gòu)履磨，在阿里媽媽品牌塑造的起步階段，讓用戶(hù)有完整的認(rèn)知起到比較重要的作用和意義庆尘。
根據(jù)我們的品牌結(jié)構(gòu)剃诅，全站導(dǎo)航分為一二兩級(jí)。在pc模式下驶忌，一二級(jí)導(dǎo)航有比較充分的空間排布矛辕，導(dǎo)航內(nèi)部的層級(jí)關(guān)系也可以通過(guò)懸停出現(xiàn)下拉菜單的模式出現(xiàn)。
在無(wú)線端付魔，沒(méi)有懸停行為聊品，同時(shí)需要考慮如何讓多層級(jí)導(dǎo)航在移動(dòng)頁(yè)面上有清晰合理呈現(xiàn)。針對(duì)H5頁(yè)面的導(dǎo)航方式几苍，我們最終采用將全站導(dǎo)航利用抽屜原則收納在頂部的菜單項(xiàng)中翻屈，并將一二級(jí)平鋪展現(xiàn)。登錄操作原理同上妻坝。而站點(diǎn)本身層級(jí)的導(dǎo)航（三級(jí)導(dǎo)航）則在頁(yè)面中直接展現(xiàn)伸眶，方便用戶(hù)快速切換。（圖2.5）
（圖2.5：無(wú)線適配方案）
2.5 輕量化惠勒，降低實(shí)現(xiàn)成本
在無(wú)線端設(shè)計(jì)過(guò)程中赚抡，我們有意使無(wú)線端更加輕量化，在精簡(jiǎn)內(nèi)容的同時(shí)纠屋，在閱讀情境下涂臣，考慮沉浸式的方式。
內(nèi)容信息整合和精簡(jiǎn)： 部分頁(yè)面從PC到無(wú)線做到內(nèi)容精簡(jiǎn)處理，以運(yùn)營(yíng)類(lèi)的資訊類(lèi)為例赁遗，根據(jù)實(shí)效性署辉，設(shè)定篇幅數(shù)量限制⊙宜模考慮到陳舊的內(nèi)容在無(wú)線情境下對(duì)用戶(hù)會(huì)有干擾哭尝。
末端沉浸體驗(yàn)：在文章詳情頁(yè)面上，去除多層級(jí)導(dǎo)航剖煌，只保留返回操作材鹦，給予用戶(hù)沉浸式的閱讀環(huán)境。
降低前端實(shí)現(xiàn)成本耕姊，我們適配無(wú)線的目的桶唐，是為了解決用戶(hù)在零碎時(shí)間通過(guò)無(wú)線設(shè)備了解阿里媽媽與閱讀相關(guān)資訊的需求。因此整體的響應(yīng)方案需要快速適配茉兰、簡(jiǎn)單實(shí)現(xiàn)尤泽。目前只提供pc、無(wú)線兩種臨界值规脸。并少量利用彈性圖片坯约。在重點(diǎn)模塊，如首頁(yè)banner區(qū)域利用彈性圖片（圖片分層莫鸭，不同斷點(diǎn)比例不同）以聚焦重點(diǎn)闹丐；其他區(qū)域基本采用等比縮放適配和適當(dāng)裁切機(jī)制。
（圖2.6：內(nèi)容信息整合和精簡(jiǎn)）
（圖2.7：輕量化和沉浸式）
三黔龟、視覺(jué)風(fēng)格升級(jí)
隨著阿里媽媽整體網(wǎng)站品牌識(shí)別系統(tǒng)的完善妇智，鉆石展位的改版成為了品牌識(shí)別系統(tǒng)在網(wǎng)站中落地和應(yīng)用的契機(jī)，因此在本次改版設(shè)計(jì)中氏身， 遵循了品牌規(guī)范和風(fēng)格定義巍棱，包括圖像、色盤(pán)蛋欣、插圖航徙、圖標(biāo)、字體等模塊陷虎，以生活化到踏、活力、溫情營(yíng)造出阿里媽媽品牌氣質(zhì)尚猿。同時(shí)本期也逐漸把媽媽吉祥物合理地融入設(shè)計(jì)中去窝稿。
（圖3：視覺(jué)風(fēng)格升級(jí)）
3.1 規(guī)范的傳承
對(duì)于多產(chǎn)品的品牌來(lái)說(shuō)，統(tǒng)一的品牌形象和風(fēng)格至關(guān)重要凿掂，阿里媽媽原有的基礎(chǔ)風(fēng)格思考相對(duì)成熟伴榔，且經(jīng)過(guò)多次推敲纹蝴。鉆石展位改版設(shè)計(jì)，傳承之前的視覺(jué)排版踪少、柵格塘安、組件、模塊等援奢，透氣感的設(shè)計(jì)思維一直是我們主推的觀點(diǎn)兼犯，以?xún)?nèi)容為王，通過(guò)合理的空間梳理集漾，營(yíng)造出信息層次切黔，最大化降低視覺(jué)噪聲。
3.2 視覺(jué)語(yǔ)言的升級(jí)
伴隨著15年品牌的升級(jí)具篇，網(wǎng)站的視覺(jué)語(yǔ)言在原有的基礎(chǔ)上绕娘，進(jìn)一步從細(xì)節(jié)出發(fā)咐汞，將新的品牌識(shí)別體系中的各個(gè)點(diǎn)访敌，逐步落實(shí)在頁(yè)面設(shè)計(jì)上誉己。
首先是圖形設(shè)計(jì)，圖形設(shè)計(jì)在頁(yè)面中起到的作用是提煉文字的核心亮點(diǎn)秒紧，輔助理解介紹性文字。 （圖3.1）
從內(nèi)容上來(lái)說(shuō)挨下，圖形設(shè)計(jì)的內(nèi)容采用了一個(gè)核心元素配一到兩個(gè)輔助元素的組合方法熔恢，以便于和文案配合的更為精準(zhǔn)。
從圖形上來(lái)說(shuō)臭笆，在創(chuàng)作上圍繞著扁平化叙淌、輕擬物、主方正愁铺，次圓潤(rùn)的原則繪制鹰霍。
（圖3.1：圖形設(shè)計(jì)）
其次是配色，配色的基本原則依然是依據(jù)整體品牌規(guī)范而來(lái)茵乱，在提取出鉆石展位品牌色后茂洒，再比對(duì)阿里媽媽品牌色盤(pán)，取深色瓶竭、對(duì)比色和中性色督勺，形成鉆展品牌色盤(pán)。在色調(diào)控制中斤贰，采用了相對(duì)克制和有序的色調(diào)智哀，具體來(lái)說(shuō)：
鉆展品牌色的偏冷色比例相對(duì)較多；（圖3.2）
中性色為底色荧恍；
對(duì)比色和深色起視覺(jué)調(diào)節(jié)節(jié)奏的作用瓷叫，因此相對(duì)較少；
每個(gè)畫(huà)面元素至多兩種顏色。
（圖3.2：配色）
本次視覺(jué)語(yǔ)言的升級(jí)的另一個(gè)亮點(diǎn)在于吉祥物的透出赞辩，本期改版融入了阿里媽媽全新的吉祥物形象雌芽，從細(xì)節(jié)入手，點(diǎn)滴滲透辨嗽。
（圖3.3：吉祥物透出）
四世落、總結(jié)
本次鉆石展位的升級(jí)改版把品牌理念和品牌識(shí)別自然融入在網(wǎng)站中， 在舊版基礎(chǔ)上優(yōu)化體驗(yàn)糟需，讓站點(diǎn)內(nèi)容管理和維護(hù)更便捷屉佳，雖然整體設(shè)計(jì)仍有提升空間，但為品牌識(shí)別系統(tǒng)在網(wǎng)站中落地和應(yīng)用積累了經(jīng)驗(yàn)洲押。與此同時(shí)武花，也要感謝各個(gè)參與項(xiàng)目同學(xué)的協(xié)同和支持，大家辛苦啦杈帐！
非特殊說(shuō)明体箕，文章歸原作者所有，轉(zhuǎn)載請(qǐng)注明出處
