面對(duì)互聯(lián)網(wǎng)產(chǎn)品的日益變化和用戶的不斷成長(zhǎng)，淘寶在經(jīng)歷了移動(dòng)互聯(lián)網(wǎng)爆炸式的發(fā)展后，是時(shí)候全面升級(jí)了。寒冬已過(guò)，楊柳夾岸，艷桃灼灼，迎著春天的氣息我們向用戶呈現(xiàn)出一個(gè)全新的手淘客戶端，期望向他們傳達(dá)新的品牌理念，配合更流行的觀感和更友好的體驗(yàn)賦予淘寶更年輕的品牌精神。這是手淘首次以設(shè)計(jì)為主導(dǎo)的版本升級(jí)。

面對(duì)復(fù)雜的產(chǎn)品改版，設(shè)計(jì)師猶如妙手回春的醫(yī)生，需要用專業(yè)的手段治理產(chǎn)品里的各種疑難雜癥，從內(nèi)至外顧及各種牽連的細(xì)節(jié)進(jìn)行整體治療，從而讓產(chǎn)品更加美觀、健康、舒服。在歷時(shí)很長(zhǎng)的項(xiàng)目過(guò)程中，我們一步步地將公司的設(shè)計(jì)戰(zhàn)略分解成產(chǎn)品體驗(yàn)方向，從設(shè)計(jì)概念落地到界面設(shè)計(jì)語(yǔ)言，在執(zhí)行過(guò)程中又不斷地平衡各種設(shè)計(jì)細(xì)節(jié)，才有最終的設(shè)計(jì)產(chǎn)出。所有的改變都是為了給用戶營(yíng)造更加良好體驗(yàn)的購(gòu)物環(huán)境，那我們就先來(lái)看看這次升級(jí)針對(duì)的人群特征。

一、人群特征

淘寶用戶研究數(shù)據(jù)分析出主力人群越來(lái)年輕化，通過(guò)典型畫(huà)像分析出年輕化、豐富化、個(gè)性化的形象標(biāo)簽，為改版手淘奠定了新的基調(diào)及品牌語(yǔ)言：活力、親和、鮮明。產(chǎn)品體驗(yàn)設(shè)計(jì)需有親和力，能帶給用戶生活和情感上的共鳴，貼心、自然、生活化。例如產(chǎn)品設(shè)計(jì)應(yīng)該是親和的，舒緩的提示動(dòng)態(tài)、親切的文案話術(shù)、舒適的顏色搭配、自然的視覺(jué)流等。

二、設(shè)計(jì)體驗(yàn)方向

根據(jù)公司策略、業(yè)務(wù)、人群的變化，我們進(jìn)行手淘的設(shè)計(jì)改版，希望以此進(jìn)一步提升用戶體驗(yàn)。以設(shè)計(jì)部三大策略：認(rèn)知減負(fù)、內(nèi)容吸引、品牌滲透，作為高層次體驗(yàn)的指引。針對(duì)這三大策略，在改版上我們對(duì)當(dāng)前版本的問(wèn)題進(jìn)行分析，同時(shí)對(duì)這幾年的設(shè)計(jì)方向進(jìn)行總結(jié)。

認(rèn)知減負(fù)

從手淘整體設(shè)計(jì)上考慮，需要更加突出內(nèi)容的呈現(xiàn)，在內(nèi)容化設(shè)計(jì)上需要更明確的認(rèn)知，在同類型內(nèi)容模塊的設(shè)計(jì)表現(xiàn)也需一致，減少過(guò)多結(jié)構(gòu)樣式的表達(dá)，保持一定的韻律感和統(tǒng)一性，給用戶內(nèi)容豐富但結(jié)構(gòu)簡(jiǎn)明的視覺(jué)認(rèn)知。

內(nèi)容吸引

從業(yè)務(wù)和用戶角度考慮，設(shè)計(jì)規(guī)劃業(yè)務(wù)內(nèi)容更立體的展示空間，主次分明，流暢的瀏覽體驗(yàn)，以及內(nèi)容的氛圍營(yíng)造、出其不意的驚喜。

品牌滲透

