如何製作可報讀 Prototype

Published in

ditl / Design Innovation & Thinking Lab

10 min readFeb 14, 2020

本文將簡提研究團隊在挑選原型工具作為報讀軟體測試時，首要的兩個考量；同時介紹 Adobe XD, Flinto, Xcode 在製作語音報讀原型上的優缺點、適用的測試情境。最後分享著手設計語音報讀原型前，設計師與研究員應該考慮的幾個問題。

各位讀者們大家好，一個眨眼間已經來到第七篇，同時也是系列文章在研究階段的最終章（請參考文末的目錄看更多）。從先前的視障者跟訪、利害關係人訪談、App 報讀原則到人物誌，幾乎所有的線索都已經撥雲見日；而團隊的下一步將進入設計階段，將研究的成果與洞見化為具體的設計作法。

以此計畫來說，為了能開發出讓視障者能夠順利預約公車的無障礙 App，研究團隊需要不斷地驗證功能的可行性、易用性與重要性；而製作無障礙 App 的原型能夠方便我們更快地迭代、快速修正細節，以打造更好的 App 版本。但是在進到原型測試前，我們還有一個不小的問題要解決：

哪些 prototyping 工具可以模擬語音報讀的功能，並讓視障使用者能實際操作測試呢？

好的原型工具絕對能省下設計師們不少時間💪🏻；然而，目前針對可製作語音報讀的原型工具資料非常有限，也很少人分享過相關的設計心得。所以這篇文章將著重於分享能做語音報讀原型的工具，以及團隊在設計過程中的小小心得。

📄 這篇文章將會提到：
1. 研究團隊在挑選合適原型工具時，首要的兩個考量。
2. 使用 Adobe XD, Flinto, Xcode 製作語音報讀原型的優缺點、適用的測試情境。
3. 設計師/研究員們在著手設計語音報讀原型前，應該考慮的幾個問題。🙅🏻‍♂️ 這篇文章將不會提到：
1. Adobe XD, Flinto 的細部設計教學。
2. Xcode 的寫程式技巧。

在正式進到文章前，如果還不認識「視障者公車搭乘體驗計畫」的團隊，不知道為何需要語音報讀，歡迎從我們的首篇系列文章開始關注：

穿越社會問題的迷霧，來一場視障服務設計的研究吧！— 輔助視障者公車搭乘體驗計畫(一)

「輔助視障者公車搭乘體驗 — — 服務體驗設計與開發」一案，紀錄自 2019 年 7 月初至 9 月中之研究所見，描述前期調研對於定義陌生問題的重要性，以及如何釐清在現實場域中的脈絡，進而提出初步概念設計。

medium.com

進入正題，當初團隊在挑選合適的原型工具時，有兩個首要考量：

能不能客製化語音報讀：
原型工具應該要提供方便且完整的語音報讀功能，例如：可以輕易地設定替代文字（Alternative text, Alt text），讓測試時能報讀出特定物件的標籤文字；此外，也應該要具備點擊文字方塊後就能直接報讀的功能，而不用另行插入音檔。
是否支援多種手勢：
原型工具可以不用做到語音輸入（Voice typing），但需要能模擬出開啟 VoiceOver 後特有的點擊音效、語音報讀，且能支援視障者使用 App 時的複雜操作（double click、三指滑動等），才能夠讓視障者完整做測試。

綜觀目前設計師們常用的各種原型工具，其實很多都有支援 Voice UI 的相關功能，但並不是所有工具都符合上述兩項需求。團隊最後是使用 Xcode 作為開發原型的工具，也是現階段我們認為最適合做 High-fidelity 語音報讀原型的工具，它支援了 iOS VoiceOver 的所有功能，包含 Alt text，以及多種複雜手勢。

然而，Xcode 嚴格來說並不是製作原型的工具，因為它本身就是 Apple 原廠提供的開發軟體，用來撰寫 Mac OS及 iOS 的應用程式，但也因為如此，用在需要 VoiceOver 功能的原型測試時，是最適合不過的！

說到這裡，前端技能還沒點好的設計師們先別難過 XD。如果只是要測試無障礙 App 原型的部分功能，或是不需要完整 VoiceOver 支援的測試時，許多原型工具其實就已經夠用。

接下來團隊將簡單分享 Adobe XD, Flinto & Xcode 運用在無障礙 App 原型測試時的優缺點，及可行的測試情境。

Adobe XD: https://www.adobe.com/products/xd.html

Adobe XD：入門門檻低，但功能限制多

作為許多設計師愛用的原型設計軟體， Adobe XD於 2018年10月時相繼推出了 Voice Prototyping 的多項功能，其中的 Speech playback 即可滿足VoiceOver 中的文字轉換語音功能（TTS, Text-to-Speech），而該功能不只能運用在文字方塊上，圖形物件也可以，藉以滿足有 Alt text 需求的原型設計。

然而，比較可惜的是目前 Adobe XD 還沒支援繁體中文，不過仍足以讓能讀懂英文、簡體中文的設計師們使用。

除了語言上的限制，Adobe XD 現階段也無法滿足「多重手勢」、「點擊後出現音效」的需求。以手勢為例，現在只有「點擊」、「拖移」兩種選擇；音效方面，由於 XD 尚未有任何嵌入音檔的功能，因此也沒辦法滿足點擊後出現音效的需求。

