美团外卖产品分析报告：二 产品设计
美团外卖产品分析报告 - 全文目录
二、产品设计
1 结构
1.1 功能结构
美团外卖产品功能结构图（来源：逸宏使用 MindManager 绘制）
上图使用思维导图的方式，完整展示了美团外卖 App 的功能菜单，按照主菜单可划分为四类。
首页：以分类、优惠等多种形式展示商家，用户可进行搜索、挑选。
闪购：单独展示生鲜超市类商品，区别于首页的餐饮，主推基于周边生活圈的闪购业务。
订单：查看所有已被创建的订单，用户可进行评价、售后、再来一单等操作。
我的：集中管理用户资料及资产，包括地址、收藏、钱包、优惠券等，以及客服中心等入口。
1.3 业务流程
美团外卖产品业务流程图（来源：逸宏使用 ProcessOn 绘制）
上图使用泳道图的方式，分别从消费者、商家、骑手三者的用户角度，模拟展示了美团外卖产品的业务流程。
从中可看出，消费者与商家、骑手之间的流程关系是密不可分的。消费者是触发整个流程的主导者，而商家与骑手则作为服务消费者的角色，三者形成一个完整的业务闭环过程。
美团外卖 登录/注册 流程图（来源：逸宏使用 ProcessOn 绘制）
从流程图可看出，美团外卖的登录、注册方式，基本以手机号码为主。即使使用第三方社交账号登录，也必须先绑定手机。
主要原因在于，美团外卖的用户是以手机号码为基准，一个号码对应一个用户，这样既能保证用户的真实性，也可减少刷单、刷评论等现象。而且，同一个账号是允许在多台终端同时登录的，用户资料及购物车等是支持实时同步的。
因为手机号码是点单取餐的必备条件，所以无论从用户或产品角度，使用手机号码都是十分合理且自然的选择。
2 设计
2.1 设计风格
美团外卖 App 界面设计（来源：逸宏使用 Axure 绘制）
美团外卖 App 界面以橘黄色为主色调，并贯穿整个产品设计。除了底色、图标、文字，还配合可爱的袋鼠形象、骑手服饰等，整套色系已深入人心，可以说是非常成功的 VI 设计案例。
作为一款外卖产品，设计核心围绕在如何更优的展示商家，并引导用户进行点餐下单。页面中部位置用于显示商家与餐品，搜索、设置、消息中心等功能置于顶部，而底部则为固定的菜单导航栏。操作方式以上下划动、单点选择为主，偶尔配合左右滑动作为辅助展示。
2.2 产品原型
美团外卖产品中保真原型图（来源：逸宏使用 Axure 绘制）
上图使用 Axure 软件，以倒推的方式，绘制了美团外卖 App 的中保真原型图，以便展示产品界面的设计细节。
原型图以灰度为主，并以彩色线条表示不同页面之间的流程关系，以蓝色注释讲解其中的交互设计关键点。
2.3 操作界面
登录
美团外卖「登录/注册」示意图（来源：逸宏使用 Axure 绘制，下同。）
前文已经提到，美团外卖的登录与注册方式，均以手机号码为主，从界面设计也可以明显看出这一点。
美团外卖「我的账号」示意图
账号的退出方式，则放在二级入口「我的-我的账号」中，因为一般用户不需要频繁切换账号，较少用到。
游客
美团外卖「游客界面」示意图
在美团外卖 App 中，新用户在未登录的游客状态下，仍然可以使用大部分操作，比如浏览商家、点选商品等，地址默认使用系统匹配的附近地址。直到超过限定范围，触发了必须登录才能使用的功能，那么界面则会提醒用户登录或注册。
上图展示了美团外卖中会触发登录提醒的操作，比如消息中心、购物车、个人信息、地址管理、订单结算等功能。这样的设计，对新用户更加友好，便于初次使用时的探索了解，直到产生下单需求时再引导注册登录。
点餐
美团外卖「商家入口」示意图（来源：逸宏使用 MindManager 绘制）
作为一款在线外卖产品，功能核心自然是点餐下单，所以对于商家的展示、点餐过程的引导，则至关重要。
从上图可看出，美团外卖对于如何引导用户做了非常多的功课，几乎所有操作都成为了商家页的入口。
内容上不乏带有诱导作用的优惠信息，用来增强用户下单的欲望。同时，还提供了很多便于用户搜索、筛选的工具，以便提高下单的效率。
美团外卖「点餐过程」示意图
用户进入商家页后，可进行挑选、下单、付款等操作，示意图完整演示了用户从进入商家到完成支付的全过程。从中可发现，美团外面界面的设计逻辑非常清晰直观，即使是新用户的学习成本也相对较低。
用户在商家页挑选商品时，可以随意加减数量，并实时看到经过计算的实际总金额。而且，会贴心的提醒用户是否满足当前商家的满减优惠，还提供了「满减神器」帮助用户快速下单。挑选完商品，可以通过下方购物车进行二次确认，直观的展示已选商品及总价，确认无误后再结算。提交订单后，会再次具体的显示商品的价格公式，包括包装费、配送费、优惠红包等加减细节，详尽而不显罗嗦。在订单页，用户可以进行选择红包代金券、填写备注、选择餐具、开具发票等操作。最后完成付款，并跳转至订单详情页。
3 交互
3.1 体贴的功能
本小节中提及的便捷功能，是美团外卖产品设计中的亮点。在贴合产品核心功能的同时，既提高了用户的点餐效率，满意度提升，又促进了消费。
美团外卖「满减神器」示意图
满减神器
在商家页的左下角，有一个「满减神器」的功能，供用户快速选择符合满减要求的餐品，与「凑单提醒」相辅相成，相较更加直接有效。
满减神器会自动列出，当前商家中符合满减优惠的最优餐品组合。实现逻辑也非常简单，主要是通过商家历史订单，排列出被购买次数较多的组合。
由于满减优惠在外卖平台中已成常规活动，几乎所有商家都有力度不同的优惠，点餐时相当考验用户的数学能力。而美团外卖推出该功能，正是想用户之所想，为用户省去了凑单的时间，极大的提升了点餐效率。
美团外卖「订单页面」示意图
最近常买
订单页面的顶部，用户已消费过的商家按次数从高到低排列，形成最近常买的商家列表。便于让用户快速找到，减少查找时间。
从用户角度来看，消费次数居高的商家，通常是比较喜欢、经常会关顾的商家。
相似商家
在订单列表中，已完成的历史订单，可通过「相似商家」查看与该商家相似的其他商家，主要是通过位置、品类、价位等因素综合筛选。
通常是用户喜欢该商家的餐品口味，但由于某些原因希望更换其他商家，就需要用到该功能，特别是对于重度用户来说尤其重要。
再来一单
在订单列表及订单详情中，均有「再来一单」按钮，其功能类似于重新购买。
用户点击后会跳转至该商家页面，并自动将历史订单中的相同餐品放入购物车。如有其中有缺失的餐品，会加以提示。当用户想要重复点选之前的餐品，或只是进行细微调整，就可以通过简单的操作快速完成点餐。
除了适合用户再次重复点单，以及没有时间挑选餐品的场景。同时，当用户点错单并取消后，也可以使用「再来一单」重新添加，再到购物车中调整修改。
3.2 便捷的入口
美团外卖「地址入口」示意图
地址入口
美团外卖的商家展示，是以用户当前地址为判断基准的，必须在配送范围内才会展示，同时用户地址也是骑手送餐配送的关键信息。因此，如何引导用户填写地址信息，并确保选择正确的地址，是较为重要的核心功能之一。
如上图所示，美团外卖主要提供了三个入口供用户对地址进行选择、编辑，分布在首页、提交订单、我的地址三个页面中，分别对应了下单前、下单时、下单后三个流程。
美团外卖「评价入口」示意图
评价入口
作为一款贴近民生的在线外卖产品，用户对于商家、骑手等服务的评价显然是非常重要的数据，上图展示了美团外卖中的多个评价入口。从示意图可看出，当前订单完成后，同时会有三个入口在提醒用户进行评价。如果在订单完成时，用户没有及时评价，之后再回到订单页仍会看到评价按钮，并且还单独设有「待评价」的分类。
评分机制可以促使商家、骑手提升自身的服务质量，商家一般会根据评价内容对餐品加以改进，而骑手为了收到好评也会更加主动服务态度。同时，平台还可以利用用户评价作为产品优化的数据支撑，从而共同作用于整个产品质量及使用体验的提升。
在积极引导用户评价的同时，还需要保证用户评价的真实有效性。除了前文提到的，以手机号码注册的方式加强用户的真实性，还限制仅能在订单完成的 7 天内评价，且评价后超过 7 天也无法再追评。因为间隔一段时间之后，用户对于外卖口感及服务体验可能产生偏差，或者受到其他因素干扰，最直接的评价应该在一周内。而这些评价内容，也会统一归入「我的评价」中，方便用户再次查看管理。
美团外卖「消息中心入口」示意图
消息中心
如图所示，用户可以在大多数页面的右上角找到「消息中心」的入口。里面集合了所有的通知类及沟通类内容，包括商家代金券、系统通知、客服消息、好友消息等。
根据实际场景可发现，用户在沟通的过程中经常需要返回进行其他操作，而「消息中心」的多入口设计，正是方便了用户的来回切换。
美团外卖「客服入口」示意图
客服入口
当用户在使用产品的过程中碰到问题，首要选择自然是在线客服，上图展示了美团外卖 App 中多个客服入口及界面设计，主要入口位于「订单」及「我的」页面。
由于外卖产品的异常问题大多与订单相关，所以「订单详情」的页面入口更为常用。对此，根据订单或状态的不同，用户进入在线客服的页面内容是有所差异的。结合示意图举例，同一个订单在「配送中」与「已完成」两个状态下显示的内容是不同的。
这样处理的目的，一是为了简化用户的操作，利用大数据预测当前需求；二是将用户引导至正确的解决渠道，比如直接联系商家或骑手，从而减轻人工客服的成本压力。
3.3 用心的交互
美团外卖「购物车」示意图
购物车
美团外卖 App 中，只要在用户已登录的情况下，已勾选的商品都会一直保留在「购物车」中，可以随时轻松找回，我将其称之为「购物车保留原则」。
用户点选过的商品必然是经过各种因素考虑的，即使当下不会立即下单，但随时能找回来是很关键的，给予用户一种「永远呆在购物车等着」的安心感。对于一款在线外卖产品来说，这是用户体验中至关重要的一点。
用户在任何商家挑选过的商品，都会在「购物车」内集中展示，并非常直观的将价格、配送费、满减优惠写明。如果出现商家休息、商品缺货等异常情况，还会加以提醒（如图中）。用户可随时在购物车内二次挑选、比较，再进行下单结算。结算后的商品自然会清除，但仍可在历史订单中看到购买过的商品。
同时经过实测发现，即使在断网、闪退、没电的极端情况，购物车内的商品也不会丢失。但如果是游客状态，购物车则不会永久保留，因为用户数据是跟随账号在线存储的，并支持实时同步于多个终端。
美团外卖「订单状态悬浮窗」示意图
订单状态悬浮窗
如图所示，用户若当前有订单处于进行时，在页面右下方会出现一个置顶的悬浮窗，用以显示订单的实时状态。
在「首页」、「订单」、「我的」三个主页页面中，都能看到该悬浮窗。用户点击后会直接进入该订单的详情页，方便随时了解当前的动态，比如骑手送到哪了。
结合图示可看到，根据订单状态的不同，悬浮窗的提示也会随之变化。悬浮窗会在用户提交订单后出现，而一旦订单完成（配送完成）即消失。
美团外卖「选择并展开」交互示意图 （来源：逸宏使用 Axure、Fireworks 绘制）
选择并展开
如上图所示的交互动作，当用户选择「待评价（或退款）」时，页面会在切换的同时全屏展开并置顶菜单。这是比较符合用户直觉的交互设计，实际操作令人感觉一气呵成。
在这个状态下，用户的「点击」行为代表了「切换并查看内容」的意图，所以全屏展开更利于用户的浏览，避免其他无关内容扰乱视觉。同样的交互设计，还出现在了首页的筛选功能、活动页面的分类菜单等。
美团外卖「悬浮控件」示意图（来源：逸宏使用 Axure 绘制，下同。）
悬浮控件
美团外卖 App 中最常见的悬浮控件，主要是首页（或闪购）的「购物车」，以及订单详情页中的「红包」。
两个悬浮控件虽然性质类似，但在操作上略有不同。结合上示示意图，针对两者分别作简单分析。
购物车：当打开首页（或闪购）时，「购物车」控件的初始状态是完全显示的，以突出其功能位置。当用户划动页面的时候则呈透明状并收入边栏，避免阻挡内容。而如果停止划动，则会恢复完全显示的初始状态。
红包：初始状态同样为完全显示，划动时也是呈透明状并收入边栏。与购物车的区别在于，当停止划动时控件为隐藏状态，且可自由拖动。
「红包」控件是可以自由拖动的，且在停止划动后不会再次完整显示。如此设计可以尝试理解为，假设用户在订单完成后初始没有分享红包的意图，则之后再分享的可能性极低，所以控件只需保持「乖乖呆在角落且需要时也能找到」的状态即可。控件允许自由拖动，则避免了悬浮控件容易遮挡住页面关键信息的情况，比如当订单详情页需要截屏（分享、投诉）的时候。
3.4 适时的提醒
在适时的时刻给出适当的提醒，告知用户关键的必要信息，可避免因信息不对称而影响用户的使用体验。并且，提醒的时机及方式也相当重要，一旦过于突兀或频繁，提醒就会变成骚扰。
以下配合示意图，讲述美团外卖 App 中数个较为典型的例子。
美团外卖「提醒交互」示意图
商品缺失提醒
当用户使用「再来一单」功能，但该商家中的部分商品缺失而无法加入购物车，则页面会明显提示「 XX 商品已售完，并重新选择。」。
便于用户及时了解后，检查购物车并重新选购。避免了用户在不知情的情况下直接下单，造成下错单、订单纠纷等情况。
配送时间提醒
当用户进入商家页，但当前未在该商家的配送时间内，则页面顶部会出现「现在预定，**:** 起送」的配送时间提醒。
明确告知用户，现在如果下单属于预定，以及开始配送的时间。避免用户挑选完商品后才发现无法即时配送，甚至直接下单后商家却没有配送。
另外，如果当前未在商家的营业时间内，页面则会直接提示「本店打烊」，且用户是无法点选任何商品的。
恶劣天气提醒
当用户提交订单时，若系统判断收货地址所在位置有雨天、雪天等恶劣天气，则页面会在配送时间下方给出「恶劣天气下配送可能延迟，请耐心等待。」的提醒。
便于用户提前了解，该订单的配送时间可能较长，若继续下单就意味着默认接受。从而在一定程度上，可以减轻用户等待的焦虑感，并减少投诉、催单等事件。
手机截屏提醒
当用户在任意页面进行屏幕截图时，则页面右侧会出现两个便捷选项，分别为「反馈问题」与「分享页面」。
选择「反馈问题」，会先进入包含马赛克及标记功能的编辑界面，方便用户先行除去截图中的敏感信息，或者标注需要反馈的问题所在。选择「分享页面」，则是微信、QQ 等社交分享按钮。另外，如果是在商家页进行屏幕截图，还会增加「好友拼单」的选项，点击后进入微信拼单界面。
美团外卖「网络异常」示意图
网络异常
当用户手机所在的网络出现异常时，则页面会出现「网络不太给力，请稍候重试」的提示。
从上图可看到，网络异常下的提示非常简单直接，页面会因为无法加载内容而完全空白，并提醒用户重新加载（如左图）。在网络恢复正常后，重新加载即可显示正常页面。
如果是在使用过程中间歇性出现网络不稳定的情况，则当前页面已加载的内容仍可继续浏览，但继续点击就会因为无法加载而弹出提示（如右图）。
3.5 加分的选项
作为对于社会舆论的回应，美团外卖经常会推出一些加分的选项。同时配合公关宣传，对于品牌形象的提升有着直接的影响。
餐具数量
美团外卖于 2017 年 9 月份推出「青山计划」，正式将环保工作提上议程。同时鼓励商家与用户一同参与，减少一次性餐具的使用。
用户可在提交订单时自行选择餐具数量，或者不需要餐具。同时，页面会有明显标识「一起为环保助力」鼓励用户参与，而商家参与活动后则可以点亮环保标识。
此举在一定程度上抵消了外界关于外卖污染的负面舆论，同时也有助于提升美团外卖的绿色环保形象。
号码保护
美团外卖于 2017 年 8 月份推出号码保护功能，提高对用户的隐私保护。
用户可在提交订单时勾选「号码保护」，开启后商家及骑手只能看到隐藏四位数的手机号码，联络用户时需要通过第三方号码平台进行中转，并在订单完成一定时间后失效。
号码保护给用户带来的好处是十分明显的，再也不用担心外卖单随意丢弃会泄露地址、手机，或者与商家、骑手出现纠纷时可以避免被通过手机号码骚扰。
美团外卖免费向所有用户提供号码保护服务，让用户使用产品时更加放心，有助于提升对该品牌的信任感。
匿名评价
美团外卖于 2014 年左右上线初期就已支持匿名评价功能，主要是为了让用户提供更加真实的评分、内容。
用户对已完成的订单进行评价时，骑手评价是始终匿名的，而商家评价则可以选择是否匿名。而更加贴心的是，如果用户对商家给出两星以下的差评，则匿名评价会自动勾选。
该功能与号码保护相似，主要在于保护用户的隐私，并在一定程度上提高了用户评价的真实性。
骑手拉黑
美团外卖于2018年6月份推出骑手拉黑功能，用户可将服务体验较差的骑手拉黑，之后该骑手将不会接到该用户的订单。
此举可提升用户的使用体验，避免重复碰到态度恶劣、道路不熟的骑手。同时也可反推骑手提高服务质量，避免被多人拉黑而少接单。
由于简书文章字数限制，本报告全文分为三个章节发布。这是第二章节：产品设计。
其他章节内容请进入我的作者主页查看，谢谢。
微博：@逸宏
个人博客：www.liyihong.com
微信公众号：逸宏部落 ( LIYIHONG_COM )
