首頁 > 文章內容

不同種類的按鈕,怎樣設計才是正確的

作為WEB端和移動端的組成部分,按鈕承載著引導用戶的作用,遵循怎樣的設計原則,才可以讓按鈕真正起到作用,同時不造成誤解呢?

作為WEB端和移動端的組成部分,按鈕承載著引導用戶的作用,遵循怎樣的設計原則,才可以讓按鈕真正起到作用,同時不造成誤解呢?

按鈕對于現在的我們來說,不管是WEB端還是移動端,已經非常常見了。但是對于早期互聯網來說,樣式比較少。當時只有超鏈接,也就是文字鏈接,點擊一次,就可以直接到達。

這種超鏈接也就是目前我們看到的樣式,文字+藍色下劃線。

還有一種就是Button,有方形的、圓形的、立體的、hover的、按下的、釋放的等等種樣式。

這是早期的谷歌首頁,兩種按鈕樣式還是對比很清楚的。

現在的互聯網較之前相比,按鈕樣式越來越復雜。因為現在的信息越來越多,為了更清楚讓用戶分清主次,就需要不同的樣式來表達。

現在我們常見的按鈕樣式無外乎就是文字按鈕、普通按鈕、圖標按鈕、標簽按鈕、懸浮按鈕這幾種樣式,我先簡單介紹一下。

文字按鈕

對于文字按鈕,既定的規則是通過藍色或者加下劃線表示,當然不是必須是藍色的,也可以根據產品換成其他顏色。但是需要形成對比,具有可識別性,讓用戶知道這是一個可以點擊的鏈接。

比如百度的搜索熱點,用藍色向用戶傳達:我是可以點擊的;而旁邊的不可點擊的數字則以黑色做對比,告訴用戶:你看看就好了,不要花時間來點我,對用戶來說非常直觀明了,用戶看到后基本不會去花時間去試試能不能點擊,除非個別人就想試一試的。

而對于加下劃線的超鏈接,和其他文字對比,也是直觀明了。

普通按鈕

普通按鈕則分為幽靈按鈕和填充按鈕。對于大家來說,這應該比較常見了,視覺層級上來說,填充按鈕肯定高于幽靈按鈕,一般引導性的操作都會使用填充按鈕。

在這兩種按鈕上,每個按鈕都會包含一個文本指令,它會告訴用戶這個按鈕的功能和指向。所以,按鈕上的文本要盡量簡潔、直觀,并且要符合整個網站風格的語音語調。

當用戶點擊按鈕的時候,按鈕所指示的內容和結果應當合理、迅速地呈現在用戶眼前,無論是提交表單、跳轉到新的頁面,用戶通過這個按鈕應當獲得他所預期的結果。

圖標按鈕

圖標按鈕在WEB端和移動端也非常常見,用圖標意形的方式直接告訴用戶,點擊這個按鈕可以達到什么結果,比較形象化。

標簽按鈕

標簽按鈕則可以進行分類,標記不同的屬性和維度,可以進行編輯操作,比如“添加”和“刪除”。

懸浮按鈕

而懸浮按鈕可以說是代表用戶在界面上最高頻次的操作。

由于懸浮按鈕通常承載的是主要的、有代表性的操作,通常它應該是個積極正向的交互,比如創建、分享、探索等;不應該執行破壞性的操作,比如刪除。

高德高航的兩個懸浮按鈕則為“回到原位置”和“查找路線”。

總結

無論對于什么按鈕來說。

操作前,操作結果可預知”這個原則很重要,這個按鈕是只放圖標就可以了?還是要寫上文字用戶才清楚?——這是經常會遇到的問題。

要做這個判斷,我們得先確定:需要讓用戶清楚到什么程度。應該盡量讓用戶能猜到點擊后將帶來什么結果,這樣用戶才更敢去點擊。

是不是只放一個圖標,用戶就沒法猜到后果?那也不一定。這要看產品里的上下文情景,還有用戶對產品的熟悉程度。相機APP里,只放一個拍攝的圖標,幾乎所有人都知道是拍攝。

寫到這,突然想到了之前在設計彈窗按鈕的時候,遇到的一個問題,是“確定在左,取消在右”,還是“取消在左,確定在右”?

同時用過Windows和Mac系統的用戶,應該清楚,這兩個系統對于這個設計是完全相反的。Windows是“確定在左,取消在右”,Mac則相反,那到底哪個才更合理呢?

Android 的設計規范中則規定,“‘取消’操作的按鈕始終處于左邊,當用戶執行這個操作的時候會回到上一個狀態,而正向操作的按鈕則安排在右側”。也就是說,在Android規范當中,“取消”按鈕是在“確認”按鈕的左邊。

根據古騰堡原則:人們在瀏覽頁面的時候,都趨向于從上到下,從左到右的眼球運動規律。左上角是視覺的第一落點區,而右下角是視覺最終落點區。用戶的視覺中心往往在頁面的左上方,而結束瀏覽時視線往往落在右下角。

既然用戶的最終操作行為是“確認”,我們是不是就應該把“確認”按鈕放在最終視覺落點區呢?這樣用戶既不會錯過“確認”這個重要操作,也保證用戶在這之前都掃描到了所有的操作。

所以根據這個原則,建議是放在右邊。但是按照遵循設計規范來說,平臺的一致性原則優先級較高,用戶有可能會有錯誤或者遲疑的風險,這個就需要通過用戶反饋來調整了。

同時在我們設計彈窗時,應該讓每個彈窗都盡可能明確,不能只是為用戶提供選擇而已,明確的標簽能夠幫助用戶在選擇的時候不遲疑,更迅速和準確的去點擊。

比如以下這個案例:

第一個彈窗中,“No”僅僅是回答問題,但并沒有指向性,并未指出這么選擇的后果。而第二個彈窗則好了許多,“Cancel”和“Discard”兩個選項,后者和前文所提出的問題相對應,指向性明確,Cancel 的含義更加清晰。

當然在設計彈窗時,我們還可以自定義落焦點。當首選操作是正向操作時,視覺重量要大于次要操作,比如“保存”;而反向操作時,不可逆的操作比較高,所以為了避免用戶出錯的風險,此時在速度和正確性上相比,正確則是比較重要的,比如“刪除”,所以這時設計師就需要把引導性做好。

好了,按鈕設計就聊到這,下篇見。

本文由 @謙元 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

責任編輯:

相關推薦

相關新聞

回到首頁 回到頂部

網站簡介 - 廣告服務 - 誠聘英才 - 聯系我們 - 法律聲明 - 友情鏈接

加拿大快乐8作假吗