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