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

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

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

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

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

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

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

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

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

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

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

Pixel Tablet

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

Pixel Slate

Pixelbook Go

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

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

小米平板 5 系列

Oppo Pad 

Vivo Pad

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

Pixel Tablet

Android 大屏設(shè)計(jì)

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

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

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

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

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

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

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

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

大屏設(shè)計(jì)要點(diǎn)

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

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

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

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

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

1、概述

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

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

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

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

1.2、斷點(diǎn)

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

2、布局

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

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

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

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

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

2.2、容器

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

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

隱式容器只是邊緣不可見(jiàn)，實(shí)際設(shè)計(jì)和開(kāi)發(fā)的時(shí)候都要賦予邊界參數(shù)的?？ㄆ亲畛Ｒ?jiàn)的顯式容器，通常使用顯式容器是為了強(qiáng)化其內(nèi)元素之間的關(guān)聯(lián)。

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

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

3、組件

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

左-折疊縱向視圖；右-展開(kāi)的橫向視圖

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

3.1、直接呈現(xiàn)

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

3.2、組件交換

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

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

下面是一些常見(jiàn)的可互換的組件對(duì)比列表：

3.3、響應(yīng)模式

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

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

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

4、設(shè)備

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

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

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

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

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

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

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

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

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

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

當(dāng)光標(biāo)懸停于鏈接和圖片上的時(shí)候，光標(biāo)變?yōu)槭中停脕?lái)強(qiáng)調(diào)光標(biāo)下控件的可點(diǎn)擊屬性。

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

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

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

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

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

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

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

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

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

在觸摸屏上，向上滑動(dòng)，頁(yè)面向下滾動(dòng)。

使用鼠標(biāo)時(shí)候，可以通過(guò)點(diǎn)擊拖動(dòng)來(lái)選擇文本和圖像。

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

4.3、鍵盤交互

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

連接外置鍵盤之后，虛擬鍵盤會(huì)自動(dòng)隱藏到一角。

移除外置鍵盤之后，虛擬鍵盤會(huì)自動(dòng)呼出。

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

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

寫在最后

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

作者：陳子木