【4Large-Style】前端框架設計——Button 的設計思路

時間 2019-11-24

標籤 4Large-Style 前端框架設計 button 思路简体版

原文原文鏈接

Button 的設計

Button 做爲基本的 Web 元素，看似簡單，卻須要很是用心的設計，由於 Button 做爲按鈕，是具備多個不一樣的狀態，每種狀態都基本上須要進行一些特殊的優化設計，以讓組件更生動美觀。html

注：全部的長度單位均採用 rem 而非 px，須要在 html 標籤下設定 font-size 的 CSS 樣式，通常我都是設置：font-size:12px，1440 x 900 的分辨率，若是分辨率更高的話，能夠本身調整。固然你改寫成 px 做爲度量衡也是 OK 的。前端

　Example:

　Button的幾種狀態：

　　咱們設計 Button 的樣式，基本按照如下幾個狀態來設計：web

　　:focus - 當按鈕獲取焦點（能夠是 JS 控制獲取焦點，也能夠是用 Tab 鍵一個一個切換從而得到焦點）
　　:hover - 當鼠標處於懸停狀態時
　　:active - 當按鈕處於點擊狀態時（按下但尚未放手的狀況下）
　　:active:hover - 當按鈕處於點擊，且鼠標依然懸停的狀況下（好比你按下去，可是鼠標還不放手，而後把鼠標拖拽着挪開按鈕，此時就會出現這個狀態的反例）
　　:active:focus - 當按鈕處於點擊且獲取焦點的狀況（這個狀況的反例我也不知道反例應該怎麼舉）
　　正常狀態，這我就不用解釋了。
　　.focus - 經過 class 設置的獲取焦點狀態
　　.active - 經過 class 設置的點擊狀態

　Button 的狀態變化

　　咱們先來梳理一下，Button 對應不一樣的動做，所產生的相應的變化。chrome

　　正常狀態瀏覽器

　　　　┣ A：鼠標懸停 -> S：hover -> A：鼠標按下 -> S：active:hover/:active:focus(*) -> A：鼠標移開 -> S：active/:active:focus(*) ->A：鼠標鬆開 -> S：focus框架

　　　　┗ A：Tab 選中 -> S：focus -> A：空格按下 -> S：active:focus -> A：Tab 移開焦點 -> S：active -> A：空格鬆開 -> S：focus佈局

　　注: A = Action , S = Status學習

　　這邊值得注意的是我打星號的位置： A：鼠標按下 -> S：active:hover/:active:focus(*) -> A：鼠標移開 -> S：active/:active:focus(*) ，這個位置有點特別，不一樣的瀏覽器有不一樣的實現效果：測試

- 　　Chrome：在 CSS 文件中，active:hover 跟 active:focus 定義的順序會影響到上面這個步驟的實現，定義在後的會優先顯示給用戶（距離用戶越近），好比給按鈕定義了以下的 CSS 效果：
- ```
 1 .btn-default:active:focus {
 2     color: #000;
 3     background-color: #eeeeee;
 4     border-color: #000000;
 5 }
 6 
 7 .btn-default:active:hover,
 8 .btn-default.active:hover{
 9     color: #000;
10     background-color: #e6e6e6;
11     border-color: #000000;
12 }
```
  那當咱們按下鼠標的時候，看到的是 hover 的 CSS 效果，可是若是定義的順序相反，鼠標按下之後，顯示的是 active:focus 的 CSS 樣式，若是是用空格鍵按下，也是這個規律，因此在 chrome 當中，鼠標按下（若鍵盤按下可是鼠標同時也懸停在上的話，狀況也是同樣），實際上是有三個狀態疊加而成，分別是 :active:hover+:active:focus+:active，當經過操做好比移除鼠標懸停再tab 鍵移除焦點（這些操做前提都是在鼠標按下或空格按下沒鬆手的狀況），那就會顯示 active的樣式，這一點弄明白了很重要。字體
