來源：淘寶用戶體驗設(shè)計（ID:ali-taobaoued）
作者：子鹿
原標(biāo)題：淘寶2017設(shè)計升級

面對互聯(lián)網(wǎng)產(chǎn)品的日益變化和用戶的不斷成長，淘寶在經(jīng)歷了移動互聯(lián)網(wǎng)爆炸式的發(fā)展后，是時候全面升級了。

寒冬已過，楊柳夾岸，艷桃灼灼，迎著春天的氣息我們向用戶呈現(xiàn)出一個全新的手淘客戶端，期望向他們傳達新的品牌理念，配合更流行的觀感和更友好的體驗賦予淘寶更年輕的品牌精神。這是手淘首次以設(shè)計為主導(dǎo)的版本升級。面對復(fù)雜的產(chǎn)品改版，設(shè)計師猶如妙手回春的醫(yī)生，需要用專業(yè)的手段治理產(chǎn)品里的各種疑難雜癥，從內(nèi)至外顧及各種牽連的細節(jié)進行整體治療，從而讓產(chǎn)品更加美觀、健康、舒服。在歷時很長的項目過程中，我們一步步地將公司的設(shè)計戰(zhàn)略分解成產(chǎn)品體驗方向，從設(shè)計概念落地到界面設(shè)計語言，在執(zhí)行過程中又不斷地平衡各種設(shè)計細節(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ù)、人群的變化，我們進行手淘的設(shè)計改版，希望以此進一步提升用戶體驗。以設(shè)計部三大策略：認知減負、內(nèi)容吸引、品牌滲透，作為高層次體驗的指引。針對這三大策略，在改版上我們對當(dāng)前版本的問題進行分析，同時對這幾年的設(shè)計方向進行總結(jié)。

1、認知減負

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

2、內(nèi)容吸引

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

3、品牌滲透

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

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

1、思路

將手淘視覺體驗進行整體走查，分成了框架結(jié)構(gòu)類型、全局通用元素、業(yè)務(wù)特殊類型進行問題分析。發(fā)現(xiàn)整體結(jié)構(gòu)布局、 UI 元素、業(yè)務(wù)統(tǒng)一組件以及拓展的設(shè)計都有很多優(yōu)化空間，可塑造更立體完整的品牌形象，以及注入一些品牌性格。整體界面感覺需清晰、連續(xù)、舒適、愉悅、完整一氣呵成。就好比書法章法的講究，整體“以章法為先，運實為虛，實處俱靈；以虛為實，斷處俱續(xù)。點畫與點畫之間的呼應(yīng)，字與字之間的顧盼，行與行之間的相映，整體上氣韻通達，虛實相生”。對內(nèi)容重新理解，定義場景，重整框架，新的設(shè)計方式將界面呈現(xiàn)全新面貌，給用戶整體的感知，達到想要的章法效果，有序可循，有理可依，有清晰的規(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)雅的細節(jié)等，還要更多思考的是以設(shè)計解決業(yè)務(wù)問題，因為是手淘基礎(chǔ)鏈路整體改版，個人不可能了解所有業(yè)務(wù)，所以看的更多是手淘整體共性的體驗問題，考慮的設(shè)計方向或規(guī)范須是普適于各基礎(chǔ)業(yè)務(wù)的，當(dāng)然個別業(yè)務(wù)特殊情況特殊處理，根據(jù)業(yè)務(wù)本身重要特性該突出的突出該收斂的收斂，每一點 UI 元素都是經(jīng)過全局考慮精心斟酌，對于如此龐大的產(chǎn)品包來說多一點元素都是負擔(dān)，視覺退一步服務(wù)于產(chǎn)品內(nèi)容，使內(nèi)容更加突出展示及清爽大方，當(dāng)然在需要視覺氛圍重渲染的情況還是該有它的出彩，每一點的斟酌都只為整體品質(zhì)，點線面的重新塑造手淘新品牌。

（1）視覺吸引：時尚而繽紛，充滿生機與活力

