行為召喚按鈕的功能都有哪些類型?
一、行為召喚按鈕的功能的類型
1、誘導購買
當行為召喚的目的是誘導購買時,按鈕的設計不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點擊,讓用戶進來看一眼就能知道該按鈕的用途。
美團外賣的結算按鈕的顏色采用黑黃對比、形狀采用具有親和力的圓角,在樣式上加入投影同時加入送餐員的元素,配上小紅點,另外加入價格誘導,讓你可直觀看到優惠了多少錢,促使你進一步操作。淘寶詳情的加入購物車和馬上搶是一個組合按鈕,作為行為召喚按鈕我們可以明確的看到,不管從顏色、形狀、樣式都能夠讓我們快速注意到。
2、訂閱關注
當行為召喚的目的是訂閱關注時,其重要程度相比誘導購買低很多,但是在設計時我們仍然需要考慮一個問題,是用戶關注更重要還是用戶閱讀內容更重要。當內容重要時,按鈕的設計需要弱化處理,比如優酷星球;當點擊關注重要時,按鈕的設計需要強化處理。
優酷的星球主要引導用戶去閱讀內容,感興趣你就關注,因此在設計時對關注按鈕進行了弱化處理,讓按鈕和界面融合。土豆視頻關注界面的目的就是引導用戶關注。因此按鈕設計較為明顯,采用黃色填充加圖標引導,在視覺上和產品內容形成強烈對比。
3、利益誘導
當行為召喚的目的是利益誘導時,可以考慮顏色、形狀、加入圖標、誘導文字等設計方法引導用戶點擊。
大眾點評領獎按鈕明顯比賺積分的層級高,因此為了突出領獎按鈕,采用了色塊設計的樣式,同時賺積分按鈕采用描邊設計進行弱化處理。騰訊doki打榜頁面沖榜的重要層級高,因此在設計時不僅采用了色塊、加入動效圖標、同時還加入了誘導文字,讓按鈕更明顯同時誘導用戶點擊,其他按鈕則采用描邊樣式弱化處理。
4、文字誘導
文字誘導簡單來說就是通過文字,誘導用戶進行下一步操作,多用于空頁面、活動頁面中,因此在設計時采用簡單的色塊填充即可,如果該頁面為活動頁面也可增加漸變或投影樣式,讓按鈕更有空間感,進而突出按鈕。
以得到為例,當你還沒有學習計劃時,它會對你進行提示“開始制定學習計劃”,同時其按鈕采用重要程度較高的色塊+投影的方式,誘導用戶點擊。以大眾點評為例,當你還沒有攻略時,它會對你進行提示“我也要創建攻略”,同時其按鈕采用漸變填充的方式,誘導用戶點擊。
二、行為召喚按鈕的設計規則
1、尺寸
結合CTA按鈕的先前目標是吸引用戶的注意,提高轉化,因此按鈕尺寸越大,它被用戶發現和點擊的概率就越高,但也不宜過大,以免破壞布局的視覺組合和層次結構。較好的按鈕和按鈕文字應該遵循頁面的比例進行設計,以便用戶更好識別。
2、色彩
除了通過尺寸差異來營造視覺吸引力外,一個能夠激勵用戶點擊的按鈕需要具備的另外一個關鍵元素就是顏色的選擇與運用。好的色彩運用能夠從情緒與視覺上干預用戶,吸引其注意力。所以設計師在進行按鈕設計時,需要考慮到整體的配色方案,使CTA按鈕能夠在眾多UI控件中脫穎而出。
3、按鈕形狀
我們常說藝術來源于模仿,設計來源于生活。這句話對于按鈕外形的繪制非常適用,因為在現實生活中按鈕的使用率也非常高,比如開關燈、開電腦、敲鍵盤等,所以設計師在設計過程中會吸取現實生活中按鈕的形狀,擇優選擇水平矩形或者圓角矩形來表示CTA按鈕。另一方面,一些研究建議圓角矩形更能加強信息的傳遞并且能夠將人的視線集中在中心位置上。
4、按鈕樣式
突出的按鈕樣式,特別是矩形或圓矩形按鈕,利用投影等樣式有效還原生活中按鈕的模樣,提示用戶按鈕是可以進行點擊的。這與扁平化的按鈕樣式對比在空間維度上增加了一度,在復雜或寬裕的空間中更能起到強調的作用。
5、文本字體
文本內容的字體、大小、粗細等因素都會影響到CTA按鈕的視覺權重。一般設計遵循高優先級按鈕使用粗體文本,低優先級按鈕使用細體文本的原則,以此來影響用戶閱讀它們時的優先級,因此CTA按鈕文本盡量選擇粗體文本,誘使用戶進行點擊,提高轉化率。
6、添加圖標
添加圖標同樣也可以給CTA按鈕增加用戶額外的視覺重量,提高用戶在瀏覽頁面時優先關注的概率,增加CTA按鈕的轉化效果。如下圖的對比,視覺上會更加直觀的注意到帶有圖標的按鈕。
7、位置
CTA按鈕的設計,可以說是整個頁面轉化的核心與靈魂,尤其決定了一些付費推廣的轉化成果。所以除去按鈕本身的設計外,CTA按鈕的位置擺放也尤為關鍵。
延伸閱讀1:按鈕簡介
“按鈕”在UI設計中是一種常用的UI控件,一個成功的按鈕控件可以有效的提高交互體驗,引導用戶,提升產品轉化率。目前我們所熟知的按鈕按功能類型主要分為六大類,分別是行為召喚按鈕(CTA)、懸浮按鈕、標簽按鈕、表格按鈕、命令按鈕及開關按鈕。