- 　　Safari：不存在上述優先順序，空格鍵按下就是 active:focus，鼠標按下就是 active:hover，並且這兩個狀態是獨立的，不會層疊覆蓋，也就是說，在 safari 當中，只會有兩個樣式疊加，經過鼠標按下的就是 :active:hover+:active，經過鍵盤空格按下的，就是:active:focus+:active。
- 　　其餘瀏覽器我暫時還麼有測試。

　基礎樣式

　　咱們首先要來設計一個基礎的 Button 樣式，咱們能夠這樣子來作：
 1 .btn {
 2     display: inline-block; /*容許橫排佈局且支持設置寬高*/
 3     padding: 0.5rem 1rem; /*設置內邊距，避免文字直接貼在邊框上*/
 4     margin-bottom: 0; /*默認按鈕是緊貼外部容器的底部*/
 5     font-size: 1.2rem; /*文字大小*/
 6     font-weight: normal; /*正常字體*/
 7     line-height: 1.42857143; /*設置行高*/
 8     text-align: center; /*文字居中*/
 9     white-space: nowrap; /*強制文本在一行顯示，不容許換行*/
10     vertical-align: middle; /*垂直居中*/
11     cursor: pointer; /*設置鼠標懸停時的光標樣式*/
12     background-image: none; /*不設置背景圖*/
13     border: 0.1rem solid transparent; /*設置邊框樣式，但不設置顏色，顏色交由後續其餘類來配合設置*/
14     border-radius: 0.5rem; /*圓角*/
15 } 
　　作了這些設置之後呢，咱們的默認樣式按鈕就是這樣子了：

　　而後咱們再對 focus、hover 作一些設置：　
1 /*鼠標懸停*/
2 .btn:hover,
3 .btn.focus{
4     text-decoration: none;
5     -webkit-box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, .525); /*下陰影（兼容）*/
6     box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, .525); /*下陰影*/
7 }
　　這樣的效果是，當鼠標懸停增長一個下陰影，讓按鈕感受是浮起來，等待你按下意思，原本我是不打算把.focus 放入的，但願跟:focus 保持一致，可是後來想想，若是咱們都主動的設置了 focus 這個類的話，確定是但願它凸顯的，而不加入：focus 是由於，當兩個按鈕並排的時候，點選一個按鈕結束後會進入 :focus狀態，此時按鈕凸起，可是我若是想點擊另外一個按鈕，鼠標移動到第二個按鈕，第二個按鈕也會凸起，這時候就有兩個按鈕同時凸起，而後當按下第二個按鈕時因爲第一個按鈕會回到正常狀態，正常狀態下是不會有凸起而是平滑的，那兩個按鈕同時變化就會有兩個按鈕同時被按下的錯覺，這種感受就很不對了，而對於:focus 的狀態而言，咱們能夠經過等會兒要講的風格變化，經過顏色的變化凸顯來解決：　　

　　接着還要對 :active(.active)、:active:focus、:active:hover 三個狀態來作設置，設置一個內陰影，
/*鼠標按下且懸停、鍵盤空格按下且未鬆手*/
/*當空格按下沒有鬆手，直接用tab鍵切換焦點後，被按下的組件將一直保持按下即:active狀態*/
.btn:active:hover,
.btn:active:focus,
.btn:active,
.btn.active {
    background-image: none;
    -webkit-box-shadow: inset 0 0.2rem 0.2rem rgba(0, 0, 0, .525); /*內陰影（兼容）*/
    box-shadow: inset 0 0.2rem 0.2rem rgba(0, 0, 0, .525); /*內陰影*/
}
　　可以給人一種「按鈕被按下去」的感受：

