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

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

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

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

一、隱喻

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

但它不像繪畫或作曲那樣是一種藝術(shù)形式。交互設(shè)計(jì)有一個(gè)獨(dú)特的人類因素。為什么？因?yàn)樽罱K人們是使用產(chǎn)品來完成事情。光看形式和構(gòu)圖的美感是不夠的。在形式和功能之間取得整體平衡，才是最終目標(biāo)。

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

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

我們可以進(jìn)一步延伸交互設(shè)計(jì)的隱喻。為什么水平滑動(dòng)可以在頁面之間導(dǎo)航？因?yàn)閿?shù)千年來，我們就是這樣直觀地翻書的。

好的交互是根據(jù)現(xiàn)實(shí)世界的屬性建模的，比如可中斷性。這聽起來有點(diǎn)傻，因?yàn)楹苊黠@，翻一頁書是可以被打斷的。但想象一下，如果這是一個(gè)你必須等待的動(dòng)畫!（當(dāng)不符合現(xiàn)實(shí)經(jīng)驗(yàn)時(shí)，體驗(yàn)可能會(huì)很糟糕）

捏是另一個(gè)我們會(huì)直觀地聯(lián)想到縮放的手勢。簡單地說，縮放是一種精確的行為，用來調(diào)整可見細(xì)節(jié)的數(shù)量。

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

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

從技術(shù)上講，當(dāng)手指分開時(shí)，也需要計(jì)算錨點(diǎn)。但通常這意味著放大，原點(diǎn)的精確度并不那么重要。為了達(dá)到精確的目的，需要兩根手指從靠近的地方開始，就像抓取一個(gè)物體一樣。

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

二、物理運(yùn)動(dòng)

鎖屏向上滑動(dòng)建立了一個(gè)概念，即它本質(zhì)上只是一個(gè)可以通過向上滑動(dòng)關(guān)閉的覆蓋層，而應(yīng)用也是如此。這意味著你現(xiàn)在也知道如何關(guān)閉應(yīng)用。

讓我們看看如何將關(guān)閉應(yīng)用過渡到靈動(dòng)島。注意手勢如何保持其被拋出的動(dòng)量和角度。它永遠(yuǎn)不會(huì)完美居中或時(shí)間一致。

這種運(yùn)動(dòng)建立在我們對現(xiàn)實(shí)世界的自然物理感覺之上，就像玩撲克牌的感覺一樣。盡管撲克牌的運(yùn)動(dòng)表現(xiàn)出較少的反彈，因?yàn)樗诟拍钌细p，并且不會(huì)被力變形成什么東西。

三、滑動(dòng)手勢

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

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

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

現(xiàn)在，讓我們來看一些需要明確意圖才能觸發(fā)動(dòng)作的例子。iOS App 的切換設(shè)計(jì)永遠(yuǎn)不會(huì)在手勢結(jié)束前關(guān)閉應(yīng)用。不管距離多遠(yuǎn)，也不管應(yīng)用部分在屏幕外。

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

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

四、響應(yīng)手勢

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

例如，捏卡片的簡單實(shí)現(xiàn)將在特定閾值后呈指數(shù)級放大。

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

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

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

五、空間一致性

靈動(dòng)島有一個(gè)很好的交互，點(diǎn)擊后應(yīng)用從島下滑出覆蓋屏幕：

當(dāng)用戶想要查看更多信息時(shí),應(yīng)用不是直接從展開的"小島"出現(xiàn),而是根據(jù)不同情況,要么從應(yīng)用圖標(biāo)處彈出,要么從屏幕右側(cè)滑入。這種設(shè)計(jì)可能是為了讓用戶界面的行為更加一致和直觀。

我猜想，讓 Spotify 從它的圖標(biāo)啟動(dòng)，可以更清楚地展示音樂是從哪個(gè)應(yīng)用播放的。假設(shè)你的屏幕上同一排有三個(gè)音樂應(yīng)用,通過這種動(dòng)畫效果,就能建立起音樂播放器和它來源之間的聯(lián)系。

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

不過，系統(tǒng)自帶的時(shí)鐘應(yīng)用就不一樣了。它永遠(yuǎn)不會(huì)從圖標(biāo)打開,即使"小島"展開了,它也總是直接從"小島"彈出來。

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

這似乎支持上面的理論。因?yàn)殪`動(dòng)島計(jì)時(shí)器模塊僅特定于一個(gè)應(yīng)用，并且不能有另一個(gè)具有相同島的應(yīng)用，因此無需明確說明它的來源。

六、流體變形

我們都很熟悉 iOS 快速瀏覽應(yīng)用的流暢、可中斷的手勢。向上滑動(dòng)會(huì)使全屏應(yīng)用變成圖標(biāo):

這里有一個(gè)奇怪的細(xì)節(jié)，圖標(biāo)故意從底部拉伸，以填充框架，因?yàn)樗鲿车貙⑵湫螤顝拇怪本匦无D(zhuǎn)變?yōu)榫鶆虻恼叫?。?dāng)看到非標(biāo)準(zhǔn) GitHub 圖標(biāo)時(shí)，會(huì)發(fā)生更明顯的事情:

這種技術(shù)的前提是應(yīng)用的圖標(biāo)遵循蘋果公司的設(shè)計(jì)規(guī)范。twitter 圖標(biāo)忽略了推薦的安全區(qū)域，結(jié)果圖標(biāo)的底部~10pt 被裁剪，復(fù)制和拉伸，導(dǎo)致這個(gè)奇怪的重復(fù)圖像效果:

在實(shí)踐中，這并不是完全錯(cuò)誤的，但絕對沒有那么好:

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

作者：彩云譯設(shè)計(jì)