# 兩棲介面設計 : BenQ Uni UI
黃帥豐：BenQ / 使用者經驗設計處 / 設計副總監

# 一、何謂兩棲設計？

BenQ uni UI 是一套跨會議裝置的介面設計，被稱為兩棲設計產品，而兩棲是指符合「遠端」跟「近端」的介面設計。

關於此產品的誕生，源自以解決會議所遇到的問題。

情境舉例：
「員工在準備遠端會議過程中，常會遇到螢幕轉接問題，可能一下只有 VGA 線可以使用，或是找不到線，而真正轉接到螢幕上時又有色彩顯示問題，不知道如何調整。故整體過程相當繁複、困擾。」

## 學習與工作方式演變
趨勢研究知識工作者的學習與工作方式發現，有兩個詞頻繁出現：LI、PBL，這兩個縮寫非新的詞，但會繼續影響未來的學習與工作方式。
### LI／Location Independence
- 數位遊牧
- 網路進步讓工作環境不受限
- 自在的工作環境可以激發創造力
### PBL／Project-based Learning
- 專題學習模式
- 融合多種學科在不同教室學習，與生活情境連結，讓學習能夠更具吸引力，ex:科展
### Hybrid Working/Learning
- 疫情促進遠距學習或辦公的發展
- 疫情過後遠端和近端的差異會越來越小會有更多流動、混合的工作情境
### Huddle room
- 因應彈性的辦公環境誕生
- 軟體＆空間會因應遠端跟近端工作方式調整

## Chanllenges
- 公司內部：
- 產品在內部都是獨立專案運作，不同事業群下，市場區隔跟產品定位都不同
- 遠近距離的操作行為會影響介面設計，ex:
- 投影機：遠距離操作，鍵盤在畫面下方，讓使用者透過遙控器操作
- 觸碰型螢幕：近距離操作，鍵盤顯示在操作者的局部範圍內
- B2B 市場經營，從傳統單一銷售轉為銷售整體方案
- 會議室、教室會使用多種設備，達成各種目標，依據會議討論狀況從單向變成雙向互動，像是使用電子互動白板討論

### 總結：
1.解決移動性、彈性工作與學習問題
2.不同裝置不同操作行為問題
3.需要有效進行會議的解決方案

# 二、UX Design Stage
UX 團隊帶領進行 6 個會議階段，每個階段都有相應的目的，越後面的階段可以了解越多資訊：

**1. UX 0. Discover
2. UX 1. Planning
3. UX 2. Structure Design
4. UX 3. Content Design
5. UX 4. Verification
6. UX 5. UX Testing**

## Step.1 〉UX 0.Discover
- 需求確認與發掘
- 產出 B2B 使用者旅程
#### Surveys(Desktop Research)
- 進行假設：將產品使用過程中，使用者會遇到的痛點做紀錄

#### Scenario Simulation
- 情境模擬：哪些環節如何增加老師在教學上的效果
#### Interviews
- 實地訪談：請老師實際應用產品，優化旅程地圖
- 請老師說明教學經驗：用什麼邏輯跟方法促進學生學習，讓學生做紀錄分享筆記方式
- 課程觀察：傳統白板有檢視上的範圍限制
- 實際使用產品：在有操作問題時即時給予回饋，讓老師感受使用產品有什麼好的影響
#### Observations
- 不論公司會議或是教室情境，人們喜歡透過不同地方跟人們激發創意，但更偏好在熟悉的環境中學習
- 總結三大痛點：
- (1)前期設備設定複雜
- (2)不同檔案來源裝置切換不易
- (3)如何在會後提供資訊

## Step.2 〉UX 1~3.Planning / Structure Design / Content Design
- 規劃階段，根據痛點擬定三大原則（Design Principles）

### 一致性：最高原則
- 考慮不同載具的操作差異，提供清晰與明確的架構，符合人因工程，制定整體規範。
- 把產品類別依據應用情境（商務/教育）做市場分類
- 把產品介面與元件依序列出，包含距離、操作、架構、導航、元件、文字大小和系統行為
- **操作距離：遠近距離的定義**
- 近距離操作：裝置前，點擊拖曳行為
- 中距離操作：講台到顯示畫面，滑鼠操作介面
- 遠距離操作：第一排到第二排的位置，到顯示裝置的距離，遙控器操作
- 超過上述距離，有另一套遠端控制軟體可以輔助
- **介面設計**
- 近距離使用會有人體工學的使用限制
- 介面物件安排需符合普通身高者的操作舒適範圍
- 螢幕頂部：顯示不需要互動的資訊
- 中間：主要內容
- 底部：控制設備的
- **Navigation**
- 主選單以十字結構進行導航設計
- 子選單以田字的結構進行設計
- **Focus**
- 為了讓任何距離都能適用，故強調 Focus 的回饋讓使用者知道現前的操作是有效的
- **Component**
- 依據不同裝置給不同預設值，近距離是小鍵盤、遠距離是大鍵盤
- **Font Size**
- 研究顯示視角會因年紀增長改變檢視角度，公式會用 0.75 來做設計
- 須依照字體特性做大小調整
- **系統行為（Home / Back / Menu）**
- 螢幕兩側系統控制 Bar：感應到使用者觸碰行為才會顯示
- 遙控器：透過硬體按鈕控制系統行為，螢幕兩側 Bar 會隱藏避免互相影響
- **UI / GUI Guideline**
- 將所有行為跟設計定義成規範，確保設計師與開發團隊可以開發出具有一致性的產品

### 簡單易用：
- 介面上的圖示與動態引導使用者操作
- 插畫調性與規範(風格、色彩、肢體動作)也包含在設定中
- 考量會議裝置需能順暢切換，兩個裝置並行使用時，使用畫面跟操作面皆可以合併
### 效率性：
- 需讓使用者在操作面上更直覺，更方便提供會議資料等
- 縮短使用者登入過程
- 帶著筆電找不到連接線時，透過投屏協助解決問題
- 切換訊源、內容整合，避免中斷討論過程
- 會議結束，文件可以輕鬆存取在隨身碟中
## Step.3 〉利益關係脈絡圖
- 成功運行專案必要元素是與人的溝通
- 利用脈絡圖列出依據利害人屬性做溝通內容調整
## Step.4 〉UX 4~5. Verification / UX Testing
- 驗證到使用經驗測試階段
- 開發後與開發同事密切合作，版本釋出就會確認設計跟行為上是否正確，有問題就會馬上回饋修正，直到產品發佈上市。
- 經營使用體驗測試：上海 Fabo 與台北 fever lab 實測產品給予回饋
- 明基酷客學堂，讓學生與老師一起設計，UX 設計師會透過授課過程觀察
- BenQ Analytics：透過量化數據具體掌握使用者常用功能以及使用實際比例，質化與量化可以更精確評估產品需要強化與弱化哪些功能

# 三、總結
### “BenQ uni UI 背後還包含許多軟體跟應用服務，相信此會議方案會為 BenQ 在 B2B 創造更大的價值“
- 不論在企業或教育上面都是客戶的理想選擇
- 對於介面設計而言，BenQ uni UI 打造了一套更具彈性、反應更即時的介面流程
- 整體專案的設計團隊有 3 位 UI 設計師、5 位 GUI 設計師、1 位動態設計師

###### tags: `IxDTW2021`