国产女人乱人伦精品一区二区 ,久久日韩乱码一二三四区别,久久精品午夜福利

為了設計合適的交互方式，我們需要回顧實體按鈕的發展歷史，作為UI組件之一的按鈕來源于實體按鈕，現在廣泛用于互聯網產品中。按鈕非常神奇，只需手指觸摸，就可以打開一個APP、啟動汽車或者一個系統，即使用戶不懂背后的原理。在《Power Button》這本書里，Rachel Plotnick研究了今天按鈕操作的文化起源，描述了按鈕成為互聯網產品的命令方式，可以實現毫不費力控制。

“你只需按快門，其余的我們來做。”—柯達相機用抓人眼球的口號來吸引潛在的顧客。

這正是迄今為止，按鈕吸引用戶的地方，只需簡單的觸摸，就能獲得處理事件的滿足感。即使很多新家電和其他設備都進化為了觸屏操作，實體按鈕卻并沒有完全消失，其塑造的行為習慣仍然影響按鈕設計的直觀性和易用性。

按鈕與鏈接的區別

按鈕傳達了用戶可以執行的操作，它們通常在UI界面中，比如：對話框、表單、工具欄等。區分按鈕和鏈接特別重要：

鏈接：用于導航到另一個位置，比如：“查看全部”頁面、跳轉另一個位置等。

按鈕：用于實現一個操作，比如：提交、合并、新建和上傳等。

按鈕的多種狀態

設計正確的交互和樣式，對按鈕設計十分重要。按鈕每個狀態必須可識別，要顯著區別于其他狀態和周圍的布局，但是也不能完全改變組件或者制造視覺混亂。

普通狀態：可交互和可用的狀態。

焦點狀態：用戶使用鍵盤或其他輸入方法來突出顯示一個元素。

懸停狀態：用戶把光標置于可交互元素上的狀態。

觸發狀態：用戶已點擊按鈕后的狀態。

加載狀態：當操作沒有立即實現時，表示正在進行的狀態。

禁用狀態：按鈕目前不可交互，但以后可以使用。

按鈕的多種樣式

最常見的是圓角按鈕，可以輕易識別，并且在輸入字段旁邊看起來不錯。為按鈕選擇正確的樣式，取決于目的、平臺和規范。以下是一些最流行的樣式：

不同樣式的優先級

樣式最初是用來區分操作的優秀級。明確操作的優先級，可以在眾多的選擇前，引導用戶。通常，要有一個突出的按鈕（主按鈕），幾個二級按鈕，還有三級按鈕。

有時不需要默認按鈕

通常，把最常用的按鈕設置為“默認”（使用主樣式）和選中的狀態。這樣可以幫助大多數用戶，更快完成他們的任務，引導正確的方向。

此外，當選擇同等重要時，或者操作存在危險，在這些情況中，需要用戶明確按鈕的選擇而不是意外選擇。

別讓用戶思考

Don’t make me think（別讓用戶思考）是可用性工程師Steve Krug所著的書的名字（中文《點石成金：訪客至上的網頁設計秘笈》）。其中指出，觸屏是為了讓界面更明顯，而不是讓用戶產生困惑?；诙嗄晔褂貌煌脑O備和其他產品，用戶養成了對按鈕外觀和功能的特定期待。如果和“標準”按鈕的樣式差別太大，就會讓用戶遲疑和困惑。

不要對可交互和不可交互的元素，使用相同的色彩。如果可交互和不可交互的元素，使用相同的色彩，會讓用戶不知道點擊哪里。

一致性提高效率和準確性

“一致性是最有力的可用性原則之一：當元素一直都是統一的樣式，用戶就不必擔心突發事件。” — Jakob Nielsen

一致性提高速度和準確性，避免錯誤。創建可預測性可以幫助用戶獲得掌控感，在產品中實現他們的目標。在創建主要、二級和三級樣式時，嘗試找到一些共同的元素，比如：色彩、形狀等。嘗試不僅對設計的系統保持一致性，對平臺也要保持一致性。

按鈕的交互熱區尺寸

按鍵應該是一個簡單的任務，如果用戶點擊按鈕失敗，或者誤點到了旁邊的元素，會導致不好的體驗和浪費時間。

