編輯導(dǎo)讀：互聯(lián)網(wǎng)的發(fā)展讓人們足不出戶就能享受到很多服務(wù)，比如買菜。不用再去菜市場精挑細(xì)選，而是在手機(jī)APP上直接下單為你選好的菜品，坐等配送員送上門。本文作者以叮咚買菜為例，對其用戶體驗(yàn)展開分析，希望對你有幫助。

本文以Ajax之父杰西· 詹姆斯·加勒特[美] ( Jesse James Garrett )所著的《用戶體驗(yàn)要素：以用戶為中心的產(chǎn)品設(shè)計(jì)》一書為基礎(chǔ)，從用戶體驗(yàn)設(shè)計(jì)的角度對當(dāng)前生鮮電商黑馬APP——“叮咚買菜”淺析（重點(diǎn)分析界面和交互行為）。對生鮮電商行業(yè)的設(shè)計(jì)工作進(jìn)行梳理，以加強(qiáng)設(shè)計(jì)師對用戶體驗(yàn)設(shè)計(jì)的理解和應(yīng)用。

（本文僅代表筆者個(gè)人觀點(diǎn)及理解，歡迎指正）

一、用戶體驗(yàn)的定義

• “用戶體驗(yàn)并不是指一件產(chǎn)品本身如何工作，而是產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用，也就是人們?nèi)绾谓佑|和使用他?！?/li>
• “真正的產(chǎn)品形態(tài)絕對不是由功能所決定的，而是應(yīng)該由用戶自身的心理感受和行為來決定的?！?/li>
• “用戶體驗(yàn)設(shè)計(jì)通常要解決的是應(yīng)用環(huán)境的綜合問題?！?/li>

以上是Jesse對用戶體驗(yàn)的定義。用戶體驗(yàn)可以通俗理解為：用戶在某特定環(huán)境中使用某產(chǎn)品更高效地解決實(shí)際問題。該過程涉及人（用戶）、工具（產(chǎn)品）、問題（應(yīng)用環(huán)境），其中人是主導(dǎo)，工具服務(wù)于人，在特定環(huán)境中解決特定問題。

二、用戶體驗(yàn)要素的五個(gè)層面

自下而上分別是（從抽象到具體）：

• 戰(zhàn)略層：企業(yè)外部的用戶需求+企業(yè)內(nèi)部的產(chǎn)品目標(biāo)；
• 范圍層：功能型產(chǎn)品的功能規(guī)格/信息型產(chǎn)品的內(nèi)容需求；
• 結(jié)構(gòu)層：功能型產(chǎn)品的交互設(shè)計(jì)/信息型產(chǎn)品的信息架構(gòu)；
• 框架層；信息設(shè)計(jì)+功能型產(chǎn)品的界面設(shè)計(jì)；
• 表現(xiàn)層：為產(chǎn)品創(chuàng)建感知體驗(yàn)：（通常為）視覺設(shè)計(jì)

2.1 戰(zhàn)略層

2.1.1 概念分析

戰(zhàn)略層需要首先回答的兩個(gè)基本問題：

• 我們要通過這個(gè)產(chǎn)品得到什么？
• 我們的用戶通過產(chǎn)品得到什么？

上述兩個(gè)問題中，第一個(gè)問題來自企業(yè)內(nèi)部對產(chǎn)品的定位——即產(chǎn)品目標(biāo)，也可以理解為企業(yè)的商業(yè)目標(biāo)或商業(yè)驅(qū)動(dòng)因素。第二個(gè)問題來自企業(yè)外部——即用戶需求。

對于商業(yè)公司來說，任何行為的根本目的和最終目的是為公司帶來利潤。但是不同公司的商業(yè)行為不同，即公司戰(zhàn)略定位各不相同，根據(jù)公司戰(zhàn)略定位的不同，與之相對應(yīng)的產(chǎn)品定位以及產(chǎn)品所面向的用戶群體也不同。所以產(chǎn)品目標(biāo)（或商業(yè)目標(biāo)）可以理解為公司的戰(zhàn)略定位。

注：公司的戰(zhàn)略定位要明確“邊界”，即明確“什么時(shí)候到達(dá)終點(diǎn)”，避免盲目決策。

與公司自身戰(zhàn)略定位的相對應(yīng)的，是來自市場的廣大用戶。戰(zhàn)略定位的制定要與用戶需求相對應(yīng)。這里的用戶需求不等同于需求文檔中的用戶需求，而是對整個(gè)用戶群體的把控，即產(chǎn)品服務(wù)于哪一類人群，這類人群有什么樣的共性。戰(zhàn)略層的用戶需求可以通過創(chuàng)建用戶畫像來實(shí)現(xiàn)。

綜上所述，戰(zhàn)略層需要解決的兩個(gè)問題可以概括為一個(gè)問題：“我們?yōu)槭裁匆_發(fā)這個(gè)產(chǎn)品？”

2.1.2 實(shí)例分析

產(chǎn)品名稱：叮咚買菜

