中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

導(dǎo)語(yǔ)：按鈕是 UI 設(shè)計(jì)中最重要但仍被忽略的 UI 元素之一，了解按鈕設(shè)計(jì)有十分必要的意義，本篇文章作者將按鈕解剖并進(jìn)行解析，通過(guò)快速并可操作性極高的五個(gè)黃金法則，重點(diǎn)介紹了提升按鈕設(shè)計(jì)的技巧。讓我們一起來(lái)跟隨作者進(jìn)行學(xué)習(xí)，并將理論付諸于實(shí)踐，讓自己的按鈕煥然一新！

經(jīng)過(guò) “設(shè)計(jì)用戶界面” 一章，我們?nèi)媪私饬?UI 設(shè)計(jì)的所需的所有基礎(chǔ)知識(shí)并啟動(dòng)了我們的 APP 項(xiàng)目，是時(shí)候深入探討最重要之一卻一直被忽略的 UI 元素了。之前，我已經(jīng)在一些更詳細(xì)的文章中介紹了按鈕，但是這次，我想重點(diǎn)介紹快速、可操作的技巧，你可以立即使用它們來(lái) 提升項(xiàng)目的質(zhì)量。

一、什么是按鈕？

按鈕是 一個(gè)具有明確指示動(dòng)作的交互元件。例如，如果按鈕上顯示 “立即支付”，則單擊它可能會(huì)要求你提供信用卡詳細(xì)信息。

在 UI 設(shè)計(jì)中，按鈕是必不可少的，因?yàn)榇蠖鄶?shù)界面都需要我們采取某種行為才能繼續(xù)。無(wú)論是保存，審核還是下載內(nèi)容等操作，按鈕無(wú)處不在。使用按鈕可以做更多的事情，接下來(lái)我將闡述五個(gè)簡(jiǎn)單的步驟更好地來(lái)設(shè)計(jì)按鈕，要注意，他們雖簡(jiǎn)單，但卻非常重要。

按鈕具有幾個(gè)定義特征：

一個(gè)典型的按鈕具有 填充，邊框和 陰影 這幾個(gè)屬性。對(duì)于距離而言，它們有一個(gè)內(nèi)邊距和一個(gè)外邊距，這是我們按鈕的安全空間。

通過(guò)設(shè)置 圓角值，按鈕的形狀可以變成尖銳的或完全圓潤(rùn)的角。按鈕上的標(biāo)簽通常是 文本，有時(shí)可能會(huì)帶有 圖標(biāo)。向按鈕添加一個(gè)向右的V形圖標(biāo)，將增加頁(yè)面轉(zhuǎn)換率（>）。標(biāo)簽文本由字重，顏色和字體樣式定義。

現(xiàn)在你已經(jīng)了解了基礎(chǔ)知識(shí)，接下來(lái)，我將提出改善按鈕設(shè)計(jì)的 五個(gè)黃金法則：

二、五個(gè)黃金法則

1. 按鈕看起來(lái)必須像一個(gè)按鈕

我們習(xí)慣于現(xiàn)實(shí)世界中的按鈕是矩形（有時(shí)是圓形）。如果我們?cè)O(shè)計(jì)中的按鈕形狀既不是矩形也不是圓形（也不是圓形矩形），很可能讓用戶感到迷惑。

這就是為什么即使現(xiàn)在的 UI 按鈕幾乎完全扁平，但擬物化設(shè)計(jì)實(shí)際上仍然存在于數(shù)字化界面中。用戶界面上的按鈕仍然需要看起來(lái)像電視遙控器上的按鈕。

具有 “有機(jī)的形狀”，圓點(diǎn)作為按鈕將不起作用。三角形和六角形也將耗費(fèi)用戶更長(zhǎng)的時(shí)間來(lái)將它們認(rèn)知為按鈕，甚至有些用戶可能永遠(yuǎn)不會(huì)發(fā)現(xiàn)界面的按鈕。

如果你不想以矩形或圓形作為主要按鈕形狀，則可以選擇使用 帶下劃線的文本鏈接。如果不確定顏色，則深藍(lán)色通常是最佳選項(xiàng)。

