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

大色塊按鈕

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

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

幽靈按鈕

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

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

彌散投影按鈕

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

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

漸變色按鈕

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

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

半透明按鈕

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

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

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

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

直角按鈕

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

圓角按鈕

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

全圓按鈕

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

六邊形按鈕

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

通欄按鈕

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

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

注意視覺層級

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

注意按鈕圓角統一

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

注意按鈕大小

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

注意按鈕擺放位置

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

注意過于花哨

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

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

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

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

題圖由作者提供