談?wù)?iOS “返回”鍵的那些事
前面的話
談起 iOS 的“返回”鍵，大家的心跳開(kāi)始加速了吧。
加速可以，但請(qǐng)不要臉紅。
下面，我們來(lái)好好聊一聊。
關(guān)于“返回”鍵
眾所周知，無(wú)論是 iOS 還是 Android OS ，要實(shí)現(xiàn)返回操作存在以下種方式：
- 點(diǎn)擊返回按鈕返回；
- 向右滑動(dòng)屏幕返回。
一、先來(lái)談?wù)劦谝环N：點(diǎn)擊返回按鈕返回。
要實(shí)現(xiàn)點(diǎn)擊返回按鈕返回，首先得要有一個(gè)返回按鈕（這不是廢話么）。那么，什么是返回按鈕，iOS 又是怎樣定義它的？
The back button uses several cues to indicate its interactivity and convey its function: It appears in response to navigation, it displays a back-pointing chevron, it typically uses a key color, and it can display a title that describes the previous screen.
概念性的描述或許顯得有點(diǎn)抽象，我們結(jié)合具體的使用場(chǎng)景來(lái)描述一下：
When users select a month, the year view zooms in and reveals the month view. Today’s date remains highlighted and the year appears in the back button, so users know exactly where they are, where they came from, and how to get back.
通過(guò)蘋(píng)果官方對(duì)返回鍵的描述，我們也對(duì)其有了大致的了解。同時(shí)，我們也可以猜想到：返回按鈕的使用頻率很高。當(dāng)你進(jìn)入一個(gè) APP ，你不可能只是停留在它的主界面，你會(huì)進(jìn)入到其它層級(jí)的界面，所以你必須要有一個(gè)途徑返回到原來(lái)的界面。因此，對(duì)用戶來(lái)說(shuō)，它是一個(gè)強(qiáng)需求。
在 iOS5 及之前，我們主要是通過(guò)點(diǎn)擊返回按鈕實(shí)現(xiàn)返回動(dòng)作。而且，我們也早已習(xí)以為常，因?yàn)樗銐蚝?jiǎn)單、直觀，所以我們安然渡過(guò)了前五代 iPhone 的使用時(shí)期。
你或許會(huì)問(wèn)：iOS6 也是只有通過(guò)點(diǎn)擊返回按鈕實(shí)現(xiàn)返回動(dòng)作（不考慮向左滑動(dòng)導(dǎo)航欄實(shí)現(xiàn)返回），為什么這一代 iPhone 被排除在“安然渡過(guò)”時(shí)期之外？
這個(gè)問(wèn)題，問(wèn)得很好。
一個(gè)簡(jiǎn)單的事實(shí)：iOS6 是與 iPhone5 同步推出的，iPhone5 是蘋(píng)果首次在 iPhone 的屏幕尺寸做出改變（當(dāng)然，你或許也會(huì)理解為妥協(xié)），由經(jīng)典的 3.5 英寸增大到 4.0 英寸。
iPhone4S 及之前的屏幕比例為3：2，在這個(gè)屏幕尺寸/比例下，手指可以輕松覆蓋到屏幕的大部分區(qū)域。喬布斯所說(shuō)的最佳屏幕尺寸，并不是沒(méi)有道理的。
iPhone5 的屏幕比例接近16：9，其屏幕也只是縱向拉長(zhǎng)，橫向尺寸/像素沒(méi)有變化。這也是為什么人們把它笑稱為“馬臉 iPhone” 的原因。
就好像我，這些年以來(lái)，只是變高，沒(méi)有變胖。
這有什么問(wèn)題嗎？
有。
由于屏幕縱向尺寸的增加，手指不再能輕易點(diǎn)擊左上角的返回鍵，用戶就感覺(jué)到?jīng)]有原來(lái)用的舒服。然后，用戶就開(kāi)始抱怨，罵蘋(píng)果是腦殘的，罵把返回鍵放在左上角是反人類的設(shè)計(jì)。
請(qǐng)，稍安勿躁。
（一）蘋(píng)果為什么選擇把“返回”按鈕放在左上角？
蘋(píng)果是否因?yàn)轭^腦發(fā)熱、不經(jīng)思考就把返回鍵放在左上角？又或者是為了延續(xù)用戶在 Web 瀏覽器上的操作習(xí)慣，以及因?yàn)橹橇ι系膽卸柚苯友赜昧诉@一體驗(yàn)？
我想，很多人都會(huì)有這個(gè)疑問(wèn)。
我們總是很容易被事物的外表迷惑住，或許我們應(yīng)該學(xué)會(huì)轉(zhuǎn)移一下注意力。
那就，先來(lái)了解一下與 iOS 設(shè)計(jì)規(guī)范相關(guān)的一些東西。
1、Status Bar（狀態(tài)欄）
The status bar displays important information about the device and the current environment.
Status Bar
Status Bar
2、Navigation Bar（導(dǎo)航欄）
A navigation bar enables navigation through an information hierarchy and, optionally, management of screen contents.
Navigation Bar
3、Toolbar（工具欄）
A toolbar contains controls that perform actions related to objects in the screen or view.
Toolbar
4、Tab Bar（標(biāo)簽欄）
A tab bar gives people the ability to switch between different subtasks, views, or modes in an app.
Tab Bar
其實(shí)，當(dāng)看到 Tab Bar 時(shí)，你或許還不明白蘋(píng)果為什么把返回鍵放在左上角，但你應(yīng)該會(huì)明白蘋(píng)果不可能把返回鍵放在其它地方。因?yàn)榉旁谄渌魏蔚胤蕉际遣缓线m的，你能想象把一個(gè) Back Button 放在 Tab Bar 上的情形嗎？不倫不類。
當(dāng)屏幕底部沒(méi)有 Tab Bar 的時(shí)候呢？Back Button 單獨(dú)在底部顯示嗎？那會(huì)是一種怎樣的孤獨(dú)感？
（二）那么，為什么一定是左上角？
Navigation Bar（導(dǎo)航欄）。
When the user goes to a new level in a navigation hierarchy, two things should happen:
- The navigation bar title should change to the new level’s title, if appropriate.
- A back button should appear in the left end of the bar; it can be labeled with the previous level’s title if it adds value.
Navigation Bar 存在的意義是：我在哪里（我是誰(shuí)），我從哪里來(lái)，我要到哪里去？哲學(xué)上的三個(gè)終極問(wèn)題，在 Navigation Bar 上得到了完美的體現(xiàn)。
從設(shè)計(jì)理念和操作邏輯方面來(lái)說(shuō)，把返回鍵放在 Navigation Bar 的左側(cè)，幾乎是 iOS 唯一的選擇。
（三）那么，Android OS 呢？
Android OS 那些“迷人”的“雙底欄”，或者是“三下巴”，甚至是 HTC M8/M9的 “四下巴” 。在 Apple Design 大行其道的時(shí)代，每當(dāng)想到這些我都無(wú)比傷感， Android Design 本也可以有很好的表現(xiàn)。
其實(shí)，有一個(gè)小廠商曾經(jīng)試圖解決這個(gè)問(wèn)題，它就是來(lái)自中國(guó)的魅族和它那“遠(yuǎn)近聞名”的 Smart bar。無(wú)論結(jié)果如何，我們應(yīng)該為這種嘗試表示贊賞，因?yàn)樗某踔允羌兇獾?、美好的?/p>
Smart Bar 最重要的一個(gè)設(shè)計(jì)理念：
堅(jiān)持將操作按鈕盡量放在底部，在單手覆蓋面積之內(nèi)，方便操作。
先不說(shuō)這樣的設(shè)計(jì)邏輯有沒(méi)有問(wèn)題，但至少在易用性方面是有所提升的（在應(yīng)用兼容的情況下）。魅族的問(wèn)題在于沒(méi)有號(hào)召力，你怎么能輕易在別人的領(lǐng)地上制定自己的規(guī)則呢？
在很多時(shí)候，我們并不是一味追求易用性的，大部分的思考與設(shè)計(jì)都是一個(gè)妥協(xié)的結(jié)果。如果只是考慮易用性，返回鍵無(wú)論是放在左上角還是放在左下角，都沒(méi)有比放在屏幕中部偏下的位置來(lái)得方便、順手。但是，很明顯，這在實(shí)際中是不可行的，因?yàn)樗诿烙^、邏輯上是有缺陷的。
就算是追求易用性的 Smart bar，也不是固執(zhí)的在任何情況下都把返回鍵放在屏幕底部。當(dāng)手機(jī)處于橫屏的狀態(tài)下時(shí)，Smartbar 顯示在屏幕頂部，這時(shí)候“返回鍵”也被放在了我們所“吐槽”的左上角。
（四）蘋(píng)果就真的沒(méi)有把返回鍵放在屏幕底部左下角嗎？
有，Safari 是個(gè)特別的存在。因?yàn)樗莻€(gè)瀏覽器，它的內(nèi)容不是固定的，也就沒(méi)有被貼上各種“標(biāo)簽”，因此它便可以游移在規(guī)則之外。
這也讓我們意識(shí)到，沒(méi)有一勞永逸的解決方案，也沒(méi)有統(tǒng)一標(biāo)準(zhǔn)的世界圖式。生而為人，在任何情況下，我們都是自由的。
好了，關(guān)于通過(guò)點(diǎn)擊返回按鈕實(shí)現(xiàn)返回的討論，就暫時(shí)討論到這里。
二、下面來(lái)談?wù)劦诙N：向右滑動(dòng)屏幕返回。
隨著 iPhone 屏幕尺寸的增大，返回鍵依然停留在屏幕的左上角，從設(shè)計(jì)/交互邏輯上說(shuō)這沒(méi)有太大問(wèn)題，但從用戶的操作體驗(yàn)上來(lái)說(shuō)，就是個(gè)不容忽略的問(wèn)題了。無(wú)論用戶是習(xí)慣于左手操作還是右手操作，點(diǎn)擊左上角的“返回”鍵都是一件十分吃力的事情。蘋(píng)果明顯意識(shí)到這件事情了。
好雨知時(shí)節(jié)，當(dāng)春乃發(fā)生。
到了 iOS7，蘋(píng)果終于加入滑動(dòng)屏幕返回操作。
（一）滑動(dòng)屏幕返回操作現(xiàn)在大致有以下兩種類型：
- 手指從屏幕邊緣由左向右滑動(dòng)屏幕，手指松開(kāi)后頁(yè)面返回；
- 手指從屏幕任意位置向右滑動(dòng)屏幕，手指松開(kāi)后頁(yè)面返回；
蘋(píng)果選擇的是第一種滑動(dòng)返回方式。但是在我們?nèi)粘５氖褂卯?dāng)中發(fā)現(xiàn)，從屏幕邊緣位置實(shí)現(xiàn)滑動(dòng)返回的體驗(yàn)并不是太好，特別你是習(xí)慣用右手使用手機(jī)時(shí)。
然而，在操作上不太好友好的同時(shí)，它卻帶來(lái)了一個(gè)“意想不到”的好處：
不會(huì)因?yàn)槭謩?shì)誤觸而導(dǎo)致滑動(dòng)返回操作。所以，與那些允許從屏幕任意位置實(shí)現(xiàn)滑動(dòng)返回動(dòng)作的應(yīng)用相比，蘋(píng)果在這方面無(wú)疑思考得更加深入一些。
另外，iPhone6 的 2.5D 玻璃讓用戶在屏幕邊緣滑動(dòng)屏幕時(shí)更加連貫順暢，避免產(chǎn)生了手指在屏幕邊緣滑動(dòng)時(shí)的那種割裂感，手指由邊緣圓弧曲線完美過(guò)渡到平面。
但是，無(wú)論蘋(píng)果是出于防止用戶誤操作，還是出于配合 iPhone6 的2.5D 曲面玻璃的考慮，也要承認(rèn)從屏幕邊緣由左向右滑動(dòng)屏幕返回的體驗(yàn)不夠友好這一事實(shí)。很明顯，從屏幕任意位置實(shí)現(xiàn)滑動(dòng)返回來(lái)得更加自然順手，而且這種方式對(duì)左右手的操作體驗(yàn)是一致的。
（二）細(xì)談 iOS 的滑動(dòng)返回操作
打開(kāi)蘋(píng)果的任意一個(gè)官方應(yīng)用，如郵件。
打開(kāi)其中任意一封郵件，我們一起來(lái)發(fā)現(xiàn)一些有趣的事情。
- 用手指從屏幕邊緣開(kāi)始滑動(dòng)，然后在接近屏幕中間位置時(shí)手指停止滑動(dòng)（保持手指不要松開(kāi)），這時(shí)把手指松開(kāi)，你會(huì)發(fā)現(xiàn)剛才滑動(dòng)得頁(yè)面回彈到原來(lái)的位置，并沒(méi)有實(shí)現(xiàn)滑動(dòng)返回操作。
- 用手指從屏幕邊緣開(kāi)始滑動(dòng)，然后在超過(guò)些許屏幕中間位置或是屏幕三分之二左右時(shí)手指停止滑動(dòng)（保持手指不要松開(kāi)），這時(shí)把手指松開(kāi)，你會(huì)發(fā)現(xiàn)剛才滑動(dòng)的頁(yè)面有時(shí)會(huì)回彈到原來(lái)的位置，有時(shí)卻又會(huì)發(fā)現(xiàn)頁(yè)面不回彈實(shí)現(xiàn)了返回操作。
- 用手指從屏幕邊緣開(kāi)始滑動(dòng)，滑過(guò)屏幕的三分之一左右時(shí)把手指松開(kāi)（此過(guò)程不是滑到屏幕三分之一時(shí)停頓一下再松手，這個(gè)過(guò)程是流暢、無(wú)停滯的，你甚至不必在到達(dá)屏幕的三分之一再松手，你可以在將要到達(dá)三分之一時(shí)就有傾向松開(kāi)手指的趨勢(shì)）。這時(shí)候，你會(huì)驚喜的發(fā)現(xiàn)，頁(yè)面隨著你手指滑動(dòng)得趨勢(shì)實(shí)現(xiàn)了返回操作。這種情況下，頁(yè)面滑動(dòng)返回的效果也是最美的。
我以為，這就是技術(shù)的樂(lè)趣。它可以捕捉人的信息，預(yù)測(cè)人發(fā)出如此信息的意圖，從而幫我們實(shí)現(xiàn)我們想要達(dá)到的某種效果。
但是，滑動(dòng)返回操作也并不是萬(wàn)能的：
- 在全屏瀏覽圖片時(shí)，從屏幕邊緣向右滑動(dòng)屏幕實(shí)現(xiàn)返回動(dòng)作是失效的；
- 在日歷的月份界面，從屏幕邊緣向右滑動(dòng)屏幕實(shí)現(xiàn)返回動(dòng)作是失效的。
期待以后有更多有趣的體驗(yàn)。
（三）細(xì)談第三方應(yīng)用全屏滑動(dòng)返回操作
打開(kāi)幾個(gè)自帶全屏滑動(dòng)返回操作的應(yīng)用，如新浪微博、知乎、汽車之家。
1、新浪微博
點(diǎn)擊進(jìn)入任意一條微博內(nèi)容界面，然后在屏幕中向右滑動(dòng)手指。然后你會(huì)發(fā)現(xiàn)，在新浪微博客戶端這里，是無(wú)法通過(guò)上面提到的“流暢、無(wú)停滯滑動(dòng)”實(shí)現(xiàn)返回動(dòng)作的。
只有滑動(dòng)超過(guò)某一特定距離時(shí)，才會(huì)實(shí)現(xiàn)滑動(dòng)返回的動(dòng)作。同時(shí)，它的滑動(dòng)返回效果也是比較突兀的，雖然速度很快，卻少了一種本該有的溫柔。
2、知乎
點(diǎn)擊進(jìn)入其中任意一個(gè)問(wèn)題，然后在屏幕中向右滑動(dòng)手指。只要滑動(dòng)一小段距離就可以輕松實(shí)現(xiàn)滑動(dòng)返回操作，而且它的過(guò)渡動(dòng)畫(huà)效果剛?cè)岵?jì)，令人感到舒服。
還有一點(diǎn)值得說(shuō)的是，當(dāng)你的手指滑過(guò)滑動(dòng)返回距離，而此時(shí)你并不想進(jìn)行滑動(dòng)返回動(dòng)作時(shí)，你只需要輕輕向左滑動(dòng)一下，便可以取消本次的滑動(dòng)返回動(dòng)作。
這個(gè)動(dòng)如此瀟灑，請(qǐng)?jiān)试S我，為知乎點(diǎn)個(gè)贊。
3、汽車之家
汽車之家的滑動(dòng)返回操作和知乎的滑動(dòng)返回操作體驗(yàn)差不多，其中有一點(diǎn)區(qū)別比較有意思。
如上面所提到的那樣，當(dāng)你的手指滑過(guò)滑動(dòng)返回距離，而此時(shí)你并不想進(jìn)行滑動(dòng)返回動(dòng)作時(shí)，即使你輕輕向左滑動(dòng)一下，它還是比較“頑固”的進(jìn)行了滑動(dòng)返回動(dòng)作。如果真的要想撤銷滑動(dòng)返回動(dòng)作，只有往左滑到最小距離之內(nèi)，才可以撤銷本次的滑動(dòng)返回動(dòng)作。
我以為，負(fù)責(zé)這個(gè)產(chǎn)品設(shè)計(jì)的人可能是經(jīng)過(guò)這樣的思考：
人要學(xué)會(huì)為自己的行為負(fù)責(zé)，也勇于為自己犯的錯(cuò)誤承擔(dān)相應(yīng)的后果。畢竟，挫折更容易讓人成長(zhǎng)。
哪怕是我的過(guò)度解讀，請(qǐng)?jiān)俅卧试S我，為汽車之家點(diǎn)個(gè)贊。
這次關(guān)于對(duì) iOS “返回”鍵的討論就暫時(shí)到這里。
最后的話
強(qiáng)烈的自信，同時(shí)也伴隨著強(qiáng)烈的自我懷疑。
期待與大家的再次相見(jiàn)。_
我的微信公眾號(hào)：跨界汪
