起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識3個模型，完成按鈕系統設計
在互聯網產品中，按鈕系統是產品與用戶之間的連接樞紐，是構成用戶體驗的一部分。本文中，筆者將解析產品按鈕系統的設計過程，并用基礎模型、動態模型與思考流程模型進行說明。
筆者從忙碌的工作生活中抽出時間，分享自己關于按鈕系統設計的思考。
我們都知道各種各樣不同名稱的按鈕，比如行為召喚按鈕、靈魂按鈕等，這些按鈕對于大家理解按鈕設計很有幫助，但今天不討論具體的按鈕區別。
今天主要和大家分享按鈕設計的思考決策，通過模型的方式呈現出連接用戶、產品按鈕系統的設計思考過程。以四張圖的形式展現出來，這四張圖分別是：基礎模型圖、動態模型圖、思考流程模型圖、表現形式拆解圖（對設計元素進行拆解）。
在現實工業社會中，我們接觸到的很多工業產品都有是按鈕的，這些按鈕作為人類的行動點幫助人類操作產品，就像是人與人之間的對話。
隨著互聯網化的推進，互聯網線上產品繼承了這個優秀的特征，讓人類通過按鈕來和網站、App等線上產品溝通交流。按鈕作為人類和產品之間的紐帶，正在發揮著很大的作用。所以我們需要思考如何使按鈕系統價值最大化。
一、按鈕的發展歷程
首先看一下按鈕的發展歷程。在生活中，工業制成品的按鈕是有很多物理屬性的，比如：形狀、顏色、質感、聲音、震動等等，人類通過不斷的學習和理解，逐漸形成了對于按鈕的認知（人類對于事物的認知是基于特征的），下圖是工業產品的按鈕。
隨著互聯網的發展，線上產品的按鈕設計在用戶認知模型的基礎上，延續了按鈕的部分特征——真實、細節、質感等；而現在產品中按鈕設計更加地簡約，只繼承了按鈕設計的核心特征。當然在這個過程中，用戶對于按鈕的認知也是在學習和理解中變化的。
二、按鈕系統的設計思考模型
1. 基礎模型圖
在設計按鈕的過程中，設計師容易陷入到每一個具體的需求中。由于需求的零碎而導致按鈕價值的零碎，甚至是不統一、不協調。而每一種類型的按鈕背后也都承載了數據邏輯和用戶行為，按鈕系統的不統一就會產生錯誤的視覺引導和心里暗示。所以設計師需要跳出需求導向的設計思維，從產品的全局出發，在產品體驗的基礎上，輸出具有不同層級且成系統的按鈕設計方案。
內容主要包括如下：
- 產品目標
- 用戶、場景、目標、行為四者之間的關系
- 人類的認知
- 按鈕的形式
（1）產品目標
產品目標可以幫助設計師更好地理解業務，明確產品的操作流程。區別對待流程的主次，哪個流程最接近產品目標，把產品目標和操作流程做一個相關性的分析和總結。例如電商平臺淘寶的產品商業目標是提升GMV。只有和商機相關的行動點才是層級最高的按鈕，其他的按鈕是次級行動點。
而在篩選頁面的場景中，用戶的主要目標是通過篩選來選擇出符合自己需求的內容。篩選是行為，但用戶更關注的是列表的內容；且篩選并不是一個和產品目標強關聯的行為，只是其中的一個流程，和整個頁面的信息環境相比，篩選按鈕相對較弱。
而詳情頁是可以帶來商機和轉換的，符合產品的商業目標，所以底部按鈕視覺層級較高，形成突出的視覺引導行動點，其他“查看全部信息”、收藏、客服等按鈕層級相對較弱。
（2）用戶、場景、目標、行為四者之間的關系
同時在每一個操作流程中，用戶、場景、目標、行為四個元素是互相關聯并且變化的，不同的場景會導致用戶目標和行為的變化，所以不同的場景會有不同層級的按鈕設計。
例如：在淘寶的列表頁場景中，用戶的主要目標是查看符合需求的內容，行為是篩選和對比。當用戶進入到詳情頁場景中時，目標則是對內容的深度獲取，主要行為是添加購物車或者購買，次要行為是收藏、分享、領券，查看其他信息。
（3）人類的認知
基于互聯網產品的使用，用戶對產品按鈕的設計形式已形成一定的認知和理解，形成了特有的認知模型。通過對于用戶的分析和了解，可以幫助設計師縮小設計形式的范圍。同一個行業的產品的按鈕設計形式都是有一定的共性。
例如下圖，電商的按鈕通常情況下是暖色系，強轉換按鈕位于屏幕的底部，按鈕的視覺和整個頁面形成強烈的對比，更加聚焦。
基于上述三點的分析，設計師在理解產品框架的基礎上融合產品和品牌特色，來設計按鈕的表達樣式。按鈕的形式有很多，例如：靈魂按鈕、文字按鈕、彌散投影按鈕、漸變色按鈕等等，設計師可以在已知按鈕形式的基礎上增加視覺特性、建立差異化、提升產品視覺的認知度，塑造全局維度的按鈕體系。
2. 動態模型圖
通常情況下，設計師在設計方案中的思考是停留在靜止頁面中，缺乏對于場景頁面內容的動態分析和理解。而動態模型圖可以幫助設計師主動思考場景內容的動態變化（包括層級和動態）。
動態模型圖主要由層級線和動態線構成，通過對基礎模型的分析得出按鈕的層級和樣式，基于層級和表現形式的基礎上增加時間的維度，呈現更加立體的按鈕設計體系。主要包括不同層級按鈕的默認態、點擊態、進行態、完成態和不可點擊態。
3. 思考流程模型圖
為了減輕設計師的思考和理解負擔，通過對基礎模型圖和動態模型圖的整理，歸納整理出了一整套思考流程。通過對關鍵節點的思考，讓按鈕設計更符合產品目標和用戶的認知，使設計賦能產品，提升產品的關鍵指標?；谛枨蠓治觯ㄟ^嚴謹的表現形式傳遞品牌、特性等感性的視覺信息?？傮w的思考流程如下：
- 產品的關鍵指標
- 場景目標
- 用戶的行為
- 用戶的特點和認知
- 按鈕的環境
- 位置
- 設計形式
（1）關鍵指標
產品的關鍵指標為設計確定方向。明確設計目標，在和指標相關聯的重要的行動點上設計最高層級的按鈕，吸引用戶關注點，引導用戶操作，對用戶形成強心理暗示，提升關鍵指標數據。
例如：作為電商平臺淘寶的關鍵指標是轉換率。只有帶來商機的行動點才是層級最高的行為，詳情頁中的購買和加入購物車是屬于和關鍵指標強關聯的行動點。而查看更多、收藏、客服等關聯性相對較弱，所以操作層級屬于次級行動點。
（2）場景目標
用戶在完成自己的目標的流程中會在不同場景中穿梭，由于操作任務的復雜性，每一個場景中都有主要流程和輔助流程。所以對于場景中的主要目標的行動點，采取相對重要層級的按鈕設計方式，弱化輔助流程的操作按鈕，減弱對于主流程的干擾。
場景的變化也會導致用戶目標和行為的變化，在設計中需要根據場景的變化，及時調整按鈕重要層級的變化。例如：電商產品中的列表頁目標是篩選內容，而詳情頁是購買物品；同時也有次要流程，比如咨詢店家，收藏，查看更多等等。
（3）用戶行為
用戶行為和用戶目標是強關聯的，基于目標和用戶相關行為的基礎上，去理解因為場景的不同，用戶會采取不同的行為。
例如：車輛內是相對較小且不穩定的空間，滑動相對點擊的成本較低，且對手機固定位置的干擾相對影響小。所以滴滴司機端在接到客人時，確認乘客上車的按鈕采用了滑動方式的按鈕，更好地迎合用戶在具體場景中的適宜行為。
（4）用戶特點和認知
用戶是自帶標簽的一個群體，打造符合群體個性的視覺化語言，有利于用戶產生認同感和依賴感。同時，有科學數據表明：人類對于顏色的敏感性高于形狀。看到事物的第1秒中，顏色信息占所有信息的80%，并且人類對于顏色信息的思考成本要低于形狀。所以在按鈕設計的過程中，要減少復雜形狀的出現，通過顏色的形式聚焦視線、吸引用戶。
例如：現在大部分APP的按鈕形狀采用了矩形、圓角矩形或全圓角矩形，這樣的形狀更加符合用戶的認知模型。再如下圖中淘寶和造作的詳情頁，由于用戶群體和產品定位的差異性，整個頁面的基調是不同的，而基調差異的第一印象即是通過顏色來區分的。
另一個就是按鈕的點擊區域大小，根據人類的手指面積大小得出10mm x 10mm是最優的點擊目標尺寸。
（5）按鈕的環境
按鈕的環境具體是指每一個頁面的信息復雜情況。內容較少的頁面，按鈕容易聚焦；然而現實情況是——每一個線上產品都有很多頁面，數據多種多樣，顏色更是五言六色。在一個顏色復雜、信息繁多，層級劃分不明確的頁面中，按鈕的設計就需要有針對性的設計。
例如下圖中自如頁面整體信息層級明確，頁面內容相對去哪兒app的詳情頁面較少，所以通過色塊的對比就可以聚焦用戶視線。但在去哪兒的app頁面中，由于產品的差異和運營的不同，頁面內容非常豐富，顏色較多，整個頁面的環境比較復雜；所以重要行動點的按鈕設計，通過顏色、重復、形狀來抓住用戶的關注點，引導用戶的行為。
（6）按鈕的位置
合理的位置決定一個按鈕的可視性，可用性。按鈕的位置需滿足：
- 內容的聯系性
- 符合頁面內容的瀏覽順序
- 對應行動點的重要層級
通常情況下按鈕的位置與相關信息強聯系，按鈕位置的變化也對應著背后用戶行為邏輯的變化。
例如微信讀書邀請好友頁面，頁面1是符合用戶的閱讀順序，并且團隊信息和邀請按鈕強關聯；頁面2的按鈕形式則弱化了視覺引導，違背了頁面目標；頁面3雖然強化了引導，但違背了格式塔的相近原則和用戶的閱讀順序。
（7）設計形式
設計形式是我們看到的最終表象效果，也是最終的完成效果。需要滿足以下特性：
- 創意性
- 品牌性
- 產品特色
- 層級關系
按鈕體系有多種按鈕組成，單個按鈕由多種元素構成。設計師可以通過調整設計元素匹配用戶的認知，去構建不同層級的按鈕體系。具體使用哪種形式、哪些表現語言要基于上述決策點的具體分析。
我們都知道按鈕有很多種，比如彌散投影按鈕，圓角按鈕等等。這些按鈕主要都是由背景色、描變、底紋、文字、投影、輔助圖形、品牌元素等構成，通過對按鈕層級的分析和歸納，采用不同的設計元素構建多層級的按鈕體系語言，讓按鈕體系更加統一、協調、一致。
三、總結
設計師需要對產品有深度的理解和思考，跳出業務導向的思考流程，從系統體驗維度思考產品的整體性，在整體性的基礎上去構思方案中的每一個設計細節。做到從整體開始，從局部入手，再回歸到整體的思考設計流程。單一維度的思考和表現，無法完整地凸顯設計的價值，更何談賦能業務。
作者：亮king，高級設計師，微信公眾號：體驗設計說
本文由 @亮kingking 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash，基于CC0協議
滴滴司機端的例子有點兒牽強
空洞無物！
感謝分享