1.按鈕必須得看起來像按鈕

  涉及到用戶界面交互的時候,用戶需要知道哪些是可點擊的,而哪些不是。面對著UI界面中的每個元素,用戶都需要對它們進行辨別和判斷,而這個過程越長,可用性其實就越差。

  那么,用戶是如何判讀哪個元素是可交互的呢?通常,用戶是基于以往的經驗和視覺來對UI元素進行判斷,這就是為什么需要通過合適的視覺符號來幫助用戶理解(比如尺寸、形狀、顏色、陰影等),使得元素看起來像是按鈕。視覺符號為界面提供可供性。

  不幸的是,在許多界面當中,按鈕的可發現性和指示性并不強,這使得交互發生的機率有所降低,用戶會糾結于哪些可點擊,而哪些不可點擊,這個時候設計是否炫酷,就顯得不那么重要了。即使視覺上界面設計得足夠突出,可用性很弱,會讓用戶陷入沮喪,產品也就不再具備可用性了。

  為了確定按鈕是否可用,用戶在桌面端訪問網站的時候,需要將光標移動到元素上,檢查元素狀態是否會改變,才能判斷它是否是可點擊的。而移動端用戶就麻煩了,根本沒有鼠標來執行這樣的操作,元素能否點擊,只能都試一次,沒有其他更好的方法了。

  不要假定你的UI中的元素對于用戶是顯而易見的。

  在很多情況下,設計師會有意識地不將某些元素的交互性凸顯出來,因為他們會認為這些東西是顯而易見的。但是事實并非如此,在設計UI的時候,應該牢記下面的事情。

  作為設計師,是很容易搞清楚UI中哪些元素可交互,哪些不可交互,但是用戶并不清楚。

  盡量在按鈕中采用用戶熟悉的設計。

  以下是絕大多數用戶都熟悉的按鈕樣式:

  帶有矩形邊框的、填充有色彩的按鈕;帶有圓角矩形邊框的、填充色彩的按鈕;帶有陰影有色彩和內容填充的按鈕;幽靈按鈕。

  在這幾種常見的模式當中,帶有陰影和色彩填充的按鈕,對于用戶來說是最清晰的,因為它在視覺上是有三個維度的,用戶會感知到這是一個可按下去的元素。

  不要忘記留白

  按鈕本身的視覺屬性很重要,而按鈕附近的留白同樣重要,他們讓按鈕更容易被識別,也更容易交互。在下面的案例當中,用戶很可能會將文本內容和幽靈按鈕混淆。用戶在此無法判斷它到底是一個盒子元素,還是個按鈕。

  2.將按鈕放在用戶希望看到的地方

  用戶對于頁面交互其實是有基本的感知和期望的,也就是說用戶對于按鈕的位置是有個基本的認知的。不要讓用戶到處找按鈕,它最好在用戶所期望的位置出現。

  盡可能使用傳統的布局和標準的UI模式

  所謂傳統的布局也就是貼合用戶經驗的布局,用戶在瀏覽的時候會對于這樣「標準」的UI布局有明確的預期,在對的位置看到了對的按鈕,整體更容易理解,自然也就可以輕松和界面進行交互了。

  想要確認設計的可用性,只需要觀察用戶在使用過程中是否會通過操作抵達你希望他們到達的位置,并且找到需要點擊的按鈕。

  3.按鈕上應該加上相應操作的標簽

  當按鈕的文本標簽上的內容寫的太過于寬泛,或者使用帶有誤解的內容,可能會讓用戶感到迷惑。每個標簽上的文本標簽都應該盡量準確,簡明直接地介紹清楚它的真實功能。

  用戶應該清楚他們點擊按鈕之后,會發生什么。舉個簡單的例子,想象一下,你不小心觸發了一個刪除按鈕,現在你看到了下面的報錯信息:

  在這個界面當中,「OK」是一個相當模糊的表述,并沒有說明按鈕的作用。不論是「確定」還是「取消」,都沒有說清楚這個操作的真實含義。尤其當刪除是一個存在潛在危險的操作,這個操作就更加需要精準的表述。所以,這個地方兩個按鈕應該是「刪除」和「取消」更合適,而刪除應該用紅色進行區分標識,讓用戶意識到這個操作的重要性或者獨特性。

  4.按鈕應該擁有合理的尺寸

  按鈕的大小應該反映出屏幕上這一元素的優先級,更大的按鈕應該意味著更重要的交互。

  按鈕優先級

  讓更重要的按鈕在視覺上就足以體現它的重要性。始終嘗試讓主要的按鈕更加突出,增加它的尺寸,并且使用高對比度的色彩來吸引用戶的注意力。

  在Dropbox的界面上,設計師就是使用了大小和色彩的對比來創造優先級。

  讓按鈕適配用戶的手指

  在許多APP當中,按鈕的設計太小了,這可能會導致用戶出現誤觸的情況。

  左側:正確的按鈕尺寸;右側:按鈕尺寸太小

  麻省理工學院的實驗室研究發現,手指墊寬度的平均值在10~14mm之間,指尖在8-10mm之間,這使得10×10mm的按鈕尺寸是比較合理的。

  5.注意按鈕的次序

  按鈕的順序應該反映出用戶和界面之間交互的屬性,問問自己用戶期望在屏幕上看到什么樣的順序,或者說什么樣的順序更合理,然后進行相應的設計。

  舉個例子,比如「上一步/下一步」兩個按鈕應該如何安置方位呢?通常而言,「上一步」是回卷操作,應該在左邊,而「下一步」則是前進操作,應該在右邊。

  6.避免使用太多按鈕

  這是許多APP和網站中經常出現的一個問題。當你提供太多的選擇的時候,用戶往往會無所適從。無論是設計網站還是APP,請務必盡量考慮最重要的操作,控制好優先級和復雜度。

  太多的按鈕

  7.為按鈕交互提供視覺和音頻反饋

  當用戶點擊按鈕的時候,他們更希望界面能夠給予適當的反饋?;诓煌牟僮?,界面給予視覺或者音頻的反饋。當用戶沒有收獲任何反饋的時候,他們可能會覺得界面沒有收到他們的操作,從而反復點擊,執行多次不必要的操作。

  人類和物理世界交互,獲得反饋,然后執行更多的操作,這種機制是人類進化中所形成的認知,這種反饋可以是視覺,也可以是聽覺,這些反饋會告訴用戶發生了什么。

  對于某些操作,比如下載,不僅要告訴用戶他們的操作執行成功了,而且要顯示當前的進度。

 

 

