2017版“我的淘寶”設計,可能是迄今為止最懂你的

10 評論 18889 瀏覽 110 收藏 13 分鐘

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

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

設計背景與思路

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

這次改版我的淘寶,希望能從單純的所有工具入口集合向更懂用戶的使用場景的個人管理空間轉型,希望我的淘寶能從更個性和智能的場景上連接用戶和淘寶。讓用戶在“恰當的場景”輕易地發現“適合的服務”。因此,我們為我的淘寶制定了“去中心化的工具內容化設計”的設計理念。

設計理念:去中心化的工具內容化設計

工具服務的內容化設計是一種顯性化設計,能讓用戶所見即所得,快速明確的理解到工具所提供的核心功能和服務;也能有效地減少用戶與工具所提供的核心服務之間的交互步驟和流程,讓用戶在當前工具的內容區完成與工具的核心交互,是一種去中心化的服務設計形式。

工具內容化設計交互結構

基于工具內容化設計的設計理念,我們需要設計一個合適的交互設計框架結構來承載我的淘寶多樣化的工具業務。因此,我們在我的淘寶的產品結構的Z軸和Y軸上進行了工具內容化設計的交互結構的定義。

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

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

以上,我們通過定義去中心化的設計理念和我的淘寶Z軸和Y軸的交互結構,確定了整個工具內容化設計的框架。同時,我們也提煉出了我的淘寶工具內容化設計的三個核心關鍵詞:“卡片化”、“顯性化”和“個性化”,并將之作為這次設計改版的核心思想時刻檢視之后的工具服務接入設計。

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

工具內容化卡片類型

我的淘寶三種工具內容化設計類型分別是:固定工具卡、提醒工具卡和常態工具卡。

類型一:固定工具卡

  • 定義:我的淘寶固有核心心智工具內容設計。如收藏工具、訂單工具、必備工具。
  • 特征:在我的淘寶工具內容層頁面位置固定;在核心內容透出設計的同時,保持原工具入口用戶習慣。

類型二:提醒工具卡

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

類型三:常態工具卡

  • 定義:面向常態服務型工具業務的內容化設計,如我的淘氣值、閑置、花唄、寶寶、愛車、通信等業務的與“我”相關的管理服務。
  • 特征:用戶在管理頁面添加后出現在我的淘寶;按用戶的添加順序排列,用戶可根據自己的使用頻率調整卡片在我的淘寶的位置順序。

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

工具內容化卡片設計的統一

在工具的內容化的具體細節設計上,我們通過定義清晰的通用設計布局形式來統一用戶的認知和使用心智,以及統一工具服務的接入設計。

基礎布局由工具標題欄、內容區、核心行動點3部分組合而成。其中,標題欄和核心行動點樣式保持嚴格一致,內容區則提供布局模版滿足業務個性化的業務訴求?;A布局整體遵循中心線對齊規則,保證用戶從上至下瀏覽頁面時視覺線不分散。

順勢而為的視覺互動

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

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

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

寫在最后

我的淘寶2017版歷時半年對“工具與用戶”的思考、梳理和設計終于上線落地。通過“去中心化的工具內容化設計”的設計理念讓“正確的用戶”在“恰當的場景”輕易的發現“適合的服務”。一切都是為了更懂用戶。從目前數據來看,用戶使用內容化工具相較純工具入口形式,DAU提升1~5倍不等。結合輿情反饋,去中心化的工具內容化設計方向理念是一個不錯的嘗試。

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

后續,我們也有許多需要繼續完善的地方。如何讓正確的用戶在準確的場景輕易的發現適合的服務工具,這需要我們算法的不斷完善,也需要我們不斷從人群場景、發現場景、個性化場景反思產品的后續。

相關文章

淘寶2017設計升級:手淘首次以設計為主導的版本升級

提示信息的情感化設計,做一個有故事的淘寶

淘寶2017的商品詳情改版設計:從商業目標維度去挖掘設計改進方向

 

作者:?要白、明颯

來源:微信公眾號【淘寶用戶體驗設計】

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 實名嘲笑,我2006年注冊的淘寶,到現在,每個月有2-3次在淘寶上網購,但是我要不是看了我們產品經理的一個鏈接,我tm都不知道這頁下面還有這個第二屏?。。。?!what?????

    來自廣東 回復
  2. 這文章寫的這么好,這個改版的思路這么牛,這都有人噴,真是林子太大了?

    回復
  3. 大用戶量的產品,創新會更加謹慎,表示理解,至少它敢于去折騰。

    來自廣東 回復
  4. 作者說到后面,自己還要跳出來強行解釋為什么這點東西弄了半年之久,想必不說心里也是有點慌吧。
    200字的東西我以為神州20號上天了。
    阿里,真了不起!

    來自北京 回復
  5. 我的淘寶2017版歷時半年對“工具與用戶”的思考、梳理和設計終于上線落地。通過“去中心化的工具內容化設計”的設計理念讓“正確的用戶”在“恰當的場景”輕易的發現“適合的服務”。一切都是為了更懂用戶。

    我想知道什么是正確的用戶。

    作者堆砌了一堆的高級名詞,一句很簡單的話,被說的特別復雜。。估計是用來評審、拿獎金

    來自江蘇 回復
  6. 這類app就別提了,play常年1星,求下架系列(阿里的產品基本都是求下架系列,各種后臺,關聯喚醒。。。),要你提醒各毛啊,各種糟心的提醒,一個買東西的app腫的不行,極簡核心版有沒有啊?要不是有DIYer的雜貨店買賣零件,早就卸了,可以說你完全不懂我,除了在選商品給我推薦以外,支付寶連我看電影的什么信息都貼出來,還沒有個同意按鈕,廣而告之。。。真希望別這么作四

    來自浙江 回復
  7. 一點都不喜歡這么滲入生活的

    回復
  8. 整體改版思路很簡單,這么個改版要半年也是大公司病的體現吧。小公司可能半個月就擼出來了

    來自浙江 回復
  9. 紅配綠,XXX

    來自廣東 回復