大家都對 UED（用戶體驗設計）和 UCD（以用戶為中心的設計）不陌生，我們在工作中也經(jīng)常聽到很多人在說要注重用戶體驗，設計師要站在用戶的角度思考問題，以用戶的需求為目標進行設計。

這篇文章，我們將通過天貓和寺庫的對比，帶大家一起更加深入地去理解用戶體驗。

我們先來一起回顧下用戶體驗要素的一些概念。

用戶體驗要素

首先就要說到《用戶體驗要素》這本書，書里用清晰的說明和生動的圖形分析了以用戶為中心的設計方法（UCD）來進行產(chǎn)品設計，要求設計人員關(guān)注于思路而不是工具或技術(shù)，從而使你的產(chǎn)品具備高質(zhì)量體驗的流程。

當人們提起用戶體驗要素時，就會說到用戶體驗要素的五個層和十個元素。

體驗設計也是近兩年來很流行的一個詞。商業(yè)目的和用戶體驗是體驗設計中必不可少的兩個重要環(huán)節(jié)。這篇文章將通過實際的案例分析來給大家講述一下用戶體驗在設計中的應用。

我們先來看一下用戶體驗的五個要素：

戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層這五個層級也是從概念到落地，從抽象到具體的一個過程。

我們平常也會聽到這些專業(yè)術(shù)語，但是要如何才能把這些知識應用到實際中呢？我將通過對天貓及寺庫的對比，帶大家一起看一下這五個要素在工作中的映射。

我們先來了解一下天貓和寺庫分別是什么樣的產(chǎn)品。

天貓VS寺庫

? 1. 戰(zhàn)略層

在分析產(chǎn)品之前，我們可以先從網(wǎng)上搜集一下這兩個 APP 的相關(guān)數(shù)據(jù)，一個產(chǎn)品底層的戰(zhàn)略信息我們無法完全清楚，但卻可以從已有數(shù)據(jù)中進行分析。

以下的數(shù)據(jù)均來自艾瑞數(shù)據(jù)（https://data.iresearch.com.cn/Home.shtml）

數(shù)據(jù)對比

天貓用戶群體

目標用戶分析：

• 想購物卻沒有時間的用戶；
• 用戶想進行在線購物；
• 有相對較高的消費能力，注重品質(zhì)和質(zhì)量；
• 追求隨時隨地查看物品下單購買，方便快捷的購物體驗的用戶。

用戶定位：

主打正品品牌銷售、時尚銷售，整個產(chǎn)品大而全，期望滿足用戶的大部分購物需求，主要面向的是一二線城市的用戶。

寺庫用戶群體

目標用戶分析：

• 一二線城市的用戶；
• 追求時尚者；
• 收入較高的用戶群體；
• 對奢侈品有需求，期望享受到購物環(huán)節(jié)中比較優(yōu)質(zhì)的待遇；
• 主要目標用戶在 80 后和 90 后。

用戶定位：

奢侈品電商，重新定位奢侈品消費，滿足年輕且經(jīng)濟能力不錯的群體，不做純電商，線上線下同步，為有需求的用戶提供高端服務鏈。

? 2. 范圍層

天貓注重品牌銷售和用戶的喜好，在意用戶的注重購買體驗，給用戶提供優(yōu)質(zhì)的產(chǎn)品和服務。

首頁「折扣」「聚劃算」「天貓閃降」版塊也可以刺激用戶的購買，活動和種草墻被單獨作為一個版塊，目的是讓用戶可以找到更多想要購買的商品。從商業(yè)的角度來看在首頁引入其他產(chǎn)品入駐可能是存在一定的平臺費用或是銷售分成。

△ 天貓部分功能框架

△ 寺庫部分功能框架

對比：

天貓和寺庫在很多地方都比較相似，因為都是線上電商，都會設立給用戶推薦好物的版塊，結(jié)構(gòu)上也會有很多比較接近的。

天貓注重整個購物流程：

天貓會在首頁設立很多版塊去引導用戶發(fā)現(xiàn)更多產(chǎn)品，以促進用戶的消費，內(nèi)置天貓超市和天貓國際兩個體量也是非常大的，天貓整體「大而全」，會讓用戶覺得所有東西都可以在這里買到。

