乾貨!UI介面中「行為召喚按鈕」的設計秘訣

2022-09-21 08:09:07 字數 2817 閱讀 2436

以下內容由mockplus團隊翻譯整理,僅供學習交流,mockplus是更快更簡單的原型設計工具。

數字產品的有效互動系統由具有其任務和功能的小元素組成。為了建立豐富的互動系統,關注所有小元素的設計細節至關重要。

按鈕是使用者介面的核心互動元件,它在質量使用者體驗以及**和應用程式的轉換率方面發揮著重要作用。ui按鈕根據其功能的不同,可以分為不同的型別。本篇文章致力於講解「行為召喚(cta)按鈕」,涵蓋了他們的本質,在直覺導航中的角色以及它在業務目標中的重要性。讓我們一起來看看是什麼讓cta按鈕從最佳實踐中脫穎而出。

photo app

什麼是行為召喚按鈕?為什麼它如此重要?

行為召喚(cta)按鈕是網頁和移動使用者介面中的常見互動元素:其主要目標是誘使使用者採取某些操作,為特定頁面或螢幕呈現轉化,例如購買,聯絡 ,訂閱等。

傳統上,cta按鈕很容易被注意到,甚至有很多,設計者故意這樣建立它們,以使人們無法抗拒點選它。這也是為什麼它們通常都是以粗體字型呈現的原因,按鈕中包含了一種特殊的行為召喚(例如:「學習更多」或「現在購買」),這就鼓勵我們主動去點選它。

潛在客戶的生成和購買是建立號召性行動的基本業務目標。當乙個按鈕設計足夠吸引潛在客戶的注意力時,它可以吸引他們點選並進入下乙個階段,比如填寫乙個簡短的聯絡表單或提交產品的預訂。

數字機構的著陸頁

通過這種方式,**訪問者和應用使用者可以通過銷售渠道從乙個階段引導到另乙個階段,幫助他們了解有關產品或服務的詳細資訊。即www.cppcns.com使是專業製作的內容也可能無法保證使用者的高度參與度。如果沒有cta按鈕,人們更有可能只是快速掃瞄內容,然後置之不顧。

有些人可能認為足夠的「行為召喚按鈕」設計僅適用於大尺寸和鮮豔的顏色,以實現其所有目標。不過,事實並非如此,確保cta的有效性還有vpsoqq很多其它方面。讓我們看看他們適當使用的實際例子。

urban sketcher app

是什麼造就了強大的cta按鈕?

尺寸尺寸大小是幫助按照其重要性劃分ui元件的最常用工具之一。元素尺寸越大,它就變得越明顯。由於cta的先前目標是引起使用者的注意,因此設計師通常會試圖讓它們在螢幕上的其它按鈕中脫穎而出,特別是通過顯著的尺寸差別。

尺寸大的按鈕有很高的機會被發現和點選,但你也必須保持一些限制。乙個引人注目的「行為號召按鈕」通常是足夠大,可以被快速找到,但不能太大,以免布局的視覺組合和層次結構受到破壞。市場領導者通常會在其準則中提供有關按鈕有效大小的建議。例如,蘋果公司表示,移動使用者介面中的cta按鈕應至少為44 44 畫素,而微軟推薦至少為34 26 畫素。

tasty burger app

顏色和形狀

視覺上有吸引力的尺寸只是強大cta的乙個方面。為了讓按鈕更明顯,選擇豐富的顏色和形狀至關重要。事實表明人的情緒和行為與視覺環境是高度相關的。我們的思維對顏色和形狀有反應,但我們通常不會注意到這些細節。當我們的眼睛察覺到某一種顏色時,它們與大腦相連,同時大腦向內分泌系統發出訊號,釋放荷爾蒙,負責心情和情緒的變化。心理www.cppcns.com科學對不同的顏色和形狀是如何影響我們的意識有著具體的分支研究。在我以前的文章中,我描述了這種影響對設計解決方案的作用。以下是關於顏色和形狀具有的常見含義的簡要指南。

顏色含義:

形狀含義:

傳統上,cta按鈕看起來像水平矩形,因為人們習慣將這種形狀視為可點選的按鈕。此外,建議設計具有圓角的cta,因為它們被認為是具有吸引內部注意力的按鈕。

