“我的淘寶”2017版歷時半年對“工具與用戶”的思考、梳理和設(shè)計終于上線落地。究竟是怎樣的？一起來看看~

回顧2014~2016，我的淘寶一直是工具、工具、工具的產(chǎn)品定位。2017年，會不會有什么改變呢？我們雖然還是會堅守淘寶用戶相關(guān)工具服務(wù)的產(chǎn)品角色，只不過，2017版我的淘寶設(shè)計，可能是迄今為止最懂淘寶用戶，且與每一個用戶的聯(lián)系都最為直接密切的淘寶生活相關(guān)工具的設(shè)計了。

設(shè)計背景與思路

以前我的淘寶的個人工具場景的設(shè)計，乃至大部分應(yīng)用的“我的”管理場景的設(shè)計，給用戶提供的都是一種縱深訪問路徑的工具分發(fā)使用場景。設(shè)計形式大多采用圖標(biāo)加文字的列表或者宮格。用戶來到“我的”頁面，整體路徑從外至內(nèi)呈樹狀分布、整體流量從上至下呈急劇衰減。工具服務(wù)在“我的”場景下，需要目標(biāo)用戶主動去挖掘發(fā)現(xiàn)，不直接不顯性，十分被動。用戶往往只對核心的幾個工具留有印象。

這次改版我的淘寶，希望能從單純的所有工具入口集合向更懂用戶的使用場景的個人管理空間轉(zhuǎn)型，希望我的淘寶能從更個性和智能的場景上連接用戶和淘寶。讓用戶在“恰當(dāng)?shù)膱鼍啊陛p易地發(fā)現(xiàn)“適合的服務(wù)”。因此，我們?yōu)槲业奶詫氈贫恕?strong>去中心化的工具內(nèi)容化設(shè)計”的設(shè)計理念。

設(shè)計理念：去中心化的工具內(nèi)容化設(shè)計

工具服務(wù)的內(nèi)容化設(shè)計是一種顯性化設(shè)計，能讓用戶所見即所得，快速明確的理解到工具所提供的核心功能和服務(wù)；也能有效地減少用戶與工具所提供的核心服務(wù)之間的交互步驟和流程，讓用戶在當(dāng)前工具的內(nèi)容區(qū)完成與工具的核心交互，是一種去中心化的服務(wù)設(shè)計形式。

工具內(nèi)容化設(shè)計交互結(jié)構(gòu)

基于工具內(nèi)容化設(shè)計的設(shè)計理念，我們需要設(shè)計一個合適的交互設(shè)計框架結(jié)構(gòu)來承載我的淘寶多樣化的工具業(yè)務(wù)。因此，我們在我的淘寶的產(chǎn)品結(jié)構(gòu)的Z軸和Y軸上進行了工具內(nèi)容化設(shè)計的交互結(jié)構(gòu)的定義。

在Z軸上，我們主要思考的是用戶使用工具卡如何快速的進行信息獲取和交互。如下圖提供給查詢訂單物流用戶的工具服務(wù)：點擊物流信息條，用戶能快速獲取詳細(xì)物流信息動態(tài)以及獲取自提柜碼等操作（比原本的通過多步驟進入物流詳情頁面查看要便捷)。

而Y軸設(shè)計，則是工具業(yè)務(wù)卡落地形式的歸納和總結(jié)。我的淘寶是用戶的淘寶相關(guān)服務(wù)工具的集中地，對不同的工具用戶具有不同的使用心智，我們將所有工具歸納為三種設(shè)計類型，既滿足不同用戶在不同使用場景中的需求和心智，又不至于讓整體界面功能過于復(fù)雜。

以上，我們通過定義去中心化的設(shè)計理念和我的淘寶Z軸和Y軸的交互結(jié)構(gòu)，確定了整個工具內(nèi)容化設(shè)計的框架。同時，我們也提煉出了我的淘寶工具內(nèi)容化設(shè)計的三個核心關(guān)鍵詞：“卡片化”、“顯性化”和“個性化”，并將之作為這次設(shè)計改版的核心思想時刻檢視之后的工具服務(wù)接入設(shè)計。

工具的內(nèi)容化設(shè)計理念的核心就是讓用戶能快速明確的了解工具的核心功能和服務(wù)。所以我們采用了能承載豐富多樣的內(nèi)容的大容器設(shè)計，將單個工具從入口形式交互修改成可以承載核心功能和服務(wù)的“卡片化”交互；將工具服務(wù)的核心功能、行動和價值“顯性化”（用戶對工具業(yè)務(wù)的感知和理解）；將工具的需求場景“個性化”，用戶可以根據(jù)所需的服務(wù)場景來定制自己的個性化工具。

工具內(nèi)容化卡片類型

我的淘寶三種工具內(nèi)容化設(shè)計類型分別是：固定工具卡、提醒工具卡和常態(tài)工具卡。

類型一：固定工具卡

• 定義：我的淘寶固有核心心智工具內(nèi)容設(shè)計。如收藏工具、訂單工具、必備工具。
• 特征：在我的淘寶工具內(nèi)容層頁面位置固定；在核心內(nèi)容透出設(shè)計的同時，保持原工具入口用戶習(xí)慣。

類型二：提醒工具卡

