大概是出于對 Material 3 和 Matias Duarte 的熱愛，我昨晚還是熬夜將 Google I/O 大會的 Keynote 跟了一遍，沒有等來谷歌的設(shè)計高級副總裁，倒是看到了不少有趣的內(nèi)容。

值得關(guān)注的硬件

AI 系統(tǒng) LaMDA 2 越發(fā)強大了，不過真正讓我感到親切的，是用 PaLM 來命名一個人工智能語言路徑模型，這可以說是非常的有情懷了。

Pixel 7 系列的硬件直指 iPhone ，工業(yè)設(shè)計也越發(fā)的驚艷和高級了，而新的 Pixel Buds Pro 不僅帶有降噪功能，而且續(xù)航也超過了有待更新的 AirPods Pro ：

最令我想擁有的，還是帶有圓形表盤的 Pixel Watch，從直覺上來說，它比 Apple Watch 的圓角矩形的外輪廓更加討人喜歡，屏幕和表盤整體幾乎融為一體的設(shè)計也頗為自然，知識 Wear OS 的實際表現(xiàn)還有待觀望。

而結(jié)尾演示的 AR 眼鏡，則直接 Call back 了 演示開頭的自然語言識別模型，呼應(yīng)得恰到好處，只是用來演示的眼鏡看起來僅僅只是普通的眼鏡，不過從使用場景到演示效果，都非常合理和自然。

相比于VR，AR 更加值得期待，我在 2016 年的文章《AR 可能是距離我們更近的未來》中就表達(dá)過這一點，而 Google 的探索方向也正好印證了這一點。

不過整場發(fā)布會，最令我意外的東西，是全新的安卓平板，Pixel Tablet。

疫情之下的產(chǎn)物

和國內(nèi)的產(chǎn)品策略不同，Google 在很長的一段時間以內(nèi)，借助兼容了 AndROId 應(yīng)用的 ChromeOS 的筆記本和平板類產(chǎn)品，直接拿下了中低端電腦市場和大量的教育硬件的訂單。

桌面級的瀏覽器和 Google 強大的云服務(wù)，搭配 Android 的軟件生態(tài)，Chromebook 和 ChromeTablet 在教育市場上所向披靡，很多對電腦要求并不高的用戶，在選擇入門級電腦的時候，各色 Chromebook 的性價比簡直是炸裂，如果你感興趣，你甚至可以在「海鮮市場」上以極其低廉的價格買到各種 Chromebook 來嘗鮮。

Pixel Tablet

作為平臺的搭建者，Google 本身也一直是產(chǎn)品和服務(wù)的風(fēng)向標(biāo)。Google 自身的 Chromebook 系列的產(chǎn)品線年年更新，從最早的 Chromebook Pixel 2013 開始，一路到最新的 Pixelbook Go 和 PixelSlate，肉眼可見地可以看到 Google 對于 ChromeOS 生態(tài)的維護(hù)與推崇。

Pixel Slate

Pixelbook Go

而大屏 Android 設(shè)備，最后一次更新還是 2018 年所發(fā)布的 Pixel C，最有意思的是，這個有著獨特磁吸式鍵盤的 Android 平板，其實是 Pixel 的硬件團(tuán)隊來完成的。

Pixel C 之后，Google 團(tuán)隊開始放任廠商在平板領(lǐng)域野蠻生長，自由探索，直到……2020 年新冠疫情開始肆掠全球。遠(yuǎn)程工作和線上課程讓平板電腦的需求前所未有的旺盛。國內(nèi)一線手機廠商也在充分吸取了 iPad Pro 等熱銷排頭產(chǎn)品的工業(yè)設(shè)計之后，紛紛更新或者推出了自家的平板產(chǎn)品線，用上次旗艦級別的芯片（驍龍870 準(zhǔn)確來說），鍵盤觸控板手寫筆一次到位全給配上：

小米平板 5 系列

Oppo Pad 

Vivo Pad

時隔 5 年， Google 決定在 2023 年再度推出 Andorid 系統(tǒng)的 Pixel Tablet 這一「官方指導(dǎo)產(chǎn)品」，毫無疑問是下定決心，收攏殘兵，重新出發(fā)了。

