麦当劳自动点餐系统案例分析(2)

我所定义的几个主要需求：

• 关于一个物品面临分类重叠时，如何去组织；
• 食物个性化选项如何简化；
• 当用户想退回上一步选项或回主页时，如何让用户得到清晰的指示；
• 为了节省用户等待时间，如何将支付变得更加效率。

低保真线框图

根据我之前所绘制的草图，我做出了以下的线框图。

我根据自己的观点提出了优化后的系统，旨在让用户感觉更舒服，而且更加美观，这也会帮助我在整个流程中发现并更正问题。

重复测试线框图

我创建了更多相同类型操作的版本来进行比较：

• 主菜单
• 食物种类选择的展示
• 甜品／配餐的选择
• 食物信息界面
• 饮料个性化选择

主菜单比较

我将“完成(Done)”菜单去掉了，因为它并没有承载任何有意义的动作。只有在更新订单、加入列表的情况下，该菜单才会出现。

食物种类选择展示方式比较

更加有组织，而且更注重用户新划动出来的选项。

甜品／配餐的选择

做出了3个版本，但最后我选了最后一个（最右边那个）。因为左边两个都有些不必要的空白，用户会因此看不见其他的内容。

食物信息界面

左侧的这一个图，和目前麦当劳门店使用一样。一开始我觉得继续使用不更改也没有问题，直到我测试后发现，其实这里根本不需要两种不同的按钮（定制 customize／修改 change options），其实它们都是引导向同一个界面。

于是，我把这两个按钮合并成了一个，去掉了修改按钮，留下了定制按钮。点击后，新弹出的界面都可以调整尺寸和细节选择。

饮品个性化选择

（在设计高保真图时，这个想法最终被废弃了）这个部分是我最新设计的该界面，是所有版本里最流畅的。

在之后的高保真原型图设计中，最初的线框图被废除。这是因为它并不支持饮料的温度选择，并且中间有过多的页面过渡。

新版本的设计使得用户可以在一个界面里，完成所有的饮料个性化选择。

高保真设计图稿

我从麦当劳官方网站中汲取了它的主题颜色，并以此设计了一个新的样式。

在整个高保真原型图稿过程中，我所使用的软件是 Sketch，然后导入到 Figma（共享原型更容易）。

欢迎主界面

由于我找不到比较好的“堂食（Dine In）”／“打包（Take Away）”的图标，我只好自己用 Sketch 画了一个。

另外，我把“语言选择”选项移到了最右上角。

主界面／餐品选择

我把单个餐款用卡片的形式表达，并且给被选中的项目添加了黄色高亮边框。此外，我也在屏幕右上角添加了一个搜索栏。

饮品个性化选择

如我之前所提到的，这个部分完全替换了之前低保真的版本。客户会看见他们预选择的饮品，并可以随心改变选择另外一个。随后有一个确认按钮出现，指示出来这里有一个改变发生。

甜品／配餐选择

当用户只想点甜品或者配餐的时候，他们就不会看见一大堆没有必要出现界面。他们只需要选择他们想点的物品，因为有些物品并不需要任何个性化选择。

订单列表&付款选项

为了能表达更加清晰的信息，我改变了一些按钮上的文字。我也把付款列表重新组织分类了，这样就能让用户更清晰意识到有哪些可能的动作会发生。

完成界面（打包或堂食）

（编辑：ASP站长网）