用超多細節探討 Apple 的設計哲學:交互篇

ui設計靠譜站長 發佈 2019-12-31T14:09:34+00:00

TapticEngine 線性震動馬達得益於 Taptic Engine 線性震動馬達,讓 iPhone 有了觸覺上的反饋。

蘋果是一家為數不多以設計驅動的公司。如今,當我們談論起產品設計、用戶體驗,總是離不開蘋果,它所堅持的設計哲學是對細節和質量的極致追求。下面,我就帶大家看看 Apple 在交互方面做的努力。

動態的觸控區域

Apple 為了解決在移動設備上輸入文本的問題,採用了一種流暢並且對用戶友好的解決方案:基於預測輸入系統,擴大虛擬鍵盤的有效觸控區域。

△ 紅色塊為點擊區域

例如,the 和 this 這兩個單詞。當你按下「th」的時候,系統預測下一個字母可能是 e 或 i,從而動態增加這兩個字母的點擊範圍,以此提高輸入的命中率。

當然,視覺上你看不到按鈕尺寸的變化。指尖之上,一切都在無形之中。

音效觸覺反饋

在現實世界中,音效、觸感和視覺能很自然的保持協調,因為三者之間有著很自然的關係。蘋果在數字世界也極力保持著這種體驗。

Taptic Engine 線性震動馬達得益於 Taptic Engine 線性震動馬達,讓 iPhone 有了觸覺上的反饋。

1. 閃光燈

iPhone X 鎖屏上的閃光燈是一個非常高級別的觸覺體驗例子。手電筒圖標會根據手指觸碰的壓力而變化,讓你知道系統正在響應操作,同時也告訴你需要再用力些。

當力度一旦達到,系統會有個短震動,告訴你可以鬆手了,鬆手後還有一個成功的震動反饋。這像不像現實世界的老式拉線燈動作?

△ iPhone X 鎖屏狀態閃光燈

2. 鬧鐘

另外,在鬧鐘應用中,當你調節輪盤時,會有持續的機械震動反饋,且音效是自行車鏈條轉動的齒輪聲。快速撥動輪盤時,視覺上還會有一個物理的慣性力,直到力竭停止。

鬧鐘應用至此,音效、觸感、視覺三者渾然一體,達到了精準的協同表現。

終點與手勢意圖

在 FaceTime 視頻通話中,螢幕角落有一個小的播放窗口代表著自己。這個浮動的小窗口,它就可以被移到螢幕任意的 4個角落,這些角落叫做手勢的終點。

△ 滑動與拖動

你可以拖動浮窗到角落,但這樣需要跨過半個螢幕,非常麻煩。

因此,蘋果基於預測動量這一概念,捕獲滑動的動量和速度。用戶只需輕量級的滑動投擲,即可將浮窗到達預測位置。蘋果把這個叫做,終點和手勢意圖一致。

利用行為線索

蘋果是如果教你使用手勢交互的?

在 Safari 瀏覽器中,每個標籤頁的左上角都有個 X 圖標,當你點擊圖標時,標籤頁會向左滑出,表示它被關閉了。這就暗示,除了點擊圖標,還可以採用左滑操作來關閉標籤頁。

△ Safari 瀏覽器

這就是通過行為動畫線索,用其中一個方式去教另一個操作方式。

△ 向上滑動解鎖

物理曲線動畫

為什麼蘋果系統的過渡動畫看起來很舒服?

因為蘋果大量採用了現實世界的物理特性:慣性、彈性、重力、阻力。和觸控一樣,蘋果把交互動畫放在了極高的位置。

△ Apple Music

Apple Music 模態彈窗的動畫曲線設計非常嚴謹。在螢幕底欄有個迷你播放器,點擊它,可以查看播放詳情。由於點擊這一操作沒有任何動量,所以蘋果用了100% 阻尼來確保它不會過沖。

但你如果下拉關閉模態彈窗時,向下的方向就有了動量,因此蘋果用了80% 阻尼來獲得一些彈性和擠壓。可以看到上面這個動畫,最後底欄會有微彈效果。

如無必要, 勿增實體

2017 年,蘋果發布了 iPhone X,由 Face ID 取代了 Touch ID,確立了新的人機互動解鎖方式。

但劉海的工業設計,被用戶瘋狂吐槽。有沒有別的辦法呢?前蘋果首席設計官喬納森·艾維曾評價 oppo 的升降式攝像頭設計:「這是一個好的 idea,但我們永遠不會這麼做」。

確實,如無必要,勿增實體,這並不符合蘋果公司追求簡潔和一體化的設計理念。

△ FaceID解鎖

雖說丑,但 Face ID 還是有黑科技的。在劉海中有一顆紅外攝像頭,業界一般用 850 nm 波長的,但這個波段很容易受陽光影響。那蘋果是怎麼解決的呢?

它收購了一家相機傳感器公司 InVisage,這家公司的量子薄膜技術,可以讓動態範圍增加 3 倍,一舉將紅外攝像頭的波長提升到了 940nm,這才讓 iPhone 在強烈的太陽光下能夠正常面容識別。

重新定向

在使用設備中,用戶的操作是一直在改變的,所以交互的中間過程,同樣需要重新定向。

△ 上滑與多任務後台

比如,在點開 App 的過程中,突然意識到我實際上想要打開多任務後台,這時交互手勢是可以並行的,不必等到App完全打開,就可以向上滑動,這個過程就是重新定向。

即使已經進行了操作,也可改變意圖,輕鬆取消操作,始終讓介面掌控在用戶的控制之下。

總結

當你需要的時候,它永遠能及時響應。當你滑動操作時候,它永遠能理解你的意圖,並且給你最自然的觸覺反饋。為用戶創造一系列的愉悅體驗,這也許就是蘋果的設計哲學。

原文作者:土撥鼠

連結:

https://www.uisdc.com/apple-design-philosophy-ui

今天就分享到這裡啦~~

如果有任何關於設計的問題

都可以添加Q群和大家一起討論喲!

QQ群:778296837

站長:小夥伴們可以關注一下偶滴抖音,我會定期給大家用詼諧幽默有意思的視頻來教大家更好的認識設計,打開抖音掃描下方二維碼或者直接搜索抖音號就可以看到我啦~筆

關鍵字: