APP 設計-Cook Idea
![](https://static.wixstatic.com/media/969e87_681a18533af74649a16fc67a3c01947b~mv2.png/v1/fill/w_385,h_604,al_c,q_85,enc_avif,quality_auto/969e87_681a18533af74649a16fc67a3c01947b~mv2.png)
此作品使用於:食譜查詢、撰寫、發表&食材採買清單
製作工具:Figma、Photoshop、Xmind
專案動機:
契機-平時熱愛下廚,喜歡嘗試不同料理
構想-想製作一個App集結料理資訊,包含搜尋食譜、採買食材清單、發表食譜(紀錄);或是有相關的料理文章可以閱讀。
出發點-考量到使用者多為女性,以橘色為基礎色,設計上包含社群和留言功能,讓使用者可以相互交流。
![](https://static.wixstatic.com/media/969e87_89e6d806bde34b6cb0e411095d0f75f3~mv2.png/v1/fill/w_344,h_469,al_c,q_85,enc_avif,quality_auto/969e87_89e6d806bde34b6cb0e411095d0f75f3~mv2.png)
APP呈現:
主頁 Home
![](https://static.wixstatic.com/media/969e87_ee0b8df31f4446e4a9bf2d749efb1994~mv2.png/v1/fill/w_375,h_922,al_c,q_85,enc_avif,quality_auto/969e87_ee0b8df31f4446e4a9bf2d749efb1994~mv2.png)
![](https://static.wixstatic.com/media/969e87_2d2bc72a1c974d229845a47eb980d2cb~mv2.png/v1/fill/w_375,h_924,al_c,q_85,enc_avif,quality_auto/969e87_2d2bc72a1c974d229845a47eb980d2cb~mv2.png)
食材/食譜
![](https://static.wixstatic.com/media/969e87_34e157c8da05483ab1066eef3b40e040~mv2.png/v1/fill/w_375,h_812,al_c,q_85,enc_avif,quality_auto/969e87_34e157c8da05483ab1066eef3b40e040~mv2.png)
料理文章
![](https://static.wixstatic.com/media/969e87_da7d7423faf849649f85596ccf67406d~mv2.png/v1/fill/w_375,h_812,al_c,q_85,enc_avif,quality_auto/969e87_da7d7423faf849649f85596ccf67406d~mv2.png)
留言展示
![](https://static.wixstatic.com/media/969e87_7cc211acb99245d28acdf4188017d76a~mv2.png/v1/fill/w_375,h_1018,al_c,q_90,enc_avif,quality_auto/969e87_7cc211acb99245d28acdf4188017d76a~mv2.png)
Sign Up / Log in
![](https://static.wixstatic.com/media/969e87_281ce36b1bc64507b3eb6642a9d36edc~mv2.png/v1/fill/w_375,h_812,al_c,q_85,enc_avif,quality_auto/969e87_281ce36b1bc64507b3eb6642a9d36edc~mv2.png)
![](https://static.wixstatic.com/media/969e87_9dbf21de3fa24bcf977aeb095260601a~mv2.png/v1/fill/w_375,h_812,al_c,q_85,enc_avif,quality_auto/969e87_9dbf21de3fa24bcf977aeb095260601a~mv2.png)
個人檔案
![](https://static.wixstatic.com/media/969e87_57b50dd88df5469abbd967abf9cdeb57~mv2.png/v1/fill/w_375,h_812,al_c,q_85,enc_avif,quality_auto/969e87_57b50dd88df5469abbd967abf9cdeb57~mv2.png)
購物清單
![](https://static.wixstatic.com/media/969e87_913be0f374284604a1995b1fa1583b76~mv2.png/v1/fill/w_375,h_812,al_c,q_85,enc_avif,quality_auto/969e87_913be0f374284604a1995b1fa1583b76~mv2.png)
![](https://static.wixstatic.com/media/969e87_dcc4dbe47c0549909e12e9f162c87b9d~mv2.png/v1/fill/w_375,h_812,al_c,q_85,enc_avif,quality_auto/969e87_dcc4dbe47c0549909e12e9f162c87b9d~mv2.png)
(APP 介面設計 Cook Ideas)卡片元件
![](https://static.wixstatic.com/media/969e87_22a704b968734f34899208016fc50524~mv2.png/v1/fill/w_980,h_828,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/969e87_22a704b968734f34899208016fc50524~mv2.png)
(APP 介面設計 Cook Ideas)專案元件庫
![](https://static.wixstatic.com/media/969e87_19c40f7b0fae4463a26f1ff0fe3897be~mv2.png/v1/fill/w_980,h_881,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/969e87_19c40f7b0fae4463a26f1ff0fe3897be~mv2.png)
重點技術:
導航列Icon 製作
以形狀(長方形、圓形、鋼筆)繪製出對應的圖樣,在結合布林群組功能合併圖層,得到不同的Icon。 ex.主頁、搜尋、發布食譜、購買清單、個人頁面
![](https://static.wixstatic.com/media/969e87_63d6b766803647ccb2c87d2068629eb3~mv2.png/v1/fill/w_412,h_102,al_c,q_85,enc_avif,quality_auto/969e87_63d6b766803647ccb2c87d2068629eb3~mv2.png)
Component元件&Variants製作
使用Component功能,讓元件可以有彈性的調整空間,加上Variants的功能,讓元件可以自由地轉換狀態。 ex.狀態欄的五種狀態變化
![](https://static.wixstatic.com/media/969e87_dd869b3adcbd41faa2fa07efabec28ff~mv2.png/v1/fill/w_860,h_554,al_c,q_90,enc_avif,quality_auto/969e87_dd869b3adcbd41faa2fa07efabec28ff~mv2.png)
Auto layout的設置
使用Auto layout功能,讓畫面的間距保持一致,達成畫面整齊的效果。也可以在交付給工程師時,方便有相同的間距設置。ex.當季食材頁面
![](https://static.wixstatic.com/media/969e87_77521078bfb2426994347141bc89c133~mv2.png/v1/fill/w_975,h_441,al_c,q_90,enc_avif,quality_auto/969e87_77521078bfb2426994347141bc89c133~mv2.png)
Prototype: Overlay製作
使用Overlay功能,可以製作彈跳出來的視窗和製造黑底的遮幕效果
ex.刪除清單的確認視窗
![](https://static.wixstatic.com/media/969e87_73626189daf3428da4b99e8264ef4b93~mv2.png/v1/fill/w_944,h_720,al_c,q_90,enc_avif,quality_auto/969e87_73626189daf3428da4b99e8264ef4b93~mv2.png)
專案心得&回饋
在這一年之間從最基礎的PS、AI到基礎的網頁架構撰寫,一開始我還不敢直視複雜的軟體和程式(笑)到一步步跟著影片中老師的教學,摸索出如何操作每個軟體的方法。
除了在練習中收穫到許多不同的撇步,更喜歡學習到新事物,腦中想著"哇~我又Get到一個新技能"的自己。
專案的發想比較像是把對烹飪的熱愛實現在設計的世界裡
謝謝Meloeo老師總是用最快的速度回答我的問題、Uta在上課過程中幫忙我追蹤進度,崔崔在專案期間幫忙我安排時程;還有最重要的小幫手,總在第一時間將我的需求傳達給對應的人,非常的感謝。
最後,我想對一年前的自己說: 謝謝你當初勇敢的踏出第一步^^
專案網址:
![](https://static.wixstatic.com/media/969e87_c1d1e542cd6b4883b71a73cab4392232~mv2.png/v1/fill/w_980,h_491,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/969e87_c1d1e542cd6b4883b71a73cab4392232~mv2.png)
Comentarios