新版 iOS 15 Safari 有哪些值得學(xué)習(xí)的交互設(shè)計(jì)？全總結(jié)好了！

其實(shí)在今年 WWDC 之后很多人都在吐槽 iOS 15 缺少明確的記憶點(diǎn)，沒(méi)錯(cuò)。多數(shù)功能似乎都服務(wù)于疫情肆掠之下的遠(yuǎn)程協(xié)作，從設(shè)計(jì)角度上來(lái)說(shuō)，相反提及不算太多的 iOS Safari 讓我感到頗為驚喜。

我為了嘗鮮將手頭的 iPhone 升級(jí)了 iOS 15 （大概是在 Beta 2 的階段），在日常使用過(guò)程中，清晰感知到了很多 Safari 的設(shè)計(jì)改變。

老實(shí)說(shuō)，觀察 iOS 系統(tǒng)的迭代過(guò)程，是一個(gè)學(xué)習(xí)UI/UX設(shè)計(jì)乃至于設(shè)計(jì)決策的良好契機(jī)，尤其是在每年6月到9月之間看到這個(gè)操作系統(tǒng)從勉強(qiáng)能用，到逐步完善、增刪迭代，成為一個(gè)成熟系統(tǒng)，這個(gè)過(guò)程當(dāng)中能夠看到很多東西。

iOS 15 的 Safari 瀏覽器的這次改版升級(jí)，給大家提供了一個(gè)設(shè)計(jì)范式。

下面簡(jiǎn)單分享其中的一些要點(diǎn)。

1、視覺(jué)：重新收束控件的空間

主要是為了更好地應(yīng)對(duì)大屏交互，iOS 15 將整個(gè)界面交互進(jìn)行了濃縮和收束，將瀏覽器中幾乎全部的交互都集中到屏幕底部，在視覺(jué)上重新做了梳理，將原本已經(jīng)相對(duì)簡(jiǎn)約的界面，進(jìn)一步簡(jiǎn)化，將頂部地址欄和底部工具欄徹底合并成為為一個(gè)交互控件懸浮條：

圖片來(lái)自 https://jonas.do/

在向下滾動(dòng)瀏覽的時(shí)候，懸浮工具欄會(huì)自動(dòng)隱藏縮小到底部：

這種簡(jiǎn)化的邏輯，遵循了交互設(shè)計(jì)師經(jīng)常會(huì)用到的 Miller 定律：

Miller 定律
一般人的工作記憶中只能保留 7 個(gè)（正負(fù) 2 個(gè)）項(xiàng)目。

這一定律在UI設(shè)計(jì)當(dāng)中其實(shí)有廣泛應(yīng)用，這主要是因?yàn)檫@一定律圍繞著盡可能降低用戶符合的邏輯，來(lái)讓 UI 界面、菜單選項(xiàng)更加自然舒適，不會(huì)因?yàn)檫^(guò)多的選項(xiàng)而給用戶帶來(lái)更多的認(rèn)知負(fù)荷。

在絕大多數(shù)的情況下，大家在 UI 界面中最多會(huì)采用 5 個(gè)選項(xiàng)，這是一個(gè)能夠被絕大多數(shù)用戶習(xí)慣和接受，又能夠承載足夠多功能的一個(gè)控件數(shù)量。

但是，要從原來(lái)的 5+3 個(gè)交互控件壓縮到一個(gè)工具欄，就需要基于使用頻率來(lái)作篩選了，其中返回按鈕比前進(jìn)按鈕的使用頻率高，收藏夾使用頻率不算高，而原來(lái)左上角的地址欄菜單按鈕的使用頻度頁(yè)相對(duì)較低，大概遵循這樣的邏輯來(lái)進(jìn)行了精簡(jiǎn)。

2、決策：貼合用戶習(xí)慣的迭代

為了提供更加自然順滑的過(guò)渡體驗(yàn)，在初次使用新版的 Safari 的時(shí)候，會(huì)提供一個(gè)標(biāo)準(zhǔn)的引導(dǎo)功能，讓用戶選擇是否要切換到新版設(shè)計(jì)當(dāng)中。

而在 iOS 15 Beta 6 這個(gè)版本當(dāng)中，整體的設(shè)計(jì)又往回退了一步，將緊湊的懸浮工具欄恢復(fù)到類似 iOS 14 的樣式，只是位置依然靠下。

