創(chuàng)新互聯(lián)為你提供，app界面按鈕設(shè)計(jì)規(guī)范。文章給出涵蓋各個(gè)平臺(tái)上的按鈕樣式，為不同形式的按鈕給出合理的使用建議，并深度講解了按鈕狀態(tài)的重要性供參考。

按鈕是一個(gè)普通的設(shè)計(jì)元素，不過(guò)我們基本每天或多或少接觸他。除了這個(gè)，由于按鈕是一個(gè)在網(wǎng)頁(yè)或者app上創(chuàng)造流暢的會(huì)話流體驗(yàn)的必不可少的元素，所以它值得我們?yōu)榘粹o這樣最基本的元素提供好的體驗(yàn)做出努力。為按鈕做些好實(shí)踐，讓按鈕看起來(lái)像按鈕。

app界面按鈕設(shè)計(jì)規(guī)范

APP中：分別為一般、點(diǎn)擊、不能點(diǎn)擊、選中

按鈕規(guī)范因不同功能和場(chǎng)景需要，設(shè)計(jì)不同的樣式和顏色，在尺寸上也分有：長(zhǎng)、中、短;而且按不同手機(jī)平臺(tái)長(zhǎng)中短尺寸也注意有所不同。

軟弱按鈕-短

安卓：150px*70px;IOS：120px*60px;

一般按鈕-中

安卓：350px*70px;IOS：30px*60px;

重要按鈕-長(zhǎng)

安卓：700px*70px;IOS：600px*60px;

現(xiàn)在想一下，如何達(dá)到設(shè)計(jì)溝通的可供性吧!用戶是怎么理解一個(gè)按鈕的呢?用形狀和顏色是界面上的元素看起來(lái)像一個(gè)按鈕。

Groupon 的登錄頁(yè)面關(guān)注于最主要的動(dòng)作

另外，手指點(diǎn)擊的尺寸也是要在設(shè)計(jì)時(shí)仔細(xì)考慮的事情。按鈕的大小在幫助用戶分辨這些元素的過(guò)程中起到了決定性的作用。不同的平臺(tái)提供了熱區(qū)的最小尺寸的不同設(shè)計(jì)規(guī)范。MIT Touch Lab的研究結(jié)果表明手指接觸面積平均為10-14mm之間，指尖平均為8-10mm，所以好的熱區(qū)尺寸應(yīng)設(shè)定為10mmX10mm。

位置和命令

按鈕應(yīng)放置在用戶能夠直接找到或者他有預(yù)期能看到的地方。例如，iOS UI 設(shè)計(jì)規(guī)范給明了按鈕的合理位置。

按鈕要執(zhí)行的命令和位置的關(guān)系。按鈕要執(zhí)行的命令非常重要，特別是在出現(xiàn)成對(duì)的選項(xiàng)時(shí)(就像”上一個(gè)”和”下一個(gè)”)。確保設(shè)計(jì)強(qiáng)調(diào)了最主要或者最重要的動(dòng)作。

在下面的例子中我們使用了紅色的按鈕顏色表現(xiàn)一個(gè)潛在的具有破壞性的動(dòng)作。并且，主要?jiǎng)幼鞑坏梢酝ㄟ^(guò)顏色和對(duì)比度去引起注意，還可以看它是否置于對(duì)話段落的右邊。

刪除按鈕比取消按鈕更加顯眼

標(biāo)簽

按鈕上的標(biāo)簽告訴給人們這個(gè)按鈕能做什么。清楚的說(shuō)明點(diǎn)擊之后將會(huì)發(fā)生的事情。

我們講上面的圖片去掉文字。你能發(fā)現(xiàn)什么區(qū)別么?

沒有文字標(biāo)簽

喚起行動(dòng)(Call to action)

讓最重要的按鈕(特別在你想要用他們喚起行動(dòng)時(shí))看起來(lái)它是最重要的。

Create Resume 就是一個(gè)很明顯喚起行動(dòng)按鈕

app界面按鈕形狀

通常，根據(jù)網(wǎng)站或者APP的風(fēng)格，我們會(huì)把按鈕設(shè)計(jì)成矩形或者圓角矩形。一些研究建議圓角能夠加強(qiáng)信息的傳遞并且能夠?qū)⑷说膶?shí)現(xiàn)集中在元素的中心位置。

圓角矩形按鈕

我們有時(shí)也會(huì)根據(jù)自己的創(chuàng)意使用其他的形狀例如圓形，三角形或者自定義形狀，但是你要知道這樣的嘗試其實(shí)是有風(fēng)險(xiǎn)的。

Floating Action Bar 是一個(gè)自定義按鈕形狀的好的例子

