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