產(chǎn)品介紹：自營生鮮平臺(tái)及提供配送服務(wù)的生活服務(wù)類app，主要提供的產(chǎn)品包括蔬菜，豆制品，水果，肉禽蛋，水產(chǎn)海鮮，米面糧油，休閑食品等。叮咚買菜作為電商行業(yè)中垂直領(lǐng)域——生鮮電商的一匹黑馬，在整個(gè)生鮮電商行業(yè)尚未成熟的今天得以存活并保持高速發(fā)展，其中部分地區(qū)已扭轉(zhuǎn)盈虧。

產(chǎn)品定位：叮咚買菜屬于新零售模式下的電商代表，區(qū)別于傳統(tǒng)零售（線下零售服務(wù)），新零售模式連接線上和線下（O2O）以獲取更大流量從而創(chuàng)造營收。通過線上入口獲客并提供線下服務(wù)。擴(kuò)大其服務(wù)范圍，不再限制于線下有限的范圍，從而獲得更高的價(jià)值。叮咚買菜通過“前置倉配貨—配送到家”的服務(wù)模式提高服務(wù)質(zhì)量和服務(wù)效率。其中，前置倉配貨直接為配送到家縮短了配送時(shí)間，在對菜品質(zhì)量有嚴(yán)格要求的生鮮電商領(lǐng)域中，有效的保證了菜品的“鮮”的同時(shí)涵蓋了3000+的SKU生鮮菜品，，滿足用戶的多樣化需求。同時(shí)，因?yàn)樯r產(chǎn)品屬于生活剛需，前置倉的出現(xiàn)使得叮咚買菜可以喊出“最快29分鐘送達(dá)”的口號以提高市場競爭力，建立市場壁壘。

叮咚買菜進(jìn)一步細(xì)化定位：新零售模式下的生鮮電商服務(wù)以區(qū)別于其他綜合電商平臺(tái)。當(dāng)前叮咚買菜多布局于國內(nèi)一線二線城市。其商業(yè)布局一方面來自于自身的戰(zhàn)略定位，另一方面來自于市場環(huán)境（用戶群體）限制。一、二線城市經(jīng)濟(jì)發(fā)達(dá)、擁有互聯(lián)網(wǎng)思維的年輕人所占比重較大，更容易接受新鮮事物（新零售模式）同時(shí)該人群收入較高，對生活品質(zhì)有一定要求，且消費(fèi)觀念較為新潮，容易接受新鮮事物。同時(shí)，由于一、二線城市生活節(jié)奏快，工作壓力大，該類人群可自由支配時(shí)間有限等眾多因素影響，該類人群的共性特點(diǎn)與新零售電商的定位相契合。叮咚買菜解決了該類人群沒有時(shí)間買菜這一實(shí)際問題，同時(shí)迎合了該類人群高品質(zhì)生活質(zhì)量的需求——為用戶提供高質(zhì)量高品質(zhì)的生鮮食材。

除去公司內(nèi)部對自身產(chǎn)品的戰(zhàn)略定位之外，還需要用戶研究員對照戰(zhàn)略定位（產(chǎn)品定位）對市場中的用戶群體進(jìn)行用戶研究。用戶研究的方法包括但不限于問卷調(diào)查、小組調(diào)查等。最終根據(jù)研究結(jié)果整理輸出具有高度概括性的用戶畫像（人物角色），用戶畫像是從用戶研究中提取出的可以稱為可用樣例的虛擬人物。定義需求=人物角色+場景描述。

總結(jié)概括：戰(zhàn)略層需要完成的工作分為兩部分

• 公司決策層對產(chǎn)品的整體定位；
• 用戶研究員根據(jù)產(chǎn)品定位對用戶群體進(jìn)行調(diào)研，整理輸出用戶需求文檔，為后續(xù)工作及決策提供參考價(jià)值。

2.2 范圍層

2.2.1 概念分析

當(dāng)把用戶需求和產(chǎn)品目標(biāo)轉(zhuǎn)變成產(chǎn)品應(yīng)該提供給用戶什么樣的內(nèi)容和功能時(shí)，戰(zhàn)略就變成了范圍。

范圍層面對的問題轉(zhuǎn)變?yōu)椋骸拔覀円_發(fā)的是什么？”

范圍層分為“功能型產(chǎn)品”和“信息型產(chǎn)品”兩部分。其中，信息型產(chǎn)品可以理解為門戶網(wǎng)站（搜狐、百度、新浪等）之類的以信息傳遞為主要目標(biāo)的產(chǎn)品，功能型產(chǎn)品為幫助解決用戶某個(gè)實(shí)際問題的產(chǎn)品，例如“滴滴打車”幫助用戶解決打車難的問題、“叮咚買菜”幫助用戶解決買菜難的問題。在當(dāng)前的手機(jī)應(yīng)用App中，功能型產(chǎn)品和信息型產(chǎn)品的界限已經(jīng)不再那么清晰，取而代之的是在一款產(chǎn)品中你中有我，我中有你的一種共存模式。例如，新浪微博既可以理解為信息型產(chǎn)品：一種信息傳播介質(zhì)，用戶可以使用微博瀏覽各種新聞軼事；同時(shí)也可以理解為功能型產(chǎn)品：一種社交工具，在微博上自由發(fā)表言論，與好友進(jìn)行互動(dòng)等社交行為。

2.2.2 實(shí)例分析

