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

創(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ū)別么?

沒(méi)有文字標(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ù)和視覺(jué)布局。

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

Z-depth

功能：

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

維度

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

布局：

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

按鈕狀態(tài)

這一點(diǎn)跟這個(gè)按鈕給用戶的第一印象是沒(méi)有太大關(guān)系，但是跟猶豫是否去點(diǎn)擊一個(gè)按鈕和發(fā)現(xiàn)沒(méi)有改變有關(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è)具有很好的視覺(jué)反饋效果的按鈕非常具有實(shí)踐意義。用戶能夠立即明白按鈕的含義從而接受并且視覺(jué)上的反饋也起到了相應(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)擊可直接查閱。

分享名稱：app界面按鈕設(shè)計(jì)規(guī)范
文章轉(zhuǎn)載：http://www.muchs.cn/news22/160672.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、全網(wǎng)營(yíng)銷推廣、外貿(mào)建站、外貿(mào)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、App開發(fā)

廣告

聲明：本網(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)