精妙的UI交互設(shè)計(jì)：以優(yōu)雅取勝，而非炫技

關(guān)鍵要點(diǎn)

• UI交互設(shè)計(jì)的優(yōu)雅之處在于確保流暢、用戶友好的過(guò)渡，以支持用戶的操作，而不是花哨、分散注意力的元素。
• 微交互，例如下拉菜單或顯示產(chǎn)品詳細(xì)信息，應(yīng)該精心設(shè)計(jì)，以增強(qiáng)可用性并引發(fā)用戶的積極情緒反應(yīng)。
• 創(chuàng)建優(yōu)雅UI交互的關(guān)鍵規(guī)則包括：避免使用瞬間跳轉(zhuǎn)，而應(yīng)使用過(guò)渡；使用切換開關(guān)代替按鈕；將觸發(fā)器放置在附近；使用自然的過(guò)渡時(shí)間；確保過(guò)渡回滾不會(huì)破壞用戶的控制感；自動(dòng)聚焦于一系列操作中的下一個(gè)操作；始終向用戶發(fā)出交互完成的信號(hào)。
• UI交互越符合現(xiàn)實(shí)世界的物理規(guī)律，感覺就越自然、越優(yōu)雅。至關(guān)重要的是要測(cè)試和調(diào)整這些交互，以確保它們直觀、一致、高效，并向用戶提供充分的反饋。

“交互設(shè)計(jì)”這個(gè)新詞已經(jīng)與UX設(shè)計(jì)過(guò)程緊密聯(lián)系在一起。2015年以后，界面元素在兩種靜態(tài)狀態(tài)之間即時(shí)切換已不再足夠。如今，“滑動(dòng)”、“彈跳”和“回彈”等詞語(yǔ)已成為良好用戶界面工作方式討論的一部分。

然而，在交互領(lǐng)域——就像昂貴的手表一樣——“花哨”并不一定意味著“優(yōu)雅”。雖然我們可能對(duì)下面這款花哨手表（圖片）的復(fù)雜性感到好奇，但我懷疑我們中很少有人會(huì)真正想戴它。在我們的界面設(shè)計(jì)中，自然的優(yōu)雅幾乎總是勝過(guò)裝飾。

如果你像我一樣富有創(chuàng)造力，很容易被創(chuàng)建花哨的交互所吸引，只是為了讓你的網(wǎng)站感覺更現(xiàn)代、更引人入勝。當(dāng)然，我們心里知道，這種方法可能是破壞整個(gè)用戶體驗(yàn)的最可靠方法之一。

因此，我發(fā)現(xiàn)關(guān)注那些流暢、賞心悅目的動(dòng)畫非常重要，以至于我們的用戶幾乎注意不到它們。那時(shí)，我們的動(dòng)畫就會(huì)從聚光燈下移開，轉(zhuǎn)而支持用戶正在嘗試執(zhí)行的操作。

為什么這很重要？

蘋果為什么會(huì)在包裝上花費(fèi)如此多時(shí)間和金錢，而這些包裝通常很快就被扔進(jìn)回收箱？為什么豪華汽車公司會(huì)調(diào)整車門關(guān)閉的聲音？

這是因?yàn)槲覀儼l(fā)現(xiàn)，細(xì)微的、看似不重要的細(xì)節(jié)會(huì)對(duì)優(yōu)秀的設(shè)計(jì)產(chǎn)生不成比例的影響，并將UX從“良好”提升到“極佳”。

用精美設(shè)計(jì)的“微交互”來(lái)豐富你的網(wǎng)站，不僅使其更易于使用，還可以引發(fā)用戶積極的情緒（就像打開蘋果包裝盒一樣）。體驗(yàn)這種情緒意味著消耗更多多巴胺，這實(shí)際上有助于他們對(duì)你的網(wǎng)站/應(yīng)用程序上癮。

那么，什么是“微交互”？

