通常,硬體的外觀僅僅是作為一種體驗的容器存在,而軟體使用者介面(User Interface)的體驗,則決定了我們是否喜歡這個裝置。下面,就和大家看看 Apple 在介面方面做的努力。
高度統一的設計語言蘋果的設計語言有四個標誌性特徵:平滑圓角矩形 (Squircle)、陰影(Shadows)、半透明(Translucency)和高斯模糊 (Blurring),它們幾乎貫穿整個系統。從原生應用:相簿、App Store 應用商店、音樂都有這些元素,並且高度統一。
△ AppStore 十年變化
1. 圓角矩形
從 iOS 7 轉型扁平化的今天,蘋果完成了對「圓角矩形」的終極運用。蘋果引入了工業設計中連續曲率概念,應用在圓角圖示的輪廓之上。
但真正意義上的運用,體現在 iPhone X 釋出之後。得益於 OLED 柔性屏和 COP 封裝,iPhone X 四邊等寬的機身達到了最高的設計美學,螢幕的外輪廓也追隨機身形態,於是就有了圓角的 Dock。
△ 蝸牛讀書 App
在《致匠心,以設計》這本書中有提到蝸牛讀書 App,在大的彈窗和卡片引入了曲率圓角。雖然這是一個很細節的設計,甚至感知不到。但它就是設計師不斷追求的東西。
2. 陰影、半透明和高斯模糊
投影可以凸顯內容的重要性,半透明和高斯模糊暗示背後有更多的內容,同時可以保持介面輕盈、通透。
△ Apple MusiciOS 13版本
相對於 iOS 12,iOS 13 將半透明的特性更進一步。除了迷你播放器之外,Apple Music 的底部導航選單也變成半透明+高斯模糊了。
△ 相簿 iOS 13版本
而系統相簿的更新,則延續了 App Store 應用商店的卡片樣式。至此,圓角、投影、半透明和高斯模糊,這四個特徵在相簿介面皆得到了印證。
極致的圖示細節1. 語音備忘錄
就拿語音備忘錄來說,它的音軌圖形並不是隨意畫出來的。而是用錄音功能,說出「Apple」這個單詞,所呈現的音軌波形。
△ 語音備忘錄 & Apple 單詞的音軌
而且,還有一個小細節是,語音備忘錄是唯一支援 180° 豎屏旋轉的自帶應用。因為它常見的使用場景是採訪,需要將手機底部的麥克風對著受訪者,而這時圖形介面是反的。所以支援旋轉,這是一個基於使用者使用場景的細節設計。
2. 地圖
在蘋果地圖 App 圖示上有一個角標「280」,它代表的是蘋果所在的總部位置,一條位於美國加州 280 州際公路附近。
另外,新的圖示裡,右上角露出了 Apple Park ,也就是我們熟知的飛船圖形,這和實際的平面地圖完全吻合。
△ 蘋果新總部位置
3. Safari 瀏覽器
新的 Safari 圖示,磁針的角度由原來的45°變成了50°。有一個頗有意思的解釋是,地磁的北極在一直在持續向北移動,在過去的 150 年裡偏移超過 1000 公里。這個說法顯然更具有故事性,但事實並非如此。因為磁極向北,那麼磁針角度應該越來越小才對,而不是增大。
實際上,45° 改為 50° 是出於視覺上的修正。左邊舊的圖示,45° 磁針剛覆蓋的是短的刻度條,被倆長刻度條相夾,略顯擁擠。而新的圖示剛好相反,50° 磁針相鄰是短刻度,視覺上更具空間感和韻律感。
3. 時鐘
大家都知道時鐘 App 的圖示時間是和系統時間同步的,秒針也會勻速轉動。重點來了,長按時鐘 App ,秒針的運動方式由勻速變成滴答滴答機械式轉動了。
利用視覺線索為什麼蘋果系統上手容易?在現實世界中,有些東西你一看就知道它如何使用,比如門把手、無印良品的 CD 機。
這裡有個心理學的概念:示能(Affordance),在 iOS 中也建立了類似的機制。使用者藉助以往的經驗,通過圖形,預期下一步的行為或感知它是做什麼的。
△ 滾動內容 & 多頁內容
比如:左邊有一列滾動內容,你可以在底部裁剪掉半個文字,讓人嘗試著去發現下面還有更多的內容。如果有好幾頁內容,那就可以用頁面指示物,來引導還有其他幾頁內容。
△ 滑動視窗
對於滑動視窗內容,你可以用像這樣的一個把手來暗示它是可以被抓取並滑動的。
隱喻好的設計是有溝通力的,隱喻 (Metaphors) 就是一種很好的方式,它同時也是 iOS 六大設計原則之一。
1. 時間隱喻
很多人覺得 UI,不就是顏色、間距那些東西嗎,好像沒什麼可設計的。那我們且看,iOS 簡訊介面是怎麼處理的:
蘋果就這樣通過顏色漸變、間距,完成了對時間的隱喻。
2. 速度隱喻
蘋果系統有一項「朗讀螢幕」的功能,雙指從螢幕頂部向下輕掃,即可撥出。將 iPhone 或 iPad 上的文件、網頁或微信裡的文字讀出來,幫助你將閱讀變為朗讀。
當然,你也可以控制系統朗讀的語速,Apple 很形象的將龜兔賽跑的圖示,隱喻在速度之上。當一個應用程式的虛擬介面是植根於熟悉的真實世界時,那麼使用者會學習的更快。
裝置同步蘋果的音訊產品線有很多,諸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3,每一個都有各自的圖示。不管你連線哪個,都會同步顯示具體裝置。
比如,當你手機連線了 AirPods Pro ,電話介面的音訊喇叭 icon 會變成 AirPods Pro 的 icon。另外,AirPlay 功能可以連線多個揚聲器,甚至新舊款的 iPhone 圖示都有區分。
△ AirPods Pro 圖示 & 全面屏 iPhone 圖示
同樣,如果你有 Powerbeats3 耳機,並且系統是最新的 iOS 13。當你調節音量的時候,喇叭 icon 同樣會變成 Powerbeats3 耳機圖示。
△ Powerbeats3 圖示
San Francisco 字型的祕密舊金山字型現在是 Apple 平臺統一的標準字型:被應用在 Apple Watch,iPhone,iPad 和 Mac上,取代了以前的 Helvetica Neue。
新字型有些微妙的變化,最讓我印象深刻的是冒號「 : 」的顯示方式。正常情況下,冒號是在基線上,視覺感知會偏下。但如果冒號是放在數字中間,系統會將它垂直居中對齊。
除此之外,「#」符號中間的開口是個非平行切口,這是特意被增大處理的。因為 # 的字號在縮小到一定程度的時候,切口會難以識別。所以視覺上需要更多的空白,提高可讀性。
非線性動畫使用者體驗有一個重要效能指標是:響應速度(Speed Index)。隨著硬體裝置的不斷提升,不可否認的是,現在的 Android 啟動速度比 iOS 更快,但是,蘋果加入了很多非線性動畫,以及穩定的幀率表現,在流暢度方面 iOS 更勝一籌。
解釋下非線性動畫,就是一開始很快,最後慢慢慢下來。比如:開啟任意一個 App 的過程動畫、鍵盤拉起時的瞬間,以及 iOS 13 控制中心黑暗模式快捷切換,這個 icon 動畫同樣用了非線性。
還有一直被詬病的音量和靜音調節,終於得到解決。原先的大 Toast 提示會擋住當前內容,現在改到居頂顯示,並加入物理衰減鈴鐺動畫,極為真實。
總結在 Apple 的介面視覺中,我們看到了各種隱喻和暗示,我們看到了非線性動畫帶來的流暢體驗,我們看到了雕刻細節的過程。它是設計師不斷追求的東西,最終給使用者呈現的是額外的禮遇般的的產品體驗。
-
1 #
-
2 #
眾所周知,那些icon並不是圓角矩形
-
3 #
說得好,可惜吾等屌絲實在是理解不了+一個長焦賣3000的價格美學,再見?
-
4 #
確實煞費苦心。但是我還是用不慣......
-
5 #
發展到一定高度才有空閒時間去設計研究這些細枝末節,路漫漫其修遠兮
-
6 #
好多你覺著太好看太人性太喜歡的UI設計,大部分都是因為你土才會這樣認為的~
- 1文看完Iphone12釋出會,不帶充電頭成為最大槽點
- 蘋果一週熱門:Epic Games VS Apple, iPhone 12傳聞和iOS 13.6.1
- iOS14真的不行?這8個未公開新功能,你可能還不知道
- iOS鮮為人知的6款黑科技APP,讓你的iPhone好用數倍
- ios14一鍵禁用隱私讀取,廣告業被顛覆,人工智慧無用武之地
- iOS 14 Beta 5 有這 6 個新改動,你會升級嗎?
- 蘋果停用Epic開發者賬號和開發工具,《原神》公測定檔9月28號
- 蘋果調整關鍵詞覆蓋演算法,愛奇藝遭美證監會調查丨每週熱點
- 蘋果iOS系統更新將會把使用者請求重定向到 News+ APP
- 蘋果或將推捆綁銷售計劃“Apple One”,與新機一起釋出
就是這些不起眼的動畫豐富了體驗