優(yōu)先考慮手淘大品牌，在視覺(jué)表達(dá)上不用太突出業(yè)務(wù)品牌特色，引導(dǎo)業(yè)務(wù)側(cè)重內(nèi)容特色。視覺(jué)品牌考慮是手淘大一統(tǒng)的品牌感與品質(zhì)，品牌基因可滲透各鏈路界面里。

三、設(shè)計(jì)概念/思路

思路

將手淘視覺(jué)體驗(yàn)進(jìn)行整體走查，分為了框架結(jié)構(gòu)類型、全局通用元素、業(yè)務(wù)特殊類型進(jìn)行問(wèn)題分析。發(fā)現(xiàn)整體結(jié)構(gòu)布局、UI元素、業(yè)務(wù)統(tǒng)一組件以及拓展的設(shè)計(jì)都有很多優(yōu)化空間，可塑造更立體完整的品牌形象，以及注入一些品牌性格。整體界面感覺(jué)需清晰、連續(xù)、舒適、愉悅、完整一氣呵成。就好比書(shū)法章法的講究，整體“以章法為先，運(yùn)實(shí)為虛，實(shí)處俱靈;以虛為實(shí)，斷處俱續(xù)。點(diǎn)畫(huà)與點(diǎn)畫(huà)之間的呼應(yīng)，字與字之間的顧盼，行與行之間的相映，整體上氣韻通達(dá)，虛實(shí)相生”。對(duì)內(nèi)容重新理解，定義場(chǎng)景，重整框架，新的設(shè)計(jì)方式將界面呈現(xiàn)全新面貌，給用戶整體的感知，達(dá)到想要的章法效果，有序可循，有理可依，有清晰的規(guī)劃迭代。

視覺(jué)打法

視覺(jué)體驗(yàn)就是最重視人的情緒體驗(yàn)，每一處的設(shè)計(jì)都能影響人的微妙情緒，點(diǎn)到整的總體感受，我稱之為視覺(jué)情緒管理。將發(fā)現(xiàn)的視覺(jué)問(wèn)題色彩單一、不吸引、分割多、線條多、平靜、擁擠等感受歸列 3 個(gè)主要情緒–單調(diào)感、擠壓感、無(wú)聊感。一一對(duì)應(yīng)優(yōu)化為繽紛豐富、內(nèi)容透出、時(shí)尚感、簡(jiǎn)潔緩和、動(dòng)態(tài)情緒、視覺(jué)呼吸，引出 3 個(gè)新情緒–情緒愉悅、視覺(jué)呼吸、好奇驚喜。

六點(diǎn)設(shè)計(jì)理念：視覺(jué)吸引、瀏覽舒適、內(nèi)容立體、最優(yōu)平衡、框架統(tǒng)一、基因滲透

基于以上所述的前期探索引出六點(diǎn)設(shè)計(jì)理念，梳理清楚視覺(jué)的情緒方向，整體考慮表現(xiàn)的韻律美、結(jié)構(gòu)美、優(yōu)雅的細(xì)節(jié)等，還要更多思考的是以設(shè)計(jì)解決業(yè)務(wù)問(wèn)題，因?yàn)槭鞘痔曰A(chǔ)鏈路整體改版，個(gè)人不可能了解所有業(yè)務(wù)，所以看的更多是手淘整體共性的體驗(yàn)問(wèn)題，考慮的設(shè)計(jì)方向或規(guī)范須是普適于各基礎(chǔ)業(yè)務(wù)的，當(dāng)然個(gè)別業(yè)務(wù)特殊情況特殊處理，根據(jù)業(yè)務(wù)本身重要特性該突出的突出該收斂的收斂，每一點(diǎn)UI元素都是經(jīng)過(guò)全局考慮精心斟酌，對(duì)于如此龐大的產(chǎn)品包來(lái)說(shuō)多一點(diǎn)元素都是負(fù)擔(dān)，視覺(jué)退一步服務(wù)于產(chǎn)品內(nèi)容，使內(nèi)容更加突出展示及清爽大方，當(dāng)然在需要視覺(jué)氛圍重渲染的情況還是該有它的出彩，每一點(diǎn)的斟酌都只為整體品質(zhì)，點(diǎn)線面的重新塑造手淘新品牌。

