一個(gè)APP在發(fā)狀態(tài)的時(shí)候其左上角按鈕到底應(yīng)該是取消呢，還是返回呢？還是×，或還是其他？這不是一個(gè)很重大很要命的問(wèn)題，但是它也不僅僅只是一個(gè)按鈕的問(wèn)題，不同的模式其底層的本質(zhì)不同。

這個(gè)問(wèn)題之前我也一直忽略，我們自己的不約App當(dāng)時(shí)直覺(jué)的就直接用×了，沒(méi)多余的想法，就是其他都是按鈕形態(tài)，如果以一個(gè)取消文字來(lái)代替，跟其他頁(yè)面設(shè)計(jì)樣式有沖突。后面迭代的時(shí)候App已經(jīng)變化很大了，現(xiàn)如今的一個(gè)版本重新整理了一下按鈕及其邏輯，跟設(shè)計(jì)還有開(kāi)發(fā)多次溝通過(guò)后發(fā)現(xiàn)我們的×也是需要做點(diǎn)改變了。

嗯，廢話結(jié)束，進(jìn)入正題。

在設(shè)計(jì)發(fā)狀態(tài)時(shí)候左上角的按鈕命名時(shí)候首先要弄清楚自己產(chǎn)品的頁(yè)面邏輯關(guān)系，然后可以去多看看目前的主流產(chǎn)品都是如何處理的，再結(jié)合自身的情況做適當(dāng)?shù)恼{(diào)整。

碰到這個(gè)問(wèn)題后，不要只憑直覺(jué)“我覺(jué)得它應(yīng)該是一個(gè)什么什么”，先去調(diào)研調(diào)研再說(shuō)，看看主流APP的設(shè)計(jì)都有那些模式，思考一下別人為什么要那樣做，用著是不是很順心沒(méi)有交互障礙。

下午通過(guò)研究若干個(gè)APP之后發(fā)現(xiàn)現(xiàn)如今主流的模式有這么幾種：

• 取消——微信、微博、QQ空間、QQ郵箱、LOFT、赤兔等
• ×——人人、nice、脈脈、知乎等
• 返回——備忘錄、in等
• 關(guān)閉——簡(jiǎn)書(shū)等

總共研究了13款我手機(jī)裝的APP，大概也覆蓋了目前的主流應(yīng)用，我們來(lái)做個(gè)小診斷，看看他們都是什么樣的，為什么要那樣弄。

模式一：“取消”處理法

上圖為證

按順序來(lái)，依次為微信、QQ空間、QQ郵箱、LOFT、微博。

其頁(yè)面交互為：從底部彈出到，點(diǎn)擊“取消”后從頂部下去。

思考一下他們?yōu)槭裁催@么做？

• 首先，這幾個(gè)APP除了LOFT之外他們頁(yè)面的按鈕都是圖標(biāo)+文字為主，因此在這里用“取消”符合其他頁(yè)面的設(shè)計(jì)原則，同時(shí)不會(huì)對(duì)用戶(hù)造成困擾。
• 其次，打開(kāi)寫(xiě)狀態(tài)——“取消“不寫(xiě)了，這種交互邏輯是在不影響目前頁(yè)面的前提下，調(diào)出來(lái)一個(gè)新的頁(yè)面覆蓋在其上，因此用“取消”符合其頁(yè)面邏輯。
• 最后，“取消”是什么意思呢？百度百科解釋為：“取消 ”亦作“ 取銷(xiāo) ”。使原有的制度、規(guī)章、資格、權(quán)利等失去效力。那么在這里其意思符合用戶(hù)使用場(chǎng)景邏輯，使目前編輯的狀態(tài)頁(yè)面失去效力。

模式二：“×”處理法

上圖為證

按順序來(lái)，依次為人人、nice、脈脈、知乎。

其頁(yè)面交互為：從底部彈出到，點(diǎn)擊“×”后從頂部下去。

思考一下他們?yōu)槭裁催@么做？

• 首先×跟取消的意思即為接近，給用戶(hù)的感受偏向于“不要了“的意思，因此在這種編輯狀態(tài)場(chǎng)景下符合邏輯。
• 其次，使用×的APP除了考慮使用場(chǎng)景邏輯問(wèn)題，還有一個(gè)很重要的問(wèn)題就是設(shè)計(jì)統(tǒng)一原則問(wèn)題，這些APP各個(gè)頁(yè)面都以純粹的圖標(biāo)為按鈕，因此在這個(gè)頁(yè)面使用圖標(biāo)“ד是對(duì)設(shè)計(jì)原則的遵循。
• 最后，一個(gè)“ד多簡(jiǎn)單明了啊，只要其他邏輯原則不沖突，首選，我懂你懂大家懂。
• PS，其實(shí)單純的圖標(biāo)對(duì)小白用戶(hù)的使用還是有一些壓力的，這也是為什么騰訊系的產(chǎn)品絕大部分都是圖標(biāo)+文字模式，雖然啰嗦，但有人家的深層考量，純粹的追求設(shè)計(jì)的簡(jiǎn)潔容易做出自己一個(gè)人或是對(duì)互聯(lián)網(wǎng)產(chǎn)品有高度認(rèn)知度的小眾用戶(hù)的產(chǎn)品，最終無(wú)法推廣到大眾用戶(hù)。

模式三：“返回”處理法

上圖為證

按順序來(lái)，依次為in、備忘錄。

其頁(yè)面交互為：從右側(cè)出來(lái)，點(diǎn)擊“返回”后又回到右側(cè)。

思考一下他們?yōu)槭裁催@么做？

