
APP 設計 - 接案
Masa
按摩控制

APP 設計 - 接案
Masa
按摩控制

APP 設計 - 接案
Masa
按摩控制

APP 設計 - 接案
Masa
按摩控制
讓手機成為
您的按摩師
讓手機成為
您的按摩師
讓手機成為
您的按摩師
接案期間:2022
接案期間:2022
按摩椅也能用手機操控,讓手機成為您的專屬按摩師,masa APP 能紀錄個人化按摩方式,按摩紀錄數據,共享按摩模式,改版即將上線。
按摩椅也能用手機操控,讓手機成為您的專屬按摩師,masa APP 能紀錄個人化按摩方式,按摩紀錄數據,共享按摩模式,改版即將上線。
masa 是一款方便的按摩椅椅墊,可以放在任何地方就能進行按摩,產品名字來自英文 massage 的詞源 massa,始於創辦人在觀察到家中長輩長期臥床的困擾後,決定開發一款人人都能負擔、輕便易用且能高度客製化的按摩器材,讓人們盡可能在任何時候、任何地方都能有效放鬆、恢復精力。
在台灣有超過60%的按摩椅僅被使用了三個月,就成了堆衣服的家俱。經調查,發現是因多數使用者都感到所買的按摩椅「按不到我想按的點」,我們認為這是一個普遍存在卻時常被忽略的關鍵問題。
同時他們也開發了自己的手機 APP,能夠做到原本實體按摩遙控器做不到的事,像是紀錄個人化按摩方式,按摩紀錄數據,共享按摩模式,而這次的專案目標是能夠設計出更符合產品形象與容納未來功能的設計方案。
masa 是一款方便的按摩椅椅墊,可以放在任何地方就能進行按摩,產品名字來自英文 massage 的詞源 massa,始於創辦人在觀察到家中長輩長期臥床的困擾後,決定開發一款人人都能負擔、輕便易用且能高度客製化的按摩器材,讓人們盡可能在任何時候、任何地方都能有效放鬆、恢復精力。
在台灣有超過60%的按摩椅僅被使用了三個月,就成了堆衣服的家俱。經調查,發現是因多數使用者都感到所買的按摩椅「按不到我想按的點」,我們認為這是一個普遍存在卻時常被忽略的關鍵問題。
同時他們也開發了自己的手機 APP,能夠做到原本實體按摩遙控器做不到的事,像是紀錄個人化按摩方式,按摩紀錄數據,共享按摩模式,而這次的專案目標是能夠設計出更符合產品形象與容納未來功能的設計方案。

專案總覽
專案總覽
專案總覽
專案總覽
這次的專案不需要重新設計品牌跟 Logo,但他們之前的畫面與目前品牌想要傳達的目標不符,並且也有許多的概念需要新版的設計能夠兼容,因此我們做了初期的概念嘗試,選定一個方向後,就接著做 APP 畫面跟流程設計,並給出了設計指引讓工程團隊能夠理解畫面如何構成,也讓團隊知道後續如何上稿,並在一個月左右完成了整個專案。
這次的專案不需要重新設計品牌跟 Logo,但他們之前的畫面與目前品牌想要傳達的目標不符,並且也有許多的概念需要新版的設計能夠兼容,因此我們做了初期的概念嘗試,選定一個方向後,就接著做 APP 畫面跟流程設計,並給出了設計指引讓工程團隊能夠理解畫面如何構成,也讓團隊知道後續如何上稿,並在一個月左右完成了整個專案。
此專案完成以下項目
此專案完成以下項目
提案產品視覺定位概念
提案產品視覺定位概念
此案件 LOGO 不需要重做,只需要依照產品調性做探索,這次做了 2 個概念。
此案件 LOGO 不需要重做,只需要依照產品調性做探索,這次做了 2 個概念。
製作介面設計稿
製作介面設計稿
這次針對 iOS 跟 Android 做了將近 50 個畫面,並針對小畫面手機做特製。
這次針對 iOS 跟 Android 做了將近 50 個畫面,並針對小畫面手機做特製。
製作設計系統指引
製作設計系統指引
在概念跟部分 UI 設計稿完成後,整理了一份擁有各種樣式,各種狀態的文件。
在概念跟部分 UI 設計稿完成後,整理了一份擁有各種樣式,各種狀態的文件。
多語系考量
多語系考量
產品需要支援至少中文跟英文,也有其他語言,語言的編輯跟載入是用第三方語言工具,因此設計稿也有考量這部分。
產品需要支援至少中文跟英文,也有其他語言,語言的編輯跟載入是用第三方語言工具,因此設計稿也有考量這部分。
交付設計稿給開發團隊
交付設計稿給開發團隊
在產品流程、UI 設計稿、設計系統指引完成後,經客戶確認無誤後驗收完成,並交付設計稿給開發團隊。
在產品流程、UI 設計稿、設計系統指引完成後,經客戶確認無誤後驗收完成,並交付設計稿給開發團隊。


