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

按鈕和圖標(biāo)的排版設(shè)計(jì)也是一門學(xué)問，不一樣的排版就會(huì)有不一樣的視覺結(jié)果。 如果對(duì)設(shè)計(jì)的細(xì)節(jié)不重視，有可能讓我們?cè)就昝赖漠a(chǎn)品變的平庸，比如像按鈕、Tab這些簡(jiǎn)單的界面元素也是需要排版的，因?yàn)橛脩艨赡苊刻於紩?huì)點(diǎn)擊N次。

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

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

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

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

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

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

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

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

看到滿意的只要打鉤就行。最后一個(gè)大的按鈕鍵點(diǎn)擊添加到購物車。

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

第三個(gè)按鈕設(shè)計(jì)案例：理財(cái)app的塊元素按鈕設(shè)計(jì)

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

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

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

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

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