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

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

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

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

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

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

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

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

• 戰(zhàn)略層：企業(yè)外部的用戶(hù)需求+企業(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)：（通常為）視覺(jué)設(shè)計(jì)

2.1 戰(zhàn)略層

2.1.1 概念分析

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

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

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

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

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

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

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

2.1.2 實(shí)例分析

產(chǎn)品名稱(chēng)：叮咚買(mǎi)菜

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

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

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

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

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

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

2.2 范圍層

2.2.1 概念分析

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

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

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

2.2.2 實(shí)例分析

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

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

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

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

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

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

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

2.3.1 概念分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.3.2 實(shí)例分析

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

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

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

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

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

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

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

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

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

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

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

2.4 框架層

2.4.1 概念分析

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

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

2.4.2 實(shí)例分析

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

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

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

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

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

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

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

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

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

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

分類(lèi)頁(yè)如圖所示：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

該頁(yè)面功能較為簡(jiǎn)潔，因此不再贅述。

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

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

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

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

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

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

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

2.5 表現(xiàn)層

2.5.1 概念分析

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

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

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

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

2.5.2 實(shí)例分析

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

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

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

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

三、總結(jié)概括

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

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

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

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