UI/UX 設計-林O蓉-食譜APP
- Tw Tedu
- 2021年10月8日
- 讀畢需時 2 分鐘
已更新：2022年3月14日
APP 設計-Cook Idea
此作品使用於：食譜查詢、撰寫、發表&食材採買清單
製作工具：Figma、Photoshop、Xmind
專案動機：
契機－平時熱愛下廚，喜歡嘗試不同料理
構想－想製作一個App集結料理資訊，包含搜尋食譜、採買食材清單、發表食譜(紀錄)；或是有相關的料理文章可以閱讀。
出發點－考量到使用者多為女性，以橘色為基礎色，設計上包含社群和留言功能，讓使用者可以相互交流。
ＡＰＰ呈現：
主頁 Home
食材／食譜
料理文章
留言展示
Sign Up ／ Log in
個人檔案
購物清單
(APP 介面設計 Cook Ideas)卡片元件
(APP 介面設計 Cook Ideas)專案元件庫
重點技術：
導航列Icon 製作
以形狀(長方形、圓形、鋼筆)繪製出對應的圖樣，在結合布林群組功能合併圖層，得到不同的Icon。 ex.主頁、搜尋、發布食譜、購買清單、個人頁面
Component元件&Variants製作
使用Component功能，讓元件可以有彈性的調整空間，加上Variants的功能，讓元件可以自由地轉換狀態。 ex.狀態欄的五種狀態變化
Auto layout的設置
使用Auto layout功能，讓畫面的間距保持一致，達成畫面整齊的效果。也可以在交付給工程師時，方便有相同的間距設置。ex.當季食材頁面
Prototype: Overlay製作
使用Overlay功能，可以製作彈跳出來的視窗和製造黑底的遮幕效果
ex.刪除清單的確認視窗
專案心得＆回饋
在這一年之間從最基礎的PS、AI到基礎的網頁架構撰寫，一開始我還不敢直視複雜的軟體和程式(笑)到一步步跟著影片中老師的教學，摸索出如何操作每個軟體的方法。
除了在練習中收穫到許多不同的撇步，更喜歡學習到新事物，腦中想著"哇~我又Get到一個新技能"的自己。
專案的發想比較像是把對烹飪的熱愛實現在設計的世界裡
謝謝Meloeo老師總是用最快的速度回答我的問題、Uta在上課過程中幫忙我追蹤進度，崔崔在專案期間幫忙我安排時程；還有最重要的小幫手，總在第一時間將我的需求傳達給對應的人，非常的感謝。
最後，我想對一年前的自己說: 謝謝你當初勇敢的踏出第一步^^
專案網址：
Comments