對于大多數平臺，觸屏的區域至少為48x48dp。交互熱區的尺寸應該是至少9mm，不論屏幕的大小。推薦的觸屏元素的尺寸，至少為7-10mm。

對于icon按鈕，確認交互熱區大于元素的視覺邊緣。這點不僅適用于手機或平板，同樣的推薦尺寸也適用于對于網頁的點擊設備，比如鼠標。

按鈕的可用性

所有組件都應該注意設計的可用性。交互熱區是影響可用性的一個因素，其他因素還有字體大小、色彩和對比。許多工具可以幫助你輕松檢查組件設計的實現效果。

設計師應該和開發團隊緊密合作，以確保按鈕的正常使用。按鈕作為一個可點擊的元素，在用戶觸發時，給予反饋。用戶通過按鈕這個元素，可以實現交互控制。

按鈕的交互手勢

通過手勢操作，用戶可以和APP進行交互。觸摸作為實現操作的另一種方式，可以節省時間，獲得觸覺的掌控感。雖然一些手勢，比如滑動引出相關的操作、雙擊點贊或長按，現在越來越廣泛地使用，但對于普通用戶，這些手勢不太明顯。建議使用手勢作為替代的方案，供高級用戶使用。

按鈕的文案

按鈕文案和樣式一樣重要。使用錯誤的文案，會讓用戶困惑，浪費時間，也會誤操作。

一個好的按鈕文案，可以引導用戶操作。最好使用動詞，告訴用戶在做什么。就像這個按鈕在詢問用戶，“你想收藏嗎？”或者“你想確認命令嗎？”

避免使用“是”或“不”，或者太通用的，比如提交。

按鈕的位置

確認和取消的按鈕，哪個放在右邊，設計師們因此而爭論不休。

確認按鈕放在左邊，符合正常的閱讀順序。如果我們知道用戶最可能的選擇，可以幫助用戶節省時間。Windows系統將確認的按鈕放在左邊。
確認按鈕放在右邊，優化流程。將確認按鈕放在右邊，可以幫助用戶在操作前，評估所有的選擇，避免錯誤和沖動決策。蘋果系統將確認按鈕放在右邊。

兩個選擇都有理由，并且也不會造成使用困難。我個人傾向于放在右邊，在活動列表或者對話框，可能因為我常用Mac系統。

按鈕的禁用設計

每個人都遇到過禁用按鈕，被困在當前頁面幾秒鐘或幾分鐘，嘗試弄清楚為什么禁用按鈕妨礙了當前進程，然后要怎樣重新開始。禁用狀態提示組件當前不可交互，但是以后可以。為什么使用禁用按鈕呢？因為如果從原來的位置上移除按鈕，或者在上層用內容覆蓋掉按鈕，會給用戶帶來困惑。

我建議，避免使用禁用按鈕。最好讓按鈕永遠可以使用，如果用戶沒有提供必要的信息，只需高亮強調空白的輸入區域，或者提醒用戶。

ps：material design中懸浮按鈕、拖拽狀態，可以了解一下

原文鏈接 | https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

來源 | 彩云譯設計（id:caiyunyisheji）
本文原作者 | Taras Bakusevych
本文譯者 | Bravert

如何讓按鈕設計的更迷人

sj33cn — Wed, 10 Jul 2019 01:31:14 +0000

按鈕的不同分類如下：

* 動作按鈕

* 常用按鈕樣式

* 按鈕的顏色和形狀

* 按鈕狀態和反饋

* 標簽按鈕

* 觸摸屏按鈕

* 按鈕的位置

* 系統按鈕

* 總結

動作按鈕

我們將分析按鈕的層次結構和它們通信的語言。雖然有些按鈕通熟易懂，但按鈕操作不取決于它們的外觀，而是取決于用戶的行為。

1_1.行為召喚（CTA / C2A）

在設計中行為召喚按鈕通常會提示用戶注冊/立即購買等。在產品設計中如果強烈建議用戶應該做的事情應該使用CTA按鈕。

行為召喚按鈕

對于CTA按鈕，我喜歡使用圓形按鈕，這樣會更引人注目。

