中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

按鈕是最常使用的組件之一，但是在與人交流時(shí)，還是會(huì)覺(jué)得大家存在很多誤區(qū)，所以本文將圍繞如何使用按鈕展開(kāi)分析，希望能給大家?guī)?lái)一些新的思考。

按鈕是任何用戶界面當(dāng)中（無(wú)論是桌面還是移動(dòng)用戶界面）必備的交互元素：甚至可以說(shuō)，如果頁(yè)面中沒(méi)有一個(gè)按鈕，整個(gè)頁(yè)面設(shè)計(jì)將是不完整的。在日常生活中，按鈕也是隨處可見(jiàn)的，一個(gè)電燈開(kāi)關(guān)、遙控器按鈕，現(xiàn)實(shí)生活中按鈕反復(fù)的出現(xiàn)也可以幫助我們不斷去理解屏幕世界中按鈕應(yīng)該如何操作，從而衍生出屏幕世界中的按鈕的具體形態(tài)。

人機(jī)交互中最重要的就是把我們從小到大對(duì)于這個(gè)世界的認(rèn)識(shí)映射到屏幕世界中，比如蘋(píng)果最為經(jīng)典iOS的滑動(dòng)解鎖。

而到了屏幕世界中，控件的設(shè)計(jì)更應(yīng)該與物理世界保持相對(duì)的一致，這也是按鈕設(shè)計(jì)中，尤為重要的一個(gè)環(huán)節(jié)。

最近常問(wèn)身邊的朋友，按鈕究竟是什么？

他們多數(shù)的回答：“按鈕就是按鈕唄，還能是什么～”

因?yàn)閷?duì)于他們而言，按鈕不就是一個(gè)操作區(qū)域加上文字，沒(méi)什么特別的，也正因如此，對(duì)于按鈕的具體構(gòu)造也不太了解。這篇文章主要是根據(jù)自身的工作經(jīng)驗(yàn)，結(jié)合當(dāng)下對(duì)于按鈕設(shè)計(jì)的理解，去分析如何進(jìn)行更合理的按鈕設(shè)計(jì)。

聊聊按鈕的痛點(diǎn)

對(duì)于每個(gè)設(shè)計(jì)師來(lái)說(shuō)按鈕并不陌生，在每天的設(shè)計(jì)中，都會(huì)使用按鈕進(jìn)行頁(yè)面設(shè)計(jì)；但又不是每一個(gè)設(shè)計(jì)師都能夠?qū)粹o設(shè)計(jì)好，因?yàn)樗嬖谌齻€(gè)方面的復(fù)雜性：

• 它使用的場(chǎng)景過(guò)多：不是每個(gè)場(chǎng)景都需要相同的按鈕，比如在登錄頁(yè)當(dāng)中，登錄和注冊(cè)就是使用不同的按鈕形式。這些情況特別在B端產(chǎn)品中，業(yè)務(wù)在每個(gè)步驟中需要突出和強(qiáng)調(diào)的點(diǎn)不同，導(dǎo)致設(shè)計(jì)師很難通過(guò)具體場(chǎng)景進(jìn)行按鈕設(shè)計(jì)；
• 按鈕出現(xiàn)的頻率太高：B端產(chǎn)品中，每個(gè)頁(yè)面當(dāng)中都會(huì)有按鈕不停的重復(fù)，而高頻的出現(xiàn)會(huì)讓我們感到麻木，導(dǎo)致很多設(shè)計(jì)師都將其忽略；
• 按鈕形式太多：在我總結(jié)的按鈕形式當(dāng)中，一共分為10類，且情況多種多樣，很多時(shí)候都沒(méi)有意識(shí)到不同形式之間的差距，導(dǎo)致亂用混用。

因此一個(gè)看上去小小的按鈕，其實(shí)經(jīng)常會(huì)困擾著我們，如果剛開(kāi)始沒(méi)有將按鈕進(jìn)行整體的梳理，那么在你的設(shè)計(jì)過(guò)程中，按鈕會(huì)經(jīng)常打斷自己的設(shè)計(jì)思維，為了讓大家能夠?qū)Π粹o有更深的理解，我將按鈕進(jìn)行系統(tǒng)的拆解，結(jié)合實(shí)際案例，能夠使按鈕更淺顯易懂。

在文章按鈕類型的分析中，我將按鈕分為兩大類、十小類，將其分類也是為了更好的為大家去分析每一個(gè)按鈕所涉及到的狀態(tài)，當(dāng)我們理解按鈕之前，你需要了解它的內(nèi)部構(gòu)造。

一、按鈕類型

首先，拋出一個(gè)問(wèn)題給大家，下圖中，共有幾種按鈕形式？分別是什么？給大家五秒鐘時(shí)間思考。

如果你對(duì)上圖的按鈕形式并不完全了解，建議你拿好小本本，做好筆記～

在開(kāi)始講常見(jiàn)按鈕類型前，我們必須要搞清楚一個(gè)重要的知識(shí)點(diǎn)：按鈕狀態(tài)。

1.1 什么是按鈕狀態(tài)？

按鈕狀態(tài)，可以讓用戶知道這個(gè)按鈕當(dāng)前是在進(jìn)行哪一種操作，方便幫助用戶進(jìn)行判斷。

常見(jiàn)的按鈕狀態(tài)分為：正常狀態(tài)(Normal)、聚焦?fàn)顟B(tài)(Focus)、懸停狀態(tài)(Hover)、激活狀態(tài)(Active)、加載狀態(tài)(Loading)、禁用狀態(tài)(Disabled)，下面分別對(duì)這六大狀態(tài)進(jìn)行拆解。

