交互设计分析饿了么APP（交互设计分析实例）

1.产品版本信息

饿了么App，v5.1.1，Android

2.产品简介

饿了么的自身定位是连接“跟吃有关的一切”，其实现在给人的印象就是一款网上订餐APP。用户可以通过它可以查看选定位置附近的餐厅，选择自己想要的美食，选择好支付方式后，下单预订等待外卖送达即可。

3.用户分析

注：在此只是推测，实际工作时需要进行用户调查才最为准确。

3.1目标用户群

主要是一群比较宅、比较懒或没时间出去的学生和白领。

3.2角色模型和用户目标

角色模型一：王鑫，21岁，大三学生，经常宅在宿舍玩游戏，看电影，要上课点名时他才很不情愿地出宿舍楼。

用户目标：快速订餐；快速送达；菜品种类多，有自己喜欢吃的；有优惠更好。

角色模型二：张丽雅，25岁，公司白领，过着稳定的朝九晚六的上班生活，有时周六还要加班。周末偶尔出去逛逛街，但一般都是宅在家里，刷微博，看电影、电视剧、综艺节目，跟朋友用手机聊聊天。用户目标：菜品种类多，有自己喜欢吃的；价格实惠；最好有优惠；快速订餐；快速送达；

3.3情景剧本

注：以下为日常最主要的情景剧本，在情景剧本的基础上结合其他因素，进行需求挖掘和产品功能的配置。另外还有关键线路场景剧本和验证场景剧本，在此不列出了。

张丽雅：

剧本（1）：周六，今天不用加班，张丽雅一觉睡到10点多，醒来后还赖在床上玩手机，快到11点时，打开饿了么，这次想换个新的外卖吃，于是到处浏览了一下，看到其中一个外卖好像很好吃的样子，看了一下价格，不贵，看了一下送达时间，40分钟，看了看评价，还行，于是预订下单了，下单后发现还能发红包，于是顺手就往群里发了，自己也顺便抢了红包。然后就起床洗漱，40分钟后外卖送到了，张丽雅打开一看确实不错，于是，她高兴地拍了张照片，吃完之后，感觉味道也很棒，于是点开评价，给了好评。

剧本（2）：星期天，11点多了，张丽雅打开饿了么订餐，突然想吃前一阵吃过的一个外卖，但是由于吃过很多种外卖，所以外卖名称具体叫什么忘了，也不记得餐厅的具体名字了，只记得餐厅名里有一个”仙“字，于是她通过这个信息很快找到了那家餐厅，最后找到了那个外卖。

剧本（3）：周末，张丽雅正在看《奔跑吧兄弟》，间隙，她看了一下时间，快到饭点了，于是赶紧打开饿了么，迅速订了一个之前收藏好了的外卖，然后继续看《奔跑吧兄弟》。

剧本（4）：张丽雅觉得餐厅官方的图片都不太真实，有的餐厅又没上传菜品的图片，于是她去看了网友拍的照片和评价，发现了几个看起来不错的菜品，于是收藏下来了，并分享给了好友，同时预订了其中的一个，半个多小时后外卖送到了，张丽雅拍照并快速评价了，因为她评价后又可以多赚一些积分，到时后可以兑换商品。

剧本（5）：周一中午11点，张丽雅在公司上班，今天她不想下楼吃了，于是她打开饿了么定了一份外卖，几十分钟后，外卖送上来了。

剧本（6）：下午下班了，今天张丽雅想订外卖在家吃，于是在下班的路上，她订了外卖，选好了送达时间，她到家后没多久，外卖也送到了。

王鑫：

剧本（1）：上午没课，宿舍，王鑫正和室友激战打DOTA，又一局结束了，王鑫看了看时间，快到中午11点了，”11点了，订餐订餐，你们吃啥？咱们今天拼盘AA。”王鑫问室友，然后给他们“发菜单”，大家各自选好了，王鑫下单了，然后继续DOTA，半个多小时后外卖到了，大家开吃，吃完后王鑫继续玩游戏。

剧本（2）：又快到饭点了，这次有人想单点，于是就没拼盘了，王鑫照样给“发菜单”，大家各自选好了，王鑫下单了，半个多小时后外卖到了，大家各吃各的。

4.需求列表

