前言：全平臺系統交互設計——這個詞對于交互設計師來說應該都不陌生，因為這最終決定著用戶的體驗。盡管這個概念還不成熟，但是目前是主流的操作系統的市場份額、出貨量以及用戶認可方面的差異，讓我們看到打造流暢的全平臺體驗的必要性。這也許會成為下一代應用的基礎規則,正如當初的響應式設計一樣。今天我們將分享騰訊文檔的全平臺系統交互設計。

背景

“操作系統對我們而言已不是最重要的了，更重要的是應用和服務。” [1]

– 微軟 CEO Satya Nadella

去年微軟發布的便攜折疊屏設備 Surface Duo 首次搭載了來自 Google 的安卓系統，而微軟 CEO 也在隨后的采訪中表示 Windows 系統已不是微軟未來的重心，他們更關心開發者如何為這些設備創造應用，無論這個平臺是 Windows 還是安卓。與此同時，為了更好地服務開發者，微軟也終于將原有的 UI Fabric 框架和移動端框架遷移到一個庫并統稱為 Fluent UI ，正式完成跨平臺系統 Fluent Design 的搭建。而官方推出的全新 Office 套件移動版（安卓+iOS）則是應用 Fluent Design 一次很好的應用和推廣。

微軟重應用輕系統的策略固然有它自己的歷史原因，但我們仍可以從中窺見系統之間壁壘減弱的趨勢。近幾年主流系統之間也有很多互相借鑒和融合，例如如今很多安卓手機默認采用了蘋果的 home bar 取代三大金剛鍵，而蘋果 iOS 14 系統中的桌面插件也被認為“逐漸安卓化”。交互方式逐漸成熟和趨同后，平臺系統退至幕后。服務開發者，讓開發者為用戶創造更大的價值才是長久之道。

除此之外，隨著移動設備的生產力逐步加強，手機、折疊屏、平板、電腦之間的界限變得模糊，端與端的差距也在縮小。同樣是去年，蘋果正式推出 iPadOS 系統，對鍵鼠的靈活支持讓移動端的便捷和桌面端的超強生產力進一步融合。而從應用的開發而言 Electron、Flutter 等跨系統框架層出不窮，開發者也在不斷嘗試在不同平臺上用一套代碼提供同一套服務，減少系統隔閡所帶來的維護成本。

盡管全平臺系統設計的概念還不成熟，但我們可以看到打造流暢的全平臺體驗的必要性。這也許會成為下一代應用的基礎規則，正如當初的響應式設計。

騰訊文檔面臨的挑戰

騰訊文檔發布于 2018 年，支持主流的平臺和系統。但隨著功能的擴展，設計和開發維護成本也在多線程同步增加，而且因為開發的時間差，很容易出現體驗不一致，功能對不齊的情況。對于快節奏的互聯網行業，多線并行的試錯成本也比較高。

騰訊文檔支持的端和平臺

初期騰訊文檔為了快速上線，同時保持各平臺的一致性，手機端和平板端的 App 都是基于 Web 簡單適配而來，性能較差，無法滿足用戶的基本訴求。為了從根本上解決問題，文檔團隊對于產品在全平臺和端上的表現重新進行了審視，對框架進行了設計調整和優化，希望通過這次改版給用戶帶來更流暢高效的全平臺體驗。

全平臺設計的原則

此時此刻，一個騰訊文檔的白領用戶可能正在工位寫報告或通勤的路上查閱文檔，一名學生可能在電腦上寫論文或者去打印店打印，一位老師則可能剛剛發了一份在線統計表格到群里讓各位家長在手機上填寫。騰訊文檔需要盡可能多地覆蓋渠道和場景，支撐用戶真正做到隨時隨地打開文檔，快速完成當下的任務。

但值得注意的是，在全平臺的設計當中我們并不追求完全的一致，而是整體感知的和諧。一致的界面可以降低認知成本，但用戶在不同環境也會有不同預期，例如在性能更強大的設備上自然希望能夠完成更復雜的任務。那么騰訊文檔如何保持其“效率”的特征？為此我們確立了以下設計原則： 確保內部感知的一致性，讓各端效益最大化。