Pixel Tablet

Android 大屏設(shè)計

我之所以如此之在意 Pixel Tablet 的發(fā)布，原因就在于，這是一個關(guān)鍵性的信號，那就是咱們可能要開始關(guān)注 Android 平臺的大屏設(shè)計了。

原因其實很簡單。全新的 Material You 或者說 Material Design 3 的設(shè)計規(guī)范比起上一代更加完善，在機器學(xué)習(xí)和完善的工具的基礎(chǔ)上，對于不同尺寸的屏幕和分辨率有了更好的支持，此是其一。

Google 官方在去年發(fā)布新的設(shè)計規(guī)范和 Android 12 之后，還公布了單獨針對大屏設(shè)備的 Android 12L 系統(tǒng)，并且提供模擬器和可供特定設(shè)備安裝的系統(tǒng)更新，此是其二。

折疊屏設(shè)備的出現(xiàn)，直接成為了普通智能手機（5-6英寸）和平板類設(shè)備（8-11 英寸）之間的橋梁。折疊屏手機交互不僅涉及到 APP 在常規(guī)手機尺寸和類 Pad 大尺寸屏幕上的呈現(xiàn)效果，而且還牽涉到不同尺寸屏幕切換以及交互狀態(tài)改變等因素。在越來越多的折疊屏手機上市之后，這類需求會反向推進(jìn)傳統(tǒng)小屏 APP 做好大屏適配，此是其三。

在 Android 折疊屏交互規(guī)范出來之前，微軟早早地發(fā)布了 Surface Duo 的硬件，而且在 Fluent Design 的官方設(shè)計指南中，直接加入了雙屏設(shè)計的規(guī)范，具體可以參看我的文章：

如果微軟這個翻車前科過多的企業(yè)讓你覺得不夠有信心，那么來看看 2019 年蘋果申請的折疊屏專利吧：

iPadOS 和 macOS 在大屏界面上的協(xié)調(diào)統(tǒng)一，又何嘗不是為 Android 的大屏設(shè)計提供一個良好的參考呢？微軟和蘋果在這一領(lǐng)域的探索，對于 Android 大屏界面設(shè)計的參考，我認(rèn)為是第四個影響因素。

而 Google 下定決心，放下 ChromeOS 系統(tǒng)的 Pixel Slate 改用 Android 系統(tǒng)的 Pixel Tablet 更像是官方深思熟慮后認(rèn)定時機成熟。

大屏設(shè)計要點

去年 Google I/O 大會上發(fā)布的 Material You 算是第三代 Material Design，現(xiàn)在官方也會稱其為 Material Design 3，或者 M3，依然是由著名的設(shè)計師 Matias 所主導(dǎo)，在 Google 的整個設(shè)計團(tuán)隊協(xié)同之下完成落地。

最初的 Android 12 本身僅僅只是應(yīng)用了一部分 M3 的設(shè)計功能要要素，比如說其中特別智能的「動態(tài)配色」，酸梅干超人的這篇文章當(dāng)中有相對詳細(xì)的介紹：

而面向大屏的 Android 12 L 的發(fā)布之后，M3 的設(shè)計規(guī)范中，可訪問性設(shè)計這一章節(jié)當(dāng)中，也相應(yīng)地添加了「大屏幕設(shè)計」的相關(guān)規(guī)范。

關(guān)于這一部分的知識點，我將會梳理出相對重要的部分，更細(xì)致的內(nèi)容可以前往 M3 的官網(wǎng)查看：

https://m3.material.io/foundations/adaptive-design/large-screens/overview

1、概述

整套設(shè)計需要考慮到橫屏和豎屏兩種不同的方向，基于響應(yīng)式設(shè)計的精神，采用多列布局，借助網(wǎng)格系統(tǒng)，讓內(nèi)容和元素可以在不同尺寸的設(shè)備上顯示，并且符合人體工程學(xué)的需求。

1.1、響應(yīng)式網(wǎng)格布局

1-邊距； 2-分欄；3-列間距

隨著界面尺寸和寬度的變化，網(wǎng)格的數(shù)量也會相應(yīng)的發(fā)生變化。

1.2、斷點

