如何正確把玩APP?一個高級方法+兩個實戰案例幫你全面掌握! - 優設網 - UISDC

如何正確把玩APP?一個高級方法+兩個實戰案例幫你全面掌握!

2019/05/21 17903評論 16

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

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

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

用戶體驗要素

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

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

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

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

戰略層、范圍層、結構層、框架層、表現層這五個層級也是從概念到落地,從抽象到具體的一個過程。

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

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

天貓VS寺庫

? 1. 戰略層

在分析產品之前,我們可以先從網上搜集一下這兩個 APP 的相關數據,一個產品底層的戰略信息我們無法完全清楚,但卻可以從已有數據中進行分析。

以下的數據均來自艾瑞數據(https://data.iresearch.com.cn/Home.shtml

數據對比

天貓用戶群體

目標用戶分析:

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

用戶定位:

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

寺庫用戶群體

目標用戶分析:

  • 一二線城市的用戶;
  • 追求時尚者;
  • 收入較高的用戶群體;
  • 對奢侈品有需求,期望享受到購物環節中比較優質的待遇;
  • 主要目標用戶在 80 后和 90 后。

用戶定位:

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

? 2. 范圍層

天貓注重品牌銷售和用戶的喜好,在意用戶的注重購買體驗,給用戶提供優質的產品和服務。

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

△ 天貓部分功能框架

△ 寺庫部分功能框架

對比:

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

天貓注重整個購物流程:

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

寺庫注重打造產品的品質感:

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

? 3. 結構層

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

天貓

天貓在瀏覽商品時會突出商品促銷信息,代金券折扣、優惠券的信息會比較明顯,并且會推薦比較多的相關產品,讓用戶多停留在頁面上。

天貓的自營產品商品詳情頁是沒有直接購買按鈕的,可能的原因有:

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

△ 天貓購物流程

寺庫

寺庫和天貓相比,整個購買流程中多出門店自提一環,這也是它的特點之一。寺庫的商品詳情頁的信息內容比較簡單,也有猜你喜歡的推薦商品版塊??贍蓯且蛭驢獾納唐返ゼ勱細?,所以會在頁面上有一個版塊是選擇庫票分期,應該也是與其他金融產品的合作。

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

△ 寺庫購物流程

? 4. 框架層

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

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

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

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

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

? 5. 表現層

造成設計上差異的原因

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

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

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

首頁所有可點擊區域都比較清晰,采用大量留白的手法,一屏展示的內容不會顯得雜亂,便于已經有目的的用戶來瀏覽。

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

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

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

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

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

表現層對比總結

兩款 app 都是電商類的,在頁面承載內容上有很多相似的地方,但是由于產品定位不同,在具體頁面上的設計風格有很大的區別。

天貓類似淘寶,頁面承載的產品種類很多。

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

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

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

總結

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

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

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.qratuj.com.cn/play-app-correctly

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里