Apple 的設(shè)計哲學(xué):交互篇
蘋果是一家為數(shù)不多以設(shè)計驅(qū)動的公司。如今,當(dāng)我們談?wù)撈甬a(chǎn)品設(shè)計、談?wù)撈鹩脩趔w驗,總是離不開蘋果,它所堅持的設(shè)計哲學(xué)是對細節(jié)和質(zhì)量的極致追求。下面,我就帶大家看看 Apple 在交互方面做的努力。
01 動態(tài)的觸控區(qū)域
Apple 為了解決在移動設(shè)備上輸入本文的問題,采用了一種流暢并且對用戶友好的解決方案:基于預(yù)測輸入系統(tǒng),擴大虛擬鍵盤的有效觸控區(qū)域。
紅色塊為點擊區(qū)域
例如,the 和 this 這兩個單詞。當(dāng)你按下“th”的時候,系統(tǒng)預(yù)測下一個字母可能是 e 或 i,從而動態(tài)增加這兩個字母的點擊范圍,以此提高輸入的命中率。
當(dāng)然,視覺上你看不到按鈕尺寸的變化。指尖之上,一切都在無形之中。
02 音效觸覺反饋
在現(xiàn)實世界中,音效、觸感和視覺能很自然的保持協(xié)調(diào),因為三者之間有著很自然的關(guān)系。蘋果在數(shù)字世界也極力保持著這種體驗。
Taptic Engine線性震動馬達得益于 Taptic Engine 線性震動馬達,讓 iPhone 有了觸覺上的反饋。
閃光燈
iPhone X 鎖屏上的閃光燈是一個非常高級別的觸覺體驗例子。手電筒圖標(biāo)會根據(jù)手指觸碰的壓力而變化,讓你知道系統(tǒng)正在響應(yīng)操作,同時也告訴你需要再用力些。
當(dāng)力度一旦達到,系統(tǒng)會有個短震動,告訴你可以松手了,松手后還有一個成功的震動反饋。這像不像現(xiàn)實世界的老式拉線燈動作?
iPhone X 鎖屏狀態(tài)閃光燈
鬧鐘
另外,在鬧鐘應(yīng)用中,當(dāng)你調(diào)節(jié)輪盤時,會有持續(xù)的機械震動反饋,且音效是自行車鏈條轉(zhuǎn)動的齒輪聲??焖贀軇虞啽P時,視覺上還會有一個物理的慣性力,直到力竭停止。
鬧鐘應(yīng)用至此,音效、觸感、視覺三者渾然一體,達到了精準的協(xié)同表現(xiàn)。
03 終點與手勢意圖
在 FaceTime 視頻通話中,屏幕角落有一個小的播放窗口代表著自己。這個浮動的小窗口,它就可以被移到屏幕任意的4個角落,這些角落叫做手勢的終點。
滑動與拖動
你可以拖動浮窗到角落,但這樣需要跨過半個屏幕,非常麻煩。
因此,蘋果基于預(yù)測動量這一概念,捕獲滑動的動量和速度。用戶只需輕量級的滑動投擲,即可將浮窗到達預(yù)測位置。蘋果把這個叫做,終點和手勢意圖一致。
04 利用行為線索
蘋果是如果教你使用手勢交互的?
在 Safari 瀏覽器中,每個標(biāo)簽頁的左上角都有個X圖標(biāo),當(dāng)你點擊圖標(biāo)時,標(biāo)簽頁會向左滑出,表示它被關(guān)閉了。這就暗示,除了點擊圖標(biāo),還可以采用左滑操作來關(guān)閉標(biāo)簽頁。
Safari 瀏覽器
這就是通過行為動畫線索,用其中一個方式去教另一個操作方式。
向上滑動解鎖
05 物理曲線動畫
為什么蘋果系統(tǒng)的過渡動畫看起來很舒服?
因為蘋果大量采用了現(xiàn)實世界的物理特性:慣性、彈性、重力、阻力。和觸控一樣,蘋果把交互動畫放在了極高的位置。
Apple Music
Apple Music 模態(tài)彈窗的動畫曲線設(shè)計非常嚴謹。在屏幕底欄有個迷你播放器,點擊它,可以查看播放詳情。由于點擊這一操作沒有任何動量,所以蘋果用了100%阻尼來確保它不會過沖。
但你如果下拉關(guān)閉模態(tài)彈窗時,向下的方向就有了動量,因此蘋果用了80%阻尼來獲得一些彈性和擠壓。可以看到上面這個動畫,最后底欄會有微彈效果。
06 如無必要, 勿增實體
2017年,蘋果發(fā)布了 iPhone X,由 Face ID 取代了 Touch ID,確立了新的人機交互解鎖方式。
但劉海的工業(yè)設(shè)計,被用戶瘋狂吐槽。有沒有別的辦法呢?前蘋果首席設(shè)計官喬納森·艾維曾評價oppo的升降式攝像頭設(shè)計:“這是一個好的 idea,但我們永遠不會這么做”。
確實,如無必要,勿增實體,這并不符合蘋果公司追求簡潔和一體化的設(shè)計理念。
FaceID解鎖
雖說丑,但 Face ID 還是有黑科技的。在劉海中有一顆紅外攝像頭,業(yè)界一般用850nm波長的,但這個波段很容易受陽光影響。那蘋果是怎么解決的呢?
它收購了一家相機傳感器公司 InVisage,這家公司的量子薄膜技術(shù),可以讓動態(tài)范圍增加3倍,一舉將紅外攝像頭的波長提升到了 940nm,這才讓 iPhone 在強烈的太陽光下能夠正常面容識別。
07 重新定向
在使用設(shè)備中,用戶的操作是一直在改變的,所以交互的中間過程,同樣需要重新定向。
上滑與多任務(wù)后臺
比如,在點開App的過程中,突然意識到我實際上想要打開多任務(wù)后臺,這時交互手勢是可以并行的,不必等到App完全打開,就可以向上滑動,這個過程就是重新定向。
即使已經(jīng)進行了操作,也可改變意圖,輕松取消操作,始終讓界面掌控在用戶的控制之下。
總結(jié)
當(dāng)你需要的時候,它永遠能及時響應(yīng)。當(dāng)你滑動操作時候,它永遠能理解你的意圖,并且給你最自然的觸覺反饋。為用戶創(chuàng)造一系列的愉悅體驗,這也許就是蘋果的設(shè)計哲學(xué)。
作者:阿洋;公眾號:洋爺(ID:yangye365)網(wǎng)易資深視覺設(shè)計師,每周分享關(guān)于交互、產(chǎn)品、視覺上的思考,歡迎關(guān)注交流。
本文由 @洋爺 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
點個贊
這是越深入研究,就越讓人驚嘆的產(chǎn)品
這些細節(jié)確實值得深思和學(xué)習(xí)
感覺這就是安卓和ios差了點味道的地方
好棒的細節(jié)
蘋果賣的貴是有道理的。細節(jié)做到位。國產(chǎn)機雖然絕大部分或許可能做到,但是,改變不了模仿跟原創(chuàng)的區(qū)別!
國產(chǎn)機的設(shè)計現(xiàn)狀不是用一句模仿原原創(chuàng)就可以概括的。我可以幫你梳理一下 蘋果這幾年模仿國產(chǎn)機的一些設(shè)計
的確牛逼,只有蘋果做的如此精細
棒