正常狀態(tài) (Normal)：除了其他五種狀態(tài)外的情況都是正常狀態(tài)，它是按鈕最為常規(guī)的狀態(tài)形式，也是設(shè)計(jì)師必須設(shè)計(jì)的一種狀態(tài)。

聚焦?fàn)顟B(tài) (Focus)：主要是用于展示當(dāng)前電腦光標(biāo)所在的具體位置。聽(tīng)起來(lái)有點(diǎn)玄乎，我來(lái)講他背后的原理，主要是方便一些鍵盤(pán)使用的用戶，可以使用Tab鍵或者方向鍵來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行訪問(wèn)輸入。

比如在Mac OS 以及 Windows的使用中，通過(guò)點(diǎn)擊Tab，便展示出文件的Focus狀態(tài)。

Focus狀態(tài)是一個(gè)非常重要的交互形式，但是很多設(shè)計(jì)師都會(huì)忽略，甚至在很多網(wǎng)站，直接就是將這個(gè)樣式所去除，導(dǎo)致使用Tab鍵無(wú)法獲取聚焦的反饋，比如常見(jiàn)的百度、Google再到各大操作系統(tǒng)都會(huì)有這類反饋，去除這類反饋，會(huì)導(dǎo)致用戶無(wú)法用方向鍵控制光標(biāo)位置，在很大程度上降低用戶使用的可能性。

懸停狀態(tài) (Hover)：在桌面端的設(shè)計(jì)當(dāng)中，即使用戶知道它是可以點(diǎn)擊的，但是你還是需要設(shè)計(jì)懸停狀態(tài)，表明鼠標(biāo)現(xiàn)在正在按鈕上。平板電腦和移動(dòng)端的設(shè)備上用永遠(yuǎn)不會(huì)展示懸停狀態(tài)，因?yàn)槟愕氖种甘菬o(wú)法在屏幕上進(jìn)行懸停的（雖然IPad OS 更新了13.4版本后，會(huì)有Hover態(tài)的出現(xiàn)，但是是通過(guò)鼠標(biāo)進(jìn)行操作，因此這里不予以討論）。

激活狀態(tài) (Active)：激活狀態(tài)因?yàn)榻蟹ú煌?，在有的地方也稱之為Press狀態(tài)，它的表現(xiàn)就是將按鈕按壓下，將顏色變深同時(shí)會(huì)涉及到內(nèi)陰影等效果的出現(xiàn)。

禁用狀態(tài) (Disable)：按鈕禁用狀態(tài)作為最難設(shè)計(jì)的狀態(tài)之一，主要在于禁用狀態(tài)的表現(xiàn)形式以及禁用狀態(tài)與激活狀態(tài)之間如何的切換，我具體來(lái)分析一下兩個(gè)難點(diǎn)。

難點(diǎn)一：禁用狀態(tài)在顏色上首先會(huì)給人灰色塊的感覺(jué)，行業(yè)里也稱之為置灰，在設(shè)計(jì)上，也需要注意光標(biāo)移動(dòng)時(shí)需要展示禁用光標(biāo)，即讓前端大哥將Cursor的hover狀態(tài)更改為not-allowed，你可以優(yōu)雅的在前端面前裝個(gè)X（之后會(huì)出一期，簡(jiǎn)單聊聊我與前端如何協(xié)作如何裝X）。

難點(diǎn)二：禁用與激活狀態(tài)的切換，比如在一個(gè)注冊(cè)頁(yè)面中，需要姓名與電話必填，當(dāng)用戶沒(méi)有填寫(xiě)完成姓名與電話時(shí)，應(yīng)該將按鈕置灰，提示用戶不可以點(diǎn)擊，當(dāng)用戶填寫(xiě)完成必填字段后，將禁用按鈕轉(zhuǎn)變?yōu)榧せ畎粹o，提示用戶可以點(diǎn)擊登錄。

加載狀態(tài)/Loading：按鈕需要時(shí)間進(jìn)行加載的一種狀態(tài)，通常會(huì)被用戶忽略，但是在B端產(chǎn)品中，Loading狀態(tài)尤為重要，這里有很多細(xì)節(jié)和小技巧，展開(kāi)講篇幅太大，在文中4.3（按鈕細(xì)節(jié)）會(huì)詳細(xì)解答。

1.2 主按鈕 （Primary Button）

主按鈕為頁(yè)面中按鈕區(qū)最為核心的操作，在日常場(chǎng)景中，主要按鈕一般都為新建、編輯、保存這一類正向的操作，強(qiáng)調(diào)頁(yè)面中最為核心的功能，能夠讓用戶一看到主按鈕就明白大致在頁(yè)面中需要如何操作。

但在主按鈕的使用中，要遵循以下兩個(gè)原則：

1）在頁(yè)面當(dāng)中，按鈕區(qū)域的主按鈕最好只有一個(gè)，否則會(huì)對(duì)頁(yè)面的主要功能造成干擾。

2）并不是每一個(gè)頁(yè)面都需要有主按鈕，不要因?yàn)轫?yè)面缺失主按鈕而強(qiáng)行加上。因?yàn)樵趯?shí)際使用中，時(shí)常遇到按鈕之間為平級(jí)的關(guān)系，強(qiáng)行添加，容易造成頁(yè)面層級(jí)混亂。

在主按鈕中，按鈕狀態(tài)的設(shè)計(jì)也會(huì)跟隨物理世界進(jìn)行相應(yīng)的映射，因此在設(shè)計(jì)時(shí)需考慮現(xiàn)實(shí)生活中的狀態(tài)。

