其實在今年 WWDC 之后很多人都在吐槽 iOS 15 缺少明確的記憶點，沒錯。多數功能似乎都服務于疫情肆掠之下的遠程協作，從設計角度上來說，相反提及不算太多的 iOS Safari 讓我感到頗為驚喜。

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

老實說，觀察 iOS 系統的迭代過程，是一個學習UI/UX設計乃至于設計決策的良好契機，尤其是在每年6月到9月之間看到這個操作系統從勉強能用，到逐步完善、增刪迭代，成為一個成熟系統，這個過程當中能夠看到很多東西。

iOS 15 的 Safari 瀏覽器的這次改版升級，給大家提供了一個設計范式。

下面簡單分享其中的一些要點。

1、視覺：重新收束控件的空間

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

圖片來自 https://jonas.do/

在向下滾動瀏覽的時候，懸浮工具欄會自動隱藏縮小到底部：

這種簡化的邏輯，遵循了交互設計師經常會用到的 Miller 定律：

Miller 定律
一般人的工作記憶中只能保留 7 個（正負 2 個）項目。

這一定律在UI設計當中其實有廣泛應用，這主要是因為這一定律圍繞著盡可能降低用戶符合的邏輯，來讓 UI 界面、菜單選項更加自然舒適，不會因為過多的選項而給用戶帶來更多的認知負荷。

在絕大多數的情況下，大家在 UI 界面中最多會采用 5 個選項，這是一個能夠被絕大多數用戶習慣和接受，又能夠承載足夠多功能的一個控件數量。

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

2、決策：貼合用戶習慣的迭代

為了提供更加自然順滑的過渡體驗，在初次使用新版的 Safari 的時候，會提供一個標準的引導功能，讓用戶選擇是否要切換到新版設計當中。

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

這種強延續性的設計毫無疑問是基于「學習成本」來考量的，前后兩大版本的 Safari 瀏覽器在視覺和交互上的體驗，如果按照 Beta 4 的設計無疑差別上非常大的，Beta 6 相對更照顧絕大多數用戶的習慣和認知。

相應的，原本的地址欄菜單頁回來了，同時保留了長按快捷菜單，以及將地址欄移回頂部的選項：

但是不論是以上哪個版本，在手勢交互上的進化，都顯得非常驚艷。

3、交互：增加手指操作的層級

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

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

除了長按呼出快捷菜單之外，還新增了左右快速滑動切換標簽頁的交互：

為了告訴用戶工具欄是可以左右滑動的，讓左右兩邊的工具欄露了個頭，作為視覺指引，告知用戶旁邊還有標簽頁，滑動即可快速切換過去。在這個小細節上的設計，可以說是靈性非常了。

除了單擊多標簽頁按鈕來預覽所有頁面之外，還可以在懸浮工具欄上上滑，快速預覽所有標簽：

最有意思的地方在于，Safari 的這個交互邏輯并非憑空創造的，而是從 iOS 現有的手勢交互繼承而來的，而這種「經驗遷移」的設計思路正是 Jakbo 定律的應用。

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

用戶會基于他們最熟悉的習慣遷移到相似的地方——用戶會復用相似的行為模式和模型，而 Safari 用戶最熟悉的恰恰是 iOS 系統。

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

iOS 采用的交互邏輯簡單抽象下來的幾個要點：

• 左右滑動手勢快速翻頁
• 在 Home indicator 快速上滑回到主屏幕
• 在 Home indicator 緩慢上滑動呼出最近打開應用的卡片

在新的 Safari 當中，這種交互范式被自然的遷移了過來：

• 將地址欄視作為一個確定的交互對象
• 左右滑動地址欄，快速切換左右兩邊臨近的頁面
• 在地址欄向上滑動呼出所有標簽頁面
• 在屏幕邊緣左右滑動，來實現當前頁面的前進后退

這種自然的經驗遷移，在很大程度上降低了用戶的學習成本，即使在 Beta 6 版本當中，這種手勢交互的邏輯也全部延續了下來。

這種交互的邏輯增加了交互操作的層級，也讓手勢操作進入了一個新的階段。

4、手勢：拇指交互區域是核心

將交互控件放置在拇指自然出觸及的區域，是大屏時代 UI 設計的「基本」。

Fitts 定律
「獲取目標的時間是到目標的距離和大小的函數。」

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

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

這個問題在小屏為主的時代，設計師早就已經考慮過了，甚至執行得非常深入：

手勢交互的先驅者 webOS 從快捷方式、通知到基礎的手勢全都圍繞著屏幕底部來進行，而這次 Safari 發布之后，前 Windows Phone 設計師 Jon Bell 也在自己的博客上探討過這一問題，并分享了當時的 Windows Phone IE 瀏覽器就所采用的類似設計：

在當時，他們 認為最麻煩的問題在于「四通八達的標簽頁要怎么切換」才好，不過這個問題在 Safari 上已經解決了，不僅沿襲了之前的按鈕，還加入了快速上劃，以貼合用戶習慣的方式解決了這個問題。

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

5、總結：大屏 UI 交互的新方向

新的 Safari 瀏覽器的設計，作為 iOS 平臺的核心工具之一，對于用戶和設計師而言，都是非常重要的參考范式：

• 在徹底大屏化的時代，展示了將交互全部集中在屏幕底部的簡化方向、交互邏輯；
• 在手勢交互認知度普遍較高的今天，繼續前進一步，演示了手勢交互的可能性；
• 以地址欄為范式，呈現了點擊+滑動手勢的多功能濃縮式控件的設計邏輯；

當然，這種新的設計本身也是存在缺陷的：

• 新增的手勢是有學習成本的，需要引導來引導用戶了解
• 懸浮式的交互控件不能承載太多太復雜的手勢
• 懸浮式的交互控件不能在其中放置太多按鈕

不過，從我個人的角度上來看，Beta 4 版本中這種單一懸浮工具欄雖然更加激進，但是更加簡約順手，整體體驗可能更加符合未來的趨勢，是一個頗有價值的參考案例。

延伸閱讀：