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