今天25學(xué)堂跟大家聊聊APP當(dāng)中最常見的一個設(shè)計元素：按鈕。如今在移動app設(shè)計當(dāng)中，圖標(biāo)和按鈕已經(jīng)愈來愈相近了。有些時候，圖標(biāo)也就是一個按鈕。

按鈕和圖標(biāo)的排版設(shè)計也是一門學(xué)問，不一樣的排版就會有不一樣的視覺結(jié)果。 如果對設(shè)計的細(xì)節(jié)不重視，有可能讓我們原本完美的產(chǎn)品變的平庸，比如像按鈕、Tab這些簡單的界面元素也是需要排版的，因為用戶可能每天都會點擊N次。

我們下面就來分析和學(xué)習(xí)下如何進行好的app按鈕設(shè)計和排版學(xué)習(xí)。

先來欣賞一些比較好的app設(shè)計按鈕以及設(shè)計的思路。

第一個案例：社交類APP當(dāng)中的按鈕設(shè)計。

以上這個APP界面，最醒目的地方就是 漂亮的按鈕。這樣的APP按鈕是直接吸引用戶點擊交互的。而且按鈕的排版和整個元素的排版都是居中的，屬于UI設(shè)計當(dāng)中的中軸式布局。大氣穩(wěn)重。

第二個案例：電商APP當(dāng)中的按鈕設(shè)計

這是國外一個非常不錯的賣兒童服裝的一款A(yù)PP設(shè)計界面。25學(xué)堂給大家截圖的這2個界面是一個購物車的界面設(shè)計。希望大家可以好好的看下。

此款A(yù)PP的按鈕設(shè)計非常的豐富。 各個元素基本都是由按鈕來組成和布局排版的。

而且設(shè)計的非常貼心和易用。 你們覺得的呢？

看到滿意的只要打鉤就行。最后一個大的按鈕鍵點擊添加到購物車。

值得我們學(xué)習(xí)的指數(shù)：☆☆☆☆☆

第三個按鈕設(shè)計案例：理財app的塊元素按鈕設(shè)計

這樣的app按鈕布局和排版，應(yīng)該說我們最常見的，也是我們最常用的一種方式。特別是app的首頁按鈕設(shè)計。

其實這樣的宮格式的設(shè)計也是屬于app按鈕設(shè)計范疇。相比我們之前2個的按鈕，沒有那么明顯。但是這些其實是按鈕的演變。

最后，25學(xué)堂也為大家收集了一款A(yù)PP按鈕設(shè)計的PSD源文件素材。

全套簡約風(fēng)格的psd按鈕素材下載

當(dāng)然，之前25學(xué)堂也分享了手機APP設(shè)計規(guī)范：圖標(biāo)和按鈕視覺設(shè)計規(guī)范和小清新UI按鈕，UI播放器界面，UI進度條元素設(shè)計資源下載。