高保真原型
团队成员
王颖:产品经理;文档撰写;交互原型设计
杨杰:文档撰写;美工设计;交互原型设计
问题以及解决方案
现如今,大学的扩招使得大学生人数暴涨,而学校食堂空间有限,一到饭点便会格外的拥挤。有许多学生便想避开高峰期排队等待以及找座位的烦恼,干脆叫了外卖或是去黑超旁边买了煎饼以及麻辣烫;又有一些学生索性直接吃买好的泡面。然而,不管是外卖也好,煎饼麻辣烫也罢,没有人能完全保障其食品的安全性。
我们的解决方案是研发一个可以在线订餐的微信小程序供师生选择菜品。首先,它有在线点餐功能,通过浏览每个窗口的菜品图片、配料、客户评论等信息,用户可选择自己喜爱的食物,并在下课后到指定地点取餐,免去长时间的等待。其次,用户可以在美食社区中发布美食分享帖,与广大北语人分享自己吃到的美食或是吐槽自己吃到的“黑暗料理”,质量高的帖子还会被封为精品贴放在社区显眼处,所有用户可以评论和点赞。与此同时,用户还可以在社区与厨师们互动留言,通过交流可以改善一些不完善的地方,这将大大拉近厨师与食客的距离,大家可以“零距离”相互交流。这比起平常的订餐 app更加丰富,互动性更高,更适合在校学生使用。
任务介绍
一、简单的任务——基本的点餐功能(点餐、下单、评论等), 满足用户的日常点餐需求
首先登录订餐系统,然后即可进行点餐。可选择点餐楼层和窗口。
用户提交订单后可选择取餐时间(默认或自定义)并完成支付
支付成功并完成订单。
查看我的订单并进行评论
二、中等难度的任务——优化检索功能,菜品配料表
用户可根据配料表所显示内容来决定是否点菜
三、困难的任务——更改学校地址,去其他学校选高分美食
界面设计的修改
通过用户测试,我们对我们的界面进行了稍大修改。小程序更改为三个版面,分别是订餐、购物车和我的。
1. 首页排版微调,底部导航栏新增购物车。让用户更加方便快捷的进入购物车。
2. 删除点餐单页的多余菜单。
3. 详情页排版的修改,因为购物车的位置改变,所以调整了加入购物车的图标。
4. 修改提交订单的地点选择方式。更加符合手机的操作。
使用场景
我们构建了三个场景,直接跟三个任务相关。三个任务分别为:查看配料表并点餐,点餐并在餐后进行匿名打分、评论并给厨师留言,更改学校地址并去其他学校选高分美食。
场景一:
用户想象在我们的食堂在线点餐平台上为自己点一份心仪的午餐。在这个场景,用户需要打开登陆小程序,通过楼层、窗口等的筛选,找到自己想要点的菜品,再点击菜品栏进入到菜品详细信息页面,查看配料表、评论等,确定这是自己想要点的菜后,加入购物车,提交订单,选择好取餐地点和时间后,进行支付。
场景二:
用户想象自己刚刚吃完了所点的餐,想要对其进行评价、打分,并给厨师留言,提出自己的建议。在这个场景,用户通过底部导航栏进入我的界面,找到我的订单,进入后选择评价订单,进行匿名打分、评论并给厨师留言。
场景三:
用户想象自己正在一个陌生的大学里,想在这所大学里食堂吃顿午饭。因为没有该校的校园卡,所以选择使用我们的小程序进行点餐。在这个场景中,用户进入小程序后,在首页的定位处选择学校食堂,之后菜品页面会切换成该学校的食堂的菜品,接着进行和任务一相似的点餐操作。
原型制作工具
我们绘制原型的主要工具是Photo Shop。我们下载了一些部件原型,帮助我们进行图标的设计使用。
图像设计结束以后,我们运用墨刀软件将图像界面整合起来。墨刀软件可以模拟实现界面之间的跳转,且可以设置不同的跳转方式,简洁快速地展现APP的功能,但是由于它不能够实现输入的功能,所以发帖和评论的功能并不能够很好地模拟实现,因此我们的任务中没有提及这两方面的功能。
同样,拍照扫码的功能也只能跳过过程来模拟。
总结
我们的设计原型可以很好地表现我们这款产品的基本功能,当然如果要使用好的话还需要用户不断地进行反馈,从而使产品升级。虽然产品现在还不是很完美,但是我们会努力让它成为一款更加实用的小程序。









