這禮拜蘋果舉辦了 2021 年的 WWDC 開發者大會,也發佈了 iOS15 的測試版本,繼之前介紹過的 瀏海螢幕和螢幕導圓角(2017~2018年手機發佈會)、 Apple Watch 可以開網頁(2018年WWDC)、iPad 和 iOS 觸控螢幕可以支援 hover(2019WWDC)、黑色介面模式(2019WWDC) 之後,這次 Safari 瀏覽器又出來整人了,試用了 iPad OS 15 和 iOS 15 之後,值得關注的有幾點:

1.手機的 Safari 網址列跑到下面去

網址列放下面?明確的按鈕統統變成手勢操作?沒有人做這種設計的啦!喔!是蘋果做的啊?這一定是要讓使用者反思資訊的意義,重新定義瀏覽網頁的 UX,真是一個好設計(下略1萬字見風轉舵)。
這不是 Dribble 還是 Behance 上面哪個設計師的 Redesign 幻想作品,而是官方逼死同人。手機螢幕直立時,網址列換位置了,不過手機打橫、iPad 直立或打橫,網址列還是在上面。

本來的 iOS Safari 手機直立時會有上下兩排工具列,佔據了寶貴的螢幕空間,上方工具列有文字大小設定、網址、重新整理,下方工具列有前往上一頁、前往下一頁、分享、書籤、切換分頁,這麼多顆按鈕,現在新的作業系統裡重新天人合一,整合成一條,只剩下網站 Domain Name、上下頁、三個點點的按鈕、切換分頁,然後就沒了!非常精簡,手勢變為不可或缺的操作行為,想要重新整理(從上往下拉)?回上一頁(往左滑)?切換分頁或開新分頁(往右滑),而且因為工具列在底下,單手也滿好操作的。

網頁設計人員最討厭聽到平面視覺設計人員問的問題,大概是「想要網頁第一個畫面滿版顯示,圖片尺寸要做多大?」
同一支 iPhone 手機直立看網頁,光是捲動網頁就有「上方網址列跟底下工具列跑出來」「上下工具列收合起來」兩種情況造成各自不同的可視區域尺寸,解說 viewport, max-height, max-width, width, height, vw/vh/vmin/vmax/% unit, calc, orientation, background-size:cover/contain, background-repeat, position relatve/absolute/fixed, left/margin-left/padding-left, 區塊高度會被文字斷行撐高所以背景圖沒有固定尺寸, RWD 等概念…還是有滿大機會收到聽不懂人話的鬼扯懶蛋設計圖或需求。

現在排列組合又多增加了一套變因,叫做 iOS15 的網址列移到下面去,然後可能其他瀏覽器也會跟著抄,但每一家瀏覽器實作出來的結果又可能不一樣,又影響了一些「創意」的網頁顯示或操作。

有些網頁會在最底下固定黏著一些網站主功能按鈕列、加入購物車之類的按鈕,測試了一些有用了 position:fixed;bottom:0;width:100% 在底下黏了東西的,其實網址列大半時間都是自己折疊起來的(Safari 的設定裡面有自動縮小的選項),本來以為會碰到使用者想點網頁上的按鈕,但按鈕被網址列蓋住的情形?其實的確是有情況,如果網頁的內容是有價值的,使用者就會自然而然的再多捲動一下,讓瀏覽器把工具列收起來,如果沒有…

例如上面的範例截圖,網頁點進去後,一開始會是圖左的浮動的工具列情況,但是網頁載入完畢後,工具列會自己收起來變成圖右,但如果不小心上下滑動網頁,或是點到那排工具列,浮動的工具列又會再跑出來,還有像 Facebook 官方的 customer chat 套件按鈕,在網頁往上捲,工具列顯示出來時,顯示上也會與網址列打架,之後可以關注看看 Facebook 會怎麼調整這玩意。

這樣一改之後,iOS 常見的 height:calc(100vh – 50px) 之類的捲動選單實作法,每當網頁捲動讓網址列收合後,或是捲動到 body 的捲軸,會讓該捲動選單區塊最下面的按鈕點不到的那個問題,現在似乎沒這麼明顯了,有興趣的可以用 iOS14 和 iOS15 實機瀏覽這個 iOS15 測試頁,比較一下那微妙的感覺。

2.表單元件樣式大改版

Safari 把網頁表單元件的預設樣式都換了,外框變得更細、顏色更淺,甚至連外框都沒了,變得更平面更沒立體感,還有 select 的倒三角小箭頭和以前的那個經典置底拉BAR機也不見了,現在選項會直接在網頁裡顯示囉!

想查閱所有網頁表單元件的新舊樣式比較截圖,可以查看網路上的這篇 UX Collective – What does the Safari 15 update mean for my designs? 的 Forms visual update 部份。

3.支援 theme color

