在互聯(lián)網(wǎng)產(chǎn)品中，按鈕系統(tǒng)是產(chǎn)品與用戶之間的連接樞紐，是構(gòu)成用戶體驗(yàn)的一部分。本文中，筆者將解析產(chǎn)品按鈕系統(tǒng)的設(shè)計(jì)過程，并用基礎(chǔ)模型、動(dòng)態(tài)模型與思考流程模型進(jìn)行說明。

筆者從忙碌的工作生活中抽出時(shí)間，分享自己關(guān)于按鈕系統(tǒng)設(shè)計(jì)的思考。

我們都知道各種各樣不同名稱的按鈕，比如行為召喚按鈕、靈魂按鈕等，這些按鈕對(duì)于大家理解按鈕設(shè)計(jì)很有幫助，但今天不討論具體的按鈕區(qū)別。

今天主要和大家分享按鈕設(shè)計(jì)的思考決策，通過模型的方式呈現(xiàn)出連接用戶、產(chǎn)品按鈕系統(tǒng)的設(shè)計(jì)思考過程。以四張圖的形式展現(xiàn)出來，這四張圖分別是：基礎(chǔ)模型圖、動(dòng)態(tài)模型圖、思考流程模型圖、表現(xiàn)形式拆解圖（對(duì)設(shè)計(jì)元素進(jìn)行拆解）。

在現(xiàn)實(shí)工業(yè)社會(huì)中，我們接觸到的很多工業(yè)產(chǎn)品都有是按鈕的，這些按鈕作為人類的行動(dòng)點(diǎn)幫助人類操作產(chǎn)品，就像是人與人之間的對(duì)話。

隨著互聯(lián)網(wǎng)化的推進(jìn)，互聯(lián)網(wǎng)線上產(chǎn)品繼承了這個(gè)優(yōu)秀的特征，讓人類通過按鈕來和網(wǎng)站、App等線上產(chǎn)品溝通交流。按鈕作為人類和產(chǎn)品之間的紐帶，正在發(fā)揮著很大的作用。所以我們需要思考如何使按鈕系統(tǒng)價(jià)值最大化。

一、按鈕的發(fā)展歷程

首先看一下按鈕的發(fā)展歷程。在生活中，工業(yè)制成品的按鈕是有很多物理屬性的，比如：形狀、顏色、質(zhì)感、聲音、震動(dòng)等等，人類通過不斷的學(xué)習(xí)和理解，逐漸形成了對(duì)于按鈕的認(rèn)知（人類對(duì)于事物的認(rèn)知是基于特征的），下圖是工業(yè)產(chǎn)品的按鈕。

隨著互聯(lián)網(wǎng)的發(fā)展，線上產(chǎn)品的按鈕設(shè)計(jì)在用戶認(rèn)知模型的基礎(chǔ)上，延續(xù)了按鈕的部分特征——真實(shí)、細(xì)節(jié)、質(zhì)感等；而現(xiàn)在產(chǎn)品中按鈕設(shè)計(jì)更加地簡(jiǎn)約，只繼承了按鈕設(shè)計(jì)的核心特征。當(dāng)然在這個(gè)過程中，用戶對(duì)于按鈕的認(rèn)知也是在學(xué)習(xí)和理解中變化的。

二、按鈕系統(tǒng)的設(shè)計(jì)思考模型

1. 基礎(chǔ)模型圖

在設(shè)計(jì)按鈕的過程中，設(shè)計(jì)師容易陷入到每一個(gè)具體的需求中。由于需求的零碎而導(dǎo)致按鈕價(jià)值的零碎，甚至是不統(tǒng)一、不協(xié)調(diào)。而每一種類型的按鈕背后也都承載了數(shù)據(jù)邏輯和用戶行為，按鈕系統(tǒng)的不統(tǒng)一就會(huì)產(chǎn)生錯(cuò)誤的視覺引導(dǎo)和心里暗示。所以設(shè)計(jì)師需要跳出需求導(dǎo)向的設(shè)計(jì)思維，從產(chǎn)品的全局出發(fā)，在產(chǎn)品體驗(yàn)的基礎(chǔ)上，輸出具有不同層級(jí)且成系統(tǒng)的按鈕設(shè)計(jì)方案。

內(nèi)容主要包括如下：

• 產(chǎn)品目標(biāo)
• 用戶、場(chǎng)景、目標(biāo)、行為四者之間的關(guān)系
• 人類的認(rèn)知
• 按鈕的形式

（1）產(chǎn)品目標(biāo)

