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