叮咚買菜作為功能型產(chǎn)品，在范圍層中確定的是產(chǎn)品向用戶提供什么樣的功能，或者可以理解為明確產(chǎn)品的功能規(guī)格。在這一過程中需要用戶研究員或產(chǎn)品經(jīng)理將戰(zhàn)略層中將用戶需求轉(zhuǎn)換為產(chǎn)品功能需求文檔。在功能需求文檔中需要對比需求實(shí)現(xiàn)的可行性以及確定需求優(yōu)先級。因?yàn)轫?xiàng)目開發(fā)的時(shí)間成本、技術(shù)成本以及經(jīng)濟(jì)成本是有限的，所以要評估哪些需求最能滿足戰(zhàn)略目標(biāo)。哪些需求可以在后期迭代中進(jìn)行以不影響核心業(yè)務(wù)的實(shí)現(xiàn)。

在確定產(chǎn)品功能規(guī)格的同時(shí)要特別注意，避免陷入“范圍蠕變”—滾雪球效應(yīng)。以保證在每一階段過程中明確產(chǎn)品需要怎樣的功能，不需要怎樣的功能，以提高項(xiàng)目開發(fā)效率，節(jié)約預(yù)算。

叮咚買菜作為生鮮電商垂直領(lǐng)域的代表之一，其核心功能是支持用戶線上選購+線下配送。隨著市場變化以及用戶需求變化，為提升下單量以及復(fù)購率，產(chǎn)品功能也在也在不斷優(yōu)化，下圖顯示了叮咚買菜自上線以來至2020年2月的版本迭代總結(jié)。（圖片來源于網(wǎng)絡(luò)）

從上表中可以看出，產(chǎn)品的每一次迭代更新都是圍繞產(chǎn)品核心功能進(jìn)行，留存老客戶，吸引新客戶以提高平臺(tái)下單量和復(fù)購率。例如上表中所示：V8.7.0版本更新中，增加了商品推薦這一功能根據(jù)客戶購買歷史進(jìn)行智能推薦以吸引用戶復(fù)購；V8.19.0版本更新中菜譜支持分享至微信這一功能，通過微信這一社交軟件在社交平臺(tái)上吸引新客戶，完成引流拉新。

當(dāng)前叮咚買菜版本已更新至V9.23.2，應(yīng)用內(nèi)已加入叮咚直播功能，在短視頻/直播行業(yè)大火的市場背景下，“叮咚買菜”通過加入直播功能以吸引用戶，并不代表該產(chǎn)品轉(zhuǎn)型為短視頻領(lǐng)域，而是順應(yīng)實(shí)時(shí)發(fā)展趨勢，利用平臺(tái)直播這一媒介，進(jìn)一步拓寬獲客渠道，其核心業(yè)務(wù)依然是為用戶提供O2O的生鮮電商服務(wù)。產(chǎn)品迭代的過程說明了產(chǎn)品功能需求優(yōu)先級的意義并且有限避免項(xiàng)目盲目擴(kuò)張?jiān)斐傻馁Y源浪費(fèi)。

總結(jié)概括：范圍層中需要完成工作為輸出明確的產(chǎn)品功能需求文檔。功能需求文檔內(nèi)需要注明需求優(yōu)先級。功能需求文檔的書寫規(guī)范在此文中不再贅述，更多詳細(xì)介紹請查閱《用戶體驗(yàn)要素》一書或其他同類文章。

2.3 結(jié)構(gòu)層

2.3.1 概念分析

結(jié)構(gòu)層屬于五個(gè)階段中的中間層，也是產(chǎn)品開發(fā)過程中從抽象到具體的轉(zhuǎn)變。在這一層級中，產(chǎn)品開發(fā)的主要任務(wù)是交互設(shè)計(jì)和信息架構(gòu)建設(shè)。

交互設(shè)計(jì)的目的就是明確人與機(jī)器的溝通方式，交互設(shè)計(jì)的工作內(nèi)容可以簡單理解為將復(fù)雜的軟件變得簡單易用，將軟件的某些功能/特性處理為用戶熟悉的某個(gè)概念，使得用戶可以零成本地，根據(jù)自身對周圍環(huán)境的理解自然地掌握/學(xué)會(huì)使用某項(xiàng)產(chǎn)品。

在《用戶體驗(yàn)要素》一書中，作者Jesse以電子商務(wù)網(wǎng)站中的“購物車”為例來解釋交互設(shè)計(jì)：“購物車”是一個(gè)容器，作為一個(gè)容器，用戶將選購的商品放進(jìn)“購物車”中，以及最后下單時(shí)使用“結(jié)賬”來比喻完成一筆購物訂單。

在上述例子中，將用戶在電子商務(wù)網(wǎng)站中的一次購物操作類比做線下商場中人們的實(shí)際行為：推著購物車進(jìn)入超市，把將要選購的商品放進(jìn)購物車中，最后在柜臺(tái)前為車中選購的商品進(jìn)行結(jié)賬。交互設(shè)計(jì)就是將購物這一實(shí)際行為運(yùn)用到電子商務(wù)網(wǎng)站中，讓用戶以傳統(tǒng)的、熟悉的行為方式完成線上購物這一行為。

