Figma UX/UI手機App設計教學:點子成行到製作出一個App 系列教學

閱讀時間約 1 分鐘



這一集分享手機App設計教學,往後會分享用Flutter開發出一個App :)

上一集分享設計個人作品集後,這次教大家來設計一個手機App,我會透過一系列的分享來製作出一個App


如果你有興趣,可以參考上一集

如何用FIgma製作個人作品集UX/UI教學

https://vocus.cc/article/645c733dfd89780001ffe890


Part1 - 找尋靈感


剛開始不知道要從哪裡下手,可以想看看你有什麼對你有興趣或想解決的問題以及案例

  • 你最喜歡做什麼事情? 聽音樂, 吃美食還是旅遊
  • 你看到什麼樣的問題? 你想要解決, 舉例: 睡眠品質的改善或者如何保持健康
  • 不知道要怎麼開始下手,可以看看別人類似你的點子的作品

https://www.behance.net/

https://dribbble.com/



舉例:

主題: 健康飲食

平台: iOS App

族群: 18歲~35歲

市場: 愛料理,


腦力激盪


快速產出你的任何點子

  • Quick and Write - 快速描述並寫下你的想法
  • 大量猜想無限制


舉例:

  • 可以有個關於幫我送健康飲食加上健康教練的App嗎?
  • 以健康交友的App,互相約飯和一起健身?


影片教學




Part2 - 製作草圖


草圖允許你快速清晰地向他人解釋你的想法,而無需冗長的說明。單憑文字可能令人困惑,但草圖可簡化溝通過程。通過將你的想法草擬出來,你可以幫助他人更好地理解,並希望他們能夠從中獲得靈感。


用什麼工具來做草圖?你可以用筆跟白紙就可以,不需要要求你很會畫畫,重點在溝通跟點子構想,以下是一個用戶引導範例設計


範例:

https://www.pinterest.com.au/pin/9570217951020643/

額外學習:

https://www.smashingmagazine.com/2021/09/power-pen-paper-sketching/


影片教學



額外資源教學

如何用FIgma製作個人作品集教學

https://vocus.cc/article/645c733dfd89780001ffe890

學習如何設計好產品 - 使用者經驗設計 | 易用性 | 通用設計

https://vocus.cc/article/64637f74fd8978000175c0f8

Heuristic 啟發式設計: 用戶體驗設計的重要原則

https://vocus.cc/article/65eb05affd89780001c87dc7

學習如何用HMTL5和CSS3,跟JayLin一起做一個NFT卡片完整課程

-  https://vocus.cc/article/64637f74fd8978000175c0f8


更多相關教學文章

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/

JayLinXR FB: https://www.facebook.com/JayLinXR

