Apple 的設計哲學:交互篇

9 評論 17127 瀏覽 112 收藏 9 分鐘

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

01 動態的觸控區域

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

紅色塊為點擊區域

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

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

02 音效觸覺反饋

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

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

閃光燈

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

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

iPhone X 鎖屏狀態閃光燈

鬧鐘

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

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

03 終點與手勢意圖

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

滑動與拖動

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

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

04 利用行為線索

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

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

Safari 瀏覽器

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

向上滑動解鎖

05 物理曲線動畫

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

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

Apple Music

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

但你如果下拉關閉模態彈窗時,向下的方向就有了動量,因此蘋果用了80%阻尼來獲得一些彈性和擠壓??梢钥吹缴厦孢@個動畫,最后底欄會有微彈效果。

06 如無必要, 勿增實體

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

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

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

FaceID解鎖

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

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

07 重新定向

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

上滑與多任務后臺

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

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

總結

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

 

作者:阿洋;公眾號:洋爺(ID:yangye365)網易資深視覺設計師,每周分享關于交互、產品、視覺上的思考,歡迎關注交流。

本文由 @洋爺 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 點個贊

    回復
  2. 這是越深入研究,就越讓人驚嘆的產品

    來自廣東 回復
  3. 這些細節確實值得深思和學習

    來自四川 回復
  4. 感覺這就是安卓和ios差了點味道的地方

    來自福建 回復
  5. 好棒的細節

    回復
  6. 蘋果賣的貴是有道理的。細節做到位。國產機雖然絕大部分或許可能做到,但是,改變不了模仿跟原創的區別!

    回復
    1. 國產機的設計現狀不是用一句模仿原原創就可以概括的。我可以幫你梳理一下 蘋果這幾年模仿國產機的一些設計

      來自北京 回復
  7. 的確牛逼,只有蘋果做的如此精細

    回復
  8. 來自北京 回復