對按鈕的一些認識

發表於2016-04-06

按鈕的定義

就是網頁或應用中用來承載使用者操作的元件。用來承載使用者某一個具體的命令(操作),使用者在按下Button後程式系統執行一系列的行為。

通常在視覺上會著重表現。

按鈕是一個普通的必不可少的,幾乎我們每天都要接觸無數次的設計元件,同時在Web或者App上創造流暢的使用者體驗必不可少。

按鈕的尺寸

點選Button的是滑鼠或手指。

MIT Touch Lab的研究結果表明手指接觸面積平均為10-14mm之間,指尖平均為8-10mm,所以最佳的熱區尺寸應設定為10mmX10mm。

 

按鈕最佳尺寸

按鈕的形狀

通常是直角矩形或者圓角矩形。直角形的按鈕向我們傳遞一種正式嚴肅的感覺。圓角能夠加強資訊的傳遞,並且能夠將人的視線集中在元素的中心位置。其他形狀,如圓形,三角形等。

直角矩形按鈕
圓角矩形按鈕
圓形按鈕

按鈕的顏色

 

按鈕的顏色有千萬種,可能考慮到介面的設計風格;考慮到對使用者的心理暗示;考慮到要傳達給使用者的理念會選擇合適的顏色。比如大眾預設的紅色按鈕傳達有警告、不可以的意思,同時也最能引起注意的顏色;藍色則傳達著可行,暢通之意;灰色則傳達著不可用,不可點選之意,如灰置按鈕就是這樣應用的。

紅色按鈕
藍色按鈕
灰置按鈕

 

按鈕的樣式

1.立體按鈕

立體按鈕樣式相較於扁平按鈕設計增加了一維空間,在複雜或寬裕的空間中強調功能,立體按鈕比扁平按鈕更加顯眼。

立體按鈕

2.扁平按鈕

扁平的按鈕不突出,在點選時會有背景顏色,不打擾內容。

扁平按鈕

3.開關按鈕

用同一個Button表示開啟和關閉,節省空間。

開關按鈕

4.幽靈按鈕

透明背景,與頁面文字一樣顏色,只加上邊框,通常基於品牌或設計的考慮。

幽靈按鈕

5.懸浮按鈕

懸浮按鈕用於驅動動作時使用。當然在其它場景使用並不侷限於單一形狀,可以是圖片文字結合,也可以是icon單獨構成,懸浮於頁面中。

懸浮按鈕也是谷歌設計的重要部分,它是一個圓形的材質按鈕,點按之後按鈕浮起並表現墨水暈開的效果,利用本身的圓形形狀懸浮於介面之上與其他元素進行區分,加上運動動作,包括漸變,展開和轉化為單一定點。

懸浮按鈕

 

按鈕的狀態

 

按鈕有可用不可用兩種狀態,以及在互動上預設狀態、滑鼠或懸浮時的狀態和按下時的狀態。

之前有提到灰置按鈕,就是不可用的。如下圖的應用按鈕,現在這種情況是不可用,不能點選的。

 

不能點選

只有在你做出相應的改動時,這個按鈕才會被喚醒,變成可用可點選的狀態。

 

可點選狀態

在Web中按鈕的預設狀態下;

預設

滑鼠懸停時是這樣;

懸停

按下時是這樣的。

按下

在介面設計按鈕時都要考慮到這個互動問題,承現三種不同狀態。

按鈕的構成形式

按鈕可以分為純文字的、純icon的,純圖片的以及這三種元素各自相結合的,最常見的就是純文字形、純icon形和文字icon結合形,純文字的太常見,就不用再例圖說明了。

前5個按鈕就是純icon,後2個按鈕就是icon與文字相結合的

按鈕的使用形式

單個按鈕,最常見的。

單個按鈕

 

按鈕組,一般成組出現,共用邊框,在視覺上成一個整體長條形狀。末尾可能有更多的按鈕隱藏,通過下拉箭頭表示。

成組出現

列表型按鈕,類似Select,從可選的列表中選擇一項或者多項的選單。

select式

按鈕的擺放位置

按鈕應放置在使用者能夠直接找到或者他有預期能看到的地方。例如,iOS UI 設計規範給明瞭按鈕的合理位置。

按鈕要執行的命令和位置的關係非常重要,,特別是在出現成對的選項時(就像”上一個”和”下一個”),確保設計強調了最主要或者最重要的動作。

在下面的例子中我們使用了紅色的按鈕顏色表現一個潛在的具有破壞性的動作,並且,主要動作不但可以通過顏色和對比度去引起注意,還可以看它是否置於對話段落的右邊。

刪除按鈕比取消按鈕更加顯眼

打賞支援我寫出更多好文章,謝謝!

打賞作者

打賞支援我寫出更多好文章,謝謝!

對按鈕的一些認識

相關文章