產(chǎn)品目標(biāo)可以幫助設(shè)計(jì)師更好地理解業(yè)務(wù)，明確產(chǎn)品的操作流程。區(qū)別對(duì)待流程的主次，哪個(gè)流程最接近產(chǎn)品目標(biāo)，把產(chǎn)品目標(biāo)和操作流程做一個(gè)相關(guān)性的分析和總結(jié)。例如電商平臺(tái)淘寶的產(chǎn)品商業(yè)目標(biāo)是提升GMV。只有和商機(jī)相關(guān)的行動(dòng)點(diǎn)才是層級(jí)最高的按鈕，其他的按鈕是次級(jí)行動(dòng)點(diǎn)。

而在篩選頁面的場(chǎng)景中，用戶的主要目標(biāo)是通過篩選來選擇出符合自己需求的內(nèi)容。篩選是行為，但用戶更關(guān)注的是列表的內(nèi)容；且篩選并不是一個(gè)和產(chǎn)品目標(biāo)強(qiáng)關(guān)聯(lián)的行為，只是其中的一個(gè)流程，和整個(gè)頁面的信息環(huán)境相比，篩選按鈕相對(duì)較弱。

而詳情頁是可以帶來商機(jī)和轉(zhuǎn)換的，符合產(chǎn)品的商業(yè)目標(biāo)，所以底部按鈕視覺層級(jí)較高，形成突出的視覺引導(dǎo)行動(dòng)點(diǎn)，其他“查看全部信息”、收藏、客服等按鈕層級(jí)相對(duì)較弱。

（2）用戶、場(chǎng)景、目標(biāo)、行為四者之間的關(guān)系

同時(shí)在每一個(gè)操作流程中，用戶、場(chǎng)景、目標(biāo)、行為四個(gè)元素是互相關(guān)聯(lián)并且變化的，不同的場(chǎng)景會(huì)導(dǎo)致用戶目標(biāo)和行為的變化，所以不同的場(chǎng)景會(huì)有不同層級(jí)的按鈕設(shè)計(jì)。

例如：在淘寶的列表頁場(chǎng)景中，用戶的主要目標(biāo)是查看符合需求的內(nèi)容，行為是篩選和對(duì)比。當(dāng)用戶進(jìn)入到詳情頁場(chǎng)景中時(shí)，目標(biāo)則是對(duì)內(nèi)容的深度獲取，主要行為是添加購物車或者購買，次要行為是收藏、分享、領(lǐng)券，查看其他信息。

（3）人類的認(rèn)知

基于互聯(lián)網(wǎng)產(chǎn)品的使用，用戶對(duì)產(chǎn)品按鈕的設(shè)計(jì)形式已形成一定的認(rèn)知和理解，形成了特有的認(rèn)知模型。通過對(duì)于用戶的分析和了解，可以幫助設(shè)計(jì)師縮小設(shè)計(jì)形式的范圍。同一個(gè)行業(yè)的產(chǎn)品的按鈕設(shè)計(jì)形式都是有一定的共性。

例如下圖，電商的按鈕通常情況下是暖色系，強(qiáng)轉(zhuǎn)換按鈕位于屏幕的底部，按鈕的視覺和整個(gè)頁面形成強(qiáng)烈的對(duì)比，更加聚焦。

基于上述三點(diǎn)的分析，設(shè)計(jì)師在理解產(chǎn)品框架的基礎(chǔ)上融合產(chǎn)品和品牌特色，來設(shè)計(jì)按鈕的表達(dá)樣式。按鈕的形式有很多，例如：靈魂按鈕、文字按鈕、彌散投影按鈕、漸變色按鈕等等，設(shè)計(jì)師可以在已知按鈕形式的基礎(chǔ)上增加視覺特性、建立差異化、提升產(chǎn)品視覺的認(rèn)知度，塑造全局維度的按鈕體系。

2. 動(dòng)態(tài)模型圖

通常情況下，設(shè)計(jì)師在設(shè)計(jì)方案中的思考是停留在靜止頁面中，缺乏對(duì)于場(chǎng)景頁面內(nèi)容的動(dòng)態(tài)分析和理解。而動(dòng)態(tài)模型圖可以幫助設(shè)計(jì)師主動(dòng)思考場(chǎng)景內(nèi)容的動(dòng)態(tài)變化（包括層級(jí)和動(dòng)態(tài)）。

動(dòng)態(tài)模型圖主要由層級(jí)線和動(dòng)態(tài)線構(gòu)成，通過對(duì)基礎(chǔ)模型的分析得出按鈕的層級(jí)和樣式，基于層級(jí)和表現(xiàn)形式的基礎(chǔ)上增加時(shí)間的維度，呈現(xiàn)更加立體的按鈕設(shè)計(jì)體系。主要包括不同層級(jí)按鈕的默認(rèn)態(tài)、點(diǎn)擊態(tài)、進(jìn)行態(tài)、完成態(tài)和不可點(diǎn)擊態(tài)。

