2021-11-25 資深UI設計者
相比于去年 iOS 14 帶來的小組件和 APP 資源庫的功能,今年 iOS 15 的升級幅度似乎確實沒有那么大。
接下來就從設計師的角度來看看 iOS 15 帶來的視覺和體驗的變化。
iOS 15 對通知中心進行了視覺排版上的優化,放大了 APP 圖標并置于卡片的左側,讓用戶可以通過圖標更輕松的區分和查看消息。
消息小卡片的圓角也更加圓滑,圓角接近于與控制中心按鈕的大小,這種圓角更大的設計也更容易將用戶的視線過渡到內容中心,同時也使得 iOS 系統設計風格能夠更加一致。
在通訊類 APP 的推送中,采用了聯系人照片 + APP 小圖標的組合形態,增加信息來源的辨識度,以這種形式更清晰地告知用戶,所收到的信息的來源和屬性。(目前國內的 APP 例如微信、飛書的消息通知等都還沒有完全適配)
值得注意的是,iOS 15 還可以根據用戶設置的時間來定時推送,這些定時推送會構成一個較大的通知摘要卡片,而摘要的內容會進行智能排序,這種機制將會對設計和運營有較大的影響(所以 APP 通知推送會因為這種機制形成新一輪的內卷么?)
隨著營銷推送的內容越來越密集,用戶承受的信息壓力也越來越大,蘋果也在嘗試構建更多細分場景下的推送管理,在 iOS 15 中用戶可以選擇讓 APP「靜音一小時」或者「今天不再推送」來避免干擾。
新版 Safari 有較大的改進,iOS 15 將頂部的地址欄和底部的工具融合到了屏幕底部,成為了一個懸浮的交互控件,并在視覺上進行了簡化,右滑動地址欄可以在不同的頁面中快速切換,向上輕掃地址欄,則可查看所有打開的標簽頁,這種在底部操作的交互方式也更符合大屏化的趨勢。
這種左右滑動和向上輕滑也明顯能感覺到是從 iOS 整個系統的手勢操作中遷移而來,而這種手勢可以極大的降低用戶的學習成本。
在頁面向下滾動時,懸浮的地址欄和工具欄會自動隱藏到底部,界面看起來沉浸感也更強。
這種交互方式的變化邏輯也符合交互設計中的費茨定律:
費茨定律
任意一點移動到目標中心位置所需要的時間,與目標距離正相關,與目標大小負相關
這里舉個例子來簡單理解一下,手指當前的位置與按鈕的距離 D 越長,所需時間越長;按鈕的寬度 W 越大,所需時間越短。應用到產品設計中就是將按鈕放置在離手指較近的地方,比如屏幕底部易操作區域,完成任務的時間也就會越短。
夸克瀏覽器同樣是將輸入框以及一些常用操作置于底部,這是因為我們正常握持手機時,大拇指離底部更近,所以需要進行點擊操作的時底部的輸入框操作起來更方便,也更快。
Safari 的這種交互方式在移動操作系統已經有了一些案例,三星的 one UI 以及安卓陣營中的眾多產品也都逐漸往這種大屏化的交互邏輯發展。
此外,Safari 采用了新的標簽欄設計,同時可以對繁雜的標簽頁進行整理和保存,標簽組支持多設備間的無縫同步,在任一設備上的改動,都能及時同步到所有設備上。
在使用 iOS 15 的過程中能清晰的感知到,iOS 整很多界面卡片設計更加和諧了,我們最常用的設置頁就整體卡片設計上做了區塊化和圓角化的處理。要比之前系統直線分割的界面柔和許多。
這種通過使用大留白、兩側縮進的卡片設計使得界面所呈現的功能更加清晰,也更能夠突顯內容,同時和蘋果自家產品 App Store、Apple Music 等產品的設計風格更加靠近。
同樣天氣 APP 主界面也做了布局的改動,增加了卡片化的設計,信息組織也更加直觀清晰。天氣 APP 頭部的天氣背景也進行了重新設計,動畫背景更加真實,能夠準確地反映出太陽的位置和降雨情況,相比之前會美觀很多。天氣 APP 也增加空氣質量、溫度、降水強度,空氣質量地圖等諸多功能。
除了通知、Safari 瀏覽器、天氣、錢包、地圖等常用功能的更新外,iOS 15 新版本在其他方面也做了更多功能性的升級,這里就來簡單看下有哪些重要的更新。
1. Live Text
首先就是 iOS 15 中為照片帶來了「實況文本」功能,在這個功能的幫助下,在相冊里長按圖片,就會彈出復制、查詢、翻譯和學習等選項,這個新功能估計也是 iOS 15 更新最實用的功能之一了~(這個功能在錘子手機的“大爆炸”中也有)
Live Text 還可以識別照片的各種元素,比如地標、動植物和花卉種類等等。配合 iPhone 自帶的系統搜索——聚焦搜索(Spotlight),根據文字元素來搜索圖片。
2. 專注模式
iOS 15 加入了「專注模式」,能助你更好地專注重要信息,由之前的「勿擾模式」升級而來,包括勿擾模式、工作模式、個人模式以及睡眠模式。每個狀態可以設置不同的顯示通知,并可與其他設備同步。
3. 大鬧鐘回來了
在此前的 iOS 14 中,設定鬧鐘的控件改為了數字輸入,在隨后的迭代中又改為了很小的滾輪輸入,這種過小的交互空間受到了很多用戶的吐槽。
iOS 15 中蘋果又將鬧鐘設置改為 iOS 13 的大滾輪,隨手上下拖動撥盤就輕松的設定好鬧鐘了。
4. 桌面小組件
不知道小伙伴有沒有發現,在 iOS 14 中桌面重疊的小組件沒法拖動出來,只能手動刪除再重新添加。在 iOS 15 蘋果就解決了這個問題,小組件現在可以從堆疊狀態移出,同時可以選擇智能輪換和小組件建議是否打開。
桌面還有一項大的變化就是可以整頁移動了,相比 iOS 14 只能一個一個拖動 APP,整頁的切換和隱藏大幅縮短了 APP 布局困難者的“編輯”時間。
此外,iOS 15 相機和天氣的圖標也進行了一些細微調整。“健康” APP 中新加入了健康趨勢,其中包括靜息心率、睡眠和有氧適能,持續觀測健康狀況的變化。FaceTime 中也增加了空間音頻、人像模式、語音隔離、同播共享等功能。相冊增加了 EXIF 參數顯示等。
除了系統及界面以外,iOS 在 Human Interface Guidelines(界面設計指南)的內容上也有了一些更新,比如新增了包容性的設計原則,SF Symbols 3.0 圖標的新增,以及新的空間交互的設計。更多關于 iOS 人機界面設計指南可參考 :https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
總的來說,雖然修修補補又一年,但 iOS15 系統在細節設計以及新功能上確實提升了用戶體驗。
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( m.91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務