手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

產(chǎn)品設(shè)計(jì)之「取消按鈕」的使用詳解 | 細(xì)節(jié)分析

2019-7-11    資深UI設(shè)計(jì)者


如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

通過(guò)對(duì)「取消按鈕」的分析,指導(dǎo)各位正確的進(jìn)行對(duì)于「按鈕」的設(shè)計(jì)。


按鈕,無(wú)論是在 Web 還是 App 上都被廣泛地使用,而很少有設(shè)計(jì)師會(huì)注意到按鈕當(dāng)中的細(xì)節(jié),導(dǎo)致在設(shè)計(jì)過(guò)程中出現(xiàn)一些低級(jí)的錯(cuò)誤,使得用戶在完成任務(wù)的過(guò)程中產(chǎn)生阻礙,無(wú)法順利達(dá)成目的。


在許多優(yōu)秀的產(chǎn)品中,關(guān)于按鈕的設(shè)計(jì)已經(jīng)有了一套相應(yīng)的規(guī)范去執(zhí)行。作為設(shè)計(jì)師,應(yīng)該總結(jié)這些規(guī)范,并產(chǎn)出一套適用于自家產(chǎn)品的設(shè)計(jì)規(guī)則。這也是我寫「按鈕規(guī)范」系列文章的目的。


今天主要先與各位聊聊「取消按鈕」的設(shè)計(jì)思路。


關(guān)于「取消」,大多數(shù)人對(duì)其理解還停留在 PC 端,認(rèn)為「取消」的目的就是讓用戶停止操作上的流程。但時(shí)至今日,「取消按鈕」的設(shè)計(jì)已經(jīng)有許多解法與思路,如果不仔細(xì)研究與分析,可能會(huì)忽略一些用戶行為上的細(xì)節(jié)。


所以我們從下面三個(gè)大點(diǎn)來(lái)聊聊「取消按鈕」的設(shè)計(jì):

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

  2. 其背后的控制權(quán)(關(guān)于按鈕的權(quán)重信息)

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



按鈕中的「召喚行為」


通常,我們?cè)诋a(chǎn)品中會(huì)為了達(dá)成某種指標(biāo),需要在界面上引導(dǎo)用戶去完成我們希望其完成的操作。且這類操作是可以達(dá)成某種目的的,我們把這類操作稱為「召喚行為」,即從元素的角度引導(dǎo)用戶完成任務(wù)。


這類「召喚行為」最常出現(xiàn)的,是在按鈕設(shè)計(jì)的過(guò)程中。


用戶如何將元素理解為按鈕?就是通過(guò)對(duì)形狀和顏色的控制,使該元素看起來(lái)像一個(gè)按鈕。



它唯一的作用就是讓用戶點(diǎn)擊,并且是主動(dòng)讓用戶點(diǎn)擊。

我們經(jīng)常在各類設(shè)計(jì)中見到這樣的按鈕設(shè)計(jì),或許還有更多樣式,如:



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


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


這類設(shè)計(jì)的結(jié)果就是:無(wú)需讓用戶思考要點(diǎn)哪里,而是直接判斷下一步是否進(jìn)行。幫助用戶簡(jiǎn)化一個(gè)思考點(diǎn)。


注:因?yàn)榕袛嗍欠襁M(jìn)行的操作還取決于功能本身以及文案的提示,與我們今天要聊的不是一回事。所以我們跳過(guò)這塊,直接聊「召喚行為」與「取消按鈕」的關(guān)系。


這段內(nèi)容各位只要記住:按鈕的行進(jìn)與回退,基本遵循「召喚行為」的思路來(lái)設(shè)計(jì)。


這個(gè)概念知道了,我們就可以對(duì)后面的內(nèi)容繼續(xù)進(jìn)行拆解了。



背后的控制權(quán)


接下來(lái)我們從多個(gè)角度來(lái)挖一下「取消按鈕」的設(shè)計(jì),分析其不同地位。


a. 安全性后退


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


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


如:



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


這是多數(shù)產(chǎn)品采用的設(shè)計(jì)方式。


比如美團(tuán)的這個(gè)頁(yè)面:



產(chǎn)品希望用戶登錄,就會(huì)強(qiáng)化「登錄」行為的按鈕,弱化「回退」行為的按鈕。


同樣,我們?cè)谖⑿排笥讶Φ脑O(shè)計(jì)里也能見到這樣的設(shè)計(jì):