比如用戶的Hover時(shí)，一般都將按鈕抬起并亮度增加，其目的是為了提示用戶可以點(diǎn)擊，而用戶在按下時(shí)，用加黑來(lái)表示用戶按下的狀態(tài)，與現(xiàn)實(shí)生活中按鈕的狀態(tài)類似，因此按鈕狀態(tài)應(yīng)該映射物理世界。

1.3 次按鈕/標(biāo)準(zhǔn)按鈕（Default Button）

次按鈕在頁(yè)面中出現(xiàn)最為頻繁，在日常使用中，如果你不太確定使用何種按鈕時(shí)，那使用它，大概率沒(méi)有錯(cuò)。因?yàn)樗\(yùn)用廣泛，出現(xiàn)頻率也最高，因此也被人們稱為標(biāo)準(zhǔn)按鈕。

在次按鈕的設(shè)計(jì)形式中，我們團(tuán)隊(duì)將設(shè)計(jì)形式分為兩類：

第一類 字線型

此按鈕整體以文字+邊框的形式，這類形式在視覺(jué)層面上感知較弱，適合幾個(gè)按鈕同時(shí)展示，在B端項(xiàng)目中，字線型也是在使用中最為頻繁的形式。

第二種 字面型

字面型更偏向表達(dá)按鈕整體，常見(jiàn)于各類移動(dòng)端的按鈕當(dāng)中，整體的表達(dá)也更適合移動(dòng)端這類屏幕尺寸較少的設(shè)備當(dāng)中，更符合卡片化設(shè)計(jì)的思路，反而不太適合桌面端的設(shè)計(jì)。

1.4 文字按鈕/鏈接（Text Button/Link）

文字按鈕為頁(yè)面中視覺(jué)層級(jí)較低的按鈕形式，因而可以在頁(yè)面中大面積的重復(fù)使用，文字按鈕與鏈接（Link）基本一致，且沒(méi)有太多區(qū)分，所以在設(shè)計(jì)上，文字按鈕與鏈接基本相同。

文字按鈕重復(fù)的出現(xiàn)，以表格頁(yè)面當(dāng)中的操作列表最為突出，因?yàn)楸砀癞?dāng)中常用的操作最好能夠直接展示出來(lái)，因此表格中基本都采取文字按鈕的形式。

1.5 圖標(biāo)按鈕（Icon Button）

圖標(biāo)按鈕為頁(yè)面中控件占比最小的按鈕，所以在頁(yè)面中的使用也是最為高效的。因?yàn)闆](méi)有了文字元素，會(huì)導(dǎo)致用戶在圖標(biāo)的理解上出現(xiàn)偏差。為了解決這一問(wèn)題，主要是通過(guò)用戶在Hover時(shí)使用展示Tooltip提示按鈕的含義，同時(shí)建議在圖標(biāo)按鈕的使用上多為高頻且易理解的圖標(biāo)。

我舉一個(gè)簡(jiǎn)單例子，在桌面端產(chǎn)品中，幫助文檔一定是非常重要的一個(gè)入口，當(dāng)用戶對(duì)頁(yè)面中的功能有所疑惑時(shí)，可以通過(guò)此來(lái)幫助用戶進(jìn)行理解，通常需要在大多數(shù)頁(yè)面當(dāng)中展示幫助中心的入口，這時(shí)圖標(biāo)按鈕就變得最為合適。

因此，我們可以得出圖標(biāo)按鈕的應(yīng)用場(chǎng)景通常為：當(dāng)頁(yè)面中需要高效的展示一個(gè)或幾個(gè)圖標(biāo)時(shí)，同時(shí)圖標(biāo)按鈕的展示最為頻繁時(shí)，當(dāng)同時(shí)滿足以上兩點(diǎn)，使用圖標(biāo)按鈕就是一個(gè)更優(yōu)的解決方案方案。

1.6 按鈕菜單（Menu Button）

按鈕菜單為頁(yè)面中許多操作的集合，通常是將高頻的操作以及一些低頻的操作進(jìn)行整合，組成的按鈕菜單。這樣既能夠減少頁(yè)面元素的冗雜，同時(shí)也能夠滿足業(yè)務(wù)對(duì)于功能的需求。

舉個(gè)例子，在表格頁(yè)面當(dāng)中，B端設(shè)計(jì)師最常見(jiàn)到的按鈕菜單就是新建，這類新建按鈕其實(shí)是必不可少的，同時(shí)業(yè)務(wù)需要，還需要多個(gè)業(yè)務(wù)按鈕進(jìn)行展示，按鈕菜單的出現(xiàn)，幫助用戶進(jìn)行按鈕的整理，同時(shí)也滿足業(yè)務(wù)需求。

1.7 按鈕中加圖標(biāo)（Icon add Button）

這其實(shí)是主按鈕的一種衍生，通過(guò)圖標(biāo)對(duì)主按鈕的含義進(jìn)行解釋，從而幫助用戶提高這個(gè)按鈕的識(shí)別性。如果一個(gè)按鈕你想比主按鈕更加強(qiáng)調(diào)，那便可使用在按鈕中添加圖標(biāo)，這樣既能夠強(qiáng)化圖標(biāo)的含義，同時(shí)也加深了用戶對(duì)于按鈕的印象。

在六個(gè)常見(jiàn)按鈕形式中，我們根據(jù)重要的優(yōu)先級(jí)，給常見(jiàn)按鈕進(jìn)行一個(gè)簡(jiǎn)單的排序：

圖標(biāo)按鈕-按鈕菜單-主按鈕-次按鈕-文字按鈕-圖標(biāo)按鈕

二、特殊按鈕類型

2.1 危險(xiǎn)按鈕（Danger Button）