猜你喜歡LIKE
相關推薦HOT
更多>>
MySQL普通索引不等于為什么會失效?
一、MySQL普通索引不等于會失效的原因1、列數據類型不匹配如果查詢條件中的列類型與索引列類型不匹配,MySQL無法使用索引進行優化。例如,索引...詳情>>
2023-10-18 11:14:01
為什么關系型數據庫系統不易于scaling out(橫向擴展)?
一、為什么關系型數據庫系統不易于scaling out(橫向擴展)因為傳統的SQL數據庫沒想到要分片存儲,而現在的NewSQL開始考慮到這些問題了。當然分...詳情>>
2023-10-18 10:49:50
MySQL InnoDB引擎中的各種鎖具體是怎么實現的?
一、MySQL InnoDB引擎中的各種鎖的實現方式MySQL InnoDB引擎中的各種鎖是通過多種機制實現的1、共享鎖(Shared Lock)和排他鎖(Exclusive Lock...詳情>>
2023-10-18 10:26:59
Android怎么連接遠程數據庫?
一、Android連接遠程數據庫的方法1、確保遠程數據庫可以遠程訪問首先,確保您的遠程數據庫允許遠程連接。這通常需要在數據庫服務器的配置中啟用...詳情>>
2023-10-18 10:09:10熱門推薦
常用JS前端開發框架有哪些?
沸事務并發控制s2pl和s2pl有何區別?
熱為什么一臺電腦可以安裝多個SQL Server實例?
熱MySQL普通索引不等于為什么會失效?
新為什么關系型數據庫系統不易于scaling out(橫向擴展)?
MySQL InnoDB引擎中的各種鎖具體是怎么實現的?
Android怎么連接遠程數據庫?
為什么MySQL在innodb引擎中即使使用了MVCC機制仍然會出現丟失更新?
IO多路復用中select、poll、epoll之間的區別?
讀寫分離為什么能夠提升性能?
為什么mysql innodDB中組合索引中范圍查詢后的條件索引會失效?
為什么noteexpress不能建立數據庫也不能打開別的數據庫?
計算機前端是什么?
APP中集成移動端車牌識別系統都能達到什么效果?
技術干貨






