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

編輯導(dǎo)語：按鈕設(shè)計是產(chǎn)品設(shè)計中的必要模塊，合理的按鈕設(shè)計可以讓用戶有更清晰的認知，一定程度上提升用戶的產(chǎn)品使用體驗。本篇文章里，作者便對按鈕結(jié)構(gòu)、按鈕狀態(tài)、按鈕開發(fā)對接技巧等方面做了總結(jié)，一起來看一下。

按鈕是每個產(chǎn)品設(shè)計當(dāng)中必備的交互元素，可以說是整個Ixd設(shè)計當(dāng)中最為重要的一環(huán)。

在現(xiàn)實世界當(dāng)中，出現(xiàn)的各種各樣的物理按鈕也成為了界面設(shè)計當(dāng)中按鈕的映射，讓我們?nèi)ダ斫饨换ピO(shè)計當(dāng)中的按鈕降低了理解的成本。那么今天我為大家分享一下有關(guān)交互設(shè)計當(dāng)中按鈕的經(jīng)驗。

一、什么是按鈕

1. 追本溯源

按鈕從字面解釋來看，可拆解為“按”與“鈕”兩部分。

“按”即為用手或手指壓動作；“鈕”的含義就比較有意思，在東方文化中“鈕”本意指印章上用來系綬帶凸起的部分，引申指物件的機鍵、中心部分。西方文化中“button”指帶有信息的徽章，比如古代帶有家族信息用來蠟封的徽章戒指。

2. 現(xiàn)實中的含義

按鈕（百科）是一種開關(guān)，用來控制機械或程序的某些功能。一般而言，紅色按鈕是用來使某一功能停止，而綠色按鈕，則通?？砷_始某一項功能。

3. 交互設(shè)計中的含義

按鈕（百科），是程序或網(wǎng)頁常用的一個控件。在程序中，按鈕是最常用的用于觸發(fā)事件的控件，也可以開始，中斷，結(jié)束一個進程。

綜上結(jié)論，在交互設(shè)計當(dāng)中，按鈕是界面之上最具有儀式感的存在，沒有之一（綜上“按鈕定義”與“按鈕釋義”的概念總結(jié)源于Hozin的表單課程）。

二、按鈕的結(jié)構(gòu)

1. 圖標：按鈕含義的圖形化表達。
2. 文字標簽：按鈕含義的文字化表達。
3. 圓角：決定按鈕視覺感受的元素。
4. 背景：決定按鈕視覺感受的元素，改變顏色能夠表示按鈕的狀態(tài)。
5. 容器：按鈕的載體。
6. 邊框：明確的按鈕的大小與邊界。

通過對按鈕六大要素的不同組合，就可以得到不同種類的按鈕類型，例如主按鈕、標準按鈕、幽靈按鈕、文字按鈕等，從而來適配不同產(chǎn)品不同業(yè)務(wù)場景下對按鈕的類型需求。

三、按鈕的狀態(tài)

按鈕狀態(tài)，即當(dāng)下按鈕所處的操作狀態(tài)，它可以幫助用戶去判斷當(dāng)下按鈕處在：正常狀態(tài)（Normal）、聚焦狀態(tài)（Focus）、懸停狀態(tài)（Hover）、激活狀態(tài)（Active）、禁用狀態(tài)（Disabled）當(dāng)中的哪一種。

1. 正常狀態(tài)

正常狀態(tài)，用戶在日常使用產(chǎn)品中最常接觸到的一種按鈕狀態(tài)，也是設(shè)計師在工作中對按鈕主要的設(shè)計形態(tài)。表示該按鈕可交互的，并且已經(jīng)啟用。

2. 聚焦狀態(tài)

聚焦狀態(tài)，主要用于展示當(dāng)前電腦光標所在的具體位置。這種狀態(tài)對于一些剛?cè)胄械脑O(shè)計師比較容易遺漏。

