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

導(dǎo)讀：按鈕設(shè)計(jì)是用戶界面中主要的交互基石，按鈕作為引流，提升產(chǎn)品數(shù)據(jù)的重要節(jié)點(diǎn)，作為設(shè)計(jì)師必須對(duì)它的前世今生有一個(gè)很好的了解。如何把按鈕設(shè)計(jì)做到最好？文章對(duì)此展開了梳理分析，供大家一同參考學(xué)習(xí)。

01 按鈕交互的設(shè)計(jì)由來

為了設(shè)計(jì)合適的交互方式，我們需要回顧實(shí)體按鈕的發(fā)展歷史，作為UI組件之一的按鈕來源于實(shí)體按鈕，現(xiàn)在廣泛用于互聯(lián)網(wǎng)產(chǎn)品中。按鈕非常神奇，只需手指觸摸，就可以打開一個(gè)APP、啟動(dòng)汽車或者一個(gè)系統(tǒng)，即使用戶不懂背后的原理。

在《Power Button》這本書里，Rachel Plotnick研究了今天按鈕操作的文化起源，描述了按鈕成為互聯(lián)網(wǎng)產(chǎn)品的命令方式，可以實(shí)現(xiàn)毫不費(fèi)力控制。

“你只需按快門，其余的我們來做。”—柯達(dá)相機(jī)用抓人眼球的口號(hào)來吸引潛在的顧客。

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

02 按鈕與鏈接的區(qū)別

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

• 鏈接：用于導(dǎo)航到另一個(gè)位置，比如：“查看全部”頁面、跳轉(zhuǎn)另一個(gè)位置等。
• 按鈕：用于實(shí)現(xiàn)一個(gè)操作，比如：提交、合并、新建和上傳等。

03 按鈕的多種狀態(tài)

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

• 普通狀態(tài)：可交互和可用的狀態(tài)。
• 焦點(diǎn)狀態(tài)：用戶使用鍵盤或其他輸入方法來突出顯示一個(gè)元素。
• 懸停狀態(tài)：用戶把光標(biāo)置于可交互元素上的狀態(tài)。
• 觸發(fā)狀態(tài)：用戶已點(diǎn)擊按鈕后的狀態(tài)。
• 加載狀態(tài)：當(dāng)操作沒有立即實(shí)現(xiàn)時(shí)，表示正在進(jìn)行的狀態(tài)。
• 禁用狀態(tài)：按鈕目前不可交互，但以后可以使用。

04 按鈕的多種樣式

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

05 不同樣式的優(yōu)先級(jí)

樣式最初是用來區(qū)分操作的優(yōu)秀級(jí)。明確操作的優(yōu)先級(jí)，可以在眾多的選擇前，引導(dǎo)用戶。通常，要有一個(gè)突出的按鈕（主按鈕），幾個(gè)二級(jí)按鈕，還有三級(jí)按鈕。

06 有時(shí)不需要默認(rèn)按鈕

通常，把最常用的按鈕設(shè)置為“默認(rèn)”（使用主樣式）和選中的狀態(tài)。這樣可以幫助大多數(shù)用戶，更快完成他們的任務(wù)，引導(dǎo)正確的方向。

此外，當(dāng)選擇同等重要時(shí)，或者操作存在危險(xiǎn)，在這些情況中，需要用戶明確按鈕的選擇而不是意外選擇。

07 別讓用戶思考

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

不要對(duì)可交互和不可交互的元素，使用相同的色彩。如果可交互和不可交互的元素，使用相同的色彩，會(huì)讓用戶不知道點(diǎn)擊哪里。

08 一致性提高效率和準(zhǔn)確性

“一致性是最有力的可用性原則之一：當(dāng)元素一直都是統(tǒng)一的樣式，用戶就不必?fù)?dān)心突發(fā)事件?！?— Jakob Nielsen

一致性提高速度和準(zhǔn)確性，避免錯(cuò)誤。創(chuàng)建可預(yù)測(cè)性可以幫助用戶獲得掌控感，在產(chǎn)品中實(shí)現(xiàn)他們的目標(biāo)。在創(chuàng)建主要、二級(jí)和三級(jí)樣式時(shí)，嘗試找到一些共同的元素，比如：色彩、形狀等。嘗試不僅對(duì)設(shè)計(jì)的系統(tǒng)保持一致性，對(duì)平臺(tái)也要保持一致性。