我們總是希望用戶持續(xù)操作下去,但也要給用戶提供回退的行為,所以在這些設(shè)計(jì)中,「取消按鈕」會(huì)被弱化,「行進(jìn)按鈕」會(huì)被強(qiáng)化,因?yàn)椤溉∠粹o」在這里不是產(chǎn)品人員期望的「召喚行為」。


這是一直以來(lái)的設(shè)計(jì)共識(shí),但如今也發(fā)生了些許變化?!溉∠粹o」也開始具備「召喚行為」的屬性。


b. 強(qiáng)化「取消按鈕」


當(dāng)我們不希望用戶退出某個(gè)界面,或停止某個(gè)流程時(shí),往往會(huì)選擇將「取消按鈕」強(qiáng)化。


如:



或:



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


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



這里的「繼續(xù)選座」就是「取消」,因?yàn)檫@里的「取消」成了「召喚行為」,所以通過(guò)改變文案的方式,確保用戶留下來(lái)繼續(xù)進(jìn)行流程中的任務(wù)。


但是不可取的是,這里的「返回」反而給了用戶一種需要思考的壓力。返回?是留在這里,還是退出去?思考幾秒后,反應(yīng)過(guò)來(lái),是退出去。這樣的文案與只有在看到「繼續(xù)選座」后進(jìn)行對(duì)比,才能反應(yīng)過(guò)來(lái)具體是什么意思,除非是用戶具備操作習(xí)慣,知道「右邊」是「行進(jìn)」操作,才能很快理解。(當(dāng)然還有個(gè)問(wèn)題,我們?cè)诘谌髂K來(lái)說(shuō)明)


但是多數(shù)用戶還是得思考一下,所以要改,最好兩者文案都能改了,否則思考的「停頓」會(huì)讓用戶產(chǎn)生厭惡感。


且在一些產(chǎn)品界面里,為了避免用戶在流程中終止行為,甚至?xí)D(zhuǎn)移「取消」與「行進(jìn)」兩者的位置,如:



之前截圖了某個(gè)產(chǎn)品的界面,寫文這天發(fā)現(xiàn)已經(jīng)改回來(lái),這里就沒放了。


各位謹(jǐn)記,最好不要這樣進(jìn)行設(shè)計(jì),因?yàn)橛脩粼?App 的操作上已經(jīng)習(xí)慣左邊取消,右邊行進(jìn),調(diào)換位置雖然能暫時(shí)解決用戶的退出行為,但容易產(chǎn)生誤操作,與用戶的期望不同,導(dǎo)致在產(chǎn)品體驗(yàn)上會(huì)被用戶排斥。


所以到這里,先給一個(gè)結(jié)論,即在 App 的設(shè)計(jì)上,行進(jìn)操作在右,回退操作在左,召喚屬性根據(jù)場(chǎng)景對(duì)按鈕做突出處理。


但是「取消按鈕」真的應(yīng)該具備召喚屬性么?不著急,我們第三模塊再細(xì)聊。下面我們先聊聊 Web 與 App 的之間的差異。


c. Web 與 App 的位置差異


我們現(xiàn)在見到越來(lái)越多的 Web 端產(chǎn)品,也開始遵循 App 產(chǎn)品的設(shè)計(jì),把「取消按鈕」放在左邊,「召喚行為」按鈕放在右邊。


但在早期,Web 的「取消按鈕」基本是放在右邊,原因是鼠標(biāo)的移動(dòng)路徑是根據(jù)眼動(dòng)規(guī)則來(lái),我們的視線會(huì)首先與文案聚焦到「召喚行為」的按鈕上,也就是左邊,這時(shí)候鼠標(biāo)輕而易舉地隨之而來(lái)。


而手指行為的操作,會(huì)以右為前進(jìn)導(dǎo)向,且右手手勢(shì)因?yàn)楸憬菪?,也?huì)以右為確認(rèn)操作。否則單手持機(jī),且行進(jìn)路徑長(zhǎng)的話,用戶想進(jìn)行確認(rèn)操作會(huì)相對(duì)比較吃力。



這就是 Web 與 App 在按鈕位置上的主要區(qū)別。


那會(huì)有同學(xué)問(wèn)到說(shuō) Web 的「取消」到底是放在左邊還是右邊?這里我說(shuō)點(diǎn)自己的想法。