全平臺設計的原則

確保感知的一致性

一致性是產品設計的基礎，它可以大大減少用戶的學習成本，同時強化用戶對產品調性或者品牌的認知。

好的品牌規范可以起到從風格上起到提綱挈領的作用，如主色調，字體，icon 風格，和用戶對話的語言語調等等。而完善的設計系統則可以深入到組件，讓用戶從使用習慣上覺得熟悉和順暢，從而創造一致的產品體驗。

各端效益的最大化

如果說產品的核心體驗是一塊石頭，那么桌面設備、移動設備、小程序等等就像形狀各異的容器。當把核心體驗放到不同的容器中時，充分利用該環境的優勢，填充體驗縫隙，對于騰訊文檔這樣的效率型產品則尤為重要。

我們可以從三個維度去考量和發現機會：平臺環境 / 使用姿態 / 交互方式。

效益最大化的三個維度

1. 平臺環境

1.1 屏幕尺寸

電腦、平板、手機的基礎布局差異；異形屏、折疊屏，手機的橫豎屏，瀏覽器窗口的拉伸適配。

1.2 系統環境

Windows 和 Mac 的頭部有差異；部分 Android 系統底部保留了虛擬三大金剛鍵；小程序右上角固定有一個控件；H5 自帶頂部和底部導航欄，需考慮最小展示區域。

1.3 平臺特性

移動端可通過跳轉應用快速授權登錄或分享到社交平臺；桌面端可通過鼠標拖拽快速上傳或批量操作。

常見的平臺環境示例

2. 使用姿態

用戶在移動端的使用通常為臨時態，短時間內聚焦單個任務。此時明確的導航和突出重點信息能夠更好地幫助用戶完成任務。

而用戶在桌面端的姿態通常比較專注，可能持續一段時間。此時在界面中高效清晰地展示較豐富的信息能夠更好地利用戶的注意力，減少不必要的跳轉，高效完成任務。

3. 交互方式

相同的布局在不同的平臺上也要面對不同的交互方式。手指左劃右劃，長按拖拽都是移動端的常見操作，而在桌面端通過鍵鼠控制時，則需要轉譯為鼠標左右鍵點擊，點擊拖拽等。此外在桌面端善用快捷鍵也是提升效率的重要方式，尤其是對于具有一定經驗并尋求進階的用戶，培養習慣也有助于提升用戶粘性。

除了核心交互方式的差異，移動端還有兩個獨特的優勢：1. 更豐富的輸入形態。例如拍照掃描，語音錄入，手寫筆，陀螺儀 (例如甩動手機撤回輸入)，定位系統等。恰當進行利用能夠給用戶帶來不同于桌面端的效率提升；2. 更方便通過QQ/微信等社交平臺進行分享傳播。挖掘社交平臺中的場景帶來新用戶，形成良性循環。

平板設備需要額外注意，特別是針對新的 iPadOS 系統。它雖以移動端交互為主，但也融合了鍵鼠的適配。因此必要時也需要提供元素的 hover 響應，并和開發同學定義好鍵盤快捷鍵和鼠標點擊的交互策略。

以原則為尺，定義規則

接下簡單分享一下騰訊文檔的實踐過程。我們在“確保內部感知的一致性，讓各端效益最大化”的原則下，采用從靜到動，從外到內，從通用到特殊的順序著手定義規則。

1. 定義各端靜態主框架

手機端 的特點是專注當前任務?？梢酝ㄟ^信息降噪，加強對比來讓信息傳達能明確，幫助用戶完成單個任務；而清晰的導航可以避免小屏幕上頁面頻繁切換所帶來的導航負擔。

用戶通常為單手手持設備，因此我們將主導航下移使得更容易點擊。此外在框架上預留了語音，拍照等快捷創建內容的入口規劃。

平板端 在交互方式上和手機很相似，但更大的屏幕尺寸允許用戶實現輕量的多任務。在平板上我們支持了三欄布局以提升信息展示效率，減少不必要的頁面跳轉。考慮到用戶通常為雙手手持，我們將主導航放在了左側更方便點擊的位置。