進度 1 - 第一週
進度 1 - 第一週
從概念開始
重塑產品形象
從概念開始
重塑產品形象
從概念開始
重塑產品形象
從概念開始
重塑產品形象
專案一開始,他們其實已經有了自己的 APP 產品,並且已經上線,有了基本功能可以操作按摩椅,但因為產品跟品牌本身連結性較少,因此這次主要的目標就是改進 APP 的面貌跟擴充性,需要先確定概念方向,然後再來製作詳細的介面規格設計圖,所以要先探索這個產品的可能性,結合市場競品跟客戶對未來的產品的想像,我們得到了幾個關鍵字:穩重、安定、直覺,依照這些目標做了 2 個可能性的概念圖探索,並從裡面選了一個方向製作介面規格設計圖。
專案一開始,他們其實已經有了自己的 APP 產品,並且已經上線,有了基本功能可以操作按摩椅,但因為產品跟品牌本身連結性較少,因此這次主要的目標就是改進 APP 的面貌跟擴充性,需要先確定概念方向,然後再來製作詳細的介面規格設計圖,所以要先探索這個產品的可能性,結合市場競品跟客戶對未來的產品的想像,我們得到了幾個關鍵字:穩重、安定、直覺,依照這些目標做了 2 個可能性的概念圖探索,並從裡面選了一個方向製作介面規格設計圖。
進度 2 - 第二週到第三週
進度 2 - 第二週到第三週
建構產品介面
整理設計指引
建構產品介面
整理設計指引
建構產品介面
整理設計指引
建構產品介面
整理設計指引
選出了概念設計定位之後,就可以進一步做介面的規劃設計圖,由於 masa 已經有了上架的 APP 跟使用者,我們討論的結果是盡量不改變使用者原本的習慣,並運用這樣的基底,去增加一些未來的功能,跟可以擴充的範圍,並且訂定了每個禮拜一次固定會議去說明進度跟遇到的問題,並且在設計的第一天就提供設計檔案的連結,讓客戶能夠隨時觀看設計的更新進度,並且在製作設計圖的過程中,逐步建立設計指引,設計指引是為了工程師在開發的時候,有一個規範讓他們知道如何分類跟相關的組件狀態如何表示,方便他們在沒有設計圖的情況下也能自行重構畫面。
選出了概念設計定位之後,就可以進一步做介面的規劃設計圖,由於 masa 已經有了上架的 APP 跟使用者,我們討論的結果是盡量不改變使用者原本的習慣,並運用這樣的基底,去增加一些未來的功能,跟可以擴充的範圍,並且訂定了每個禮拜一次固定會議去說明進度跟遇到的問題,並且在設計的第一天就提供設計檔案的連結,讓客戶能夠隨時觀看設計的更新進度,並且在製作設計圖的過程中,逐步建立設計指引,設計指引是為了工程師在開發的時候,有一個規範讓他們知道如何分類跟相關的組件狀態如何表示,方便他們在沒有設計圖的情況下也能自行重構畫面。
查看設計檔
查看設計檔


進度 3 - 第四週與之後
進度 3 - 第四週與之後
交付設計
持續改進
交付設計,持續改進
經過一個多月,多次會議的來回討論,設計文件驗收完成,提供了適合 iOS 跟 Android 的設計稿,包含適合小尺寸手機螢幕的設計,並且時程上還提前完成了整個專案,但設計不是交付的那一天就與設計師無關了,之後我們仍然保持聯繫改進解決各項工程開發問題,這是設計工作的日常,持續追蹤與改進,並希望上線的那一刻都能做到盡善盡美。
經過一個多月,多次會議的來回討論,設計文件驗收完成,提供了適合 iOS 跟 Android 的設計稿,包含適合小尺寸手機螢幕的設計,並且時程上還提前完成了整個專案,但設計不是交付的那一天就與設計師無關了,之後我們仍然保持聯繫改進解決各項工程開發問題,這是設計工作的日常,持續追蹤與改進,並希望上線的那一刻都能做到盡善盡美。
更多 APP 設計案例
更多 APP
設計案例
更多 APP 設計案例
更多 APP 設計案例

Draco
AI 投資管理
App
Allears
音樂社群
App

Yahoo
股市手機
App

Masa
按摩控制
App

Ted.D
© 2023 Ted.D