1、視覺(jué)吸引：時(shí)尚而繽紛，充滿生機(jī)與活力

第一時(shí)間進(jìn)入視覺(jué)的往往是顏色，原來(lái)扁平單一的色彩需要更加時(shí)尚年輕化，色彩繽紛時(shí)尚、明亮親和、重點(diǎn)突出。顏色使用漸變?nèi)诤蠘邮?，我們一直不斷的調(diào)試最合適淘寶的漸變色度，要充滿生機(jī)活力及友好。在顏色變化時(shí)需每位設(shè)計(jì)師對(duì)色彩高度敏感與把握，調(diào)不好就回到十年前，調(diào)得好就現(xiàn)代化，調(diào)得淺亮易粉嫩刺眼，調(diào)得深暗易厚重不通透等，都很影響用戶的觀感，所以在用色方面需很細(xì)心講究。漸變色在一些操作功能上也起到引導(dǎo)作用，按鈕的漸變或加立體大投影，增強(qiáng)點(diǎn)擊引導(dǎo)，比如登錄、彈窗按鈕、加購(gòu)、關(guān)注等業(yè)務(wù)需重點(diǎn)引導(dǎo)的操作。我們也設(shè)定了文本的功能性顏色使用，比如普通正文為黑，輔助為灰，連接色為藍(lán)，重提示為橙等用戶普遍認(rèn)知的功能色?；A(chǔ)鏈路界面定義使用淘寶橙主色樣式，不同場(chǎng)景如不適用可微調(diào)，行業(yè)可根據(jù)自身品牌色調(diào)整，飽和度明度相同、漸變角度統(tǒng)一即可。

(1) 繽紛豐富的調(diào)色板

(2)使用色升級(jí)為漸變，根據(jù)不同語(yǔ)義、行業(yè)自有品牌色用色

(3)淘寶品牌色(基礎(chǔ)色)的漸變使用

(4) 繽紛多彩的漸變使用

2、瀏覽舒適：視覺(jué)扁平、視覺(jué)呼吸、簡(jiǎn)明統(tǒng)一、節(jié)奏韻律、高效瀏覽

(1)視覺(jué)扁平

梳理手淘框架結(jié)構(gòu)及表現(xiàn)層，整體視覺(jué)框架盡可能扁平處理，減少多余元素，用顏色和模塊區(qū)分出不同層級(jí)的內(nèi)容，能用一層元素區(qū)隔就不用第二層。比如信息卡片去掉了陰影，分割線減少及統(tǒng)一淺色值，板塊分割統(tǒng)一參數(shù)這些細(xì)節(jié)，讓內(nèi)容更清爽的呈現(xiàn)，讓用戶清晰關(guān)注到不同即可。

(2)視覺(jué)呼吸

圖文組合板塊適當(dāng)增加空間，調(diào)整到最舒適平衡的視覺(jué)結(jié)構(gòu)，有視覺(jué)呼吸感，讓用戶在購(gòu)物瀏覽時(shí)處于高效及相對(duì)舒適狀態(tài)。比如像我的淘寶改版，設(shè)計(jì)師進(jìn)行的視覺(jué)呼吸的常態(tài)工具卡系列設(shè)計(jì)，就很符合設(shè)計(jì)理念。

我的淘寶內(nèi)容卡片

(3)簡(jiǎn)明統(tǒng)一

不增加結(jié)構(gòu)的復(fù)雜性，不增加用戶的認(rèn)知成本，整體保持一致的韻律感。一個(gè)頁(yè)面 3 個(gè)以內(nèi)版式最為合宜。盡量將同類型場(chǎng)景、內(nèi)容模版統(tǒng)一，達(dá)到簡(jiǎn)明統(tǒng)一的效果。比如行業(yè)模塊入口的統(tǒng)一方式，解決用戶對(duì)同類型內(nèi)容的認(rèn)知。比如微淘的內(nèi)容流卡片大結(jié)構(gòu)的統(tǒng)一富文本不同的變化。