Vue指令：v-bind動態屬性綁定

. v-bind:指令認識和基本使用

上一小節的學習,讓我們理解以v開頭的指令后面跟的將是表達式,同樣標簽也有一些合法的標簽屬性.如果想將這些屬性的值變為表達式,我們可以使用Vue提供的v-bind:指令.

1.1 v-bind 指令基本使用

v-bind:指令會將普通屬性的值變為表達值,比如

<div id="app">
    <!-- 使用v-bind指令 -->
    <!-- 添加v-bind綁定以后,className將不在是一個字符串,而是一個變量,data數據的中className -->
    <div v-bind:class="className">你好</div>

    <!-- 未使用v-bind指令 -->
    <div class="className">Hello</div>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            className:"box"
        }
    })

</script>

顯示結果

通過示例顯示的結果就了解

未使用v-bind指令的class屬性的值是一個字符串,表示給標簽添加一個className的類名

使用v-bind指令的class屬性值不在是字符串,而是表達式, 表達式里的className不是一個普通的字符,而是一個變量,Vue實例data屬性中的數據

1.2 簡寫方式

Vue 對于v-bind指令還提供了簡寫方式,如下

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

對于v-bind指令的認識和基本使用,我們已經了解了,
那么接下來就看看v-bind使用過程中的一些問題和注意項

2. vue 屬性的動態綁定

通過上面的學習,我們知道,v-bind 指令可以讓我們將屬性值關聯到Vuedata數據中,這樣的屬性,我們稱作為屬性的動態綁定
屬性的動態綁定比較符合vue以數據為驅動的模式,如果需要修改那個屬性值,就可以直接通過修改Vue數據即可,
例如,項目中的輪播就像輪播圖中的數據, 在替換輪播數據的時候就會非常方便

來個例子: 動態改變顯示圖片

<div id="app">
    <img :src="src" alt="">
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            src: "./images/12.png" 
        }
    })
</script>

這個時候我們只需要改變數據里的src的值,圖片就會發生變化

vm.src ="./images/13.jpg"

注意:
動態屬性綁定, 在我們需要的時候在使用,如果一個屬性的是是固定的,
并不會在未來發生改變, 就沒有必要動態綁定屬性.

但在屬性動態綁定過程中有兩個屬性比較特殊, 這兩個屬性就是class 和style屬性,

在將 v-bind 用于 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。

接下來好好研究研究

3 動態綁定class屬性

3.1 動態綁定class的基本使用

3.1.1 動態綁定class與普通class屬性對比

動態綁定class 就是使用v-bind指令來綁定, 一但使用v-bind指令后,class屬性的值不在是一個字符串,而是一個表達式,

比如未使用動態綁定示例:

<h2 class="msg">Hello World</h2>

未使用 v-bind指令動態綁定屬性時, class的值就是字符串, 上例中h2有一個類名,類名是msg

使用了動態綁定示例:

<h2 v-bind:class="msg">Hello World</h2>

<!-- 可以簡寫為-->
<h2 :class="msg">Hello World</h2>

如果使用動態綁定指令, 那么此時class后面的引號不在是字符串,而是一個JavaScript表達式, msg也就成為了一個變量,因此此時h2標簽的類名不是字符串msg, 而是數據中msg中的值

示例:

<div id="app">
    <!-- 未使用動態綁定的class屬性 -->
    <div class="msg">hello world</div>

    <!-- 使用v-bind 動態綁定class屬性 -->
    <div :class="msg">你好! Vue</div>
</div>


<script>
    let vm = new Vue({
        el:"#app",
        data: {
            msg:"box"
        }
    })
</script>

顯示結果

此時通過示例,我們就發現使用動態綁定class屬性的div,class屬性值被替換為了Vue data屬性中的數據, 也就是說動態綁定class屬性的msg是一個變量

沒有使用動態綁定class屬性的值就是一個普通的字符串msg

3.1.2 動態綁定class與普通class混用

動態綁定class 和沒有動態綁定的class可以同時使用, 不沖突,Vue會將動態class屬性與普通class屬性在最后顯示是合并到一起