注：有的PM或需求分析师可能会给出较详细的需求；有的可能只给出粗略的需求。不管哪种情况，交互设计师都需要自己分析细化，梳理一遍。这里不做列表的形式，为了方便拆解分析产品，作者做了需求/功能梳理图，虽然形式不同，但同样都是罗列出全部的需求。

此需求/功能梳理图重点是把大大小小的需求/功能全部梳理出来，此阶段并不纠结于组织结构，组织结构的工作是信息架构阶段重点做的。此处用的是思维导图的方式梳理，（虽然乍一看比较杂比较多，但在作者用导图梳理信息时感觉很方便，同时也为下一步做信息架构图做了铺垫），工作交流时可能要变换成表格形式或普通文本形式。

需求功能梳理-饿了么-显示1级结构：

需求功能梳理-饿了么-显示2级结构：

么-显示2级结构

需求功能梳理-饿了么-显示全部结构：

5.信息架构

上阶段的需求/功能梳理图把需求/功能基本弄清楚了，本阶段的工作是组织，当然也还有暂时不能确定层级关系的，需要等页面框架阶段来确定。

信息架构图-饿了么（-无需求说明）-显示1级结构：

信息架构图-饿了么（-无需求说明）-显示2级结构：

信息架构图-饿了么（-无需求说明）-显示全部结构：

6.主要流程图

流程图有好几种，以下为主要的任务流程图（叫法各不相同，但是这个意思）：

流程图

7.线框图

典型页面的线框图（内含了一个主要的操作流程）：

8.值得学习 和 需要改进

8.1值得学习

1.信息过多时，隐藏，逐次呈现：

饿了么餐厅列表页最多显示2个活动，多余的折叠隐藏起来。信息过多时，运用逐次呈现的方法，减少页面信息量，值得学习。

2.多信息量的布局：

A.文案尽量精简：根据用户已形成的习惯认知，“距离”“时间”之类的标题、

评论人数的单位等都可以省略，不然会给视觉设计造成额外的压力，用户也会反感繁杂的无用信息；

B.用3行式布局：信息行数最好不要超过3行，不得已有4行的话，可以学习饿了么用分隔线；

C.标签：如“票”“保”“付”等，一些常用的文字项目可以精简为标签的形式，标签的形式也更直观、生动。

3.文字标签：

文字标签+说明的形式，既方便用户快速识别活动，又可以说明清楚活动的内容。

4.文案，logo：

“logo+饿配送”：按传统的做法，纯文字则为“饿了么配送”，视觉上稍长。“logo+饿配送”，则简洁有力，同时能快速识别，有logo比纯文字更悦目。

5.星评，评价数：

饿了么：星评+评价数，等待时间+距离；而百度外卖：只有星评，只有等待时间。这个需要看用户研究结果（用户的期望）而定。

饿了么的做法给人感觉更专业，也更可信；而百度外卖虽然去掉了一项信息，信息量上更简约，同时给视觉设计压力更小，但是给人感觉不够可信。（另外，百度外卖的最终视觉效果也不咋地，而饿了么多了信息量，视觉也做的很不错。）

6.快捷入口，首尾都有，进入全部：

用户在刚浏览推荐列表时，就可以进入“全部餐厅”；在推荐列表尾部也设有“查看全部”，很方便。

7.半屏下拉弹窗：

饿了么没有把展开的下拉弹窗铺到屏幕最底部（可以滑动查看更多隐藏内容，见滑动条），这样的好处是：用户不会感觉又进入了“另一个房间”，尽量减少信息的深度，降低用户的信息焦虑。

8.四个层级分类，一个页面展现：

巧妙利用侧边栏的布局，将4个层级的信息放在一个页面上就展示完了，方便用户直接看到最下一级的信息。

9.列表区，整页式，标题悬浮固定：

A.菜品列表区为一个整页式设计，这样的好处是用户可以一直浏览，不用再点击左侧的分类（用户浏览到哪个类别，侧边栏自动切换到那个类别为选中状态），尤其当某个分类下的菜品数较少时，这个设计的优势体现得更为明显；

B.交互细节：用户向上滑动列表时，列表区的标题行悬浮固定显示，方便用户随时掌握所在的类别区域（虽然左侧也可以看到分类名，但是两者信息内容不同，还是有必要采用这样的标题浮动形式）；

C.热销榜和好评榜：将这2个类别整合进普通的菜品分类里，整个页面信息结构更整洁；但是这2个类别毕竟不同，所以a.在类别名称前增加icon；b.没有和下面的普通菜品连成一体，滑到底部就滑不动了，提示用户该类菜品和普通菜品是有区别的。