第一時間進入視覺的往往是顏色，原來扁平單一的色彩需要更加時尚年輕化，色彩繽紛時尚、明亮親和、重點突出。顏色使用漸變?nèi)诤蠘邮?，我們一直不斷的調(diào)試最合適淘寶的漸變色度，要充滿生機活力及友好。在顏色變化時需每位設(shè)計師對色彩高度敏感與把握，調(diào)不好就回到十年前，調(diào)得好就現(xiàn)代化，調(diào)得淺亮易粉嫩刺眼，調(diào)得深暗易厚重不通透等，都很影響用戶的觀感，所以在用色方面需很細心講究。漸變色在一些操作功能上也起到引導(dǎo)作用，按鈕的漸變或加立體大投影，增強點擊引導(dǎo)，比如登錄、彈窗按鈕、加購、關(guān)注等業(yè)務(wù)需重點引導(dǎo)的操作。我們也設(shè)定了文本的功能性顏色使用，比如普通正文為黑，輔助為灰，連接色為藍，重提示為橙等用戶普遍認知的功能色?；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ù)這些細節(jié)，讓內(nèi)容更清爽的呈現(xiàn)，讓用戶清晰關(guān)注到不同即可。

② 視覺呼吸

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

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

③ 簡明統(tǒng)一

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

首頁業(yè)務(wù)入口卡片（概念稿）

微淘內(nèi)容流卡片

④ 節(jié)奏韻律

個人經(jīng)驗判斷一般眼球同時獲取信息不超過 3 個，加上手機屏幕寬度有限，規(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)傳達

在縱向緯度上，增加信息展示空間、豐富業(yè)務(wù)展示形式，讓信息結(jié)構(gòu)更加多元立體化，比如主圖片更大、卡片異形效果等。通過入口自身形式和風(fēng)格動態(tài)傳達業(yè)務(wù)特色，比如視頻、電影、直播內(nèi)容，富媒體的本質(zhì)還原，動態(tài)引起用戶好奇心，展現(xiàn)形態(tài)豐富的內(nèi)容流。還有頁面動效邏輯的轉(zhuǎn)場、界面滾動的緩和動畫也需要一并升級，達到手淘整體立體生動的效果。

設(shè)計概念稿

商品詳情頁

（4）最優(yōu)平衡：不同系統(tǒng)/業(yè)務(wù)處理，最優(yōu)呈現(xiàn)決策

第一點根據(jù)不同系統(tǒng)能提供的效果特性做各最優(yōu)的設(shè)計處理，進行最優(yōu)的平衡決策，比如 iOS 系統(tǒng)可以做毛玻璃效果，可應(yīng)用在界面里做最好的視覺呈現(xiàn)。而 Android 系統(tǒng)不能做毛玻璃效果則變通設(shè)計手段，平衡各種細節(jié)，盡量達到同樣期望通透柔和的效果。

iOS:

① 底部導(dǎo)航欄升級，圖標(biāo)統(tǒng)一細線條，增加淘字新功能認知，以及社區(qū)的發(fā)布加號也統(tǒng)一圓形。

② 底部背景樣式在 iOS 系統(tǒng)下根據(jù)毛玻璃效果展示，滾動透背效果更加。因為毛玻璃效果自帶灰色樣式，已經(jīng)有了上下模塊之間的區(qū)隔效果，所以去掉了背景的頂部分割線。

Android:

底部背景樣式因系統(tǒng)無毛玻璃效果，設(shè)計上則做白色微透明度效果，頂部加半透明灰色的分割線，整體會稍微通透柔和。

第二點根據(jù)業(yè)務(wù)不同特性以及強調(diào)的功能特點而殊加處理，比如搜索業(yè)務(wù)強調(diào)的是搜索，那么就要突出搜索的樣式，我們這次改版搜索背景色調(diào)為透明透底色，融合美觀，也不會過于突出（見首頁效果），但是在進入搜索場景下這個核心功能的搜索框背景就不能那么透明了，而是要清晰突出。還有店鋪頁面的搜索亦如是，因為店鋪可以定制背景圖，考慮圖片比較花哨不可控的情況，搜索框背景色透明值要低。