3. 思考流程模型圖

為了減輕設(shè)計(jì)師的思考和理解負(fù)擔(dān)，通過對(duì)基礎(chǔ)模型圖和動(dòng)態(tài)模型圖的整理，歸納整理出了一整套思考流程。通過對(duì)關(guān)鍵節(jié)點(diǎn)的思考，讓按鈕設(shè)計(jì)更符合產(chǎn)品目標(biāo)和用戶的認(rèn)知，使設(shè)計(jì)賦能產(chǎn)品，提升產(chǎn)品的關(guān)鍵指標(biāo)?；谛枨蠓治?，通過嚴(yán)謹(jǐn)?shù)谋憩F(xiàn)形式傳遞品牌、特性等感性的視覺信息?？傮w的思考流程如下：

• 產(chǎn)品的關(guān)鍵指標(biāo)
• 場(chǎng)景目標(biāo)
• 用戶的行為
• 用戶的特點(diǎn)和認(rèn)知
• 按鈕的環(huán)境
• 位置
• 設(shè)計(jì)形式

（1）關(guān)鍵指標(biāo)

產(chǎn)品的關(guān)鍵指標(biāo)為設(shè)計(jì)確定方向。明確設(shè)計(jì)目標(biāo)，在和指標(biāo)相關(guān)聯(lián)的重要的行動(dòng)點(diǎn)上設(shè)計(jì)最高層級(jí)的按鈕，吸引用戶關(guān)注點(diǎn)，引導(dǎo)用戶操作，對(duì)用戶形成強(qiáng)心理暗示，提升關(guān)鍵指標(biāo)數(shù)據(jù)。

例如：作為電商平臺(tái)淘寶的關(guān)鍵指標(biāo)是轉(zhuǎn)換率。只有帶來商機(jī)的行動(dòng)點(diǎn)才是層級(jí)最高的行為，詳情頁中的購買和加入購物車是屬于和關(guān)鍵指標(biāo)強(qiáng)關(guān)聯(lián)的行動(dòng)點(diǎn)。而查看更多、收藏、客服等關(guān)聯(lián)性相對(duì)較弱，所以操作層級(jí)屬于次級(jí)行動(dòng)點(diǎn)。

（2）場(chǎng)景目標(biāo)
用戶在完成自己的目標(biāo)的流程中會(huì)在不同場(chǎng)景中穿梭，由于操作任務(wù)的復(fù)雜性，每一個(gè)場(chǎng)景中都有主要流程和輔助流程。所以對(duì)于場(chǎng)景中的主要目標(biāo)的行動(dòng)點(diǎn)，采取相對(duì)重要層級(jí)的按鈕設(shè)計(jì)方式，弱化輔助流程的操作按鈕，減弱對(duì)于主流程的干擾。

場(chǎng)景的變化也會(huì)導(dǎo)致用戶目標(biāo)和行為的變化，在設(shè)計(jì)中需要根據(jù)場(chǎng)景的變化，及時(shí)調(diào)整按鈕重要層級(jí)的變化。例如：電商產(chǎn)品中的列表頁目標(biāo)是篩選內(nèi)容，而詳情頁是購買物品；同時(shí)也有次要流程，比如咨詢店家，收藏，查看更多等等。

（3）用戶行為

用戶行為和用戶目標(biāo)是強(qiáng)關(guān)聯(lián)的，基于目標(biāo)和用戶相關(guān)行為的基礎(chǔ)上，去理解因?yàn)閳?chǎng)景的不同，用戶會(huì)采取不同的行為。

例如：車輛內(nèi)是相對(duì)較小且不穩(wěn)定的空間，滑動(dòng)相對(duì)點(diǎn)擊的成本較低，且對(duì)手機(jī)固定位置的干擾相對(duì)影響小。所以滴滴司機(jī)端在接到客人時(shí)，確認(rèn)乘客上車的按鈕采用了滑動(dòng)方式的按鈕，更好地迎合用戶在具體場(chǎng)景中的適宜行為。

（4）用戶特點(diǎn)和認(rèn)知

用戶是自帶標(biāo)簽的一個(gè)群體，打造符合群體個(gè)性的視覺化語言，有利于用戶產(chǎn)生認(rèn)同感和依賴感。同時(shí)，有科學(xué)數(shù)據(jù)表明：人類對(duì)于顏色的敏感性高于形狀?？吹绞挛锏牡?秒中，顏色信息占所有信息的80%，并且人類對(duì)于顏色信息的思考成本要低于形狀。所以在按鈕設(shè)計(jì)的過程中，要減少復(fù)雜形狀的出現(xiàn)，通過顏色的形式聚焦視線、吸引用戶。

