手機(jī)淘寶2017大改版，UED團(tuán)隊回顧幕后
面對互聯(lián)網(wǎng)產(chǎn)品的日益變化和用戶的不斷成長，淘寶在經(jīng)歷了移動互聯(lián)網(wǎng)爆炸式的發(fā)展后，是時候全面升級了。
寒冬已過，楊柳夾岸，艷桃灼灼，迎著春天的氣息我們向用戶呈現(xiàn)出一個全新的手淘客戶端，期望向他們傳達(dá)新的品牌理念，配合更流行的觀感和更友好的體驗賦予淘寶更年輕的品牌精神。這是手淘首次以設(shè)計為主導(dǎo)的版本升級。面對復(fù)雜的產(chǎn)品改版，設(shè)計師猶如妙手回春的醫(yī)生，需要用專業(yè)的手段治理產(chǎn)品里的各種疑難雜癥，從內(nèi)至外顧及各種牽連的細(xì)節(jié)進(jìn)行整體治療，從而讓產(chǎn)品更加美觀、健康、舒服。在歷時很長的項目過程中，我們一步步地將公司的設(shè)計戰(zhàn)略分解成產(chǎn)品體驗方向，從設(shè)計概念落地到界面設(shè)計語言，在執(zhí)行過程中又不斷地平衡各種設(shè)計細(xì)節(jié)，才有最終的設(shè)計產(chǎn)出。所有的改變都是為了給用戶營造更加良好體驗的購物環(huán)境，那我們就先來看看這次升級針對的人群特征。
一、人群特征
淘寶用戶研究數(shù)據(jù)分析出主力人群越來年輕化，通過典型畫像分析出年輕化、豐富化、個性化的形象標(biāo)簽，為改版手淘奠定了新的基調(diào)及品牌語言：活力、親和、鮮明。產(chǎn)品體驗設(shè)計需有親和力，能帶給用戶生活和情感上的共鳴，貼心、自然、生活化。例如產(chǎn)品設(shè)計應(yīng)該是親和的，舒緩的提示動態(tài)、親切的文案話術(shù)、舒適的顏色搭配、自然的視覺流等。
二、設(shè)計體驗方向
根據(jù)公司策略、業(yè)務(wù)、人群的變化，我們進(jìn)行手淘的設(shè)計改版，希望以此進(jìn)一步提升用戶體驗。以設(shè)計部三大策略：認(rèn)知減負(fù)、內(nèi)容吸引、品牌滲透，作為高層次體驗的指引。針對這三大策略，在改版上我們對當(dāng)前版本的問題進(jìn)行分析，同時對這幾年的設(shè)計方向進(jìn)行總結(jié)。
1、認(rèn)知減負(fù)
從手淘整體設(shè)計上考慮，需要更加突出內(nèi)容的呈現(xiàn)，在內(nèi)容化設(shè)計上需要更明確的認(rèn)知，在同類型內(nèi)容模塊的設(shè)計表現(xiàn)也需一致，減少過多結(jié)構(gòu)樣式的表達(dá)，保持一定的韻律感和統(tǒng)一性，給用戶內(nèi)容豐富但結(jié)構(gòu)簡明的視覺認(rèn)知。
2、內(nèi)容吸引
從業(yè)務(wù)和用戶角度考慮，設(shè)計規(guī)劃業(yè)務(wù)內(nèi)容更立體的展示空間，主次分明，流暢的瀏覽體驗，以及內(nèi)容的氛圍營造、出其不意的驚喜。
3、品牌滲透
優(yōu)先考慮手淘大品牌，在視覺表達(dá)上不用太突出業(yè)務(wù)品牌特色，引導(dǎo)業(yè)務(wù)側(cè)重內(nèi)容特色。視覺品牌考慮是手淘大一統(tǒng)的品牌感與品質(zhì)，品牌基因可滲透各鏈路界面里。
三、設(shè)計概念 / 思路
1、思路
將手淘視覺體驗進(jìn)行整體走查，分成了框架結(jié)構(gòu)類型、全局通用元素、業(yè)務(wù)特殊類型進(jìn)行問題分析。發(fā)現(xiàn)整體結(jié)構(gòu)布局、 UI 元素、業(yè)務(wù)統(tǒng)一組件以及拓展的設(shè)計都有很多優(yōu)化空間，可塑造更立體完整的品牌形象，以及注入一些品牌性格。整體界面感覺需清晰、連續(xù)、舒適、愉悅、完整一氣呵成。就好比書法章法的講究，整體“以章法為先，運(yùn)實為虛，實處俱靈；以虛為實，斷處俱續(xù)。點畫與點畫之間的呼應(yīng)，字與字之間的顧盼，行與行之間的相映，整體上氣韻通達(dá)，虛實相生”。對內(nèi)容重新理解，定義場景，重整框架，新的設(shè)計方式將界面呈現(xiàn)全新面貌，給用戶整體的感知，達(dá)到想要的章法效果，有序可循，有理可依，有清晰的規(guī)劃迭代。
2、視覺打法
視覺體驗就是最重視人的情緒體驗，每一處的設(shè)計都能影響人的微妙情緒，點到整的總體感受，我稱之為視覺情緒管理。將發(fā)現(xiàn)的視覺問題色彩單一、不吸引、分割多、線條多、平靜、擁擠等感受歸列 3 個主要情緒--單調(diào)感、擠壓感、無聊感。一一對應(yīng)優(yōu)化為繽紛豐富、內(nèi)容透出、時尚感、簡潔緩和、動態(tài)情緒、視覺呼吸，引出 3 個新情緒——情緒愉悅、視覺呼吸、好奇驚喜。
3、六點設(shè)計理念：視覺吸引、瀏覽舒適、內(nèi)容立體、最優(yōu)平衡、框架統(tǒng)一、基因滲透
基于以上所述的前期探索引出六點設(shè)計理念，梳理清楚視覺的情緒方向，整體考慮表現(xiàn)的韻律美、結(jié)構(gòu)美、優(yōu)雅的細(xì)節(jié)等，還要更多思考的是以設(shè)計解決業(yè)務(wù)問題，因為是手淘基礎(chǔ)鏈路整體改版，個人不可能了解所有業(yè)務(wù)，所以看的更多是手淘整體共性的體驗問題，考慮的設(shè)計方向或規(guī)范須是普適于各基礎(chǔ)業(yè)務(wù)的，當(dāng)然個別業(yè)務(wù)特殊情況特殊處理，根據(jù)業(yè)務(wù)本身重要特性該突出的突出該收斂的收斂，每一點 UI 元素都是經(jīng)過全局考慮精心斟酌，對于如此龐大的產(chǎn)品包來說多一點元素都是負(fù)擔(dān)，視覺退一步服務(wù)于產(chǎn)品內(nèi)容，使內(nèi)容更加突出展示及清爽大方，當(dāng)然在需要視覺氛圍重渲染的情況還是該有它的出彩，每一點的斟酌都只為整體品質(zhì)，點線面的重新塑造手淘新品牌。
（1）視覺吸引：時尚而繽紛，充滿生機(jī)與活力
第一時間進(jìn)入視覺的往往是顏色，原來扁平單一的色彩需要更加時尚年輕化，色彩繽紛時尚、明亮親和、重點突出。顏色使用漸變?nèi)诤蠘邮?，我們一直不斷的調(diào)試最合適淘寶的漸變色度，要充滿生機(jī)活力及友好。在顏色變化時需每位設(shè)計師對色彩高度敏感與把握，調(diào)不好就回到十年前，調(diào)得好就現(xiàn)代化，調(diào)得淺亮易粉嫩刺眼，調(diào)得深暗易厚重不通透等，都很影響用戶的觀感，所以在用色方面需很細(xì)心講究。漸變色在一些操作功能上也起到引導(dǎo)作用，按鈕的漸變或加立體大投影，增強(qiáng)點擊引導(dǎo)，比如登錄、彈窗按鈕、加購、關(guān)注等業(yè)務(wù)需重點引導(dǎo)的操作。我們也設(shè)定了文本的功能性顏色使用，比如普通正文為黑，輔助為灰，連接色為藍(lán)，重提示為橙等用戶普遍認(rèn)知的功能色?；A(chǔ)鏈路界面定義使用淘寶橙主色樣式，不同場景如不適用可微調(diào)，行業(yè)可根據(jù)自身品牌色調(diào)整，飽和度明度相同、漸變角度統(tǒng)一即可。
① 繽紛豐富的調(diào)色板
② 使用色升級為漸變，根據(jù)不同語義、行業(yè)自有品牌色用色
③ 淘寶品牌色（基礎(chǔ)色）的漸變使用
④ 繽紛多彩的漸變使用
（2） 瀏覽舒適：視覺扁平、視覺呼吸、簡明統(tǒng)一、節(jié)奏韻律、高效瀏覽
① 視覺扁平
梳理手淘框架結(jié)構(gòu)及表現(xiàn)層，整體視覺框架盡可能扁平處理，減少多余元素，用顏色和模塊區(qū)分出不同層級的內(nèi)容，能用一層元素區(qū)隔就不用第二層。比如信息卡片去掉了陰影，分割線減少及統(tǒng)一淺色值，板塊分割統(tǒng)一參數(shù)這些細(xì)節(jié)，讓內(nèi)容更清爽的呈現(xiàn)，讓用戶清晰關(guān)注到不同即可。
② 視覺呼吸
圖文組合板塊適當(dāng)增加空間，調(diào)整到最舒適平衡的視覺結(jié)構(gòu)，有視覺呼吸感，讓用戶在購物瀏覽時處于高效及相對舒適狀態(tài)。比如像我的淘寶改版，設(shè)計師進(jìn)行的視覺呼吸的常態(tài)工具卡系列設(shè)計，就很符合設(shè)計理念。
我的淘寶內(nèi)容卡片
③ 簡明統(tǒng)一
不增加結(jié)構(gòu)的復(fù)雜性，不增加用戶的認(rèn)知成本，整體保持一致的韻律感。一個頁面 3 個以內(nèi)版式最為合宜。盡量將同類型場景、內(nèi)容模版統(tǒng)一，達(dá)到簡明統(tǒng)一的效果。比如行業(yè)模塊入口的統(tǒng)一方式，解決用戶對同類型內(nèi)容的認(rèn)知。比如微淘的內(nèi)容流卡片大結(jié)構(gòu)的統(tǒng)一富文本不同的變化。
首頁業(yè)務(wù)入口卡片（概念稿）
微淘內(nèi)容流卡片
④ 節(jié)奏韻律
個人經(jīng)驗判斷一般眼球同時獲取信息不超過 3 個，加上手機(jī)屏幕寬度有限，規(guī)劃模塊分割盡量是 1 至 3 列的空間展示，由主到次的業(yè)務(wù)級別往密排列，有規(guī)律可循。
視覺：弱化和減少視覺分割和格子，由大及小的 V 型業(yè)務(wù)模塊的視覺流。
業(yè)務(wù)：從疏到密的業(yè)務(wù)排序，有業(yè)務(wù)級別的規(guī)律展現(xiàn)模塊。
設(shè)計概念稿
⑤ 高效瀏覽
整體縱觀的視覺瀏覽體驗順暢，考慮整體性的韻律感及瀏覽商品的高效視覺流，減少用戶眼睛太多縱橫交錯及斷點的轉(zhuǎn)動。
設(shè)計概念稿
（3） 內(nèi)容立體：結(jié)構(gòu)立體、動態(tài)傳達(dá)
在縱向緯度上，增加信息展示空間、豐富業(yè)務(wù)展示形式，讓信息結(jié)構(gòu)更加多元立體化，比如主圖片更大、卡片異形效果等。通過入口自身形式和風(fēng)格動態(tài)傳達(dá)業(yè)務(wù)特色，比如視頻、電影、直播內(nèi)容，富媒體的本質(zhì)還原，動態(tài)引起用戶好奇心，展現(xiàn)形態(tài)豐富的內(nèi)容流。還有頁面動效邏輯的轉(zhuǎn)場、界面滾動的緩和動畫也需要一并升級，達(dá)到手淘整體立體生動的效果。
設(shè)計概念稿
商品詳情頁
（4）最優(yōu)平衡：不同系統(tǒng)/業(yè)務(wù)處理，最優(yōu)呈現(xiàn)決策
第一點根據(jù)不同系統(tǒng)能提供的效果特性做各最優(yōu)的設(shè)計處理，進(jìn)行最優(yōu)的平衡決策，比如 iOS 系統(tǒng)可以做毛玻璃效果，可應(yīng)用在界面里做最好的視覺呈現(xiàn)。而 Android 系統(tǒng)不能做毛玻璃效果則變通設(shè)計手段，平衡各種細(xì)節(jié)，盡量達(dá)到同樣期望通透柔和的效果。
iOS:
① 底部導(dǎo)航欄升級，圖標(biāo)統(tǒng)一細(xì)線條，增加淘字新功能認(rèn)知，以及社區(qū)的發(fā)布加號也統(tǒng)一圓形。
② 底部背景樣式在 iOS 系統(tǒng)下根據(jù)毛玻璃效果展示，滾動透背效果更加。因為毛玻璃效果自帶灰色樣式，已經(jīng)有了上下模塊之間的區(qū)隔效果，所以去掉了背景的頂部分割線。
Android:
底部背景樣式因系統(tǒng)無毛玻璃效果，設(shè)計上則做白色微透明度效果，頂部加半透明灰色的分割線，整體會稍微通透柔和。
第二點根據(jù)業(yè)務(wù)不同特性以及強(qiáng)調(diào)的功能特點而殊加處理，比如搜索業(yè)務(wù)強(qiáng)調(diào)的是搜索，那么就要突出搜索的樣式，我們這次改版搜索背景色調(diào)為透明透底色，融合美觀，也不會過于突出（見首頁效果），但是在進(jìn)入搜索場景下這個核心功能的搜索框背景就不能那么透明了，而是要清晰突出。還有店鋪頁面的搜索亦如是，因為店鋪可以定制背景圖，考慮圖片比較花哨不可控的情況，搜索框背景色透明值要低。
（5） 框架統(tǒng)一： 整體框架，統(tǒng)一認(rèn)知
梳理框架統(tǒng)一了三個層次的邏輯，首頁 5 個一級導(dǎo)航的統(tǒng)一框架，二級頁面的普通導(dǎo)航統(tǒng)一框架，以及特殊行業(yè)的導(dǎo)航統(tǒng)一框架。也為下次更進(jìn)一步的升級做好鋪墊。
（6）基因滲透：設(shè)計語言滲透各鏈路
根據(jù)單點設(shè)計元素組成系列形成一套設(shè)計語言，全面鏈路的應(yīng)用設(shè)計樣式/組件 DNA ，形成手淘產(chǎn)品自身設(shè)計語言風(fēng)格，每個業(yè)務(wù)根據(jù)規(guī)范應(yīng)用及靈活變化，掌握及提取風(fēng)格基因去滲透在各自設(shè)計中，形成完整的新淘系面貌，共建完成統(tǒng)一的視覺體驗，給用戶統(tǒng)一的品牌認(rèn)知。每個設(shè)計師的做法都有出入，所以必須反復(fù)溝通設(shè)計理念及規(guī)范的一致理解，反復(fù)走查優(yōu)化來達(dá)到產(chǎn)品 UI 大統(tǒng)一的形象。
比如全局填充元素一統(tǒng)漸變色：
全局按鈕控件一統(tǒng)全圓角風(fēng)格：
四、設(shè)計推動落地
1、設(shè)計師的共建
我這里定義好淘寶產(chǎn)品新風(fēng)格基調(diào)，以及設(shè)計理念方向，未來很長段時間大家都遵循六個理念進(jìn)行。在升級過程中一直積極聽取各位設(shè)計師遇到的問題情況而做微調(diào)整，各業(yè)務(wù)整體的設(shè)計除了符合基礎(chǔ)規(guī)范更多是圍繞設(shè)計理念去設(shè)計共建，完成自己負(fù)責(zé)的業(yè)務(wù)設(shè)計升級。一些手淘組件也是需要大家一起共建，我和核心成員收集各業(yè)務(wù)使用到的組件場景有什么需求，考慮各種情況去統(tǒng)一以及拓展使用，滿足各類業(yè)務(wù)需求下統(tǒng)一體驗，比如底部導(dǎo)航組件、彈窗、評論組件等。我也會推動設(shè)計師負(fù)責(zé)某塊組件的升級，在一起進(jìn)行更深的討論，有助于更多設(shè)計師的全局考慮，以及更深一步參與到升級項目中來，更深的理解設(shè)計理念去執(zhí)行，達(dá)到設(shè)計師們一起共建的結(jié)果。比如全局標(biāo)題導(dǎo)航欄的 4 位設(shè)計師共建、卡券包、圖片切換的更多樣式、為空情感化組件等。
2、開發(fā)的協(xié)作
設(shè)計全面改造完，最困難的部分就是推動起來還原完美落地，因為這是第一次設(shè)計主導(dǎo)升級的大版本，投入了很多開發(fā)資源支持，工作量非常龐大，每個頁面每一個設(shè)計元素都要升級，非常細(xì)碎繁雜。除了基本的日常升級我會評估重復(fù)性高的設(shè)計做成開發(fā)組件，跨業(yè)務(wù)推動架構(gòu)組開發(fā)以及業(yè)務(wù)開發(fā)技術(shù)配合優(yōu)化與統(tǒng)一，并推動一些技術(shù)的調(diào)整，也理出了很多隱性問題便于迭代。比如標(biāo)題導(dǎo)航欄就涉及 Native、Weex、H5 等技術(shù)，都要不同程度的去推進(jìn)達(dá)到統(tǒng)一的視覺效果。我在自身負(fù)責(zé)的業(yè)務(wù)還使用了正在研發(fā)的智能還原技術(shù)來提高升級效率，解決業(yè)務(wù)的工作量和設(shè)計的溝通成本，設(shè)計師應(yīng)該考慮開發(fā)還原度成本及效率的問題，其中很多技術(shù)也值得設(shè)計師參與學(xué)習(xí)研究。
五、結(jié)語
這次設(shè)計升級，最大的收獲是可以從很多角度看待和思考，以淘寶大容器的設(shè)計出發(fā)，設(shè)計與執(zhí)行復(fù)雜的平衡，一切的細(xì)節(jié)品質(zhì)都因一些信念去推動，不斷的精雕細(xì)琢，不斷的推進(jìn)開發(fā)解決問題落地，主動求變，積極推進(jìn)。跨團(tuán)隊設(shè)計共建，開發(fā)測試協(xié)作，產(chǎn)品的支持，市場助力品牌發(fā)聲，產(chǎn)生了很多共建的機(jī)會，大家為此版本努力一心，日夜奮斗，增強(qiáng)了大團(tuán)隊的凝聚力，以后一定會有更進(jìn)一步的合作。此次升級的點其實很多，這里無法一一道來，此篇之后會陸續(xù)有針對性更為詳細(xì)的設(shè)計分享。我們并不是到此為止，而是啟航了新的方向，未來的路還很長。變，是我們愿意一直深耕下去；不變，是為用戶更好的體驗而努力。
