寧波麥職教育

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

通過(guò)模型的方式呈現(xiàn)出按鈕系統(tǒng)設(shè)計(jì)思考過(guò)程，從忙碌的工作生活中抽出時(shí)間分享自己關(guān)于按鈕系統(tǒng)設(shè)計(jì)的思考。

我們都知道各種各樣不同名稱的按鈕，比如行為召喚按鈕，靈魂按鈕等這些按鈕對(duì)于大家理解按鈕設(shè)計(jì)很有幫助，但今天不討論具體的按鈕區(qū)別，今天主要和大家分享按鈕設(shè)計(jì)的思考決策，通過(guò)模型的方式呈現(xiàn)出連接用戶、產(chǎn)品的按鈕系統(tǒng)設(shè)計(jì)思考過(guò)程。以四張圖的形式展現(xiàn)出來(lái)，這四張圖分別是基礎(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)品。隨著互聯(lián)網(wǎng)化的推進(jìn)，互聯(lián)網(wǎng)線上產(chǎn)品繼承了這個(gè)優(yōu)秀的特征，讓人類通過(guò)按鈕來(lái)和網(wǎng)站、App等線上產(chǎn)品溝通交流。按鈕作為人類和產(chǎn)品之間的紐帶正在發(fā)揮著很大的作用。所以我們需要思考如何使按鈕系統(tǒng)價(jià)值最大化。

按鈕的發(fā)展歷程

首先看一下按鈕的發(fā)展歷程。在生活中，工業(yè)制成品的按鈕是有很多物理屬性，比如形狀、顏色、質(zhì)感、聲音、震動(dòng)等等，人類通過(guò)不斷的學(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è)過(guò)程中，用戶對(duì)于按鈕的認(rèn)知也是在學(xué)習(xí)和理解中變化的。

按鈕系統(tǒng)的設(shè)計(jì)思考模型 基礎(chǔ)模型圖

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

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)。而在篩選頁(yè)面的場(chǎng)景中，用戶的主要目標(biāo)是通過(guò)篩選來(lái)選擇出符合自己需求的內(nèi)容，篩選是行為，但用戶更關(guān)注的是列表的內(nèi)容，且篩選并不是一個(gè)和產(chǎn)品目標(biāo)強(qiáng)關(guān)聯(lián)的行為，只是其中的一個(gè)流程，和整個(gè)頁(yè)面的信息環(huán)境相比，篩選按鈕相對(duì)較弱。而詳情頁(yè)是可以帶來(lái)商機(jī)和轉(zhuǎn)換的，符合產(chǎn)品的商業(yè)目標(biāo)，所以底部按鈕視覺(jué)層級(jí)較高，形成突出的視覺(jué)引導(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ì)，例如在淘寶的列表頁(yè)場(chǎng)景中用戶的主要目標(biāo)是查看符合需求的內(nèi)容，行為是篩選和對(duì)比。當(dāng)用戶進(jìn)入到詳情頁(yè)場(chǎng)景中時(shí)，目標(biāo)則是對(duì)內(nèi)容做決策，主要行為是添加購(gòu)物車或者購(gòu)買，次要行為是收藏、分享、領(lǐng)券，查看其他信息。

基于互聯(lián)網(wǎng)產(chǎn)品的使用，用戶對(duì)產(chǎn)品按鈕的設(shè)計(jì)形式已形成一定的認(rèn)知和理解，形成了特有的認(rèn)知模型。通過(guò)對(duì)于用戶的分析和了解，可以幫助設(shè)計(jì)師縮小設(shè)計(jì)形式的范圍。同一個(gè)行業(yè)的產(chǎn)品的按鈕設(shè)計(jì)形式都是有一定的共性。例如下圖，電商的按鈕通常情況下是暖色系，強(qiáng)轉(zhuǎn)換按鈕位于屏幕的底部，按鈕的視覺(jué)和整個(gè)頁(yè)面形成強(qiáng)烈的對(duì)比，更加聚焦。

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

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

通常情況下設(shè)計(jì)師在設(shè)計(jì)方案的過(guò)程中的思考是停留在靜止頁(yè)面中，缺乏對(duì)于場(chǎng)景頁(yè)面內(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)成，通過(guò)對(duì)基礎(chǔ)模型圖的分析得出按鈕的層級(jí)和樣式，在層級(jí)和表現(xiàn)形式的基礎(chǔ)上增加時(shí)間的維度，呈現(xiàn)更加立體的按鈕設(shè)計(jì)系統(tǒng)。主要包括不同層級(jí)按鈕的默認(rèn)態(tài)、點(diǎn)擊態(tài)、進(jìn)行態(tài)、完成態(tài)，和不可點(diǎn)擊態(tài)。

