APP 設計-Cook Idea

此作品使用於:食譜查詢、撰寫、發表&食材採買清單
製作工具:Figma、Photoshop、Xmind
專案動機:
契機-平時熱愛下廚,喜歡嘗試不同料理
構想-想製作一個App集結料理資訊,包含搜尋食譜、採買食材清單、發表食譜(紀錄);或是有相關的料理文章可以閱讀。
出發點-考量到使用者多為女性,以橘色為基礎色,設計上包含社群和留言功能,讓使用者可以相互交流。

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在上課過程中幫忙我追蹤進度,崔崔在專案期間幫忙我安排時程;還有最重要的小幫手,總在第一時間將我的需求傳達給對應的人,非常的感謝。
最後,我想對一年前的自己說: 謝謝你當初勇敢的踏出第一步^^
專案網址:

Comentarios