網(wǎng)頁設(shè)計(jì)實(shí)戰(zhàn)!阿里設(shè)計(jì)師總結(jié)的鉆石展位網(wǎng)站改版經(jīng)驗(yàn)分享
阿里媽媽MUX:2015年10月底我們完成了對(duì)鉆石展位原有網(wǎng)頁的升級(jí)改版,在此為這次改版收貨的經(jīng)驗(yàn)做一遍全面的梳理和沉淀。想知道阿里的設(shè)計(jì)師是如何尋找創(chuàng)意/優(yōu)化視覺層級(jí)/選擇配色…… 等等,進(jìn)來學(xué)習(xí)就對(duì)了!
新版上線的地址為:http://zuanshi.taobao.com/ , 歡迎大家點(diǎn)擊瀏覽。
一、背景
鉆石展位產(chǎn)品官方網(wǎng)站的改版,在需求層面,主要基于產(chǎn)品方向的部分變化,產(chǎn)品和運(yùn)營內(nèi)容需要新增和豐富化。同時(shí)結(jié)合用戶和小二反饋,在舊版基礎(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ù)支持類站點(diǎn)等。鉆石展位作為其中的產(chǎn)品網(wǎng)站之一,在設(shè)計(jì)優(yōu)化中,需要從全站的角度思考,解決共性上的問題;同時(shí)根據(jù)業(yè)務(wù)特性解決個(gè)性問題。
鉆石展位網(wǎng)站的共性問題包括站點(diǎn)結(jié)構(gòu)、站點(diǎn)內(nèi)容的梳理;品牌升級(jí)后整體視覺風(fēng)格的優(yōu)化統(tǒng)一;站點(diǎn)的無線適配方案等。
個(gè)性問題包括挖掘不同產(chǎn)品的利益點(diǎn)并通過精準(zhǔn)的創(chuàng)意展現(xiàn);不同產(chǎn)品承載的運(yùn)營類內(nèi)容量級(jí)不同而需要在設(shè)計(jì)模式和展現(xiàn)上精細(xì)化思考;共性問題則是通過品牌指南、設(shè)計(jì)規(guī)范和頁面模版來解決,包括站點(diǎn)的首頁、產(chǎn)品介紹頁、案例結(jié)合頁等,都已經(jīng)有比較成熟的經(jīng)驗(yàn)和沉淀;個(gè)性問題在規(guī)范基礎(chǔ)上,根據(jù)各產(chǎn)品頁面的實(shí)際需求量身定做開放性方案,統(tǒng)一而不失靈活性。(圖2.1)

(圖2.1:全站統(tǒng)一的設(shè)計(jì)思路)
2.2 產(chǎn)品利益點(diǎn)挖掘與創(chuàng)意展開
作為商業(yè)產(chǎn)品的官方網(wǎng)站,主要承載了三大塊內(nèi)容:1、產(chǎn)品操作平臺(tái)的登錄入口,這也是老用戶使用頻次最高的模塊。2、產(chǎn)品利益點(diǎn)和詳細(xì)介紹,是用戶對(duì)產(chǎn)品了解的官方途徑。對(duì)于新用戶能夠起到利益點(diǎn)刺激與引導(dǎo)使用產(chǎn)品,3、運(yùn)營類培訓(xùn)與資訊的承載,通過定期更新和維護(hù),方便新老用戶獲得幫助。
本次鉆石展位的網(wǎng)站改版中,除登錄入口外,二三兩塊我們都做了深入思考和優(yōu)化。首先來講解下利益點(diǎn)傳達(dá)。所謂利益點(diǎn),就是產(chǎn)品最能打動(dòng)用戶的價(jià)值和賣點(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á)整體的信息??梢允瞧放?,可以是店鋪,也可以是某一季的活動(dòng)。
綜上所述,最終確定創(chuàng)意點(diǎn)在于隱喻,以夜空繁星隱喻互聯(lián)網(wǎng)世界中無數(shù)網(wǎng)店,鉆石則隱喻了使用了鉆石展位后脫穎而出的店家。
從調(diào)性來說,首頁Banner采用了手繪的方法,在生活化、活力、溫情的阿里媽媽站點(diǎn)氣質(zhì)中,更凸顯出鉆展自身品牌氣質(zhì)中的人性化。