<div id="app">
    <!-- 動態綁定class -->
    <h2 class="wrap" :class="msg">你好</h2>
</div>
<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            msg:'box'
        }
    })
</script>

顯示結果:

通過示例結果發現,這樣使用,h2將有兩個類名,一個是wrap, 一個是box,

其中wrap是普通class屬性的值, box是動態class屬性值msg變量在Vue data屬性中所表示的值

2.3 數組語法

2.3.1 動態綁定class的錯誤寫法

我們千萬不要在動態綁定class屬性中像以前利用空格一樣綁定多個類名

<h2 :class="msg box">Hello World</h2>

這樣的寫法就會報錯, 那么如何才能做到使用動態屬性綁定多個類名呢,

2.3.2 動態綁定多個類名

有的時候我們希望可以在一個DOM元素上動態綁定多個類名,

因為動態綁定的class值是表達式,我們就可以利用數組來羅列多個動態綁定的類名,

因此可以 v-bind:class動態綁定class值中協商數組，使用數組來羅列多個綁定的class類名

示例入校:

<div id="app">
    <h2 :class="[boxClass,wrapClasss]">你好</h2>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            boxClass:"box",
            wrapClass:'wrap'
        }
    })
</script>

這樣渲染出來的結果h2 標簽會同時擁有box 和wrap兩個類名

2.3 對象綁定

2.3.1 動態綁定class值的處理邏輯

既然動態綁定class的值是表達式,那么我們就可以在表達式里,寫一些基本的表達式處理數據,
通過邏輯的判斷來決定要不要給DOM元素添加這個類名

比如

<div id="app">
    <!-- 動態class值中寫入三目運算符邏輯 -->
    <!-- 此時變量isTrue的值如果為true, 則顯示變量msg所表示的值 -->
    <!-- 如果isTrue為false, 則為空字符串 -->

    <!-- 1. isTrue值為 true時 -->
    <h2 :class="isTrue ? msg : ''">你好</h2>

    <!-- 1. isTrue值為 false時 -->
    <h2 :class="!isTrue ? msg : ''">hello</h2>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            isTrue:true,
            msg:'box'
        }
    })
</script>

示例結果:

通過實例,我們會發現, 當isTrue 的值為 true時,h2標簽有類名, 為false是,值為空字符串,無類名.

因此通過這個例子,我們就可以利用數據isTrue布爾值的判斷來切換類名,改變樣式

示例如下:

<style>
    .box{
        color:red;
    }
    .wrap{
        color:skyblue;
    }
</style>

<div id="app">
    <h2 :class="isTrue ? msg : 'wrap'">你好</h2>
    <button @click="changClassName">點擊切換顏色</button>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            isTrue:true,
            msg:'box'
        },
        methods:{
            changClassName(){
                this.isTrue = !this.isTrue
            }
        }
    })
</script>

上面的實例, 在點擊是button按鈕時, 會切換h2標簽的類名,同時會改變h2的字體樣式.

注意:又到了教會你們,卻不推薦你們使用的時刻來了

你要問我為什么不推薦用?

那么我們不妨自己想一想,如果我一個標簽上有多個需要動態切換的類名怎么辦

我們是不是會想到如下的寫法:

<h2 
    :class="isTrue ? msg : ''"
    :class="flag ? 'haha' : ''"
>你好</h2>

如果你真的這么寫了, 你會發現,后面動態綁定的class沒有任何效果, 所以這種寫法是有問題的

同時我們也會發現這種三目表達式切換類名也不是特別友好,

此時此刻,此情此景, 我們就不得不探討一下兩個問題?

如何更好的切換類名
如何綁定多個動態的切換

喝口水,接著往下聊.

2.3.2 動態多個類名切換

上回咱們聊到,如何解決如何更好的綁定多個類名的切換.

都已經知道了動態綁定class的值是表達式, 所以我們可以將 v-bind:class值寫成一個對象，以動態地切換 class：

<div :class="{ box:isTrue }"></div>

語法說明:

上面的語法表示: box 這個類名是否存在將取決于數據屬性isTrue 的布爾特性。
如果 isTure的值為true, 那么div 將有類名box 否則, div沒有box類名
需要注意,此時box就是一個類名,并不是vue中的數據屬性