和響應(yīng)式設(shè)計一樣，斷點定義了適合當(dāng)前頁面的 APP 的響應(yīng)式布局。考慮到 Material Design 在總體視覺上的平衡，絕大多數(shù)的元素都盡量和 8dp 網(wǎng)格對齊，較小的元素，比如圖標(biāo)，則和 4dp 網(wǎng)格對齊。

2、布局

APP 基礎(chǔ)布局是交互體驗的基礎(chǔ)，布局中可以承載較小的元素區(qū)域，比如卡片。

1-導(dǎo)航欄；2-應(yīng)用欄；3-內(nèi)容主體；

2.1、導(dǎo)航區(qū)域

導(dǎo)航欄在展開狀態(tài)下通常使用 256dp 的統(tǒng)一寬度，折疊狀態(tài)下為 72dp 。使用豎屏狀態(tài)下，寬度不足的時候，導(dǎo)航欄可以適當(dāng)縮窄適配。

1-抽屜式可折疊側(cè)邊欄；2-主體內(nèi)容區(qū)域

2.2、容器

將具備關(guān)聯(lián)性的元素打包呈現(xiàn)的方式為容器，容器氛圍顯式和隱式兩種，但是不管哪種容器組件，都記得使用響應(yīng)式尺寸，確保不同縮放狀況下可讀。

1-隱式容器；2-顯式容器

隱式容器只是邊緣不可見，實際設(shè)計和開發(fā)的時候都要賦予邊界參數(shù)的。卡片是最常見的顯式容器，通常使用顯式容器是為了強化其內(nèi)元素之間的關(guān)聯(lián)。

上面是一個錯誤的演示。不要在未對整體布局進(jìn)行調(diào)整的前提下，簡單地將包含文本的容器進(jìn)行簡單的拉伸。

容器需要借助縮放來適應(yīng)不同的屏幕尺寸。容器之間會出現(xiàn)嵌套的情況。在上方的案例當(dāng)中，1 為卡片容器，2為列表容器，在內(nèi)容主體作為父容器的情況下，內(nèi)部的子容器需要使用統(tǒng)一的左對齊、右對齊或者左右兩邊對齊，而側(cè)邊導(dǎo)航欄中的子容器則可能是固定位置。

3、組件

組件需要隨著屏幕尺寸和方向的變化，在填充方式、大小、對齊等方式上進(jìn)行適當(dāng)?shù)淖兓?/p>

左-折疊縱向視圖；右-展開的橫向視圖

在縮放組件和布局容器的時候，可以根據(jù)實際情況，來考慮它們在不同屏幕上的縮放變化。比如底部導(dǎo)航欄變?yōu)閭?cè)邊導(dǎo)航，原本移動端設(shè)備上的卡片容器，在大屏幕上變得更趨近于方形，從而更好呈現(xiàn)圖片內(nèi)容等等，按鈕內(nèi)的圖標(biāo)和文本可以錨定居中，橫向放大的時候，也可以維持在對的位置上。

3.1、直接呈現(xiàn)

最直接的方式，始終是按照一定的比例來將原本移動端 APP 上的控件進(jìn)行縮放，以適配大屏幕來使用。不過還有更好的方式。

3.2、組件交換

在不同屏幕尺寸下，不同類型的組件，有著類似的功能。比如之前提到過的移動端 APP 底部的 Tab 導(dǎo)航控件和平板上的側(cè)邊欄組件，就是可供互換的功能類似組件。而這種策略，使得 APP 大屏化之后，控件的大范圍替換成為可能。

又比如，移動端的列表式表單可以和大屏幕上所用的彈出對話框進(jìn)行互換。兩者在功能上幾乎完全一樣，而且在不同屏幕尺寸之下，顯得足夠「本地化」。

下面是一些常見的可互換的組件對比列表：

3.3、響應(yīng)模式

除了上述的縮放和組件交換的方式，還可以使用重新定位組件位置、呈現(xiàn)隱藏組件的方式來實現(xiàn) UI 的大屏化。

在涉及到較大斷點和大范圍額外空間的時候，可以將原本隱藏的組件直接呈現(xiàn)在大屏幕上。比如在移動端上通常折疊起來的菜單，在大屏幕上直接以側(cè)邊欄的形式顯示出來。

