鑒于國內交互設計名詞混亂不統一，很多設計師不知道如何用專業術語稱呼一個控件，因此我開了《這個控件叫什么》專題，梳理控件的名稱和使用事項，希望能為推動交互設計發展，做出一點微小的貢獻。

往期回顧：

1. 《「這個控件叫什么」系列之小紅點+索引導航+分段控件》
2. 《「這個控件叫什么」系列之加載占位圖+頁面指示器》
3. 《「這個控件叫什么」系列之步進器+SWITCH》
4. 《「這個控件叫什么」系列之TOAST》
5. 《「這個控件叫什么」系列之虛擬鍵盤/軟鍵盤/SOFT KEYBOARD》
6. 《「這個控件叫什么」系列之動作菜單/動作面板》
7. 《「這個控件叫什么」系列之Popover/氣泡彈出框/彈出式氣泡》
8. 《「這個控件叫什么」系列之輸入框/文本框/Text fields》
9. 《「這個控件叫什么」系列之Notice Bar/通告欄》

自從 2017 年蘋果首款全面屏手機 iPhone X 和配套的操作系統 iOS 11 發布后，一個新的小橫條控件就出現了：

• 它出現在 iPhone X 屏幕的底部，承載著上滑返回桌面、下滑單手模式、左右滑動多任務切換。
• 有時候它又出現在 Modal View（模態視圖）內標題欄的頂部，下拉可以關閉 Modal。
• 在 iPad 上又出現在多任務分屏中間的小豎條，指示你左右拖拽可以控制兩個 App 的顯示比例。
• 另外 iOS 15 之后，iPad 頂部又出現了一個功能相似的 3 個點控件，能快速設置分屏模式。

自此之后很多第三方 App，甚至安卓手機也開始使用這個小橫條控件，為了弄明白這個小橫條控件的名稱，我展開了一系列考據。

左：iOS 小橫條，右：安卓小橫條。圖源：If you want people to use your navigation gestures, Google, make them better

查看官方設計文件

從蘋果開發者網站（ https://developer.apple.com/design/resources/ ），我們可以輕松下載到 iOS 15 的官方 Sketch 設計模板。

打開文件后發現位于 iPhone 和 iPad 底部的小橫條叫：Home Indicator（桌面指示器）。

Home Indicator

位于 iPad 頂部負責快速設置分屏模式的 3 個點，名為：Multitasking Indicator（多任務指示器）。

Multitasking Indicator（多任務指示器）

負責 iPad 分屏模式控制的“小豎條”叫：Grabber，而在蘋果官方幫助文檔中稱為：App Divider（App 分割條）。

Grabber

蘋果官方幫助文檔

如果你打開翻譯軟件，發現 Grabber 會被翻譯成“掠奪者”，顯然在設計語境里這么叫很奇怪。其實 Grabber 在國外是很常見的一個抓握高處物體的家用工具，Grabber 本身也是 Grab 變形過來的，而 Grab 的中文含義叫：抓手。

Grabber

但是“抓手”已經成為互聯網八股文詞語（其實完全可以用：著力點、契機、途徑等代替）。

而屏幕內的東西我們并不能真正抓握，因此我建議把 Grabber 翻譯成：抓握指示器。

非常可惜的是，蘋果官方的 Sketch 模板里根本找不到 Modal 上方的小橫條。

查找歷史設計文件

既然無法找到 Modal 上方的小橫條，但我們明白它的功能也是告訴用戶可以上下拖動交互。聯想到其實在 iOS 7/8/9/10 時代，鎖屏就有類似的控件 —— 上下都有小橫條，頂上指示可以下拉通知中心，底下則指示上拉出現控制中心。只不過小橫條拖動之后會變成箭頭，指示關閉的拖動方向，也許蘋果覺得箭頭太占空間，所以在后面的版本中簡化成一直是小橫條。

