移动端弹窗设计规范总结(一)

目录

     一、了解现状

二、确定整理范围及原则

三、了解相关术语

四、学习官方指南

五、规范总结


一、了解现状

学习查阅了国内外的部分相关资料之后,我发现,对于常用的交互控件,目前好像没有、也很难建立完全统一的规范,原因可能有以下几点:

(1) 国外相似的术语非常多,本身就存在很多混用、借用的情况。这些概念被引进国内时,缺乏一致、规范的翻译

(2)  PC 端向移动端转变的过程中,基于设备特点、使用场景等因素演化出了新的控件规范,导致即使是命名相同的控件,在 PC 端和移动端的交互方式也可能完全不一样。

(3) 随着技术升级、用户需求和行为等因素的变化,控件的定义和用途也会随之更迭,而且这些更新往往无法在所有应用开发中同步。

(4) 各大平台和系统基于各自的特点有针对性地创建了不同的控件分类方法、命名方式、视觉样式和交互规范。但国内的很多应用开发者在开发时都未遵循相应的规范,混用系统控件的现象很常见

(5) 为适应用户习惯或业务需要,国内的应用开发者常常在原生控件的基础上改造控件,形成新的控件样式和交互方式。此外,还有一些开发者对控件不熟悉,错误使用、滥用控件,导致同一控件的应用五花八门。

因此,很多基础控件的定义都越来越模糊,视觉样式、交互方式和使用场景也各不相同,各有说法,有些规则甚至是互相违背的。

二、确定整理范围及原则

基于以上现状,此次 “弹窗” 规范的整理主要针对 iOS 平台,并遵循以下几点原则:

(1) 尽可能遵循设计标准,减少不必要、不确定的创新。遵循 GUI 标准有利于提高用户预知控件功能与操作方式的能力,保证可用性,尤其是在没有条件进行实际用户测试的情况下。

(2) 优先参考官方设计指南,毕竟这些原则已经经过了大量、充分的用户研究、实践运用、测试迭代。

(3) 对于官方指南中未提及、不明确的控件规范,优先采用国内更多人采用的原则,确保规范尽可能通用。

(4) 整理、制定控件规范的最终目标是保证一致性和可用性,不必过于纠结术语本身,更重要的是理解规范背后的可用性原理,将其合理运用在设计中。

三、了解相关术语

在整理控件规范之前,我们先大致了解一下常见的相关术语。

(1) 模态(modal)和非模态(nonmodal / modeless)

这两个概念的理解基本没有什么异议。可以简单地理解为:

① 模态(modal)

•  用户可以在不脱离主任务(不离开当前主窗口)的情况下完成其他任务或获取信息。

•  模态情境会打断用户的操作,用户必须通过点击相关按钮或其他方式来退出模态情境,之后才能进行其他操作。

•  通常在需要获取用户的注意力、让用户完成独立的任务或做出明确选择的情况下使用。

② 非模态(nonmodal/modeless)

•  不会阻断用户的操作,用户可以继续之前的交互操作,不对其进行回应。

•  通常,用户可以点击非模态窗口之外的其他位置来关闭它或等它自动消失。

(2) 弹窗 / 弹框 / 弹出层 / 浮层 / 对话框 / 警告框(Popup / Popover / Dialog / Alert)

在很多的规范、文章里,这几个概念都是混着用的,并没有明确的、统一的概念定义。「弹窗」这个概念也逐渐泛化,在很多文章中被用作一个统称,指代所有从界面中弹出、临时存在的窗口。

四、学习官方指南

查阅了以上术语的相关资料后,我发现这些术语也没有标准定义,并且中英文版本很难对应上,去细究这些术语和分类反倒可能导致混乱、不易理解。

于是决定以 iOS 官方设计指南为主要依据,并参考 Material Design 和其他相关规范,对 “弹窗” 相关的控件进行梳理分类。

(1) iOS Human Interface Guidelines 相关简介

① Apple 的 Human Interface Guidelines 目前有 macOS、iOS、watchOS、tvOS 四个平台的设计指南,iOS 是由之前的 iPadOS 和 iOS 合并而来的。

② 以前, iOS UIKit 将界⾯元素分为 4 种类型:

•  栏(Bars):包含可以告诉用户他们当前所处位置的信息,以及帮助用户导航或触发动作的控件。