1_2.主要操作按鈕

雖然CTA按鈕和主按鈕看起來相同，但我喜歡將它們分開。主按鈕應該是一個強大的視覺指示器，可以幫助用戶完成他們的旅程。主按鈕應該在用戶可能想要“下一步”、“完成”、“開始”等的情況下使用。

主要操作按鈕

對于主要操作，我喜歡使用實心按鈕。

1_3.次要操作按鈕

從“返回”的輔助按鈕到“下一步”的主按鈕，或從“編輯”的輔助按鈕到“保存”的主按鈕。輔助按鈕是我們為用戶提供的主要操作的備選方案。

主按鈕旁邊的輔助按鈕的兩種設計

我更傾向于使用線性按鈕或文本鏈接作為輔助按鈕。

1_4.三級按鈕

三級按鈕通常用于其他操作，可能暫時不是用戶想要做的事情。比如“添加朋友”、“掃一掃”、“編輯”或“刪除”之類的內容，前提是它們不是主要操作。

不同形式的三級按鈕

一般來說，人們會使用較小或較不突出的按鈕樣式。

常用按鈕樣式

下面我們將介紹常見的按鈕樣式，不同風格的按鈕樣式和他們的使用技巧。

2_1.實心按鈕

實心按鈕是帶有實心填充的按鈕。

一個實心按鈕

2_2.線性和幽靈按鈕

線性按鈕和實心按鈕正好相反，一個沒有填充的按鈕 – 只是一個輪廓。雖然經常互換使用，但我更喜歡將線性按鈕視為淺色（在白底下按鈕的輪廓和文本顏色深一點更明顯），將幽靈按鈕視為深色（在黑底下按鈕的輪廓和文本顏色淺一點更明顯）。

線性按鈕（左）和幽靈按鈕（右）

2_3.圓形按鈕

圓形按鈕其邊緣設置為最大圓角半徑。

圓形按鈕

2_4.FAB（懸浮按鈕）

懸浮按鈕是一種巧妙的設計模式，Google Material Design中更加受歡迎。雖然它們可能看起來像一個圖標按鈕，但實際上它們用在屏幕上的主要操作按鈕。

一個懸浮按鈕