寺庫注重打造產(chǎn)品的品質(zhì)感：

寺庫不追求用戶在這里購買更多的東西，但是要讓用戶感受到在這里購買的每一件商品體驗都是最好的。

? 3. 結(jié)構(gòu)層

天貓和寺庫在購買邏輯上是比較相似的，在不同的地方由于產(chǎn)品的定位不同而產(chǎn)生一些差異。

天貓

天貓在瀏覽商品時會突出商品促銷信息，代金券折扣、優(yōu)惠券的信息會比較明顯，并且會推薦比較多的相關(guān)產(chǎn)品，讓用戶多停留在頁面上。

天貓的自營產(chǎn)品商品詳情頁是沒有直接購買按鈕的，可能的原因有：

• 為了讓用戶多購買自營產(chǎn)品，添加購物車后可以合并購買。
• 因為自營商品物流比較敏感，一般都是次日達，為了讓用戶多選購商品后再一起付款，減少物流壓力，同一用戶的訂單可以一起派送。

△ 天貓購物流程

寺庫

寺庫和天貓相比，整個購買流程中多出門店自提一環(huán)，這也是它的特點之一。寺庫的商品詳情頁的信息內(nèi)容比較簡單，也有猜你喜歡的推薦商品版塊?？赡苁且驗樗聨斓纳唐穯蝺r較高，所以會在頁面上有一個版塊是選擇庫票分期，應該也是與其他金融產(chǎn)品的合作。

在瀏覽商品時，寺庫把分類單獨放在一個 tab 里，是為了讓有目的性的用戶可以更容易找到自己想要的商品，而天貓的分類層級相對深一點，因為分類是一種固態(tài)的模式，天貓的產(chǎn)品種類非常多樣，加上用戶群體比較龐大，每一個人的購買習慣也不同，也是為了給用戶更多的選擇和瀏覽的空間。

△ 寺庫購物流程

? 4. 框架層

天貓在首頁會根據(jù)用戶最近瀏覽的物品去推測用戶的喜好，推薦商品的篇幅占了很大一部分，為了向用戶展示我們的產(chǎn)品種類是很多的，你想要的在我們這里都可以買到。天貓榜單和一些活動功能，讓用戶更直觀了解天貓，很好地突出自己的特色。

寺庫除了首頁的一個分區(qū)域展示，還單獨設計了一個詳細的商品分類導航框架，這樣設計更讓用戶覺得瀏覽時目的性更強。首頁還增加了走進寺庫版塊，讓用戶更了解寺庫是什么，服務十分周全。寺庫的頁面交互設計很用心，流暢的交互也讓用戶更加認可這個產(chǎn)品的品質(zhì)。

商品詳情頁首屏沒有什么差異，往下滑動兩款 APP 都有的部分是：

• 商品信息
• 同店鋪其他商品推薦
• 商品評價
• 圖文詳情
• 推薦購買

天貓對一個店鋪其他商品的導流會更在意一些，同店鋪其他商品的推薦花費了比較大的占比，評價上天貓還多一個問答版塊，寺庫則是主要把商品本身的介紹作為重點。

? 5. 表現(xiàn)層

造成設計上差異的原因

天貓首頁展示很多推薦內(nèi)容，運用刺激用戶點擊的顏色，突出優(yōu)惠和滿減這樣的設計主要針對沒有目的性瀏覽的用戶，會增加他在網(wǎng)站的停留時間，促進他瀏覽的欲望。

因為天貓的定位就是可以讓更多的用戶選擇這個產(chǎn)品用來線上購物，同時也有相對品質(zhì)感比較好的商品來滿足不同需求的人群。

寺庫不論是 banner 圖還是頁面其他內(nèi)容，都不會把「促銷」「折扣」這類信息作為重點展示，因為寺庫的定位比較高端，競爭力不在商品的價格上，促銷這類型的信息并不是它們最想展示的。

首頁所有可點擊區(qū)域都比較清晰，采用大量留白的手法，一屏展示的內(nèi)容不會顯得雜亂，便于已經(jīng)有目的的用戶來瀏覽。

