前言：全平臺(tái)系統(tǒng)交互設(shè)計(jì)——這個(gè)詞對(duì)于交互設(shè)計(jì)師來(lái)說(shuō)應(yīng)該都不陌生，因?yàn)檫@最終決定著用戶的體驗(yàn)。盡管這個(gè)概念還不成熟，但是目前是主流的操作系統(tǒng)的市場(chǎng)份額、出貨量以及用戶認(rèn)可方面的差異，讓我們看到打造流暢的全平臺(tái)體驗(yàn)的必要性。這也許會(huì)成為下一代應(yīng)用的基礎(chǔ)規(guī)則,正如當(dāng)初的響應(yīng)式設(shè)計(jì)一樣。今天我們將分享騰訊文檔的全平臺(tái)系統(tǒng)交互設(shè)計(jì)。

背景

“操作系統(tǒng)對(duì)我們而言已不是最重要的了，更重要的是應(yīng)用和服務(wù)。” [1]

– 微軟 CEO Satya Nadella

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

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

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

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

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

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

騰訊文檔支持的端和平臺(tái)

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

全平臺(tái)設(shè)計(jì)的原則

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

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

全平臺(tái)設(shè)計(jì)的原則

確保感知的一致性

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

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

各端效益的最大化

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

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

效益最大化的三個(gè)維度

1. 平臺(tái)環(huán)境

1.1 屏幕尺寸

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

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

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

1.3 平臺(tái)特性

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

常見(jiàn)的平臺(tái)環(huán)境示例

2. 使用姿態(tài)

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

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

3. 交互方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

蘋(píng)果設(shè)備的 Size Classes 示例

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

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

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

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

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

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

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

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

企業(yè)微信中的“騰訊文檔”應(yīng)用

項(xiàng)目成果

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

后記

[[373772]]

Craig Federighi 在演示 Cnontinuity demo [4]

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

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

跨過(guò)系統(tǒng)和平臺(tái)的壁壘，實(shí)現(xiàn)良好的用戶體驗(yàn)，也是讓設(shè)計(jì)得到更高的評(píng)價(jià)的基礎(chǔ)。