危險(xiǎn)按鈕在刪除操作中最為常見(jiàn)，通常是為了警告用戶，這個(gè)數(shù)據(jù)刪除不可恢復(fù)，讓用戶謹(jǐn)慎考慮。在常見(jiàn)的刪除操作中，都需要用戶進(jìn)行二次確認(rèn)，避免用戶誤操作。

當(dāng)然，在實(shí)際業(yè)務(wù)中，危險(xiǎn)按鈕不宜過(guò)多，如果業(yè)務(wù)當(dāng)中無(wú)法避免，需要展示多個(gè)刪除按鈕時(shí)，推薦采取圖標(biāo)按鈕進(jìn)行展示或者Hover過(guò)后將其呼出。

2.2 幽靈按鈕（Ghost Button）

幽靈按鈕，看它的名字就能想到它的作用：像幽靈一般透明的存在。

它沒(méi)有使用復(fù)雜的顏色、樣式，而是用線條表示外部輪廓，證明它還是一個(gè)按鈕。同時(shí)內(nèi)部只用文字展示按鈕名稱。它只出現(xiàn)在按鈕背景復(fù)雜的頁(yè)面當(dāng)中，比如：漸變色、紋理、動(dòng)態(tài)圖片背景的情況下，幽靈按鈕能夠完美融入到環(huán)境當(dāng)中。

而現(xiàn)如今，傳統(tǒng)意義上的幽靈按鈕已經(jīng)很少，畢竟在現(xiàn)如今的官網(wǎng)當(dāng)中，幽靈按鈕已經(jīng)不再流行，更多的是出現(xiàn)在復(fù)雜頁(yè)面的“實(shí)心按鈕”，而在某種意義上講，這類按鈕才是幽靈按鈕現(xiàn)在的狀態(tài)。

幽靈按鈕和次按鈕有何不同？

在形式上，幽靈按鈕和次按鈕看起來(lái)沒(méi)有并什么不同，因此會(huì)有很多疑惑，那我什么時(shí)候用幽靈按鈕什么時(shí)候用次按鈕呢？

首先幽靈按鈕是屬于特殊按鈕體系中，因此它不會(huì)受整個(gè)按鈕體系的束縛，比如我在一個(gè)設(shè)計(jì)系統(tǒng)中，分別定義了常規(guī)按鈕的尺寸分別是24px、32px、40px，但是我在一個(gè)官網(wǎng)落地頁(yè)當(dāng)中需要有一個(gè)46px的按鈕出現(xiàn)，次按鈕就完全不合適。其次幽靈按鈕邊框粗細(xì)、字體大小都是和常規(guī)按鈕體系不同，因此幽靈按鈕就和次按鈕有所不同。

第二個(gè)方面在次按鈕的設(shè)計(jì)形式中，不僅僅只有描邊按鈕這一種形式，因此幽靈按鈕與次按鈕它們可能會(huì)有交集，但是屬于兩種不同類型的場(chǎng)景，因此也不能將它們混用。

2.3 懸浮按鈕（Floating Action Button）

在Material Design 出現(xiàn)之初，懸浮按鈕受到了很多人的追捧，它也是安卓設(shè)計(jì)的代名詞。主要是用于頁(yè)面當(dāng)中最常用的操作，是整個(gè)APP中最核心的按鈕，能夠代表這個(gè)產(chǎn)品的核心功能，比如記賬軟件的添加賬單記錄，印象筆記的新增筆記（安卓）。

但沉浸式設(shè)計(jì)的出現(xiàn)，使得移動(dòng)端寸土寸金的地方，需要固定一個(gè)按鈕的情況就變得更加少見(jiàn)。

而在B端的設(shè)計(jì)過(guò)程中，逐漸衍生出了B端行業(yè)特有的方式。

懸浮按鈕在B端場(chǎng)景中，主要是幫助用戶進(jìn)行輔助咨詢的功能，例如在一些用戶需要得到幫助的頁(yè)面中，可以通過(guò)懸浮按鈕，使用戶的又疑問(wèn)的頁(yè)面進(jìn)行快速提問(wèn)，幫助用戶能夠進(jìn)行快速的跳轉(zhuǎn)，在飛書(shū)的應(yīng)用列表中，其實(shí)用戶剛開(kāi)始理解應(yīng)用列表其實(shí)存在一個(gè)理解成本，就可以通過(guò)懸浮按鈕進(jìn)行展示（后面有機(jī)會(huì)聊聊B端改版厭惡時(shí)也會(huì)提到）。

2.4 行為號(hào)召按鈕（Call to Actiontion）

行為號(hào)召按鈕簡(jiǎn)稱：CTA按鈕，主要目的是為了號(hào)召人們?cè)谀承┨囟ǖ捻?yè)面中使用此按鈕來(lái)提高轉(zhuǎn)化，比如立即購(gòu)買、聯(lián)系我們、立即訂閱等等…

大多數(shù)時(shí)候，CTA按鈕都是成對(duì)出現(xiàn)的?！笆桥c否“ 、“登錄與注冊(cè)”、“確認(rèn)與取消”等。因此，分析清楚CTA按鈕后設(shè)計(jì)出視覺(jué)層級(jí)合理的頁(yè)面稱為非常重要的點(diǎn)。在設(shè)計(jì)中，一般會(huì)采取漸變色、主題色、主題色的互補(bǔ)色等等，它經(jīng)常獨(dú)立出現(xiàn)。

