移動端交互控件規(guī)范總結：彈窗（一）

作者：ZYUN（20191018）
預計閱讀時長：8 分鐘（2110 字；15 圖）
溫馨提示：文中部分配圖可能有點模糊，如有需要可點擊「移動端交互控件規(guī)范總結：彈窗」查看大圖（第一次加載可能會有點慢～）。



了解現狀

學習查閱了國內外的部分相關資料之后，我發(fā)現，對于常用的交互控件，目前好像沒有、而且也很難建立完全統一的規(guī)范，原因可能有以下幾點：

  1. 國外相似的術語非常多，本身就存在很多混用、借用的情況。這些概念被引進國內時，缺乏一致、規(guī)范的翻譯。
  2. 從 PC 端向移動端轉變的過程中，基于設備特點、使用場景等因素演化出了新的控件規(guī)范，導致即使是命名相同的控件，在 PC 端和移動端的交互方式也可能完全不一樣。
  3. 隨著技術升級、用戶行為和需求等因素的變化，控件的定義和用途也會隨之更迭，而且這些更新往往無法在所有應用開發(fā)中同步。
  4. 各大平臺和系統基于各自的特點有針對性地創(chuàng)建了不同的控件分類方法、命名方式、視覺樣式和交互規(guī)范。但國內的很多應用開發(fā)者在開發(fā)時都未遵循相應的規(guī)范，混用系統控件的現象很常見。
  5. 為適應用戶習慣或業(yè)務需要，國內的應用開發(fā)者常常在原生控件的基礎上改造控件，形成新的控件樣式和交互方式。此外，還有一些開發(fā)者對控件不熟悉，錯誤使用、濫用控件，導致同一控件的應用五花八門。

因此，很多基礎控件的定義都越來越模糊，視覺樣式、交互方式和使用場景也各不相同，各有說法，有些規(guī)則甚至是互相違背的。



確定整理范圍及原則

基于以上現狀，此次 “彈窗” 規(guī)范的整理主要針對 iOS 平臺，并遵循以下幾點原則：

  1. 盡可能遵循設計標準，減少不必要、不確定的創(chuàng)新。遵循 GUI 標準有利于提高用戶預知控件功能與操作方式的能力，保證可用性，尤其是在沒有條件進行實際用戶測試的情況下。
  2. 優(yōu)先參考官方設計指南，畢竟這些原則已經經過了大量充分的用戶研究、實踐運用、測試迭代。
  3. 對于官方指南中未提及、不明確的控件規(guī)范，優(yōu)先采用國內更多人采用的原則，確保規(guī)范盡可能通用。
  4. 整理、制定控件規(guī)范的最終目標是保證一致性和可用性，不必過于糾結術語本身，更重要的是理解規(guī)范背后的可用性原理，將其合理運用在設計中。



了解相關術語

在整理組件規(guī)范之前，我們先大致了解一下相關的常見術語。

  1. 模態(tài)（modal）和非模態(tài)（nonmodal/modeless）
    這兩個概念的理解基本沒有什么異議?？梢院唵蔚乩斫鉃椋?/li>
  • 模態(tài)（modal）
    (1) 用戶可以在不脫離主任務（不離開當前主窗口）的情況下完成其他任務或獲取信息。
    (2) 模態(tài)情境會打斷用戶的操作，用戶必須通過點擊按鈕或其他方式來退出模態(tài)情境，之后才能進行其他操作。
    (3) 通常在需要獲取用戶的注意力，讓用戶完成獨立的任務或做出明確選擇的情況下使用。
  • 非模態(tài)（nonmodal/modeless）
    (1) 不會阻斷用戶的操作，用戶可以繼續(xù)之前的交互操作，不對其進行回應。
    (2) 通常，用戶可以點擊非模態(tài)窗口之外的其他位置來關閉它或等它自動消失。


  1. 彈窗 / 彈框 / 彈出層 / 彈出式窗口 / 浮層 / 對話框 / 警告框（Popup / Popover / Dialog / Alert）
    在很多的規(guī)范、文章里，這幾個概念都是混著用的，并沒有明確的、統一的概念定義?！笍棿啊惯@個概念也逐漸泛化，在很多文章中被用作一個統稱，指代所有從界面中彈出、臨時存在的窗口。



學習官方指南

