呂 元 碩
Yuan - Shuo Lyu
t n oi P of w e Vi 2016 - 2018 @ UI / UX / Service Design
Design
Portfolio
Route 1
路線規畫
1 hr 20 mins
國父紀念館站
Between Journey
往 捷運國父紀念館
Support visually impaired people exploring the world.
204 212 捷運國父紀念館
板南線
往 捷運台北車站 捷運台北車站
1503
往 鶯歌火車站
GO
Social
Design
APP
Design
UX
Research
Service Dsign
Project Designer
呂元碩
侯柏羽
葛承恩
03
乘經驗
交通工具搭
視障旅客的
1 . 因 為 不 知 道 公 車 進 站 的 班 次，視 障 者 自 製 號 碼 版 等 公 車。
1
2 . 從 公 車 站 到 捷 運 站 的 路 途 中 需 要 旁 人 協 助。
02-1
2
視 障者
多 久外出
57%
交 通方式
13 %
14%
16 %
的 服 務。人 們 透 過 各 種 不 同 交 通 方 式 的 串 聯，享 受
98 %
每 天外 出
視 障者出門
台 北 市 裡 的 大 眾 交 通 工 具，提 供 著 各 種 便 宜、快 速 著 在 城 市 裡 移 動 的 樂 趣 及 體 驗。然 而，在 缺 乏 視 覺 的 輔 助 下，每 一 個 轉 乘 的 環 節 對 視 障 者 來 說，都 是
很 大 的 挑 戰。但 是 大 眾 交 通 系 統 的 發 達 與 便 利 性，
經常外出
使 得 這 樣 移 動 方 式 對 於 他 們 來 說 依 舊 不 可 或 缺。
57%
因 此，我 們 決 定 利 用 這 一 年 的 時 間，透 過 觀 察 以 及 訪 談 視 障 者 在 轉 乘 上 所 遇 到 的 不 便，透 過 設 計，為 他 們 補 足 交 通 轉 乘 上 的 不 便，達 到 更 好 的 移 動 服 務
倚靠家人及親友
大眾交通運輸工具
及 體 驗。
其他
計程車
02-2
題聚焦
質化訪談問
專案架構及
UXD
資料收集 + 質化訪談
UI 設計 + 原型製作
UXT
設計服務架構、使用者心智圖 跨領域合作，開發APP原型
使用 者測試，收集建議回饋 優化 功能，提升產品易用度
4
+3
前期參與，共7位視障者
原型測試 + 設計優化
重複迭代 測試
確認問題價值，找出設計目標 蒐集各國案例，了解現有解法
設計
定義
。
UXR
使用Swift 及 Prott 製作原型
02-3
4條測試路線，3位測試者
出門的行前準備耗時
在 準 備 出 門 前，視 障 者 總 是 得 先 鉅 細 靡 遺 的 將 要 搭 乘 的
交 通 路 線 ( 幾 號 公 車？哪 裡 轉 乘？) 牢 記 清 楚，避 免 迷 路 的 風 險，這 樣 的 行 前 準 備 總 是 得 花 上 大 量 時 間。
在捷運站內探索設施的需求
對 視 障 者 來 說，要 在 捷 運 以 及 火 車 站 裡 得 知 站 務 台，抑
或 是 其 他 設 施 的 位 置，非 常 不 容 易。只 能 倚 靠 手 杖 或 是 路 人 的 帶 領。
在公車站時難以取得資訊內容
在 搭 乘 公 車 時，由 於 缺 乏 類 似 站 務 員 的 角 色 提 供 協 助，視
障 者 常 常 會 遭 遇 許 多 問 題，例 如：不 知 道 自 己 要 的 公 車 是 否抵達?不確定公車還會多久到達等等...
02-4
發展
設計目標與
應用技術及
Between Journey 是一款專為視
VoiceOver :
接 收 都 市 內 B e a c o n 的 訊 號，並 以 語
基 礎 的 螢 幕 報 讀 器。只 要 手 指 觸 碰 或 在 螢
障 者 而 設 計 的 交 通 轉 乘 A P P。透 過
V o i c e O v e r 為 I O S 系 統 內，以 滑 動 手 勢 為
音 報 讀 系 統「 V o i c e o v e r 」念 出 整 合
幕 上 拖 曳，就 會 報 讀 出 螢 幕 上 的 內 容。
過 的 交 通 資 訊，為 視 障 者 創 造 更 友 善 的 搭 乘 體 驗。
iBeacon:
i B e a c o n 為 定 位 服 務 的 一 種 新 技 術，以 低
功 耗 藍 芽 傳 輸 位 置 訊 號，範 圍 更 小 卻 更 為 精 準，適 合 空 間 中 的 微 定 位 及 室 內 導 航。
Between Journey
02-5
更 加 友 善 的 交 通 系 統：
透 過 將 i B e a c o n 佈 設 在 城 市 中，利
用 其 小 範 圍 的 精 確 定 位，提 供 視 障 者在城市移動時所需要的交通資訊
。例 如：在 行 走 時，需 要 辨 認 的 環 境 訊 息；在 轉 乘 時，需 要 確 認 的 交 通 資 訊；在 捷 運 站 內 時，可 以 自 力 探 索 設 施 的 導 航 指 引。
為視障者重新改造現階段的交通系 統，是 不 切 實 際 的。但 應 用 新 型 態 的
科技以及配合軟體在移動裝置端的 普 及，B e t w e e n J o u r n e y 作 為 現
有 大 眾 交 通 系 統 下 的 延 伸 服 務，對
於 幫 助 視 障 者 探 索 城 市 是 更 有 效、 也 是 更 實 際 的 方 式。
02-6
面規範
點及定義介
設計特色重
Between Journey
提供視障旅客在轉乘中的
的 三 大 設 計 特 色：
行 走 輔 助，以 及 周 遭 環 境 資 訊。
即時更新視障旅客在轉乘
中，所 需 要 的 交 通 資 訊， 讓 轉 乘 更 為 流 暢。
為視障旅客規畫起點至目 的 地 的 交 通 搭 乘 路 線，減 輕 行 前 準 備 的 負 擔。
02-7
輸入 區域 重點 標籤
資訊 陳列
動作 指令
動作 按鈕
頁籤 架構
站務台 出口
2 . 加 粗 並 簡 化 圖 標 線 條，便 於 一 眼 辨 別，增 強 易 讀 性。 3 . 分 類 並 定 義 報 讀 種 類，同 時 給 予 特 定 顏 色 及 形 狀。
02-8
火車
廁所
公車
其他
1 . 訂 定 U I 的 操 作 規 範，規 範 出 顏 色 運 用 以 及 排 版 方 式，統 一 設 計 規 格，讓 使 用 上 更 有 系 統。除 此 之 外，顏 色 選 用 灰 底 對 比 出 按 鈕 和 圖 標 的 高 彩 度 顏 色，營 造 出 大 的 視 覺 反 差，讓 弱 視 族 群 更 容 易 辨 認。
捷運
1
2
3
情境應用
介面說明及
公車站
台灣科技大學 往 六 張 犁、台 北 1 0 1
版 面 以 黑、灰、白 等 高 對
將位置資訊以前方/右方/左
比 的 顏 色 呈 現，並 放 大
方 / 後 方 的 順 序 進 行 報 位，符
字 體 便 於 弱 視 者 閱 讀。
合 視 障 旅 客 行 走 探 索 的 習 慣。
1 . 接 收 到 B e a c o n 的 訊 號，視 障 旅 客 可 以 隨 時 透 過 手 機 得 知 最 新 的 公 車 動 態，包 括 抵 達 時 間 和 班 次 進 站 狀 況 等。
2 . 在 捷 運、火 車 站 體 內，視 障 旅 客 藉 由 廣 布 的 B e a c o n 來 得 知 自 己 的 位 置，並 且 可 以 依 照 A P P 提 供 的 資 訊，在 站 內 自 由 探 索 想 要 去 的 地 方。
02-9
1
2
於 提 示 前，給 予 當 下 狀
況 圖 標，提 醒 視 障 旅 客。 捷運公館站
1 . 在 從 公 車 站 轉 乘 至 捷 運 站 的 途 中，視 障 旅 客 可 以 利 用 沿 路 上 的 b e a c o n，提 供 周 遭 環 境 資 訊 以 及 追 跡 線 索，輔 助 視 障 旅 客 前 往 下 一 轉 乘 站 點。
02-10
1
驗地圖
顧客旅程體
棕11 綠13 藍20
準 備 出 發，行 前 規 劃
14分 11站 目前未發車 25分 3站
650
抵達交通站點
公車站
路線規畫
台灣科技大學 往 六張犁、台北1 0 1
公車站
呼叫司機
路線資訊
和平高中
捷運六張犁站
喬治商職
三興國小
吳興街口 世貿中心
市 政 府（松 壽）
市政府(松智)
捷運市政府站
消防局
興雅國中
行前準備變得更 加方便以及效率
線性資訊陳列 聆聽更有條理
串連Beacon隨 時更新交通狀況
以顏色來區分大眾交通
對 視 障 者 而 言，線 性 的 資
當 使 用 者 一 旦 接 收 到
的 交 通 概 覽，以 及 轉 乘 點
得 上、或 是 聆 聽 效 率，更
及時更新最新的交通站
工 具 種 類，並 給 出 該 路 線 ，讓 路 線 資 訊 一 目 瞭 然。
訊 陳 列 方 式，無 論 是 在 取 符 合 視 障 者 使 用 習 慣。
02-11
距離
距離
距離
距離 距離
距離
距離
距離
距離
距離
距離
5分鐘
7分鐘
9分鐘
10分鐘
12分鐘 13分鐘
15分鐘
17分鐘
20分鐘
24分鐘
29分鐘
通知司機協助視 障旅客上下公車
如果找到想要搭乘的班次
B e a c o n 信 號，手 機 將 會
，視 障 旅 客 可 以 透 過 A P P
點 狀 況。
幫 忙 協 助 上 下 公 車。
連 絡 該 班 次 司 機，請 司 機
650
3
抵 達 第 二 站 點，開 始 轉 乘
已於
4
公 車 650
公車 650
捷運站
將於
M 8出口 - 捷 運 台 北 車 站
台北車站B1
5
分鐘前抵達
15
分鐘後抵達
三星國小
分鐘後抵達
吳興街口
世貿中心
我要下車
取得轉乘資訊
和平高中
距離
5分鐘
喬治商職
距離
9分鐘
捷運六張犁站 三興國小 吳興街口 世貿中心
市 政 府（松 壽） 市政府(松智)
距離
7分鐘
距離
10分鐘
距離
13分鐘
距離 距離 距離 距離
近忠孝西路
廁所
M 2出口 - 捷 運 台 北 車 站
電梯
近市民大道
車站大廳 - 台 北 火 車 站
站務台
京站時尚廣場、台北 轉 運 站
出口
B 1售票亭 - 台 北 火 車 站
地標
捷運地下街、台北 轉 運 站
台北車站(東 三 ) 近忠孝西路一段
12分鐘 15分鐘 17分鐘
提示視障旅客 距離 24分鐘 周 遭 交距 離通 2站 點 興雅國中 9分鐘 捷運市政府站 消防局
捷運／火車站內探索
20分鐘
即時規劃路線 轉乘交通更順暢
提供捷運站內設 施步行導航指引
客製化聆聽資訊 貼近使用者需求
在 搭 乘 公 車 時，若 周 遭 有
只要視障者想要前往不
在 捷 運 站 內，視 障 旅 客 可
為了使取得站內設施資訊
主 動 提 示 視 障 旅 客，達 到
更 新 路 線，讓 視 障 者 在 轉
過Beacon的報位及導
提供客製化聆聽資訊的功
交 通 轉 乘 站 點，手 機 將 會 更 好 的 串 連 服 務。
同 的 轉 乘 點，手 機 會 即 時
以 選 擇 想 去 的 地 點，並 透
乘 途 中，不 再 迷 路。
航 前 往。
02-12
更 符 合 視 障 旅 客 的 需 求， 能。
型測試影片
構定義及原
導航訊息架
路上導航
前往
請沿右側追跡 直行20公尺
M8出 口 - 捷 運 台 北 車 站
請 左 轉，沿 著 右 側 追 跡 直 行1 0 公 尺
請 沿 右 側 追 跡 直 行 20 公尺 請 繼 續 直 行 10公 尺 後 準備過馬路
正 前 方 為 馬 路，請 注 意 右方來車
正 前 方 為馬路，請 注 意 右 方來車
請 沿 右 側 追 跡 直 行 40 公尺 請 沿 右 側 追 跡 直 行 40 公尺 請 繼 續 直 行 30公 尺
報讀地點
站 務 台、廁 所
動作指令
行走距離
請左/右轉/直行
公尺+(追跡線索)
請 繼 續 直 行 20公 尺
狀況預告
請 繼 續 直 行 10公 尺 後， 狀況+距離 準備左轉 請 右 轉，直 行 10公 尺 後 準備上樓梯
基本行走導航內容訊息
上 樓 梯，3公 準補 備述 訊 息 當 下 路尺 段後 狀況 右轉 請 右 轉，直 行 5公 尺 抵 達目的地
02-13
1 實 驗 前 向 受 測 者 解 說 測 試 流 程 及 方 法。
1
2 . 受 測 者 配 戴 藍 芽 耳 機，接 收 實 驗 者 播 放 訊 息，給 予 指 示。 3 . 實 驗 過 程 紀 實。
2
3
4
4 . 測 試 結 束 後，蒐 集 受 測 者 體 驗 回 饋。
經 過 六 個 月 的 使 用 者 研 究 及 設 計 原 型 開 發，我 們 以 藍 芽 耳
機 和 i P h o n e 來 模 擬 視 障 旅 客 真 實 使 用「 B e t w e e n
影 片 連 結：
J o u r n e y 」的 過 程。受 測 者 配 帶 藍 芽 耳 機，並 由 實 驗 者 播
放 訊 息，模 擬 路 上 導 航 情 境，測 試 導 航 訊 息 架 構 可 行 性。並
將 測 試 過 後 的 使 用 者 回 饋 作 為 未 來 產 品 及 服 務 優 化 方 向。
02-14
【聲音的地標】
APP原型測試紀錄
【Between Journey 】 APP概念說明影片