在B端軟件的場(chǎng)景中，官網(wǎng)是CTA按鈕出現(xiàn)最為重要的頁(yè)面，一般在官網(wǎng)中，使用CTA按鈕將用戶引導(dǎo)從潛在客戶向付費(fèi)客戶進(jìn)行轉(zhuǎn)變（點(diǎn)擊過(guò)后一般是一個(gè)聯(lián)系表單進(jìn)行信息的填寫(xiě)），這也是在B端產(chǎn)品中非常重要的指標(biāo)：潛客向付費(fèi)客戶轉(zhuǎn)變?？梢砸龑?dǎo)用戶進(jìn)入到下一個(gè)階段，如果CTA按鈕設(shè)計(jì)不好，人們對(duì)于官網(wǎng)只是瀏覽，不會(huì)有任何轉(zhuǎn)化。

因此，在設(shè)計(jì)CTA按鈕的形式與位置時(shí)，需要與產(chǎn)品、設(shè)計(jì)、運(yùn)營(yíng)等共同確定并討論使用，大家站在不同的立場(chǎng)希望得到一個(gè)完美的方案，因?yàn)樵O(shè)計(jì)出清晰的結(jié)構(gòu)層次將直接引導(dǎo)用戶朝著理想的使用路徑前進(jìn)，從而極大提高轉(zhuǎn)化率。

三、按鈕細(xì)節(jié)

3.1 按鈕文案

在我們?nèi)粘ＴO(shè)計(jì)中，常常會(huì)遇到一些棘手的文案問(wèn)題：登陸、登錄、確認(rèn)、確定、發(fā)送、發(fā)布，在許許多多的工作場(chǎng)景中，猶豫究竟應(yīng)該在按鈕上使用哪種文案，這就需要我們通過(guò)具體的案例場(chǎng)景進(jìn)行展示相應(yīng)文案。

• 登陸（Land) ：這是網(wǎng)絡(luò)中錯(cuò)別字最為頻繁的用此，很多人都會(huì)把登陸放到登錄頁(yè)面中，其實(shí)是錯(cuò)的。這個(gè)詞里的“陸”字，就是陸地的意思，其基本含義只是登上陸地而已，拓展出來(lái)還會(huì)有“登陸到某一個(gè)市場(chǎng)”，但登陸網(wǎng)站的說(shuō)法是絕對(duì)錯(cuò)誤的。
• 登錄（Login）：這是“登記記錄、記載”的含義，我們正常輸入賬號(hào)密碼就是為了去記錄我們的一個(gè)信息，一般為官網(wǎng)登錄頁(yè)。
• 確認(rèn)（Confirm）：這是帶有一些不可逆我操作的提示，一般用于用戶配置、選擇項(xiàng)等。
• 確定（Yes）：這是詢問(wèn)用戶是否進(jìn)行某項(xiàng)不可逆操作，一般為一個(gè)單獨(dú)的操作。
• 發(fā)送（Send）：這是盡快傳遞對(duì)方的聊天消息，一般為即時(shí)性的聊天發(fā)送。
• 發(fā)布（Publish）：這是用于用戶填寫(xiě)的觀點(diǎn)、意見(jiàn)、文章等反饋信息發(fā)布到一些正式場(chǎng)合，如論壇、社區(qū)等。

這些細(xì)節(jié)的文案就是幫助用戶去理解頁(yè)面中所傳達(dá)的真正含義，多將文字放置到場(chǎng)景中，文案也更好的輔佐他們作出選擇

3.2 按鈕圓角

圓角在每一個(gè)軟件中，隨處可見(jiàn)。圓角大小所帶來(lái)的不僅僅是視覺(jué)表現(xiàn)，還更多影響著用戶的使用體驗(yàn)以及對(duì)于產(chǎn)品而言的整體的認(rèn)知，如果在開(kāi)始設(shè)計(jì)之前，沒(méi)有對(duì)按鈕圓角有具體的規(guī)劃，很容易踩坑，如何設(shè)計(jì)好圓角，我們來(lái)進(jìn)行系統(tǒng)分析

在下文中我們將按鈕的圓角大小，分為以下三類：直角、圓角、半圓。

直角：

按鈕四角的方向，具有很強(qiáng)烈的引導(dǎo)性，看上去也會(huì)更加刺眼，使得在頁(yè)面當(dāng)中注意力會(huì)減弱。同時(shí)，直角在按鈕排列當(dāng)中看上去更加統(tǒng)一，相同的東西在視覺(jué)上不太能引起我們的注意。

圓角：

相比與直角按鈕，在使用圓角的按鈕中，視覺(jué)上總是給人一種柔和親近的感覺(jué)，當(dāng)幾個(gè)圓角按鈕進(jìn)行排列時(shí)，能夠感受到圓角按鈕更容易被點(diǎn)擊。因此在使用的按鈕中，建議添加圓角的細(xì)節(jié)元素。

為何直角的物體會(huì)給人更嚴(yán)肅的感受——每一個(gè)人都認(rèn)為圓角會(huì)更好，但是并不是每一個(gè)人都能夠解答為什么圓角更好。

在巴羅神經(jīng)病學(xué)研究所對(duì)拐角的科學(xué)研究發(fā)現(xiàn)，“拐角的感知程度隨著角度線性變化。銳角比鈍角產(chǎn)生更強(qiáng)的幻覺(jué)顯著性”。換句話說(shuō)，拐角越尖，則出現(xiàn)越亮。拐角越多，越難看。

圓角還有另一種解釋，是因?yàn)楝F(xiàn)實(shí)生活中有圓角的物體會(huì)更友好。從小，我們就知道尖角的物體會(huì)讓人受傷，圓角的物體會(huì)更安全。這就是小孩在玩皮球與刀的時(shí)候，家長(zhǎng)的反應(yīng)完全不同。