因為對象可以有多個屬性值對, 因此我們可以在對象中傳入更多屬性來動態切換多個 class。

<div :class="{ box:isTrue, wrap: !isTrue }"></div>

寫法說明:

當isTrue的值為true,是div的類名為box, 此時!isTrue的值就是false, 所有div沒有wrap類名
如果isTrue的值為false 則情況相反,

2.3.3 修改示例

此時,我們就可以利用所學重新修改上面點擊改變樣式案例的寫法

<style>
    .box{
        color:red;
    }
    .wrap{
        color:skyblue;
    }

</style>
<div id="app">
    <h2 :class="{box:isTrue, wrap: !isTrue}">你好</h2>
    <button @click="changClassName">點擊切換顏色</button>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            isTrue:true,
        },
        methods:{
            changClassName(){
                this.isTrue = !this.isTrue
            }
        }
    })
</script>

這樣我們就可以做到兩個類名之間的切換, 如果希望有多個類名切換, 可以繼續給對象添加屬性

4. 綁定行內樣式

v-bind動態綁定屬性除了class比較特殊外,還有一個style行內樣式屬性也比較特殊

4.1 未使用vue 動態綁定屬性的行內樣式

 <h2 style="color:red;font-size:30px;">Hello World</h2>

顯示結果:

需求分析：

和其他動態綁定屬性一樣,有的時候,我們就希望樣式的值是可以動態變化的.
那么我們就需要使用到v-bind動態綁定屬性的指令,
同時使用動態綁定屬性以后,style屬性的值將變成表達式. 以前的寫法就不太合適了
既然是表達式,我們就可以使用對象和數組方式羅列樣式.

先看看值為對象的用法

4.2 對象語法

4.2.1 動態綁定style屬性的基本用法

動態綁定style屬性說明:

如果使用動態綁定屬性方法綁定行內樣式,那么style屬性值將不再是字符串,而是表達式,
動態綁定style的值既然是表達式，那么就可以在表達式中使用對象.
如果值為對象,那么對象的屬性名則為CSS樣式屬性, 值為樣式的值。
注意,此時對象中的屬性值,可以是確定的樣式值,也可以是vue的數據變量,
因此有些值不能再像style標簽中一樣書寫,例如50px,以前使用不加引號,現在必須加引號

4.2.2 對象寫法關于值的問題

如果使用動態綁定屬性style里的對象值不加引號, 就會有如下的問題:
例如

<h2 :style="{color:red,font-size:30px}">Hello World</h2>

上面的這種寫法就會報錯, red和30px會被當做變量去Vue data屬性中找對應的數據, 但是找不到就報錯

正確的寫法應該是這樣的

<h2 :style="{color:'red',fontSize:'30px'}">Hello World</h2>

也能正確顯示結果, 但是要注意字符串嵌套問題

4.2.3 對象寫法的屬性問題:

相信通過剛才的例子,你也發現了,我們發font-size 的寫法改為了fontSize.

因為CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case) 都可以：

因此,在普通的style屬性中一下兩種寫法都可以

<!-- 駝峰式 (camelCase) 寫法 --->
<h2 style="color:red;fontSize:30px;">Hello World</h2>

<!-- 短橫線分隔 (kebab-case --->
<h2 style="color:red;font-size:30px;">Hello World</h2>

但是一旦使用了動態綁定, style屬性的值將變成JS表達式,

表達式里的大括號即為JS對象, 對象屬性的標識符是不支持-連字符的,

如果我們有兩種處理方案,

駝峰式 (camelCase)
如果要使用連字符, 就需要添加雙引號, 將屬性變成字符串的寫法

因此動態綁定需要如下寫法

<!-- 駝峰式 (camelCase) 寫法 --->
<h2 :style="{color:'red', fontSize:'30px'}">Hello World</h2>

<!-- 短橫線分隔 (kebab-case) 但是要加引號 --->
<h2 :style="{color:'red', 'font-size' :'30px'}">Hello World</h2>

推薦用駝峰寫法, 對象的值也可以是變量

<div id="app">
    <h2 
        :style="{color:'red', fontSize: fontSize}"
    >Hello World</h2>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            fontSize: "30px"
        }
    })
