鑒于國(guó)內(nèi)交互設(shè)計(jì)名詞混亂不統(tǒng)一，很多設(shè)計(jì)師不知道如何用專(zhuān)業(yè)術(shù)語(yǔ)稱(chēng)呼一個(gè)控件，因此我開(kāi)了《這個(gè)控件叫什么》專(zhuān)題，梳理控件的名稱(chēng)和使用事項(xiàng)，希望能為推動(dòng)交互設(shè)計(jì)發(fā)展，做出一點(diǎn)微小的貢獻(xiàn)。
往期回顧：
- 《「這個(gè)控件叫什么」系列之小紅點(diǎn)+索引導(dǎo)航+分段控件》
- 《「這個(gè)控件叫什么」系列之加載占位圖+頁(yè)面指示器》
- 《「這個(gè)控件叫什么」系列之步進(jìn)器+SWITCH》
- 《「這個(gè)控件叫什么」系列之TOAST》
- 《「這個(gè)控件叫什么」系列之虛擬鍵盤(pán)/軟鍵盤(pán)/SOFT KEYBOARD》
- 《「這個(gè)控件叫什么」系列之動(dòng)作菜單/動(dòng)作面板》
- 《「這個(gè)控件叫什么」系列之Popover/氣泡彈出框/彈出式氣泡》
- 《「這個(gè)控件叫什么」系列之輸入框/文本框/Text fields》
- 《「這個(gè)控件叫什么」系列之Notice Bar/通告欄》
自從 2017 年蘋(píng)果首款全面屏手機(jī) iPhone X 和配套的操作系統(tǒng) iOS 11 發(fā)布后，一個(gè)新的小橫條控件就出現(xiàn)了：
- 它出現(xiàn)在 iPhone X 屏幕的底部，承載著上滑返回桌面、下滑單手模式、左右滑動(dòng)多任務(wù)切換。
- 有時(shí)候它又出現(xiàn)在 Modal View（模態(tài)視圖）內(nèi)標(biāo)題欄的頂部，下拉可以關(guān)閉 Modal。
- 在 iPad 上又出現(xiàn)在多任務(wù)分屏中間的小豎條，指示你左右拖拽可以控制兩個(gè) App 的顯示比例。
- 另外 iOS 15 之后，iPad 頂部又出現(xiàn)了一個(gè)功能相似的 3 個(gè)點(diǎn)控件，能快速設(shè)置分屏模式。
自此之后很多第三方 App，甚至安卓手機(jī)也開(kāi)始使用這個(gè)小橫條控件，為了弄明白這個(gè)小橫條控件的名稱(chēng)，我展開(kāi)了一系列考據(jù)。
左：iOS 小橫條，右：安卓小橫條。圖源：If you want people to use your navigation gestures, Google, make them better
從蘋(píng)果開(kāi)發(fā)者網(wǎng)站（ https://developer.apple.com/design/resources/ ），我們可以輕松下載到 iOS 15 的官方 Sketch 設(shè)計(jì)模板。
打開(kāi)文件后發(fā)現(xiàn)位于 iPhone 和 iPad 底部的小橫條叫：Home Indicator（桌面指示器）。
Home Indicator
位于 iPad 頂部負(fù)責(zé)快速設(shè)置分屏模式的 3 個(gè)點(diǎn)，名為：Multitasking Indicator（多任務(wù)指示器）。
Multitasking Indicator（多任務(wù)指示器）
負(fù)責(zé) iPad 分屏模式控制的“小豎條”叫：Grabber，而在蘋(píng)果官方幫助文檔中稱(chēng)為：App Divider（App 分割條）。
Grabber
蘋(píng)果官方幫助文檔
如果你打開(kāi)翻譯軟件，發(fā)現(xiàn) Grabber 會(huì)被翻譯成“掠奪者”，顯然在設(shè)計(jì)語(yǔ)境里這么叫很奇怪。其實(shí) Grabber 在國(guó)外是很常見(jiàn)的一個(gè)抓握高處物體的家用工具，Grabber 本身也是 Grab 變形過(guò)來(lái)的，而 Grab 的中文含義叫：抓手。
Grabber
但是“抓手”已經(jīng)成為互聯(lián)網(wǎng)八股文詞語(yǔ)（其實(shí)完全可以用：著力點(diǎn)、契機(jī)、途徑等代替）。
而屏幕內(nèi)的東西我們并不能真正抓握，因此我建議把 Grabber 翻譯成：抓握指示器。
非常可惜的是，蘋(píng)果官方的 Sketch 模板里根本找不到 Modal 上方的小橫條。
既然無(wú)法找到 Modal 上方的小橫條，但我們明白它的功能也是告訴用戶(hù)可以上下拖動(dòng)交互。聯(lián)想到其實(shí)在 iOS 7/8/9/10 時(shí)代，鎖屏就有類(lèi)似的控件 —— 上下都有小橫條，頂上指示可以下拉通知中心，底下則指示上拉出現(xiàn)控制中心。只不過(guò)小橫條拖動(dòng)之后會(huì)變成箭頭，指示關(guān)閉的拖動(dòng)方向，也許蘋(píng)果覺(jué)得箭頭太占空間，所以在后面的版本中簡(jiǎn)化成一直是小橫條。
但很可惜蘋(píng)果并沒(méi)有提供 iOS 11 以及更老版本的 UIKit，我從 Meta 設(shè)計(jì)團(tuán)隊(duì)（Facebook 改名叫 Meta）和國(guó)外知名全棧產(chǎn)品設(shè)計(jì)師 Meng To 在其 Design + Code 中自己繪制的 iOS 11 的源文件中，發(fā)現(xiàn)他們都將 Home Indicator 之外的小橫條統(tǒng)稱(chēng)為：Drag Handle（拖拽把手）。
Drag Handle
我們?cè)賮?lái)看看國(guó)外其他普遍的叫法。
比如國(guó)外知名設(shè)計(jì)自媒體 UX Collective 則統(tǒng)稱(chēng)所有小橫條是：Handlebar（把手）。
國(guó)外出版的 iOS 9 相關(guān)書(shū)籍則將控制中心的小橫條稱(chēng)之為：Handle（把手）。
有些 iOS 程序員把 Modal 上的小橫條叫：Modal View Indicator（模態(tài)視圖指示器）或 Handle view（把手視圖）。
圖源：Replicating Facebook's Draggable Bottom Card using Auto Layout - Part 1/2
也有程序員模仿 iOS 的 XX Indicaor 命名法，叫其為：Drag Indicator（拖拽指示器）。但這個(gè)名稱(chēng)不可取，因?yàn)槿菀缀推渌脚_(tái) Drag and Drop indicator（拖放指示器，是指挪動(dòng)對(duì)象次序或位置的控件）弄混。
Drag and Drop indicator。圖源：Drag–and–Drop: How to Design for Ease of Use
其實(shí)小橫條也不是 iOS 原創(chuàng)發(fā)明。早在 2010 年推出的 Palm Pre 2 手機(jī)上就能找到它的蹤跡。
左中：Palm Pre 2 有小橫條，右：Palm Phone 有 3 個(gè)點(diǎn)
Palm Pre 2 所使用的 WebOS 操作系統(tǒng)不僅和蘋(píng)果 iOS 和安卓的 Material Design，甚至諾基亞都有很深的淵源。
圖源：Apple iPhone X vs. Palm Pre！
曾任蘋(píng)果副總裁的 Jon Rubinstein 從蘋(píng)果的 iPhone 和 iPod 團(tuán)隊(duì)挖了很多老同事來(lái)做 Palm，后來(lái)隨著 Palm 公司家道中落，不少人又回到了蘋(píng)果。
WebOS 靈魂人物之一 Matias Duarte，如今是 Google 設(shè)計(jì)部門(mén)的負(fù)責(zé)人。Material Design 正是在其推動(dòng)下產(chǎn)生的。
Matias Duarte 在發(fā)布 Material You。圖源：10 年過(guò)去了，我依然很想念你
還有一位 Peter Skillman 之后去了 Nokia，為諾基亞 N9 打造了一套以滑動(dòng)手勢(shì)為核心的 Swipe 界面，還有后來(lái)的 Asha 手機(jī)、Nokia HERE 等產(chǎn)品，都能看到它的身影。
諾基亞 N9
但很遺憾的是，Palm Pre 2 的使用說(shuō)明書(shū)上只提到這塊區(qū)域是 Gesture Area（手勢(shì)區(qū)），而類(lèi)似小橫條的并不是屏幕內(nèi)的控件，只是屏幕外的一個(gè)指示燈，他們稱(chēng)之為：lighted bar（小亮條）。
Palm Pre 2 的使用說(shuō)明書(shū)
屏幕內(nèi)雖然呈現(xiàn)的是五光十色虛擬世界，但交互原理仍然遵循樸素物理學(xué)。究其原因，我們從嬰兒睜眼那一刻首先感受到的是現(xiàn)實(shí)的物理世界，從小積累物理環(huán)境中汲取的經(jīng)驗(yàn)，讓我們?cè)O(shè)計(jì)出來(lái)的屏幕虛擬世界逃脫不了現(xiàn)實(shí)的影子。
樸素物理學(xué)（na?ve physics）
虛擬世界越像現(xiàn)實(shí)世界，人類(lèi)也更容易通過(guò)類(lèi)比來(lái)快速學(xué)習(xí)和使用。這也就是為什么 iPhone 誕生之初采用擬物化界面的原因。只要你看過(guò)旅行箱的密碼鎖，就立馬知道 Picker （撥輪選擇器/拾取器）該如何操作。
左：旅行箱密碼鎖，右：iOS 6 Picker
顯然，小橫條的外形和推拉操作，很有可能來(lái)源于推拉門(mén)的把手。所以國(guó)外一些設(shè)計(jì)師開(kāi)發(fā)者才把它叫 HandleBar（把手）。
用把手拖動(dòng)控制窗口比例
最后經(jīng)過(guò) Taio App 開(kāi)發(fā)者，知名 iOS 程序員鐘穎，從最蘋(píng)果最新的 iOS 15 開(kāi)發(fā)文檔中發(fā)現(xiàn) Modal 上方的小橫條就叫 Grabber。同時(shí)官方文檔上也寫(xiě)明 Grabber 的作用是指示用戶(hù)可以調(diào)整模態(tài)視圖的大小尺寸（indicates that a sheet is resizable）。
Xcode 界面中的 UIGrabber。圖源：Rizwan Ahmed
蘋(píng)果官方開(kāi)發(fā)者文檔
基于以上考據(jù)，結(jié)論：
- 我們可以統(tǒng)稱(chēng)所有小橫條為：Grabber（抓握指示器），但不同位置的 Grabber 也有其專(zhuān)屬名稱(chēng)。
- 屏幕底部上滑返回桌面的 Grabber 稱(chēng)為 Home Indicator（桌面指示器）。
- 控制分屏比例的 Grabber 是 App Divider（App 分割條）。
- 位于 iPad 頂部負(fù)責(zé)快速設(shè)置分屏模式的 3 個(gè)點(diǎn)，名為：Multitasking Indicator（多任務(wù)指示器）。
- 為了區(qū)別統(tǒng)稱(chēng)，位于 Modal view 上的 Grabber 可以叫它：Resizable Indicator（可調(diào)指示器）。
所有類(lèi)別的 Grabber 都用于指示用戶(hù)抓握滑動(dòng)即可改變當(dāng)前視圖尺寸，使得原本隱藏的手勢(shì)操作變得可見(jiàn)。
注意「改變」不等于「關(guān)閉」。 在 iOS 中凡是有 Grabber 的地方，如果滑動(dòng)讓視圖變小甚至消失，只是改變視圖尺寸，并不是讓視圖徹底關(guān)閉。
以 iOS 郵件 App 為例，將正在撰寫(xiě)的郵件按住 Grabber 向下滑動(dòng)收起，之后再點(diǎn)擊打開(kāi)，之前寫(xiě)的草稿仍然存在。如果要徹底關(guān)閉寫(xiě)郵件界面并且不保存草稿，應(yīng)該點(diǎn)擊「Cancel」。
iOS 郵件 App 草稿機(jī)制
Grabber 可以類(lèi)比成電腦上除了關(guān)閉以外的其他窗口操作：對(duì)窗口最大化、最小化或者調(diào)整尺寸。但不會(huì)改變窗口里內(nèi)容的狀態(tài)。
MacOS 的窗口操作
Twitter App 的打開(kāi)通知對(duì)話框就是典型地誤用 Grabber，首先這個(gè)對(duì)話框信息量很少，完全沒(méi)有拉動(dòng)擴(kuò)大尺寸的必要。其次使用 Gtabber 最小化也沒(méi)有意義，因?yàn)檫@個(gè)對(duì)話框并沒(méi)有什么需要存儲(chǔ)內(nèi)容的狀態(tài)。已經(jīng)有「暫時(shí)不用」能「關(guān)閉」對(duì)話框的操作就足夠了。
Twitter App 打開(kāi)通知對(duì)話框
全面屏手機(jī)四邊都有系統(tǒng)級(jí)別的手勢(shì)，例如“左劉海”下滑出現(xiàn)通知欄，“右劉海”下滑出現(xiàn)控制中心，左側(cè)邊向內(nèi)滑動(dòng)返回上一頁(yè)等。最好與系統(tǒng)手勢(shì)區(qū)保持一定的距離，避免滑動(dòng)沖突。
Home Indicator 常駐于屏幕底部，如果你想在自家的 App 里增加 Grabber，同屏幕內(nèi)最多只能再顯示一個(gè)。否則一個(gè)屏幕內(nèi)多個(gè) Grabber，會(huì)導(dǎo)致用戶(hù)不知道該拖動(dòng)哪個(gè)，或者產(chǎn)生誤操作。
以 iOS 地圖 App 為例，每次都只在最高層級(jí)的視圖上顯示 Grabber。
iOS 地圖 App
雖然互聯(lián)網(wǎng)從業(yè)者普遍對(duì) Grabber 很熟悉，但對(duì)普通用戶(hù)和老年人來(lái)說(shuō)，抓握仍然是一個(gè)比較高級(jí)的操作。可以在 Modal 的標(biāo)題欄額外支持點(diǎn)擊展開(kāi)/收起 Modal，便于用戶(hù)操作。
使用新手引導(dǎo)教育用戶(hù)也是可行的方案。例如把小橫條改成箭頭的樣式，指示拖動(dòng)方向。或者增加額外的新手引導(dǎo)。
左：iOS 控制中心頂部仍用箭頭指示滑動(dòng)方向，右：豆瓣使用新手引導(dǎo)動(dòng)效指引
有時(shí)候 Modal view 內(nèi)有一個(gè)長(zhǎng)列表，如果滑動(dòng)內(nèi)容區(qū)是優(yōu)先滾動(dòng)列表內(nèi)容還是改變 Modal 尺寸？如果 Modal 里有下拉刷新怎么辦？不同的 App 有不同的處理方式，但應(yīng)該保證整個(gè) App 內(nèi)操作一致性。
參考文獻(xiàn)
- 10 年過(guò)去了，我依然很想念你 ，陳子木， https://sspai.com/post/68372
- 發(fā)明了卡片式交互的這家公司，本可以開(kāi)創(chuàng)屬于自己的全面屏?xí)r代，木斯， https://www.ifanr.com/1086881
- Drag–and–Drop: How to Design for Ease of Use，Page Laubheimer， https://www.nngroup.com/articles/drag-drop/
- Apple Design Resources，Apple Developer， https://developer.apple.com/design/resources/
- iOS 11 iPhone GUI from Design at Meta，Meta Design Team， https://design.facebook.com/toolsandresources/ios-11-iphone-gui/
- Replicating Facebook’s Draggable Bottom Card using Auto Layout - Part 1/2，Axel Kee， https://fluffy.es/facebook-draggable-bottom-card-modal-1/
- Apple iPhone X vs. Palm Pre，Tim Schofield， https://www.youtube.com/watch?v=4nRouy5VYbI
- Palm Pre 2 User Guide，Verizon wireless， http://cache.vzw.com/multimedia/mim/palm_pre_2/palmpre2.pdf
- Take Control of the iOS 9 Control Center，Josh Centers， https://www.takecontrolbooks.com/resources/0182/site/chap05.html
- Palm 和 webOS 的故事，積木， https://www.ifanr.com/96573
- How to Create an Intuitive Design，Ditte Havs Mortensen， https://www.interaction-design.org/literature/article/how-to-create-an-intuitive-design
- Is there a standard way to display a modal view indicator?，Mycroft Canner， https://stackoverflow.com/questions/58493192/is-there-a-standard-way-to-display-a-modal-view-indicator
- Handlebars in UI Design A new kind of element which has risen in UI Design，Shankar， https://uxdesign.cc/handlebars-in-ui-design-4b36af67733b
- prefersGrabberVisible，Apple Developer Documentation， https://developer.apple.com/documentation/uikit/uisheetpresentationcontroller/3801906-prefersgrabbervisible
- Use multitasking on your iPad，Apple Support， https://support.apple.com/en-us/HT207582
- 使用 iPad 上的多任務(wù)處理功能，Apple 支持 (中國(guó))， https://support.apple.com/zh-cn/HT207582
- How to present a Bottom Sheet in iOS 15 with UISheetPresentationController，Sarunw， https://sarunw.com/posts/bottom-sheet-in-ios-15-with-uisheetpresentationcontroller/
歡迎關(guān)注作者的微信公眾號(hào)：「龍爪槐守望者」
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
熱評(píng) 肖烺杰