移動端按鈕的設計趨勢與使用原則

12 評論 15305 瀏覽 73 收藏 11 分鐘

每天我們都使用著各種APP,使用的時候都是通過各種button的引導來讓我們實現操作,做UI和交互的時候,也幾乎所有界面都離不開這些button,今天從多維的角度,給大家捋一捋2018移動端的按鈕設計趨勢、以及從交互體驗角度去看按鈕設計的是否合適。

大色塊按鈕

大色塊按鈕現在用的最多的一種樣式了,即扁平的填充色塊加上文字或ICON,適用于絕大多數地方。

用法/場景:大色塊按鈕的使用頻率特別高,因為它的突出性,所以非常適合用來引導用戶操作,如圖,第一時間就能鎖定視覺焦點,知道下一步的操作

幽靈按鈕

基本上就是文字加描邊的樣式,描邊按鈕的突出性都較弱,但幽靈按鈕比起一般描邊更加弱化,若有若無,在界面上視覺和諧度更高,但指引性不強。

用法/場景:多用于背景較為豐富的地方,幽靈按鈕不會過于搶眼,不會對背景遮擋過多,在一些照片or插畫上不會顯得過于突兀,由于描邊按鈕的突出性大大低于大色塊按鈕,也可以與色塊配合使用,使得更加主體分明,需要大量按鈕時,善用這樣的樣式,也不會使得界面顏色占用面積過多、過亮。

彌散投影按鈕

彌漫投影樣式按鈕,通常是在大色塊按鈕的基礎上“加工”,在按鈕底部添加與按鈕同色或者更淺色的柔和的陰影。

用法/場景:通常在大色塊按鈕的基礎上,想讓該按鈕更突出,或者想讓頁面層級關系更分明,樣式更靚麗,彌漫投影也許適合你。

漸變色按鈕

一直以來都是大色塊純色按鈕居多,最近漸變按鈕越來越流行,在靚麗漸變的基礎上再增加彌漫投影,會使視覺效果更加出彩。

用法/場景:漸變色按鈕的突出性和指引性也非常強,視覺效果也很出彩,但是也要根據產品調性來選擇性的使用,漸變中的顏色也一般離不開產品的主色調。

半透明按鈕

顧名思義,按鈕底部色塊為半透明,顯得比大色塊按鈕更加輕盈,視覺上和諧度也更高,但指引性不如大色塊按鈕強。

用法/場景:半透明按鈕雖然指引性較差,但是又想把它作為引導,且保持界面的和諧度,在使用半透明按鈕的同時避免使用大色塊按鈕即可。

半透明按鈕也可以配合大色塊按鈕使用,使得界面主次分明。

上面從質感層面說了一下按鈕的設計趨勢,下面從按鈕的形狀層面說一下按鈕的不同形狀及特點。

直角按鈕

直角矩形的按鈕,通常適用于較嚴肅的產品,如金融類的,直角的特性是顯得更專業更國際化,但現在使用純直角的主流產品占比著實不多。

圓角按鈕

圓矩形的按鈕,是當下使用頻率最多的按鈕了,在直角的單調上多了一些活潑的元素,微微的圓角幾乎適用于所有的產品,特性就是比較中肯,即不過于嚴肅也不過于活潑,但在一套語言中,圓角角度都要保持一致性。

全圓按鈕

顧名思義,就是圓角的度數達到最大,兩邊呈半圓。全圓按鈕適用于一般較為活潑的產品,特點就是繼承了圓形元素的特征,活潑、圓潤。

六邊形按鈕

六邊形按鈕倒是相對比較少見,在游戲或者活動節目才偶有出現,六邊形按鈕對整體的風格要求也比較高,濫用會顯得比較突兀,也可以用在有科技感的界面中。

通欄按鈕

通欄按鈕就是一般置于最下角一個矩形色塊,兩邊緊靠著屏幕兩端,特點是指引性特別強,沒有什么局限性,比較通用。

說了那么多按鈕的設計趨勢和按鈕不同形狀及特點,下面再給大家說一說使用按鈕的時候,需要注意到的問題。

注意視覺層級

功能越強,對用戶路徑更有幫助,相反比較危險的操作,如退出、刪除等,視覺上需要弱化。

注意按鈕圓角統一

同一產品、同層級的按鈕,風格、圓度要統一,反之顯得頁面混亂,一致性差,毫無規范。

注意按鈕大小

按鈕過大會顯得不精致,過小不易于識別和點擊,一般拇指合適的點擊范圍,最小在44*44px

注意按鈕擺放位置

一般人的右手比較靈活,右手操作最為習慣,好比拿鼠標的都是右手,所以使用右手用手機的人占大多數,因此重要的按鈕,我們放在右邊用戶操作起來更為方便。

注意過于花哨

現在扁平化,講究的就是簡單效率,易于表達,如果按鈕過于花哨,就增加了閱讀的難度。

按鈕雖然在頁面中畫面占比不大,但是與視覺和交互體驗息息相關,做產品要注重細節,做視覺也一樣,因此我們要多加思考,保持懷疑的態度多多推導。我們更“挑剔”,才可以產出更完美。

 

作者:竹溪Gaven ,微信公眾號:我們的設計日記

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

題圖由作者提供

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問小哥哥 你的案例設計圖都是從哪找的?

    來自江蘇 回復
    1. 追波、behace、自己畫、都有

      來自北京 回復
  2. 前面寫的是按鈕樣式,中間寫的是按鈕的形狀運用,后面寫的是使用方法,建議區分下內容 看的邏輯比較清晰 ??

    來自廣東 回復
    1. 嗯吶,感謝建議,思路方向略有不同

      來自北京 回復
  3. 淺顯易懂,非常實用

    來自北京 回復
    1. 謝謝支持

      來自北京 回復
  4. 六邊形按鈕是什么鬼 ?

    來自廣東 回復
    1. 比如谷歌的新設計趨勢里就有六邊形按鈕

      來自北京 回復
  5. 在使用半透明按鈕的同時避免使用大色塊按鈕即可。半透明按鈕也可以配合大色塊按鈕使用,使得界面主次分明。這句子隨意了!

    來自陜西 回復
    1. 我說的是,要使用半透明按鈕作為引導的時候,看清楚啊,老鐵,或者我寫的繞口了

      回復
  6. ?? ?? ?? ?? ?? ?? ??

    來自上海 回復