黄色网站在线,中文人妻精品一区久久,国产真人一级a爱做片视频

搜索

APP

起點(diǎn)課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

B端設(shè)計組件：按鈕

小梗果

2021-07-07

5 評論 18714 瀏覽 250 收藏

16 分鐘

導(dǎo)讀：按鈕是界面中最基礎(chǔ)的元素之一，一個個按鈕承載著一個個操作指令，響應(yīng)用戶各類操作行為，傳達(dá)用戶的種種業(yè)務(wù)訴求。B端業(yè)務(wù)龐大而復(fù)雜，不同的場景使用的按鈕不同，同一流程不同狀態(tài)下的按鈕也不同，甚至同一模塊在不同顯示設(shè)備上按鈕也有所差異。下面是在實(shí)際工作中的關(guān)于按鈕的一些總結(jié)和思考，也希望能夠給讀者帶來一些新的思考。

一、按鈕類型

依據(jù)按鈕呈現(xiàn)的視覺重量差異，我們可以通過改變樣式將按鈕分為主按鈕、次按鈕、虛線按鈕、文字按鈕、圖標(biāo)按鈕5類。

1.1 主按鈕

在日常場景中，主按鈕是頁面中按鈕區(qū)最為核心的操作按鈕，通過使用主題色填充容器吸引用戶視線聚焦，引導(dǎo)用戶去關(guān)注、操作主流程，強(qiáng)調(diào)性較高。

常見有純文字、圖標(biāo)+文字兩種類型，5種不同狀態(tài)

1.2 次按鈕

次按鈕是在日常場景中運(yùn)用最廣泛的的一種按鈕，由此也被稱為默認(rèn)按鈕，視覺呈現(xiàn)上相較于主按鈕較“弱”。通常有描邊和文字組成的字線型、背景填充（中性色或較淺的主題色）和文字組成的字面型兩種，用于按鈕區(qū)沒有主次之分的平級按鈕，強(qiáng)調(diào)性中等。

常見有純文字、圖標(biāo)+文字兩種類型，5種不同狀態(tài)

1.3 虛線按鈕

虛線按鈕在日常場景中屬于低頻操作按鈕，容器內(nèi)只有簡單的虛線邊框，視覺上弱于次按鈕，常用于場景中的添加操作，強(qiáng)調(diào)性較低。

常見有純文字、圖標(biāo)+文字兩種類型，5種不同狀態(tài)

1.4 文字按鈕

文字按鈕在日常場景中的使用頻次也較高，文字按鈕常見也分為兩種：一種是各種狀態(tài)下容器邊界都是隱藏的，一種是在hover、press、active狀態(tài)下容器有背景色填充（較淺中性色）的。不管哪一種形式視覺感受都較弱，通常用于不太明顯的操作，強(qiáng)調(diào)性較低。

常見有純文字、圖標(biāo)+文字兩種類型，5種不同狀態(tài)

文字按鈕和鏈接的在默認(rèn)外觀上基本一致，甚至在有的項目中各種交互狀態(tài)也一致，比較難區(qū)分文字按鈕和鏈接。

在我們的團(tuán)隊項目中，文字按鈕和鏈接也做了不同的定義，鏈接在hover、press、active狀態(tài)下都有顯示下劃線，來告知用戶這是一個外部的鏈接；文字按鈕則在hover、press、active狀態(tài)下容器都會填充背景色。

1.5 圖標(biāo)按鈕

圖標(biāo)按鈕在日常場景中的使用頻次較高、也頗為高效，圖標(biāo)按鈕默認(rèn)狀態(tài)下容器在不可見，視覺感受也較弱，由于沒有文字，一些語義性不強(qiáng)的圖標(biāo)容易導(dǎo)致用戶理解的偏差，一般用在圖標(biāo)hover狀態(tài)下會出現(xiàn)Tooltip提示來解決此問題，圖標(biāo)按鈕的強(qiáng)調(diào)性也較低。

常見只有圖標(biāo)，5種不同狀態(tài)

綜上所述就是在B端項目中十分常見的五種按鈕，不同團(tuán)隊、不同項目都會根據(jù)自身的實(shí)際項目去定義和使用不同按鈕。

在我們團(tuán)隊的實(shí)際項目中，依據(jù)按鈕視覺重量的不同，將按鈕分為一級按鈕（主按鈕）、二級按鈕（次按鈕、虛線按鈕）、三級按鈕（文字按鈕）、四級按鈕（圖標(biāo)按鈕），在強(qiáng)調(diào)屬性的重要程度上隨級別增加遞減。在實(shí)際的項目場景中，根據(jù)不同需求的強(qiáng)調(diào)程度去選擇相應(yīng)級別的按鈕，有了這個準(zhǔn)則作為指導(dǎo)參考，大大降低了團(tuán)隊在選擇按鈕時的時間成本。

二、按鈕應(yīng)用細(xì)節(jié)

2.1 按鈕拆解

通過對一個按鈕的拆解，可以將按鈕分為容器、背景、圖標(biāo)、文本、描邊、圓角等基本元素，每種元素的視覺呈現(xiàn)都會反過來影響按鈕的外觀。不同風(fēng)格、不同氣質(zhì)的產(chǎn)品，需要相應(yīng)的處理的影響按鈕視覺呈現(xiàn)的各個元素。

2.2 按鈕圓角

圓角按鈕所帶來的不僅僅是圓角大小的視覺表現(xiàn)，更多是影響著用戶對整個產(chǎn)品整體認(rèn)知，以及用戶在使用產(chǎn)品過程中的具體感受。合理科學(xué)、適合產(chǎn)品氣質(zhì)特征、符合用戶預(yù)期和認(rèn)知的圓角元素，對整個產(chǎn)品使用體驗(yàn)的提升是有很大的幫助的。