如果根據(jù)眼動(dòng)規(guī)則與鼠標(biāo)的操作模式來(lái)說(shuō),Web 「取消按鈕」當(dāng)然是放在右邊更為合適。但如今人們已經(jīng)習(xí)慣了移動(dòng)產(chǎn)品的「右行進(jìn),左取消」屬性,且在界面上的視覺終點(diǎn)一般是在右邊,能引導(dǎo)用戶進(jìn)行召喚行為。


但這不具備指導(dǎo)性原則,如果要拆開說(shuō),里面還有很多說(shuō)法。


比如 windows 和 macOS 的設(shè)計(jì)規(guī)范里「取消按鈕」的位置完全是相反的。win 的取消在右,macOS 的取消在左。



兩套體系的按鈕位置相互矛盾。這件事本身也說(shuō)明,只要你在你的 Web 產(chǎn)品里規(guī)范好自己的設(shè)計(jì)體系,就沒有對(duì)錯(cuò)之分。不要一會(huì)兒這個(gè)「取消」在左邊,一會(huì)兒那個(gè)「取消」又在右邊,給用戶造成認(rèn)知障礙即可。


但是!我更推崇 macOS 的設(shè)計(jì)規(guī)范。原因在于成熟度與一致性。


主觀因素:眾所周知,蘋果是更擅長(zhǎng)做設(shè)計(jì)的公司,體驗(yàn)過(guò) Mac 的朋友應(yīng)該能理解我說(shuō)的這句話。一般來(lái)說(shuō),我只聽過(guò)從 Win 切換到 Mac 的,沒有說(shuō)從 Mac 切換到 Win 的,除了少部分因?yàn)楣ぷ餍枨笮枰绞褂玫摹?


客觀因素:移動(dòng)產(chǎn)品的普及,已經(jīng)有相當(dāng)成熟的設(shè)計(jì)體系支持行進(jìn)按鈕右側(cè)化設(shè)計(jì),統(tǒng)一 Web 或 PC 產(chǎn)品只會(huì)讓用戶的操作行為更方便。


這就是我本小節(jié)想聊的,關(guān)于 Web 與 App 按鈕設(shè)計(jì)的差異。



「取消按鈕」的正確解法


我相信,只要是平時(shí)稍微有認(rèn)真觀察的同學(xué),都能知道我上述聊的內(nèi)容。我個(gè)人也不認(rèn)為這些內(nèi)容具備任何需要總結(jié)的價(jià)值。但是如果不寫出來(lái),就沒辦法說(shuō)明我接下來(lái)要聊的內(nèi)容,也是我這篇文章的重點(diǎn)部分。


通過(guò)上述內(nèi)容,我以不同類型的按鈕案例來(lái)解釋「取消按鈕」的控制權(quán)。各位可以看出,即使是不同類型的「取消按鈕」,在權(quán)重上的道理也都是一樣的。


但我上面舉的所有產(chǎn)品功能的例子,都不是最佳設(shè)計(jì)方案,包括微信。


那如何設(shè)計(jì)才是最佳方式呢?取消按鈕真的具備召喚行為?


a. 界面層與彈框?qū)?/strong>


其實(shí)嚴(yán)謹(jǐn)點(diǎn)來(lái)說(shuō),界面層的「取消按鈕」與彈框?qū)拥摹溉∠粹o」的意義是不同的。


雖然都是安全性后退,但是前者多了一層含義:放棄屬性。


還是微信朋友圈的界面:



這里的「取消按鈕」有兩個(gè)狀態(tài),一是用戶剛點(diǎn)進(jìn)來(lái),無(wú)任何操作,點(diǎn)擊取消,解散該頁(yè)面;二是進(jìn)來(lái)之后,附帶操作行為,這時(shí)候點(diǎn)擊取消,不僅僅是解散當(dāng)前頁(yè)面,還包括「放棄當(dāng)前編輯的狀態(tài)」。


所以會(huì)彈出第二層彈窗:



這時(shí)候無(wú)論點(diǎn)擊「保留」還是「不保留」都是取消,退出當(dāng)前編輯頁(yè)面,不對(duì)系統(tǒng)產(chǎn)生變更行為,但都屬于放棄了當(dāng)前操作。

無(wú)非就是微信通過(guò)加粗「保留」來(lái)告訴用戶,這里的召喚行為是它而已。


所以這層「取消」的含義,不僅僅是取消,還多了一步是否把你放棄的內(nèi)容保留下來(lái)的邏輯。


因此在這層含義上,「取消按鈕」也需要特殊處理。