12會員
32內容數
設計 + 程式,是一個出版對設計和程式的學習影片和教學文章,目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
發表第一個留言支持創作者!
JayLinXR 的其他內容
Heuristic 啟發式設計是用戶體驗設計的重要原則之一,涉及了許多與真實世界匹配、用戶控制、一致性和準則等方面,通過一些具體的例子解釋了這些原則的重要性。本文還提供了一些相關的視覺系統狀態和系統與真實世界匹配的例子,同時附帶了一些相關的教程和資料來源。
XR 設計如何起步呢?這部影片為大家初步介紹關於VR AR 和 XR,往後會近一步講解如何設計XR 體驗設計呦 😃
學習易用性 (Usability)和通用設計(Accessibility) 區別
Heuristic 啟發式設計是用戶體驗設計的重要原則之一,涉及了許多與真實世界匹配、用戶控制、一致性和準則等方面,通過一些具體的例子解釋了這些原則的重要性。本文還提供了一些相關的視覺系統狀態和系統與真實世界匹配的例子,同時附帶了一些相關的教程和資料來源。
XR 設計如何起步呢?這部影片為大家初步介紹關於VR AR 和 XR,往後會近一步講解如何設計XR 體驗設計呦 😃
學習易用性 (Usability)和通用設計(Accessibility) 區別
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin,包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具,並附上了每個工具的安裝連結。
Thumbnail
金句連發的社畜角色,實力強大的一級咒術師!
Thumbnail
設計師經常尋找可以提升工作效率和創意的資源。幸運的是,Figma社群總是樂於分享,這裡我們整理了一些免費的Figma檔案和設計資源,幫助你在App/ 網頁設計界面(UI)和呈現方面更上一層樓。
Thumbnail
Figma以其直觀的介面和強大的協作功能,迅速成為設計師和開發者首選的UI/UX App / 網頁設計工具之一。除了其高效的設計功能外,Figma的一大優勢在於其龐大的社區和用戶共享的免費資源。這些資源可以幫助設計師節省時間,並在創建高質量的設計方案時提供靈感。
Thumbnail
Figma,作為當今流行的在線界面設計工具,不僅在設計社區中擁有重要的地位,更因其協作和原型功能而廣受青睞。然而,除了傳統的UI/UX App 及網頁設計,一些創新者已經開始在這個平台上創造令人驚艷的遊戲。
Thumbnail
今天要來整理 Figma的免費課程!傳送門 Figma 是個很好用的製圖工具, 但在真正用 Figma 畫 UIUX時,最重要的第一步是「知道這個專案的目的」。 Wireframes 產品框線圖 Figma 可以用來畫 Wireframes 就像在寫文章一樣先有大鋼,再填內容。在做產品
Thumbnail
打造具有邏輯的 Figma 顏色命名體系,是提高設計效率並增添專業感的關鍵一環。 這不僅是優化工作流程的實用方式,更是為你的設計注入有條理的美感。
通過Figma 簡潔直觀的操作介面和豐富多樣的設計功能,跟著我們的教學掌握這類設計工具的基本操作流程,學會如何創建用戶界面並輸出高品質的設計稿!我們已經為你整理好了Figma 產品設計必備功能教學步驟,更有一系列免費學習資源推薦,讓你快速學會使用線上設計工具!
Thumbnail
Figma是一款專門製作UI介面的設計師專用軟體,目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯,推薦你一個可以有系統的學習Figma的線上課程,Simon老師的 【 產品設計實戰:用Figma打造絕佳UI/UX 】 。
Thumbnail
Can a complete UX Design newbie finish an app design after taking Coursera's Google UX Design courses? Only true museum lovers will know!
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
這篇分享的是我自己在平面設計使用上覺得特別好用的5個Figma Plugin,包括Curve Text、Skew、Noise & Texture、Morph和Blobs等。分享適合初學者的設計工具,並附上了每個工具的安裝連結。
Thumbnail
金句連發的社畜角色,實力強大的一級咒術師!
Thumbnail
設計師經常尋找可以提升工作效率和創意的資源。幸運的是,Figma社群總是樂於分享,這裡我們整理了一些免費的Figma檔案和設計資源,幫助你在App/ 網頁設計界面(UI)和呈現方面更上一層樓。
Thumbnail
Figma以其直觀的介面和強大的協作功能,迅速成為設計師和開發者首選的UI/UX App / 網頁設計工具之一。除了其高效的設計功能外,Figma的一大優勢在於其龐大的社區和用戶共享的免費資源。這些資源可以幫助設計師節省時間,並在創建高質量的設計方案時提供靈感。
Thumbnail
Figma,作為當今流行的在線界面設計工具,不僅在設計社區中擁有重要的地位,更因其協作和原型功能而廣受青睞。然而,除了傳統的UI/UX App 及網頁設計,一些創新者已經開始在這個平台上創造令人驚艷的遊戲。
Thumbnail
今天要來整理 Figma的免費課程!傳送門 Figma 是個很好用的製圖工具, 但在真正用 Figma 畫 UIUX時,最重要的第一步是「知道這個專案的目的」。 Wireframes 產品框線圖 Figma 可以用來畫 Wireframes 就像在寫文章一樣先有大鋼,再填內容。在做產品
Thumbnail
打造具有邏輯的 Figma 顏色命名體系,是提高設計效率並增添專業感的關鍵一環。 這不僅是優化工作流程的實用方式,更是為你的設計注入有條理的美感。
通過Figma 簡潔直觀的操作介面和豐富多樣的設計功能,跟著我們的教學掌握這類設計工具的基本操作流程,學會如何創建用戶界面並輸出高品質的設計稿!我們已經為你整理好了Figma 產品設計必備功能教學步驟,更有一系列免費學習資源推薦,讓你快速學會使用線上設計工具!
Thumbnail
Figma是一款專門製作UI介面的設計師專用軟體,目前在台灣UIUX的工作者大多使用Figma居多。想學習Figma進入UIUX設計職涯,推薦你一個可以有系統的學習Figma的線上課程,Simon老師的 【 產品設計實戰:用Figma打造絕佳UI/UX 】 。
Thumbnail
Can a complete UX Design newbie finish an app design after taking Coursera's Google UX Design courses? Only true museum lovers will know!