2017版“我的淘寶”設計，可能是迄今為止最懂你的
“我的淘寶”2017版歷時半年對“工具與用戶”的思考、梳理和設計終於上線落地。究竟是怎樣的？一起來看看~
回顧2014~2016，我的淘寶一直是工具、工具、工具的產品定位。2017年，會不會有什麼改變呢？我們雖然還是會堅守淘寶使用者相關工具服務的產品角色，只不過，2017版我的淘寶設計，可能是迄今為止最懂淘寶用戶，且與每一個用戶的聯繫都最為直接密切的淘寶生活相關工具的設計了。
設計背景與思路
以前我的淘寶的個人工具場景的設計，乃至大部分應用的“我的”管理場景的設計，給用戶提供的都是一種縱深訪問路徑的工具分發使用場景。設計形式大多採用圖示加文字的清單或者宮格。使用者來到“我的”頁面，整體路徑從外至內呈樹狀分佈、整體流量從上至下呈急劇衰減。工具服務在“我的”場景下，
這次改版我的淘寶，希望能從單純的所有工具入口集合向更懂使用者的使用場景的個人管理空間轉型，希望我的淘寶能從更個性和智慧的場景上連接用戶和淘寶。
設計理念：去中心化的工具內容化設計
工具服務的內容化設計是一種顯性化設計，能讓用戶所見即所得，快速明確的理解到工具所提供的核心功能和服務；也能有效地減少用戶與工具所提供的核心服務之間的交互步驟和流程，讓使用者在當前工具的內容區完成與工具的核心交互，是一種去中心化的服務設計形式。
工具內容化設計交互結構
基於工具內容化設計的設計理念，我們需要設計一個合適的交互設計框架結構來承載我的淘寶多樣化的工具業務。因此，我們在我的淘寶的產品結構的Z軸和Y軸上進行了工具內容化設計的交互結構的定義。
在Z軸上，我們主要思考的是用戶使用工具卡如何快速的進行資訊獲取和交互。如下圖提供給查詢訂單物流使用者的工具服務：點擊物流資訊條，使用者能快速獲取詳細物流資訊動態以及獲取自提櫃碼等操作（比原本的通過多步驟進入物流詳情頁面查看要便捷)。
而Y軸設計，則是工具業務卡落地形式的歸納和總結。我的淘寶是使用者的淘寶相關服務工具的集中地，對不同的工具用戶具有不同的使用心智，我們將所有工具歸納為三種設計類型，既滿足不同用戶在不同使用場景中的需求和心智，又不至於讓整體介面功能過於複雜。
以上，我們通過定義去中心化的設計理念和我的淘寶Z軸和Y軸的交互結構，確定了整個工具內容化設計的框架。同時，我們也提煉出了我的淘寶工具內容化設計的三個核心關鍵字：“卡片化”、“顯性化”和“個性化”，並將之作為這次設計改版的核心思想時刻檢視之後的工具服務接入設計。
工具的內容化設計理念的核心就是讓用戶能快速明確的瞭解工具的核心功能和服務。所以我們採用了能承載豐富多樣的內容的大容器設計，將單個工具從入口形式交互修改成可以承載核心功能和服務的“卡片化”交互；將工具服務的核心功能、行動和價值“顯性化”（用戶對工具業務的感知和理解）；將工具的需求場景“個性化”，使用者可以根據所需的服務場景來定制自己的個性化工具。
工具內容化卡片類型
我的淘寶三種工具內容化設計類型分別是：固定工具卡、提醒工具卡和常態工具卡。
類型一：固定工具卡
類型二：提醒工具卡
類型三：常態工具卡
三種工具內容化設計類型的定義，使我的淘寶這塊工具大陣地按照使用者的人群屬性和使用場景進行了個性化劃分，每個使用者都能通過管理頁面定義自己需要的工具和使用順序。
工具內容化卡片設計的統一
在工具的內容化的具體細節設計上，我們通過定義清晰的通用設計佈局形式來統一用戶的認知和使用心智，以及統一工具服務的接入設計。
基礎佈局由工具標題列、內容區、核心行動點3部分組合而成。其中，標題列和核心行動點樣式保持嚴格一致，內容區則提供佈局模版滿足業務個性化的業務訴求。基礎佈局整體遵循中心線對齊規則，保證使用者從上至下流覽頁面時視覺線不分散。
順勢而為的視覺互動
我們在內容顯性化表達的訴求基礎上，嘗試了進一步的視覺互動設計。動效在介面展示中起著強視覺吸引的作用，但過多以及不恰當的運動方式會使使用者流覽頁面時視線混亂。如果順著用戶操作手勢進行動效設計，也就是“順勢而為”，則讓過程更為自然與恰當，也符合操作預期。
我的淘寶頭部採用了多層級視覺差效果，使用者在手指滑動頁面時，不同元素根據移動距離進行不同的動效過程，用戶名與標題自然轉換。整個動效過程用戶自主操控，同時也增加了介面的使用趣味。
另一個“順勢”是時間上的順勢，適時告訴用戶關注什麼。業務卡片的內容會跟隨時間不斷更新，比如淘氣值卡片，在每月8號左右會進行數值更新。為了“順勢”告知到用戶，當使用者向下滑動頁面查看業務卡片內容時，對應的淘氣值會進行數字翻動與箭頭變化的微動效，適時吸引到用戶告知淘氣值的數值變化。
寫在最後
我的淘寶2017版歷時半年對“工具與用戶”的思考、梳理和設計終於上線落地。通過“去中心化的工具內容化設計”的設計理念讓“正確的用戶”在“恰當的場景”輕易的發現“適合的服務”。一切都是為了更懂用戶。從目前資料來看，使用者使用內容化工具相較純工具入口形式，DAU提升1~5倍不等。結合輿情回饋，去中心化的工具內容化設計方向理念是一個不錯的嘗試。
整個落地過程雖然繁瑣無比（因為我的淘寶是一個工具陣地，任何一個工具的業務方都不是我們自己），我們需要和每一個接入的工具業務方商討後訂立落地類型、跟進設計規範的執行、審核最後的工具內容化設計後的產出效果。但是，我們一點一點定義好了清晰的設計規範和流程以便後續工具場景的順利接入。
後續，我們也有許多需要繼續完善的地方。如何讓正確的用戶在準確的場景輕易的發現適合的服務工具，這需要我們演算法的不斷完善，也需要我們不斷從人群場景、發現場景、個性化場景反思產品的後續。
相關文章
作者： 要白、明颯
如下圖提供給查詢訂單物流使用者的工具服務：點擊物流資訊條，使用者能快速獲取詳細物流資訊動態以及獲取自提櫃碼等操作（比原本的通過多步驟進入物流詳情頁面查看要便捷)。而Y軸設計，則是工具業務卡落地形式的歸納和總結。我的淘寶是使用者的淘寶相關服務工具的集中地，對不同的工具用戶具有不同的使用心智，我們將所有工具歸納為三種設計類型，既滿足不同用戶在不同使用場景中的需求和心智，又不至於讓整體介面功能過於複雜。
以上，我們通過定義去中心化的設計理念和我的淘寶Z軸和Y軸的交互結構，確定了整個工具內容化設計的框架。同時，我們也提煉出了我的淘寶工具內容化設計的三個核心關鍵字：“卡片化”、“顯性化”和“個性化”，並將之作為這次設計改版的核心思想時刻檢視之後的工具服務接入設計。
工具的內容化設計理念的核心就是讓用戶能快速明確的瞭解工具的核心功能和服務。所以我們採用了能承載豐富多樣的內容的大容器設計，將單個工具從入口形式交互修改成可以承載核心功能和服務的“卡片化”交互；將工具服務的核心功能、行動和價值“顯性化”（用戶對工具業務的感知和理解）；將工具的需求場景“個性化”，使用者可以根據所需的服務場景來定制自己的個性化工具。
工具內容化卡片類型
我的淘寶三種工具內容化設計類型分別是：固定工具卡、提醒工具卡和常態工具卡。
類型一：固定工具卡
類型二：提醒工具卡
類型三：常態工具卡
三種工具內容化設計類型的定義，使我的淘寶這塊工具大陣地按照使用者的人群屬性和使用場景進行了個性化劃分，每個使用者都能通過管理頁面定義自己需要的工具和使用順序。
工具內容化卡片設計的統一
在工具的內容化的具體細節設計上，我們通過定義清晰的通用設計佈局形式來統一用戶的認知和使用心智，以及統一工具服務的接入設計。
基礎佈局由工具標題列、內容區、核心行動點3部分組合而成。其中，標題列和核心行動點樣式保持嚴格一致，內容區則提供佈局模版滿足業務個性化的業務訴求。基礎佈局整體遵循中心線對齊規則，保證使用者從上至下流覽頁面時視覺線不分散。
順勢而為的視覺互動
我們在內容顯性化表達的訴求基礎上，嘗試了進一步的視覺互動設計。動效在介面展示中起著強視覺吸引的作用，但過多以及不恰當的運動方式會使使用者流覽頁面時視線混亂。如果順著用戶操作手勢進行動效設計，也就是“順勢而為”，則讓過程更為自然與恰當，也符合操作預期。
我的淘寶頭部採用了多層級視覺差效果，使用者在手指滑動頁面時，不同元素根據移動距離進行不同的動效過程，用戶名與標題自然轉換。整個動效過程用戶自主操控，同時也增加了介面的使用趣味。
另一個“順勢”是時間上的順勢，適時告訴用戶關注什麼。業務卡片的內容會跟隨時間不斷更新，比如淘氣值卡片，在每月8號左右會進行數值更新。為了“順勢”告知到用戶，當使用者向下滑動頁面查看業務卡片內容時，對應的淘氣值會進行數字翻動與箭頭變化的微動效，適時吸引到用戶告知淘氣值的數值變化。
寫在最後
我的淘寶2017版歷時半年對“工具與用戶”的思考、梳理和設計終於上線落地。通過“去中心化的工具內容化設計”的設計理念讓“正確的用戶”在“恰當的場景”輕易的發現“適合的服務”。一切都是為了更懂用戶。從目前資料來看，使用者使用內容化工具相較純工具入口形式，DAU提升1~5倍不等。結合輿情回饋，去中心化的工具內容化設計方向理念是一個不錯的嘗試。
整個落地過程雖然繁瑣無比（因為我的淘寶是一個工具陣地，任何一個工具的業務方都不是我們自己），我們需要和每一個接入的工具業務方商討後訂立落地類型、跟進設計規範的執行、審核最後的工具內容化設計後的產出效果。但是，我們一點一點定義好了清晰的設計規範和流程以便後續工具場景的順利接入。
後續，我們也有許多需要繼續完善的地方。如何讓正確的用戶在準確的場景輕易的發現適合的服務工具，這需要我們演算法的不斷完善，也需要我們不斷從人群場景、發現場景、個性化場景反思產品的後續。
相關文章
作者： 要白、明颯