交互設計七大規則,您了解了嗎?

2019.06.28

443

該按鈕是交互設計的基本元素。它們在用戶和系統之間的對話中發揮著重要作用。在本文中,我將回顧創建有效按鈕時必須了解的七個基本原則。

1.使按鈕看起來像一個按鈕

當與用戶界面交互時,用戶必須立即知道什么是“點擊”而哪些不是。設計中的每個項目都需要用戶進行解碼。通常,用戶解碼UI所需的時間越長,其可用性就越低。

但是,用戶如何理解元素是否是交互式的?他們使用以前的經驗和視覺指示器來闡明用戶界面對象的含義。這就是為什么使用適當的視覺指示器(如大小,形狀,顏色,陰影等)使項目看起來像一個按鈕是如此重要。視覺能量意味著保持必要的信息價值;它們有助于創建適用性界面。

不幸的是,在許多界面中,交互性指標很弱并且需要交互。結果,它們有效地降低了發現的能力。

如果缺乏明確的互動,并且用戶對“可點擊”和難以理解的內容感到困惑,那么我們設計的新鮮度并不重要。如果他們發現難以使用,他們會發現它令人沮喪并最終無法使用。

對于移動用戶而言,弱指示符是一個更重要的問題。當試圖查看單個元素是否是交互式時,桌面用戶可以將光標移動到元素上并檢查光標是否改變狀態。移動用戶沒有這樣的機會。要查看元素是否是交互式的,用戶必須單擊它,沒有其他方法可以驗證交互性。

不要認為用戶界面中的某些內容對您的用戶來說是顯而易見的

在許多情況下,設計者不會故意將按鈕識別為交互元素,因為它認為交互元素對用戶來說是顯而易見的。在設計界面時,您應始終牢記以下規則:

您解釋點擊指標的能力與用戶的能力不同,因為您知道設計的每個元素應該做什么。

使用熟悉的按鈕設計

以下是大多數用戶熟悉的按鈕示例:

帶方形邊框的填充按鈕

帶圓角的填充按鈕

帶陰影的填充按鈕

職業按鈕

在所有這些示例中,“陰影填充按鈕”的設計對于用戶來說是最清晰的。當用戶看到對象的尺寸時,他們立即知道這是他們可以按下的尺寸。

不要忘記空白區域

不僅按鈕的視覺屬性很重要。按鈕附近的空白區域使用戶更容易(或更難)理解它是否是交互式元素。在此示例中,以下某些用戶可能會將幻影按鈕與信息框混淆。

作為用戶,您無法判斷它是盒子還是按鈕

2.將按鈕放在用戶想要找到的位置

該按鈕必須位于用戶可以輕松找到或希望看到的位置。不要讓用戶尋找按鈕。如果用戶找不到該按鈕,他將不知道它存在。

盡可能使用傳統設計和標準UI模式

按鈕的常規放置提高了發現能力。通過標準設計,用戶可以輕松了解每個元素的用途,即使它是一個沒有強大指標的按鈕。將標準設計與干凈的視覺設計和充足的白色空間相結合,使設計更易于理解。

不要與用戶一起玩尋找按鈕的游戲

提示:測試您的設計以找出答案。當用戶第一次導航到包含您希望他們執行的某些操作的頁面時,應該很容易為用戶找到正確的按鈕。

3.使用已制作的標簽按鈕

帶有通用或欺騙性標簽的按鈕可能會讓用戶感到沮喪。編寫按鈕標簽,清楚地解釋每個按鈕的作用。理想情況下,按鈕標簽應清楚地描述其動作。

用戶應該清楚地知道單擊按鈕時會發生什么。讓我舉一個簡單的例子。想象一下,您不小心激活了刪除操作,現在您看到以下錯誤消息。

“OK”模糊標簽對動作按鈕

沒有太多說法

目前尚不清楚這種對話中的“接受”和“取消”是什么意思。大多數用戶會問,'點擊'取消'會發生什么? '

從未設計過只包含兩個“接受”和“取消”按鈕的對話框或表單。

不使用“Accept”標簽,最好使用“刪除”。這將清楚地顯示此按鈕對用戶的影響。此外,如果“刪除”是一個潛在危險的操作,您可以使用紅色來表示這一事實。

“刪除”清楚地解釋了按鈕對用戶的影響

此界面上的潛在危險操作“禁用卡”顯示為紅色。

4.正確調整按鈕的大小

按鈕的大小應反映此元素在屏幕上的優先級。大按鈕意味著更重要的行動。

優先按鈕

讓最重要的按鈕看起來像最重要的按鈕。始終嘗試使主動作按鈕脫穎而出。增加尺寸(使按鈕更大,使其對用戶更重要)并使用對比色來引起用戶的注意。


Dropbox使用顏色對比度和大小將用戶的注意力集中在“Dropbox Business免費試用”測試按鈕

使按鈕對移動用戶非常友好

在許多移動應用程序中,按鈕太小。這通常會導致用戶輸入錯誤。


左:適當的大小按鈕。右:按鈕太小。

麻省技術研究所觸摸實驗室的研究發現,手指墊的平均值在10到14毫米之間,指尖的平均值為8到10毫米。這使得10 mm x 10 mm具有良好的最小接觸目標尺寸。


5.記住命令

按鈕的順序應反映用戶與系統之間的對話性質。問問自己用戶在此屏幕上等待的訂單類型并進行相應的設計。

用戶界面是與用戶的對話

例如,如何在分頁中訂購“上一個/下一個”按鈕?向前移動按鈕位于右側并且向后按鈕位于左側是合理的。

6.避免使用太多按鈕

這是許多應用程序和網站的常見問題。當您提供太多選項時,您的用戶最終無所事事。在應用程序或網站中設計網頁時,請考慮您希望用戶執行的最重要操作。


按鈕太多

7.提供有關互動的視覺或音頻評論

當用戶是唯一的當您單擊或單擊按鈕時,您希望用戶界面以相應的注釋進行響應。根據操作類型,這可以是視覺或音頻反饋。當用戶沒有評論時,他可能認為系統沒有收到命令并將重復該操作。此行為通常會導致多個不必要的操作。

為什么會這樣?作為人類,我們希望在與對象交互后得到一些評論。它可以是視覺,音頻或觸覺反饋,也可以是記錄交互的任何確認。

用戶界面提供印刷機已注冊的可視信息。

對于某些操作,例如下載,不僅要確認用戶的輸入,還要顯示進程的當前狀態。

此按鈕成為進度指示器,顯示操作的當前狀態。

結論

雖然按鈕是交互設計的普通元素,但值得注意的是這個元素應該盡可能好。按鈕的用戶體驗設計應始終與識別和清晰度相關。


最新案例

聯系電話 400-6065-301

微信咨詢 寒總監

重庆时时彩开奖网易