我們已經(jīng)習(xí)慣性認(rèn)知，帶下劃線的文字是一個(gè)鏈接，Google搜索頁(yè)每天都在加強(qiáng)我們的這一心理模型。

2. 尺寸

在現(xiàn)實(shí)生活中，你是否曾經(jīng)需要先找到一根針來(lái)確保按下超小型復(fù)位按鈕來(lái)重置電子設(shè)備？這樣的設(shè)計(jì)是有目的的，因?yàn)檫@樣就可以避免在不注意的情況下重置設(shè)備。

但是假設(shè)在界面中所有按鈕都這么小，這將讓它們難以使用。按鈕應(yīng)足夠大以便用戶舒適地使用它們，但是需要有多大？

在觸屏?xí)r代，我們通常通過(guò)相對(duì)于 屏幕密度的典型指尖尺寸來(lái)進(jìn)行測(cè)量。按鈕為 44-48px 尺寸的正方形會(huì)讓我們感到舒適。某些應(yīng)用程序（例如 Tinder ）嘗試將其行動(dòng)按鈕放大 50px（高度），也取得了不錯(cuò)的效果。顯然，按鈕的尺寸不能超出這個(gè)范圍太多，但是在 50-60px 的范圍內(nèi)還是值得一試的。

在為 PC 端設(shè)計(jì)時(shí)，我們可以將按鈕縮小一些，因?yàn)槭髽?biāo)光標(biāo)更精確，但一定不要太小。我們?nèi)?需要保證用戶可以很容易地將鼠標(biāo)指向按鈕，因此最小的按鈕應(yīng)設(shè)為 32px 左右。

3. 對(duì)齊就是一切！

所有UI中最大的視覺(jué)問(wèn)題是 按鈕標(biāo)簽文本無(wú)法對(duì)齊。雖然大多數(shù)設(shè)計(jì)人員和開(kāi)發(fā)人員設(shè)法將其水平居中，但很少 將每個(gè)按鈕都能都垂直居中。

大寫(xiě)標(biāo)簽顯然更容易居中，但是在同時(shí)使用大小寫(xiě)字母時(shí)，最好堅(jiān)持使用基線對(duì)齊（或僅將其與首個(gè)大寫(xiě)字母對(duì)齊，而忽略降序的 y，j 和 g 字母）。

按鈕大小和字體大小適配性也很重要。如果你有一個(gè) 32px 的按鈕和 17px 的文本，則無(wú)法將其完美地放在中間，需要調(diào)整其中一個(gè)使之互相適應(yīng)。

4. 在陰影上下功夫

陰影可以幫助一個(gè)對(duì)象在背景上突出顯示出來(lái)，并幫助用戶將其識(shí)別為 可單擊或需點(diǎn)擊的對(duì)象。因?yàn)殛幱皶?huì)讓按鈕看起來(lái)比背景距離遠(yuǎn)，用戶自然就會(huì)明白，可以將其按下。

為了使按鈕看起來(lái)更友好，可以在陰影顏色中添加背景色。在上面的示例中，陰影是藍(lán)色的一種混和色。應(yīng) 避免使用深色和對(duì)比鮮明的陰影，因?yàn)榧幢氵@種陰影吸引到了用戶的注意力，但看起來(lái)過(guò)于尖銳令人不快，就很容易丟 失掉用戶的注意力。

5. 易讀的標(biāo)簽文字

按鈕標(biāo)簽文字需要居中，但它們還需要 足夠的呼吸空間以使其易讀。避免按鈕周?chē)奈淖譀](méi)有空格。規(guī)則是在標(biāo)簽上方和下方空出標(biāo)簽字體中的 “大寫(xiě)字母 W 的間距”。側(cè)面空出 “兩個(gè)大寫(xiě)字母 W 的距離”。

當(dāng)然，按鈕可以在上述間距的基礎(chǔ)上更寬，因?yàn)槟莻€(gè)標(biāo)準(zhǔn)只是讓它是看起來(lái)既美觀又易讀的最小尺寸。

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

作者：Michal Malewicz

原文：https://uxdesign.cc/5-tips-for-better-button-design-8d68f0418f0e

譯者：劉昱茜；審核：吳鵬飛、張聿彤；編輯：孫淑雅

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

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