国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

本文列舉了如何設(shè)計出更好的按鈕的七個要點，希望能給你帶來思考與啟發(fā)。

按鈕是觸發(fā)它所描述功能的可交互元素。如果一個按鈕上寫著“保存”，點它十有八九會有類似保存操作。按鈕也是所有電子產(chǎn)品上最重要的交互元素之一。

按鈕能夠觸發(fā)購買、下載、發(fā)送和很多其他重要操作。數(shù)字按鈕也沿襲自真實世界中比如電視遙控、錄像機(jī)或者游戲手柄上的實體按鈕。

最重要的須知：按鈕得看起來像按鈕

設(shè)計按鈕最重要的法則就是要使按鈕足夠突出，以免按鈕和其他元素混淆。

從按鈕中逐步移除元素，按鈕的功能也開始消融丟失。它變成了裝飾或者說文本，失去可操作的特性。

熟悉的=好的

我們習(xí)慣于和行為有自然關(guān)聯(lián)的特定形狀和形式。按鈕看起來和我們認(rèn)為有關(guān)聯(lián)的行為越相似，設(shè)計越成功。這就是為什么選擇一個矩形（或者一個圓角矩形）作為按鈕是最安全的。

這個元素會被立即識別為一個按鈕

其他形狀和形式對用戶就未必有這樣的可識別性。需謹(jǐn)慎使用他們，盡量在你產(chǎn)品的常規(guī)風(fēng)格需要與眾不同時才使用。

其他形狀和形式（三角形、圓形、自由形態(tài)）對用戶就未必有這樣的可識別性。需謹(jǐn)慎使用他們，盡量在你產(chǎn)品的常規(guī)風(fēng)格需要與眾不同時才使用。

需要花費(fèi)更多時間才能被識別的可點擊元素

按鈕分解

按鈕設(shè)計需熟記每個元素并妥善選擇。使用品牌手冊作為基準(zhǔn)，思考哪種按鈕能夠匹配品牌并和界面很好相容。

你應(yīng)該使用網(wǎng)格基本數(shù)值用來設(shè)置內(nèi)外邊距。以上圖為例，左側(cè)內(nèi)邊距為兩倍上下內(nèi)邊距，這是種增加可讀性的安全做法。

間距和對齊

不規(guī)則間距按鈕是所有界面都會遇到最普遍的問題之一。務(wù)必再三確認(rèn)按鈕標(biāo)簽是否水平和豎直居中。如果要十分確定，請建立規(guī)范。

除了基于網(wǎng)格的方法，使用大寫字母W確定邊距也是一個穩(wěn)妥的辦法。如果按鈕標(biāo)簽4個邊距都至少1 x W，那就沒問題。為了提高可讀性，水平邊距留出2 x W更好。

別忘了按鈕之間安全間距。如果界面上有很多按鈕，保證各個按鈕外邊距不重疊比較穩(wěn)妥。

合理的尺寸

桌面和移動端的按鈕都應(yīng)該有它們的最小尺寸。如果按鈕太小，就會導(dǎo)致按鈕難以用手指或鼠標(biāo)點擊。這會導(dǎo)致給用戶帶來困擾，用戶甚至?xí)苯有遁d你的APP。在移動端，最好把44 x 44 pt作為所有可交互元素的最小尺寸。

移動端上的按鈕尺寸在50左右最佳。如果是基于光標(biāo)的設(shè)備，32 x 32也是可行的。牢記即使在桌面端，更大按鈕也依然代表它使用起來更容易。

良好的實踐

重要的按鈕也會搭配有圖標(biāo)。一個“結(jié)賬”可以通過一個購物籃或購物車圖標(biāo)快速識別，但是只在與文字“結(jié)賬”同時出現(xiàn)時有效。

一個合適的箭頭或“>”放在按鈕標(biāo)簽后，能更強(qiáng)地傳達(dá)信息。更強(qiáng)制地去引導(dǎo)用戶點擊并“繼續(xù)”。如果你要強(qiáng)化CTA，這個辦法就很有效。

相較扁平的按鈕，有陰影的按鈕會更有可點擊性、更快被識別。加個微妙的陰影可以使按鈕在背景中更為突出。

圓角

圓角按鈕會看起來比尖角按鈕更友好和積極。同時，圓角按鈕周圍的內(nèi)容設(shè)計難度劇增。如果文本標(biāo)簽在按鈕上方與按鈕保持左對齊，那么按鈕的圓角越大，文本標(biāo)簽和按鈕視覺上越不協(xié)調(diào)。這讓按鈕感覺看起來同時有兩個左邊距。

圖標(biāo)對齊

合適的圖標(biāo)對齊是按鈕設(shè)計中最難的事之一。大多數(shù)情況下，字重和圖標(biāo)尺寸是直接相關(guān)，它們的關(guān)系也是特有的。但是依然有個簡單有效的法則適用于大多數(shù)情況。

根據(jù)按鈕圓角半徑畫個圓，或者根據(jù)按鈕高度畫個方塊。在它內(nèi)部，再畫個小的來放置圖標(biāo)。大的形狀和小的之間的內(nèi)邊距應(yīng)該有和標(biāo)簽文字高度相同。然后就可以把圖標(biāo)放到小的形狀里。

在有圖標(biāo)的情況下，最好保持圖標(biāo)高度和文字高度一致，可以對比文本線寬和單字寬，然后使它們匹配度越高效果越好

邊緣平衡

在使用圓角矩形按鈕時，需要注意去調(diào)整圓角和其他界面元素的比例來確定使用多大的圓角。都使用相同的圓角半徑會使得外邊距不平衡。

對話框邊距也是一樣，就像左邊距和底邊距。因此，處理起外邊緣會更舒服和快速。

對話框按鈕和背景之間的左邊距和底邊距過大（左）、過?。ㄓ遥?。這讓對話框邊緣太過突出，奪取了按鈕本身的關(guān)注度。

總結(jié)

當(dāng)你創(chuàng)建一級、二級、三級按鈕時，謹(jǐn)記每次去檢查一系列因素。甚至小的不統(tǒng)一或者不對齊會降低交互質(zhì)量。按鈕交互和點擊都影響重大。

謹(jǐn)記：

1. 把按鈕設(shè)計的像按鈕
2. 保證標(biāo)簽和按鈕水平、豎直居中
3. 保證按鈕有充足內(nèi)邊距
4. 為圖標(biāo)選擇正確的大小和對齊關(guān)系
5. 根據(jù)按鈕的使用環(huán)境設(shè)置合適的圓角半徑
6. 檢查按鈕圓角半徑是否與其他元素契合
7. 選擇合適尺寸。按鈕越大，用起來越簡單。桌面端同理。

作者：Michal Malewicz

原文鏈接：https://uxdesign.cc/design-better-buttons-a5c90a113280

譯者：Matrix，公眾號：交譯所

本文由 @交譯所 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議