思考流程模型圖

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

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)注，引導(dǎo)用戶操作，對(duì)用戶形成強(qiáng)心里暗示，提升關(guān)鍵指標(biāo)數(shù)據(jù)。例如：作為電商平臺(tái)淘寶的關(guān)鍵指標(biāo)是轉(zhuǎn)換率。只有帶來(lái)商機(jī)的行動(dòng)點(diǎn)才是層級(jí)最高的按鈕，詳情頁(yè)中的購(gòu)買和加入購(gòu)物車是屬于和關(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)品中的列表頁(yè)目標(biāo)是篩選內(nèi)容，而詳情頁(yè)是購(gòu)買物品，同時(shí)也有次要流程，比如咨詢店家，收藏，查看更多等等。

用戶行為

用戶行為和用戶目標(biāo)是強(qiáng)關(guān)聯(lián)的，在用戶目標(biāo)和行為的基礎(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è)性的視覺(jué)化語(yǔ)言有利于用戶產(chǎn)生認(rèn)同感和依賴感。同時(shí)有科學(xué)數(shù)據(jù)表明人類對(duì)于顏色的敏感性高于形狀，看到的事物的第1秒中，顏色信息占所有信息的80%，并且人類對(duì)于顏色信息的思考成本要低于形狀。所以在按鈕設(shè)計(jì)的過(guò)程中減少?gòu)?fù)雜形狀的出現(xiàn)，通過(guò)顏色聚焦視線，吸引用戶。例如現(xiàn)在大部分APP的按鈕形狀采用了矩形、圓角矩形或全圓角矩形，這樣的形狀更加符合用戶的認(rèn)知模型。例如下圖中淘寶和造作的詳情頁(yè)，由于用戶群體和產(chǎn)品定位的差異性，整個(gè)頁(yè)面的基調(diào)是不同的，而基調(diào)差異的第一印象即是通過(guò)顏色來(lái)區(qū)分的。

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

按鈕的環(huán)境

按鈕的環(huán)境具體是指每一個(gè)頁(yè)面的信息復(fù)雜情況。內(nèi)容較少的頁(yè)面，按鈕容易聚焦，然而現(xiàn)實(shí)情況是每一個(gè)線上產(chǎn)品都有很多頁(yè)面，數(shù)據(jù)多種多樣，顏色更是五顏六色。在一個(gè)顏色復(fù)雜、信息繁多，層級(jí)劃分不明確的頁(yè)面中，按鈕就需要有針對(duì)性的設(shè)計(jì)。例如下圖中自如頁(yè)面整體信息層級(jí)明確，頁(yè)面內(nèi)容相對(duì)去哪兒app的詳情頁(yè)面較少，所以通過(guò)色塊的對(duì)比就可以聚焦用戶視線，但在去哪兒的app頁(yè)面中，由于產(chǎn)品的差異和運(yùn)營(yíng)的不同，頁(yè)面內(nèi)容非常豐富，顏色較多，整個(gè)頁(yè)面的環(huán)境比較復(fù)雜，所以重要行動(dòng)點(diǎn)的按鈕設(shè)計(jì)通過(guò)顏色、重復(fù)、形狀來(lái)抓住用戶的關(guān)注點(diǎn)，引導(dǎo)用戶的行為。

按鈕的位置

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

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

通常情況下按鈕的位置與相關(guān)信息強(qiáng)聯(lián)系，按鈕位置的變化也對(duì)應(yīng)著背后用戶行為邏輯的變化。例如微信讀書邀請(qǐng)好友頁(yè)面，頁(yè)面1是符合用戶的閱讀順序，并且團(tuán)隊(duì)信息和邀請(qǐng)按鈕強(qiáng)關(guān)聯(lián)。頁(yè)面2的按鈕形式則弱化了視覺(jué)引導(dǎo)，違背了頁(yè)面目標(biāo)。頁(yè)面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ì)師可以通過(guò)調(diào)整設(shè)計(jì)元素匹配用戶的認(rèn)知，去構(gòu)建不同層級(jí)的按鈕系統(tǒng)。具體使用哪種形式、哪些視覺(jué)語(yǔ)言要基于上述決策點(diǎn)的具體分析。文章的開(kāi)頭談到了多種形式的按鈕，比如彌散投影按鈕，圓角按鈕等等，這些按鈕主要都是由背景色、描邊、底紋、文字、投影、輔助圖形、品牌元素等構(gòu)成，通過(guò)對(duì)按鈕層級(jí)的分析和歸納，采用不同的設(shè)計(jì)元素構(gòu)建多層級(jí)的按鈕系統(tǒng)語(yǔ)言，讓按鈕系統(tǒng)更加統(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é)。做到從整體開(kāi)始，從局部入手，再回歸到整體的思考設(shè)計(jì)流程。單一維度的思考和表現(xiàn)，無(wú)法完整的凸顯設(shè)計(jì)的價(jià)值，更何談賦能業(yè)務(wù)。