激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

設(shè)計(jì)細(xì)節(jié):按鈕的設(shè)計(jì)技巧

發(fā)布時(shí)間：2024-04-03 10:47:31 瀏覽量：290次


按鈕是UI設(shè)計(jì)中常見的元素之一，如果你掌握了按鈕的設(shè)計(jì)技巧，那你的設(shè)計(jì)將會(huì)更上一層樓。


按鈕是一種交互式的元素，可引導(dǎo)用戶對(duì)其進(jìn)行描述性的操作?？梢源蛸€，如果按鈕上顯示“保存”，單擊它很可能會(huì)“保存”某些內(nèi)容。它是任何產(chǎn)品設(shè)計(jì)中最重要的交互元素之一。
它可能導(dǎo)致購(gòu)買、下載、發(fā)送和許多其他重要的操作。數(shù)字按鈕也是現(xiàn)實(shí)世界中按鈕的延展，比如：電視遙控器、電唱機(jī)或是游戲控制器中的按鈕。
最重要的是要清楚
一個(gè)按鈕應(yīng)該看起來像是一個(gè)按鈕
設(shè)計(jì)按鈕時(shí)，最重要的規(guī)則是要使其足夠突出，因此不會(huì)與其他信息按鈕混淆。

由上圖可見，通過從按鈕中刪除元素，按鈕的可操作性逐漸消失，它變成了簡(jiǎn)單的裝飾/文字
好的設(shè)計(jì)是符合用戶的認(rèn)知習(xí)慣的我們習(xí)慣了通常與動(dòng)作相關(guān)的某些形狀和形式。我們的按鈕看起來越類似于按鈕相關(guān)特征越好，這就是為什么矩形（或圓角矩形）始終是按鈕最安全的選擇原因。

該元素將被立即標(biāo)識(shí)為按鈕
用戶無(wú)法識(shí)別其他形狀或形式的設(shè)計(jì)，比如三角形、圓形、無(wú)規(guī)律圖形等。慎用此類的設(shè)計(jì)，只有在特殊場(chǎng)景或整體視覺風(fēng)格要求極大的突破性、創(chuàng)新性時(shí)才使用這樣的設(shè)計(jì)。

這些設(shè)計(jì)仍需要更多的時(shí)間被識(shí)別為可操作性的元素
按鈕元素的拆解在設(shè)計(jì)按鈕時(shí)，請(qǐng)記住這些元素中的每一項(xiàng)，并明智的選擇它們。以設(shè)計(jì)規(guī)范和產(chǎn)品調(diào)性為基礎(chǔ)，考慮哪種按鈕的設(shè)計(jì)風(fēng)格更適合我們的產(chǎn)品并合理的運(yùn)用到更多界面設(shè)計(jì)中去。


可以借助網(wǎng)格來設(shè)置填充和安全區(qū)域的值。在上面的例子中，右邊內(nèi)部邊距是垂直間距的兩倍，這是提高可讀性的安全選擇。
間距和對(duì)齊按鈕間距不對(duì)稱是所有界面中最常見的問題之一，仔細(xì)觀察按鈕標(biāo)簽是否在水平和垂直方向上居中展示。


除了網(wǎng)格的方法外，還可使用大寫字母W確保一種安全的按鈕間距的方法，如果按鈕標(biāo)簽的上下邊距至少有1W的空間，你的設(shè)計(jì)是OK的，在左右邊距上最好使用2x W來提升可讀性。

切記，不要忘記按鈕的安全空間，如果你有一組按鈕，那么每一個(gè)按鈕的安全空間應(yīng)該是不重疊的。


合適的大小
網(wǎng)頁(yè)和移動(dòng)端的設(shè)計(jì)都有最小的可點(diǎn)擊尺寸，如果你的按鈕設(shè)計(jì)太小，將很難單擊或點(diǎn)擊它們，這將會(huì)給用戶帶來負(fù)面的情緒，甚至卸載你的產(chǎn)品。最好的方法是在移動(dòng)端設(shè)計(jì)上所有的交互式元素的尺寸最小不低于44*44。