當(dāng)用戶進(jìn)行輸入（例如，點(diǎn)擊、拖動(dòng)、鍵入內(nèi)容）時(shí)，你的網(wǎng)站會(huì)做出反應(yīng)——這就是交互。這是用戶與你的網(wǎng)站溝通的一種方式，所以它是對(duì)話的一部分。在設(shè)計(jì)用戶在你的網(wǎng)站上的行為流程時(shí)，你總是可以使用幾種不同類型的交互：

1. 導(dǎo)航交互：當(dāng)用戶最終進(jìn)入一個(gè)全新的頁(yè)面/狀態(tài)時(shí)。
2. 模態(tài)交互：當(dāng)網(wǎng)站的當(dāng)前狀態(tài)被凍結(jié)，并在其頂部顯示一些臨時(shí)狀態(tài)時(shí)（例如，“燈箱”畫廊或確認(rèn)對(duì)話框）。
3. 微交互：當(dāng)您只想讓頁(yè)面內(nèi)的單個(gè)元素對(duì)用戶輸入做出反應(yīng)時(shí)——例如，顯示下拉菜單或顯示產(chǎn)品的更多詳細(xì)信息。

我們?nèi)绾问惯@些微交互更優(yōu)雅？

一個(gè)網(wǎng)站應(yīng)該感覺像是一場(chǎng)互動(dòng)界面元素的音樂(lè)會(huì)，共同努力給你留下深刻印象。優(yōu)雅是留下這種印象的關(guān)鍵標(biāo)準(zhǔn)。雖然很難用純粹的技術(shù)術(shù)語(yǔ)來(lái)定義優(yōu)雅，但我們可以使用一些邏輯技巧來(lái)幫助我們創(chuàng)建優(yōu)雅的交互。

關(guān)鍵規(guī)則 #1 – 沒有瞬間跳轉(zhuǎn)

這個(gè)想法很簡(jiǎn)單——在更改頁(yè)面上的元素時(shí)，始終使用過(guò)渡。這意味著你的GUI上不應(yīng)該有任何瞬間的快切。每個(gè)出現(xiàn)、消失或轉(zhuǎn)換的元素都應(yīng)該使用緩動(dòng)或/和動(dòng)畫來(lái)實(shí)現(xiàn)。

這有助于用戶將注意力集中在你希望他們關(guān)注的區(qū)域。當(dāng)然，這也創(chuàng)造了一種優(yōu)雅和一致流程的感覺。

### 規(guī)則 #2：切換開關(guān)優(yōu)于按鈕

在家中，你通常會(huì)使用同一個(gè)開關(guān)來(lái)打開和關(guān)閉燈。同樣的概念也適用于你網(wǎng)站上的切換控件。如果一個(gè)切換控件觸發(fā)給定元素的新狀態(tài)，則相同的控件應(yīng)該回滾該狀態(tài)。

此外，根據(jù)菲茨定律，此類控件應(yīng)該幾乎不需要任何努力即可快速在開啟和關(guān)閉狀態(tài)之間切換。

### 規(guī)則 #3：觸發(fā)器應(yīng)該在附近

過(guò)渡總是需要某種觸發(fā)器。在交互時(shí)，我們的用戶通常會(huì)關(guān)注該觸發(fā)器元素。這意味著過(guò)渡必須在或非常靠近觸發(fā)器處開始。如果你在距離觸發(fā)器元素太遠(yuǎn)的地方開始過(guò)渡，用戶很容易錯(cuò)過(guò)它，并且流程將中斷。

此外，過(guò)渡通常應(yīng)該從觸發(fā)器傳播到你想要集中用戶注意力的位置。技巧很簡(jiǎn)單——你引導(dǎo)用戶的眼睛從觸發(fā)器移動(dòng)到他們應(yīng)該進(jìn)行下一步操作的地方。這樣，用戶就不會(huì)失去注意力，并且會(huì)直接到達(dá)你想要他們?nèi)サ牡胤健?/p>

### 規(guī)則 #4：使用自然的過(guò)渡時(shí)間

