“操作系統(tǒng)對我們而言已不是最重要的了，更重要的是應(yīng)用和服務(wù)?！?[1]- 微軟 CEO Satya Nadella

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

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

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

盡管全平臺系統(tǒng)設(shè)計的概念還不成熟，但我們可以看到打造流暢的全平臺體驗的必要性。這也許會成為下一代應(yīng)用的基礎(chǔ)規(guī)則，正如當(dāng)初的響應(yīng)式設(shè)計。

騰訊文檔面臨的挑戰(zhàn)

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

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

全平臺設(shè)計的原則

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

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

確保感知的一致性

一致性是產(chǎn)品設(shè)計的基礎(chǔ)，它可以大大減少用戶的學(xué)習(xí)成本，同時強化用戶對產(chǎn)品調(diào)性或者品牌的認(rèn)知。

好的品牌規(guī)范可以起到從風(fēng)格上起到提綱挈領(lǐng)的作用，如主色調(diào)，字體，icon 風(fēng)格，和用戶對話的語言語調(diào)等等。而完善的設(shè)計系統(tǒng)則可以深入到組件，讓用戶從使用習(xí)慣上覺得熟悉和順暢，從而創(chuàng)造一致的產(chǎn)品體驗。

各端效益的最大化

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

我們可以從三個維度去考量和發(fā)現(xiàn)機會：平臺環(huán)境 / 使用姿態(tài) / 交互方式。

1. 平臺環(huán)境

屏幕尺寸

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

系統(tǒng)環(huán)境

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

平臺特性

移動端可通過跳轉(zhuǎn)應(yīng)用快速授權(quán)登錄或分享到社交平臺；桌面端可通過鼠標(biāo)拖拽快速上傳或批量操作。

2. 使用姿態(tài)

用戶在移動端的使用通常為臨時態(tài)，短時間內(nèi)聚焦單個任務(wù)。此時明確的導(dǎo)航和突出重點信息能夠更好地幫助用戶完成任務(wù)。

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

3. 交互方式

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

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

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

以原則為尺，定義規(guī)則

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

1. 定義各端靜態(tài)主框架

手機端 的特點是專注當(dāng)前任務(wù)。可以通過信息降噪，加強對比來讓信息傳達能明確，幫助用戶完成單個任務(wù)；而清晰的導(dǎo)航可以避免小屏幕上頁面頻繁切換所帶來的導(dǎo)航負擔(dān)。

用戶通常為單手手持設(shè)備，因此我們將主導(dǎo)航下移使得更容易點擊。此外在框架上預(yù)留了語音，拍照等快捷創(chuàng)建內(nèi)容的入口規(guī)劃。

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

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

下圖匯總了三個端導(dǎo)航的映射關(guān)系以及功能上的差異點。

2. 布局的動態(tài)響應(yīng)

系統(tǒng)的強健性：系統(tǒng)在一定參數(shù)擾動下，仍能維持某些性能的特性。

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

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

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

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

3. 容器的動態(tài)響應(yīng)

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

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

4. 排查特殊環(huán)境

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

以內(nèi)嵌到企業(yè)微信的騰訊文檔應(yīng)用為例，現(xiàn)網(wǎng)多導(dǎo)航的嵌套導(dǎo)致文檔幾乎不可用。但因為企業(yè)微信是效率辦公用戶重要的一環(huán)，它對我們用戶有重要的價值，因此在平衡投入和收益后，我們?nèi)詾檫@種情況補充了特殊的響應(yīng)策略。

項目成果

經(jīng)過調(diào)整，騰訊文檔的新版 App (手機/平板) 以及電腦客戶端 (Windows/Mac) 均已上架。iPad 版本也支持鍵盤和鼠標(biāo)啦。文末附有直達鏈接，歡迎下載體驗。

后記

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

當(dāng)萬物互聯(lián)的時代到來時，一切都可以成為媒介，一切都可以交互。也許那時候真的可以做到“內(nèi)容就像水”，跨過系統(tǒng)和平臺的壁壘實現(xiàn)流暢無縫的體驗。

引用：

• [1]https://www.theverge.com/2019/10/3/20896908/microsoft-windows-satya-nadella-importance-apps-services-android

• [2] 《交互設(shè)計精髓》

• [3]https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

• [4]https://www.youtube.com/watch?v=HeW7zxoyq0o&ab_channel=McLeonida

 文章來源：騰訊ISUX微信公眾號