Apple的UI設(shè)計(jì)哲學(xué)，每處細(xì)節(jié)都引起極度舒適
來(lái)源：洋爺
原標(biāo)題：Apple 的設(shè)計(jì)哲學(xué) · UI 篇
通常，硬件的外觀僅僅是作為一種體驗(yàn)的容器存在，而軟件用戶(hù)界面(User Interface)的體驗(yàn)，則決定了我們是否喜歡這個(gè)設(shè)備。下面，就和大家看看 Apple 在界面方面做的努力。
一、高度統(tǒng)一的設(shè)計(jì)語(yǔ)言
蘋(píng)果的設(shè)計(jì)語(yǔ)言有四個(gè)標(biāo)志性特征：平滑圓角矩形(Squircle)、陰影(Shadows)、半透明(Translucency) 和高斯模糊(Blurring)，它們幾乎貫穿整個(gè)系統(tǒng)。從原生應(yīng)用：相冊(cè)、App Store 應(yīng)用商店、音樂(lè)都有這些元素，并且高度統(tǒng)一。
App Store 十年變化
1、圓角矩形
從 iOS 7 轉(zhuǎn)型扁平化的今天，蘋(píng)果完成了對(duì)「圓角矩形」的終極運(yùn)用。蘋(píng)果引入了工業(yè)設(shè)計(jì)中連續(xù)曲率概念，應(yīng)用在圓角圖標(biāo)的輪廓之上。
圓角矩形
但真正意義上的運(yùn)用，體現(xiàn)在 iPhone X 發(fā)布之后。
得益于 OLED 柔性屏和 COP 封裝，iPhone X 四邊等寬的機(jī)身達(dá)到了最高的設(shè)計(jì)美學(xué)，屏幕的外輪廓也追隨機(jī)身形態(tài)，于是就有了圓角的 Dock。
蝸牛讀書(shū) App
例如上圖蝸牛讀書(shū)App，在大的彈窗和卡片引入了曲率圓角。雖然這是一個(gè)很細(xì)節(jié)的設(shè)計(jì)，甚至感知不到。但它就是設(shè)計(jì)師不斷追求的東西。
2、陰影、半透明和高斯模糊
投影可以凸顯內(nèi)容的重要性，半透明和高斯模糊暗示背后有更多的內(nèi)容，同時(shí)可以保持界面輕盈、通透。
Apple Music iOS 13 版本
相對(duì)于 iOS 12，iOS 13 將半透明的特性更進(jìn)一步。除了迷你播放器之外，Apple Music 的底部導(dǎo)航菜單也變成半透明+高斯模糊了。
細(xì)心觀察，微信同樣認(rèn)同這種語(yǔ)言，在頂欄和底欄做了微弱的半透明和模糊。
相冊(cè) iOS 13 版本
而系統(tǒng)相冊(cè)的更新，則延續(xù)了 App Store 應(yīng)用商店的卡片樣式。至此，圓角、投影、半透明和高斯模糊，這四個(gè)特征在相冊(cè)界面皆得到了印證。
二、極致的圖標(biāo)細(xì)節(jié)
1、語(yǔ)音備忘錄
就拿語(yǔ)音備忘錄來(lái)說(shuō)，它的音軌圖形并不是隨意畫(huà)出來(lái)的。而是用錄音功能，說(shuō)出“Apple”這個(gè)單詞，所呈現(xiàn)的音軌波形。
語(yǔ)音備忘錄 & Apple單詞的音軌
而且，還有一個(gè)小細(xì)節(jié)是，語(yǔ)音備忘錄是唯一支持180°豎屏旋轉(zhuǎn)的自帶應(yīng)用。因?yàn)樗Ｒ?jiàn)的用場(chǎng)景是采訪，需要將手機(jī)底部的麥克風(fēng)對(duì)著受訪者，而這時(shí)圖形界面是反的。所以支持旋轉(zhuǎn)，這是一個(gè)基于用戶(hù)使使用場(chǎng)景的細(xì)節(jié)設(shè)計(jì)。
2、地圖
在蘋(píng)果地圖 App 圖標(biāo)上有一個(gè)角標(biāo)「280」，它代表的是蘋(píng)果所在的總部位置，一條位于美國(guó)加州 280 州際公路附近。
蘋(píng)果地圖 App
另外，新的圖標(biāo)里，右上角露出了 Apple Park ，也就是我們熟知的飛船圖形，這和實(shí)際的平面地圖完全吻合。
蘋(píng)果新總部位置
3、Safari 瀏覽器
新的 Safari 圖標(biāo)，磁針的角度由原來(lái)的45°變成了50°。
有一個(gè)頗有意思的解釋是，地磁的北極在一直在持續(xù)向北移動(dòng)，在過(guò)去的150年里偏移超過(guò)1000公里。這個(gè)說(shuō)法顯然更具有故事性，但事實(shí)并非如此。因?yàn)榇艠O向北，那么磁針角度應(yīng)該越來(lái)越小才對(duì)，而不是增大。
Safari 瀏覽器
實(shí)際上，45° 改為 50° 是出于視覺(jué)上的修正。左邊舊的圖標(biāo)，45°磁針剛覆蓋的是短的刻度條，被倆長(zhǎng)刻度條相夾，略顯擁擠。而新的圖標(biāo)剛好相反，50°磁針相鄰是短刻度，視覺(jué)上更具空間感和韻律感。
4、時(shí)鐘
大家都知道時(shí)鐘 App 的圖標(biāo)時(shí)間是和系統(tǒng)時(shí)間同步的，秒針也會(huì)勻速轉(zhuǎn)動(dòng)。重點(diǎn)來(lái)了，長(zhǎng)按時(shí)鐘 App ，秒針的運(yùn)動(dòng)方式由勻速變成滴答滴答機(jī)械式轉(zhuǎn)動(dòng)了。
時(shí)鐘 App 滴答動(dòng)畫(huà)
三、利用視覺(jué)線索
為什么蘋(píng)果系統(tǒng)上手容易？在現(xiàn)實(shí)世界中，有些東西你一看就知道它如何使用，比如門(mén)把手、無(wú)印良品的CD機(jī)。
這里有個(gè)心理學(xué)的概念：示能(Affordance)，在 iOS 中也建立了類(lèi)似的機(jī)制。用戶(hù)借助以往的經(jīng)驗(yàn)，通過(guò)圖形，預(yù)期下一步的行為或感知它的是做什么的。
滾動(dòng)內(nèi)容 & 多頁(yè)內(nèi)容
比如，左邊有一列滾動(dòng)內(nèi)容，你可以在底部裁剪掉半個(gè)文字，讓人嘗試著去發(fā)現(xiàn)下面還有更多的內(nèi)容。如果有好幾頁(yè)內(nèi)容，那就可以用頁(yè)面指示物，來(lái)引導(dǎo)還有其他幾頁(yè)內(nèi)容。
滑動(dòng)窗口
對(duì)于滑動(dòng)窗口內(nèi)容，你可以用像這樣的一個(gè)把手來(lái)暗示它是可以被抓取并滑動(dòng)的。
四、隱喻
好的設(shè)計(jì)是有溝通力的，隱喻(Metaphors)就是一種很好的方式，它同時(shí)也是 iOS 六大設(shè)計(jì)原則之一。
1、時(shí)間隱喻
很多人覺(jué)得 UI，不就是顏色、間距那些東西嗎，好像沒(méi)什么可設(shè)計(jì)的。那我們且看，iOS 短信界面是怎么處理的：
短信氣泡的背景顏色是有深淺變化的，信息越早，顏色越淡。
連發(fā)兩條信息，它們上下的間矩是很小的，并且只有下面的信息氣泡有角標(biāo)。
如果發(fā)送的間隔時(shí)間長(zhǎng)一點(diǎn)，短信的上下間距會(huì)變大。
短信界面
蘋(píng)果就這樣通過(guò)顏色漸變、間距，完成了對(duì)時(shí)間的隱喻。
2、速度隱喻
蘋(píng)果系統(tǒng)有一項(xiàng)“朗讀屏幕”的功能，雙指從屏幕頂部向下輕掃，即可呼出。將 iPhone 或 iPad 上的文檔、網(wǎng)頁(yè)或微信里的文字讀出來(lái)，幫助你將閱讀變?yōu)槔首x。
當(dāng)然，你也可以控制系統(tǒng)朗讀的語(yǔ)速，Apple 很形象的將龜兔賽跑的圖標(biāo)，隱喻在速度之上。當(dāng)一個(gè)應(yīng)用程序的虛擬界面是植根于熟悉的真實(shí)世界時(shí)，那么用戶(hù)會(huì)學(xué)習(xí)的更快。
龜兔賽跑
五、設(shè)備同步
蘋(píng)果的音頻產(chǎn)品線有很多，諸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3，每一個(gè)都有各自的圖標(biāo)。不管你連接哪個(gè)，都會(huì)同步顯示具體設(shè)備。
比如，當(dāng)你手機(jī)連接了 AirPods Pro ，電話界面的音頻喇叭 icon 會(huì)變成 AirPods Pro 的 icon。另外，AirPlay 功能可以連接多個(gè)揚(yáng)聲器，甚至新舊款的 iPhone 圖標(biāo)都有區(qū)分。
AirPods Pro 圖標(biāo) & 全面屏 iPhone 圖標(biāo)
同樣，如果你有 Powerbeats3 耳機(jī)，并且系統(tǒng)是最新的iOS 13。當(dāng)你調(diào)節(jié)音量的時(shí)候，喇叭 icon 同樣會(huì)變成 Powerbeats3 耳機(jī)圖標(biāo)。
Powerbeats3 圖標(biāo)
六、San Francisco 字體的秘密
舊金山字體現(xiàn)在是 Apple 平臺(tái)統(tǒng)一的標(biāo)準(zhǔn)字體：被應(yīng)用在 Apple Watch，iPhone，iPad和Mac上，取代了以前的 Helvetica Neue。
冒號(hào)的居中對(duì)齊優(yōu)化
新字體有些微妙的變化，最讓我印象深刻的是冒號(hào)「 : 」的顯示方式。
正常情況下，冒號(hào)是在基線上，視覺(jué)感知會(huì)偏下。但如果冒號(hào)是放在數(shù)字中間，系統(tǒng)會(huì)將它垂直居中對(duì)齊。
符號(hào)的優(yōu)化
除此之外，「#」符號(hào)中間的開(kāi)口是個(gè)非平行切口，這是特意被增大處理的。因?yàn)?# 的字號(hào)在縮小到一定程度的時(shí)候，切口會(huì)難以識(shí)別。所以視覺(jué)上需要更多的空白，提高可讀性。
七、非線性動(dòng)畫(huà)
用戶(hù)體驗(yàn)有一個(gè)重要性能指標(biāo)是：響應(yīng)速度(Speed Index)。隨著硬件設(shè)備的不斷提升，不可否認(rèn)的是，現(xiàn)在的 Android 啟動(dòng)速度比 iOS 更快，但是，蘋(píng)果加入了很多非線性動(dòng)畫(huà)，以及穩(wěn)定的幀率表現(xiàn)，在流暢度方面 iOS 更勝一籌。
iOS 13 黑暗模式切換動(dòng)畫(huà)
解釋下非線性動(dòng)畫(huà)，就是一開(kāi)始很快，最后慢慢慢下來(lái)。比如，打開(kāi)任意一個(gè) App 的過(guò)程動(dòng)畫(huà)、鍵盤(pán)拉起時(shí)的瞬間，以及 iOS 13 控制中心黑暗模式快捷切換，這個(gè)icon 動(dòng)畫(huà)同樣用了非線性。
iOS 13 靜音開(kāi)關(guān)動(dòng)畫(huà)
還有一直被詬病的音量和靜音調(diào)節(jié)，終于得到解決。原先的大 Toast 提示會(huì)擋住當(dāng)前內(nèi)容，現(xiàn)在改到居頂顯示，并加入物理衰減鈴鐺動(dòng)畫(huà)，極為真實(shí)。
在 Apple 的界面視覺(jué)中，我們看到了各種隱喻和暗示，我們看到了非線性動(dòng)畫(huà)帶來(lái)的流暢體驗(yàn)，我們看到了雕刻細(xì)節(jié)的過(guò)程。它是設(shè)計(jì)師不斷追求的東西，最終給用戶(hù)呈現(xiàn)的是額外禮遇般的的產(chǎn)品體驗(yàn)。
經(jīng)授權(quán)轉(zhuǎn)載至數(shù)英，轉(zhuǎn)載請(qǐng)聯(lián)系原作者
作者公眾號(hào)： 洋爺（ID： yangye365）
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（3條）