</script>

動態屬性style的樣式值,CSS屬性中,color 是字符串'red'值, 字體大小font-size的值確實vue數據中fontSize的值,顯示結果沒有任何變化

這樣也會有一個不好的點,就是,如果樣式特別多, 就會有點麻煩,

4.2.4 動態綁定style屬性的數據對象的用法

如何解決對象寫法,當屬性過多時的復雜問題呢?

因為動態屬性style的值是一個對象,因此我們可以把對象提取出來直接作為vue 數據data屬性值,那么我們就可以直接綁定一個對象就可以了

而且直接綁定一個對象,看起來更清晰

示例如下:

<div id="app">
    <h2 :style="styleObject">Hello World</h2>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            styleObject: {
                color: "red",
                fontSize: "30px"
            }
        }
    })
</script>

如果我們想動態修改樣式也可以如下處理

<div id="app">
    <h2 :style="styleObject">Hello World</h2>
    <button 
            @click="changColor"
    >點擊切換顏色</button>
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            styleObject: {
                color: "red",
                fontSize: "30px"
            }
        },
        methods:{
            changColor(){
                this.styleObject.color = this.styleObject.color == "red"? "skyblue": "red"
            }
        }
    })
</script>

4.3 數組語法

我們也可以擴展對象的用法, 給動態屬性的值綁定為數組, 數組中就可以使用多組樣式對象來綁定CSS樣式

<div id="app">
    <h2 
        :style="[styleObject, baseStyle]"
   >Hello World</h2>
    
</div>

<script>   
    const vm = new Vue({
        el: "#app",
        data: {
            styleObject: {
                color: "red",
                fontSize: "30px"
            },
            baseStyle: {
                margin: 0,
                padding: 0,
                lineHeight: "50px"
            }

        }
    })
</script>

這樣的寫法,可以將樣式才分, 可以做到樣式復用,

實際開發中，按鈕的應用是必不可少。使用 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;
}

1. 按鈕顏色

顏色：Green ，Blue， Red， Gray ，Black。

可以使用 background-color 屬性來設置按鈕顏色。

例

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

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

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

            /* Red */
            .button4 {
                background-color: #FFC0CB;
                color: black;
            }

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

2. 按鈕大小

尺寸10px ，12px ，16px 20px ， 24px。

可以使用 font-size 屬性來設置按鈕大小:

例：

.button1 {
                font-size: 10px;
            }

            .button2 {
                font-size: 12px;
            }

            .button3 {
                font-size: 16px;
            }

            .button4 {
                font-size: 20px;
            }

            .button5 {
                font-size: 24px;
            }

3. 圓角按鈕

弧度：2px ，4px ，8px ，12px ，50%。

可以使用 border-radius 屬性來設置圓角按鈕:

例：

.button1 {
                border-radius: 2px;
            }

            .button2 {
                border-radius: 4px;
            }

            .button3 {
                border-radius: 8px;
            }

            .button4 {
                border-radius: 12px;
            }

            .button5 {
                border-radius: 50%;
            }

二、邊框樣式CSS按鈕

邊框樣式按鈕與平面按鈕屬于同一類。唯一的區別是，將使用邊框來代替平面按鈕所使用的背景顏色。以下代碼是按鈕處于正常的情況下的狀態。

1. 按鈕邊框顏色

綠藍紅灰黑

可以使用 border 屬性設置按鈕邊框顏色:

例：

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}

2. 鼠標懸停按鈕

可以使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。

提示: 可以使用 transition-duration 屬性來設置 "hover" 效果的速度:

例：

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

鼠標放在對應的色塊上，顯示相對應的顏色。

3. 按鈕陰影

陰影按鈕鼠標懸停后顯示陰影。

使用 box-shadow 屬性來為按鈕添加陰影。

例：

.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);
}

4. 按鈕寬度

寬度：250px，50% ，100%

默認情況下，按鈕的大小有按鈕上的文本內容決定( 根據文本內容匹配長度 )。可以使用 width 屬性來設置按鈕的寬度:

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