•  内容视图(Content Views):包含应用提供给用户的详细内容,并且支持进行滚动、插入、删除和排序等交互行为。

•  控件(Controls):执行动作或者展示信息。

•  临时视图(Temporary views):短暂地出现以告诉用户重要的信息或额外的选项和功能。

③ 后来,iOS UIKit 将界⾯元素更新为 3 种类型,「临时视图」和「内容视图」被合并为「视图」:

•  栏(Bars):告知⽤户当前在应用中所处的位置,提供导航,也可包含按钮或者其它用于触发动作和获取信息的元素。

•  视图(Views):包含⽤户在应用内看到的详细内容,例如⽂本、图形、动画和交互元素。视图允许使⽤诸如滚动、插入、删除和排列之类的交互行为。 

•  控件(Controls):触发动作和传递信息。包括按钮、开关、输入框和进度指示器等控件。

(2) iOS Human Interface Guidelines 和 Google Material Design 中与 “弹窗” 相关的 UI 元素列表

(3) iOS Human Interface Guidelines 中与 “弹窗” 相关的 UI 元素

(4) Google Material Design 中与 “弹窗” 相关的 UI 元素

(5) iOS 和 Android 的部分异同

五、规范总结

大部分的文章都按照 “模态” 和 “非模态” 来对 “弹窗” 相关的控件进行分类,但是,其中部分控件并不只有某一种模式,例如,官方定义的标准 Popovers(仅用于 iPad) 和我们目前实际应用中的 Toasts 都既有模态的,也有非模态的。

所以,为了方便规范的整理,这里不按 “模态” 和 “非模态” 进行分类,具体分类如下:

------

1. 以上内容均为个人思考与理解,如有错误,欢迎指正啊,非常感谢~

2. 此次规范梳理的过程中,我在网上查阅并参考了以下官方指南与文章,感谢这些平台和作者~

iOS:Human Interface Guidelines(Apple Developer)

Material Design(Google)

Android:Documentation for app developers(Google Developers)

Ant Design Mobile(蚂蚁金服)

支付宝开放平台文档(蚂蚁金服)

支付宝小程序设计文档(来源:书栈网)

iOS-Human-Interface-Guidelines(中文翻译;作者:Cloudox;来源:GitHub)

MBProgressHUD(作者:Jonathan George;来源:GitHub)

iphone - What is HUD VIEW?(来源:Stack Overflow)

UIProgressHUD(作者:Dustin Howett;来源:iPhone Development Wiki)

你真的了解这些交互控件吗?(作者:johnnylhj;来源:人人都是产品经理)

移动弹窗基础知识浅析——iOS弹窗体系(作者:常天;来源: TXD技术体验设计公众号)

各种「弹窗」有学名,从此不再分不清(来源:掘金)

实用干货!UI设计师需要了解的 APP弹窗体系(来源:优设网)

iOS:自定义模态(译文)(作者:半木zxy;来源:知乎)

弹窗、模态、提示、浮层,这几位是什么关系?(来源:知乎)

模态是一个大多数设计师不能完全理解的UX概念(作者:花火圆桌;来源:知乎)

CSS 命名之Dialog, Modal, Popup, Popover, Lightbox 等的区别(作者:Jeff;来源:腾讯云云+社区)

What’s the difference between a Modal, Popup, Popover and Lightbox? (来源:Stack Exchange)

这个控件叫什么(作者:龙爪槐守望者;来源:知乎)

正确使用控件 - 确认弹框、全屏弹框和模态视图(作者:沐风与体验设计;来源:简书)

3分钟带你掌握11个最常用的交互控件(作者:沐风与体验设计;来源:简书)

iOS和Android规范解析——简易菜单、简易对话框和弹出框(作者:沐风与体验设计;来源:简书)

Modal & Nonmodal Dialogs: When (& When Not) to Use Them(作者:Therese Fessenden;来源:NN/g)5000字,总结App加载设计(作者:一点优秀;来源:人人都是产品经理)

toast 吐司提示放在屏幕哪个区域比较好?(来源:知乎)

Can an Android Toast be longer than Toast.LENGTH_LONG?(来源:Stack Overflow)

Designing Toast Messages for Accessibility(作者:Sheri Byrne-Haber;来源:Medium)

人机工程学在交互设计中的运用(作者:XUE.百度;来源:人人都是产品经理)

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值