隨著互聯網發展和電視美食節目的推廣，越來越多的人更加喜歡追求美食，并了解多樣的各地不同美食。也因此不少美食類app興起，如美食制作教程、美食制作直播、學習交流心得、在線商城購買食材使得美食行業發展地更加多樣。做飯已經從單純解決溫飽慢慢發展成人們生活品質的追求方式。

美食類app不僅要考慮內容的質量，還要考慮其頁面的視覺交互和功能。本次分享的是美食類app中較受歡迎的「下廚房」，「下廚房」的交互界面簡潔，設計使用了線性圖標搭配純色，頁面干凈扁平，整體色調清新，在提供菜譜和食材購買渠道的同時，舒適的交互體驗增加用戶親近感。

原型包括「首頁」、「市集」、「收藏」、「信箱」、「個人」等一級頁面，「菜譜分類」、「分類列表」、「他人主頁」、「菜譜詳情」、「分類詳情」、「上傳」、「創建菜譜」、「菜籃子」、「一鍵買齊」、「購物車」、「交易成功」等次級頁面，提供了創建菜譜和一鍵買齊的操作流程。

本次原型試用了xiaopiu剛發布的新功能「引用組件」，更新的「引用組件」功能使得分類列表更容易修改和復用，制作原型時排版更方便，版式更規整，更提高了制作原型的效率。做美食類app的小伙伴不要錯過這次的原型~xiaopiu的新老用戶們都趕緊試試新功能吧~！

高低保真對比原型展示

部分高保真原型預覽

點擊手動預覽高保真原型→ xiaopiu - 下廚房高保真原型

高保真組件庫展示

利用組件庫搭建頁面

在精選廣場的組件庫里搜索 下廚房 ，在搜索出的組件庫右下角點擊「引用為我的公用庫」

或直接點擊 xiaopiu-下廚房組件庫

然后點擊右上角的引用按鈕~

如上圖所示，點擊引用后，組件庫即成為自己的引用資源（庫內的資源也會實時更新），大家可在項目中使用，快速搭建自己的頁面，如下面搭建一個創建菜譜頁面：

資源地址

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

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

高保真頁面庫地址→ xiaopiu-下廚房高保真頁面庫

低保真頁面庫地址→ xiaopiu-下廚房低保真頁面庫

高保真組件庫地址→ xiaopiu-下廚房高保真組件庫

文/WOOSEVELT（知乎專欄：xiaopiu工坊）