過(guò)渡時(shí)間定義了動(dòng)畫播放的時(shí)長(zhǎng)。時(shí)間的主要問(wèn)題是沒有魔杖可以做到這一點(diǎn)。如果你讓你的過(guò)渡時(shí)間過(guò)長(zhǎng)，它會(huì)為經(jīng)?；蚩焖僦貜?fù)相同交互的用戶創(chuàng)造一個(gè)痛點(diǎn)。

另一方面，如果它太短，它會(huì)感覺不自然——或者用戶可能會(huì)完全錯(cuò)過(guò)它。不幸的是，你所能做的就是用你的火眼金睛和直覺來(lái)評(píng)估過(guò)渡。我發(fā)現(xiàn)的最好的建議是不要讓所有過(guò)渡都具有相同的時(shí)間。只需隨意嘗試，找到合適的平衡點(diǎn)即可。還要注意，即使是0.05秒的差異也很重要。

### 規(guī)則 #5：過(guò)渡回滾不應(yīng)該破壞用戶的控制感

有時(shí)會(huì)發(fā)生用戶在過(guò)渡過(guò)程中快速改變主意的情況。在這些情況下，過(guò)渡響應(yīng)能力至關(guān)重要。如果用戶取消了最后一次交互（例如，兩次點(diǎn)擊觸發(fā)按鈕），則過(guò)渡動(dòng)畫應(yīng)立即反轉(zhuǎn)。如果不是，我們的用戶會(huì)立即失去控制感。此外，你還會(huì)讓你的用戶認(rèn)為他們做錯(cuò)了什么。

### 規(guī)則 #6：始終自動(dòng)聚焦于一系列操作中的下一個(gè)操作

此技巧針對(duì)用戶執(zhí)行一系列操作的交互。在設(shè)計(jì)此類序列時(shí)，你應(yīng)該始終避免任何不必要的交互，并始終將焦點(diǎn)設(shè)置在序列中的下一個(gè)控件上。這種交互的最基本示例是[編輯]按鈕，它會(huì)打開一個(gè)表單并神奇地將焦點(diǎn)放在第一個(gè)字段上，以便用戶無(wú)需手動(dòng)單擊它。

### 規(guī)則 #7：始終告訴用戶何時(shí)完成

用戶應(yīng)該始終能夠識(shí)別交互何時(shí)完成。如果你的交互在完成時(shí)沒有以某種明顯的方式發(fā)生變化，你應(yīng)該始終考慮實(shí)現(xiàn)某種視覺反饋，告訴用戶“嘿，你，完成了！”。如果你跳過(guò)這一點(diǎn)，用戶往往會(huì)多次重復(fù)相同的操作，從而犯錯(cuò)，甚至可能破壞某些寶貴的東西。

應(yīng)用這些技巧

簡(jiǎn)而言之，你可以使用這些技巧作為在你的網(wǎng)站上實(shí)現(xiàn)微交互的備忘單。它應(yīng)該幫助你在實(shí)現(xiàn)微交互之前設(shè)計(jì)交互的細(xì)節(jié)。

但是，你很有可能無(wú)法第一次就做到完美。在這種情況下，你需要根據(jù)你自己的情況進(jìn)行調(diào)整——所以準(zhǔn)備好稍微嘗試一下。

還有……最后還有一條建議給你。一般來(lái)說(shuō)，你的交互越服從現(xiàn)實(shí)世界物理定律，它們就越自然、越優(yōu)雅。

祝你動(dòng)畫制作愉快！

關(guān)于創(chuàng)建優(yōu)雅UI交互的常見問(wèn)題

在設(shè)計(jì)UI交互時(shí)，需要考慮哪些關(guān)鍵原則？

