整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

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

          讀:按鈕是界面中最基礎(chǔ)的元素之一,一個個按鈕承載著一個個操作指令,響應(yīng)用戶各類操作行為,傳達(dá)用戶的種種業(yè)務(wù)訴求。B端業(yè)務(wù)龐大而復(fù)雜,不同的場景使用的按鈕不同,同一流程不同狀態(tài)下的按鈕也不同,甚至同一模塊在不同顯示設(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ù)自身的實際項目去定義和使用不同按鈕。

          在我們團(tuán)隊的實際項目中,依據(jù)按鈕視覺重量的不同,將按鈕分為一級按鈕(主按鈕)、二級按鈕(次按鈕、虛線按鈕)、三級按鈕(文字按鈕)、四級按鈕(圖標(biāo)按鈕),在強(qiáng)調(diào)屬性的重要程度上隨級別增加遞減。在實際的項目場景中,根據(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)品使用體驗的提升是有很大的幫助的。

          這里的圓角不僅僅局限于按鈕,推而廣之適用產(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ā)重視用戶體驗的今天,按鈕的loading狀態(tài)也越來越多的運(yùn)用在產(chǎn)品的各種場景中。

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

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

          3.1 按鈕寬度尺寸

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

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

          3.2 按鈕大小

          實際項目需求中,不同場景用到的按鈕大小(按鈕的高度)也會有所不同。在我們的項目中我們將通用按鈕劃分為大(large)、正常(normal)、小(small)、超小(extra 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),給用戶以實時操作反饋。

          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é)流程”意義的操作。

          3.5 一個按鈕區(qū)一個主按鈕

          一個模塊的按鈕區(qū)最好只有一個主按鈕,否則會對用戶造成疑惑,“到底哪一個是主要流程?”,對模塊主流程功能造成干擾。

          一個模塊的按鈕區(qū)可以沒有主按鈕,在日常場景中,經(jīng)常會遇到一個模塊中幾個分支流程重要程度都是平級的,此時則不需要主按鈕。若非要安排一個主按鈕則會讓使用者產(chǎn)生困惑,造成流程層級混亂。

          3.6 按鈕的排列

          最常見且疑問當(dāng)屬“取消按鈕在左邊還是右邊”,Micrisoft、Apple、Google三家操作系統(tǒng)巨頭給出的方案各不相同,可見不管哪種方案,只要能在系統(tǒng)中保證統(tǒng)一性,都是可以被用戶所接受的。

          在我們團(tuán)隊的項目中定義了這樣一個“靠邊原則”,既按鈕區(qū)在左側(cè)時,優(yōu)先級別高的按鈕落在左側(cè);按鈕區(qū)在右側(cè)時,優(yōu)先級別高的按鈕落在右側(cè)。按鈕位于中間位置時,引導(dǎo)操作的按鈕統(tǒng)一在右側(cè)。

          3.7 按鈕響應(yīng)式規(guī)則

          按鈕區(qū)的按鈕較多且頁面空間有限時,就需要“折疊”部分按鈕,來優(yōu)雅的展示按鈕區(qū)效果。當(dāng)模塊寬度變窄,空間不足于完全放得下全部按鈕式,此時統(tǒng)一采用靠右“折疊”,部分按鈕隱藏在“…”按鈕中,鼠標(biāo)交互時再展示出來,用交互換得更大空間。

          參考鏈接:

          https://www.zcool.com.cn/article/ZMTEyNzczMg==.html

          https://www.zcool.com.cn/article/ZMTA2NDY2OA==.html

          https://www.zcool.com.cn/article/ZMTI2MzUwMA==.html

          本文由@小梗果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

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

          文中我們對CSS超炫加載動畫設(shè)計、實現(xiàn)與實例進(jìn)行了講解與說明,通過學(xué)習(xí)可知使用CSS提供的animation屬性及偽元素等可以實現(xiàn)精美的CSS動畫效果的設(shè)計與開發(fā)。本文我們將繼續(xù)介紹CSS在Web頁面元素設(shè)計中的應(yīng)用。

          純CSS實現(xiàn)開關(guān)元素設(shè)計


          按鈕開關(guān)設(shè)計要求及效果

          本例我們使用CSS完成開關(guān)的設(shè)計,主要要求是在點擊開關(guān)時開關(guān)標(biāo)識顏色需要改變,另外需要體現(xiàn)出元素點擊前與點擊后的動態(tài)變化與立體效果。本例最終設(shè)計呈現(xiàn)效果描述如下圖所示:

          開關(guān)按鈕實現(xiàn)效果展示


          設(shè)計思路與語法說明

          要實現(xiàn)如上圖所示的開關(guān)按鈕效果,需要針對元素改變鼠標(biāo)點擊前后的CSS樣式,因為只使用CSS實現(xiàn),我們選擇本身具有點擊屬性的INPUT元素。因此還需要考慮對INPUT元素外觀進(jìn)行設(shè)置,其設(shè)置也主要是依托于CSS選擇器及相關(guān)屬性的設(shè)置。

          CSS選擇器及屬性設(shè)置

          另一方面本例中出現(xiàn)的開關(guān)標(biāo)志,主要使用第三方字體庫提供的圖標(biāo)實現(xiàn),因此需要對font相關(guān)屬性及CSS外部link方法有所學(xué)習(xí)掌握。本例所使用字體如下所示:

          字體圖標(biāo)

          在明確基本思路之后,我們可以使用submine進(jìn)行代碼編寫,主要編寫步驟如下:

          1、鏈接字體樣式

          本例使用如上圖所示提供的on圖標(biāo),即Font Awesome圖標(biāo)字體庫和CSS框架,因此需要外部鏈接或者下載相應(yīng)CSS文件,這里我們選擇外部鏈接,通過使用CSS提供的link,實現(xiàn)代碼如下:

          字體鏈接

          鏈接完成之后我們在設(shè)置字體時可直接使用FontAwesome字體,其中on圖標(biāo)對應(yīng)的編碼為f011。

          2、定義頁面內(nèi)容

          本例頁面內(nèi)容主要使用input元素checkbox屬性進(jìn)行按鈕設(shè)置。因此頁面內(nèi)容部分定義如下所示:

          頁面主體部分

          3、定義checkbox樣式

          在完成頁面元素添加之后就需要對頁面元素進(jìn)行CSS樣式的設(shè)置,本例通過元素加type屬性作為選擇器,選擇指定元素并進(jìn)行樣式設(shè)置。代碼如下:

          checkbox屬性設(shè)置

          checkbox屬性設(shè)置描述如上圖所示,設(shè)置效果如下:

          checkbox屬性效果

          4、input添加checked、after等樣式

          為進(jìn)一步實現(xiàn)點擊效果切換及圖標(biāo)按鈕的效果,需要對check狀態(tài)及after偽元素進(jìn)行CSS樣式的設(shè)置。其中after為元素主要用于在上圖中添加on開關(guān)圖標(biāo)。實現(xiàn)代碼描述如下:

          after偽元素選擇器及樣式設(shè)置

          after偽元素選擇器及樣式設(shè)置如上圖所示,主要完成content內(nèi)容即on圖標(biāo)設(shè)置,字體選擇、字體顏色及字體大小設(shè)置,設(shè)置完成預(yù)覽效果如下:

          after為元素設(shè)置效果

          要實現(xiàn)點擊效果就需要在點擊之后對input元素樣式進(jìn)行設(shè)置,因此我們使用checked作為選擇器對該狀態(tài)下input樣式進(jìn)行設(shè)置。設(shè)置代碼如下所示:

          checked狀態(tài)CSS設(shè)置

          checked狀態(tài)CSS設(shè)置如上圖所示,我們只對box-shadow陰影進(jìn)行設(shè)置,通過陰影變化實現(xiàn)按鈕動態(tài)效果。

          5、點擊之后on圖標(biāo)顏色變化

          點擊之后on圖標(biāo)顏色變化主要通過對input[type="checkbox"]:checked,進(jìn)一步使用after偽元素定義字體顏色實現(xiàn)。實現(xiàn)代碼如下所示:

          on圖標(biāo)(字體)顏色改變

          通過使用該選擇器,會在input點擊之后,on字體顏色變?yōu)榧t色。以上給出了input按鈕效果實現(xiàn)的基本思路與部分核心實現(xiàn)代碼。如需完整案例代碼請關(guān)注并私信作者。


          本頭條號長期關(guān)注編程資訊分享;編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯誤、建議與意見,可在評論區(qū)回復(fù)。更多程序設(shè)計相關(guān)教程及實例分享,期待大家關(guān)注與閱讀!

          為大家介紹使用 CSS 來制作按鈕。


          基本按鈕樣式

          默認(rèn)按鈕 CSS 按鈕

          CSS 實例

          .button {

          background-color: #4CAF50; /* Green */

          border: none;

          color: white;

          padding: 15px 32px;

          text-align: center;

          text-decoration: none;

          display: inline-block;

          font-size: 16px;

          }


          按鈕顏色

          GreenBlueRedGrayBlack

          我們可以使用 background-color 屬性來設(shè)置按鈕顏色:

          CSS 實例

          .button1 {background-color: #4CAF50;} /* Green */

          .button2 {background-color: #008CBA;} /* Blue */

          .button3 {background-color: #f44336;} /* Red */

          .button4 {background-color: #e7e7e7; color: black;} /* Gray */

          .button5 {background-color: #555555;} /* Black */

          嘗試一下 ?


          按鈕大小

          10px12px16px20px24px

          我們可以使用 font-size 屬性來設(shè)置按鈕大小:

          CSS 實例

          .button1 {font-size: 10px;}

          .button2 {font-size: 12px;}

          .button3 {font-size: 16px;}

          .button4 {font-size: 20px;}

          .button5 {font-size: 24px;}


          圓角按鈕

          2px4px8px12px50%

          我們可以使用 border-radius 屬性來設(shè)置圓角按鈕:

          CSS 實例

          .button1 {border-radius: 2px;}

          .button2 {border-radius: 4px;}

          .button3 {border-radius: 8px;}

          .button4 {border-radius: 12px;}

          .button5 {border-radius: 50%;}

          嘗試一下 ?


          按鈕邊框顏色

          綠藍(lán)紅灰黑

          我們可以使用 border 屬性設(shè)置按鈕邊框顏色:

          CSS 實例

          .button1 {

          background-color: white;

          color: black;

          border: 2px solid #4CAF50; /* Green */

          }

          ...

          嘗試一下 ?


          鼠標(biāo)懸停按鈕

          綠藍(lán)紅灰黑

          綠藍(lán)紅灰黑

          我們可以使用 :hover 選擇器來修改鼠標(biāo)懸停在按鈕上的樣式。

          提示: 我們可以使用 transition-duration 屬性來設(shè)置 "hover" 效果的速度:

          CSS 實例

          .button {

          -webkit-transition-duration: 0.4s; /* Safari */

          transition-duration: 0.4s;

          }

          .button:hover {

          background-color: #4CAF50; /* Green */

          color: white;

          }

          ...


          按鈕陰影

          陰影按鈕鼠標(biāo)懸停后顯示陰影

          我們可以使用 box-shadow 屬性來為按鈕添加陰影:

          CSS 實例

          .button1 {

          box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

          }

          .button2:hover {

          box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

          }

          嘗試一下 ?


          禁用按鈕

          正常按鈕禁用按鈕

          我們可以使用 opacity 屬性為按鈕添加透明度 (看起來類似 "disabled" 屬性效果)。

          提示: 我么可以添加 cursor 屬性并設(shè)置為 "not-allowed" 來設(shè)置一個禁用的圖片:

          CSS 實例

          .disabled {

          opacity: 0.6;

          cursor: not-allowed;

          }

          嘗試一下 ?


          按鈕寬度

          250px

          50%100%

          默認(rèn)情況下,按鈕的大小有按鈕上的文本內(nèi)容決定( 根據(jù)文本內(nèi)容匹配長度 )。 我們可以使用 width 屬性來設(shè)置按鈕的寬度:

          提示: 如果要設(shè)置固定寬度可以使用像素 (px) 為單位,如果要設(shè)置響應(yīng)式的按鈕可以設(shè)置為百分比。

          CSS 實例

          .button1 {width: 250px;}

          .button2 {width: 50%;}

          .button3 {width: 100%;}

          嘗試一下 ?


          按鈕組

          ButtonButtonButtonButton

          移除外邊距并添加 float:left 來設(shè)置按鈕組:

          CSS 實例

          .button {

          float: left;

          }

          嘗試一下 ?


          帶邊框按鈕組

          ButtonButtonButtonButton

          我們可以使用 border 屬性來設(shè)置帶邊框的按鈕組:

          CSS 實例

          .button {

          float: left;

          border: 1px solid green

          }

          嘗試一下 ?


          按鈕動畫

          CSS 實例

          鼠標(biāo)移動到按鈕上后添加箭頭標(biāo)記:

          Hover

          嘗試一下 ?

          CSS 實例

          點擊時添加 "波紋" 效果:

          Click

          CSS 實例

          點擊時添加 "壓下" 效果:

          Click

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 中文乱码字幕高清一区二区| 蜜臀AV一区二区| 精品少妇人妻AV一区二区 | 国产一区二区在线观看| 国产精品第一区揄拍| 免费高清av一区二区三区| 免费一区二区三区在线视频| 成人精品视频一区二区三区| 日韩亚洲一区二区三区| 国产成人无码一区二区在线观看 | 亚洲精品色播一区二区| 大香伊蕉日本一区二区| asmr国产一区在线| 亚洲一区二区三区日本久久九| 亚洲一区二区三区深夜天堂| 精品国产一区二区三区免费看| 精品一区二区三区高清免费观看| 国产成人一区二区三区在线| 一本久久精品一区二区| 久久婷婷色综合一区二区| 日韩免费无码视频一区二区三区 | 国产高清视频一区二区| 精品一区二区三区免费视频| 亚洲天堂一区在线| 精品免费久久久久国产一区| 精品一区二区三区在线播放视频| 内射一区二区精品视频在线观看| 日韩电影一区二区三区| 精品一区二区三区四区电影| 一区二区三区视频在线| 北岛玲在线一区二区| 精品视频一区二区三区四区| 久久一区二区三区99| 亚洲AV网一区二区三区| 无码视频一区二区三区在线观看| 国产成人精品一区二三区| 日韩人妻无码一区二区三区99| 亚洲成a人一区二区三区| 亚洲日韩国产欧美一区二区三区 | 日韩精品无码一区二区三区| 精品少妇一区二区三区在线|