顏色的選擇取決於使設計過程更複雜的各個方面。設計師需要充分考慮以下這些因素,如作品的基本色彩,以及目標受眾的潛在偏好和心理特徵。在為cta選擇顏色時有乙個條件非常重要:那就是按鈕和背景顏色應該足夠鮮明,以便cta可以從其他ui元件中脫穎而出。

約會app著陸頁

放置cta按鈕的放置對他們的效能至關重要。如果他們位於使用者眼睛無法捕捉到的區域,則其他視覺方面(如顏色和尺寸)可能無法有效工作。但是如何理解什麼樣的位置更加有效呢?

大量研究表明,在閱讀網頁內容之前,人們會掃瞄它以了解他們是否感興趣。考慮到這一事實,設計人員可能會了解最突出的可掃瞄區域,並將行為號召按鈕置於使用者的可視路徑中。

根據不同的研究,包括尼爾森諾曼集團,uxpin團隊等發表的文章表明,網頁有幾種流行的掃瞄模式,其中包括「f」和「z」模式。

對於包含大量內容的網頁,例如部落格,新程式設計客棧聞平台,f模式是人們最常見的掃瞄模式。使用者首先掃瞄螢幕頂部的水平線,然後向下移動頁面並讀取通常覆蓋較短區域的水平線。 最後乙個是在左側的垂直線,在那裡,使用者在段落的初始句子中查詢自己感興趣的關鍵字。

z模式是一種典型的掃瞄著陸頁或未載入副本的網頁的模式,並且不需要向下滾動頁面,這意味著所有的核心資料在預滾動區域中都可見。使用者首先從左上角開始掃瞄頁面頂部,尋找重要資訊,然後下到另一側的對角,結束在頁面底部的水平線,然後再次從左到右開始。

這些模式允許設計師將cta放置在使用者最受關注的位置,例如頂角,並將其他要點注意力放在頂部和底部。另外,將cta按鈕放置在布局的中心也是乙個好方法,尤其是當它不與其他ui元素資訊過載的時候。

gourmet 網頁

microcopy在行為召喚的效率方面發揮著重要作用。它被定義為幫助使用者做某些操作的小段文字文字提示。更具體地說,它包括按鈕和選單副本,錯誤訊息,安全說明,條款和條件,以及任何型別的產品使用說明。

cta microcopy實際上是乙個可以迅速讓使用者豁然開朗的被小看的元素,它告訴使用者如果點選按鈕他們將觸發什麼。強大的cta microcopy通常很短但一致,因此可以快速吸引使用者的注意力。

bright vibe 日曆

「行為召喚按鈕」是電子商務中最強大的銷售工具之一,也是影響頁面或螢幕轉換率的重要因素之一。設計師需要了解cta的重要性,並深切關注影響其表現的所有細節。

原文作者:tubik studio

原文位址:

本文標題: 乾貨!ui介面中「行為召喚按鈕」的設計秘訣

本文位址: /news/plan/64771.html

更新UI介面

在同乙個ui介面中可能包含有 文字 文字框 進度條等多種控制項,如何在保持分布比例的基礎上將各元素排布的僅僅有條,這裡主要使用到grid布局。grid布局是wpf中一種非常常用的 布局,它可以將整個介面劃分為規則的幾行幾列,也可以單獨將其中一行劃分為需要的列數。介面中使用的控制項可以單獨位於乙個網格...

java介面安全《乾貨篇》

這輩子沒辦法做太多事情,所以每一件都要做到精彩絕倫!people can t do too many things in my life,so everything will be wonderful 需要用到 加解密工具類 自定義白名單 介面的安全性主要圍繞token timestamp ts 和...

UI 介面製作體會

最近,公司在為乙個新產品設計介面,我本人參與了此項工作,因而在這方面有些體會,籍此機會想把這些想法寫下來,做乙個階段的工作總結。在國內,能真正擁有乙個ui設計師的軟體公司真的少之又少,可以說是鳳毛麟角,一般公司都是只有美工,更確切地說,是在國內根本很難找到乙個專業的ui設計師。據調查,並不是國內人士...