随着互联网发展和电视美食节目的推广,越来越多的人更加喜欢追求美食,并了解多样的各地不同美食。也因此不少美食类app兴起,如美食制作教程、美食制作直播、学习交流心得、在线商城购买食材使得美食行业发展地更加多样。做饭已经从单纯解决温饱慢慢发展成人们生活品质的追求方式。
美食类app不仅要考虑内容的质量,还要考虑其页面的视觉交互和功能。本次分享的是美食类app中较受欢迎的「下厨房」,「下厨房」的交互界面简洁,设计使用了线性图标搭配纯色,页面干净扁平,整体色调清新,在提供菜谱和食材购买渠道的同时,舒适的交互体验增加用户亲近感。
原型包括「首页」、「市集」、「收藏」、「信箱」、「个人」等一级页面,「菜谱分类」、「分类列表」、「他人主页」、「菜谱详情」、「分类详情」、「上传」、「创建菜谱」、「菜篮子」、「一键买齐」、「购物车」、「交易成功」等次级页面,提供了创建菜谱和一键买齐的操作流程。
本次原型试用了xiaopiu刚发布的新功能「引用组件」,更新的「引用组件」功能使得分类列表更容易修改和复用,制作原型时排版更方便,版式更规整,更提高了制作原型的效率。做美食类app的小伙伴不要错过这次的原型~xiaopiu的新老用户们都赶紧试试新功能吧~!
高低保真对比原型展示
部分高保真原型流程预览
点击下方手动预览所有页面和流程↓
高保真组件库展示
利用组件库搭建页面
在精选广场的组件库里搜索 下厨房,在搜索出的组件库右下角点击「引用为我的公用库」
或直接点击xiaopiu-下厨房组件库,然后点击右上角的引用按钮~
如上图所示,点击引用后,组件库即成为自己的引用资源(库内的资源也会实时更新),大家可在项目中使用,快速搭建自己的页面,如下面搭建一个创建菜谱页面:
资源地址
高保真原型地址→ xiaopiu-下厨房高保真原型
低保真原型地址→ xiaopiu-下厨房低保真原型
高保真页面库地址→ xiaopiu-下厨房高保真页面库
低保真页面库地址→ xiaopiu-下厨房低保真页面库
高保真组件库地址→ xiaopiu-下厨房高保真组件库
更多资源详见专栏:xiaopiu工坊
或直接访问我们的网站:xiaopiu-精选广场
欢迎大家对我们的原型提出建议,对后面分享内容有哪些期待和想法也可以跟我们交流哟!_(:⁍」∠)_
原文地址:xiaopiu工坊
作者:王二麻