在移動(dòng)端設(shè)計(jì)中按鈕最小尺寸為：48*48，在基于光標(biāo)的設(shè)備中，最小按鈕的尺寸為：32*32。切記按鈕越大，操作的便利性越高。
好的實(shí)踐
按鈕也可以與icon搭配一起使用，結(jié)算的按鈕可以使用購(gòu)物車icon增強(qiáng)識(shí)別性，但是一定要有“結(jié)算”一詞。


在按鈕中的文本后面加上一個(gè)向右的箭頭，識(shí)別性更強(qiáng)。按鈕的引導(dǎo)性更強(qiáng)。


陰影可以使按鈕的操作性更強(qiáng)，比平面按鈕更加突出。在按鈕中添加一個(gè)微妙的陰影，使它從背景中脫引而出。關(guān)于按鈕陰影的設(shè)計(jì)稍后討論。


圓角

圓角比矩形按鈕更為友好和正面。但是，與此同時(shí)，圍繞著圓角的設(shè)計(jì)變得更加困難。如果你在按鈕上方保留對(duì)齊的文本，則圓角越圓，則該文本在視覺上將越少越合適。它是你感覺好像左邊空白處在同一直線上。



對(duì)齊圖標(biāo)

在按鈕上進(jìn)行較好的圖標(biāo)對(duì)齊是最困難的事情。在許多情況下，字體粗細(xì)和圖標(biāo)的粗細(xì)之間的關(guān)系直接影響它們。但是，有一條簡(jiǎn)單而有用的規(guī)則在大多數(shù)情況下都適用。


根據(jù)我們的圓角半徑，我們創(chuàng)建一個(gè)圓或是正方形，其大小等于按鈕的高度。在其中，我們創(chuàng)建另一個(gè)形狀來容納icon。它與我們的文字高度相同。然后，將圖標(biāo)放置在較小的形狀內(nèi)。
如果是人字形，最好使高度與字高相同，并且你還可以根據(jù)字體高度檢查線寬。匹配越緊密，最終的按鈕效果越好。
邊緣平衡如果你使用的是圓角按鈕，請(qǐng)記住將正確的圓角比率與屏幕上的其他元素對(duì)齊。切記對(duì)所有內(nèi)容使用相同的值會(huì)在邊界上造成不平衡感。

此處的對(duì)角線間距與垂直和底部的對(duì)角線間距相同。這樣可以得到更好的外緣處理。

對(duì)角線間距比邊間距大（左）和?。ㄓ遥?。這導(dǎo)致邊緣太突出，把焦點(diǎn)從按鈕本身轉(zhuǎn)移開。

摘要

當(dāng)你開始設(shè)計(jì)主按鈕、輔助按鈕、三級(jí)按鈕時(shí)，請(qǐng)記住每次都要針對(duì)幾個(gè)因素進(jìn)行檢查，即使是很小的不一致或不對(duì)齊等都會(huì)導(dǎo)致轉(zhuǎn)化率降低。
有了按鈕轉(zhuǎn)化和點(diǎn)擊就很重要了。
切記：

  • 使你的按鈕看起來像是一個(gè)按鈕
  • 使標(biāo)簽垂直和水平居中
  • 按鈕內(nèi)部有足夠的間距
  • 如果你使用圖標(biāo)，請(qǐng)正確使用尺寸和保持對(duì)齊
  • 根據(jù)使用按鈕的位置設(shè)置邊框的圓角
  • 檢查圓角半徑是否與其他界面設(shè)計(jì)相匹配
  • 保持按鈕的合適尺寸，但按鈕尺寸越大，越易點(diǎn)擊和識(shí)別


原文地址：
https://uxdesign.cc/design-better-buttons-a5c90a113280

作者：Michal Malewic

譯者：haselina

相關(guān)精彩：讓我們談?wù)勑聰M態(tài)和可訪問性
圖標(biāo)設(shè)計(jì)的7大原則

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定