而在移動端上原本簡單縱向排列的組件或者容器，可以在大屏幕上重新排版布局，這樣更加貼合大屏的使用場景。

4、設(shè)備

在大屏的 Android 設(shè)備上可能會涉及到觸摸板、鼠標(biāo)、外置鍵盤、觸摸手勢 等多種交互模式。

不同的硬件接入 Android 平板所涉及的不同交互能夠很大程度提升界面的可訪問性。

外部輸入設(shè)備通常是鼠標(biāo)、觸控板和鍵盤三種，它們所涉及的主要交互要素如下：

外部輸入設(shè)備的常規(guī)交互，和交互之下的通常大家所預(yù)期的行為：

下面針對這些常見的交互進(jìn)行詳細(xì)梳理。

4.1、鼠標(biāo)和光標(biāo)的交互

當(dāng)鼠標(biāo)或者觸控板連接 Android 大屏設(shè)備的時候，光標(biāo)都應(yīng)該出現(xiàn)在屏幕上。

在沒有專門針對鼠標(biāo)進(jìn)行優(yōu)化的 Android 設(shè)備上，鼠標(biāo)單擊理應(yīng)和觸摸點擊的反饋相同。

當(dāng)觸發(fā)鼠標(biāo)和觸控板的次級按鍵（右鍵）的時候，會觸發(fā)上下文菜單，也就是常說的右鍵菜單。

當(dāng)光標(biāo)懸停在可交互的組件上的時候，這些組件應(yīng)當(dāng)呈現(xiàn)并告知用戶它們是可交互的。

當(dāng)光標(biāo)懸停于鏈接和圖片上的時候，光標(biāo)變?yōu)槭中停脕韽娬{(diào)光標(biāo)下控件的可點擊屬性。

光標(biāo)懸停于文本內(nèi)容之上的時候，呈現(xiàn)出 I 型，強調(diào)文本內(nèi)容可以選中。

用 I 型光標(biāo)來強調(diào)選中文本的邊界。

當(dāng)光標(biāo)在不可被選中的文本上時，不應(yīng)該顯示為 I 型，以上為錯誤演示。

在使用鼠標(biāo)、觸控板、觸控筆選中文本之后，使用單一顏色突出被選中的文本，并且不要在選中區(qū)域周圍顯示觸摸交互的控件。

如果用戶直接用手觸摸選中文本，則需要顯示觸摸控件，即使 Android 設(shè)備連接了外部設(shè)備，也需要顯示。

在選中文本上點擊右鍵菜單，能夠呼出上下文菜單，即使是在帶觸摸屏的設(shè)備上，也需要如此。

4.2、鼠標(biāo)滾輪和觸控板手勢

鼠標(biāo)滾輪、觸控板手勢讓大屏交互有更多可能性。

當(dāng)光標(biāo)位于列表上時，滾輪和觸控板兩指滑動手勢支持上下垂直滾動，注意，只有光標(biāo)所在的那個列表。

在觸摸屏上，向上滑動，頁面向下滾動。

使用鼠標(biāo)時候，可以通過點擊拖動來選擇文本和圖像。

使用鼠標(biāo)的用戶，可以通過鼠標(biāo)滾動來讓橫向滾動的組件移動。同理，使用觸控板的用戶，應(yīng)該可以通過雙指橫向滑動來滾動橫向滾動的組件。

4.3、鍵盤交互

即使 Android 平板連接外置鍵盤的時候，設(shè)備的虛擬鍵盤都應(yīng)該是可以被調(diào)用的。

連接外置鍵盤之后，虛擬鍵盤會自動隱藏到一角。

移除外置鍵盤之后，虛擬鍵盤會自動呼出。

用戶可以通過物理鍵盤的回車鍵（Enter），來發(fā)送信息，確認(rèn)操作。

用戶可以通過空格（Space）來暫停和播放多媒體內(nèi)容。

寫在最后

Pixel Tablet 的出現(xiàn)更像是新的轉(zhuǎn)折點，Android 大屏 UI 設(shè)計的需求在接下來會隨著市場變化越來越多，大家又有新的事兒干了。

作者：陳子木