Google 發布全新安卓平板，大屏設計趨勢來了？

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

值得關注的硬件

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

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

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

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

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

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

疫情之下的產物

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

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

Pixel Tablet

作為平臺的搭建者，Google 本身也一直是產品和服務的風向標。Google 自身的 Chromebook 系列的產品線年年更新，從最早的 Chromebook Pixel 2013 開始，一路到最新的 Pixelbook Go 和 PixelSlate，肉眼可見地可以看到 Google 對于 ChromeOS 生態的維護與推崇。

Pixel Slate

Pixelbook Go

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

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

小米平板 5 系列

Oppo Pad?

Vivo Pad

時隔 5 年， Google 決定在 2023 年再度推出 Andorid 系統的 Pixel Tablet 這一「官方指導產品」，毫無疑問是下定決心，收攏殘兵，重新出發了。

Pixel Tablet

Android 大屏設計

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

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

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

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

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

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

iPadOS 和 macOS 在大屏界面上的協調統一，又何嘗不是為 Android 的大屏設計提供一個良好的參考呢？微軟和蘋果在這一領域的探索，對于 Android 大屏界面設計的參考，我認為是第四個影響因素。

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

大屏設計要點

去年 Google I/O 大會上發布的 Material You 算是第三代 Material Design，現在官方也會稱其為 Material Design 3，或者 M3，依然是由著名的設計師 Matias 所主導，在 Google 的整個設計團隊協同之下完成落地。

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

而面向大屏的 Android 12 L 的發布之后，M3 的設計規范中，可訪問性設計這一章節當中，也相應地添加了「大屏幕設計」的相關規范。

關于這一部分的知識點，我將會梳理出相對重要的部分，更細致的內容可以前往 M3 的官網查看：

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

1、概述

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

1.1、響應式網格布局

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

隨著界面尺寸和寬度的變化，網格的數量也會相應的發生變化。

1.2、斷點

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

2、布局

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

1-導航欄；2-應用欄；3-內容主體；

2.1、導航區域

導航欄在展開狀態下通常使用 256dp 的統一寬度，折疊狀態下為 72dp 。使用豎屏狀態下，寬度不足的時候，導航欄可以適當縮窄適配。

1-抽屜式可折疊側邊欄；2-主體內容區域

2.2、容器

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

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

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

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

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

3、組件

組件需要隨著屏幕尺寸和方向的變化，在填充方式、大小、對齊等方式上進行適當的變化。

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

在縮放組件和布局容器的時候，可以根據實際情況，來考慮它們在不同屏幕上的縮放變化。比如底部導航欄變為側邊導航，原本移動端設備上的卡片容器，在大屏幕上變得更趨近于方形，從而更好呈現圖片內容等等，按鈕內的圖標和文本可以錨定居中，橫向放大的時候，也可以維持在對的位置上。

3.1、直接呈現

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

3.2、組件交換

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

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

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

3.3、響應模式

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

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

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

4、設備

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

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

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

外部輸入設備的常規交互，和交互之下的通常大家所預期的行為：

下面針對這些常見的交互進行詳細梳理。

4.1、鼠標和光標的交互

當鼠標或者觸控板連接 Android 大屏設備的時候，光標都應該出現在屏幕上。

在沒有專門針對鼠標進行優化的 Android 設備上，鼠標單擊理應和觸摸點擊的反饋相同。

當觸發鼠標和觸控板的次級按鍵（右鍵）的時候，會觸發上下文菜單，也就是常說的右鍵菜單。

當光標懸停在可交互的組件上的時候，這些組件應當呈現并告知用戶它們是可交互的。

當光標懸停于鏈接和圖片上的時候，光標變為手型，用來強調光標下控件的可點擊屬性。

光標懸停于文本內容之上的時候，呈現出 I 型，強調文本內容可以選中。

用 I 型光標來強調選中文本的邊界。

當光標在不可被選中的文本上時，不應該顯示為 I 型，以上為錯誤演示。

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

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

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

4.2、鼠標滾輪和觸控板手勢

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

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

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

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

使用鼠標的用戶，可以通過鼠標滾動來讓橫向滾動的組件移動。同理，使用觸控板的用戶，應該可以通過雙指橫向滑動來滾動橫向滾動的組件。

4.3、鍵盤交互

即使 Android 平板連接外置鍵盤的時候，設備的虛擬鍵盤都應該是可以被調用的。

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

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

用戶可以通過物理鍵盤的回車鍵（Enter），來發送信息，確認操作。

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

寫在最后

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

另外，關于折疊屏設計的規范，可以參考龍爪槐的守望者所翻譯的下面的幾篇：