10.公告，特定情形下的用户目的：

用户向上滑动列表时，公告也跟着往上移动（被遮住了）。这个细节很有必要，因为用户向上滑动列表时，TA此时的目的是浏览菜品，因此，公告仍然浮动在页面上便没有什么意义了，反而占用宝贵的屏幕空间。另外，公告是滚动形式的，很显眼，用户刚进入该页面时，会注意到该处有公告。

这个细节的启示：要注意思考用户进行某个操作时，TA这时的目的是什么（当然也要知道深层的用户的目标）。凡是与该目的不相关的，能隐藏就隐藏，以便节省屏幕空间来显示更重要信息。

11.交互动效，视觉引导，加入购物车：

加入购物车时的这种交互动效很经典（当然也很普遍）很很棒，将2处的变化（购物车和添加按钮）联系起来了，生动并且直观，同时在视觉上引导用户注意购物车的变化。

12.布局，相同位置，不同情况不同显示：

底部的购物车工具栏，相同位置，在不同情况时，有不同显示：”￥30起送“，“还差￥20起送”，“确认美食”。另外，虽然前2者跟第3者性质不同，但是3种情况只会出现其中一种，因此不妨把它们“合并”放到相同位置，节省空间便于其它元素的布局，并且也不妨碍用户理解和使用。

13.添加，删除，数量显示：

A.增加”删除“按钮，并直接放在”添加“按钮旁边。用户可以轻易修改数量，而不用进入购物车页面修改了。非常直观易懂也非常方便；

B.在侧边栏的类别上也显示数量，用户可以清晰地知道各个类别点了几份，考虑周到。

14.修改数量：

A.变输入为选择：提供常用的数字选项（不常用的就在下面输入），用户直接点击即可，方便用户添加数字，而不需要用”憋屈“的键盘输入。体现了”减少文字输入“的思想；

B.将”删除美食“整合到列表里，页面布局更简洁。

15.图片，头像信息，布局：

将头像等信息放在图片上，既可以表示是该用户发的照片，又可以让评论内容区信息更简洁；

16.视觉顺序，重要度，评价人：

在评论区，用户最关心的是评论内容，”评价人“不重要，所以放到后面，星评等用户关心的信息放到前面。（视觉顺序是从左到右，从上到下）。虽然头像等信息放在右边，用户会有些许不习惯，不过总体利大于弊。

17.未注册时，注册登录合二为一：

对于尚未注册就进行登录的用户，饿了么自动创建新账户（并且登录），而不需要进入另外的注册页面。a.允许用户犯错；b.将注册登录2个步骤合二为一，非常人性化，非常智能！！

18.列表（信息）分组，帮助理解：

将列表分组归类，帮助用户理解信息，同时在视觉上也产生了变化，减少单调枯燥。

19.选择代替输入：

a.提供常用的文字条目让用户可以直接点击，而不需要键盘输入，非常便捷、非常贴心！

b.悬浮标签栏紧贴输入键盘的交互细节也值得学习，不会被弹出的键盘遮挡，也更容易理解。

20.星评，文案，智能地变化：

很有意思的交互细节：给出的星数不同，相应的星星状态和提示文案也智能地变化，”极差，失望，一般，满意，惊喜“。这种方式非常值得学习！！

8.2需要改进的地方

1.重复红包，无事先提醒：

发的是同一个红包时，应该提前提醒 or 不显示发红包，但是系统没有事先提醒，容易导致用户犯错。

2.点击瞬间无反馈，选中项：

点击的瞬间，用户的视觉还停留在点击的地方，但是这时没有及时给出反馈（即没有给出选中项上的反馈）。虽然页面在发生变化，但这个变化向用户传递的信息只是：程序已经在执行命令了，但是至于选中了什么，不好意思，你还得看其他地方（筛选栏）！

关于选中项的反馈 跟下面是一个道理：点击列表页的某行条目，某行条目背景颜色会发生变化，以表示用户的点击是有效的。饿了么既然在点击列表瞬间有反馈，为什么在点击选中项不给用户反馈啊？！

3.购物车，页面跳转，清空购物车：

A.点击购物车工具栏，跳转到新页面（美食篮子页面）。缺点：”进入了另一个房间“，增加了跳转层级。