CSS 實例

.button1 {
  width: 250px;
}
.button2 {
  width: 50%;
}
.button3 {
  width: 100%;
}

三、按鈕組

1. 移除外邊距并添加 float:left 來設置按鈕組:

CSS 實例

.button {
    float: left;
}

2. 帶邊框按鈕組

可以使用 border 屬性來設置帶邊框的按鈕組:

CSS 實例

.button {
    float: left;
    border: 1px solid green
}

四、按鈕動畫

1. 按樣式CSS按鈕

這些“按下”式按鈕結合了一些平面設計和假象，讓用戶感覺他們實際上按下了按鈕。當用戶按下它時，它似乎陷入了頁面。它的實現需要用到陰影來設置，使其具有3D彈出外觀。以下代碼是按鈕處于正常的情況下的狀態。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>編程字典</title>
  <style>
.pm button {
   width: 200px;
   height: 100px;
 color: #fff;
 background-color: #6496c8;
 border: none;
 border-radius: 15px;
 box-shadow: 0 10px #27496d;
}
</style>
</head>
<body>
  <div class="pm"> <button class="button">Click Me</button>
  </div>
</body>
</html>

五、總結

本文基于Html基礎，主要介紹了Html中按鈕組件的使用，對于按鈕中需要用到的做了詳細的講解，用豐富的案例，多種樣式展示，幫助大家去更好的理解。

最后，希望可以幫助大家更好的學習CSS3。

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

文：https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
作者：Tess Gadd
翻譯：水手哥（公眾號ID:shuishouge_design）

按鈕在UI界面設計中是不可或缺的元素之一，這篇文章我們將介紹不同類型的按鈕包括按鈕的狀態和交互。我們介紹的都是日常界面中使用的普通按鈕，并不包括單選按鈕、選項卡、復選框等其他類型的按鈕。

按鈕的不同分類如下：

動作按鈕
常用按鈕樣式
按鈕的顏色和形狀
按鈕狀態和反饋
標簽按鈕
觸摸屏按鈕
按鈕的位置
系統按鈕
總結

動作按鈕

我們將分析按鈕的層次結構和它們通信的語言。雖然有些按鈕通熟易懂，但按鈕操作不取決于它們的外觀，而是取決于用戶的行為。

1_1.行為召喚（CTA / C2A）

在設計中行為召喚按鈕通常會提示用戶注冊/立即購買等。在產品設計中如果強烈建議用戶應該做的事情應該使用CTA按鈕。

行為召喚按鈕

對于CTA按鈕，我喜歡使用圓形按鈕，這樣會更引人注目。

1_2.主要操作按鈕

雖然CTA按鈕和主按鈕看起來相同，但我喜歡將它們分開。主按鈕應該是一個強大的視覺指示器，可以幫助用戶完成他們的旅程。主按鈕應該在用戶可能想要“下一步”、“完成”、“開始”等的情況下使用。

主要操作按鈕

對于主要操作，我喜歡使用實心按鈕。

1_3.次要操作按鈕

從“返回”的輔助按鈕到“下一步”的主按鈕，或從“編輯”的輔助按鈕到“保存”的主按鈕。輔助按鈕是我們為用戶提供的主要操作的備選方案。

主按鈕旁邊的輔助按鈕的兩種設計

我更傾向于使用線性按鈕或文本鏈接作為輔助按鈕。

1_4.三級按鈕

三級按鈕通常用于其他操作，可能暫時不是用戶想要做的事情。比如“添加朋友”、“掃一掃”、“編輯”或“刪除”之類的內容，前提是它們不是主要操作。

不同形式的三級按鈕

一般來說，人們會使用較小或較不突出的按鈕樣式。

常用按鈕樣式

下面我們將介紹常見的按鈕樣式，不同風格的按鈕樣式和他們的使用技巧。

2_1.實心按鈕

實心按鈕是帶有實心填充的按鈕。

一個實心按鈕

2_2.線性和幽靈按鈕

