top of page

UI/UX 設計-林O蓉-食譜APP

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在上課過程中幫忙我追蹤進度,崔崔在專案期間幫忙我安排時程;還有最重要的小幫手,總在第一時間將我的需求傳達給對應的人,非常的感謝。


最後,我想對一年前的自己說: 謝謝你當初勇敢的踏出第一步^^


專案網址:

100 次查看

相關文章

查看全部

Comments


bottom of page