小朋友玩刀會(huì)讓家長(zhǎng)十分的緊張，趕緊讓孩子放下；而小朋友玩皮球時(shí)，家長(zhǎng)則是非常的放心。這激起了神經(jīng)科學(xué)所謂的尖銳邊緣“回避反應(yīng)”。因此，我們傾向于“避免鋒利的邊緣，因?yàn)樵谧匀唤缰兴鼈兛赡軙?huì)構(gòu)成危險(xiǎn)”。

圓角是不是越大越好？

通常在移動(dòng)端場(chǎng)景中，半圓按鈕隨處可見(jiàn)，移動(dòng)端手指觸摸操作上，對(duì)于圓角的影響小之又?。欢搅俗烂娑说膱?chǎng)景下，鼠標(biāo)的使用，半圓按鈕就會(huì)有所不妥。

如果相同面積中，按鈕的圓角增大，相應(yīng)的對(duì)于按鈕的可操作區(qū)域就會(huì)隨之減小，在同等尺寸下的按鈕中，小圓角的按鈕明顯比大圓角的按鈕更容易操作。

當(dāng)然，麻煩事還不僅僅于操作區(qū)域，在結(jié)合實(shí)際業(yè)務(wù)，我們的按鈕常常作為原子（原子設(shè)計(jì)理論）用來(lái)組成為下拉菜單進(jìn)行聯(lián)動(dòng)，半圓按鈕在下拉菜單的設(shè)計(jì)中，也會(huì)因?yàn)榘雸A的局限，使下拉菜單的設(shè)計(jì)會(huì)更加困難，同樣在設(shè)計(jì)上，半圓角對(duì)于下拉菜單的適配也會(huì)相當(dāng)突兀，因此在考慮這方面設(shè)計(jì)時(shí)，需要你多去思考之后的業(yè)務(wù)場(chǎng)景。

3.3 重要的Loading狀態(tài)

按鈕的狀態(tài)中，Loading狀態(tài)通常不會(huì)對(duì)用戶進(jìn)行直接展示，因?yàn)榇蠖鄶?shù)情況下，Loading狀態(tài)就發(fā)生在一秒鐘以內(nèi)，但是對(duì)于B端場(chǎng)景中有很多重要操作，在長(zhǎng)時(shí)間等待中不展示loading狀態(tài)，會(huì)導(dǎo)致用戶在使用時(shí)犯下錯(cuò)誤。

需要在合理的時(shí)間進(jìn)行反饋

• 當(dāng)按鈕響應(yīng)時(shí)間小于1秒時(shí)，通常正常反饋即可。
• 當(dāng)按鈕響應(yīng)時(shí)間長(zhǎng)于1秒時(shí)，我們通常會(huì)采取加載動(dòng)畫(huà)，減緩用戶等待的焦慮感。

舉個(gè)例子：比如一個(gè)確認(rèn)提交的按鈕，由于網(wǎng)絡(luò)或者服務(wù)器等原因，需要長(zhǎng)時(shí)間加載資源，而用戶不知道我剛才按下的按鈕是否有效，這時(shí)用戶慌張，想要多按下幾次這個(gè)按鈕，系統(tǒng)就會(huì)不停提交數(shù)據(jù)，最后網(wǎng)絡(luò)變好時(shí)，窗口就會(huì)一瞬間瘋狂展示，導(dǎo)致用戶體驗(yàn)下降。

為了防止這類事情的發(fā)生，需要在設(shè)計(jì)師考慮到按鈕在加載一秒以后的狀態(tài)，應(yīng)當(dāng)提示用戶在網(wǎng)頁(yè)已經(jīng)收到請(qǐng)求，正在加載，同時(shí)在按鈕狀態(tài)中應(yīng)該為不可操作狀態(tài)。同時(shí)會(huì)給出加載轉(zhuǎn)圈的動(dòng)畫(huà)，緩解用戶的焦慮。

當(dāng)你完成了第一步的設(shè)計(jì)后，想想在按鈕的狀態(tài)中，是否更能夠幫助用戶進(jìn)行體驗(yàn)上的提升呢？

這也是在面試某大型互聯(lián)網(wǎng)公司時(shí)，被問(wèn)到過(guò)的一個(gè)問(wèn)題～敲黑板。

對(duì)用戶操作的適當(dāng)反饋是用戶界面設(shè)計(jì)的最基本準(zhǔn)則。讓用戶了解當(dāng)前狀態(tài)、位置、是否成功、進(jìn)度如何，減少不確定性；并引導(dǎo)他們?cè)谡_的方向上交互，而不是浪費(fèi)精力在重復(fù)操作上。

在Loading的加載過(guò)程中，等待焦慮一直是用戶想要了解到的，為了緩解類似情況，可以將等待的進(jìn)度狀態(tài)進(jìn)行展示，使的用戶在等待的過(guò)程中，能夠清晰的清楚自己的按鈕目前處于何種狀態(tài)，我大概還需要等待多久，緩解用戶在等待過(guò)程中的焦慮。

以上兩個(gè)方式均是尼爾森十大原則的內(nèi)容，能夠在按鈕Loading狀態(tài)中，緩解用戶在按鈕加載過(guò)程中、重復(fù)提交、等待焦慮的問(wèn)題，通過(guò)一些設(shè)計(jì)小細(xì)節(jié)，幫助產(chǎn)品提升用戶體驗(yàn)。

四、按鈕實(shí)際的使用場(chǎng)景

通過(guò)上文對(duì)于按鈕的解釋，大致明白按鈕在設(shè)計(jì)中的作用，接下來(lái)我結(jié)合一個(gè)工作中的實(shí)際案例，來(lái)看看我們應(yīng)該如何優(yōu)化常見(jiàn)按鈕在頁(yè)面當(dāng)中的設(shè)計(jì)。

