設計有時候感覺像是沒有科學依據的，全憑感覺，甚至研究人員也難用科學解釋交互設計的原理，往往把它當成一個神秘的黑盒子。雖然從我的經驗來看，這部分是對的，但我一直試圖拆解優(yōu)秀交互設計背后的原因。

在網上搜交互設計的深度內容，會發(fā)現大量重復的資料，過度關注用戶角色、故事板和標著"UI"和"UX"的韋恩圖。除了少數優(yōu)秀的演講之外，真正的實質和洞見只有那些愿意狂熱挖掘的人才能發(fā)現。

單純地苦思冥想不會神奇地產生有價值的發(fā)現。"交互"這個詞的本質是暗示了人與環(huán)境之間的一種關系。按我的經驗，偉大的發(fā)現來自于創(chuàng)造力，讓自己沉浸在問題中，然后去散步，讓大腦自由思考，以激發(fā)靈感。

這篇文章不是教程，也不是規(guī)范，而是對一些我經常使用但很少思考的交互細節(jié)的洞察。除了重新設計界面，我發(fā)現這種反思練習也是培養(yǎng)更強設計直覺的另一種好方法。（這部分內容超越了教程和規(guī)范，更有價值和新鮮感）

一、隱喻

什么是交互設計？從技術的角度來看，我認為交互設計是一種藝術形式，為了創(chuàng)造流暢響應人類意圖的體驗。什么時候滑動觸發(fā)交互？手勢是否保留動量？如果手指覆蓋內容會發(fā)生什么？如何根據上下文預測意圖？處理好這些細節(jié)能讓產品感覺像我們自己行為的自然延伸，顯得更加順滑自然。

但它不像繪畫或作曲那樣是一種藝術形式。交互設計有一個獨特的人類因素。為什么？因為最終人們是使用產品來完成事情。光看形式和構圖的美感是不夠的。在形式和功能之間取得整體平衡，才是最終目標。

優(yōu)秀的交互設計通過重復使用隱喻來降低學習成本。大多數觸屏界面只需要兩種手勢：點擊和滑動。例如，在 iOS 上，明確教你的唯一手勢是向上滑動打開：

當你學會了滑動，就解鎖了對界面其他部分的控制方式?；瑒觿幼鬟€告訴你界面是由像一疊卡片一樣的堆疊層組成的。知道了這一點，你可能會想嘗試向下滑動屏幕以發(fā)現更多控件。從概念上講，界面進一步隱式地教你向下滑動可以顯示系統(tǒng)功能層。當你深入蘋果生態(tài)系統(tǒng)時，這種知識會不斷積累。

我們可以進一步延伸交互設計的隱喻。為什么水平滑動可以在頁面之間導航？因為數千年來，我們就是這樣直觀地翻書的。

好的交互是根據現實世界的屬性建模的，比如可中斷性。這聽起來有點傻，因為很明顯，翻一頁書是可以被打斷的。但想象一下，如果這是一個你必須等待的動畫!（當不符合現實經驗時，體驗可能會很糟糕）

捏是另一個我們會直觀地聯想到縮放的手勢。簡單地說，縮放是一種精確的行為，用來調整可見細節(jié)的數量。

我們可以想象捏捏類似于需要復雜運動技能的動作，比如撿起小物體或處理香料。自然地，為了更高的精度，我們會捏緊手指。

在觸摸屏上，界面首先需要建立一個縮放原點的錨點，而用捏在一起的手指選擇錨點更容易、更精確：

從技術上講，當手指分開時，也需要計算錨點。但通常這意味著放大，原點的精確度并不那么重要。為了達到精確的目的，需要兩根手指從靠近的地方開始，就像抓取一個物體一樣。

從科學或直覺上講，有數百個設計決策是由一些人做出的，他們癡迷于最小的邊際，所以當做這些操作時，幾乎不需要思考。其中很多都是利用我們的本能行為。

二、物理運動

鎖屏向上滑動建立了一個概念，即它本質上只是一個可以通過向上滑動關閉的覆蓋層，而應用也是如此。這意味著你現在也知道如何關閉應用。

讓我們看看如何將關閉應用過渡到靈動島。注意手勢如何保持其被拋出的動量和角度。它永遠不會完美居中或時間一致。

這種運動建立在我們對現實世界的自然物理感覺之上，就像玩撲克牌的感覺一樣。盡管撲克牌的運動表現出較少的反彈，因為它在概念上更輕，并且不會被力變形成什么東西。

三、滑動手勢

什么時候滑動觸發(fā)動作？這似乎很簡單：按下，移動一點，然后在松開手指后最終觸發(fā)動作。我自己使用 SwiftUI 構建了一些觸摸交互后，我意識到情況可能并不總是如此。有時我們期望在滑動時觸發(fā)動作。

