談?wù)?iOS “返回”鍵的那些事
前面的話
談起 iOS 的“返回”鍵疏遏,大家的心跳開始加速了吧揍障。
加速可以目养,但請不要臉紅。
下面毒嫡,我們來好好聊一聊癌蚁。
關(guān)于“返回”鍵
眾所周知,無論是 iOS 還是 Android OS 兜畸,要實現(xiàn)返回操作存在以下種方式:
- 點擊返回按鈕返回努释;
- 向右滑動屏幕返回。
一咬摇、先來談?wù)劦谝环N:點擊返回按鈕返回伐蒂。
要實現(xiàn)點擊返回按鈕返回,首先得要有一個返回按鈕(這不是廢話么)肛鹏。那么逸邦,什么是返回按鈕,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.
概念性的描述或許顯得有點抽象缕减,我們結(jié)合具體的使用場景來描述一下:
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.
通過蘋果官方對返回鍵的描述,我們也對其有了大致的了解芒珠。同時桥狡,我們也可以猜想到:返回按鈕的使用頻率很高。當(dāng)你進(jìn)入一個 APP ,你不可能只是停留在它的主界面裹芝,你會進(jìn)入到其它層級的界面部逮,所以你必須要有一個途徑返回到原來的界面。因此嫂易,對用戶來說兄朋,它是一個強需求。
在 iOS5 及之前炬搭,我們主要是通過點擊返回按鈕實現(xiàn)返回動作蜈漓。而且,我們也早已習(xí)以為常宫盔,因為它足夠簡單融虽、直觀,所以我們安然渡過了前五代 iPhone 的使用時期灼芭。
你或許會問:iOS6 也是只有通過點擊返回按鈕實現(xiàn)返回動作(不考慮向左滑動導(dǎo)航欄實現(xiàn)返回)有额,為什么這一代 iPhone 被排除在“安然渡過”時期之外?
這個問題,問得很好。
一個簡單的事實:iOS6 是與 iPhone5 同步推出的硕舆,iPhone5 是蘋果首次在 iPhone 的屏幕尺寸做出改變(當(dāng)然,你或許也會理解為妥協(xié))萤衰,由經(jīng)典的 3.5 英寸增大到 4.0 英寸。
iPhone4S 及之前的屏幕比例為3:2猜旬,在這個屏幕尺寸/比例下脆栋,手指可以輕松覆蓋到屏幕的大部分區(qū)域。喬布斯所說的最佳屏幕尺寸洒擦,并不是沒有道理的椿争。
iPhone5 的屏幕比例接近16:9,其屏幕也只是縱向拉長熟嫩,橫向尺寸/像素沒有變化秦踪。這也是為什么人們把它笑稱為“馬臉 iPhone” 的原因。
就好像我掸茅,這些年以來椅邓,只是變高,沒有變胖昧狮。
這有什么問題嗎景馁?
有。
由于屏幕縱向尺寸的增加陵且,手指不再能輕易點擊左上角的返回鍵裁僧,用戶就感覺到?jīng)]有原來用的舒服。然后慕购,用戶就開始抱怨聊疲,罵蘋果是腦殘的,罵把返回鍵放在左上角是反人類的設(shè)計沪悲。
請获洲,稍安勿躁。
(一)蘋果為什么選擇把“返回”按鈕放在左上角殿如?
蘋果是否因為頭腦發(fā)熱贡珊、不經(jīng)思考就把返回鍵放在左上角?又或者是為了延續(xù)用戶在 Web 瀏覽器上的操作習(xí)慣涉馁,以及因為智力上的懶惰直接沿用了這一體驗门岔?
我想,很多人都會有這個疑問烤送。
我們總是很容易被事物的外表迷惑住寒随,或許我們應(yīng)該學(xué)會轉(zhuǎn)移一下注意力。
那就帮坚,先來了解一下與 iOS 設(shè)計規(guī)范相關(guān)的一些東西妻往。
1、Status Bar(狀態(tài)欄)
The status bar displays important information about the device and the current environment.
2试和、Navigation Bar(導(dǎo)航欄)
A navigation bar enables navigation through an information hierarchy and, optionally, management of screen contents.
3讯泣、Toolbar(工具欄)
A toolbar contains controls that perform actions related to objects in the screen or view.
4、Tab Bar(標(biāo)簽欄)
A tab bar gives people the ability to switch between different subtasks, views, or modes in an app.
其實阅悍,當(dāng)看到 Tab Bar 時好渠,你或許還不明白蘋果為什么把返回鍵放在左上角,但你應(yīng)該會明白蘋果不可能把返回鍵放在其它地方溉箕。因為放在其它任何地方都是不合適的晦墙,你能想象把一個 Back Button 放在 Tab Bar 上的情形嗎?不倫不類肴茄。
當(dāng)屏幕底部沒有 Tab Bar 的時候呢晌畅?Back Button 單獨在底部顯示嗎?那會是一種怎樣的孤獨感寡痰?
(二)那么抗楔,為什么一定是左上角?
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 存在的意義是:我在哪里(我是誰)连躏,我從哪里來,我要到哪里去贞滨?哲學(xué)上的三個終極問題入热,在 Navigation Bar 上得到了完美的體現(xiàn)拍棕。
從設(shè)計理念和操作邏輯方面來說,把返回鍵放在 Navigation Bar 的左側(cè)勺良,幾乎是 iOS 唯一的選擇绰播。
(三)那么,Android OS 呢尚困?
Android OS 那些“迷人”的“雙底欄”蠢箩,或者是“三下巴”,甚至是 HTC M8/M9的 “四下巴” 事甜。在 Apple Design 大行其道的時代谬泌,每當(dāng)想到這些我都無比傷感, Android Design 本也可以有很好的表現(xiàn)逻谦。
其實掌实,有一個小廠商曾經(jīng)試圖解決這個問題,它就是來自中國的魅族和它那“遠(yuǎn)近聞名”的 Smart bar邦马。無論結(jié)果如何潮峦,我們應(yīng)該為這種嘗試表示贊賞,因為它的初衷是純粹的勇婴、美好的忱嘹。
Smart Bar 最重要的一個設(shè)計理念:
堅持將操作按鈕盡量放在底部,在單手覆蓋面積之內(nèi)耕渴,方便操作拘悦。
先不說這樣的設(shè)計邏輯有沒有問題,但至少在易用性方面是有所提升的(在應(yīng)用兼容的情況下)橱脸。魅族的問題在于沒有號召力础米,你怎么能輕易在別人的領(lǐng)地上制定自己的規(guī)則呢?
在很多時候添诉,我們并不是一味追求易用性的屁桑,大部分的思考與設(shè)計都是一個妥協(xié)的結(jié)果。如果只是考慮易用性栏赴,返回鍵無論是放在左上角還是放在左下角蘑斧,都沒有比放在屏幕中部偏下的位置來得方便、順手须眷。但是竖瘾,很明顯,這在實際中是不可行的花颗,因為它在美觀捕传、邏輯上是有缺陷的。
就算是追求易用性的 Smart bar扩劝,也不是固執(zhí)的在任何情況下都把返回鍵放在屏幕底部庸论。當(dāng)手機處于橫屏的狀態(tài)下時职辅,Smartbar 顯示在屏幕頂部,這時候“返回鍵”也被放在了我們所“吐槽”的左上角聂示。
(四)蘋果就真的沒有把返回鍵放在屏幕底部左下角嗎罐农?
有,Safari 是個特別的存在催什。因為它是個瀏覽器,它的內(nèi)容不是固定的宰睡,也就沒有被貼上各種“標(biāo)簽”蒲凶,因此它便可以游移在規(guī)則之外。
這也讓我們意識到拆内,沒有一勞永逸的解決方案旋圆,也沒有統(tǒng)一標(biāo)準(zhǔn)的世界圖式。生而為人麸恍,在任何情況下灵巧,我們都是自由的。
好了抹沪,關(guān)于通過點擊返回按鈕實現(xiàn)返回的討論刻肄,就暫時討論到這里。
二融欧、下面來談?wù)劦诙N:向右滑動屏幕返回敏弃。
隨著 iPhone 屏幕尺寸的增大,返回鍵依然停留在屏幕的左上角噪馏,從設(shè)計/交互邏輯上說這沒有太大問題麦到,但從用戶的操作體驗上來說,就是個不容忽略的問題了欠肾。無論用戶是習(xí)慣于左手操作還是右手操作瓶颠,點擊左上角的“返回”鍵都是一件十分吃力的事情。蘋果明顯意識到這件事情了刺桃。
好雨知時節(jié)粹淋,當(dāng)春乃發(fā)生。
到了 iOS7瑟慈,蘋果終于加入滑動屏幕返回操作廓啊。
(一)滑動屏幕返回操作現(xiàn)在大致有以下兩種類型:
- 手指從屏幕邊緣由左向右滑動屏幕,手指松開后頁面返回封豪;
- 手指從屏幕任意位置向右滑動屏幕谴轮,手指松開后頁面返回;
蘋果選擇的是第一種滑動返回方式吹埠。但是在我們?nèi)粘5氖褂卯?dāng)中發(fā)現(xiàn)第步,從屏幕邊緣位置實現(xiàn)滑動返回的體驗并不是太好疮装,特別你是習(xí)慣用右手使用手機時。
然而粘都,在操作上不太好友好的同時廓推,它卻帶來了一個“意想不到”的好處:
不會因為手勢誤觸而導(dǎo)致滑動返回操作。所以翩隧,與那些允許從屏幕任意位置實現(xiàn)滑動返回動作的應(yīng)用相比樊展,蘋果在這方面無疑思考得更加深入一些。
另外堆生,iPhone6 的 2.5D 玻璃讓用戶在屏幕邊緣滑動屏幕時更加連貫順暢专缠,避免產(chǎn)生了手指在屏幕邊緣滑動時的那種割裂感,手指由邊緣圓弧曲線完美過渡到平面淑仆。
但是涝婉,無論蘋果是出于防止用戶誤操作,還是出于配合 iPhone6 的2.5D 曲面玻璃的考慮蔗怠,也要承認(rèn)從屏幕邊緣由左向右滑動屏幕返回的體驗不夠友好這一事實墩弯。很明顯,從屏幕任意位置實現(xiàn)滑動返回來得更加自然順手寞射,而且這種方式對左右手的操作體驗是一致的渔工。
(二)細(xì)談 iOS 的滑動返回操作
打開蘋果的任意一個官方應(yīng)用,如郵件桥温。
打開其中任意一封郵件涨缚,我們一起來發(fā)現(xiàn)一些有趣的事情。
- 用手指從屏幕邊緣開始滑動策治,然后在接近屏幕中間位置時手指停止滑動(保持手指不要松開)脓魏,這時把手指松開,你會發(fā)現(xiàn)剛才滑動得頁面回彈到原來的位置通惫,并沒有實現(xiàn)滑動返回操作茂翔。
- 用手指從屏幕邊緣開始滑動,然后在超過些許屏幕中間位置或是屏幕三分之二左右時手指停止滑動(保持手指不要松開)履腋,這時把手指松開珊燎,你會發(fā)現(xiàn)剛才滑動的頁面有時會回彈到原來的位置,有時卻又會發(fā)現(xiàn)頁面不回彈實現(xiàn)了返回操作遵湖。
- 用手指從屏幕邊緣開始滑動悔政,滑過屏幕的三分之一左右時把手指松開(此過程不是滑到屏幕三分之一時停頓一下再松手,這個過程是流暢延旧、無停滯的谋国,你甚至不必在到達(dá)屏幕的三分之一再松手,你可以在將要到達(dá)三分之一時就有傾向松開手指的趨勢)迁沫。這時候芦瘾,你會驚喜的發(fā)現(xiàn)捌蚊,頁面隨著你手指滑動得趨勢實現(xiàn)了返回操作。這種情況下近弟,頁面滑動返回的效果也是最美的缅糟。
我以為,這就是技術(shù)的樂趣祷愉。它可以捕捉人的信息窗宦,預(yù)測人發(fā)出如此信息的意圖,從而幫我們實現(xiàn)我們想要達(dá)到的某種效果二鳄。
但是赴涵,滑動返回操作也并不是萬能的:
- 在全屏瀏覽圖片時,從屏幕邊緣向右滑動屏幕實現(xiàn)返回動作是失效的泥从;
- 在日歷的月份界面,從屏幕邊緣向右滑動屏幕實現(xiàn)返回動作是失效的沪摄。
期待以后有更多有趣的體驗躯嫉。
(三)細(xì)談第三方應(yīng)用全屏滑動返回操作
打開幾個自帶全屏滑動返回操作的應(yīng)用,如新浪微博杨拐、知乎祈餐、汽車之家。
1哄陶、新浪微博
點擊進(jìn)入任意一條微博內(nèi)容界面帆阳,然后在屏幕中向右滑動手指。然后你會發(fā)現(xiàn)屋吨,在新浪微博客戶端這里蜒谤,是無法通過上面提到的“流暢、無停滯滑動”實現(xiàn)返回動作的至扰。
只有滑動超過某一特定距離時鳍徽,才會實現(xiàn)滑動返回的動作。同時敢课,它的滑動返回效果也是比較突兀的阶祭,雖然速度很快,卻少了一種本該有的溫柔直秆。
2濒募、知乎
點擊進(jìn)入其中任意一個問題,然后在屏幕中向右滑動手指圾结。只要滑動一小段距離就可以輕松實現(xiàn)滑動返回操作瑰剃,而且它的過渡動畫效果剛?cè)岵?jì),令人感到舒服筝野。
還有一點值得說的是培他,當(dāng)你的手指滑過滑動返回距離鹃两,而此時你并不想進(jìn)行滑動返回動作時,你只需要輕輕向左滑動一下舀凛,便可以取消本次的滑動返回動作俊扳。
這個動如此瀟灑,請允許我猛遍,為知乎點個贊馋记。
3、汽車之家
汽車之家的滑動返回操作和知乎的滑動返回操作體驗差不多懊烤,其中有一點區(qū)別比較有意思梯醒。
如上面所提到的那樣,當(dāng)你的手指滑過滑動返回距離腌紧,而此時你并不想進(jìn)行滑動返回動作時茸习,即使你輕輕向左滑動一下,它還是比較“頑固”的進(jìn)行了滑動返回動作壁肋。如果真的要想撤銷滑動返回動作号胚,只有往左滑到最小距離之內(nèi),才可以撤銷本次的滑動返回動作浸遗。
我以為猫胁,負(fù)責(zé)這個產(chǎn)品設(shè)計的人可能是經(jīng)過這樣的思考:
人要學(xué)會為自己的行為負(fù)責(zé),也勇于為自己犯的錯誤承擔(dān)相應(yīng)的后果跛锌。畢竟弃秆,挫折更容易讓人成長。
哪怕是我的過度解讀髓帽,請再次允許我菠赚,為汽車之家點個贊。
這次關(guān)于對 iOS “返回”鍵的討論就暫時到這里郑藏。
最后的話
強烈的自信锈至,同時也伴隨著強烈的自我懷疑。
期待與大家的再次相見译秦。_
我的微信公眾號:跨界汪