Nomora是一款以人因工學中的電腦工作空間建議為基礎,幫助您打造舒適工作空間的APP。
※本專案為個人專案。專案製作範圍包括:使用者經驗設計、使用者介面設計、APP開發、周邊設計與行銷。
※專案製作期間:2023年7月~2023年8月。
緣起
從2019年升上大學的暑假開始,我就持續地學習寫iOS APP。當時一部分的動機是想真的做出成果並上架,但更主要的目的還是藉此學習程式觀念,加強大學所需的課業。
兩年過後,我在和同學組成的讀書會專案中,首次地將自己所設計的介面放在iOS平台上重現。但當時的成果僅限於介面外觀,並無包含程式邏輯,因此只能說是半成品;又一個兩年過後,我的程式能力與大一時相比已有十足的見長,並可獨挑大梁負責畢業製作所需的程式開發。也是在這個時間點,讓我開始思考「製作一款真正能上架的iOS APP」的可行性,最後便有了此專案。
在這四年間,我不斷地學習APP開發的理由除了滿足課業需要外,更是因為身為一個UI/UX設計師,我希望能盡可能地掌握一個APP所有的生命週期流程。我認為這有助於我在執行設計時,擁有更加廣闊的視野、更順暢地和不同職責的人溝通,而這也是我當初選擇進入互動系這個跨領域科系的初衷。
專案目標與範圍定義
由於我的時間有限、程式能力也無法比肩專業工程師,因此要達成「上架APP」的目標就需要有效地限制專案的範圍。以下是專案開始前所規劃的內容:
- 目標:於iOS平台上架APP
- 時間:升研究所的暑假期間(約3個月)
- 範圍(題目):在我現有的程式能力範圍內,所能完成的規模與題目設定
- 技術:整合UX設計、UI設計、網頁設計等個人專業所製作的整合性作品
- 限制:在兼顧品牌特色的前提下,盡可能使用原生UI元件,減輕開發負擔
前期發想與探索
考量規模與製作難易度兩個因素後,我決定聚焦於「工具」類別發想APP的點子。因為這是普遍來說,內容最單純、製作難易度最低的類別。
當時我恰好正在準備研究所的課業,並想起人因工學中曾提及關於電腦工作空間的尺度建議,於是我便靈機一動想到將這些冰冷的數值轉化為可互動的APP,使人們可以直觀地了解自身所處的工作空間狀況。
人物誌
我設定APP的目標使用者為一天之中有長時間都坐在辦公室的上班族,並依此規劃人物誌。因為該族群與電腦接觸的時間長,因此最有動機注重電腦使用環境的舒適程度。
顧客旅程地圖
在上班族的生活中,長時間使用電腦的場所並不僅限辦公室,還包括在家中使用電腦進行娛樂。考慮到設置舒適電腦使用空間的過程繁瑣,因此如何將好的空間體驗從一處輕鬆套用到另一處的功能也是必須的。
功能架構規劃
專案行程規劃
由於此專案涉及多種專業領域,為避免專案進度迷失,我將專案過程劃分為八大階段進行管理。
APP 介面設計
如同開頭所提及,在介面設計方面為降低未知的開發難度、減輕開發負擔,因此設計主要採用iOS原生的UI元件。但另一方面,設計上也盡可能地凸顯品牌特色。
Wireframe
Prototype
易用性測試
設計系統
插圖設計
APP內使用的插圖為3D Render而成,此系列插圖特意降低視覺元素的干擾,確保指示尺寸的清晰。圖中所使用之模型為購買版權素材。
APP 開發
本作品的主要程式框架為蘋果於2019年推出的SwiftUI。雖然推出時間不長、支援度也不及發展更為悠久的UIKit,但SwiftUI開發難易度低,同時也是我目前最熟悉的框架。
我評估SwiftUI應可覆蓋本次專案的大部份需求,最終才決定採用。最糟的情況下,即使遇到SwiftUI無法解決的需求,兩種程式框架還是可相容並實作需要的功能。
只有設計與程式深度整合才能做到的開發模式
本專案的設計系統與開發端深度同步,借助SwiftUI聲明式語法的特性,我事先建立和設計系統名稱相同的程式碼片段,實際製作UI時就可快速套用。同時,使用此設計模式更使實作系統級功能(如:深色模式支援)更加簡單。
功能亮點
全測試項目皆有插圖,不必擔心搞不懂要測量哪裡
所有測試項目皆附有插圖,在填寫問卷時,只要輕點標題即可查看更詳細的說明、插圖。即使測試項目眾多,也不必擔心不會寫。
清晰的評價設計,快速了解空間狀況
測試完成後,APP首頁即會顯示每次測試結果的合格項目與評價,令使用者不必進入下一層級頁面就可大致了解空間狀況。
偏好功能,供使用者同步空間體驗
舒適的桌椅高度因人而異,因此Nomora提供偏好功能,供使用者儲存適合自己的尺寸偏好。
使用洞察圖表比較實際空間與偏好差異
每一測試項目中的洞察圖表顯示該項目與偏好數值的比較,並透過圖表直觀表示尺寸差異。
本地化(Localization)
為了觸及更多的受眾,同時活用本人的多語能力,我規劃APP可支援以多種語言運行,包括:繁體中文、簡體中文、英文、日文。
※2023.8:日文版將以後續更新的形式推出。推出時間將另行公告。
周邊設計
本專案除了APP以外,還包含其形象網頁、APP預覽圖設計等後續周邊設計與行銷的內容。
形象網頁
本專案APP的形象網頁架設於本個人網站的附屬頁面中,並支援RWD設計。本形象網頁使用本個人網站的設計系統為基礎,因此可兼顧品質並快速上線。
APP預覽圖
此系列圖片用於App Store的畫面預覽中。為配合前述提及的本地化作業,設計有多語版本。
RECOMMEND
READ MORE
承邑的最新文章插畫作品精選輯(2023)
2023 年 8 月
Spaciiing(Figma Plugin)
2024 年 7 月