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

我們都知道各種各樣不同名稱的按鈕情龄，比如行為召喚按鈕，靈魂按鈕等這些按鈕對(duì)于大家理解按鈕設(shè)計(jì)很有幫助，但今天不討論具體的按鈕區(qū)別屠橄，今天主要和大家分享按鈕設(shè)計(jì)的思考決策，通過模型的方式展現(xiàn)出連接用戶闰挡、產(chǎn)品的按鈕體系設(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í)和理解中變化的。

按鈕設(shè)計(jì)的分析模型

基礎(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í)且成體系的按鈕設(shè)計(jì)方案棺弊。內(nèi)容主要包括如下

1晶密、產(chǎn)品目標(biāo)

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

3侈净、人類的認(rèn)知

4尊勿、按鈕的形式

產(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ì)較弱蹂析。

同時(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)券捂龄，查看其他信息释涛。

基于互聯(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)知度，塑造全局維度的按鈕體系桥言。

動(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)湖雹。

思考流程模型圖

為了減輕設(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)形式傳遞品牌癣籽、特性等感性的視覺信息挽唉。總體的思考流程如下

1筷狼、產(chǎn)品的關(guān)鍵指標(biāo)

2瓶籽、場(chǎng)景目標(biāo)

3、用戶的行為

4桑逝、用戶的特點(diǎn)和認(rèn)知

5棘劣、按鈕的環(huán)境

6俏让、位置

7楞遏、設(shè)計(jì)形式

關(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)痘括。

場(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)景的變化即使調(diào)整按鈕重要層級(jí)的變化。例如電商產(chǎn)品中的列表頁目標(biāo)是篩選內(nèi)容椅贱，而詳情頁是購買物品懂算，同時(shí)也有次要流程唉韭，比如咨詢店家，收藏犯犁，查看更多等等属愤。

用戶行為

用戶行為和用戶目標(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)景中的適宜行為奄薇。

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

用戶是自帶標(biāo)簽的一個(gè)群體，打造符合群體個(gè)性的視覺化語言有利于用戶產(chǎn)生認(rèn)同感抗愁，和依賴感馁蒂。同時(shí)有科學(xué)數(shù)據(jù)表明人類對(duì)于顏色的敏感性高于形狀，看到的事物的第1秒中蜘腌，顏色信息占所有信息的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)尺寸。

按鈕的環(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)營(yíng)的不同勃刨，頁面內(nèi)容非常豐富，顏色較多股淡，整個(gè)頁面的環(huán)境比較復(fù)雜身隐，所以重要行動(dòng)點(diǎn)的按鈕設(shè)計(jì)通過顏色、重復(fù)唯灵、形狀來抓住用戶的關(guān)注點(diǎn)贾铝，引導(dǎo)用戶的行為。

按鈕的位置

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

1、內(nèi)容的聯(lián)系性

2搞监、符合頁面內(nèi)容的瀏覽順序?

3水孩、對(duì)應(yīng)行動(dòng)點(diǎn)的重要層級(jí)镰矿。

通常情況下按鈕的位置與相關(guān)信息強(qiáng)聯(lián)系琐驴，按鈕位置的變化也對(duì)應(yīng)著背后用戶行為邏輯的調(diào)整。例如微信讀書邀請(qǐng)好友頁面秤标，頁面1是符合用戶的閱讀順序绝淡，并且團(tuán)隊(duì)信息和邀請(qǐng)按鈕強(qiáng)關(guān)聯(lián)。頁面2的按鈕形式則弱化了視覺引導(dǎo)苍姜，違背了頁面目標(biāo)牢酵。頁面3雖然強(qiáng)化了引導(dǎo)，但違背了格式塔的相近原則和用戶的閱讀順序衙猪。

設(shè)計(jì)形式

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

1垫释、創(chuàng)意性?

2丝格、品牌性?

3、產(chǎn)品特色?

4棵譬、層級(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)品設(shè)計(jì)有深度的理解和思考柒室，跳出業(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ù)逢渔。