在交互設(shè)計(jì)過程中，不可避免的一個(gè)問題是“用戶錯(cuò)誤行為”的解決方案。仍然以購物車為例，在現(xiàn)實(shí)生活中，如果在超市購物結(jié)賬時(shí)，忽然有某項(xiàng)商品不想要了，可以向收銀員說明，以確保其不會(huì)將我們不想要的商品算入總金額中，避免經(jīng)濟(jì)損失。同樣的問題也存在于電子商務(wù)網(wǎng)站的用戶行為中，用戶將多個(gè)商品添加到購物車中，最后結(jié)賬時(shí)有某個(gè)商品不想要，我們可以將這一情形理解為“用戶錯(cuò)誤”行為，這時(shí)就需要網(wǎng)站提供撤銷或退單功能，確保用戶可以在結(jié)賬時(shí)將不想要商品退還給商場（網(wǎng)站）。

與交互設(shè)計(jì)相輔相成的是產(chǎn)品的信息架構(gòu)建設(shè)。任何一款產(chǎn)品，無論是信息型產(chǎn)品、功能型產(chǎn)品（如今已不再嚴(yán)格區(qū)分二者），都需要對產(chǎn)品內(nèi)容進(jìn)行架構(gòu)建設(shè)。使其信息內(nèi)容結(jié)構(gòu)化而不是雜亂無章的排列的頁面中。

信息架構(gòu)的基本單位是節(jié)點(diǎn)。節(jié)點(diǎn)可以是任意信息片段或組合。他可以小到是一個(gè)數(shù)字，也可以大到是整個(gè)圖書館。不同產(chǎn)品對節(jié)點(diǎn)的定義不盡相同。

結(jié)構(gòu)包括多種類型，例如層級結(jié)構(gòu)、矩陣結(jié)構(gòu)、自然結(jié)構(gòu)和線性結(jié)構(gòu)。

層級結(jié)構(gòu)（也稱為樹狀結(jié)構(gòu)或中心輻射結(jié)構(gòu)）：節(jié)點(diǎn)與節(jié)點(diǎn)之間存在父子級關(guān)系。子節(jié)點(diǎn)代表更狹義的概念。從屬于代表廣義類別的父節(jié)點(diǎn)。（不是每個(gè)節(jié)點(diǎn)都有子節(jié)點(diǎn)，但是每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)，最上層節(jié)點(diǎn)稱為根節(jié)點(diǎn)）

線性結(jié)構(gòu)：呈線性排列，典型的線性結(jié)構(gòu)有文章內(nèi)容、閱讀時(shí)的閱讀順序等。

矩陣結(jié)構(gòu)：允許用戶在節(jié)點(diǎn)與節(jié)點(diǎn)之間進(jìn)行多維度移動(dòng)。矩陣結(jié)構(gòu)通常幫助那些擁有不同需求的用戶。例如，用戶在電子商務(wù)網(wǎng)站中的商品時(shí)，某些用戶以價(jià)格為主要影響因素選購商品，某些用戶以配送時(shí)間為主要影響因素選購商品。

自然結(jié)構(gòu)：節(jié)點(diǎn)被逐一連接，不遵循任何一致的模式。該類結(jié)構(gòu)通常見于探索類游戲產(chǎn)品。

值得注意的是，一款產(chǎn)品并非只有一種結(jié)構(gòu)，而是多種結(jié)構(gòu)共同作用，才能使產(chǎn)品信息架構(gòu)完善，具體案例在下文中給出。

在產(chǎn)品信息架構(gòu)建設(shè)時(shí)，要遵循一定的命名原則，因?yàn)椴皇撬杏脩舳际菍I(yè)的產(chǎn)品研究人員。在對信息內(nèi)容進(jìn)行命名時(shí)要牢記，我們的產(chǎn)品是面向大眾的產(chǎn)品，而并非服務(wù)于某一類專業(yè)人群（專業(yè)類軟件例如編程、設(shè)計(jì)軟件除外）。設(shè)計(jì)師應(yīng)當(dāng)避免使用晦澀難懂的專業(yè)術(shù)語給用戶的帶來困擾，而是應(yīng)該用通俗易懂的語言降低用戶的學(xué)習(xí)成本。例如，在智能導(dǎo)航系統(tǒng)內(nèi)，設(shè)計(jì)師不應(yīng)該用專業(yè)理論給用戶普及智能導(dǎo)航的概念，而是應(yīng)該用通俗易懂的話語告訴用戶：“您只需說出或輸入目的地，系統(tǒng)將為您自動(dòng)選擇最優(yōu)路線?！睂τ脩魜碇v，簡單的一句話將比復(fù)雜的理論更具有說服力。

2.3.2 實(shí)例分析

仍然以叮咚買菜分析在范圍層所確定的產(chǎn)品的交互設(shè)計(jì)方式以及信息架構(gòu)

首先分析“叮咚買菜”的交互設(shè)計(jì)方式。叮咚買菜作為垂直電商領(lǐng)域——生鮮電商的代表，其核心業(yè)務(wù)的交互邏輯與傳統(tǒng)電商平臺(tái)（天貓、京東等）沒有根本差別：用戶登錄——選購商品——確認(rèn)訂單——結(jié)賬付款——等待收貨。與傳統(tǒng)電商所不同的是，叮咚買菜僅支持手機(jī)移動(dòng)端使用而不支持PC端。所以其交互方式符合移動(dòng)設(shè)備的交互原則。

