二、產(chǎn)品設(shè)計
1 結(jié)構(gòu)
1.1 功能結(jié)構(gòu)
上圖使用思維導(dǎo)圖的方式，完整展示了美團外賣?App?的功能菜單，按照主菜單可劃分為四類。
首頁：以分類、優(yōu)惠等多種形式展示商家，用戶可進行搜索、挑選。
閃購：單獨展示生鮮超市類商品，區(qū)別于首頁的餐飲，主推基于周邊生活圈的閃購業(yè)務(wù)。
訂單：查看所有已被創(chuàng)建的訂單，用戶可進行評價、售后、再來一單等操作。
我的：集中管理用戶資料及資產(chǎn)，包括地址、收藏、錢包、優(yōu)惠券等，以及客服中心等入口。
1.3 業(yè)務(wù)流程
上圖使用泳道圖的方式，分別從消費者、商家、騎手三者的用戶角度，模擬展示了美團外賣產(chǎn)品的業(yè)務(wù)流程。
從中可看出，消費者與商家、騎手之間的流程關(guān)系是密不可分的。消費者是觸發(fā)整個流程的主導(dǎo)者，而商家與騎手則作為服務(wù)消費者的角色，三者形成一個完整的業(yè)務(wù)閉環(huán)過程。
從流程圖可看出，美團外賣的登錄、注冊方式，基本以手機號碼為主。即使使用第三方社交賬號登錄，也必須先綁定手機。
主要原因在于，美團外賣的用戶是以手機號碼為基準，一個號碼對應(yīng)一個用戶，這樣既能保證用戶的真實性，也可減少刷單、刷評論等現(xiàn)象。而且，同一個賬號是允許在多臺終端同時登錄的，用戶資料及購物車等是支持實時同步的。
因為手機號碼是點單取餐的必備條件，所以無論從用戶或產(chǎn)品角度，使用手機號碼都是十分合理且自然的選擇。
2 設(shè)計
2.1 設(shè)計風(fēng)格
美團外賣?App?界面以橘黃色為主色調(diào)，并貫穿整個產(chǎn)品設(shè)計。除了底色、圖標、文字，還配合可愛的袋鼠形象、騎手服飾等，整套色系已深入人心，可以說是非常成功的 VI?設(shè)計案例。
作為一款外賣產(chǎn)品，設(shè)計核心圍繞在如何更優(yōu)的展示商家，并引導(dǎo)用戶進行點餐下單。頁面中部位置用于顯示商家與餐品，搜索、設(shè)置、消息中心等功能置于頂部，而底部則為固定的菜單導(dǎo)航欄。操作方式以上下劃動、單點選擇為主，偶爾配合左右滑動作為輔助展示。
2.2 產(chǎn)品原型
上圖使用?Axure?軟件，以倒推的方式，繪制了美團外賣?App 的中保真原型圖，以便展示產(chǎn)品界面的設(shè)計細節(jié)。
原型圖以灰度為主，并以彩色線條表示不同頁面之間的流程關(guān)系，以藍色注釋講解其中的交互設(shè)計關(guān)鍵點。
2.3 操作界面
登錄
前文已經(jīng)提到，美團外賣的登錄與注冊方式，均以手機號碼為主，從界面設(shè)計也可以明顯看出這一點。
賬號的退出方式，則放在二級入口「我的-我的賬號」中，因為一般用戶不需要頻繁切換賬號，較少用到。
游客
在美團外賣?App?中，新用戶在未登錄的游客狀態(tài)下，仍然可以使用大部分操作，比如瀏覽商家、點選商品等，地址默認使用系統(tǒng)匹配的附近地址。直到超過限定范圍，觸發(fā)了必須登錄才能使用的功能，那么界面則會提醒用戶登錄或注冊。
上圖展示了美團外賣中會觸發(fā)登錄提醒的操作，比如消息中心、購物車、個人信息、地址管理、訂單結(jié)算等功能。這樣的設(shè)計，對新用戶更加友好，便于初次使用時的探索了解，直到產(chǎn)生下單需求時再引導(dǎo)注冊登錄。
點餐
作為一款在線外賣產(chǎn)品，功能核心自然是點餐下單，所以對于商家的展示、點餐過程的引導(dǎo)，則至關(guān)重要。
從上圖可看出，美團外賣對于如何引導(dǎo)用戶做了非常多的功課，幾乎所有操作都成為了商家頁的入口。
內(nèi)容上不乏帶有誘導(dǎo)作用的優(yōu)惠信息，用來增強用戶下單的欲望。同時，還提供了很多便于用戶搜索、篩選的工具，以便提高下單的效率。
用戶進入商家頁后，可進行挑選、下單、付款等操作，示意圖完整演示了用戶從進入商家到完成支付的全過程。從中可發(fā)現(xiàn)，美團外面界面的設(shè)計邏輯非常清晰直觀，即使是新用戶的學(xué)習(xí)成本也相對較低。
用戶在商家頁挑選商品時，可以隨意加減數(shù)量，并實時看到經(jīng)過計算的實際總金額。而且，會貼心的提醒用戶是否滿足當前商家的滿減優(yōu)惠，還提供了「滿減神器」幫助用戶快速下單。挑選完商品，可以通過下方購物車進行二次確認，直觀的展示已選商品及總價，確認無誤后再結(jié)算。提交訂單后，會再次具體的顯示商品的價格公式，包括包裝費、配送費、優(yōu)惠紅包等加減細節(jié)，詳盡而不顯羅嗦。在訂單頁，用戶可以進行選擇紅包代金券、填寫備注、選擇餐具、開具發(fā)票等操作。最后完成付款，并跳轉(zhuǎn)至訂單詳情頁。
3 交互
3.1 體貼的功能
本小節(jié)中提及的便捷功能，是美團外賣產(chǎn)品設(shè)計中的亮點。在貼合產(chǎn)品核心功能的同時，既提高了用戶的點餐效率，滿意度提升，又促進了消費。
滿減神器
在商家頁的左下角，有一個「滿減神器」的功能，供用戶快速選擇符合滿減要求的餐品，與「湊單提醒」相輔相成，相較更加直接有效。
滿減神器會自動列出，當前商家中符合滿減優(yōu)惠的最優(yōu)餐品組合。實現(xiàn)邏輯也非常簡單，主要是通過商家歷史訂單，排列出被購買次數(shù)較多的組合。
由于滿減優(yōu)惠在外賣平臺中已成常規(guī)活動，幾乎所有商家都有力度不同的優(yōu)惠，點餐時相當考驗用戶的數(shù)學(xué)能力。而美團外賣推出該功能，正是想用戶之所想，為用戶省去了湊單的時間，極大的提升了點餐效率。
最近常買
訂單頁面的頂部，用戶已消費過的商家按次數(shù)從高到低排列，形成最近常買的商家列表。便于讓用戶快速找到，減少查找時間。
從用戶角度來看，消費次數(shù)居高的商家，通常是比較喜歡、經(jīng)常會關(guān)顧的商家。
相似商家
在訂單列表中，已完成的歷史訂單，可通過「相似商家」查看與該商家相似的其他商家，主要是通過位置、品類、價位等因素綜合篩選。
通常是用戶喜歡該商家的餐品口味，但由于某些原因希望更換其他商家，就需要用到該功能，特別是對于重度用戶來說尤其重要。
再來一單
在訂單列表及訂單詳情中，均有「再來一單」按鈕，其功能類似于重新購買。
用戶點擊后會跳轉(zhuǎn)至該商家頁面，并自動將歷史訂單中的相同餐品放入購物車。如有其中有缺失的餐品，會加以提示。當用戶想要重復(fù)點選之前的餐品，或只是進行細微調(diào)整，就可以通過簡單的操作快速完成點餐。
除了適合用戶再次重復(fù)點單，以及沒有時間挑選餐品的場景。同時，當用戶點錯單并取消后，也可以使用「再來一單」重新添加，再到購物車中調(diào)整修改。
3.2 便捷的入口
地址入口
美團外賣的商家展示，是以用戶當前地址為判斷基準的，必須在配送范圍內(nèi)才會展示，同時用戶地址也是騎手送餐配送的關(guān)鍵信息。因此，如何引導(dǎo)用戶填寫地址信息，并確保選擇正確的地址，是較為重要的核心功能之一。
如上圖所示，美團外賣主要提供了三個入口供用戶對地址進行選擇、編輯，分布在首頁、提交訂單、我的地址三個頁面中，分別對應(yīng)了下單前、下單時、下單后三個流程。
評價入口
作為一款貼近民生的在線外賣產(chǎn)品，用戶對于商家、騎手等服務(wù)的評價顯然是非常重要的數(shù)據(jù)，上圖展示了美團外賣中的多個評價入口。從示意圖可看出，當前訂單完成后，同時會有三個入口在提醒用戶進行評價。如果在訂單完成時，用戶沒有及時評價，之后再回到訂單頁仍會看到評價按鈕，并且還單獨設(shè)有「待評價」的分類。
評分機制可以促使商家、騎手提升自身的服務(wù)質(zhì)量，商家一般會根據(jù)評價內(nèi)容對餐品加以改進，而騎手為了收到好評也會更加主動服務(wù)態(tài)度。同時，平臺還可以利用用戶評價作為產(chǎn)品優(yōu)化的數(shù)據(jù)支撐，從而共同作用于整個產(chǎn)品質(zhì)量及使用體驗的提升。
在積極引導(dǎo)用戶評價的同時，還需要保證用戶評價的真實有效性。除了前文提到的，以手機號碼注冊的方式加強用戶的真實性，還限制僅能在訂單完成的 7 天內(nèi)評價，且評價后超過 7 天也無法再追評。因為間隔一段時間之后，用戶對于外賣口感及服務(wù)體驗可能產(chǎn)生偏差，或者受到其他因素干擾，最直接的評價應(yīng)該在一周內(nèi)。而這些評價內(nèi)容，也會統(tǒng)一歸入「我的評價」中，方便用戶再次查看管理。
消息中心
如圖所示，用戶可以在大多數(shù)頁面的右上角找到「消息中心」的入口。里面集合了所有的通知類及溝通類內(nèi)容，包括商家代金券、系統(tǒng)通知、客服消息、好友消息等。
根據(jù)實際場景可發(fā)現(xiàn)，用戶在溝通的過程中經(jīng)常需要返回進行其他操作，而「消息中心」的多入口設(shè)計，正是方便了用戶的來回切換。
客服入口
當用戶在使用產(chǎn)品的過程中碰到問題，首要選擇自然是在線客服，上圖展示了美團外賣?App?中多個客服入口及界面設(shè)計，主要入口位于「訂單」及「我的」頁面。
由于外賣產(chǎn)品的異常問題大多與訂單相關(guān)，所以「訂單詳情」的頁面入口更為常用。對此，根據(jù)訂單或狀態(tài)的不同，用戶進入在線客服的頁面內(nèi)容是有所差異的。結(jié)合示意圖舉例，同一個訂單在「配送中」與「已完成」兩個狀態(tài)下顯示的內(nèi)容是不同的。
這樣處理的目的，一是為了簡化用戶的操作，利用大數(shù)據(jù)預(yù)測當前需求；二是將用戶引導(dǎo)至正確的解決渠道，比如直接聯(lián)系商家或騎手，從而減輕人工客服的成本壓力。
3.3?用心的交互
購物車
美團外賣?App?中，只要在用戶已登錄的情況下，已勾選的商品都會一直保留在「購物車」中，可以隨時輕松找回，我將其稱之為「購物車保留原則」。
用戶點選過的商品必然是經(jīng)過各種因素考慮的，即使當下不會立即下單，但隨時能找回來是很關(guān)鍵的，給予用戶一種「永遠呆在購物車等著」的安心感。對于一款在線外賣產(chǎn)品來說，這是用戶體驗中至關(guān)重要的一點。
用戶在任何商家挑選過的商品，都會在「購物車」內(nèi)集中展示，并非常直觀的將價格、配送費、滿減優(yōu)惠寫明。如果出現(xiàn)商家休息、商品缺貨等異常情況，還會加以提醒（如圖中）。用戶可隨時在購物車內(nèi)二次挑選、比較，再進行下單結(jié)算。結(jié)算后的商品自然會清除，但仍可在歷史訂單中看到購買過的商品。
同時經(jīng)過實測發(fā)現(xiàn)，即使在斷網(wǎng)、閃退、沒電的極端情況，購物車內(nèi)的商品也不會丟失。但如果是游客狀態(tài)，購物車則不會永久保留，因為用戶數(shù)據(jù)是跟隨賬號在線存儲的，并支持實時同步于多個終端。
訂單狀態(tài)懸浮窗
如圖所示，用戶若當前有訂單處于進行時，在頁面右下方會出現(xiàn)一個置頂?shù)膽腋〈埃靡燥@示訂單的實時狀態(tài)。
在「首頁」、「訂單」、「我的」三個主頁頁面中，都能看到該懸浮窗。用戶點擊后會直接進入該訂單的詳情頁，方便隨時了解當前的動態(tài)，比如騎手送到哪了。
結(jié)合圖示可看到，根據(jù)訂單狀態(tài)的不同，懸浮窗的提示也會隨之變化。懸浮窗會在用戶提交訂單后出現(xiàn)，而一旦訂單完成（配送完成）即消失。
選擇并展開
如上圖所示的交互動作，當用戶選擇「待評價（或退款）」時，頁面會在切換的同時全屏展開并置頂菜單。這是比較符合用戶直覺的交互設(shè)計，實際操作令人感覺一氣呵成。
在這個狀態(tài)下，用戶的「點擊」行為代表了「切換并查看內(nèi)容」的意圖，所以全屏展開更利于用戶的瀏覽，避免其他無關(guān)內(nèi)容擾亂視覺。同樣的交互設(shè)計，還出現(xiàn)在了首頁的篩選功能、活動頁面的分類菜單等。
懸浮控件
美團外賣?App?中最常見的懸浮控件，主要是首頁（或閃購）的「購物車」，以及訂單詳情頁中的「紅包」。
兩個懸浮控件雖然性質(zhì)類似，但在操作上略有不同。結(jié)合上示示意圖，針對兩者分別作簡單分析。
購物車：當打開首頁（或閃購）時，「購物車」控件的初始狀態(tài)是完全顯示的，以突出其功能位置。當用戶劃動頁面的時候則呈透明狀并收入邊欄，避免阻擋內(nèi)容。而如果停止劃動，則會恢復(fù)完全顯示的初始狀態(tài)。
紅包：初始狀態(tài)同樣為完全顯示，劃動時也是呈透明狀并收入邊欄。與購物車的區(qū)別在于，當停止劃動時控件為隱藏狀態(tài)，且可自由拖動。
「紅包」控件是可以自由拖動的，且在停止劃動后不會再次完整顯示。如此設(shè)計可以嘗試理解為，假設(shè)用戶在訂單完成后初始沒有分享紅包的意圖，則之后再分享的可能性極低，所以控件只需保持「乖乖呆在角落且需要時也能找到」的狀態(tài)即可。控件允許自由拖動，則避免了懸浮控件容易遮擋住頁面關(guān)鍵信息的情況，比如當訂單詳情頁需要截屏（分享、投訴）的時候。
3.4 適時的提醒
在適時的時刻給出適當?shù)奶嵝?，告知用戶關(guān)鍵的必要信息，可避免因信息不對稱而影響用戶的使用體驗。并且，提醒的時機及方式也相當重要，一旦過于突?；蝾l繁，提醒就會變成騷擾。
以下配合示意圖，講述美團外賣?App?中數(shù)個較為典型的例子。
商品缺失提醒
當用戶使用「再來一單」功能，但該商家中的部分商品缺失而無法加入購物車，則頁面會明顯提示「?XX 商品已售完，并重新選擇?！?。
便于用戶及時了解后，檢查購物車并重新選購。避免了用戶在不知情的情況下直接下單，造成下錯單、訂單糾紛等情況。
配送時間提醒
當用戶進入商家頁，但當前未在該商家的配送時間內(nèi)，則頁面頂部會出現(xiàn)「現(xiàn)在預(yù)定，**:** 起送」的配送時間提醒。
明確告知用戶，現(xiàn)在如果下單屬于預(yù)定，以及開始配送的時間。避免用戶挑選完商品后才發(fā)現(xiàn)無法即時配送，甚至直接下單后商家卻沒有配送。
另外，如果當前未在商家的營業(yè)時間內(nèi)，頁面則會直接提示「本店打烊」，且用戶是無法點選任何商品的。
惡劣天氣提醒
當用戶提交訂單時，若系統(tǒng)判斷收貨地址所在位置有雨天、雪天等惡劣天氣，則頁面會在配送時間下方給出「惡劣天氣下配送可能延遲，請耐心等待。」的提醒。
便于用戶提前了解，該訂單的配送時間可能較長，若繼續(xù)下單就意味著默認接受。從而在一定程度上，可以減輕用戶等待的焦慮感，并減少投訴、催單等事件。
手機截屏提醒
當用戶在任意頁面進行屏幕截圖時，則頁面右側(cè)會出現(xiàn)兩個便捷選項，分別為「反饋問題」與「分享頁面」。
選擇「反饋問題」，會先進入包含馬賽克及標記功能的編輯界面，方便用戶先行除去截圖中的敏感信息，或者標注需要反饋的問題所在。選擇「分享頁面」，則是微信、QQ?等社交分享按鈕。另外，如果是在商家頁進行屏幕截圖，還會增加「好友拼單」的選項，點擊后進入微信拼單界面。
網(wǎng)絡(luò)異常
當用戶手機所在的網(wǎng)絡(luò)出現(xiàn)異常時，則頁面會出現(xiàn)「網(wǎng)絡(luò)不太給力，請稍候重試」的提示。
從上圖可看到，網(wǎng)絡(luò)異常下的提示非常簡單直接，頁面會因為無法加載內(nèi)容而完全空白，并提醒用戶重新加載（如左圖）。在網(wǎng)絡(luò)恢復(fù)正常后，重新加載即可顯示正常頁面。
如果是在使用過程中間歇性出現(xiàn)網(wǎng)絡(luò)不穩(wěn)定的情況，則當前頁面已加載的內(nèi)容仍可繼續(xù)瀏覽，但繼續(xù)點擊就會因為無法加載而彈出提示（如右圖）。
3.5 加分的選項
作為對于社會輿論的回應(yīng)，美團外賣經(jīng)常會推出一些加分的選項。同時配合公關(guān)宣傳，對于品牌形象的提升有著直接的影響。
餐具數(shù)量
美團外賣于 2017 年 9 月份推出「青山計劃」，正式將環(huán)保工作提上議程。同時鼓勵商家與用戶一同參與，減少一次性餐具的使用。
用戶可在提交訂單時自行選擇餐具數(shù)量，或者不需要餐具。同時，頁面會有明顯標識「一起為環(huán)保助力」鼓勵用戶參與，而商家參與活動后則可以點亮環(huán)保標識。
此舉在一定程度上抵消了外界關(guān)于外賣污染的負面輿論，同時也有助于提升美團外賣的綠色環(huán)保形象。
號碼保護
美團外賣于 2017 年 8 月份推出號碼保護功能，提高對用戶的隱私保護。
用戶可在提交訂單時勾選「號碼保護」，開啟后商家及騎手只能看到隱藏四位數(shù)的手機號碼，聯(lián)絡(luò)用戶時需要通過第三方號碼平臺進行中轉(zhuǎn)，并在訂單完成一定時間后失效。
號碼保護給用戶帶來的好處是十分明顯的，再也不用擔心外賣單隨意丟棄會泄露地址、手機，或者與商家、騎手出現(xiàn)糾紛時可以避免被通過手機號碼騷擾。
美團外賣免費向所有用戶提供號碼保護服務(wù)，讓用戶使用產(chǎn)品時更加放心，有助于提升對該品牌的信任感。
匿名評價
美團外賣于 2014?年左右上線初期就已支持匿名評價功能，主要是為了讓用戶提供更加真實的評分、內(nèi)容。
用戶對已完成的訂單進行評價時，騎手評價是始終匿名的，而商家評價則可以選擇是否匿名。而更加貼心的是，如果用戶對商家給出兩星以下的差評，則匿名評價會自動勾選。
該功能與號碼保護相似，主要在于保護用戶的隱私，并在一定程度上提高了用戶評價的真實性。
騎手拉黑
美團外賣于2018年6月份推出騎手拉黑功能，用戶可將服務(wù)體驗較差的騎手拉黑，之后該騎手將不會接到該用戶的訂單。
此舉可提升用戶的使用體驗，避免重復(fù)碰到態(tài)度惡劣、道路不熟的騎手。同時也可反推騎手提高服務(wù)質(zhì)量，避免被多人拉黑而少接單。
由于簡書文章字數(shù)限制，本報告全文分為三個章節(jié)發(fā)布。這是第二章節(jié)：產(chǎn)品設(shè)計。
其他章節(jié)內(nèi)容請進入我的作者主頁查看，謝謝。
微博：@逸宏
個人博客：www.liyihong.com
微信公眾號：逸宏部落 ( LIYIHONG_COM )?