天貓的商品詳情頁會把優(yōu)惠信息放在商品圖片上，是為了促進用戶點擊購買，告訴用戶在我這里購買這個商品是很實惠的，價格、優(yōu)惠券等信息也標紅讓其比較明顯，因為用戶在天貓上購物會比較在意價格的多少，所以在首屏展示的優(yōu)惠、活動信息偏多。

寺庫的商品詳情給人一種簡單、干凈的感覺，沒有太多復雜的介紹，優(yōu)惠券和促銷的信息也占比較小的比重，是因為寺庫商品單筆價格都是比較高的，給用戶展示的信息要能讓用戶覺得這個商品值這個價格，因此在這個頁面上還是希望用戶可以更多的關(guān)注商品本身，瀏覽的時候可以更順暢不輕易地被其他信息干擾。

天貓和寺庫在商品的展示上底部的功能都基本一致，除了天貓超市自營的產(chǎn)品沒有加入購物車外，在頁面的商品展示上都使用了比較大的區(qū)域，因為二者都是比較在意產(chǎn)品本身的展示，但是天貓去掉了頂欄來增加商品展示區(qū)域，目的是在商品有更多展示空間的情況下，也能把優(yōu)惠和活動信息也顯示全。寺庫的頂欄則被保留用來顯示品牌，目的是為了塑造產(chǎn)品整體的形象。

在功能點比較相似的情況下，天貓和寺庫選擇了兩種展現(xiàn)方式，天貓的功能比較多，因此它們進行分類，將我的訂單和工具版塊分隔開，看上去也會更清晰。寺庫則使用圖標+icon 的形式展示一些功能，每一個功能點的留白依然比較多。除了頂部的個人訂單信息部分，其他每一個功能點都使重要程度的差異不那么大的，頁面上還有會員信息的 banner 圖，是希望用戶在關(guān)注自己的訂單信息后還能夠關(guān)注到會員信息。

即使是在頁面邏輯和結(jié)構(gòu)差不多的購物車頁面，二者的設計風格依然很好地體現(xiàn)了各自的產(chǎn)品特征。天貓頁面比較緊湊，能夠展現(xiàn)出更多內(nèi)容，寺庫則保持大片留白的做法，不管是已加入購物車的產(chǎn)品還是推薦產(chǎn)品，每款商品都展示得很清楚，整體風格依然很簡潔。這種差異也是由于兩款產(chǎn)品的定位不同造成的。

表現(xiàn)層對比總結(jié)

兩款 app 都是電商類的，在頁面承載內(nèi)容上有很多相似的地方，但是由于產(chǎn)品定位不同，在具體頁面上的設計風格有很大的區(qū)別。

天貓類似淘寶，頁面承載的產(chǎn)品種類很多。

天貓涉及多個領(lǐng)域，也連接著一些其他網(wǎng)站的功能。在消費者之中傳播的很快，讓大家都很比較信賴這個品牌。天貓需要用戶在頁面上停留更多時間，因此所展示內(nèi)容的區(qū)域比較小，但是用戶能看到的種類比較齊全，而且推薦的內(nèi)容基本都是按照用戶最近瀏覽的商品來進行推薦，更容易讓用戶找到自己想買的商品。

寺庫頁面風格是為了傳達給用戶精細、高端感，和天貓比起來體量較小。

寺庫的頁面層次比較清楚，首頁下拉后都是以標題+大圖的文章列表形式展示一個主題，所要展示的內(nèi)容或者商品都是會占較大的空間，注重單個商品和品牌的塑造，讓用戶瀏覽一個商品時更容易沉浸到其中。

總結(jié)

通過對天貓和寺庫的分析總結(jié)可以讓我們明白，一個產(chǎn)品最后呈現(xiàn)到用戶面前的視覺效果也是由最底層的戰(zhàn)略目標就決定了的。

用戶體驗并不是一件簡單的事情，真正研究用戶體驗要時刻學習和總結(jié)，作為設計師不能只站在表層來思考問題，在研究一個產(chǎn)品時需要學會分析產(chǎn)品的戰(zhàn)略目標。在工作中也要和產(chǎn)品多溝通，學會站在產(chǎn)品的層面，找準產(chǎn)品的根基，了解這樣做的目的是什么，然后在這個基礎(chǔ)上去做更適合的設計，而不單單是一味地追求好看。