(圖2.2:草圖設(shè)計(jì)階段)

(圖2.3:banner設(shè)計(jì)最終成品)
2.3 運(yùn)營資訊類頁面的優(yōu)化
其次是運(yùn)營類培訓(xùn)與咨訊的承載的優(yōu)化設(shè)計(jì)。這種類型的頁面,一般分為兩個(gè)層級(jí):第一層級(jí)是內(nèi)容集合頁,匯聚各種內(nèi)容資訊,讓用戶瀏覽和尋找感興趣的文章。第二層級(jí)是文章詳情頁,用戶通過仔細(xì)閱讀獲得幫助。
我們首先優(yōu)化的是,提高內(nèi)容集合頁面的信息承載量。即不通過翻頁或多層級(jí)頁面的形式,單頁面展現(xiàn)出多的文章。讓用戶能夠在單頁面的瀏覽中就能發(fā)現(xiàn)目標(biāo)。這在架構(gòu)層級(jí)上,優(yōu)化了原先多層級(jí)并混亂的狀況;將用戶尋找并閱讀文章的步驟,縮短為2步。(圖2.4)

(圖2.4:左圖為新設(shè)計(jì),右圖為舊的模版設(shè)計(jì))
舊設(shè)計(jì):頁面的信息效率較低,不適合資訊較多,資訊需要進(jìn)行分類的情境
新設(shè)計(jì):提高展現(xiàn)效率,在優(yōu)先級(jí)梳理、視覺層次和布局、內(nèi)容擴(kuò)展性上有精細(xì)化思考
其次,單頁面的設(shè)計(jì),需要在優(yōu)先級(jí)梳理、視覺層級(jí)和布局、未來內(nèi)容量的擴(kuò)展性上做更多的推敲。做到整體信息量豐富但不混亂?!拔乙獙W(xué)習(xí)”案例根據(jù)內(nèi)容重點(diǎn)、以及新老用戶的不同面向,進(jìn)行模塊區(qū)分。同時(shí)考慮內(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年品牌升級(jí)之后,網(wǎng)站部分我們陸續(xù)從阿里媽媽官網(wǎng)到各產(chǎn)品網(wǎng)站,逐步實(shí)現(xiàn)無線化。通過每個(gè)個(gè)案不斷積累經(jīng)驗(yàn),完善無線適配方案。
首先考慮是全站導(dǎo)航和登錄體系在無線設(shè)備上的適配。全站導(dǎo)航起到網(wǎng)站地圖的作用,貫穿阿里媽媽官網(wǎng)、旗下各產(chǎn)品網(wǎng)站、以及培訓(xùn)和客服等服務(wù)支持類站點(diǎn)等。用戶通過網(wǎng)站地圖,能夠從媽媽官方跳轉(zhuǎn)旗下任何產(chǎn)品和平臺(tái),也能從旗下任何產(chǎn)品、平臺(tái)回到媽媽官網(wǎng)。網(wǎng)站地圖展示了我們的品牌結(jié)構(gòu),在阿里媽媽品牌塑造的起步階段,讓用戶有完整的認(rèn)知起到比較重要的作用和意義。
根據(jù)我們的品牌結(jié)構(gòu),全站導(dǎo)航分為一二兩級(jí)。在pc模式下,一二級(jí)導(dǎo)航有比較充分的空間排布,導(dǎo)航內(nèi)部的層級(jí)關(guān)系也可以通過懸停出現(xiàn)下拉菜單的模式出現(xiàn)。
在無線端,沒有懸停行為,同時(shí)需要考慮如何讓多層級(jí)導(dǎo)航在移動(dòng)頁面上有清晰合理呈現(xiàn)。針對(duì)H5頁面的導(dǎo)航方式,我們最終采用將全站導(dǎo)航利用抽屜原則收納在頂部的菜單項(xiàng)中,并將一二級(jí)平鋪展現(xiàn)。登錄操作原理同上。而站點(diǎn)本身層級(jí)的導(dǎo)航(三級(jí)導(dǎo)航)則在頁面中直接展現(xiàn),方便用戶快速切換。(圖2.5)

(圖2.5:無線適配方案)
2.5 輕量化,降低實(shí)現(xiàn)成本
在無線端設(shè)計(jì)過程中,我們有意使無線端更加輕量化,在精簡內(nèi)容的同時(shí),在閱讀情境下,考慮沉浸式的方式。
內(nèi)容信息整合和精簡: 部分頁面從PC到無線做到內(nèi)容精簡處理,以運(yùn)營類的資訊類為例,根據(jù)實(shí)效性,設(shè)定篇幅數(shù)量限制??紤]到陳舊的內(nèi)容在無線情境下對(duì)用戶會(huì)有干擾。
末端沉浸體驗(yàn):在文章詳情頁面上,去除多層級(jí)導(dǎo)航,只保留返回操作,給予用戶沉浸式的閱讀環(huán)境。
降低前端實(shí)現(xiàn)成本,我們適配無線的目的,是為了解決用戶在零碎時(shí)間通過無線設(shè)備了解阿里媽媽與閱讀相關(guān)資訊的需求。因此整體的響應(yīng)方案需要快速適配、簡單實(shí)現(xiàn)。目前只提供pc、無線兩種臨界值。并少量利用彈性圖片。在重點(diǎn)模塊,如首頁banner區(qū)域利用彈性圖片(圖片分層,不同斷點(diǎn)比例不同)以聚焦重點(diǎn);其他區(qū)域基本采用等比縮放適配和適當(dāng)裁切機(jī)制。

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

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