但很可惜蘋果并沒有提供 iOS 11 以及更老版本的 UIKit，我從 Meta 設計團隊（Facebook 改名叫 Meta）和國外知名全棧產品設計師 Meng To 在其 Design + Code 中自己繪制的 iOS 11 的源文件中，發現他們都將 Home Indicator 之外的小橫條統稱為：Drag Handle（拖拽把手）。

Drag Handle

國外流行說法

我們再來看看國外其他普遍的叫法。

比如國外知名設計自媒體 UX Collective 則統稱所有小橫條是：Handlebar（把手）。

國外出版的 iOS 9 相關書籍則將控制中心的小橫條稱之為：Handle（把手）。

有些 iOS 程序員把 Modal 上的小橫條叫：Modal View Indicator（模態視圖指示器）或 Handle view（把手視圖）。

圖源：Replicating Facebook's Draggable Bottom Card using Auto Layout - Part 1/2

也有程序員模仿 iOS 的 XX Indicaor 命名法，叫其為：Drag Indicator（拖拽指示器）。但這個名稱不可取，因為容易和其他平臺 Drag and Drop indicator（拖放指示器，是指挪動對象次序或位置的控件）弄混。

Drag and Drop indicator。圖源：Drag–and–Drop: How to Design for Ease of Use

歷史淵源

其實小橫條也不是 iOS 原創發明。早在 2010 年推出的 Palm Pre 2 手機上就能找到它的蹤跡。

左中：Palm Pre 2 有小橫條，右：Palm Phone 有 3 個點

Palm Pre 2 所使用的 WebOS 操作系統不僅和蘋果 iOS 和安卓的 Material Design，甚至諾基亞都有很深的淵源。

圖源：Apple iPhone X vs. Palm Pre！

曾任蘋果副總裁的 Jon Rubinstein 從蘋果的 iPhone 和 iPod 團隊挖了很多老同事來做 Palm，后來隨著 Palm 公司家道中落，不少人又回到了蘋果。

WebOS 靈魂人物之一 Matias Duarte，如今是 Google 設計部門的負責人。Material Design 正是在其推動下產生的。

Matias Duarte 在發布 Material You。圖源：10 年過去了，我依然很想念你

還有一位 Peter Skillman 之后去了 Nokia，為諾基亞 N9 打造了一套以滑動手勢為核心的 Swipe 界面，還有后來的 Asha 手機、Nokia HERE 等產品，都能看到它的身影。

諾基亞 N9

但很遺憾的是，Palm Pre 2 的使用說明書上只提到這塊區域是 Gesture Area（手勢區），而類似小橫條的并不是屏幕內的控件，只是屏幕外的一個指示燈，他們稱之為：lighted bar（小亮條）。

Palm Pre 2 的使用說明書

現實隱喻

屏幕內雖然呈現的是五光十色虛擬世界，但交互原理仍然遵循樸素物理學。究其原因，我們從嬰兒睜眼那一刻首先感受到的是現實的物理世界，從小積累物理環境中汲取的經驗，讓我們設計出來的屏幕虛擬世界逃脫不了現實的影子。

樸素物理學（na?ve physics）

虛擬世界越像現實世界，人類也更容易通過類比來快速學習和使用。這也就是為什么 iPhone 誕生之初采用擬物化界面的原因。只要你看過旅行箱的密碼鎖，就立馬知道 Picker （撥輪選擇器/拾取器）該如何操作。

左：旅行箱密碼鎖，右：iOS 6 Picker

顯然，小橫條的外形和推拉操作，很有可能來源于推拉門的把手。所以國外一些設計師開發者才把它叫 HandleBar（把手）。

用把手拖動控制窗口比例

到底怎么叫

最后經過 Taio App 開發者，知名 iOS 程序員鐘穎，從最蘋果最新的 iOS 15 開發文檔中發現 Modal 上方的小橫條就叫 Grabber。同時官方文檔上也寫明 Grabber 的作用是指示用戶可以調整模態視圖的大小尺寸（indicates that a sheet is resizable）。