筆者以新用戶的身份登錄應(yīng)用，產(chǎn)品版本為V.9.23.2。

當(dāng)前，移動(dòng)端設(shè)備的交互方式以手勢交互和與語音交互為主，叮咚買菜暫不支持人機(jī)語音交互。所以重點(diǎn)分析產(chǎn)品的手勢交互方式。

基本的手勢交互方式分為單指交互、雙指交互、多指交互。其中單指交互和雙指交互較為常見。如下圖所示：（滑動(dòng)包括左右滑動(dòng)和上下滑動(dòng)。）

不同交互手勢的應(yīng)用頻率是不同的，高頻使用的是單擊手勢和滑動(dòng)手勢，之所以高頻使用單擊手勢和滑動(dòng)手勢是因?yàn)橐苿?dòng)設(shè)備端的屏幕大小有限，單頁所承載的信息內(nèi)容有限，需要利用單擊或滑動(dòng)手勢進(jìn)行翻頁或信息層級更替。例如，閱讀類應(yīng)用支持用戶單擊或滑動(dòng)操作模仿現(xiàn)實(shí)中讀書翻頁的動(dòng)作進(jìn)行信息更新和層級交替。

其次是雙指捏合和擴(kuò)張手勢，同樣受限于移動(dòng)設(shè)備的屏幕大小，需要展示內(nèi)容細(xì)節(jié)的產(chǎn)品或產(chǎn)品的某個(gè)功能需要支持雙指捏合和擴(kuò)張手勢。例如手機(jī)內(nèi)的相冊，用戶進(jìn)入相冊，單擊某張縮略圖以顯示選中的照片，若用戶想查看照片細(xì)節(jié)，則需要雙指擴(kuò)張以放大圖片，再通過雙指捏合縮小或還原圖片默認(rèn)大小。這里的雙指捏合和擴(kuò)張手勢模擬了人眼到被觀察物體的距離變化，由于移動(dòng)設(shè)備是信息載體，人無法實(shí)際靠近被觀察物體，通過雙指擴(kuò)張表示將物體靠近人眼以查看細(xì)節(jié)，雙指捏合表示將物體遠(yuǎn)離人眼表示查看體整體形態(tài)。

（單指）拖拽和單指長按手勢一般應(yīng)用于元素的移動(dòng)或元素隱藏信息的展示。例如，在購物車內(nèi)長按某個(gè)商品條目顯示是否刪除該該商品，網(wǎng)頁內(nèi)拖拽滾動(dòng)條進(jìn)行頁面上翻下翻操作。

“叮咚買菜”的交互手勢將在下一節(jié)中結(jié)合界面、導(dǎo)航設(shè)計(jì)進(jìn)行進(jìn)一步分析說明。

叮咚買菜的信息架構(gòu)如下圖所示：

該信息架構(gòu)僅展示界面內(nèi)一級分類，未將所有子級分類一一說明。在下一節(jié)中結(jié)合產(chǎn)品的界面設(shè)計(jì)分析信息架構(gòu)的分類

2.4 框架層

2.4.1 概念分析

框架層內(nèi)最后的輸出產(chǎn)物是設(shè)計(jì)師們熟知的線框圖，也稱為低保真模型。線框圖包括界面設(shè)計(jì)，交互方式說明以及界面之間的相互關(guān)系。線框圖的對一個(gè)頁面中所有的組成部分以及他們?nèi)绾谓Y(jié)合到一起的最直觀的描述。也是用戶所能看到的產(chǎn)品最“原始”的樣子。

在結(jié)構(gòu)層對產(chǎn)品交互方式和信息架構(gòu)定義的基礎(chǔ)上，在這一階段要確定用什么樣的功能和形式來實(shí)現(xiàn)他。根據(jù)《用戶體驗(yàn)要素》一書的定義，將框架層的工作內(nèi)容分為界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)。同樣的，在設(shè)計(jì)移動(dòng)應(yīng)用時(shí)，該定義也具有重要的參考價(jià)值。下面將結(jié)合“叮咚買菜”的信息架構(gòu)具體分析其交互方式和界面布局。

2.4.2 實(shí)例分析

筆者以新用戶身份進(jìn)入應(yīng)用，其首頁如下圖所示：

默認(rèn)顯示首頁內(nèi)容， 最上方是用戶定位以及消息中心，單擊可以修改定位以及查看消息內(nèi)容。向下是搜索欄，單擊搜索框進(jìn)入搜索頁面，搜索頁由三部分組成，分別是：搜索欄，用戶自行搜索，搜索功能支持關(guān)鍵字自動(dòng)補(bǔ)全；搜索歷史（如果有的話），按照時(shí)間線顯示搜索過的內(nèi)容，方便用戶快速查看；搜索推薦，應(yīng)用自動(dòng)顯示部分關(guān)鍵搜索字，方便用戶快速查看，并且支持刷新“推薦內(nèi)容”。搜索頁面如下圖所示：