桌面端 是主力生產平臺，通常是多窗口多任務，鍵鼠操作精確高效。在專注姿態下，我們可以盡量安靜地展示更多常用功能，讓用戶在一個視圖中即可完成相對復雜的任務。同時在列表頁中，更大的空間讓我們可以把目錄樹展開，減少導航跳轉。

下圖匯總了三個端導航的映射關系以及功能上的差異點。

2. 布局的動態響應

系統的強健性：系統在一定參數擾動下，仍能維持某些性能的特性。

定義完各端的靜態框架后開始考慮中間狀態的響應過渡。如今設備之間的差異越來越模糊，使用方式也越來越靈活。要想低成本地應對，我們需要對頁面進行足夠的分解和抽象。而這就不得不提到 iOS 系統中一個叫 Size Classes [3] 的概念。

Size Classes 發布于 2014 年蘋果的開發者大會 ，在這個規則中開發人員可以無需判斷設備的類型，而是將屏幕的長和寬抽象為寬松和緊湊兩種類型，從而組合出不同的設備尺寸。開發人員只要在 Xcode 中設置好在對應布局下的顯示規則即可，iOS 系統會自動根據內容的尺寸類型去調整布局。這套規則大大減輕了開發人員的適配工作量，也為蘋果之后更多尺寸和更高分辨率的設備適配的打下基礎，吸引更多開發人員用更小的成本開發出通用的應用。

蘋果設備的 Size Classes 示例

參考 Size Classes 的規則，我們將頁面定義為寬松和緊湊兩種布局。那么一個頁面可能適用于寬松或緊湊的布局，或者由多頁子頁面組合而成，而子頁面的布局則根據它當前的尺寸去判斷是適用于寬松還是緊湊布局。這樣只需要定義兩種基礎布局的響則即可組合出更多頁面。

以下圖的平板界面為例，它實際上由一個列表頁 (緊湊布局) 和詳情頁 (寬松布局) 組合而成。在手機端顯示時，每個子頁面則成為一個獨立的頁面，繼續根據尺寸判斷布局策略即可，無需重新定義間距。

3. 容器的動態響應

在頁面的布局策略發生變化時，頁面里的容器也需要進行一些形態變化以更好的適用當前場景。以菜單為例，在緊湊布局下通過增加蒙層的方式可以讓用戶更好地聚焦當前任務。

而當屏幕尺寸較大，頁面響應為寬松布局時，在觸發菜單的按鈕附近以浮層的方式展示則可以避免中斷用戶的流程，并保留更多環境信息。

4. 排查特殊環境

制定完通用規則之后需再排查一遍是否有特殊場景被遺漏。比如產品在第三方平臺內嵌的場景。

以內嵌到企業微信的騰訊文檔應用為例，現網多導航的嵌套導致文檔幾乎不可用。但因為企業微信是效率辦公用戶重要的一環，它對我們用戶有重要的價值，因此在平衡投入和收益后，我們仍為這種情況補充了特殊的響應策略。

企業微信中的“騰訊文檔”應用

項目成果

經過調整，騰訊文檔的新版 App (手機/平板) 以及電腦客戶端 (Windows/Mac) 均已上架。iPad 版本也支持鍵盤和鼠標啦，歡迎下載體驗。

后記

[[373772]]

Craig Federighi 在演示 Cnontinuity demo [4]

最后讓我們回到 2014 年，蘋果在的 iOS 8 的發布會上首次推出了 Hand-off 功能。你可以在手機上編輯一封郵件或短息，然后在另一個設備上無縫銜接繼續編輯。通過 iCloud 和藍牙，蘋果的應用可以在 Mac，iPad 和 iPhone 之間時刻保持體驗上的連貫性。我想這是全平臺設計進程中的最令人激動的真正的創新。

當萬物互聯的時代到來時，一切都可以成為媒介，一切都可以交互。也許那時候真的可以做到“內容就像水”，跨過系統和平臺的壁壘實現流暢無縫的體驗。

跨過系統和平臺的壁壘，實現良好的用戶體驗，也是讓設計得到更高的評價的基礎。