在設(shè)計(jì)UI交互時(shí)，務(wù)必牢記用戶。交互應(yīng)該直觀易懂。一致性也是關(guān)鍵——用戶不應(yīng)該猜測(cè)如何與你的界面交互。交互還應(yīng)該向用戶提供反饋，讓他們知道他們的操作已被識(shí)別并正在處理。最后，交互應(yīng)該高效，最大限度地減少用戶為實(shí)現(xiàn)目標(biāo)所需采取的步驟。

如何使我的UI交互更具吸引力？

為了使你的UI交互更具吸引力，可以考慮加入動(dòng)畫。動(dòng)畫可以使交互感覺更具活力，還可以向用戶提供寶貴的反饋。但是，務(wù)必謹(jǐn)慎使用動(dòng)畫，不要讓它們分散對(duì)主要任務(wù)的注意力。此外，可以考慮使用聲音或觸覺反饋來(lái)增強(qiáng)交互。

在設(shè)計(jì)UI交互時(shí)，應(yīng)避免哪些常見錯(cuò)誤？

在設(shè)計(jì)UI交互時(shí)，應(yīng)避免的一些常見錯(cuò)誤包括：使交互過(guò)于復(fù)雜、沒有向用戶提供足夠的反饋以及不一致。過(guò)于復(fù)雜的交互可能會(huì)讓用戶感到困惑，并使你的界面難以使用。缺乏反饋可能會(huì)讓用戶不確定他們的操作是否已被識(shí)別。不一致會(huì)使你的界面不可預(yù)測(cè)，并令人沮喪。

如何測(cè)試我的UI交互的有效性？

你可以通過(guò)用戶測(cè)試來(lái)測(cè)試UI交互的有效性。這包括觀察用戶與界面的交互并收集反饋。你還可以使用分析工具來(lái)跟蹤用戶與界面的交互方式，并識(shí)別任何困難或困惑的領(lǐng)域。

如何提高UI交互的可訪問(wèn)性？

為了提高UI交互的可訪問(wèn)性，請(qǐng)考慮具有不同能力的用戶將如何與你的界面交互。例如，確保你的交互可以使用鍵盤，以便無(wú)法使用鼠標(biāo)的用戶也能使用。此外，確保你的交互與屏幕閱讀器和其他輔助技術(shù)兼容。

如何在我的UI交互中融入故事講述？

可以通過(guò)圍繞用戶旅程創(chuàng)建敘述來(lái)將故事講述融入你的UI交互中。這可以通過(guò)使用動(dòng)畫、聲音和視覺提示來(lái)引導(dǎo)用戶完成交互來(lái)實(shí)現(xiàn)。

有哪些學(xué)習(xí)更多關(guān)于UI交互的資源？

有很多資源可用于學(xué)習(xí)更多關(guān)于UI交互的知識(shí)。一些流行的資源包括在線課程、博客和關(guān)于該主題的書籍。你還可以通過(guò)研究流行應(yīng)用程序和網(wǎng)站的UI交互來(lái)學(xué)習(xí)很多東西。

UI交互中的速度有多重要？

速度在UI交互中非常重要。用戶期望交互具有響應(yīng)性和速度。任何延遲都可能導(dǎo)致沮喪，并可能導(dǎo)致用戶放棄任務(wù)。

如何使用顏色來(lái)增強(qiáng)我的UI交互？

顏色可用于增強(qiáng)UI交互，方法是將注意力吸引到重要元素上，指示狀態(tài)并提供反饋。但是，務(wù)必謹(jǐn)慎且一致地使用顏色，并在設(shè)計(jì)中考慮色盲問(wèn)題。

如何跟上UI交互的趨勢(shì)？

為了跟上UI交互的趨勢(shì)，最好關(guān)注行業(yè)博客、參加設(shè)計(jì)會(huì)議并加入U(xiǎn)I設(shè)計(jì)師的在線社區(qū)。你還可以通過(guò)研究新的和流行的應(yīng)用程序和網(wǎng)站的UI交互來(lái)學(xué)習(xí)很多東西。

以上是7創(chuàng)建優(yōu)雅UI互動(dòng)的簡(jiǎn)單規(guī)則的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！