如果您想了解有關FAB的更多信息，我建議您在Material Design的網站上查看( https://material.io/design/components/buttons-floating-action-button.html )

2_5.文字鏈接

文本鏈接是一種非常簡單的按鈕類型。有幾種不同的方式可以表明它是一個鏈接。它可以是顏色/下劃線/鏈接的文本，甚至就是文本本身（例如“閱讀更多”）。

文本鏈接的不同樣式

在顏色方面，大多數網站使用藍色，因為它是最容易識別的。為什么文本鏈接的顏色會使用藍色？它一直追溯到是萬維網的發明者，在他選擇顏色時發現藍色很酷的一種顏色，即使是色盲的人通常也能看到它。

2_6.帶圖標的標簽按鈕

圖標按鈕越來越受歡迎，一些按鈕仍然需要一個標簽來確保按鈕的語意明了。

帶圖標的標簽按鈕

處理圖標和標簽時最棘手的事情是弄清楚字體組合的圖標有多大。

方法1：讓圖標的大小對齊字體的頂線。

方法2：讓圖標的大小對齊字體的行高。需要注意的是確保圖標和字體的組合視覺均衡。

2_7.圖標按鈕

圖標按鈕沒有標簽，只是一個圖標。因為它們沒有標簽，所以它們在界面中節省了大量空間。圖標按鈕還可以將其他圖標按鈕一起排列在它們的小空間中。

圖標按鈕具有不同的風格

如果你在為計算機認知度較低的人群設計產品時，我建議使用帶標簽的按鈕 – 尤其是那些很抽象的語意。

2_8.帶圖標的文本鏈接

某些文本鏈接可能帶有圖標。這些通常不會在正文中使用。

各種帶圖標的文本鏈接

按鈕的顏色和形狀

在設計按鈕時，需要考慮以下幾個不同的元素。

3_1.顏色

在設計產品時，你應該要考慮有視覺障礙的人。為確保每個人都可以訪問你的顏色，你可以使用在線對比度檢查器。我使用的是那個。( https://accessible-colors.com/ )

不同顏色的按鈕

另外，在選擇顏色時應該考慮色彩心理學。紅色按鈕多用于刪除，黃色按鈕多用于警示等。

“刪除”、“警告”、“保存”和“更多”按鈕

3_2.邊界半徑

邊界半徑為按鈕提供了很多個性化設計。具有更圓半徑的按鈕看起來更有趣。

不同邊界半徑設置的按鈕

3_3.投影

按鈕上的投影使按鈕更加自然引人注意。陰影也可用于指示不同的狀態。 ( https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通過使按鈕在懸停狀態下來達到這個效果。

不同陰影設置的按鈕

3_4.標簽樣式

標簽樣式歸結為字體以及閱讀的容易程度。選擇字體時，請確保它清晰可辨。

不同標簽樣式的按鈕

以下是一些簡單的方法可以讓字體清晰易讀：

* 選擇大寫的標簽或大標題。（Material Design使用過帶有大寫標簽的按鈕。）

* 確保標簽顏色與按鈕填充對比較為突出。您可以使用( http://accessible-colors.com/ ) 查看。始終確保您的顏色符合AAA要求。

* 選擇字體時，請確保字體清晰。

3_5.垂直內間距

按鈕的大小對界面的可訪問性起著很大的作用。大多數沒有經驗的設計師會說“按鈕的高度應該是36像素”。如果你是為產品系統的設計按鈕。你應該采用所用字體的行高，并在其中添加一定單位的內間距。例如：“我的按鈕標簽的行高為20px，垂直內間距為8px”。

不同垂直內間距的按鈕

為什么會這樣設定呢？這里有兩個原因：

1）有視覺障礙的人可能會增大瀏覽器中的字體，因此他們需要更改字體大小而不會將按鈕高度定死。

2）這也是開發人員創建按鈕的方式-他們在DIV容器中添加內間距，而不是固定高度。

3_6.水平內間距

有兩種方法可以接近水平內間距。

第一個方法：

使按鈕寬度與網格對齊。這是保持所有按鈕長度一致的好方法。但是它限制了你可以使用的字體數量。

寬度由網格決定的按鈕

第二個方法：

兩側有固定內間距。我通常還會定按鈕最小寬度，雖然避免了很窄的按鈕，但是最小寬度按鈕可容納的不同字段會讓按鈕看上去不是很均勻。

寬度由內間距和標簽長度決定的按鈕

按鈕狀態和反饋

按鈕狀態讓用戶知道他們是否可以點擊、已經點擊或已成功點擊。按鈕還可以有重疊的狀態。例如可以同時是“點擊”和“懸停”狀態。

4_1.點擊和禁用狀態

點擊狀態就是鼠標可以點擊按下按鈕的狀態，當然如果用戶沒有完成必要的步驟，按鈕可以被禁用。例如用戶沒有輸入他們的姓名和電子郵件地址，他們就不能提交他們的詳細信息。

點擊和禁用按鈕

4_2.懸停和懸停離開（鼠標懸停和鼠標懸停離開）

在PC端按鈕應具有不同的狀態，讓用戶知道它是可點擊的。通常“懸停”狀態和“懸停離開”狀態相反，但也不一定。你應該有效的區分讓用戶感知鼠標懸停在某個按鈕上。

懸停演示按鈕

平板電腦和移動設備上永遠不會出現懸停狀態，因為你的手指無法“懸停”。如果您正在為應用程序進行設計，請不要擔心此狀態。

4_3.焦點

焦點狀態可能會讓用戶困惑。如果你的用戶專注度較差，他們可能需要使用選項卡式導航。用戶將點擊“選項卡”在網站上移動，從一個導航鏈接移動到下一個。這意味著按鈕需要有一個“焦點”狀態才能顯示它是“可點擊的或尚未點擊”。

默認的焦點狀態是藍色“發光”，幸運的是，我們生活在一個可以自定義按鈕狀態的時代。大多數設計師對懸停和焦點狀態使用相同的視覺提示。

兩個不同“焦點”狀態的例子

4_4.按下

按下狀態是當用戶的光標或手指“按住”按鈕時的狀態。當用戶將手指或光標“釋放”在按鈕上時，該按鈕會指示為“已點擊”。

“按下”狀態的按鈕

4_5.點擊

按鈕需要“點擊”狀態以向用戶指示它已被點擊。

“點擊”狀態的按鈕

按鈕標簽

按鈕標簽的訣竅是一致性。我們在產品設計前期需要制定按鈕標簽的規范，以避免以后花更多時間去改變你所有的按鈕標簽。

5_1.動詞的用法

大多數按鈕都包含指示按鈕將執行什么操作，例如“保存”、“發布”、“編輯”。雖然“back”和“next”不是動詞，但在接口上下文中，它們的工作方式似乎相同。我喜歡在編寫按鈕標簽時使用“動詞”+“名詞”結構，這會讓操作更具規定性，例如“保存文章”等，而不是“保存”。

5_2.案例

你還應該決定使用哪種字體大小寫。以下是我使用的一些規范：

所有大寫字母，例如“NEXT SECTION”，我把它們用于更專業的平臺。Material Design使用所有大寫字母的按鈕。

標題框，例如“Next Section”，我傾向于避免使用標題大小寫，因為它不像句子大小寫那樣容易閱讀。就語調而言，我認為它介于“專業”和“會話”之間。

句子大小寫，例如“Next section”，我把它們用于更“友好”或“對話”的平臺。它更像是一句話，正常我們一句話結束會加一個句號，但是為了設計的美感，請不要加一個句號。

小寫，例如“next section”，小寫按鈕標簽使用頻率較低。

5_3.一致性

為按鈕編寫標簽時，請確保一致性。以下是一些我在項目使用的指導原則：

選擇字數：每個按鈕一個、兩個或多個字

選擇大小寫：句子大小寫，或大寫，或標題大小寫，或小寫

標簽結構：如“動詞”+“名詞”，或“動詞”等。

觸摸屏按鈕

桌面按鈕大小調整（單擊）

因為桌面上的光標比觸摸屏上的手指小，所以您可以將按鈕縮小很多。

觸摸屏按鈕尺寸（點擊）

麻省理工學院觸摸實驗室的研究表明，人在使用觸摸屏時手指部分是8-10毫米，如果你想避免用戶手指觸摸錯誤，最小目標尺寸需要10毫米或更大。如上所述-我需要較大的按鈕。

那么，你應該做多大尺寸的按鈕呢？專家們說的是：

Material Design建議接觸目標應為48dp x 48dp，不同接觸點之間距為8dp。

雖然我找不到關于iOS設計系統目標尺寸的任何文檔，但一般的理解是，它的最小目標尺寸是44 x 44磅。

如果您在設計大小尺寸方面遇到困難，我強烈推薦Zac Dickerson關于易用性的故事。

按鈕位置

如果你非要放置2個按鈕，主按鈕應放在哪一側？

主要和次要按鈕的兩種不同立場

選項A顯示左側為主按鈕。它可能是用戶首先想要看到的，所以先顯示它。

選項B顯示右側為主按鈕。我們希望用戶首先看到輔助按鈕，方便他們繼續完成他們的旅程。右側的按鈕也表示繼續。

系統按鈕

這里會介紹一些很酷的設計原則和系統。我喜歡Material Design System的按鈕，因為他們的原理是經過深思熟慮的。

Material Design System的按鈕

Material Design 按鈕圖片

Material Design中介紹了按鈕的操作，以及按鈕如何與系統中的其他組件交互。我喜歡用戶在觸摸屏上使用按鈕的交互方式。

查看按鈕部分：

https://material.io/design/components/buttons.html

懸浮按鈕在這里查看：

https://material.io/design/components/buttons-floating-action-button.html

總結

如果沒有按鈕，你就不能真正構建界面；我們應該更多的關注它們。了解按鈕在界面中是如何設計的？怎樣正確的使用按鈕并為你的用戶提供最佳的體驗？

原文地址：UX Collective

譯文地址：水手哥學設計（公眾號）

作者：Tess Gadd

譯者：水手哥