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

大色塊按鈕

大色塊按鈕現(xiàn)在用的最多的一種樣式了，即扁平的填充色塊加上文字或ICON，適用于絕大多數(shù)地方。

用法/場景：大色塊按鈕的使用頻率特別高，因?yàn)樗耐怀鲂?，所以非常適合用來引導(dǎo)用戶操作，如圖，第一時(shí)間就能鎖定視覺焦點(diǎn)，知道下一步的操作

幽靈按鈕

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

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

彌散投影按鈕

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

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

漸變色按鈕

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

用法/場景：漸變色按鈕的突出性和指引性也非常強(qiáng)，視覺效果也很出彩，但是也要根據(jù)產(chǎn)品調(diào)性來選擇性的使用，漸變中的顏色也一般離不開產(chǎn)品的主色調(diào)。

半透明按鈕

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

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

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

上面從質(zhì)感層面說了一下按鈕的設(shè)計(jì)趨勢，下面從按鈕的形狀層面說一下按鈕的不同形狀及特點(diǎn)。

直角按鈕

直角矩形的按鈕，通常適用于較嚴(yán)肅的產(chǎn)品，如金融類的，直角的特性是顯得更專業(yè)更國際化，但現(xiàn)在使用純直角的主流產(chǎn)品占比著實(shí)不多。

圓角按鈕

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

全圓按鈕

顧名思義，就是圓角的度數(shù)達(dá)到最大，兩邊呈半圓。全圓按鈕適用于一般較為活潑的產(chǎn)品，特點(diǎn)就是繼承了圓形元素的特征，活潑、圓潤。

六邊形按鈕

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

通欄按鈕

通欄按鈕就是一般置于最下角一個(gè)矩形色塊，兩邊緊靠著屏幕兩端，特點(diǎn)是指引性特別強(qiáng)，沒有什么局限性，比較通用。

說了那么多按鈕的設(shè)計(jì)趨勢和按鈕不同形狀及特點(diǎn)，下面再給大家說一說使用按鈕的時(shí)候，需要注意到的問題。

注意視覺層級

功能越強(qiáng)，對用戶路徑更有幫助，相反比較危險(xiǎn)的操作，如退出、刪除等，視覺上需要弱化。

注意按鈕圓角統(tǒng)一

同一產(chǎn)品、同層級的按鈕，風(fēng)格、圓度要統(tǒng)一，反之顯得頁面混亂，一致性差，毫無規(guī)范。

注意按鈕大小

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

注意按鈕擺放位置

一般人的右手比較靈活，右手操作最為習(xí)慣，好比拿鼠標(biāo)的都是右手，所以使用右手用手機(jī)的人占大多數(shù)，因此重要的按鈕，我們放在右邊用戶操作起來更為方便。

注意過于花哨

現(xiàn)在扁平化，講究的就是簡單效率，易于表達(dá)，如果按鈕過于花哨，就增加了閱讀的難度。

按鈕雖然在頁面中畫面占比不大，但是與視覺和交互體驗(yàn)息息相關(guān)，做產(chǎn)品要注重細(xì)節(jié)，做視覺也一樣，因此我們要多加思考，保持懷疑的態(tài)度多多推導(dǎo)。我們更“挑剔”，才可以產(chǎn)出更完美。

作者：竹溪Gaven ，微信公眾號：我們的設(shè)計(jì)日記

本文由 @竹溪Gaven? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖由作者提供