（5） 框架統(tǒng)一： 整體框架，統(tǒng)一認知

梳理框架統(tǒng)一了三個層次的邏輯，首頁 5 個一級導(dǎo)航的統(tǒng)一框架，二級頁面的普通導(dǎo)航統(tǒng)一框架，以及特殊行業(yè)的導(dǎo)航統(tǒng)一框架。也為下次更進一步的升級做好鋪墊。

（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)一的品牌認知。每個設(shè)計師的做法都有出入，所以必須反復(fù)溝通設(shè)計理念及規(guī)范的一致理解，反復(fù)走查優(yōu)化來達到產(chǎn)品 UI 大統(tǒng)一的形象。

比如全局填充元素一統(tǒng)漸變色：

全局按鈕控件一統(tǒng)全圓角風(fēng)格：

四、設(shè)計推動落地

1、設(shè)計師的共建

我這里定義好淘寶產(chǎn)品新風(fēng)格基調(diào)，以及設(shè)計理念方向，未來很長段時間大家都遵循六個理念進行。在升級過程中一直積極聽取各位設(shè)計師遇到的問題情況而做微調(diào)整，各業(yè)務(wù)整體的設(shè)計除了符合基礎(chǔ)規(guī)范更多是圍繞設(shè)計理念去設(shè)計共建，完成自己負責(zé)的業(yè)務(wù)設(shè)計升級。一些手淘組件也是需要大家一起共建，我和核心成員收集各業(yè)務(wù)使用到的組件場景有什么需求，考慮各種情況去統(tǒng)一以及拓展使用，滿足各類業(yè)務(wù)需求下統(tǒng)一體驗，比如底部導(dǎo)航組件、彈窗、評論組件等。我也會推動設(shè)計師負責(zé)某塊組件的升級，在一起進行更深的討論，有助于更多設(shè)計師的全局考慮，以及更深一步參與到升級項目中來，更深的理解設(shè)計理念去執(zhí)行，達到設(shè)計師們一起共建的結(jié)果。比如全局標(biāo)題導(dǎo)航欄的 4 位設(shè)計師共建、卡券包、圖片切換的更多樣式、為空情感化組件等。 

2、開發(fā)的協(xié)作

設(shè)計全面改造完，最困難的部分就是推動起來還原完美落地，因為這是第一次設(shè)計主導(dǎo)升級的大版本，投入了很多開發(fā)資源支持，工作量非常龐大，每個頁面每一個設(shè)計元素都要升級，非常細碎繁雜。除了基本的日常升級我會評估重復(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ù)，都要不同程度的去推進達到統(tǒng)一的視覺效果。我在自身負責(zé)的業(yè)務(wù)還使用了正在研發(fā)的智能還原技術(shù)來提高升級效率，解決業(yè)務(wù)的工作量和設(shè)計的溝通成本，設(shè)計師應(yīng)該考慮開發(fā)還原度成本及效率的問題，其中很多技術(shù)也值得設(shè)計師參與學(xué)習(xí)研究。

五、結(jié)語

這次設(shè)計升級，最大的收獲是可以從很多角度看待和思考，以淘寶大容器的設(shè)計出發(fā)，設(shè)計與執(zhí)行復(fù)雜的平衡，一切的細節(jié)品質(zhì)都因一些信念去推動，不斷的精雕細琢，不斷的推進開發(fā)解決問題落地，主動求變，積極推進。跨團隊設(shè)計共建，開發(fā)測試協(xié)作，產(chǎn)品的支持，市場助力品牌發(fā)聲，產(chǎn)生了很多共建的機會，大家為此版本努力一心，日夜奮斗，增強了大團隊的凝聚力，以后一定會有更進一步的合作。此次升級的點其實很多，這里無法一一道來，此篇之后會陸續(xù)有針對性更為詳細的設(shè)計分享。我們并不是到此為止，而是啟航了新的方向，未來的路還很長。變，是我們愿意一直深耕下去；不變，是為用戶更好的體驗而努力。

感謝閱讀！