Nomora是一款以人因工學中的電腦工作空間建議為基礎,幫助您打造舒適工作空間的APP。

謝承邑 個人作品 Nomora iOS APP

※本專案為個人專案。專案製作範圍包括:使用者經驗設計、使用者介面設計、APP開發、周邊設計與行銷。

※專案製作期間:2023年7月~2023年8月。


緣起

從2019年升上大學的暑假開始,我就持續地學習寫iOS APP。當時一部分的動機是想真的做出成果並上架,但更主要的目的還是藉此學習程式觀念,加強大學所需的課業。

兩年過後,我在和同學組成的讀書會專案中,首次地將自己所設計的介面放在iOS平台上重現。但當時的成果僅限於介面外觀,並無包含程式邏輯,因此只能說是半成品;又一個兩年過後,我的程式能力與大一時相比已有十足的見長,並可獨挑大梁負責畢業製作所需的程式開發。也是在這個時間點,讓我開始思考「製作一款真正能上架的iOS APP」的可行性,最後便有了此專案。

在這四年間,我不斷地學習APP開發的理由除了滿足課業需要外,更是因為身為一個UI/UX設計師,我希望能盡可能地掌握一個APP所有的生命週期流程。我認為這有助於我在執行設計時,擁有更加廣闊的視野、更順暢地和不同職責的人溝通,而這也是我當初選擇進入互動系這個跨領域科系的初衷。

謝承邑 個人作品 Nomora iOS APP
謝承邑 個人作品 Nomora iOS APP

專案目標與範圍定義

由於我的時間有限、程式能力也無法比肩專業工程師,因此要達成「上架APP」的目標就需要有效地限制專案的範圍。以下是專案開始前所規劃的內容:

前期發想與探索

考量規模與製作難易度兩個因素後,我決定聚焦於「工具」類別發想APP的點子。因為這是普遍來說,內容最單純、製作難易度最低的類別。

當時我恰好正在準備研究所的課業,並想起人因工學中曾提及關於電腦工作空間的尺度建議,於是我便靈機一動想到將這些冰冷的數值轉化為可互動的APP,使人們可以直觀地了解自身所處的工作空間狀況。

人物誌

我設定APP的目標使用者為一天之中有長時間都坐在辦公室的上班族,並依此規劃人物誌。因為該族群與電腦接觸的時間長,因此最有動機注重電腦使用環境的舒適程度。

謝承邑 個人作品 Nomora iOS APP

顧客旅程地圖

在上班族的生活中,長時間使用電腦的場所並不僅限辦公室,還包括在家中使用電腦進行娛樂。考慮到設置舒適電腦使用空間的過程繁瑣,因此如何將好的空間體驗從一處輕鬆套用到另一處的功能也是必須的。

謝承邑 個人作品 Nomora iOS APP

功能架構規劃

謝承邑 個人作品 Nomora iOS APP

專案行程規劃

由於此專案涉及多種專業領域,為避免專案進度迷失,我將專案過程劃分為八大階段進行管理。

謝承邑 個人作品 Nomora iOS APP

APP 介面設計

如同開頭所提及,在介面設計方面為降低未知的開發難度、減輕開發負擔,因此設計主要採用iOS原生的UI元件。但另一方面,設計上也盡可能地凸顯品牌特色。

Wireframe

謝承邑 個人作品 Nomora iOS APP

Prototype

謝承邑 個人作品 Nomora iOS APP

易用性測試

謝承邑 個人作品 Nomora iOS APP

設計系統

插圖設計

APP內使用的插圖為3D Render而成,此系列插圖特意降低視覺元素的干擾,確保指示尺寸的清晰。圖中所使用之模型為購買版權素材。

謝承邑 個人作品 Nomora iOS APP
謝承邑 個人作品 Nomora iOS APP

APP 開發

本作品的主要程式框架為蘋果於2019年推出的SwiftUI。雖然推出時間不長、支援度也不及發展更為悠久的UIKit,但SwiftUI開發難易度低,同時也是我目前最熟悉的框架。

我評估SwiftUI應可覆蓋本次專案的大部份需求,最終才決定採用。最糟的情況下,即使遇到SwiftUI無法解決的需求,兩種程式框架還是可相容並實作需要的功能。

謝承邑 個人作品 Nomora iOS APP
程式內資料架構規劃
謝承邑 個人作品 Nomora iOS APP
實際程式碼截圖

只有設計與程式深度整合才能做到的開發模式

本專案的設計系統與開發端深度同步,借助SwiftUI聲明式語法的特性,我事先建立和設計系統名稱相同的程式碼片段,實際製作UI時就可快速套用。同時,使用此設計模式更使實作系統級功能(如:深色模式支援)更加簡單。


功能亮點

全測試項目皆有插圖,不必擔心搞不懂要測量哪裡

所有測試項目皆附有插圖,在填寫問卷時,只要輕點標題即可查看更詳細的說明、插圖。即使測試項目眾多,也不必擔心不會寫。

謝承邑 個人作品 Nomora iOS APP

清晰的評價設計,快速了解空間狀況

測試完成後,APP首頁即會顯示每次測試結果的合格項目與評價,令使用者不必進入下一層級頁面就可大致了解空間狀況。

謝承邑 個人作品 Nomora iOS APP

偏好功能,供使用者同步空間體驗

舒適的桌椅高度因人而異,因此Nomora提供偏好功能,供使用者儲存適合自己的尺寸偏好。

謝承邑 個人作品 Nomora iOS APP

使用洞察圖表比較實際空間與偏好差異

每一測試項目中的洞察圖表顯示該項目與偏好數值的比較,並透過圖表直觀表示尺寸差異。

謝承邑 個人作品 Nomora iOS APP

本地化(Localization)

為了觸及更多的受眾,同時活用本人的多語能力,我規劃APP可支援以多種語言運行,包括:繁體中文、簡體中文、英文、日文。

謝承邑 個人作品 Nomora iOS APP

※2023.8:日文版將以後續更新的形式推出。推出時間將另行公告。


周邊設計

本專案除了APP以外,還包含其形象網頁、APP預覽圖設計等後續周邊設計與行銷的內容。

形象網頁

本專案APP的形象網頁架設於本個人網站的附屬頁面中,並支援RWD設計。本形象網頁使用本個人網站的設計系統為基礎,因此可兼顧品質並快速上線。

謝承邑 個人作品 Nomora iOS APP

APP預覽圖

此系列圖片用於App Store的畫面預覽中。為配合前述提及的本地化作業,設計有多語版本。

謝承邑 個人作品 Nomora iOS APP
謝承邑 個人作品 Nomora iOS APP
謝承邑 個人作品 Nomora iOS APP

RECOMMEND

READ MORE

承邑的最新文章
PROMOTION

追蹤我的IG帳號 @chengyi_hsieh

身為UI設計師的日常學習、生活、觀點紀錄都在這裡!

立即追蹤