Google Chrome 老早就支援的東西,現在 Safari 終於也支援了,現在我們又多了一種方式可以在視覺上強姦使用者的眼睛。
theme color 是啥?先看以下兩張圖

有沒有看到瀏覽這個範例網頁時,整個螢幕上半部、網址列上面都紅紅的?
那個不是我在錄影,也不是網頁背景色,
也不是前幾年那種 inception bar 在網頁上做假網址列的詐騙釣魚手法,
就是設了個 <meta name=”theme-color” content=”#E6002D” /> 的笑果。

同樣也支援針對 dark mode 另外指定顏色
<meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">

4.Live Text 輕鬆複製網頁與APP裡面的圖片文字

也是本次發表會上令人嘖嘖稱奇的功能,可以直接識別選取照片上的文字,用 Safari 看網頁時,長按圖片的選單項目除了分享、加入相片、拷貝,現在又多了一個選取文字的選項。

甚至用 Safari 瀏覽網頁時直接長按圖片,就會出現選取文字的操作 UI 啊!天哪!他是在網頁一載入就會辨識,還是我按住圖片時才開始辨識的?太強了!而且沒有文字的圖片,就不會出現複製文字的選項。

ios15 live text safar

這個圖片文字識別功能,是不是又要讓現有的一些網路圖文防盜技巧破功啦?不過 Live Text 功能僅支援 A12 晶片以上的機種(如 iPhone XR、iPhone XS、iPhone SE2、iPad 第八代或更新款機型),比較舊的手機和平板都無福享受此新功能。

順帶一提,這個功能在 APP 中也可以使用,例如使用 MOXO, 蝦X, PCXome 等購物平台的 APP,看到喜歡的商品想查一下型號,但是一些細部規格是用圖片的?有了A12以上CPU+iOS15 這完全不是問題,照樣輕鬆複製圖片上的文字。

5.會取不到使用者的 IP?

使用者瀏覽網頁時,網站管理員跟網站上放的第三方套件都有辦法記錄使用者的 IP,一個 IP 地址可以得到很多資訊,如城市名稱、國家名稱、電信商名稱、時區等等,但有時候誤差率很高,判斷出來的非常不靠譜。但 IP 地址用途多多,甚至假設這 IP 在本機有架設一些線上服務,再嘗試打這個 IP 的一些 Port,看看是否得到一些不能說的神秘。

當我看到今年蘋果 WWDC 的其中一篇官方新聞稿Apple 領先業界的隱私權保護在 iOS 15、 iPadOS 15、macOS Monterey 和 watchOS 8 中進一步升級裡面寫到

今年,「智慧追蹤預防」變得更加強大,新增隱藏用戶 IP 位址的功能,讓使用者免於追蹤。這表示追蹤器無法將使用者的 IP 位址作為獨特的識別碼,來連接他們在各個網站上的活動,從而建立關聯的使用者面貌。

一看之下大驚失色,隱藏用戶 IP 位址? 所以我會拿不到使用者的 IP?Facebook 的轉換API 可是把 IP 當成必要欄位,取不到使用者的 IP,那我要送啥過去?127.0.0.1?

這隱藏 IP 的政策,更連同本次其他的 Email tracking 政策,被大師們拿來製造恐慌,例如以下這篇:

不過拿手邊的機器升級,跟同 WiFi 環境的其他裝置比較一下 IP 是否有異樣?實測發現,IP 還是跟其他裝置一樣,更沒有變空值、null 或出現 Exception,說好的隱藏 IP 呢?
再深入一點點了解,發現這次 WWDC 發表的內容裡面,其實有兩件不同東西都跟隱藏 IP 這件事有關。

其一是 iCloud+ 的付費訂閱服務裡面多了個 iCloud Private Relay 功能,系統內建 TOR 的跳板上網機制,開啟了相關設定之後,IP 沒有消失,只是別人用記錄到的 IP 去反查資訊,會發現使用者在世界各國換來換去。VPN 比較可以控制自己要變成哪個國家,例如看影音串流、買遊戲買貼圖之類的,而 TOR 是另一種與 VPN 不同的機制。(iCloud Private Relay 使用畫面可見下方影片說明)

其二是 Safari 裡面內建多了一個隱藏 IP 位址的設定,但只能對於他判定已知的追蹤器隱藏 IP,而不是任何人都無法取得該使用者的 IP。

做個小小的實驗,像是 GA 都會被列在 Safari 的「已被防止建立您個人資料的追蹤器」裡面, 所以做了一個空網頁,裡面放了GA 追蹤碼,然後分別用 iOS14 跟 iOS15 的 Safari 瀏覽此網頁,看看可能會用 IP 來做判斷機制的 GA 報表,會不會出現 not set? 實驗後發現並沒有甚麼影響…無論用 WiFi 還是 4G,GA 報表裡都有出現正確的城市。

目前還是 beta1 正式版,也許等後續正式版推送更新之後,又會有更多的功能呢。

延伸閱讀