線性按鈕和實心按鈕正好相反，一個沒有填充的按鈕 – 只是一個輪廓。雖然經常互換使用，但我更喜歡將線性按鈕視為淺色（在白底下按鈕的輪廓和文本顏色深一點更明顯），將幽靈按鈕視為深色（在黑底下按鈕的輪廓和文本顏色淺一點更明顯）。

線性按鈕（左）和幽靈按鈕（右）

2_3.圓形按鈕

圓形按鈕其邊緣設置為最大圓角半徑。

圓形按鈕

2_4.FAB（懸浮按鈕）

懸浮按鈕是一種巧妙的設計模式，Google Material Design中更加受歡迎。雖然它們可能看起來像一個圖標按鈕，但實際上它們用在屏幕上的主要操作按鈕。

一個懸浮按鈕

如果您想了解有關FAB的更多信息，我建議您在Material Design的網站上查看( https://material.io/design/components/buttons-floating-action-button.html )

2_5.文字鏈接

文本鏈接是一種非常簡單的按鈕類型。有幾種不同的方式可以表明它是一個鏈接。它可以是顏色/下劃線/鏈接的文本，甚至就是文本本身（例如“閱讀更多”）。

文本鏈接的不同樣式

在顏色方面，大多數網站使用藍色，因為它是最容易識別的。為什么文本鏈接的顏色會使用藍色？它一直追溯到是萬維網的發明者，在他選擇顏色時發現藍色很酷的一種顏色，即使是色盲的人通常也能看到它。

2_6.帶圖標的標簽按鈕

圖標按鈕越來越受歡迎，一些按鈕仍然需要一個標簽來確保按鈕的語意明了。

帶圖標的標簽按鈕

處理圖標和標簽時最棘手的事情是弄清楚字體組合的圖標有多大。

方法1：讓圖標的大小對齊字體的頂線。

方法2：讓圖標的大小對齊字體的行高。需要注意的是確保圖標和字體的組合視覺均衡。

2_7.圖標按鈕

圖標按鈕沒有標簽，只是一個圖標。因為它們沒有標簽，所以它們在界面中節省了大量空間。圖標按鈕還可以將其他圖標按鈕一起排列在它們的小空間中。

圖標按鈕具有不同的風格

如果你在為計算機認知度較低的人群設計產品時，我建議使用帶標簽的按鈕 – 尤其是那些很抽象的語意。

2_8.帶圖標的文本鏈接

某些文本鏈接可能帶有圖標。這些通常不會在正文中使用。

各種帶圖標的文本鏈接

按鈕的顏色和形狀

在設計按鈕時，需要考慮以下幾個不同的元素。

3_1.顏色

在設計產品時，你應該要考慮有視覺障礙的人。為確保每個人都可以訪問你的顏色，你可以使用在線對比度檢查器。我使用的是那個。( https://accessible-colors.com/ )

不同顏色的按鈕

另外，在選擇顏色時應該考慮色彩心理學。紅色按鈕多用于刪除，黃色按鈕多用于警示等。

“刪除”、“警告”、“保存”和“更多”按鈕

3_2.邊界半徑

邊界半徑為按鈕提供了很多個性化設計。具有更圓半徑的按鈕看起來更有趣。

不同邊界半徑設置的按鈕

3_3.投影

按鈕上的投影使按鈕更加自然引人注意。陰影也可用于指示不同的狀態。 ( https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通過使按鈕在懸停狀態下來達到這個效果。

不同陰影設置的按鈕

3_4.標簽樣式

標簽樣式歸結為字體以及閱讀的容易程度。選擇字體時，請確保它清晰可辨。

不同標簽樣式的按鈕

以下是一些簡單的方法可以讓字體清晰易讀：

* 選擇大寫的標簽或大標題。（Material Design使用過帶有大寫標簽的按鈕。）

* 確保標簽顏色與按鈕填充對比較為突出。您可以使用( http://accessible-colors.com/ ) 查看。始終確保您的顏色符合AAA要求。

* 選擇字體時，請確保字體清晰。

3_5.垂直內間距

按鈕的大小對界面的可訪問性起著很大的作用。大多數沒有經驗的設計師會說“按鈕的高度應該是36像素”。如果你是為產品系統的設計按鈕。你應該采用所用字體的行高，并在其中添加一定單位的內間距。例如：“我的按鈕標簽的行高為20px，垂直內間距為8px”。

不同垂直內間距的按鈕

為什么會這樣設定呢？這里有兩個原因：

1）有視覺障礙的人可能會增大瀏覽器中的字體，因此他們需要更改字體大小而不會將按鈕高度定死。

2）這也是開發人員創建按鈕的方式-他們在DIV容器中添加內間距，而不是固定高度。

3_6.水平內間距

有兩種方法可以接近水平內間距。

第一個方法：

使按鈕寬度與網格對齊。這是保持所有按鈕長度一致的好方法。但是它限制了你可以使用的字體數量。

寬度由網格決定的按鈕

第二個方法：

兩側有固定內間距。我通常還會定按鈕最小寬度，雖然避免了很窄的按鈕，但是最小寬度按鈕可容納的不同字段會讓按鈕看上去不是很均勻。

寬度由內間距和標簽長度決定的按鈕

按鈕狀態和反饋

按鈕狀態讓用戶知道他們是否可以點擊、已經點擊或已成功點擊。按鈕還可以有重疊的狀態。例如可以同時是“點擊”和“懸停”狀態。

4_1.點擊和禁用狀態

點擊狀態就是鼠標可以點擊按下按鈕的狀態，當然如果用戶沒有完成必要的步驟，按鈕可以被禁用。例如用戶沒有輸入他們的姓名和電子郵件地址，他們就不能提交他們的詳細信息。

點擊和禁用按鈕

4_2.懸停和懸停離開（鼠標懸停和鼠標懸停離開）

在PC端按鈕應具有不同的狀態，讓用戶知道它是可點擊的。通常“懸停”狀態和“懸停離開”狀態相反，但也不一定。你應該有效的區分讓用戶感知鼠標懸停在某個按鈕上。

懸停演示按鈕

平板電腦和移動設備上永遠不會出現懸停狀態，因為你的手指無法“懸停”。如果您正在為應用程序進行設計，請不要擔心此狀態。

4_3.焦點

焦點狀態可能會讓用戶困惑。如果你的用戶專注度較差，他們可能需要使用選項卡式導航。用戶將點擊“選項卡”在網站上移動，從一個導航鏈接移動到下一個。這意味著按鈕需要有一個“焦點”狀態才能顯示它是“可點擊的或尚未點擊”。

默認的焦點狀態是藍色“發光”，幸運的是，我們生活在一個可以自定義按鈕狀態的時代。大多數設計師對懸停和焦點狀態使用相同的視覺提示。

兩個不同“焦點”狀態的例子

4_4.按下

按下狀態是當用戶的光標或手指“按住”按鈕時的狀態。當用戶將手指或光標“釋放”在按鈕上時，該按鈕會指示為“已點擊”。

“按下”狀態的按鈕

4_5.點擊

按鈕需要“點擊”狀態以向用戶指示它已被點擊。

“點擊”狀態的按鈕

按鈕標簽

按鈕標簽的訣竅是一致性。我們在產品設計前期需要制定按鈕標簽的規范，以避免以后花更多時間去改變你所有的按鈕標簽。

5_1.動詞的用法

大多數按鈕都包含指示按鈕將執行什么操作，例如“保存”、“發布”、“編輯”。雖然“back”和“next”不是動詞，但在接口上下文中，它們的工作方式似乎相同。我喜歡在編寫按鈕標簽時使用“動詞” “名詞”結構，這會讓操作更具規定性，例如“保存文章”等，而不是“保存”。

5_2.案例

你還應該決定使用哪種字體大小寫。以下是我使用的一些規范：

所有大寫字母，例如“NEXT SECTION”，我把它們用于更專業的平臺。Material Design使用所有大寫字母的按鈕。

標題框，例如“Next Section”，我傾向于避免使用標題大小寫，因為它不像句子大小寫那樣容易閱讀。就語調而言，我認為它介于“專業”和“會話”之間。

句子大小寫，例如“Next section”，我把它們用于更“友好”或“對話”的平臺。它更像是一句話，正常我們一句話結束會加一個句號，但是為了設計的美感，請不要加一個句號。

小寫，例如“next section”，小寫按鈕標簽使用頻率較低。

5_3.一致性

為按鈕編寫標簽時，請確保一致性。以下是一些我在項目使用的指導原則：

選擇字數：每個按鈕一個、兩個或多個字

選擇大小寫：句子大小寫，或大寫，或標題大小寫，或小寫

標簽結構：如“動詞” “名詞”，或“動詞”等。

觸摸屏按鈕

桌面按鈕大小調整（單擊）

因為桌面上的光標比觸摸屏上的手指小，所以您可以將按鈕縮小很多。

觸摸屏按鈕尺寸（點擊）

麻省理工學院觸摸實驗室的研究表明，人在使用觸摸屏時手指部分是8-10毫米，如果你想避免用戶手指觸摸錯誤，最小目標尺寸需要10毫米或更大。如上所述-我需要較大的按鈕。

那么，你應該做多大尺寸的按鈕呢？專家們說的是：

Material Design建議接觸目標應為48dp x 48dp，不同接觸點之間距為8dp。

雖然我找不到關于iOS設計系統目標尺寸的任何文檔，但一般的理解是，它的最小目標尺寸是44 x 44磅。

如果您在設計大小尺寸方面遇到困難，我強烈推薦Zac Dickerson關于易用性的故事。

按鈕位置

如果你非要放置2個按鈕，主按鈕應放在哪一側？

主要和次要按鈕的兩種不同立場

選項A顯示左側為主按鈕。它可能是用戶首先想要看到的，所以先顯示它。

選項B顯示右側為主按鈕。我們希望用戶首先看到輔助按鈕，方便他們繼續完成他們的旅程。右側的按鈕也表示繼續。

系統按鈕

這里會介紹一些很酷的設計原則和系統。我喜歡Material Design System的按鈕，因為他們的原理是經過深思熟慮的。

Material Design System的按鈕

Material Design 按鈕圖片

Material Design中介紹了按鈕的操作，以及按鈕如何與系統中的其他組件交互。我喜歡用戶在觸摸屏上使用按鈕的交互方式。

查看按鈕部分：

https://material.io/design/components/buttons.html

懸浮按鈕在這里查看：

https://material.io/design/components/buttons-floating-action-button.html

總結

如果沒有按鈕，你就不能真正構建界面；我們應該更多的關注它們。了解按鈕在界面中是如何設計的？怎樣正確的使用按鈕并為你的用戶提供最佳的體驗？

在線咨詢

上一篇：javascript的字符串repeat()方法
下一篇：快速了解JavaScript選擇框操作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Vue指令：v-bind動態屬性綁定

. v-bind:指令認識和基本使用

1.1 v-bind 指令基本使用

1.2 簡寫方式

2. vue 屬性的動態綁定

3 動態綁定class屬性

3.1 動態綁定class的基本使用

3.1.1 動態綁定class與普通class屬性對比

3.1.2 動態綁定class與普通class混用

2.3 數組語法

2.3.1 動態綁定class的錯誤寫法

2.3.2 動態綁定多個類名

2.3 對象綁定

2.3.1 動態綁定class值的處理邏輯

2.3.2 動態多個類名切換

2.3.3 修改示例

4. 綁定行內樣式

4.1 未使用vue 動態綁定屬性的行內樣式

4.2 對象語法

4.2.1 動態綁定style屬性的基本用法

4.2.2 對象寫法關于值的問題

4.2.3 對象寫法的屬性問題:

4.2.4 動態綁定style屬性的數據對象的用法

4.3 數組語法

一、平面樣式CSS按鈕

1. 按鈕顏色

2. 按鈕大小

3. 圓角按鈕

二、邊框樣式CSS按鈕

1. 按鈕邊框顏色

2. 鼠標懸停按鈕

3. 按鈕陰影

4. 按鈕寬度

三、按鈕組

1. 移除外邊距并添加 float:left 來設置按鈕組:

2. 帶邊框按鈕組

四、按鈕動畫

1. 按樣式CSS按鈕

五、總結

您的項目需求