移動端按鈕的設計趨勢與使用原則
每天我們都使用著各種APP,使用的時候都是通過各種button的引導來讓我們實現操作,做UI和交互的時候,也幾乎所有界面都離不開這些button,今天從多維的角度,給大家捋一捋2018移動端的按鈕設計趨勢、以及從交互體驗角度去看按鈕設計的是否合適。
大色塊按鈕
大色塊按鈕現在用的最多的一種樣式了,即扁平的填充色塊加上文字或ICON,適用于絕大多數地方。
用法/場景:大色塊按鈕的使用頻率特別高,因為它的突出性,所以非常適合用來引導用戶操作,如圖,第一時間就能鎖定視覺焦點,知道下一步的操作
幽靈按鈕
基本上就是文字加描邊的樣式,描邊按鈕的突出性都較弱,但幽靈按鈕比起一般描邊更加弱化,若有若無,在界面上視覺和諧度更高,但指引性不強。
用法/場景:多用于背景較為豐富的地方,幽靈按鈕不會過于搶眼,不會對背景遮擋過多,在一些照片or插畫上不會顯得過于突兀,由于描邊按鈕的突出性大大低于大色塊按鈕,也可以與色塊配合使用,使得更加主體分明,需要大量按鈕時,善用這樣的樣式,也不會使得界面顏色占用面積過多、過亮。
彌散投影按鈕
彌漫投影樣式按鈕,通常是在大色塊按鈕的基礎上“加工”,在按鈕底部添加與按鈕同色或者更淺色的柔和的陰影。
用法/場景:通常在大色塊按鈕的基礎上,想讓該按鈕更突出,或者想讓頁面層級關系更分明,樣式更靚麗,彌漫投影也許適合你。
漸變色按鈕
一直以來都是大色塊純色按鈕居多,最近漸變按鈕越來越流行,在靚麗漸變的基礎上再增加彌漫投影,會使視覺效果更加出彩。
用法/場景:漸變色按鈕的突出性和指引性也非常強,視覺效果也很出彩,但是也要根據產品調性來選擇性的使用,漸變中的顏色也一般離不開產品的主色調。
半透明按鈕
顧名思義,按鈕底部色塊為半透明,顯得比大色塊按鈕更加輕盈,視覺上和諧度也更高,但指引性不如大色塊按鈕強。
用法/場景:半透明按鈕雖然指引性較差,但是又想把它作為引導,且保持界面的和諧度,在使用半透明按鈕的同時避免使用大色塊按鈕即可。
半透明按鈕也可以配合大色塊按鈕使用,使得界面主次分明。
上面從質感層面說了一下按鈕的設計趨勢,下面從按鈕的形狀層面說一下按鈕的不同形狀及特點。
直角按鈕
直角矩形的按鈕,通常適用于較嚴肅的產品,如金融類的,直角的特性是顯得更專業更國際化,但現在使用純直角的主流產品占比著實不多。
圓角按鈕
圓矩形的按鈕,是當下使用頻率最多的按鈕了,在直角的單調上多了一些活潑的元素,微微的圓角幾乎適用于所有的產品,特性就是比較中肯,即不過于嚴肅也不過于活潑,但在一套語言中,圓角角度都要保持一致性。
全圓按鈕
顧名思義,就是圓角的度數達到最大,兩邊呈半圓。全圓按鈕適用于一般較為活潑的產品,特點就是繼承了圓形元素的特征,活潑、圓潤。
六邊形按鈕
六邊形按鈕倒是相對比較少見,在游戲或者活動節目才偶有出現,六邊形按鈕對整體的風格要求也比較高,濫用會顯得比較突兀,也可以用在有科技感的界面中。
通欄按鈕
通欄按鈕就是一般置于最下角一個矩形色塊,兩邊緊靠著屏幕兩端,特點是指引性特別強,沒有什么局限性,比較通用。
說了那么多按鈕的設計趨勢和按鈕不同形狀及特點,下面再給大家說一說使用按鈕的時候,需要注意到的問題。
注意視覺層級
功能越強,對用戶路徑更有幫助,相反比較危險的操作,如退出、刪除等,視覺上需要弱化。
注意按鈕圓角統一
同一產品、同層級的按鈕,風格、圓度要統一,反之顯得頁面混亂,一致性差,毫無規范。
注意按鈕大小
按鈕過大會顯得不精致,過小不易于識別和點擊,一般拇指合適的點擊范圍,最小在44*44px
注意按鈕擺放位置
一般人的右手比較靈活,右手操作最為習慣,好比拿鼠標的都是右手,所以使用右手用手機的人占大多數,因此重要的按鈕,我們放在右邊用戶操作起來更為方便。
注意過于花哨
現在扁平化,講究的就是簡單效率,易于表達,如果按鈕過于花哨,就增加了閱讀的難度。
按鈕雖然在頁面中畫面占比不大,但是與視覺和交互體驗息息相關,做產品要注重細節,做視覺也一樣,因此我們要多加思考,保持懷疑的態度多多推導。我們更“挑剔”,才可以產出更完美。
作者:竹溪Gaven ,微信公眾號:我們的設計日記
本文由 @竹溪Gaven? 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖由作者提供
請問小哥哥 你的案例設計圖都是從哪找的?
追波、behace、自己畫、都有
前面寫的是按鈕樣式,中間寫的是按鈕的形狀運用,后面寫的是使用方法,建議區分下內容 看的邏輯比較清晰 ??
嗯吶,感謝建議,思路方向略有不同
淺顯易懂,非常實用
謝謝支持
六邊形按鈕是什么鬼 ?
比如谷歌的新設計趨勢里就有六邊形按鈕
在使用半透明按鈕的同時避免使用大色塊按鈕即可。半透明按鈕也可以配合大色塊按鈕使用,使得界面主次分明。這句子隨意了!
我說的是,要使用半透明按鈕作為引導的時候,看清楚啊,老鐵,或者我寫的繞口了
?? ?? ?? ?? ?? ?? ??