Apple 的設計哲學:交互篇

2021-01-08 人人都是產品經理

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

01 動態的觸控區域

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

紅色塊為點擊區域

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

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

02 音效觸覺反饋

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

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

閃光燈

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

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

iPhone X 鎖屏狀態閃光燈

鬧鐘

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

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

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協議。

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}

相關焦點

  • 信息維度與互動設計原理
    互動設計原理不僅關心互動設計是什麼的本質問題，還關心互動設計如何做，以及為什麼進行互動設計的問題。深入剖析互動設計產生的政治、軍事、經濟、科學、技術、社會、哲學和文化背景，人類可以發現，信息維度與互動設計由內而外、由表及裡的陰陽轉化關係。
  • apple watch3和apple watch2有什麼區別? 兩者對比分析介紹
    apple watch3和apple watch2區別介紹： 　　apple watch3介紹： 　　顏色：白色，黑色，金色，灰色 　　產品尺寸 　　38mm：38.6*33.3*11.4mm 　　42mm：42.5*36.4*11.4mm 　　產品重量
  • 互動設計的最後一公裡(一)——動效設計
    動效設計在交互稿的邏輯展示及提高可讀性方面是很有必要的，當然其作用也不限於交互稿的展示，還有很多富有創意的設計點都可以用動效設計來進行表現滿足用戶心理需求是對互動設計的完善與補充，包括引導用戶操作、對用戶的操作進行反饋等；提升產品的用戶體驗是互動設計的升華，包括減少用戶在使用過程中的不適感，增強產品的操作流暢度，提升產品的氣質。
  • 收錄美國15校 · 最強互動設計專業全攻略
    我曾就藝術設計留學行業內對互動設計的盲區專門有寫過一篇文章，即《讀懂互動設計專業的四大方向》，從「互動設計專業的四大方向」、「代表院校」和「作品展示」三個方面詳細解釋過互動設計專業的分類，旨在告訴每位學生 / 潛在的申請者都應該：
  • "bad apple"的意思可不是"壞蘋果"!
    那麼猜一猜，The apple of one’s eye是什麼意思？·The apple of one『s eye這個短語就算按學渣式英文的字面意思理解，那就是「某人眼中的蘋果」，所以這個短語表示某個特別珍愛的人/物。
  • 關於交互Demo設計的一些建議
    為方便產品經理、設計師、開發及項目相關人員能夠看到直觀的效果，進行更有效的溝通；提供直觀的產品設想，說明用戶將如何與產品進行交互，在互動設計的過程中一定會產出各種各樣的產出物，如流程圖、思維圖、紙上的草稿、甚至高保真演示稿。這裡簡單分享下自己在項目過程中的交互Demo設計的一些心得。
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    相對於物理世界中的摩擦現象，認知摩擦則是因為信息化程度的不斷加深，由信息膨脹導致人機互動界面設計不良的一種現象。例如，及時的進行產品的可用性測試；為初版的產品設計用戶反饋機制等。三、互動設計中的認知負荷1.
  • 從互動設計到產品設計到服務設計,變遷是怎麼發生的?
    2009-2018這十年間，我們經歷了互動設計熱、產品設計熱以及近兩年的服務設計熱。這些變遷背後的原因是什麼？一、互動設計1. 互動設計的時代特點互動設計在國內的興起應該要從十年前說起，也就是2009年。其實互動設計並不是什麼新詞，在國外已經存在了幾十年了。為什麼2009年突然火了呢？因為移動網際網路出現了。
  • 卡內基梅隆大學互動設計專業全面解析
    互動設計專業是CMU的一門強勢學科，並且也是眾多藝術留學生的選擇。接下來，大家就一起來了解一下關於卡內基梅隆大學互動設計專業的介紹吧！CMU HCI的項目更加側重的是：設計流程，用戶研究，用戶體驗設計這些東西。也就是說，CMU的HCI項目，從課程設置和就業方向上來說，和互動設計非常類似。 Master的HCI項目學用戶體驗、可用性，畢業後最合適的工作是在業界的大小公司的產品線上工作。
  • 汽車人機互動設計,業內人士是怎麼看的?
    前幾天，車轍君參加了一場由汽車財經網與同濟大學"創業谷"舉辦的首屆"中國汽車互動設計（國際）論壇"，非常有幸聽到了來自全球各領域專業人士對汽車互動設計在行業發展應用的看法，也大概了解到了現階段汽車互動設計的一個概況，借著這個機會，願結合自己對汽車互動設計對智能汽車影響的一點看法和大家分享一下。
  • 學者翻譯前蘇格拉底哲學殘篇
    學者翻譯前蘇格拉底哲學殘篇 2014年05月14日 08:58 來源：中國社會科學報 作者：張春海 張夢穎 字號 內容摘要： 關鍵詞：
  • HCI互動設計留學-年薪百萬的交互專業有哪些學校可以申?
    因此，近年來與「萬物互聯」時代發展所匹配的專業變得異常火爆，比如說越來越火的互動設計以及相關專業。 互動設計專業的範疇主要是設計交互的產品（硬體）和規劃交互的服務（看不見的硬體，無形的交互）。
  • MDBJ | 不斷創新的交互形式,華山論劍,誰與爭鋒
    ● MDBJ Daily · 第133期科技變革從不止步，設計創新永不停歇。二十世紀七八十年代，從施樂、蘋果、到各種計算機研究所，都在討論為數字產品提供更加人性化的方式。其中有兩位工業設計師Bill Moggridge和Bill Verplank在設計第一臺筆記本電腦時創造了互動設計這個詞。至此，人機互動開始走進公眾的視野。
  • 英國互動設計清單:十所高校五十個專業,總有一所適合你
    回復「互動設計」送你offer拿到手軟的大招前兩天範兒姐給大家簡單介紹了幾所英國互動設計的院校，收到很多同學的諮詢。今天範兒姐再來給大家總結下英國的互動設計專業，送上超全互動設計清單給大家作為參考。通過研究、原型製作和開發響應性強且複雜的設計項目來探索這些問題:交互——人類、非人類、系統和對象如何在有意義的體驗中交互。設計——滿足美學和戰略需要，在物質世界中尋求價值。溝通——運用敘述和信息來創造未來的能力。
  • 解讀交互稿模板:如何讓設計稿更規範化?
    其實想要畫出一份合乎規範的交互稿並不難，只需找前輩的稿子參考一下就能習得十之六七。但由於設計稿大多涉及企業機密，有著較強的產權屬性，所以一般很難接觸到。今天筆者將通過「解讀一份交互稿模板」的方式，解決上面的幾個問題。1. 交互稿應該包含哪些內容？
  • 「bad apple」是什麼意思?水果英語單詞各類意思短語彙總
    ­　　蘋果篇­　　外表紅彤彤、口感酸甜可口的蘋果，在中西方都特別受人喜愛，所以，有關蘋果的幾個水果英文表達大多略含褒義。­　　·the Big Apple­　　the Big Apple是大蘋果的意思嗎？­　　不要忽視，後面兩個詞都是首字母大寫啦！
  • 習慣養成APP的互動設計&視覺設計
    本文通過展示UI設計稿、需求分析報告和互動設計文檔，全面詳解養成APP的交互體驗與視覺設計。前言「學樹」（Habitree）是9月時從互動設計到UI設計獨立完成的一個個人項目，也是第一次挑戰時間管理類應用這個有趣的領域。雖然最終因為種種原因很遺憾沒有順利地交付開發和實際上線，但設計階段還是已經有一個相對完整的階段性成果的，在此分享給大家。
  • an apple of love是指「西紅柿」,那apple pie order是指啥呢?
    下面我們就來說說那些與「蘋果apple」有關的表達吧！1、an apple of love看到an apple of love，大家是不是第一時間就想到了亞當和夏娃的故事，可an apple of love的意思不是「愛情之果」，它的真實意思是「西紅柿」，相信有一部分人一定知道這個意思。
  • 如何設計分層架構和交互接口 API?
    今天我們繼續來聊聊分層架構的設計流程，以及接口設計方法等內容。通常，我們可以將分層架構的設計流程分解為下列 4 個步驟：第一步，結合現實情況，將系統劃分成多個層次。第二步，確定層與層之間的關係，梳理出層與層之間的交互接口。第三步，將功能相近的接口劃歸到一個模塊，確保模塊高內聚，對外低耦合。第四步，在此基礎上進一步明晰接口的參數列表。
  • 高維哲學之《三體》世界
    前言三體誕生於中國哲學思想的沃土裡，後面我將用2、3、4、1這個四個數字來解釋三體呈現的宇宙奧秘；為什麼1這個數字放在後面，了解1首先要回顧上篇，1是相對於0存在的，在「真空」的宇宙是否真的真空，根據霍金輻射，真空的宇宙會在瞬間憑空產生一對正反虛粒子，然後瞬間迅速彼此湮滅