簡而言之，如果測試的過程只包含「點擊後出現語音報讀」這種極為單純的操作（e.g. 純測試無障礙 App 的 UX writing 等等），那 Adobe XD 就是優先考量之一，入門門檻低，且調整方便。

【Adobe XD】
⭕️ 優點：入門門檻低，支援 TTS、Alt text 等功能（只支援英文、簡中等語言）
 
❌ 缺點：不支援繁中、不支援複雜手勢（e.g. double click, 三指滑動等）、無法加入點擊音效

Flinto：支援大部分語音報讀功能，但耗時長

當涉及到較為複雜的動畫時，Flinto 就是大家的好夥伴。我們團隊中有人就是 Flinto 的愛用者，它可以幾乎模擬出所有 VoiceOver 出現的動畫、音效及操作，包括點擊一下後出現黑色框、念出設定好的元件內容；或點擊兩下跳到下一個頁面，但更進階的手勢如三指滑動、兩指點擊等還無法做到。

若要說 Flinto 最大的缺點就是：「超！級！麻！煩！」（引自團隊中某位使用者的原話），由於 Flinto 沒有 TTS 的功能，所有文字、物件的報讀都必須透過嵌入音檔的方式才能達成，加上所有物件的動畫特效都需ㄧ一設定；也就是說，如果要測試的無障礙 App 功能很多、完整度很高，設計師很可能會刻版＋錄音到海枯石爛，欲哭無淚。

也因此，以 Flinto 來說，他較適合用在「功能不多、只需基本手勢就能操作」的無障礙 App 原型上，否則刻版或迭代時都會耗費設計師不少時間和精神力（汗）。而其他相似的原型工具，如 Principle，也能做出類似的效果，只是支援的手勢操作和動畫略有差異（e.g. Principle 不支援 double click）。

【Flinto】
⭕️ 優點：可以幾乎模擬所有報讀手勢、VoiceOver 的互動感
 
❌ 缺點：不支援 TTS 功能，需要外嵌音檔

Xcode: https://developer.apple.com/xcode/

Xcode：支援所有 VoiceOver 功能，唯要 Coding

團隊在嘗遍多個 prototyping 工具，以及無數日夜後，決定使用 Xcode 直接開發此次的無障礙 App 原型。因為 Xcode 本身就是 iOS 的開發環境，已經內建好所有的 iOS API，只要寫好怎麼呼叫，基本上所有的元件都能在短時間內建好。

以前面提到很重要的 Alt text 來說，Xcode 只需要在 Accessibility 中的 Label 欄位打上你要的替代文字就行。當原型開發完畢並輸出到 iPhone 後，ㄧ打開 VoiceOver，就會自動帶入應有的互動，也非常方便做後續的prototype 測試。

相較於前面兩個工具，使用 Xcode 最符合效益及成本考量。由於無障礙 App 的使用對象為全盲或是弱視者，視覺的華麗程度或是動畫複雜度並非要件，所以開發速度也會比較快，何況產出只是為了測試功能及資訊架構用的 prototype。

【Xcode】
⭕️ 優點：支援所有 VoiceOver 功能
 
❌ 缺點：需要一點 coding 基礎

結語：根據測試需求，選擇合適工具

回顧現存的原型工具，能夠做到完整報讀功能的其實少之又少。在有限的能力範圍內，設計師/研究員們也需挑對合適的工具，才能更有效率地完成測試。

如果未來有團隊要幫視障者做設計，並且有原型測試的需求，建議可以先試想原型的擬真度到什麼程度，再來決定合適的原型工具。這裡也想分享設計師們在著手畫出語音報讀 prototype 前，可以考慮的幾個問題：

原型要測試的視障者，其視力程度為何？是全盲、只靠語音報讀呢？還是保有部分視力，具一定程度的視覺操作能力？
原型所需的手勢多樣嗎？是否需要大量的語音報讀？
測試的目的只是展示概念呢？還是需要視障者實際參與操作？

上述的問題都可能影響原型測試的擬真度，進而衍伸出不同的工具需求，藉以幫助設計師們更妥善地利用時間，發揮最大的研究效力。
（但如果團隊有 coding 能者，且擬真度高、功能繁多，請愛用 Xcode。）

最後，再次幫大家綜整此次分享三個原型工具在設計語音報讀原型上的優缺點，及合適的測試情境，提供大家參考，也歡迎隨時分享團隊不及補充的地方，我們下次見🙆🏻‍♂️！

我們是一群來自不同背景凝聚而成的研究助理們與設計師團隊，這一系列文章記錄了我們開發輔助視障者公車搭乘體驗服務設計的心路歷程與想法。如果喜歡我們的分享，歡迎大家可以盡情的「拍手👏」直到50個，給予愛的鼓勵來表達你對這篇文章的喜歡與期待！更歡迎對社會設計充滿熱誠的咪那桑在底下留言與我們一同分享、交流，一起迸出不一樣的火花，用小小力量爲社會帶來大大的改變，這就是支持著我們團隊不斷前進的動力！