這種強(qiáng)延續(xù)性的設(shè)計(jì)毫無(wú)疑問(wèn)是基于「學(xué)習(xí)成本」來(lái)考量的，前后兩大版本的 Safari 瀏覽器在視覺(jué)和交互上的體驗(yàn)，如果按照 Beta 4 的設(shè)計(jì)無(wú)疑差別上非常大的，Beta 6 相對(duì)更照顧絕大多數(shù)用戶的習(xí)慣和認(rèn)知。

相應(yīng)的，原本的地址欄菜單頁(yè)回來(lái)了，同時(shí)保留了長(zhǎng)按快捷菜單，以及將地址欄移回頂部的選項(xiàng)：

但是不論是以上哪個(gè)版本，在手勢(shì)交互上的進(jìn)化，都顯得非常驚艷。

3、交互：增加手指操作的層級(jí)

在 iOS 系統(tǒng)當(dāng)中，Action/Share 按鈕幾乎是替代了傳統(tǒng)的漢堡菜單，來(lái)承載「分享」和「更多」按鈕的雙重功能，將分享和更多的菜單選項(xiàng)收納到其中。只是太多的功能選項(xiàng)被容納到這個(gè)菜單當(dāng)中，使得它的便捷性降低很多。

為了更容易操作，交互集中到頁(yè)面底部之后，新增了長(zhǎng)按呼出快捷菜單的功能，讓部分高頻使用的功能更容易被快速調(diào)出。

除了長(zhǎng)按呼出快捷菜單之外，還新增了左右快速滑動(dòng)切換標(biāo)簽頁(yè)的交互：

為了告訴用戶工具欄是可以左右滑動(dòng)的，讓左右兩邊的工具欄露了個(gè)頭，作為視覺(jué)指引，告知用戶旁邊還有標(biāo)簽頁(yè)，滑動(dòng)即可快速切換過(guò)去。在這個(gè)小細(xì)節(jié)上的設(shè)計(jì)，可以說(shuō)是靈性非常了。

除了單擊多標(biāo)簽頁(yè)按鈕來(lái)預(yù)覽所有頁(yè)面之外，還可以在懸浮工具欄上上滑，快速預(yù)覽所有標(biāo)簽：

最有意思的地方在于，Safari 的這個(gè)交互邏輯并非憑空創(chuàng)造的，而是從 iOS 現(xiàn)有的手勢(shì)交互繼承而來(lái)的，而這種「經(jīng)驗(yàn)遷移」的設(shè)計(jì)思路正是 Jakbo 定律的應(yīng)用。

Jakob 定律
「 用戶大部分時(shí)間都花在其他網(wǎng)站上。這意味著用戶更喜歡您的網(wǎng)站以與他們已經(jīng)知道的所有其他網(wǎng)站相同的方式工作。設(shè)計(jì)用戶習(xí)慣的模式。」

用戶會(huì)基于他們最熟悉的習(xí)慣遷移到相似的地方——用戶會(huì)復(fù)用相似的行為模式和模型，而 Safari 用戶最熟悉的恰恰是 iOS 系統(tǒng)。

如今的全面屏 iOS 上的手勢(shì)交互，基本都是圍繞著底部這條小橫線，也就是主頁(yè)指示器（Home indicator）：

iOS 采用的交互邏輯簡(jiǎn)單抽象下來(lái)的幾個(gè)要點(diǎn)：

• 左右滑動(dòng)手勢(shì)快速翻頁(yè)
• 在 Home indicator 快速上滑回到主屏幕
• 在 Home indicator 緩慢上滑動(dòng)呼出最近打開(kāi)應(yīng)用的卡片

在新的 Safari 當(dāng)中，這種交互范式被自然的遷移了過(guò)來(lái)：

• 將地址欄視作為一個(gè)確定的交互對(duì)象
• 左右滑動(dòng)地址欄，快速切換左右兩邊臨近的頁(yè)面
• 在地址欄向上滑動(dòng)呼出所有標(biāo)簽頁(yè)面
• 在屏幕邊緣左右滑動(dòng)，來(lái)實(shí)現(xiàn)當(dāng)前頁(yè)面的前進(jìn)后退