它的作用是當(dāng)用戶不用鼠標操作時，也可以用Tab按鍵或者方向鍵去頁面進行訪問。現(xiàn)在相當(dāng)多的產(chǎn)品幾乎都去掉了該種狀態(tài)，造成產(chǎn)品可用性大大降低。

3. 懸停狀態(tài)

懸停狀態(tài)，出現(xiàn)在鼠標指針在按鈕處停留，該按鈕發(fā)出的特殊反饋。該狀態(tài)在桌面端產(chǎn)品中出現(xiàn)，移動端交互形態(tài)中無此狀態(tài)，故不必考慮。

一般的做法是在亮色的按鈕上，疊加一層10%的黑色蒙層。

4. 激活狀態(tài)

激活狀態(tài)，當(dāng)用戶按下按鈕時出現(xiàn)該狀態(tài)，其顏色由淺變深。一般的做法是在亮色的按鈕上，疊加一層20%的黑色蒙層。

5. 禁用狀態(tài)

禁用狀態(tài)，當(dāng)表單信息沒有填寫完整，或者沒有達到某類條件時，按鈕所表現(xiàn)出來的不可點擊的形態(tài)。無論web還是app很多場景都會用到該狀態(tài)。

但是個人意見來看，如果可以的話，我建議避免使用禁用按鈕。最好可以一直啟用，如果用戶沒有滿足觸發(fā)的條件時，只需要在條件處高亮提示，或者顯示通知即可。對于“按鈕為什么不可至灰”在Hozin表單課程中詳細講解。

6. 特別提醒

這里很多朋友提出按鈕似乎還有一個加載狀態(tài)是需要考慮的，但是就我個人意見按鈕加載狀態(tài)不應(yīng)該算在按鈕基本狀態(tài)當(dāng)中，甚至不太提倡這種設(shè)計，因為此種做法會用戶感到困惑。

例如下圖：

加載態(tài)按鈕設(shè)計會讓用戶感到存在兩種可能性：

1. 這種狀態(tài)是因為輸入搜索信息后數(shù)據(jù)處在加載中嗎？
2. 這種狀態(tài)是因為網(wǎng)絡(luò)問題造成按鈕這個組件處在加載中嗎？

四、與開發(fā)對接小技巧

相信工作中很多小伙伴在按鈕的設(shè)計還原當(dāng)中會碰到如上圖所示這樣的問題。明明自己標注時很清楚，開發(fā)還原起來會有很大的問題，這里其實有個關(guān)于padding的思維。

1. Padding的概念

Padding簡單的可以理解為屬性定義元素邊框與元素內(nèi)容之間的空間。

對于前端同學(xué)來說同一系列的按鈕最好可以有相同的padding值。這樣更有利于項目的開發(fā)與維護。所以我們在設(shè)計時更應(yīng)該對于規(guī)范有預(yù)先的判斷與規(guī)劃。

2. 最小Padding值

一般習(xí)慣于把4個字的寬度定為文字標簽的最小寬度。

舉個例子，我們按鈕內(nèi)文字大小為12px，左右的padding值分別為24px，那么按鈕的最小寬度=12*4+24+24=96px，方便前端進行CSS開發(fā)。

3. 其他事項

在我們的設(shè)計軟件中，按鈕邊框有三種，內(nèi)邊框、居中邊框、外邊框，默認為居中；但是在前端的CSS代碼中沒有居中邊框，如果需要調(diào)整為外邊框，需要跟前端小哥特別提醒。

五、結(jié)語

按鈕是Ixd設(shè)計中作為一個最基礎(chǔ)的元素，但是在整個設(shè)計體系中，它一直都扮演著一個十分重要的位置。就跟開頭講的，在交互設(shè)計當(dāng)中，按鈕是界面之上最具有儀式感的存在，沒有之一，通過我的分享可以為大家避開設(shè)計當(dāng)中的坑。

作者：月亮月六便士；公眾號：月亮體驗設(shè)計坊

本文由 @月亮與六便士 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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