更多關于云服務器,域名注冊,虛擬主機的問題,請訪問三五互聯官網:m.shinetop.cn

贊(0)
聲明:本網站發布的內容(圖片、視頻和文字)以原創、轉載和分享網絡內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。郵箱:3140448839@qq.com。本站原創內容未經允許不得轉載,或轉載時需注明出處:三五互聯知識庫 » 按鈕設計的7個基本原則

登錄

找回密碼

注冊

主站蜘蛛池模板: 久久这里只精品国产2| 亚洲精品国产一区二区三区在线观看 | 国产97人人超碰CAO蜜芽PROM| 国产乱码精品一区二区三| 东乌| 少妇高潮激情一区二区三| 人妻有码av中文字幕久久琪| 欧美喷水抽搐magnet| 在线观看特色大片免费网站 | 青海省| 国产一区二区三区18禁| 国产婷婷色一区二区三区| 亚洲午夜成人精品电影在线观看 | 亚洲一区二区三区自拍偷拍 | 久99久热只有精品国产99| 亚洲第一精品一二三区| 98精品全国免费观看视频| 97色成人综合网站| 亚洲熟女乱综合一区二区三区| 国产亚洲精品第一综合另类无码无遮挡又大又爽又黄的视频 | 文成县| ww污污污网站在线看com| 亚洲精品三区二区一区一| 香蕉久久一区二区不卡无毒影院| 精品亚洲综合一区二区三区| 亚洲国产一区二区三区亚瑟| 阿城市| 亚洲熟女少妇乱色一区二区 | 日韩高清不卡一区二区三区| 狂野欧美性猛交免费视频| 国产盗摄视频一区二区三区| 亚洲欧美日韩在线码| 少妇愉情理伦片高潮日本| 欧美成人va免费大片视频| 久久丫精品国产| 老色批国产在线观看精品| 国产日韩一区二区天美麻豆| 美女禁区a级全片免费观看| 欧美激欧美啪啪片| 亚洲国产成人久久77| 欧美xxxx精品另类|