首頁內(nèi)新人嘗鮮價(jià)占據(jù)頁面一半以上空間，包括新人價(jià)格優(yōu)惠推薦商品以及優(yōu)惠券包。這樣的頁面布局在吸引用戶視線的同時(shí)，也為了吸引新人下單，增強(qiáng)用戶粘性。

新人活動(dòng)下方是首頁金剛區(qū)，也是底部導(dǎo)航中分類頁的所有分類入口。由于分類較多，頁面承載有限，所以支持左右滑動(dòng)查看所有分類項(xiàng)。金剛區(qū)內(nèi)綠色滑塊很好的提示用戶該區(qū)域支持左右滑動(dòng)以查看剩余內(nèi)容，否則未顯示內(nèi)容只能等待用戶自行探索，從而降低隱藏內(nèi)容曝光，造成資源浪費(fèi)。

基本任意一款手機(jī)應(yīng)用默認(rèn)支持上下滑動(dòng)操作，該應(yīng)用首屏上劃后，搜索欄置頂顯示，頁面內(nèi)其他信息被更替，頁面如下。

金剛區(qū)之下是輪播banner。默認(rèn)5s自動(dòng)更新。點(diǎn)擊banner進(jìn)入活動(dòng)頁面。banner區(qū)下方是一組產(chǎn)品周邊相關(guān)功能入口。分別是“綠卡會(huì)員”、“叮咚農(nóng)場”和“邀請鄰友”。雖然不是產(chǎn)品核心業(yè)務(wù)，該類功能對留存拉新仍然發(fā)揮重要作用。

長期活動(dòng)分別是：限時(shí)搶購、綠卡特惠、新品嘗鮮和平價(jià)菜場。單擊任一區(qū)域進(jìn)入對應(yīng)的活動(dòng)詳情頁。

之后是分類推薦區(qū)域，分別是：猜你喜歡、特價(jià)促銷、豐盛午餐、火鍋到家和時(shí)令新品。區(qū)域內(nèi)支持左右滑動(dòng)、或者單擊推薦條目的方式顯示不用區(qū)域推薦商品。并采用無限流的方式展示商品，給用戶帶來沉浸式的購物體驗(yàn)。同時(shí)，在上劃時(shí)，推薦條目作為首頁內(nèi)二級導(dǎo)航置頂顯示在搜索欄之下，幫助用戶快速定位所處的頁面層級。

首頁內(nèi)容支持雙擊圖標(biāo)返回頁面頂層。

全局導(dǎo)航僅支持單擊切換，不支持左右滑動(dòng)切換。

分類頁如圖所示：

分類頁內(nèi)容根據(jù)菜品屬性不同進(jìn)行分類。商品一級類目與首頁中金剛區(qū)分類相同。一級類目包括：蔬菜豆制品、肉禽蛋、水產(chǎn)海鮮、水果鮮花、乳品烘焙、冷凍食品、糧油調(diào)味、方便速食、快手菜、火鍋到家、網(wǎng)紅打卡地、零食酒飲、營養(yǎng)早餐、鮮花寵物、熟食鹵味、日日鮮、個(gè)護(hù)清潔、綠卡專享。一級類目固定顯示在搜索框下方，可點(diǎn)擊“全部”展開所有一級類目。當(dāng)選擇一級類目時(shí)，被選中條目高亮顯示，并且被選中條目相對位置保持不變，其余條目產(chǎn)生相對位移。

左側(cè)為二級類目，右側(cè)為二級類目對應(yīng)的商品展示區(qū)域。商品列表區(qū)域頂部為商品三級類目（部分二級類目下沒有三級類目），當(dāng)前類目下的商品顯示到最后時(shí)，向上滑動(dòng)屏幕自動(dòng)切換至后一個(gè)類目商品，所對應(yīng)的類目變?yōu)檫x中狀態(tài)高亮顯示。單擊不同類目標(biāo)簽也可以切換至對應(yīng)的類目商品頁。

商品展示區(qū)由以下元素組成：購買按鈕，商品圖片，商品名稱及價(jià)格，商品關(guān)鍵信息（商品特色，烹飪方式，特惠標(biāo)簽，銷量冠軍等信息）。其中部分商品對存儲(chǔ)條件的特殊要求在商品說明中也有明顯標(biāo)注。

不同客戶對該頁面的條目列表的需求不同，對于有明確需求/購買意向的用戶，再搜索框中輸入關(guān)鍵字點(diǎn)擊搜索，根據(jù)搜索結(jié)果直接查看并下單；對于需求模糊/購買意向不強(qiáng)的用戶可以通過分級類目瀏覽商品，心儀商品可以點(diǎn)擊購買按鈕添加至購物車中。

在該頁面內(nèi)，對于依賴分類條目瀏覽商品的用戶來講，其操作路徑/視線路徑如下圖所示：

并非所有二級類目之下都含有三級類目，所以當(dāng)用戶參照分類條目瀏覽商品時(shí)，至少需要三次操作：選擇一級類目，選擇二級類目，選擇相應(yīng)的商品縮略圖。

點(diǎn)擊商品介紹區(qū)域，進(jìn)入產(chǎn)品詳情頁：全局導(dǎo)航消失。

