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

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

設(shè)計(jì)背景與思路

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

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

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

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

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

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

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

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

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

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

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

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

類型一：固定工具卡

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

類型二：提醒工具卡

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

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

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

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

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

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

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

順勢(shì)而為的視覺(jué)互動(dòng)

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

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

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

寫(xiě)在最后

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

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

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

相關(guān)文章

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

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

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

作者：?要白、明颯

來(lái)源：微信公眾號(hào)【淘寶用戶體驗(yàn)設(shè)計(jì)】