Xcode 界面中的 UIGrabber。圖源：Rizwan Ahmed

蘋果官方開發者文檔

基于以上考據，結論：

• 我們可以統稱所有小橫條為：Grabber（抓握指示器），但不同位置的 Grabber 也有其專屬名稱。
• 屏幕底部上滑返回桌面的 Grabber 稱為 Home Indicator（桌面指示器）。
• 控制分屏比例的 Grabber 是 App Divider（App 分割條）。
• 位于 iPad 頂部負責快速設置分屏模式的 3 個點，名為：Multitasking Indicator（多任務指示器）。
• 為了區別統稱，位于 Modal view 上的 Grabber 可以叫它：Resizable Indicator（可調指示器）。

如何使用

所有類別的 Grabber 都用于指示用戶抓握滑動即可改變當前視圖尺寸，使得原本隱藏的手勢操作變得可見。

注意「改變」不等于「關閉」。 在 iOS 中凡是有 Grabber 的地方，如果滑動讓視圖變小甚至消失，只是改變視圖尺寸，并不是讓視圖徹底關閉。

以 iOS 郵件 App 為例，將正在撰寫的郵件按住 Grabber 向下滑動收起，之后再點擊打開，之前寫的草稿仍然存在。如果要徹底關閉寫郵件界面并且不保存草稿，應該點擊「Cancel」。

iOS 郵件 App 草稿機制

Grabber 可以類比成電腦上除了關閉以外的其他窗口操作：對窗口最大化、最小化或者調整尺寸。但不會改變窗口里內容的狀態。

MacOS 的窗口操作

Twitter App 的打開通知對話框就是典型地誤用 Grabber，首先這個對話框信息量很少，完全沒有拉動擴大尺寸的必要。其次使用 Gtabber 最小化也沒有意義，因為這個對話框并沒有什么需要存儲內容的狀態。已經有「暫時不用」能「關閉」對話框的操作就足夠了。

Twitter App 打開通知對話框

不要與系統手勢安全區沖突

全面屏手機四邊都有系統級別的手勢，例如“左劉海”下滑出現通知欄，“右劉海”下滑出現控制中心，左側邊向內滑動返回上一頁等。最好與系統手勢區保持一定的距離，避免滑動沖突。

最多只顯示一個自定義 Grabber

Home Indicator 常駐于屏幕底部，如果你想在自家的 App 里增加 Grabber，同屏幕內最多只能再顯示一個。否則一個屏幕內多個 Grabber，會導致用戶不知道該拖動哪個，或者產生誤操作。

以 iOS 地圖 App 為例，每次都只在最高層級的視圖上顯示 Grabber。

iOS 地圖 App

增加備用方案或新手引導

雖然互聯網從業者普遍對 Grabber 很熟悉，但對普通用戶和老年人來說，抓握仍然是一個比較高級的操作。可以在 Modal 的標題欄額外支持點擊展開/收起 Modal，便于用戶操作。

使用新手引導教育用戶也是可行的方案。例如把小橫條改成箭頭的樣式，指示拖動方向。或者增加額外的新手引導。

左：iOS 控制中心頂部仍用箭頭指示滑動方向，右：豆瓣使用新手引導動效指引

注意處理滾動事件

有時候 Modal view 內有一個長列表，如果滑動內容區是優先滾動列表內容還是改變 Modal 尺寸？如果 Modal 里有下拉刷新怎么辦？不同的 App 有不同的處理方式，但應該保證整個 App 內操作一致性。

參考文獻

• 10 年過去了，我依然很想念你 ，陳子木， https://sspai.com/post/68372
• 發明了卡片式交互的這家公司，本可以開創屬于自己的全面屏時代，木斯， 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 上的多任務處理功能，Apple 支持 (中國)， 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/

歡迎關注作者的微信公眾號：「龍爪槐守望者」