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
JayLinXR
14會員
39內容數
設計 + 程式,是一個出版對設計和程式的學習影片和教學文章,目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
JayLinXR的其他內容
2024/11/17
本篇文章介紹如何使用Figma設計出高效的表單,適合各類設計師。文章內容包括2025最新UX/UI設計趨勢及實用技巧,並提供完整的教學視頻。學習重點包括介面熟悉度、色彩搭配、設計整體感以及對齊的重要性,助你提升設計效率和用戶體驗。立即訂閱頻道掌握未來設計技能!
Thumbnail
2024/11/17
本篇文章介紹如何使用Figma設計出高效的表單,適合各類設計師。文章內容包括2025最新UX/UI設計趨勢及實用技巧,並提供完整的教學視頻。學習重點包括介面熟悉度、色彩搭配、設計整體感以及對齊的重要性,助你提升設計效率和用戶體驗。立即訂閱頻道掌握未來設計技能!
Thumbnail
2024/04/19
Heuristic 啟發式設計是用戶體驗設計的重要原則之一,涉及了許多與真實世界匹配、用戶控制、一致性和準則等方面,通過一些具體的例子解釋了這些原則的重要性。本文還提供了一些相關的視覺系統狀態和系統與真實世界匹配的例子,同時附帶了一些相關的教程和資料來源。
Thumbnail
2024/04/19
Heuristic 啟發式設計是用戶體驗設計的重要原則之一,涉及了許多與真實世界匹配、用戶控制、一致性和準則等方面,通過一些具體的例子解釋了這些原則的重要性。本文還提供了一些相關的視覺系統狀態和系統與真實世界匹配的例子,同時附帶了一些相關的教程和資料來源。
Thumbnail
2023/05/15
XR 設計如何起步呢?這部影片為大家初步介紹關於VR AR 和 XR,往後會近一步講解如何設計XR 體驗設計呦 😃
Thumbnail
2023/05/15
XR 設計如何起步呢?這部影片為大家初步介紹關於VR AR 和 XR,往後會近一步講解如何設計XR 體驗設計呦 😃
Thumbnail
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
創業者常因資金困境而無法抓住機會,利用房產活化讓二胎房貸成為財務策略的有力夥伴。 諮詢國峯厝好貸的二胎房貸服務,讓你的房子成為你最強力的天使投資人,推動事業成長。
Thumbnail
創業者常因資金困境而無法抓住機會,利用房產活化讓二胎房貸成為財務策略的有力夥伴。 諮詢國峯厝好貸的二胎房貸服務,讓你的房子成為你最強力的天使投資人,推動事業成長。
Thumbnail
這篇內容,將會講解什麼是方法,以及與方法相關的知識。包括定義Method、Method Variable 方法變數、跨區使用Method、使用函式時要注意括號。
Thumbnail
這篇內容,將會講解什麼是方法,以及與方法相關的知識。包括定義Method、Method Variable 方法變數、跨區使用Method、使用函式時要注意括號。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {  
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {  
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
本課程學習如何在 Kotlin 程式碼檔案中,設定 ImageView 圖片元件,顯示本地端圖片。
Thumbnail
本課程學習如何在 Kotlin 程式碼檔案中,設定 ImageView 圖片元件,顯示本地端圖片。
Thumbnail
本課程學習如何使用 Android Studio 建立的第一個應用程式專案:Hello World。
Thumbnail
本課程學習如何使用 Android Studio 建立的第一個應用程式專案:Hello World。
Thumbnail
本篇文章將介紹開發 Android 手機應用程式所需的開發軟體,Google 官方的開發工具 Android Studio。這款軟體不僅免費,還提供完整的支援,適合所有 Android 開發者使用。
Thumbnail
本篇文章將介紹開發 Android 手機應用程式所需的開發軟體,Google 官方的開發工具 Android Studio。這款軟體不僅免費,還提供完整的支援,適合所有 Android 開發者使用。
Thumbnail
根據初學者設計了 Kotlin 程式語言的基礎課程,從 Android Studio 到 Android App 開發,提供完整指引。由基礎開始,傳授開發技巧。課程分為三部分:環境安裝、常用元件與界面設計,以及高階技巧如 DataStore、Room 資料儲存與網路處理。
Thumbnail
根據初學者設計了 Kotlin 程式語言的基礎課程,從 Android Studio 到 Android App 開發,提供完整指引。由基礎開始,傳授開發技巧。課程分為三部分:環境安裝、常用元件與界面設計,以及高階技巧如 DataStore、Room 資料儲存與網路處理。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News