項(xiàng)目背景：在桌面端，我們需要對(duì)整個(gè)導(dǎo)航欄進(jìn)行設(shè)計(jì)改版，但其中涉及到對(duì)于導(dǎo)航的一個(gè)整體優(yōu)化，主要是由于業(yè)務(wù)功能發(fā)生變化，我們需要在導(dǎo)航欄上增加快捷添加入口和通知中心，來(lái)滿足導(dǎo)航的后續(xù)的功能需求，由于保密協(xié)議的原因，就不放自家產(chǎn)品。

第一步根據(jù)用戶瀏覽模式確定按鈕順序

在桌面端中，瀏覽模式大致分為兩類，F(xiàn)型瀏覽模式、Z型瀏覽模式（下方知識(shí)拓展會(huì)有講到）。

首先，因?yàn)閷?dǎo)航在整個(gè)頁(yè)面的頂部，結(jié)合兩種瀏覽模式在頂部時(shí)統(tǒng)一都為從左到右的瀏覽順序。

因此確定整個(gè)導(dǎo)航按鈕初步的按鈕重要層級(jí)排序。

第二步交互路徑優(yōu)化

我們對(duì)于用戶的按鈕層級(jí)有著明顯的劃分，因?yàn)樵谡麄€(gè)導(dǎo)航右側(cè)，又因?yàn)槠涞奶厥庑?，我們把操作空間分為三部分：

左側(cè)為操作路徑最短的區(qū)域，因?yàn)樽烂娑说漠a(chǎn)品需要通過(guò)鼠標(biāo)進(jìn)行交互操作，而其中移動(dòng)鼠標(biāo)的長(zhǎng)短直接決定用戶是否愿意點(diǎn)擊這個(gè)按鈕，因此，靠左的按鈕適合放置用戶最常使用的操作。

中部為按鈕內(nèi)部區(qū)，可以放置一些低頻，但是又必須出現(xiàn)在這個(gè)區(qū)域的按鈕操作（比如：幫助中心、通知中心等等…）。

右側(cè)為按鈕最為重要層級(jí)最弱的區(qū)域，同時(shí)它也有一些特殊性。

一般在瀏覽器的右側(cè)，為用戶最容易定位的操作區(qū)域，因?yàn)榭拷吘墝?dǎo)致在用戶定位當(dāng)中能夠幫助用戶進(jìn)行快速選擇。

回到頁(yè)面中信息層級(jí)較高、同時(shí)需要精準(zhǔn)定位的按鈕就會(huì)將個(gè)人中心放置在最右側(cè)，方便用戶進(jìn)行快速定位。

因此我們講導(dǎo)航當(dāng)中按鈕重要層級(jí)進(jìn)行簡(jiǎn)單排序，得到下圖：

第三步信息整合優(yōu)化按鈕結(jié)構(gòu)

通過(guò)親密性原則，我們將除去左右兩側(cè)確定好的按鈕之外的按鈕進(jìn)行簡(jiǎn)單分類，將有關(guān)聯(lián)的按鈕進(jìn)行組合，形成較強(qiáng)的關(guān)聯(lián)性～

第四步視覺(jué)調(diào)整

視覺(jué)調(diào)整作為最重要的一步，主要是為了在最后的按鈕重要層級(jí)上，將一部分按鈕突出、一部分按鈕弱化，達(dá)到我們想要的整個(gè)層級(jí)效果。

通過(guò)團(tuán)隊(duì)內(nèi)部討論，將我們的新增按鈕定位CTA按鈕，因?yàn)樗P(guān)聯(lián)到我們每個(gè)使用系統(tǒng)的人都會(huì)用到，屬于最高頻的操作按鈕，也因此將其突出。

F型瀏覽模式：

是新聞平臺(tái)、博客等文字為主的網(wǎng)站布局所采取的閱讀模式。

該閱讀模式由尼爾森團(tuán)隊(duì)的眼動(dòng)追蹤研究結(jié)果從而進(jìn)行普及，在這個(gè)研究中記錄了超過(guò)200位用戶瀏覽網(wǎng)頁(yè)時(shí)，發(fā)現(xiàn)用戶的主要閱讀行為在許多網(wǎng)站和場(chǎng)景中表現(xiàn)得相當(dāng)一致。這個(gè)閱讀模式看起來(lái)有點(diǎn)像字母F，因此也被叫做F型瀏覽模式。

首先用戶以水平方向進(jìn)行閱讀，通常是在閱讀區(qū)域的上半部分。

接下來(lái)，他們?cè)谄聊蛔髠?cè)垂直瀏覽，尋找段落開(kāi)篇幾句中感興趣的內(nèi)容。當(dāng)他們找到感興趣的內(nèi)容時(shí)，他們?cè)诘诙€(gè)水平方向上快速瀏覽，通常這塊內(nèi)容區(qū)比上一個(gè)內(nèi)容區(qū)更短小、更簡(jiǎn)潔。這部分元素形成了F的下半部分。

最后，用戶在垂直方向上瀏覽內(nèi)容的左側(cè)區(qū)域。

Z型瀏覽模式：

是掃描滾動(dòng)的網(wǎng)站的典型模式。

正如你所期望的，“z”型模式的布局遵循字母Z的形狀?！癦”型模式的設(shè)計(jì)跟蹤了人眼掃描頁(yè)面時(shí)的路線——從左到右，從上到下：

• 首先，人們從左上角到右上角進(jìn)行掃描，形成一條水平線
• 接下來(lái)，向頁(yè)面的左下側(cè)掃描，鏈接成一條對(duì)角線
• 最后，再次向右轉(zhuǎn)，形成第二條水平線