　　我以爲這最須要作一個說明了，爲啥 active:focus 要設置內陰影，而 focus 不用呢？由於前者表明的意思是經過點擊後獲取焦點，後者則並無這條限制，因此當你用 Tab 鍵來讓按鈕獲取焦點的時候，天然不能表明按鈕被按下。因此要作一個區分。另外還有一點要作一個說明，那就是 active 也要作一樣的設置，由於咱們設置了 active:hover，會有一個問題，就是當咱們按下而且鼠標懸停在按鈕上的時候，纔會有內陰影，可是若是此刻你鼠標不懸停，而是「拖拽」着讓光標離開了這個按鈕，爲了要讓按鈕依舊保持被按下（由於你的鼠標此刻依舊處於按下的狀態沒鬆手），那 active 就要作相同的設置，不然按鈕會回到最初的狀態，那這樣就沒有被按下的那種直觀感受了。

　　最後咱們還要作一個基本設置：
1 /*去除鍵盤Tab選中、鼠標點擊時的邊框*/
2 .btn:focus,
3 .btn:active {
4     outline: 0;
5 }
　　由於一些瀏覽器，會默認的加上這個屬性，在你點擊按鈕時，會自動生成一個外邊框，這個外邊框我我的不喜，由於當個人組件是圓角矩形的時候，邊框依舊仍是直角矩形，這很是很差，超級難看，好比：

　　outline 不能設置爲圓角（除了火狐獨有這個屬性，但兼容性很差，因此不打算採用這個樣式），網上我看到其餘替代方案，是用 box-shadow 來模仿的，效果還能夠，可是一個 box 只能有一個 shadow，這樣就等於讓我放棄使用 box-shadow 因此最後我仍是不打算採用這種樣式，感受也不是很重要，就算沒有 outline 也能夠將按鈕經過添加一些顏色來使其很醒目。

　　同時咱們增長了.focus 和.active 兩個類樣式，這樣咱們就能夠經過設置 class 屬性，來讓咱們的按鈕主動的顯示聚焦或點擊的樣式了。

　　OK 了，這是最基本的樣式設計，兼容性穩穩的，不論哪一個瀏覽器，效果都是同樣的。當你看到「基礎」兩個字的時候，就應該知道，我們的文章，不可能就這麼完了，那多沒意思呀。

　　如今 CSS 都流行使用嵌套或覆蓋等手法，作一些多樣性的擴展，咱們固然也要追逐潮流啦。

　Button 的多樣化：

　　咱們設計 Button 的基礎模型，可是基礎模型依舊仍是很單調的，並且有不少狀態實際上是共用樣式，如何讓咱們的按鈕顯得更加生動呢？這就是咱們接下來要乾的活了。

　　咱們設計出如下7種風格以供選擇：

　　btn-default：
　　btn-inverse：
　　btn-primary：
　　btn-success：
　　btn-info：
　　btn-warning：
　　btn-danger：

　　看着是否是很眼熟呀？沒錯，3-7的風格取名字是參照 Bootstrap 的，畢竟 Bootstrap 已是很是流行的框架了，樹立了一種標準，咱們在設計樣式表的時候，若是能保持一致，那使用者使用的時候，就會下降不少重複學習的門檻，用起來也比較方便，而我本身最後加了1個風格：btn-inverse，由於我我的是黑白黨，很喜歡黑白風，並且有的場景使用這種比較嚴肅的配色也挺好。

　Default

　　咱們已經定義了 Button 的基礎樣式，如今咱們要定義的是風格狀態，定義風格狀態基本上只須要修改三個屬性：

color

background-color

border-color