產(chǎn)品圖片自動(dòng)輪播（5s更新），也可左右滑動(dòng)查看上/下一張圖片。單擊圖片區(qū)域全屏顯示圖片后，支持雙擊放大圖片（三次雙擊縮放至默認(rèn)大小）或雙指捏合縮放，默認(rèn)大小時(shí)，單擊圖片退出全屏顯示狀態(tài)?；氐疆a(chǎn)品詳情頁。

頁面頂部分布有返回按鈕（返回上一級）和分享按鈕（分享至第三方應(yīng)用：微信/朋友圈）。向上滑動(dòng)至商品圖片消失時(shí)，該頁面內(nèi)二級導(dǎo)航出現(xiàn)在頁面頂部，分別是商品、評價(jià)、詳情、推薦。單擊導(dǎo)航名稱，相應(yīng)內(nèi)容在屏幕內(nèi)聯(lián)動(dòng)顯示，或滑動(dòng)屏幕顯示不同內(nèi)容時(shí)，相對應(yīng)的導(dǎo)航為高亮選中狀態(tài)。

在商品評價(jià)區(qū)與詳情介紹介紹區(qū)之間有單獨(dú)的關(guān)聯(lián)推薦商品區(qū)域。（該區(qū)域并未在二級導(dǎo)航中體現(xiàn)）該區(qū)域所展示的商品為當(dāng)前商品詳情頁的相關(guān)商品。（或依據(jù)烹飪方式推薦、或根據(jù)飲食搭配推薦）。關(guān)聯(lián)推薦為三頁內(nèi)容，用戶在該區(qū)域內(nèi)可左右滑動(dòng)查看所有推薦商品，同理，單擊縮略圖進(jìn)入商品詳情頁或單擊購物車按鈕加入“購物車”。

頁面底部為我的購物車與加入購物車按鈕，若購物車內(nèi)有商品，則購物車按鈕根據(jù)商品數(shù)量高亮顯示以提示用戶當(dāng)前所選購商品數(shù)量。

點(diǎn)擊購物車按鈕則進(jìn)入全局導(dǎo)航下的購物車界面。

購物車內(nèi)商品默認(rèn)為選中狀態(tài)——已選購。用戶可點(diǎn)擊選中按鈕取消選擇（商品條目仍然保存在購物車內(nèi)）。若用戶想刪除購物車內(nèi)商品，有以下幾種方式：

• 可長按商品條目刪除該商品；
• 點(diǎn)擊屏幕右上角刪除按鈕刪除已選中商品；
• 向左滑動(dòng)商品條目出現(xiàn)刪除按鈕，點(diǎn)擊刪除。

該頁面內(nèi)，已選購商品上方有換購?fù)ǖ馈８鶕?jù)單次消費(fèi)金額進(jìn)行換購。該區(qū)域內(nèi)左右滑動(dòng)查看可換購商品。同理，單擊換購商品區(qū)域進(jìn)入對應(yīng)的商品詳情頁。已選購商品下方是商品推薦區(qū)。系統(tǒng)根據(jù)用戶購買歷史或?yàn)g覽歷史進(jìn)行智能推薦。

無論是商品推薦還是換購功能，都是為了吸引客戶下單，提高客單價(jià)。

瀏覽至推薦商品底部時(shí)，出現(xiàn)一鍵回到頂部按鈕。方便用戶快速定位。當(dāng)用戶對購物車內(nèi)商品確認(rèn)無誤后，點(diǎn)擊結(jié)算按鈕進(jìn)入結(jié)算界面。界面如下：

該界面內(nèi)用戶必需進(jìn)行的操作包括：填寫收貨地址，選擇收貨時(shí)間，選擇支付方式，確認(rèn)消費(fèi)金額?？蛇x操作包括：在此確認(rèn)選購商品，是否使用優(yōu)惠券，訂單備注。所有信息確認(rèn)無誤后，點(diǎn)擊提交訂單轉(zhuǎn)入第三方支付平臺(tái)進(jìn)行支付。

全局導(dǎo)航中，點(diǎn)擊“我的”按鈕進(jìn)入個(gè)人信息頁面。頁面如下：

頁面內(nèi)分為消息中心、用戶信息、用戶賬戶、用戶訂單、活動(dòng)入口、其他相關(guān)功能、智能推薦模塊。

點(diǎn)擊右上方按鈕進(jìn)入消息中心，點(diǎn)擊用戶名稱進(jìn)入個(gè)人資料界面更改個(gè)人資料。

該頁面功能較為簡潔，因此不再贅述。

全局導(dǎo)航中，直播頁如下：

該頁面分為一下幾個(gè)模塊：輪播banner、直播間入口、直播預(yù)告、做飯教程。

頁面頂部為自動(dòng)輪播banner，也可左右滑動(dòng)翻頁查看。屏幕中心區(qū)域是直播間入口和直播預(yù)告，點(diǎn)擊直播間入口進(jìn)入直播間觀看直播。

屏幕上劃至輪播圖超出屏幕區(qū)域后，顯示屏幕標(biāo)題——“叮咚直播”（下劃反之）。繼續(xù)上劃，做飯靈感下的類目標(biāo)簽欄至標(biāo)題下方后，類目標(biāo)簽欄固定顯示在標(biāo)題下方，同時(shí)出現(xiàn)一鍵返回頂部按鈕，方便用戶快速定位。