如果說(shuō)微信這里的「取消按鈕」在設(shè)計(jì)上沒有突出其特殊性,那 Twitter 同樣的例子,就比微信高明很多:



同樣是發(fā)布行為,Twitter 在「取消按鈕」上選用了品牌色。因?yàn)樵谄渚庉嫚顟B(tài)下點(diǎn)擊取消,會(huì)出現(xiàn)與微信同樣的情況:




而 Twitter 的高明之處不僅僅在其對(duì)于「取消按鈕」的樣式處理,還在于其對(duì)是否「保留」做了明確的設(shè)計(jì)區(qū)分:微信的保留等于 Twitter 的保存草稿,不保留等于刪除。而在通用型設(shè)計(jì)規(guī)范里,刪除內(nèi)容在樣式上應(yīng)該區(qū)別于發(fā)布以及取消。


更甚者是,其彈出的這個(gè)彈框中,還保留了真正意義上的「取消」,即解散行為。在 Twitter 的這個(gè)設(shè)計(jì)上,兩個(gè)取消雖然都叫取消,但是通過(guò)顏色進(jìn)行區(qū)分,來(lái)表示它們之間在邏輯上的差異,這才是我說(shuō)的高明之處 —— 對(duì)每個(gè)按鈕的處理都恰到好處。


類似的還有微博,但是微博對(duì)于「取消按鈕」的類型差異沒有做出區(qū)分,原因在于它為了弱化界面層的取消,與彈框?qū)拥娜∠麡邮奖3至艘恢隆?



雖然沒什么太大問(wèn)題,但從嚴(yán)格的邏輯上來(lái)說(shuō),這兩者取消是存在歧義的。只是用戶已經(jīng)習(xí)慣且理解了,所以沒要造成使用的負(fù)擔(dān)。


微信的彈框雖然避免了這層歧義,但在操作上還是不夠直觀,我每次發(fā)微信朋友圈,點(diǎn)取消彈出「保留」與「不保留」我都要停頓一下謹(jǐn)慎地進(jìn)行選擇,生怕自己點(diǎn)錯(cuò)。


當(dāng)然,這里面還有關(guān)于顏色的說(shuō)法。


這時(shí)候再對(duì)比 Twitter 的界面就能看出設(shè)計(jì)師之間的差距了。


b. 彈框?qū)印溉∠诡伾牟町?/strong>


上面提到的許多例子中,還存在一個(gè)類似的問(wèn)題:它們大多選用 iOS 自帶的彈框直接做為操作對(duì)象。


我始終覺得在 iOS 提供的彈框中,兩個(gè)操作的按鈕顏色保持一致是不對(duì)的。


粗細(xì)有時(shí)候很難被直觀感受,而顏色可以在第一時(shí)間被感知。


比如前面提到的這個(gè)案例:



理想情況下,即使用戶知道右邊是行進(jìn),左邊是取消,但彈出這個(gè)彈框的時(shí)候,不免還是需要再次閱讀一遍進(jìn)行確認(rèn)。


但如果改個(gè)顏色,好像就更好理解(當(dāng)然文案也是問(wèn)題,但優(yōu)先級(jí)弱于顏色),畢竟彈框也是設(shè)計(jì)的一部分:



需要注意的是,用戶既然已經(jīng)選擇取消,就盡量明確的告知用戶,不要為了留存而留存,以至于模糊化該彈窗的選擇結(jié)果。

所以召喚行為,并不是強(qiáng)迫用戶去做,而是遵循用戶的「旨意」去提供選擇。這里的「返回」才是真正的召喚行為,而「取消」并不具備召喚屬性。硬生生的給「取消」附上召喚屬性,只會(huì)讓用戶在操作時(shí)摸不著頭腦。


包括下圖,我常常因?yàn)樵谑褂?App 時(shí),彈出這樣的彈框,而不能在第一時(shí)間進(jìn)行正確的點(diǎn)擊,選擇退出當(dāng)前的 App。



這樣例子還有很多。


但是我覺得做得好的,應(yīng)該是這樣的:



或:



這就是刻板印象造成的結(jié)果。我們應(yīng)該學(xué)會(huì)適當(dāng)?shù)厥褂每丶⒏鶕?jù)自己的產(chǎn)品對(duì)其進(jìn)行優(yōu)化。而不是一味跟風(fēng)。


