確定/取消?取消/確定?到底按鈕要怎么擺放?

當(dāng)我們?cè)谠O(shè)計(jì)一款產(chǎn)品的時(shí)候,遇到確定/取消按鈕的時(shí)候,經(jīng)常會(huì)停下來(lái)想一想:到底是哪種位置合適?很多的新手PM,就會(huì)靠直覺(jué)或者自認(rèn)為怎么樣放舒服就咋樣,根據(jù)自己主觀的想法來(lái)?yè)v鼓這兩個(gè)按鈕。

下面,我們就來(lái)分析一下到底是確定,取消?還是取消,確定?

先看一下兩個(gè)不同見(jiàn)解的分析:

1、確定,取消位置

說(shuō)話習(xí)慣:

確定取消位置擺放,可以解釋為符合日常說(shuō)話習(xí)慣,因?yàn)槲覀兲岢鰡?wèn)題,并且有肯定否定選擇的時(shí)候,表達(dá)習(xí)慣經(jīng)常是這樣子“Are you sure?Yes?Or no?所以,確定取消位置可以這么解釋?zhuān)彩怯械览淼摹?/p>

閱讀習(xí)慣:

閱讀習(xí)慣都是從左到有右,從上到下,所以比較快速看到了確定。

2、取消,確定位置

增加了交互感:

取消之后是終止本次操作,不進(jìn)行下一步;確定是跳轉(zhuǎn)到下一個(gè)環(huán)節(jié);所以,取消在左邊,確定 在右邊是符合了推進(jìn)事項(xiàng)或者進(jìn)入下一環(huán)節(jié)的交互。

流程不需要折返:

用戶(hù)一般是從左往右看的,用戶(hù)讀完內(nèi)容,想取消,直接就是左邊點(diǎn)擊取消,流程不需要去折 返。

上面是兩種不通見(jiàn)解的分析,以下我們就來(lái)八一八該怎么放才合理。

1、個(gè)人總體認(rèn)為,平臺(tái)習(xí)慣第一原則。

windowns:確定取消

windowns

OSX取消確定

OSX

IOS取消確定

IOS

andoird取消確定

安卓

作為PM也好,UI設(shè)計(jì)也好,最好是跟操作系統(tǒng)保持一致,這樣可以節(jié)省用戶(hù)的辨識(shí)度。因?yàn)橛脩?hù)已經(jīng)習(xí)慣了操作系統(tǒng)的習(xí)慣,就算你認(rèn)為你的設(shè)計(jì)會(huì)幫助用戶(hù)節(jié)省半秒鐘時(shí)間,但是一旦用戶(hù)因?yàn)閼T性錯(cuò)點(diǎn)就損失的不只是半秒鐘的時(shí)間了。

2、用動(dòng)詞代替確定

動(dòng)詞代替確定

像上面的圖,APPLE的確定按鈕,用的是動(dòng)作 來(lái)代替,這樣做的好處是:可以起到警示作用,直接是告訴用戶(hù)下一步的操作是什么,誤點(diǎn)的概率會(huì)少點(diǎn)。

3、閱讀習(xí)慣理由是不成立的

用戶(hù)一般看到這兩個(gè)按鈕,不會(huì)去細(xì)看是什么,都是掃一眼就過(guò)了,真的沒(méi)有人回去腦子里去閱讀這兩個(gè)按鈕的,所以在這里用戶(hù)的閱讀習(xí)慣是不成立的。

4、誤操作,危險(xiǎn)的按鈕放遠(yuǎn)點(diǎn)

WIndowns

OS

上面的例子,拿 Windows 里的 Notepad 跟 OS X 上的 Keynote 對(duì)比,當(dāng)用戶(hù)在有更改沒(méi)有保存時(shí)試圖關(guān)閉 App時(shí),Notepad 的“不保存”按鈕夾在“保存”和“取消”之間,用戶(hù)無(wú)論是點(diǎn)“保存”還是“取消”都有可能誤點(diǎn)到“不保存”而丟失更改。而 Keynote 把兩個(gè)不會(huì)造成危害的“取消”和“保存”按鈕放在右邊,而把“刪除”放在最左邊。(由于 Keynote 會(huì)對(duì)已經(jīng)存在在磁盤(pán)上的文檔自動(dòng)保存更改,所以圖片截取得是關(guān)閉新文檔時(shí)的對(duì)話框。因此按鈕上是“Delete”,意思是點(diǎn)這個(gè)按鈕文檔就刪除了,易于理解。)

總結(jié):不要自以為操作系統(tǒng)給用戶(hù)培養(yǎng)的習(xí)慣并不重要,大家如果研究過(guò)安卓系統(tǒng)的話,都知道安卓一開(kāi)始的系統(tǒng)是確定取消,后面4.0左右的系統(tǒng)就改變?yōu)槿∠_定,當(dāng)時(shí)就很多人點(diǎn)錯(cuò)了。

所以,不管什么,也不用去研究什么原則,與操作系統(tǒng)保持統(tǒng)一是第一原則,如果你不信呢,就跟系統(tǒng)對(duì)著干看看吧。

好啦,今天分享到此,更多內(nèi)容可以關(guān)注微信公眾號(hào)”產(chǎn)品經(jīng)理之二三事“。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,675評(píng)論 25 709
  • 1 UI設(shè)計(jì)基礎(chǔ) 1.1 為iOS而設(shè)計(jì) 1.1.1 iOS包含以下3條設(shè)計(jì)原則: 遵從,UI應(yīng)該有助于人們理解內(nèi)...
    Willry閱讀 3,785評(píng)論 1 48
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 14,996評(píng)論 4 61
  • 我的妹妹今年二歲半了,是個(gè)煩人的家伙,她像鸚鵡一樣,我去哪她去哪,我說(shuō)啥她說(shuō)啥,我爬在涼席上看電視,她騎在...
    毛蟲(chóng)苑李博晶閱讀 849評(píng)論 0 2
  • 我喜歡在閑逛的時(shí)候溜達(dá)花店,偶遇自己喜歡的花,帶回家。去年,大約在初冬,一個(gè)路邊花店中,幾盆盛開(kāi)的鮮花,一眼望去滿...
    悠一一閱讀 10,366評(píng)論 9 7

友情鏈接更多精彩內(nèi)容