輕量操作，如顯示疊加，在任意距離后的滑動過程中觸發(fā)感覺更自然。例如，通過一個簡單的手勢，我可以立即了解覆蓋的界面，理解它給了我一個搜索輸入，然后如果不是我想要的，就忽略它。在這里等待手勢結束會讓人覺得不合適。

我正在開發(fā)的 MercuryOS SwiftUI 原型中有一個例子。當元素在手勢滑動過程中移動到最終位置時，觸發(fā)動作會讓人感覺自然。注意，只有當兩個標題都固定到位置后，屏幕才會解鎖，然后用一個連續(xù)的手勢鎖定，而不需要松開手指。如果必須等到手勢結束才能解鎖，界面會讓人感覺很卡頓，而且不太直觀。

現在，讓我們來看一些需要明確意圖才能觸發(fā)動作的例子。iOS App 的切換設計永遠不會在手勢結束前關閉應用。不管距離多遠，也不管應用部分在屏幕外。

這對我來說是有意義的，因為關閉應用是具有破壞性的，如果應用在滑動過程中關閉，那感覺就不太好了。如果我中途改變主意，不小心達到了刪除的門檻怎么辦？我可能會在應用中失去一些重要的進度。為了確保界面能夠響應意圖，在手勢末端觸發(fā)，無論距離如何，感覺都是正確的。

這是另一個例子，盡管滑動足夠的距離使視圖完全可見和捕捉，直到手勢結束。這使得它在掃描應用時可以輕松地瞥一眼另一個屏幕，而無需完全打開，并通過改變方向快速中斷手勢。

四、響應手勢

真正流暢的手勢是立即響應的。如上所述，手勢可以有一個明確的觸發(fā)閾值，但這并不意味著簡單地執(zhí)行一個 0→1的動畫就會感覺很棒。

例如，捏卡片的簡單實現將在特定閾值后呈指數級放大。

在這里，捏合足夠多的量來觸發(fā)動畫不會讓人感覺很糟糕。但界面沒有提供任何引導或信心，甚至無法以較低的速度捏合卡片。執(zhí)行起來也不令人滿意。

優(yōu)化成立即感受到縮放增量，然后執(zhí)行超過給定閾值的動畫，感覺會好得多：

出于某些原因，導航 iOS 設置感覺不如 App 切換響應流暢。一個圖層從右邊滑過來，告訴我可以通過向左滑動來刪除它。但是，如果你碰巧弄錯了，那么立即回滑并不會中斷動畫，你必須等待它結束。

五、空間一致性

靈動島有一個很好的交互，點擊后應用從島下滑出覆蓋屏幕：

當用戶想要查看更多信息時,應用不是直接從展開的"小島"出現,而是根據不同情況,要么從應用圖標處彈出,要么從屏幕右側滑入。這種設計可能是為了讓用戶界面的行為更加一致和直觀。

我猜想，讓 Spotify 從它的圖標啟動，可以更清楚地展示音樂是從哪個應用播放的。假設你的屏幕上同一排有三個音樂應用,通過這種動畫效果,就能建立起音樂播放器和它來源之間的聯系。

同樣地，如果應用從右側滑入,就是在告訴你它在空間上的位置，在應用切換器里。從右邊而不是左邊滑入,還表示這個應用現在排在應用切換器的最前面。

不過，系統(tǒng)自帶的時鐘應用就不一樣了。它永遠不會從圖標打開,即使"小島"展開了,它也總是直接從"小島"彈出來。

（通過不同的動畫效果，讓用戶更容易理解應用的來源和位置，提高使用體驗。但系統(tǒng)應用可能有特殊的設計規(guī)則。）

這似乎支持上面的理論。因為靈動島計時器模塊僅特定于一個應用，并且不能有另一個具有相同島的應用，因此無需明確說明它的來源。

六、流體變形

我們都很熟悉 iOS 快速瀏覽應用的流暢、可中斷的手勢。向上滑動會使全屏應用變成圖標:

這里有一個奇怪的細節(jié)，圖標故意從底部拉伸，以填充框架，因為它流暢地將其形狀從垂直矩形轉變?yōu)榫鶆虻恼叫?。當看到非標?GitHub 圖標時，會發(fā)生更明顯的事情:

這種技術的前提是應用的圖標遵循蘋果公司的設計規(guī)范。twitter 圖標忽略了推薦的安全區(qū)域，結果圖標的底部~10pt 被裁剪，復制和拉伸，導致這個奇怪的重復圖像效果:

在實踐中，這并不是完全錯誤的，但絕對沒有那么好:

篇幅有限，上篇就先寫到這里，下一篇將更加精彩。

作者：彩云譯設計