• 定義：可以提醒用戶完成限時性的淘寶相關(guān)待辦事項的工具內(nèi)容設(shè)計，如快速查詢和核銷電影票、行程提醒等。
• 特征：具有明確的出現(xiàn)和隱藏時間點，當(dāng)有與用戶相關(guān)的待辦事項信息時自動出現(xiàn)于“固定工具卡”模塊之下;多個提醒工具卡同時出現(xiàn)時按工具核心操作的失效時間點按從近至遠(yuǎn)順序排列。

類型三：常態(tài)工具卡

• 定義：面向常態(tài)服務(wù)型工具業(yè)務(wù)的內(nèi)容化設(shè)計，如我的淘氣值、閑置、花唄、寶寶、愛車、通信等業(yè)務(wù)的與“我”相關(guān)的管理服務(wù)。
• 特征：用戶在管理頁面添加后出現(xiàn)在我的淘寶；按用戶的添加順序排列，用戶可根據(jù)自己的使用頻率調(diào)整卡片在我的淘寶的位置順序。

三種工具內(nèi)容化設(shè)計類型的定義，使我的淘寶這塊工具大陣地按照用戶的人群屬性和使用場景進行了個性化劃分，每個用戶都能通過管理頁面定義自己需要的工具和使用順序。

工具內(nèi)容化卡片設(shè)計的統(tǒng)一

在工具的內(nèi)容化的具體細(xì)節(jié)設(shè)計上，我們通過定義清晰的通用設(shè)計布局形式來統(tǒng)一用戶的認(rèn)知和使用心智，以及統(tǒng)一工具服務(wù)的接入設(shè)計。

基礎(chǔ)布局由工具標(biāo)題欄、內(nèi)容區(qū)、核心行動點3部分組合而成。其中，標(biāo)題欄和核心行動點樣式保持嚴(yán)格一致，內(nèi)容區(qū)則提供布局模版滿足業(yè)務(wù)個性化的業(yè)務(wù)訴求?；A(chǔ)布局整體遵循中心線對齊規(guī)則，保證用戶從上至下瀏覽頁面時視覺線不分散。

順勢而為的視覺互動

我們在內(nèi)容顯性化表達(dá)的訴求基礎(chǔ)上，嘗試了進一步的視覺互動設(shè)計。動效在界面展示中起著強視覺吸引的作用，但過多以及不恰當(dāng)?shù)倪\動方式會使用戶瀏覽頁面時視線混亂。如果順著用戶操作手勢進行動效設(shè)計，也就是“順勢而為”，則讓過程更為自然與恰當(dāng)，也符合操作預(yù)期。

我的淘寶頭部采用了多層級視覺差效果，用戶在手指滑動頁面時，不同元素根據(jù)移動距離進行不同的動效過程，用戶名與標(biāo)題自然轉(zhuǎn)換。整個動效過程用戶自主操控，同時也增加了界面的使用趣味。

另一個“順勢”是時間上的順勢，適時告訴用戶關(guān)注什么。業(yè)務(wù)卡片的內(nèi)容會跟隨時間不斷更新，比如淘氣值卡片，在每月8號左右會進行數(shù)值更新。為了“順勢”告知到用戶，當(dāng)用戶向下滑動頁面查看業(yè)務(wù)卡片內(nèi)容時，對應(yīng)的淘氣值會進行數(shù)字翻動與箭頭變化的微動效，適時吸引到用戶告知淘氣值的數(shù)值變化。

寫在最后

我的淘寶2017版歷時半年對“工具與用戶”的思考、梳理和設(shè)計終于上線落地。通過“去中心化的工具內(nèi)容化設(shè)計”的設(shè)計理念讓“正確的用戶”在“恰當(dāng)?shù)膱鼍啊陛p易的發(fā)現(xiàn)“適合的服務(wù)”。一切都是為了更懂用戶。從目前數(shù)據(jù)來看，用戶使用內(nèi)容化工具相較純工具入口形式，DAU提升1~5倍不等。結(jié)合輿情反饋，去中心化的工具內(nèi)容化設(shè)計方向理念是一個不錯的嘗試。

整個落地過程雖然繁瑣無比（因為我的淘寶是一個工具陣地，任何一個工具的業(yè)務(wù)方都不是我們自己），我們需要和每一個接入的工具業(yè)務(wù)方商討后訂立落地類型、跟進設(shè)計規(guī)范的執(zhí)行、審核最后的工具內(nèi)容化設(shè)計后的產(chǎn)出效果。但是，我們一點一點定義好了清晰的設(shè)計規(guī)范和流程以便后續(xù)工具場景的順利接入。

后續(xù)，我們也有許多需要繼續(xù)完善的地方。如何讓正確的用戶在準(zhǔn)確的場景輕易的發(fā)現(xiàn)適合的服務(wù)工具，這需要我們算法的不斷完善，也需要我們不斷從人群場景、發(fā)現(xiàn)場景、個性化場景反思產(chǎn)品的后續(xù)。

相關(guān)文章

淘寶2017設(shè)計升級：手淘首次以設(shè)計為主導(dǎo)的版本升級

提示信息的情感化設(shè)計，做一個有故事的淘寶

淘寶2017的商品詳情改版設(shè)計：從商業(yè)目標(biāo)維度去挖掘設(shè)計改進方向

作者：?要白、明颯

來源：微信公眾號【淘寶用戶體驗設(shè)計】