?

全國統一服務熱線:18021770366

站內公告:

淮安市嘉瑞廣告有限公司主要提供廣告設計制作安裝服務以及網站制作,是一家經驗豐富的廣告設計制作公司,擁有十幾年廣告設計制作經驗!

聯系我們CONTACT

地址:淮安市翔宇大道1009號
熱線:0517-8588 1663
Q Q:34665706
郵箱:[email protected]

18021770366

新聞中心

當前位置:主頁 > 新聞中心 >

UI設計中“取消按制作鈕”的使用分析詳解

2019-12-11 點擊量:

按鈕,無論是在 Web 還是 App 上都被廣泛地使用,而很少有設計師會注意到按鈕當中的細節,導致在設計過程中出現一些低級的錯誤,使得用戶在完成任務的過程中產生阻礙,無法順利達成目的。

在許多優秀的產品中,關于按鈕的設計已經有了一套相應的規范去執行。作為設計師,應該總結這些規范,并產出一套適用于自家產品的設計規則。這也是我寫「按鈕規范」系列文章的目的。

今天主要先與各位聊聊「取消按鈕」的設計思路。

關于「取消」,大多數人對其理解還停留在 PC 端,認為「取消」的目的就是讓用戶停止操作上的流程。但時至今日,「取消按鈕」的設計已經有許多解法與思路,如果不仔細研究與分析,可能會忽略一些用戶行為上的細節。

所以我們從下面三個大點來聊聊「取消按鈕」的設計:

1.按鈕中的「召喚行為」(理清按鈕設計的概念)

2.其背后的控制權(關于按鈕的權重信息)

3.「取消按鈕」的正確解法(重點)

 

 

按鈕中的「召喚行為」

通常,我們在產品中會為了達成某種指標,需要在界面上引導用戶去完成我們希望其完成的操作。且這類操作是可以達成某種目的的,我們把這類操作稱為「召喚行為」,即從元素的角度引導用戶完成任務。

這類「召喚行為」最常出現的,是在按鈕設計的過程中。

用戶如何將元素理解為按鈕?就是通過對形狀和顏色的控制,使該元素看起來像一個按鈕。

UI設計中“取消按鈕”的使用分析詳解

它唯一的作用就是讓用戶點擊,并且是主動讓用戶點擊。

我們經常在各類設計中見到這樣的按鈕設計,或許還有更多樣式,如:

UI設計中“取消按鈕”的使用分析詳解

它們的目的一致,都是召喚用戶進行點擊,至于類型的選擇一般根據功能界面的上下文情況進行判斷。

其重要程度也是以此順序排列:凸起 > 扁平 > 邊框 > 文本。

這類設計的結果就是:無需讓用戶思考要點哪里,而是直接判斷下一步是否進行。幫助用戶簡化一個思考點。

注:因為判斷是否進行的操作還取決于功能本身以及文案的提示,與我們今天要聊的不是一回事。所以我們跳過這塊,直接聊「召喚行為」與「取消按鈕」的關系。

這段內容各位只要記住:按鈕的行進與回退,基本遵循「召喚行為」的思路來設計。

這個概念知道了,我們就可以對后面的內容繼續進行拆解了。

 

 

背后的控制權

接下來我們從多個角度來挖一下「取消按鈕」的設計,分析其不同地位。

 

a. 安全性后退

「取消」在多數情況下,意為安全性地后退,并將界面恢復到原有的內容上,不對界面與功能本身造成破壞,防止對系統進行不必要地更改的「安全措施」。

所以正常來說,「取消按鈕」不是「召喚行為」。以至于通常在設計上會被弱化,以表示該按鈕在功能的流程中,不是主要的,且是提供給用戶作為回退余地的操作。

如:

UI設計中“取消按鈕”的使用分析詳解

在這張圖里,「登錄」是「召喚行為」,所以突出顯示。根據風格定義,用了扁平按鈕。而取消在這個場景里屬于「安全性后退」的操作,于是將其弱化。

這是多數產品采用的設計方式。

比如美團的這個頁面:

UI設計中“取消按鈕”的使用分析詳解

產品希望用戶登錄,就會強化「登錄」行為的按鈕,弱化「回退」行為的按鈕。

同樣,我們在微信朋友圈的設計里也能見到這樣的設計:

UI設計中“取消按鈕”的使用分析詳解

我們總是希望用戶持續操作下去,但也要給用戶提供回退的行為,所以在這些設計中,「取消按鈕」會被弱化,「行進按鈕」會被強化,因為「取消按鈕」在這里不是產品人員期望的「召喚行為」。

這是一直以來的設計共識,但如今也發生了些許變化。「取消按鈕」也開始具備「召喚行為」的屬性。

 

b. 強化「取消按鈕」

當我們不希望用戶退出某個界面,或停止某個流程時,往往會選擇將「取消按鈕」強化。

如:

UI設計中“取消按鈕”的使用分析詳解

或:

UI設計中“取消按鈕”的使用分析詳解

通過對字體的加粗,以暗示用戶不要輕易退出。在這個流程里,「取消按鈕」具備了「召喚行為」屬性。

也有產品通過改變「取消按鈕」的文案,讓其具備「召喚行為」的屬性,使得用戶在此過程中輕易不要退出該流程:

UI設計中“取消按鈕”的使用分析詳解

?
渡劫5龙宫赚钱