綜上所述:界面層的取消,為了表示其作用性的不同,且界面元素眾多,突出顏色是沒問(wèn)題的;但彈框?qū)拥娜∠c確認(rèn)在顏色上沒做區(qū)分,直接用不太明顯的粗細(xì)效果讓用戶聚焦于這兩個(gè)內(nèi)容的選擇上,其實(shí)是不友好的設(shè)計(jì)。


如果對(duì) iOS 設(shè)計(jì)規(guī)范有足夠的了解的同學(xué)就能知道:它們?cè)趶椏蚩丶辖o出的兩個(gè)選擇都不是真正意義上的召喚行為按鈕,只是常規(guī)內(nèi)容,且更適用于產(chǎn)品開發(fā),而不是設(shè)計(jì)指導(dǎo)。


如果你仔細(xì)觀察 macOS 的設(shè)計(jì),就能發(fā)現(xiàn)他們?yōu)榫邆湔賳拘袨榈陌粹o位置與顏色都做了特殊處理,并不是簡(jiǎn)單的同色系,或用粗細(xì)表示。如圖:



雖然用 macOS 來(lái)反駁 iOS 似乎不太合理,但我只是想說(shuō)明在設(shè)計(jì)結(jié)果上,我們應(yīng)該有自己的思考。


就這個(gè)問(wèn)題,我在 Twitter 上咨詢了前 Apple,后創(chuàng)辦了 UXM 的產(chǎn)品設(shè)計(jì)師 Anthony。原因是,他曾經(jīng)也就「取消按鈕」的顏色提出過(guò)一些個(gè)人看法。


在我說(shuō)了這些內(nèi)容之后,他跟我說(shuō)的第一句話是:

Hi Dai — While Apple is very good at design, they are not perfect.(Apple 非常擅長(zhǎng)設(shè)計(jì),但它們并不完美。) 

接著他繼續(xù)說(shuō)道:你這套理論非常棒,所以你完全可以按它去給自己的產(chǎn)品構(gòu)建一套設(shè)計(jì)規(guī)范,并不一定要遵循 Apple。


借著這個(gè)機(jī)會(huì),我還跟他聊了許多其他內(nèi)容。而這件事本身再一次驗(yàn)證了我的想法:越牛逼的人越謙虛,且平易近人。


哦,不是,跑題了,應(yīng)該是:不存在完美的設(shè)計(jì)規(guī)范,設(shè)計(jì)師在成長(zhǎng)過(guò)程中并不一定要循規(guī)蹈矩,受到規(guī)則的限制,認(rèn)為設(shè)計(jì)就該如此。而是學(xué)會(huì)獨(dú)立思考,突破屏障,去挖掘更深層次的內(nèi)容。


看完這篇文章,再去翻一翻 Google Material Design Guidelines,就會(huì)有一種「哇哦!原來(lái)如此!」的感觸了。



小結(jié)


所以我這篇文章的內(nèi)容結(jié)論是:

  1. 位置固定,左回退,右行進(jìn);

  2. 顏色區(qū)分,左淺色,右深色;

  3. 召喚行為不是用戶想做的事,而是我們應(yīng)該要讓用戶做的事,但不是強(qiáng)迫,所以正常情況下,「取消按鈕」通常不具備召喚屬性。


可能有人會(huì)覺得,這么一個(gè)小問(wèn)題,不至于用這么長(zhǎng)一篇文章來(lái)說(shuō)明,不過(guò)人么,就是存在這樣那樣的區(qū)別。我認(rèn)為需要就可以了。


本來(lái)這篇文章還有一段關(guān)于「手勢(shì)按鈕尺寸」的內(nèi)容,不過(guò)到目前為止,文章內(nèi)容太長(zhǎng)了,所以我暫時(shí)去掉了,會(huì)在之后的文章里分享給大家。


當(dāng)然,到此為止,我聊的內(nèi)容基本適用于通用場(chǎng)景,且適用于大部分的產(chǎn)品設(shè)計(jì),但在一些特殊場(chǎng)景下的按鈕位置、顏色,也會(huì)有不同設(shè)計(jì)方式,這就要根據(jù)具體問(wèn)題來(lái)具體分析。


我這里只是把「取消按鈕」的設(shè)計(jì)差異、細(xì)節(jié)提供給大家,以便幫助各位在工作中有更深入的思考,而不是想當(dāng)然的說(shuō)就是放左邊或右邊,或者就應(yīng)該是什么顏色等等。包括對(duì)待其他內(nèi)容也一樣。

藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。


分享本文至:

日歷

鏈接

個(gè)人資料

存檔