例如：現(xiàn)在大部分APP的按鈕形狀采用了矩形、圓角矩形或全圓角矩形，這樣的形狀更加符合用戶的認(rèn)知模型。再如下圖中淘寶和造作的詳情頁，由于用戶群體和產(chǎn)品定位的差異性，整個(gè)頁面的基調(diào)是不同的，而基調(diào)差異的第一印象即是通過顏色來區(qū)分的。

另一個(gè)就是按鈕的點(diǎn)擊區(qū)域大小，根據(jù)人類的手指面積大小得出10mm x 10mm是最優(yōu)的點(diǎn)擊目標(biāo)尺寸。

（5）按鈕的環(huán)境

按鈕的環(huán)境具體是指每一個(gè)頁面的信息復(fù)雜情況。內(nèi)容較少的頁面，按鈕容易聚焦；然而現(xiàn)實(shí)情況是——每一個(gè)線上產(chǎn)品都有很多頁面，數(shù)據(jù)多種多樣，顏色更是五言六色。在一個(gè)顏色復(fù)雜、信息繁多，層級(jí)劃分不明確的頁面中，按鈕的設(shè)計(jì)就需要有針對(duì)性的設(shè)計(jì)。

例如下圖中自如頁面整體信息層級(jí)明確，頁面內(nèi)容相對(duì)去哪兒app的詳情頁面較少，所以通過色塊的對(duì)比就可以聚焦用戶視線。但在去哪兒的app頁面中，由于產(chǎn)品的差異和運(yùn)營的不同，頁面內(nèi)容非常豐富，顏色較多，整個(gè)頁面的環(huán)境比較復(fù)雜；所以重要行動(dòng)點(diǎn)的按鈕設(shè)計(jì)，通過顏色、重復(fù)、形狀來抓住用戶的關(guān)注點(diǎn)，引導(dǎo)用戶的行為。

（6）按鈕的位置

合理的位置決定一個(gè)按鈕的可視性，可用性。按鈕的位置需滿足：

• 內(nèi)容的聯(lián)系性
• 符合頁面內(nèi)容的瀏覽順序
• 對(duì)應(yīng)行動(dòng)點(diǎn)的重要層級(jí)

通常情況下按鈕的位置與相關(guān)信息強(qiáng)聯(lián)系，按鈕位置的變化也對(duì)應(yīng)著背后用戶行為邏輯的變化。

例如微信讀書邀請(qǐng)好友頁面，頁面1是符合用戶的閱讀順序，并且團(tuán)隊(duì)信息和邀請(qǐng)按鈕強(qiáng)關(guān)聯(lián)；頁面2的按鈕形式則弱化了視覺引導(dǎo)，違背了頁面目標(biāo)；頁面3雖然強(qiáng)化了引導(dǎo)，但違背了格式塔的相近原則和用戶的閱讀順序。

（7）設(shè)計(jì)形式

設(shè)計(jì)形式是我們看到的最終表象效果，也是最終的完成效果。需要滿足以下特性：

• 創(chuàng)意性
• 品牌性
• 產(chǎn)品特色
• 層級(jí)關(guān)系

按鈕體系有多種按鈕組成，單個(gè)按鈕由多種元素構(gòu)成。設(shè)計(jì)師可以通過調(diào)整設(shè)計(jì)元素匹配用戶的認(rèn)知，去構(gòu)建不同層級(jí)的按鈕體系。具體使用哪種形式、哪些表現(xiàn)語言要基于上述決策點(diǎn)的具體分析。

我們都知道按鈕有很多種，比如彌散投影按鈕，圓角按鈕等等。這些按鈕主要都是由背景色、描變、底紋、文字、投影、輔助圖形、品牌元素等構(gòu)成，通過對(duì)按鈕層級(jí)的分析和歸納，采用不同的設(shè)計(jì)元素構(gòu)建多層級(jí)的按鈕體系語言，讓按鈕體系更加統(tǒng)一、協(xié)調(diào)、一致。

三、總結(jié)

設(shè)計(jì)師需要對(duì)產(chǎn)品有深度的理解和思考，跳出業(yè)務(wù)導(dǎo)向的思考流程，從系統(tǒng)體驗(yàn)維度思考產(chǎn)品的整體性，在整體性的基礎(chǔ)上去構(gòu)思方案中的每一個(gè)設(shè)計(jì)細(xì)節(jié)。做到從整體開始，從局部入手，再回歸到整體的思考設(shè)計(jì)流程。單一維度的思考和表現(xiàn)，無法完整地凸顯設(shè)計(jì)的價(jià)值，更何談賦能業(yè)務(wù)。

作者：亮king，高級(jí)設(shè)計(jì)師，微信公眾號(hào)：體驗(yàn)設(shè)計(jì)說

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

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