如何正確把玩APP？一個(gè)高級(jí)方法+兩個(gè)實(shí)戰(zhàn)案例幫你全面掌握！

大家都對(duì) UED（用戶體驗(yàn)設(shè)計(jì)）和 UCD（以用戶為中心的設(shè)計(jì)）不陌生，我們?cè)诠ぷ髦幸步?jīng)常聽到很多人在說要注重用戶體驗(yàn)，設(shè)計(jì)師要站在用戶的角度思考問題，以用戶的需求為目標(biāo)進(jìn)行設(shè)計(jì)。

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

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

用戶體驗(yàn)要素

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

當(dāng)人們提起用戶體驗(yàn)要素時(shí)，就會(huì)說到用戶體驗(yàn)要素的五個(gè)層和十個(gè)元素。

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

我們先來看一下用戶體驗(yàn)的五個(gè)要素：

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

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

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

天貓VS寺庫

? 1. 戰(zhàn)略層

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

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

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

天貓用戶群體

目標(biāo)用戶分析：

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

用戶定位：

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

寺庫用戶群體

目標(biāo)用戶分析：

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

用戶定位：

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

? 2. 范圍層

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

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

△ 天貓部分功能框架

△ 寺庫部分功能框架

對(duì)比：

天貓和寺庫在很多地方都比較相似，因?yàn)槎际蔷€上電商，都會(huì)設(shè)立給用戶推薦好物的版塊，結(jié)構(gòu)上也會(huì)有很多比較接近的。

天貓注重整個(gè)購物流程：

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

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

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

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

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

天貓

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

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

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

△ 天貓購物流程

寺庫

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

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

△ 寺庫購物流程

? 4. 框架層

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

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

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

• 商品信息
• 同店鋪其他商品推薦
• 商品評(píng)價(jià)
• 圖文詳情
• 推薦購買

天貓對(duì)一個(gè)店鋪其他商品的導(dǎo)流會(huì)更在意一些，同店鋪其他商品的推薦花費(fèi)了比較大的占比，評(píng)價(jià)上天貓還多一個(gè)問答版塊，寺庫則是主要把商品本身的介紹作為重點(diǎn)。

? 5. 表現(xiàn)層

造成設(shè)計(jì)上差異的原因

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

因?yàn)樘熵埖亩ㄎ痪褪强梢宰尭嗟挠脩暨x擇這個(gè)產(chǎn)品用來線上購物，同時(shí)也有相對(duì)品質(zhì)感比較好的商品來滿足不同需求的人群。

寺庫不論是 banner 圖還是頁面其他內(nèi)容，都不會(huì)把「促銷」「折扣」這類信息作為重點(diǎn)展示，因?yàn)樗聨斓亩ㄎ槐容^高端，競(jìng)爭(zhēng)力不在商品的價(jià)格上，促銷這類型的信息并不是它們最想展示的。

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

天貓的商品詳情頁會(huì)把優(yōu)惠信息放在商品圖片上，是為了促進(jìn)用戶點(diǎn)擊購買，告訴用戶在我這里購買這個(gè)商品是很實(shí)惠的，價(jià)格、優(yōu)惠券等信息也標(biāo)紅讓其比較明顯，因?yàn)橛脩粼谔熵埳腺徫飼?huì)比較在意價(jià)格的多少，所以在首屏展示的優(yōu)惠、活動(dòng)信息偏多。

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

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

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

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

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

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

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

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

寺庫頁面風(fēng)格是為了傳達(dá)給用戶精細(xì)、高端感，和天貓比起來體量較小。

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

總結(jié)

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

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