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

avatar-img
12會員
33內容數
設計 + 程式,是一個出版對設計和程式的學習影片和教學文章,目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
JayLinXR 的其他內容
Heuristic 啟發式設計是用戶體驗設計的重要原則之一,涉及了許多與真實世界匹配、用戶控制、一致性和準則等方面,通過一些具體的例子解釋了這些原則的重要性。本文還提供了一些相關的視覺系統狀態和系統與真實世界匹配的例子,同時附帶了一些相關的教程和資料來源。
XR 設計如何起步呢?這部影片為大家初步介紹關於VR AR 和 XR,往後會近一步講解如何設計XR 體驗設計呦 😃
學習易用性 (Usability)和通用設計(Accessibility) 區別
Heuristic 啟發式設計是用戶體驗設計的重要原則之一,涉及了許多與真實世界匹配、用戶控制、一致性和準則等方面,通過一些具體的例子解釋了這些原則的重要性。本文還提供了一些相關的視覺系統狀態和系統與真實世界匹配的例子,同時附帶了一些相關的教程和資料來源。
XR 設計如何起步呢?這部影片為大家初步介紹關於VR AR 和 XR,往後會近一步講解如何設計XR 體驗設計呦 😃
學習易用性 (Usability)和通用設計(Accessibility) 區別
你可能也想看
Google News 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
隨著電子商務的蓬勃發展,越來越多企業和個人開始投入購物網站的架設和App開發。然而,從零開始設計一個成功的購物網站並開發出高效的App,並不是一件容易的事。本文將為你提供從初步規劃到最終完成的指南,幫助你在競爭激烈的市場中脫穎而出。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
本課程學習如何提取共同屬性,透過 Style 樣式包,套用至每個按鈕。來提升佈局的可讀性和好維護性。
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
隨著電子商務的蓬勃發展,越來越多企業和個人開始投入購物網站的架設和App開發。然而,從零開始設計一個成功的購物網站並開發出高效的App,並不是一件容易的事。本文將為你提供從初步規劃到最終完成的指南,幫助你在競爭激烈的市場中脫穎而出。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
本課程學習如何提取共同屬性,透過 Style 樣式包,套用至每個按鈕。來提升佈局的可讀性和好維護性。