這里的圓角不僅僅局限于按鈕，推而廣之適用產(chǎn)品中的每個元素，提前合理的規(guī)劃各種元素圓角，更會對整個產(chǎn)品的一致性大有裨益。

直角按鈕：棱角分明，四角垂直過渡，呈向外擴(kuò)張之勢，給人以尖銳、強(qiáng)烈，不易接近之感。

圓角按鈕：與直角相比，四角過渡較舒緩，呈向內(nèi)聚攏之勢，多給人以柔和、親近，平易好接觸之感。

多個直角按鈕近距離排列，由于直角的張力的存在，相鄰直角按鈕的間隔在視覺感受上被弱化，不像圓角按鈕那樣能更容易的區(qū)分、甄別每個按鈕。滿足產(chǎn)品需求的情況下，適當(dāng)?shù)膱A角按鈕較直角按鈕更合適。

當(dāng)然圓角也不是越大越好，相同尺寸的按鈕，圓角越大對在頁面中的視覺占比越小，操作的容易性越低。尤其在B端與下拉菜單進(jìn)行聯(lián)動時，也會受到大圓角（全圓角）的局限，使下拉菜單和按鈕的組合適配顯得比較突兀。

2.3?按鈕loading狀態(tài)

按鈕loading狀態(tài)算是一種較為特殊的狀態(tài)，指的是戶操作按鈕后在得到反饋前的一種臨時按鈕狀態(tài)，常與按鈕組合在一塊作為多態(tài)按鈕使用。

由于數(shù)據(jù)量大或者網(wǎng)速不穩(wěn)定頁面造成數(shù)據(jù)反饋會有一定的響應(yīng)加載時間，當(dāng)這個加載時間讓用戶有明顯的等待感知時，就需要一種反饋來告知用戶當(dāng)前正在進(jìn)行的狀態(tài)，防止用戶在不知情的情況下犯錯誤操作，一般會使用loading動畫來做這種反饋，不僅向用戶反映了系統(tǒng)的當(dāng)前狀態(tài)，適當(dāng)?shù)膭赢嬓Ч€能轉(zhuǎn)移用戶注意力，起到給用戶情緒降躁的效果。

按鈕的loading狀態(tài)則可以代替loading動畫，既起到了原來loading動畫的效果，又不會因頁面變動過大給用戶帶來不適。在越發(fā)重視用戶體驗(yàn)的今天，按鈕的loading狀態(tài)也越來越多的運(yùn)用在產(chǎn)品的各種場景中。

三、按鈕應(yīng)用技巧

通過以上對按鈕了解，應(yīng)該對按鈕有個大概的認(rèn)識，接下來就去看看在實(shí)際工作中是怎么制作按鈕。

3.1 按鈕寬度尺寸

在實(shí)際項目中應(yīng)用中，我們發(fā)現(xiàn)按鈕中的文本字?jǐn)?shù)≤4能夠滿足大多數(shù)場景。為保證大多數(shù)按鈕的長度一致，就需要在定制按鈕組件時給按鈕中的文字區(qū)域一個基準(zhǔn)寬度，當(dāng)文字的實(shí)際寬度大于基準(zhǔn)寬度時，按鈕的寬度隨著文字的實(shí)際寬度增加而增加；當(dāng)文字的實(shí)際寬度不大于基準(zhǔn)寬度時，按鈕的寬度就是文字的基準(zhǔn)寬度+左右padding值。

我們項目的網(wǎng)格基數(shù)是4px，基準(zhǔn)正常按鈕為96*32

3.2 按鈕大小

實(shí)際項目需求中，不同場景用到的按鈕大小（按鈕的高度）也會有所不同。在我們的項目中我們將通用按鈕劃分為大（large）、正常（normal）、?。╯mall）、超?。╡xtra small），按鈕高度分別對應(yīng)著36px、32px、24px、20px。

3.3 按鈕顏色

若品牌色定義了從淺到深不同層級的色階，可使用正常基準(zhǔn)色作為按鈕的normal顏色，相鄰的淺色階作為hover狀態(tài)下對應(yīng)的顏色，相鄰深色階作為press狀態(tài)下對應(yīng)的顏色。

我們項目中把“disabled”狀態(tài)的定義為了一個中性色，用“置灰”的形式來告訴用戶當(dāng)前狀態(tài)不可操作，而沒有選擇色階中的淺色。

如果沒有定義從淺到深的色階，在原來主題色的基礎(chǔ)上，則可以給hover狀態(tài)添加一個透明度為16%（#fff），給press狀態(tài)添加一個透明度16%（#000），給用戶以實(shí)時操作反饋。

3.4?按鈕區(qū)

按鈕區(qū)是指用于放置按鈕的區(qū)域，一個按鈕區(qū)內(nèi)可以有多個按鈕，按鈕區(qū)的位置應(yīng)該位于什么頁面的什么位置？參考眾多設(shè)計語言，我們認(rèn)為按鈕應(yīng)置于用戶的視覺瀏覽路徑中，便于被用戶發(fā)現(xiàn)，并且應(yīng)盡量靠近其所控制的對象。

結(jié)合經(jīng)典的“F”、“Z”網(wǎng)頁瀏覽模式作為基礎(chǔ)指導(dǎo)。我們將一個相對復(fù)雜模塊分為header、body、footer三個區(qū)域：header區(qū)域的按鈕區(qū)放置影響模塊全局的操作；body區(qū)域的按鈕區(qū)放置影響跟隨內(nèi)容的操作；footer區(qū)域的按鈕區(qū)放置具有“完結(jié)流程”意義的操作。