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

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

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

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

高低保真对比原型展示

部分高保真原型预览

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

高保真组件库展示

利用组件库搭建页面

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

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

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

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

资源地址

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

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

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

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

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

文/WOOSEVELT（知乎专栏：xiaopiu工坊）