一定要確保統(tǒng)一性能夠把控你的界面設(shè)計(jì)，以便用戶能夠識(shí)別出你的界面元素。

按鈕樣式和行為

1.突出按鈕

突出的按鈕樣式特別是突出的長(zhǎng)方形按鈕。(投影表現(xiàn)出按鈕是可以點(diǎn)擊的)。突出的按鈕樣式相較于扁平的設(shè)計(jì)增加了一維空間。在復(fù)雜或?qū)捲５目臻g中強(qiáng)調(diào)功能。

使用

成直線的排列(在布局上根據(jù)諸多不同的內(nèi)容使用更顯著的引導(dǎo))。

行為

讓按鈕凸起并在點(diǎn)擊是填充顏色。

例子

突出按鈕比扁平按鈕更加顯眼。例如安卓的應(yīng)用

2.扁平按鈕

扁平樣式的按鈕不會(huì)突出出來(lái)，但是在點(diǎn)擊時(shí)會(huì)改變顏色。主要的優(yōu)勢(shì)在于界面的簡(jiǎn)潔——最不容易被內(nèi)容打擾。

使用

在會(huì)話中(統(tǒng)一按鈕行為和會(huì)話內(nèi)容)

安卓會(huì)話當(dāng)中的扁平按鈕

在工具條上

在工具條上的扁平按鈕

于留白對(duì)齊，一遍用戶能夠輕易找到它們。

扁平按鈕

行為

例子

安卓應(yīng)用上的扁平按鈕

3.切換按鈕

切換按鈕能夠允許用戶從兩種狀態(tài)中改變?cè)O(shè)置。

切換按鈕

使用

多數(shù)的切換按鈕都是以開或關(guān)的形式使用。

還有就是切換按鈕可以在成組相關(guān)的選項(xiàng)中使用。但是你的布局應(yīng)當(dāng)是將切換按鈕作為一組選項(xiàng)中的組成部分。所以切換按鈕要求：

1.一組中有至少3個(gè)切換按鈕

2.按鈕上使用文字，icon或者兩者結(jié)合作為標(biāo)簽。

一個(gè)被選中的切換按鈕

在切換按鈕上使用icon是最好的方法，因?yàn)樗唤邮芤粋€(gè)選擇，比如添加或者轉(zhuǎn)移一個(gè)星星到另一個(gè)項(xiàng)目上。最好在APP的bar，toolbar，動(dòng)作按鈕或者切換按鈕上使用它們。

Twitter的”LIKE”上的切換按鈕

為一個(gè)按鈕上選擇一個(gè)正確的icon是非常重要的。我將會(huì)在另外一篇文章上講解icon 扮演著好用戶體驗(yàn)的重要角色。

例子

iOS上使用切換按鈕作為設(shè)置選項(xiàng)。

4.幽靈按鈕

幽靈按鈕就是一種透明的或者空按鈕的使用基本形狀的形式。當(dāng)內(nèi)部的內(nèi)容為簡(jiǎn)單的文字形式時(shí)，通常使用非常細(xì)的描邊作為幽靈按鈕的輪廓。

不同的幽靈按鈕

使用

使用幽靈按鈕做為一個(gè)主要的喚起動(dòng)作其實(shí)并不是一個(gè)好主意。你能看到下面的例子就是幽靈按鈕上Download Bootstrap的樣子看起來(lái)和他們產(chǎn)品的logo很相似容易引起用戶的困惑。

Download Bootstrap是一個(gè)按鈕，你看出來(lái)了么?顆顆。。。。

幽靈按鈕最好是用在第二或第三層級(jí)的內(nèi)容上，哪怕他最終無(wú)法完全傳達(dá)你想要喚起行動(dòng)的目的。你當(dāng)然想用戶能夠返現(xiàn)你主要想要傳達(dá)的喚起行動(dòng)的內(nèi)容，然后再跳過(guò)它看到第二級(jí)的按鈕。

積極動(dòng)作會(huì)有更高的反差以便用戶能看到清晰的動(dòng)作。

主要?jiǎng)幼?CTA)是Purchase Now，幽靈按鈕是第二級(jí)按鈕

行為

正常狀態(tài)(左)和高亮態(tài)(右)

例子

Airbnb的網(wǎng)站有一個(gè)幽靈按鈕“Become a Host”

5.FAB浮動(dòng)按鈕

FAB浮動(dòng)按鈕是谷歌設(shè)計(jì)的重要部分。它是一個(gè)圓形的材質(zhì)按鈕，點(diǎn)按之后按鈕浮起并表現(xiàn)墨水暈開的效果。

使用

浮動(dòng)按鈕用于驅(qū)動(dòng)動(dòng)作時(shí)使用。

行為

