撰文者: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 介面上的內容,分成兩大類:
[ 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項設計特點:
Uni Design System不僅是新 Launcher 的介面設計,它賦予了各角色不同價值:
最後,BenQ Uni UI 也獲得 2020 iF 產品視覺溝通設計獎 的肯定,這是跨產品體驗一致性的開端,讓產品開發標準化且更有延展性,打造順暢且具啟發性的專屬會議體驗!