用戶可左右滑動(dòng)查看不同類型教程。左右滑動(dòng)時(shí)，相應(yīng)的類目標(biāo)簽聯(lián)動(dòng)顯示為被選中狀態(tài)。也可單擊類目標(biāo)簽直接顯示對應(yīng)內(nèi)容。點(diǎn)擊教程縮略圖進(jìn)入教程詳情頁。類目標(biāo)簽內(nèi)點(diǎn)擊“全部”查看所有分類。

在進(jìn)行界面更新、界面加載時(shí)，采用微交互的設(shè)計(jì)方式填補(bǔ)用戶等待時(shí)間。由于動(dòng)畫效果不便展示，故文中沒有圖示說明。

由于時(shí)間有限，未能將應(yīng)用內(nèi)所有界面一一說明，僅分析至二級界面。

2.5 表現(xiàn)層

2.5.1 概念分析

框架層中主要解決可交互元素的布局、信息元素的排布以及界面之間的邏輯關(guān)系問題。在表現(xiàn)層中要結(jié)局產(chǎn)品邏輯排布的呈現(xiàn)問題。將信息呈現(xiàn)給用戶的過程，用戶接收信息的過程，被定義為感知設(shè)計(jì)。

人的感官系統(tǒng)由五方面組成，分別是視覺、聽覺、觸覺、嗅覺和味覺。其中，嗅覺和味覺是用戶體驗(yàn)設(shè)計(jì)師很好考慮的范疇。實(shí)物產(chǎn)品的觸覺體驗(yàn)屬于工業(yè)設(shè)計(jì)領(lǐng)域的概念，例如產(chǎn)品的外形、材質(zhì)等?；谄聊唤换サ漠a(chǎn)品目前沒有過多的將觸覺體驗(yàn)納入研究范圍。聽覺現(xiàn)在已經(jīng)開始應(yīng)用于各種產(chǎn)品當(dāng)中，例如智能音箱、智能語音系統(tǒng)、智能車載系統(tǒng)等。產(chǎn)品通過捕捉用戶發(fā)出的語音指令做出一系列反饋為用戶提供有效信息。

視覺設(shè)計(jì)是被應(yīng)用最多的領(lǐng)域。幾乎所有的產(chǎn)品都會(huì)涉及視覺設(shè)計(jì)。視覺設(shè)計(jì)過程中，要注意以下方面：

• 視覺設(shè)計(jì)應(yīng)該使得產(chǎn)品更加易用，而不是分散用戶“完成目標(biāo)”的注意力。不應(yīng)該讓視覺設(shè)計(jì)成為阻礙用戶達(dá)成目的的因素，而是更好的引導(dǎo)用戶完成目標(biāo)。
• 視覺設(shè)計(jì)要注意對比和一致性。既要突出顯示重要內(nèi)容，又要強(qiáng)調(diào)整體一致，例如圖標(biāo)風(fēng)格的一致性，控件大小一致性以及元素間距的一致性等。通常運(yùn)用柵格系統(tǒng)保證頁面的一致性，用不同的配色方案表現(xiàn)元素之間的對比關(guān)系。

2.5.2 實(shí)例分析

叮咚買菜的主要色彩是白色作為背景色，綠色作為輔助色，突出顯示為被選中狀態(tài)。例如分類條目、全局導(dǎo)航中的被選中狀態(tài)為綠色，以及商品內(nèi)容區(qū)內(nèi)的購物車按鈕同樣突出顯示為綠色。紅色作為點(diǎn)綴色突出顯示商品價(jià)格、結(jié)算按鈕以及商品屬性標(biāo)簽的文字。

商品一級類目使用實(shí)物圖標(biāo)直觀表現(xiàn)不同類別的商品。

除此以外，應(yīng)用內(nèi)其他圖標(biāo)一律采用線性圖標(biāo)，保證界面風(fēng)格一致性。

界面一致性還體現(xiàn)在不同模塊之間保持一致的間距，商品信息展示使用卡片式設(shè)計(jì)等。

三、總結(jié)概括

產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)并不是一勞永逸的過程，而是隨著市場規(guī)律和用戶需求的變化周而復(fù)始的進(jìn)行更替。在工作過程中，既要考慮現(xiàn)有的成本：技術(shù)、時(shí)間、經(jīng)濟(jì)等。也要考慮用戶的真實(shí)需求，避免依據(jù)“偽需求”進(jìn)行產(chǎn)品開發(fā)的錯(cuò)誤方向。正如《用戶體驗(yàn)要素》一書中所言，用戶體驗(yàn)的開發(fā)過程是一場“馬拉松”，而不是“短跑”。成功的馬拉松取決于運(yùn)動(dòng)員如何有效地控制自己的步伐。

產(chǎn)品的開發(fā)是一個(gè)漫長的過程，只有遵循客觀規(guī)律，確保在每一層級都做出正確的決策才能保證最終的產(chǎn)品滿足最初的戰(zhàn)略目標(biāo)和用戶需求。

本文由 @第一生瓜蛋子 發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。