• 首先，這個(gè)返回包含的比較多，不僅是單獨(dú)的一個(gè)返回圖標(biāo)，還有返回圖標(biāo)+返回文字，另外還有返回圖標(biāo)+上一個(gè)頁(yè)面的標(biāo)題等，但這種設(shè)計(jì)模式目前依然小眾，翻了很多APP，最終只有in和蘋(píng)果備忘錄兩個(gè)APP。
• In的返回邏輯比較容易理解，在此頁(yè)面之前還有兩個(gè)編輯圖片的頁(yè)面，他們都是一個(gè)樣式，右上角為返回，用戶(hù)可以一步步走下去，最終也可以一步步返回去，假如中途出什么差錯(cuò)，不用重新來(lái)過(guò)，返回修改就OK，對(duì)用戶(hù)的使用是一個(gè)減壓。
• 備忘錄的邏輯怎么說(shuō)呢，我還是沒(méi)太搞明白，路過(guò)的大神求賜教╮(╯▽╰)╭

模式四：“關(guān)閉”處理法

上圖為證

上圖為【簡(jiǎn)書(shū)】大拿

其頁(yè)面交互為：從底部彈出到，點(diǎn)擊“關(guān)閉”后從頂部下去。

思考一下他們?yōu)槭裁催@么做？

• 記得還有幾個(gè)APP也是關(guān)閉處理法，不過(guò)今天沒(méi)怎么找到，或許是他們迭代已經(jīng)更改了，目前就一個(gè)簡(jiǎn)書(shū)還是這樣。
• 個(gè)人理解，關(guān)閉是一個(gè)很程序的詞匯，常為程序猿專(zhuān)用詞匯，或許簡(jiǎn)書(shū)的產(chǎn)品經(jīng)理是開(kāi)發(fā)轉(zhuǎn)入？我瞎猜而已╮(╯▽╰)╭，簡(jiǎn)書(shū)的小伙伴們求考證
• 第二，關(guān)閉百度百科解釋有兩層意思：1．指門(mén)閂，后泛指防御性的設(shè)施。 指心情，意思是關(guān)閉自己不想與外界有任何聯(lián)系。而簡(jiǎn)書(shū)是一個(gè)寫(xiě)文章的APP，它這里不是狀態(tài)，是文章，因此使用“關(guān)閉“這個(gè)詞匯相對(duì)于”取消“似乎更適合一些，我在寫(xiě)東西，寫(xiě)著寫(xiě)著不想寫(xiě)了，那我關(guān)閉就好了，在簡(jiǎn)書(shū)上寫(xiě)東西是為了讓別人看到，那么我不想寫(xiě)了就是不想跟外界發(fā)生任何聯(lián)系，那么我就關(guān)閉，或是私密保存，或是放棄編輯。

應(yīng)該還有其他的設(shè)計(jì)模式，但畢竟不是主流，用戶(hù)也比較難接受。

綜上，在一個(gè)發(fā)狀態(tài)的頁(yè)面其左上角的圖標(biāo)到底應(yīng)該怎樣設(shè)計(jì)？

其實(shí)我們需要考慮這么兩個(gè)因素就夠了：

第一：你的APP受眾人群是哪些？是部分互聯(lián)網(wǎng)高認(rèn)知的用戶(hù)呢？還是普羅大眾？

這也是為什么騰訊系的產(chǎn)品大部都是圖標(biāo)+文字的設(shè)計(jì)樣式原因。他們面對(duì)的是十?dāng)?shù)億的普羅大眾，比如我老媽她知道取消是什么意思，但是對(duì)于×就不知道了，不敢點(diǎn)了。另外國(guó)外的主流產(chǎn)品大部分都是純圖標(biāo)的，這跟其互聯(lián)網(wǎng)普及也有關(guān)，國(guó)民已經(jīng)熟悉簡(jiǎn)潔的互聯(lián)網(wǎng)規(guī)則了，所以無(wú)需累贅加文字解釋?zhuān)坏珖?guó)內(nèi)尤其是中西部已經(jīng)農(nóng)村地區(qū)，大家剛剛開(kāi)始接觸互聯(lián)網(wǎng)，需要一個(gè)認(rèn)知的過(guò)程；

考慮了第一個(gè)因素后就考慮第二個(gè)因素：你的APP其他頁(yè)面按鈕是如何設(shè)計(jì)的？如果是純圖標(biāo)，那么請(qǐng)?jiān)谶@里保持一致，一個(gè)×解決所有事；如果不是純圖標(biāo)，那就需要相應(yīng)的調(diào)整來(lái)做統(tǒng)一了。

嗯，到這里我也知道我們的不約App這一版的按鈕應(yīng)該如何規(guī)約了，發(fā)帖頁(yè)面會(huì)有一個(gè)調(diào)整的，不過(guò)在跟老大討論的時(shí)候又發(fā)現(xiàn)一個(gè)問(wèn)題，APP頁(yè)面什么時(shí)候從下面出來(lái)？什么時(shí)候從右邊出來(lái)？嗯，這是個(gè)好問(wèn)題，以前想過(guò)但沒(méi)研究過(guò)的，下期文章見(jiàn)。希望能有更多朋友一起研究討論(*^__^*) ……

#專(zhuān)欄作家#

紫沐渲葉，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家，一只有點(diǎn)小驕傲小文藝的產(chǎn)品菜鳥(niǎo)，喜歡倒騰產(chǎn)品和設(shè)計(jì)，看好O2O、教育和人工智能。長(zhǎng)得不那么帥，打游戲、看電影、外出浪、打個(gè)球、寫(xiě)篇文、拍個(gè)照、幻個(gè)想都是我的菜。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。