兩棲介面：BenQ Uni UI
跨產品的會議體驗整合設計
撰文者：BenQ Lifestyle Design Center
本文將分享我們是如何整合多種會議產品間的一致性設計，打造兩棲介面。開始閱讀前，可先前往認識 “ BenQ Uni UI ”
1. 為什麼需要整合跨產品的啟動介面？
隨著會議模式多元發展，我們發現過去認知的「一場會議使用一種會議設備」已不適用，開一場會可能會切換操作多種會議設備，或一天會穿梭多個會議場域使用到多種會議設備。
以智能產品來說，通常會搭載豐富圖象化的啟動介面 “ Launcher ”，它是與使用者溝通的第一個接觸點。然而，設計團隊在剛開始打造產品 Launcher 與介面時，考量的都是在此產品使用情境下最適合的操作方式，這會造成各產品線發展到後期，彼此之間的介面有了很明顯的差異。
當不同產品（投影機、顯示器、大型觸控顯示器）擁有各自獨立的 Launcher介面與操作行為，使用者切換不同產品操作時，無法將已有的認知延續到下個產品上，需要花時間重新學習，就可能會讓使用者感到混亂，無法有效溝通。
各產線發展穩定且成熟，設計團隊認為，是時候打破產品間界線，整合跨產品設計，不僅能建立一致性的使用體驗，對於開發面而言，建立共用標準能重複利用設計元素，減少開發時間。
因此，我們著手檢視現有產品服務與設計現況，站在使用者體驗角度，集結各產線設計師，發起了 “ New Corp. Launcher Design Project ” 整合跨產品的商務體驗計畫！
2. 定義開會時的常用功能
「在商務 Launcher 上應該擺放什麼功能？」「開會時常用哪些功能？」
首先，我們要先釐清會議需求，定義開會時的常用功能。
過去的非智能會議產品只能顯示資料用，現在多數會議產品都搭載智能系統，所以可以和內容本身或其它使用者有更多互動，例如雲端白板書寫、檔案遠端互傳、遠端視訊會議與其他更多相關應用程式，這些會議軟體服務打破空間限制，讓開會發揮最大價值。
透過團隊調研常見的會議情境以及會議旅程地圖，分析會議各階段的行為、目的與痛點，找出會議各階段需求，整理出 6 項常用功能：
- 無線顯示
1. Wireless Projection：跟隨 BYOD 風潮，實體接線顯示常遇到接孔規格不同的困擾，無線顯示透過網路連接讓行為更加友善方便。 - 共創協作
2. Whiteboards：溝通討論是會議最重要的行為，雲端白板匯入資料，讓多人同時書寫討論、筆記重點、截圖儲存，建立良好的溝通行為。
3. Collaboration：「多工視窗」同時操作 2 種軟體，一邊遠端視訊會議一邊白板書寫；「屏幕拼接」延伸畫布支援更多人同時互動，提供更大的使用或檢視空間；「子母畫面」可與外部素材有更多互動，補充內容說明…等，整合多種共創協作功能，讓會議行為更加靈活有彈性。 - 檔案管理
4. File Manager：會議前快速找到檔案，會議中可以隨時匯入檔案，並在會議後快速分享檔案。 - 情境推薦
5. Recommended Functions：推薦與介紹新功能或服務，例如 BenQ X-Sign broadcast 公告系統、或建議搭載觸控模組。 - 最近使用
6. Recently Used：軟體使用的歷史紀錄，方便在軟體間快速切換。
3. 開始跨產品整合設計：兩棲操作介面
目前各產品在 Launcher 設計上會依據不同產品的特性，例如投影機 Launcher適用遙控行為，大型觸控顯示器 Launcher 適合觸控操作。
新 Launcher 設計目標，將整合近距、遠距操作行為，打造在不同產品特性上都能直覺操作的兩棲介面。
大致的設計過程分為 5 個階段：整理介面元素 → 功能整合 → 視覺整合 → 導入單一產品 → 導入跨產品。
[ Step 1：整理介面元素 ]
提出新 Launcher 設計要從歸納整理開始，須先整理現有產品的規則與元素，才能提出符合使用者現有認知的一致性設計，因此我們將各產品 Launcher 介面上的內容，分成兩大類：
- 功能與顯示資訊：找出各 Launcher 上相同的功能，檢視相同功能是否有相同操作模式。解構各介面編排，每個區塊的目的性以及不同操作特性的組合，這樣能釐清功能的操作行為與區塊資訊的層級，有助於整合新的介面架構。
- 介面視覺元件：列出各 Launcher 的介面元件，如字型、符號、按鈕、視窗等，以及不同交互狀態。因為過去由不同設計師執行各產線設計，此動作可以歸納現有元件清單，找出體驗不同的介面元件。
[ Step 2：功能整合 ]
在介面佈局上規劃了 5 大區塊，希望能明確清晰的延續使用者操作行為。設計上考量了最佳視區的計算標準，以及配合人體工學、眼睛可視範圍與可觸區間的物件位置排列，編排成符合觸控遙控操作模式，定義兩棲 Launcher 的基礎框架。
Uni Launcher 5 功能大區：
1. 小工具區（上）
2. 三大常用功能區（中）
3. app捷徑區（中下）
4. 功能設定區（下）
5. 快捷欄（左右）
[ Step 3：視覺整合 ]
根據歸整好的現有元件清單與新 Launcher 框架，開始執行介面設計。首先定義風格主題，以「宇宙 universe」無邊無際、探索的意象發展視覺語言，設計基礎介面元件包含色彩、按鈕、符號、字型、視窗、主題桌布…等。
設計定案之後，我們整理成一套視覺設計規範，並建立共用的 design library。有了明確的設計規範，模組化元件可以加速開發效率，團隊設計師能隨時取用需要的素材，或同步更新元件，減少開發過程中不停找檔或反覆向多人確認樣式的情況。
[ Step 4：導入單一產品 ]
接下來，就是 “功能” 與 “視覺” 一致性的組合。由於跨特性的需求，大型觸控顯示器（Interactive Flat Panel, IFP）具備觸控與遙控多種操作模式，同時考慮公司決策，以 IFP 作為兩棲 Launcher 前期開發設計的主要機種。
為了檢視新 Launcher 的使用性，使用簡易的互動原型模組，透過系列任務來回切換特性操作，調整設計內容，以達到最佳的產品易用體驗。
[ Step 5：導入跨產品 ]
一致性並不等於完全相同，而是一個產品的使用認知可以延續到另一個產品上，體驗能夠連貫。當相同的內容被複製到不同產品上，會需要微調符合產品特性。
因此我們測試了將新 Launcher 導入各產品中，在標準框架下，調整符合產品各自特性，例如可觸控的投影產品在投影大尺寸畫面時，三大常用功能區會因為位置過高觸控不到，則需調整下移到可觸區間。也根據產品特性調整常用功能區的 3 項推薦功能，像是遙控行為不利於觸控書寫，或觸控產品較推薦共創協作功能。
4. 設計面最大的困難，來自不同特性的取捨與整合！
然而遙控與觸控存在行為本質的衝突，像是遙控無法做到拖曳、雙指點擊等觸控行為，目前市面上也較少有針對跨特性的設備提出整合性操作規範。因此許多觸控手勢的行為，都需特別規劃遙控操作，舉例透過手勢「拖曳」新增 app 到捷徑列，在遙控行為下，則需另外長按進入編輯模式，勾選新增 app。
面對跨特性衝突的取捨是很大的挑戰，因此站在使用者經驗的角度，共存操作特性時需有主副之分，定義觸控模式為主操作特性，以觸控友善為優先，再考慮遙控操作行為，以此方式實現特性共存的操作介面。
在介面設計現況，遙控與觸控模式介面也有很明顯的差異。主打遙控的介面，需依循遙控上下左右的軌跡，元件排列上多以水平排列，且較緊密；而觸控的介面設計上，元件需比手指大，按鈕排列間距需較寬。因此在介面編排上也考量了這些因素，保有水平排列符合遙控特性，並將需要點擊的功能安排在中下方的可觸區域。
5. 讓 BenQ Uni UI 帶你輕鬆開會，打造更有黏著力的品牌體驗！
產品的硬體特色，在會議空間應用是很明確的，像是投影機適合大空間簡報、觸控屏適合近距互動討論。如何讓公司產品在商務領域脫穎而出？除了升級硬規、優化軟服務與創新功能之外，我們認為整合跨產品的一致體驗能建立使用者對品牌的信任與依賴。
有一致的溝通語言，產品間不再獨立，可以串連設備延伸更多便捷的會議服務，像是拼接設備延伸更大的討論空間，使用同個遙控器來回控制跨裝置…等共創行為，創造 1+1 大於 2 的價值。
“ Uni ” 的命名除了宇宙 universe 的視覺主題外，更含括了3項設計特點：
- Make it easy and universal：整合視覺與操作行為，建立設備間一致通用的語言。
- Cross-unit control：打破產品界線，打造跨設備的自由控制體驗。
- Unite to get more inspiration：延伸設備之間組成協作共創模式，激發創意的無限可能。
Uni Design System不僅是新 Launcher 的介面設計，它賦予了各角色不同價值：
- 使用者：一致性的操作體驗，減少使用學習負擔。
- 設計師與開發者：標準化系統設計規範，提升開發效率。
- 企業品牌：品牌形象營造，建立品牌專屬體驗。
最後，BenQ Uni UI 也獲得 2020 iF 產品視覺溝通設計獎 的肯定，這是跨產品體驗一致性的開端，讓產品開發標準化且更有延展性，打造順暢且具啟發性的專屬會議體驗！