　　而後咱們要根據以前說的，button 的不一樣狀態，來進行編寫，首先書寫正常狀態：
1 .btn-default {
2     color: #000;
3     background-color: #ffffff;
4     border-color: #000000;
5 }
　　而後在設計當鼠標懸停或者 tab 選中時的效果，同時還要加入，當咱們手動將按鈕設置爲 focus 狀態或設置了 active 狀態下的 focus 狀態，來保持狀態的一致性：
1 .btn-default:hover,
2 .btn-default:focus,
3 .btn-default.focus,
4 .btn-default.active:focus{
5     color: #000;
6     background-color: #ebebeb;
7     border-color: #000000;
8 }
　　接下來就是比較須要細心的部分了，這部分 hover 和 focus 是有定義前後順序的，咱們來設置當按鈕被按下後的樣式：
 1 .btn-default:active:focus {
 2     color: #000;
 3     background-color: #eeeeee;
 4     border-color: #000000;
 5 }
 6 
 7 .btn-default:active:hover,
 8 .btn-default.active:hover{
 9     color: #000;
10     background-color: #e6e6e6;
11     border-color: #000000;
12 }
13 
14 .btn-default:active,
15 .btn-default.active {
16     color: #000;
17     background-color: #ffffff;
18     border-color: #000000;
19 }
　　OK，最後效果就像這組按鈕同樣了，第二個是設置了active 狀態，第三個是設置了 focus 狀態。

　　好了，咱們基本上是按照這個範式來設計不一樣的風格便可，只須要簡單地調節一下顏色，基本上能夠理解爲按下的顏色爲最「深」，鼠標有懸停比沒懸停顏色更「深」，有焦點比沒焦點顏色更「深」，正常狀態下顏色最「淺」，這樣的一個思惟，再對比 Button 的不一樣狀態來設計就好了，而後細節上再作一些調整，搭配出一個你最喜歡的。

　　咱們最後再來設計一個，比較特殊的，就是黑色的按鈕（深色系按鈕也能夠參照這個邏輯）：

Inverse

　　深色系跟淺色系設計師不一樣的，爲何呢？實際上是由於咱們設計的基礎樣式的緣由，簡單的說，咱們基礎樣式裏，陰影是黑色的，若是咱們的按鈕背景是黑色，那內陰影就看不到了，天然是沒辦法識別出按鈕被按下的狀態，這個想像一下就應該能夠理解，因此咱們要作一些調整。

.btn-inverse {
    color: #ffffff;
    background-color: #000000;
    border-color: #404040;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse.focus,
.btn-inverse.active:focus {
    color: #ffffff;
    background-color: #282828;
    border-color: #404040;
}

.btn-inverse:active:focus {
    color: #ffffff;
    background-color: #383838;
    border-color: #000000;
}

.btn-inverse:active:hover,
.btn-inverse.active:hover {
    color: #ffffff;
    background-color: #4d4d4d;
    border-color: #000000;
}

/*調整內陰影爲白色，而且 Y 軸的位移改成"-"的，就是自下而上，內陰影的狀態也添加了幾種，你們能夠本身去調試看看效果，就知道爲何要加了*/
.btn-inverse:active:hover,
.btn-inverse.active:hover,
.btn-inverse:active:focus,
.btn-inverse:active,
.btn-inverse.active {
    -webkit-box-shadow: inset 0 -0.2rem 0.2rem rgba(255, 255, 255, 0.52); /*內陰影（兼容）*/
    box-shadow: inset 0 -0.2rem 0.2rem rgba(255, 255, 255, 0.52); /*內陰影*/
}

.btn-inverse:active,
.btn-inverse.active {
    color: #ffffff;
    background-color: #232323;
    border-color: #000000;
}

　　深色系的按鈕組件基本能夠參考這個模板來對色彩進行調配。值得關注的就是內陰影的狀態多了幾種，而且內陰影自身的屬性有一些變化，具體以下：

　　其實這沒有什麼很厲害的東西，前端設計，關鍵在於一個思路，如何把複雜繁多的樣式，經過一些抽象、分類的思想，逐漸的造成一個思路，再根據思路進行統一的，有條理的設計，這樣就可以保持總體風格一致的狀況下，靈活建立一些很棒的樣式，CSS還有不少內容，一篇文章說不完，有心得朋友應該能夠發現，我寫的樣式已經應用到了個人博客當中，我但願經過一點一點的努力，最終可以造成一套，屬於本身的框架。