(圖3:視覺風(fēng)格升級(jí))
3.1 規(guī)范的傳承
對(duì)于多產(chǎn)品的品牌來說,統(tǒng)一的品牌形象和風(fēng)格至關(guān)重要,阿里媽媽原有的基礎(chǔ)風(fēng)格思考相對(duì)成熟,且經(jīng)過多次推敲。鉆石展位改版設(shè)計(jì),傳承之前的視覺排版、柵格、組件、模塊等,透氣感的設(shè)計(jì)思維一直是我們主推的觀點(diǎn),以內(nèi)容為王,通過合理的空間梳理,營造出信息層次,最大化降低視覺噪聲。
3.2 視覺語言的升級(jí)
伴隨著15年品牌的升級(jí),網(wǎng)站的視覺語言在原有的基礎(chǔ)上,進(jìn)一步從細(xì)節(jié)出發(fā),將新的品牌識(shí)別體系中的各個(gè)點(diǎn),逐步落實(shí)在頁面設(shè)計(jì)上。
首先是圖形設(shè)計(jì),圖形設(shè)計(jì)在頁面中起到的作用是提煉文字的核心亮點(diǎn),輔助理解介紹性文字。 (圖3.1)
從內(nèi)容上來說,圖形設(shè)計(jì)的內(nèi)容采用了一個(gè)核心元素配一到兩個(gè)輔助元素的組合方法,以便于和文案配合的更為精準(zhǔn)。
從圖形上來說,在創(chuàng)作上圍繞著扁平化、輕擬物、主方正,次圓潤的原則繪制。

(圖3.1:圖形設(shè)計(jì))
其次是配色,配色的基本原則依然是依據(jù)整體品牌規(guī)范而來,在提取出鉆石展位品牌色后,再比對(duì)阿里媽媽品牌色盤,取深色、對(duì)比色和中性色,形成鉆展品牌色盤。在色調(diào)控制中,采用了相對(duì)克制和有序的色調(diào),具體來說:
鉆展品牌色的偏冷色比例相對(duì)較多;(圖3.2)
中性色為底色;
對(duì)比色和深色起視覺調(diào)節(jié)節(jié)奏的作用,因此相對(duì)較少;
每個(gè)畫面元素至多兩種顏色。

(圖3.2:配色)
本次視覺語言的升級(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é)同和支持,大家辛苦啦!
本文地址:http://m.likemindfilms.com/tutorial/ui3203.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