09 按鈕的交互熱區(qū)尺寸

按鍵應(yīng)該是一個(gè)簡(jiǎn)單的任務(wù)，如果用戶點(diǎn)擊按鈕失敗，或者誤點(diǎn)到了旁邊的元素，會(huì)導(dǎo)致不好的體驗(yàn)和浪費(fèi)時(shí)間。

對(duì)于大多數(shù)平臺(tái)，觸屏的區(qū)域至少為48x48dp。交互熱區(qū)的尺寸應(yīng)該是至少9mm，不論屏幕的大小。推薦的觸屏元素的尺寸，至少為7-10mm。

對(duì)于icon按鈕，確認(rèn)交互熱區(qū)大于元素的視覺邊緣。這點(diǎn)不僅適用于手機(jī)或平板，同樣的推薦尺寸也適用于對(duì)于網(wǎng)頁的點(diǎn)擊設(shè)備，比如鼠標(biāo)。

10 按鈕的可用性

所有組件都應(yīng)該注意設(shè)計(jì)的可用性。交互熱區(qū)是影響可用性的一個(gè)因素，其他因素還有字體大小、色彩和對(duì)比。許多工具可以幫助你輕松檢查組件設(shè)計(jì)的實(shí)現(xiàn)效果。

設(shè)計(jì)師應(yīng)該和開發(fā)團(tuán)隊(duì)緊密合作，以確保按鈕的正常使用。按鈕作為一個(gè)可點(diǎn)擊的元素，在用戶觸發(fā)時(shí)，給予反饋。用戶通過按鈕這個(gè)元素，可以實(shí)現(xiàn)交互控制。

11 按鈕的交互手勢(shì)

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

12 按鈕的文案

按鈕文案和樣式一樣重要。使用錯(cuò)誤的文案，會(huì)讓用戶困惑，浪費(fèi)時(shí)間，也會(huì)誤操作。

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

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

13 按鈕的位置

確認(rèn)和取消的按鈕，哪個(gè)放在右邊，設(shè)計(jì)師們因此而爭(zhēng)論不休。

• 確認(rèn)按鈕放在左邊，符合正常的閱讀順序。如果我們知道用戶最可能的選擇，可以幫助用戶節(jié)省時(shí)間。Windows系統(tǒng)將確認(rèn)的按鈕放在左邊。
• 確認(rèn)按鈕放在右邊，優(yōu)化流程。將確認(rèn)按鈕放在右邊，可以幫助用戶在操作前，評(píng)估所有的選擇，避免錯(cuò)誤和沖動(dòng)決策。蘋果系統(tǒng)將確認(rèn)按鈕放在右邊。

兩個(gè)選擇都有理由，并且也不會(huì)造成使用困難。我個(gè)人傾向于放在右邊，在活動(dòng)列表或者對(duì)話框，可能因?yàn)槲页Ｓ肕ac系統(tǒng)。

14 按鈕的禁用設(shè)計(jì)

每個(gè)人都遇到過禁用按鈕，被困在當(dāng)前頁面幾秒鐘或幾分鐘，嘗試弄清楚為什么禁用按鈕妨礙了當(dāng)前進(jìn)程，然后要怎樣重新開始。禁用狀態(tài)提示組件當(dāng)前不可交互，但是以后可以。為什么使用禁用按鈕呢？因?yàn)槿绻麖脑瓉淼奈恢蒙弦瞥粹o，或者在上層用內(nèi)容覆蓋掉按鈕，會(huì)給用戶帶來困惑。

我建議，避免使用禁用按鈕。最好讓按鈕永遠(yuǎn)可以使用，如果用戶沒有提供必要的信息，只需高亮強(qiáng)調(diào)空白的輸入?yún)^(qū)域，或者提醒用戶。

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

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

原作者：Taras Bakusevych

譯者：Bravert；公眾號(hào)：彩云譯設(shè)計(jì)

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

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