當(dāng)觀眾的視角以這種模式移動(dòng)時(shí)，它形成一個(gè)虛構(gòu)的“Z”字形。

五、按鈕設(shè)計(jì)中與開(kāi)發(fā)還原細(xì)節(jié)

在實(shí)際工作中，經(jīng)常遇到自己設(shè)計(jì)的按鈕與開(kāi)發(fā)實(shí)際還原的按鈕差距很大，一些沒(méi)有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)和開(kāi)發(fā)說(shuō)，你看我設(shè)計(jì)稿，每一個(gè)按鈕都要按照設(shè)計(jì)稿的來(lái)，這樣設(shè)計(jì)師與前端開(kāi)發(fā)之間的矛盾就會(huì)越來(lái)越深。其實(shí)在按鈕設(shè)計(jì)的細(xì)節(jié)中，開(kāi)發(fā)怎么完美的還原，里面還有很多細(xì)節(jié)。

5.1 Padding思維

首先要想讓開(kāi)發(fā)完全還原你的設(shè)計(jì)稿，就必須了解開(kāi)發(fā)實(shí)現(xiàn)的思維方式，針對(duì)它的思維方式進(jìn)行相應(yīng)的思考。

又由于Sketch與開(kāi)發(fā)常使用的VScode之間邏輯上存在較大差異，導(dǎo)致設(shè)計(jì)師設(shè)計(jì)出來(lái)的很多設(shè)計(jì)稿開(kāi)發(fā)根本無(wú)法實(shí)現(xiàn)，這也是B端設(shè)計(jì)師擺在你面前的第一個(gè)問(wèn)題。

對(duì)你沒(méi)看錯(cuò)，無(wú)法實(shí)現(xiàn)，我舉一個(gè)例子：

這是一位同學(xué)問(wèn)我的一個(gè)問(wèn)題，他說(shuō)我這個(gè)按鈕為啥實(shí)現(xiàn)不了，前端不就是多幾個(gè)代碼去適配我的設(shè)計(jì)稿就可以了嗎？

如果你也有很多疑問(wèn)，那就接著看下去～

什么是Padding

在按鈕當(dāng)中，通俗的理解Padding就是文字與按鈕之間的間距。

因?yàn)镾ketch等軟件在按鈕的設(shè)計(jì)中，只有圖形位置的概念，沒(méi)有內(nèi)間距Padding的概念，因此需要對(duì)按鈕還原要明確的描述。

比如上圖，前端同學(xué)在開(kāi)發(fā)就會(huì)將Padding設(shè)置為24px，所以整個(gè)按鈕長(zhǎng)度便為24px*2+20px（文本寬度）=68px。

而為什么說(shuō)上面的設(shè)計(jì)規(guī)范實(shí)現(xiàn)不了，因?yàn)閷?duì)于前端而言，Padding通常都是統(tǒng)一且固定的，只會(huì)根據(jù)按鈕文字長(zhǎng)度進(jìn)行相應(yīng)的調(diào)整，比如我上面舉的錯(cuò)誤栗子，其實(shí)在前端同學(xué)面前這類設(shè)計(jì)是不能夠被共用，而且對(duì)前端同學(xué)項(xiàng)目會(huì)變得越來(lái)越不能維護(hù)，所以按鈕設(shè)計(jì)應(yīng)該更規(guī)劃。

5.2 Min-Width思維

但是如果真的需要去實(shí)現(xiàn)兩個(gè)文字按鈕長(zhǎng)度和四個(gè)字的一樣怎么辦，需要去設(shè)定按鈕的最小寬度。

按鈕最小寬度的設(shè)定一般為4個(gè)字文字的長(zhǎng)度，假設(shè)字體大小為16px，左右的Paddung為24px。

最小寬度為：88px，因此在按鈕的標(biāo)注中，需要展示最小間距為102px，方便前端進(jìn)行CSS開(kāi)發(fā)。

5.3 按鈕的邊框

在我們的sketch中，按鈕邊框有三種，內(nèi)邊框、居中邊框、外邊框，默認(rèn)為居中，但是在前端的CSS代碼中沒(méi)有居中邊框，沒(méi)有居中邊框，沒(méi)有居中邊框（重要的事情說(shuō)三遍），默認(rèn)為內(nèi)邊框，如果需要調(diào)整為外邊框，最好能夠標(biāo)注。

按鈕雖然作為一個(gè)最基礎(chǔ)的元素，但是在整個(gè)設(shè)計(jì)體系中，它一直都扮演著一個(gè)十分重要的位置，在思維中，任何組件都可以通過(guò)上面按鈕的思維，對(duì)每個(gè)組件進(jìn)行拆解分析，無(wú)論是組件的狀態(tài)、組件的類型，在實(shí)際工作中，都需要你去深入思考。關(guān)于我呢， 也因?yàn)椴攘撕芏嗫?，因此想分享給大家。

參考鏈接

https://blog.prototypr.io/8-rules-for-perfect-button-design-185d1202ee9c

https://medium.com/@uxmovement/when-you-need-to-show-a-buttons-loading-state-41fc4d5e3c65

https://atlassian.design/guidelines/product/components/buttons

https://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/

相關(guān)閱讀

B端設(shè)計(jì)：盤(pán)點(diǎn)篩選控件的基本知識(shí)

B端設(shè)計(jì)：導(dǎo)航菜單的設(shè)計(jì)5步法

作者：CE，2B行業(yè)的2B設(shè)計(jì)師～。公眾號(hào)：CeDesign

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

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