食堂營業中
app設計
01
專案介紹
這項作品為自我發想app設計。“食堂營業中”是一款擁有多樣豐富的食譜應用程式，透過快速的搜尋功能找尋想製作的料理，並搭配詳細的影片步驟教學以及方便的購物清單，讓料理也可以輕鬆簡單、快速上手
02
設計研究
從目前已上架的食譜應用程式中，選擇了“愛料理”以及“Tasty"兩者來做資訊搜集和比較，並標記出優點融入此項專案中
資訊架構
將上述的優點及資訊做了彙整，編輯出“食堂營業中”的架構與內容
工作流程
03
Visual Design
色彩規劃
因自己料理可以讓飲食更加健康、均衡，所以選擇代表蔬菜的綠色做為主色調。在輔色調的部分，則呼應app的名稱“食堂營業中”，以溫暖的黃色燈光做呈現
主色調
#477A7F
背景色
#F8F8F8
#76A9AE
文字顏色
#474B4B
輔色調
#FFC247
字體樣式
應用程式icon
以料理中的鍋子作為主視覺，呈現出食堂營業中的感受，並將右下角以摺頁的方式表現食譜做記號的樣子
Logo設計
以霓虹招牌為概念，將字型筆畫設計出燈管連結的樣式
介面圖示
04
頁面設計
登入頁面
採用google與facebook帳戶方便登入
首頁
在首頁的部份分為“每日精選”與“熱門推薦”兩個部分，而搜尋食譜在此應用程式中為重要且常用的功能，因此讓搜尋欄位在滑動頁面時仍出現於上方
顯示近期搜尋項目
搜尋推薦項目
類別
在類別的部份為因應大量食譜的分類，所以先將類別以飯食、麵食等大方向分類顯示在上方，用左右滑動的方式即可查看更多來做切換。而在選擇分類後，下方則會根據不同的分類顯示不同的細項主題
左右滑動即可查看類別
以插畫的方式呈現，可以與下方的主題照片做區分
點擊主題即可查看食譜列表
瀏覽時可隨時將喜歡的食譜加入收藏
食譜教學頁面
在食譜教學頁面中，可以切換觀看“食材”、“步驟”以及“營養標示”，除了方便查看外，也可以減少資訊過多導致頁面過長
影片下方顯示食譜標籤，可以方便前往查看相同標籤的食譜
更多料理相關推薦
頁面上方放置食譜資訊
完整教學影片觀看
點擊切換內容
食譜下方可以查看留言區
點擊食材旁邊 的加號即可將食材加入自訂的購物清單
購物清單
在清單列表的部分，系統預設會自動依不同的料理生成一個清單，亦可以將多種料理加入同一個自訂的清單中，而內容細項則會將相同食材一起計算出需購買的食材數量
選擇是否要設定購買提醒
在自訂清單中，可以將多種料理統整出每個需要食材的總量
食譜收藏
在收藏頁面中，可以查看帳戶中自訂的收藏類別
顯示不同類別的食譜數量
帳戶設定