懸浮按鈕利用本身的圓形形狀懸浮于界面之上與其他元素進(jìn)行區(qū)分，加上運(yùn)動(dòng)動(dòng)作，包括漸變，展開和轉(zhuǎn)化為單一定點(diǎn)。

選擇按鈕樣式

選擇一個(gè)按鈕樣式其實(shí)是取決于按鈕的權(quán)重，屏幕上的容器個(gè)數(shù)和視覺布局。

谷歌設(shè)計(jì)中的按鈕類型的選擇

Z-depth

功能：

這個(gè)按鈕的重要程度和普遍程度到了要使用浮動(dòng)按鈕的地步了么?

維度

選擇按鈕樣式取決于容器和多少個(gè)Z軸空間的布局。

布局：

每個(gè)容器使用一個(gè)最主要的按鈕樣式。除非你有很好的理由才可以混用，比如為了強(qiáng)調(diào)一個(gè)重要的功能。

按鈕狀態(tài)

這一點(diǎn)跟這個(gè)按鈕給用戶的第一印象是沒有太大關(guān)系，但是跟猶豫是否去點(diǎn)擊一個(gè)按鈕和發(fā)現(xiàn)沒有改變有關(guān)。用戶會(huì)感到迷惑：“這是不是一個(gè)按鈕呢?現(xiàn)在我是不是得點(diǎn)它去驗(yàn)證一下它是不是一個(gè)按鈕呢。額……”

按鈕不是單一—狀態(tài)目標(biāo)。它是多狀態(tài)的。并且可以為用戶提供一個(gè)可視的反饋去表明當(dāng)前的狀態(tài)應(yīng)該是優(yōu)先級(jí)高的任務(wù)。

正常狀態(tài)

這一狀態(tài)的主要規(guī)則就是—按鈕應(yīng)當(dāng)在正常態(tài)時(shí)就能被識(shí)別出是一個(gè)按鈕。Windows 8是一個(gè)很好的反例—用戶很難看出上面的元素在設(shè)置菜單中是否是可點(diǎn)的。

Windows8中按鈕的正常態(tài)

關(guān)注狀態(tài)(高亮狀態(tài))

為用戶營(yíng)造一個(gè)具有很好的視覺反饋效果的按鈕非常具有實(shí)踐意義。用戶能夠立即明白按鈕的含義從而接受并且視覺上的反饋也起到了相應(yīng)的作用。

點(diǎn)擊態(tài)

將不同的元素設(shè)計(jì)成有創(chuàng)意和有驅(qū)動(dòng)性的動(dòng)效能為用戶帶來(lái)興奮和愉悅的體驗(yàn)。

不活躍狀態(tài)

顯示方式有兩種可能—隱藏按鈕或者不可用狀態(tài)。

隱藏按鈕的爭(zhēng)議：

明確性。只需在旁邊顯示任務(wù)的需求。

保存草稿。允許用戶改變?cè)O(shè)置，不同的命令使用同一個(gè)位置。這樣很方便。Gmail就是是這樣做的。

Gmail隱藏了不可用的按鈕

只有在用戶進(jìn)行了啟用操作時(shí)才會(huì)讓它可見

不可用狀態(tài)的爭(zhēng)議：

表明動(dòng)作的可執(zhí)行性。雖然按鈕不可用，用戶有機(jī)會(huì)去得知?jiǎng)幼魇强梢詧?zhí)行的。甚至要提供一個(gè)提示去解釋按鈕如何使用。

控制面板的位置。用戶能夠?qū)W習(xí)到控制面板和按鈕在界面上的具體位置。

不可用按鈕狀態(tài)

總結(jié)

按鈕意味著用戶能夠直接執(zhí)行我們希望他們?nèi)?zhí)行的任務(wù)。一個(gè)平滑的轉(zhuǎn)場(chǎng)能夠保持會(huì)話流暢性，小差錯(cuò)比如找不到正確的按鈕，最好的情況是是打斷進(jìn)程，最差是程序崩潰。

按鈕體驗(yàn)設(shè)計(jì)總是關(guān)乎于識(shí)別性和明確性。想想一個(gè)很忙碌的用戶開啟網(wǎng)頁(yè)或者APP展開會(huì)話的情況。按鈕起到相當(dāng)重要的作用。

創(chuàng)新互聯(lián)可還為大家整理了，MBE風(fēng)格圖標(biāo)設(shè)計(jì)資訊、APP界面設(shè)計(jì)資訊，點(diǎn)擊可直接查閱。

網(wǎng)頁(yè)名稱：app界面按鈕設(shè)計(jì)規(guī)范
標(biāo)題路徑：http://www.rwnh.cn/news/160672.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、建站公司、品牌網(wǎng)站建設(shè)、定制開發(fā)、小程序開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)