這種自然的經(jīng)驗(yàn)遷移，在很大程度上降低了用戶的學(xué)習(xí)成本，即使在 Beta 6 版本當(dāng)中，這種手勢(shì)交互的邏輯也全部延續(xù)了下來(lái)。

這種交互的邏輯增加了交互操作的層級(jí)，也讓手勢(shì)操作進(jìn)入了一個(gè)新的階段。

4、手勢(shì)：拇指交互區(qū)域是核心

將交互控件放置在拇指自然出觸及的區(qū)域，是大屏?xí)r代 UI 設(shè)計(jì)的「基本」。

Fitts 定律
「獲取目標(biāo)的時(shí)間是到目標(biāo)的距離和大小的函數(shù)。」

Fitts 定律在很大程度上上圍繞桌面端屏幕交互來(lái)進(jìn)行探討的，但是在手持設(shè)備上，還要考慮手指天然的限制，在絕大多數(shù)時(shí)候，是以拇指作為主要的交互核心：

通常，越靠近拇指的區(qū)域，自然也就是越容易交互和觸及的區(qū)域，而在目前 5英寸起步的屏幕上，這個(gè)交互區(qū)域就非常狹窄了。

這個(gè)問(wèn)題在小屏為主的時(shí)代，設(shè)計(jì)師早就已經(jīng)考慮過(guò)了，甚至執(zhí)行得非常深入：

手勢(shì)交互的先驅(qū)者 webOS 從快捷方式、通知到基礎(chǔ)的手勢(shì)全都圍繞著屏幕底部來(lái)進(jìn)行，而這次 Safari 發(fā)布之后，前 Windows Phone 設(shè)計(jì)師 Jon Bell 也在自己的博客上探討過(guò)這一問(wèn)題，并分享了當(dāng)時(shí)的 Windows Phone IE 瀏覽器就所采用的類似設(shè)計(jì)：

在當(dāng)時(shí)，他們 認(rèn)為最麻煩的問(wèn)題在于「四通八達(dá)的標(biāo)簽頁(yè)要怎么切換」才好，不過(guò)這個(gè)問(wèn)題在 Safari 上已經(jīng)解決了，不僅沿襲了之前的按鈕，還加入了快速上劃，以貼合用戶習(xí)慣的方式解決了這個(gè)問(wèn)題。

值得一提的是，Safari 的這個(gè)工具欄作為手勢(shì)交互核心的設(shè)計(jì)，為下一個(gè)階段的 UI 設(shè)計(jì)指明了方向，而且隨著屏幕尺寸的增加，點(diǎn)擊交互覆蓋的區(qū)域幾乎是不會(huì)變的，那么手勢(shì)來(lái)承載更多的功能就成了幾乎唯一的答案。

5、總結(jié)：大屏 UI 交互的新方向

新的 Safari 瀏覽器的設(shè)計(jì)，作為 iOS 平臺(tái)的核心工具之一，對(duì)于用戶和設(shè)計(jì)師而言，都是非常重要的參考范式：

• 在徹底大屏化的時(shí)代，展示了將交互全部集中在屏幕底部的簡(jiǎn)化方向、交互邏輯；
• 在手勢(shì)交互認(rèn)知度普遍較高的今天，繼續(xù)前進(jìn)一步，演示了手勢(shì)交互的可能性；
• 以地址欄為范式，呈現(xiàn)了點(diǎn)擊+滑動(dòng)手勢(shì)的多功能濃縮式控件的設(shè)計(jì)邏輯；

當(dāng)然，這種新的設(shè)計(jì)本身也是存在缺陷的：

• 新增的手勢(shì)是有學(xué)習(xí)成本的，需要引導(dǎo)來(lái)引導(dǎo)用戶了解
• 懸浮式的交互控件不能承載太多太復(fù)雜的手勢(shì)
• 懸浮式的交互控件不能在其中放置太多按鈕

不過(guò)，從我個(gè)人的角度上來(lái)看，Beta 4 版本中這種單一懸浮工具欄雖然更加激進(jìn)，但是更加簡(jiǎn)約順手，整體體驗(yàn)可能更加符合未來(lái)的趨勢(shì)，是一個(gè)頗有價(jià)值的參考案例。

延伸閱讀：