查閱了以上術語的相關資料后，我發(fā)現這些術語也沒有標準定義，并且中英文版本很難對應上，去細究這些術語和分類反倒可能導致混亂、不易理解。
于是決定以 iOS 官方設計指南為主要依據，并參考 Material Design 和其他相關規(guī)范，對 “彈窗” 相關的控件進行梳理分類。

  1. iOS Human Interface Guidelines 相關簡介

  • Apple 的 Human Interface Guidelines 目前有 macOS、iOS、watchOS、tvOS 四個平臺的設計指南，iOS 是由之前的 iPadOS 和 iOS 合并而來的。

  • 以前， iOS UIKit 提供的界?元素分為 4 種類型：
    (1) 欄（Bars）：包含可以告訴用戶他們當前所處位置的信息，以及幫助用戶導航或觸發(fā)動作的控件。
    (2) 內容視圖（Content Views）：包含應用的詳細內容，并且支持進行滾動、插入、刪除和元件重布局等交互行為。
    (3) 控件（Controls）：執(zhí)行動作或者展示信息。
    (4) 臨時視圖（Temporary views）：短暫地出現以告訴用戶重要的信息或額外的選項和功能。

  • 后來，iOS UIKit 提供的界?元素更新為 3 種，將「臨時視圖」和「內容視圖」合并為「視圖」：
    (1) 欄（Bars）：告知?戶當前在應用中所處的位置，提供導航，也可包含按鈕或者其它用于觸發(fā)動作和獲取信息的元素。
    (2) 視圖（Views）：包含?戶在應用內看到的重要內容，例如?本、圖形、動畫和交互元素。視圖允許使?諸如滾動、插入、刪除和排列之類的交互行為。
    (3) 控件（Controls）：觸發(fā)動作和傳遞信息。包括按鈕、開關、輸入框和進度指示器等控件。


  1. iOS Human Interface Guidelines 中與 “彈窗” 相關的 UI 元素


  1. Google Material Design 中與 “彈窗” 相關的 UI 元素


  1. iOS 和 Android 的部分異同



規(guī)范總結

  1. 歸納分類，編寫規(guī)范
    大部分的文章都按照 “模態(tài)” 和 “非模態(tài)” 來對 “彈窗” 相關的控件進行分類，但是，其中部分控件并不只有其中某一種模式，例如，Popovers 和 Toasts 都既有模態(tài)的，也有非模態(tài)的。
    所以，為了方便規(guī)范的整理，這里不按 “模態(tài)” 和 “非模態(tài)” 進行分類，具體分類如下（點擊「 移動端交互控件規(guī)范總結：彈窗 」可查看大圖）。
    詳細規(guī)范可在《移動端交互控件規(guī)范總結：彈窗（二）》中查看。


  1. 界面清查，記錄問題
    對控件進行分類、整理規(guī)范之后，就開始對當前應用中的相關控件進行清查，并記錄存在的問題，以便在下次迭代中優(yōu)化完善。


  1. 制作組件，實際應用，測試迭代
    除了對當前應用中的交互控件進行清查、優(yōu)化，還可根據規(guī)范制作 UI 組件，以便在之后的設計中運用。同時，在實際運用中發(fā)現規(guī)范和組件存在的不足，不斷迭代完善。


  1. 以上內容均為個人思考與理解，如有錯誤，歡迎指正啊，非常感謝～
  2. 此次規(guī)范梳理的過程中，我在網上查閱及參考了以下官方指南與文章，感謝這些平臺和作者～

iOS：Human Interface Guidelines（Apple Developer）
Material Design（Google）
Android：Documentation for app developers（Google Developers）
Ant Design Mobile（螞蟻金服）
支付寶開放平臺文檔（螞蟻金服）
支付寶小程序設計文檔（來源：書棧網）

MBProgressHUD（作者：Jonathan George；來源：Github）
iphone - What is HUD VIEW?（來源：Stack Overflow）
UIProgressHUD（作者：Dustin Howett；來源：iPhone Development Wiki

Modal & Nonmodal Dialogs: When (& When Not) to Use Them（作者：Therese Fessenden；來源：NN/g）
你真的了解這些交互控件嗎？（作者：johnnylhj；來源：人人都是產品經理）
移動彈窗基礎知識淺析——iOS彈窗體系（作者：常天；來源： TXD技術體驗設計公眾號）
各種「彈窗」有學名，從此不再分不清（來源：掘金）
實用干貨！UI設計師需要了解的 APP彈窗體系（來源：優(yōu)設網）
iOS：自定義模態(tài)（譯文）（作者：半木zxy；來源：知乎）
彈窗、模態(tài)、提示、浮層，這幾位是什么關系？（來源：知乎）
模態(tài)是一個大多數設計師不能完全理解的UX概念（作者：花火圓桌；來源：知乎）
CSS 命名之Dialog, Modal, Popup, Popover, Lightbox 等的區(qū)別（作者：Jeff；來源：騰訊云云+社區(qū)）
terminology - What’s the difference between a Modal, Popup, Popover and Lightbox? （來源：Stack Exchange）
這個控件叫什么（作者：龍爪槐守望者；來源：知乎）
正確使用控件 - 確認彈框、全屏彈框和模態(tài)視圖（作者：沐風與體驗設計；來源：簡書）
3分鐘帶你掌握11個最常用的交互控件（作者：沐風與體驗設計；來源：簡書）
iOS和Android規(guī)范解析——簡易菜單、簡易對話框和彈出框（作者：沐風與體驗設計；來源：簡書）

5000字，總結App加載設計（作者：一點優(yōu)秀；來源：人人都是產品經理）
toast 吐司提示放在屏幕哪個區(qū)域比較好？（來源：知乎）
Can an Android Toast be longer than Toast.LENGTH_LONG?（來源：Stack Overflow）
Designing Toast Messages for Accessibility（作者：Sheri Byrne-Haber；來源：Medium）
人機工程學在交互設計中的運用（作者：XUE.百度；來源：人人都是產品經理）




最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容