美食类App「下厨房」原型分享

原创文章 分类: 教程 版权:
1595 11 4 0
2018-01-02
1.3

随着互联网发展和电视美食节目的推广,越来越多的人更加喜欢追求美食,并了解多样的各地不同美食。也因此不少美食类app兴起,如美食制作教程、美食制作直播、学习交流心得、在线商城购买食材使得美食行业发展地更加多样。做饭已经从单纯解决温饱慢慢发展成人们生活品质的追求方式。

美食类app不仅要考虑内容的质量,还要考虑其页面的视觉交互和功能。本次分享的是美食类app中较受欢迎的「下厨房」,「下厨房」的交互界面简洁,设计使用了线性图标搭配纯色,页面干净扁平,整体色调清新,在提供菜谱和食材购买渠道的同时,舒适的交互体验增加用户亲近感。

原型包括「首页」、「市集」、「收藏」、「信箱」、「个人」等一级页面,「菜谱分类」、「分类列表」、「他人主页」、「菜谱详情」、「分类详情」、「上传」、「创建菜谱」、「菜篮子」、「一键买齐」、「购物车」、「交易成功」等次级页面,提供了创建菜谱和一键买齐的操作流程。

本次原型试用了xiaopiu刚发布的新功能「引用组件」,更新的「引用组件」功能使得分类列表更容易修改和复用,制作原型时排版更方便,版式更规整,更提高了制作原型的效率。做美食类app的小伙伴不要错过这次的原型~xiaopiu的新老用户们都赶紧试试新功能吧~!


高低保真对比原型展示

Image title

部分高保真原型流程预览

Image title

点击手动预览高保真原型→ xiaopiu - 下厨房高保真原型


高保真组件库展示

Image title


利用组件库搭建页面

在精选广场的组件库里搜索 下厨房,在搜索出的组件库右下角点击「引用为我的公用库」

Image title

或直接点击 xiaopiu-下厨房组件库

然后点击右上角的引用按钮~

Image title

如上图所示,点击引用后,组件库即成为自己的引用资源(库内的资源也会实时更新),大家可在项目中使用,快速搭建自己的页面,如下面搭建一个创建菜谱页面:

Image title


资源地址

高保真原型地址→ xiaopiu-下厨房高保真原型

低保真原型地址→ xiaopiu-下厨房低保真原型

高保真页面库地址→ xiaopiu-下厨房高保真页面库

低保真页面库地址→ xiaopiu-下厨房低保真页面库

高保真组件库地址→ xiaopiu-下厨房高保真组件库


其他资源分享

更多资源详见专栏:xiaopiu工坊

或直接访问我们的网站:xiaopiu-精选广场



欢迎大家对我们的原型提出建议,对后面分享内容有哪些期待和想法也可以跟我们交流哟!_(:⁍」∠)_


xiaopiu

xiaopiu.com - 优雅高效的在线原型设计平台

1200粉丝/0关注

好为人师小有名气小有见解
用户反馈流程系列—评价、评论流程Vant移动组件库(有赞)原型资源分享

xiaopiu

xiaopiu

xiaopiu.com - 优雅高效的在线原型设计平台

好为人师小有名气小有见解

扫描二维码
去手机端查看海报

xiaopiu

TA已经获得5枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN