Nomora：打造符合人因工學的電腦工作空間

Nomora是一款可協助您檢查電腦工作空間家具尺寸（電腦桌、椅子、螢幕）等是否符合人體工學建議的工具型App。

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

※專案製作期間：2023年7月～2023年8月。

製作本專案的契機

自入學互動設計系以來，我便開始學習UI/UX設計，同時也開始自學寫網頁、App。學習了兩年後（大二），我終於首次透過程式重現自己的設計；又一個兩年過後（大四），我更是已經可以獨立負責畢業製作的程式開發。

不斷成長的程式能力，讓我開始思考「製作、上架一款App」的可能性。作為一位未來的UI/UX設計師，我希望盡可能地了解製作一款App所需經過的全部流程，包括從設計到開發之間的所有細節。我認為透過實踐去了解這些知識，有助於協助我和不同職位的人溝通，最終會使我成為更好的UI/UX設計師。

因此，便誕生了此專案。

設定專案的範圍

在正式開始專案前，我盤點了關於自身時間、能力上的條件，以此設定專案的範圍與目標。由於我沒有開發、上架iOS App的經驗，且能夠製作的時間有限，因此我決定要以小規模的題目來練習。

• 希望達成的目標：設計一款具備良好UI/UX的iOS App並進行開發，最終於App Store上架
• 範圍（題目）：小規模、且在我的程式能力範圍內的題目
• 可利用的時間：從暑假至開學前的這段期間（約3個月）

題目發想與探索

首先，我決定以「工具」類App進行題目的探索與發想。因為這是普遍來說，內容最單純、製作難易度最低的App類型。

在發想題目的過程中，我偶然地想起大學課堂上教授介紹過的「桌椅人體工學尺寸建議」研究。於是我靈機一動，想到利用App的形式，將這些複雜、數量眾多的尺寸建議變換為可直觀地互動、操作的工具，協助人們了解自己的家具尺寸是否適合電腦工作。

人物誌

我將人物誌的描繪族群設定為典型的辦公室上班族，因為這個族群需要長時間待在辦公室、坐在電腦桌前工作，因此家具的尺寸是否舒適就至關重要。

黃詩涵是一位居住在都市的年輕女性白領。平時她的工作除了開會外，就是待在電腦桌前處理文書事務，幾乎不需要自辦公室外出。在長時間使用尺寸不合適的家具後，她感到疲勞、身體各處痠痛。也因此，她開始在意如何減低長時間電腦工作的不適，並在網路上搜尋資訊。

然而，網路上的相關資訊五花八門，使得她對於要如何具體地改善問題（特別是調整家具尺寸方面）感到消極、並認為這會很耗費時間。最終陷入了苦惱。

顧客旅程地圖

儘管黃詩涵的身份是上班族，但實際上，會用到電腦的場所不只辦公室一個。依據現今的工作型態，上班族也可能在家中遠距辦公、視訊會議。另外，她也可能會單純地利用家中電腦進行休閒娛樂。

因此，如何橫跨所有的接觸點，帶給使用者舒適的電腦工作空間體驗，是必須思考的課題。

App 介面設計

為了保留專案資源處理後續開發、上架部分的未知困難，在介面設計方面以使用原生UI元件為主。本App的操作流程如下：

1. 依照建議調整家具的尺寸，即可獲得舒適的電腦工作空間
2. 建立一項新的測試
3. 依照系統指示，填寫各項家具的尺寸（桌面高度、桌子深度、螢幕高度等）
4. 取得測試結果與建議

Wireframe與易用性測試

在完成Wirframe以後，我邀請了身邊的親朋好友進行易用性測試與簡單的訪談，最終發現了三個需要改進的問題。

Prototype

修正完前述易用性測試問題後的prototype如下。

測量位置指示圖設計

由於App內的測量項目眾多，所需的指示圖數量也就跟著多。如果每張圖都人工繪製，不僅容易畫的不準確，也需要大量的時間製作。因此，我使用3D Render的方式節省製作時間。圖中的模型皆為購買版權素材，或是自行建模而來。

這一系列的測量位置指示圖特意採用了單色調的設計，藉著抑制色彩的使用，凸顯需要測量的項目位置。

設計系統

在本專案中，我建立了簡易的設計系統。目的是為了有效地統一不同頁面間的設計，以及方便後續的開發。

App 開發

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

我評估SwiftUI應可覆蓋本次專案的大部份需求，最終才決定採用。最糟的情況下，即使遇到SwiftUI無法解決的需求，還是可以利用已經十足成熟的UIKit來製作需要的功能。

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

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

功能亮點

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

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

透過評價快速了解空間狀況

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

儲存個人尺寸偏好，在不同的場所打造一樣的體驗

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

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

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

本地化（Localization）

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

其他的設計項目

本專案除了App以外，還包含其形象網頁、App預覽圖設計等內容。

形象網頁

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

APP預覽圖

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