iOS: 自定义 Modal 视图
Modal 视图越来越多样化,连 Apple 官方人机交互指南都没法三言两语解释清楚。我们又该如何从海量的选择中作出决定呢?
当开发者们询问我如何选择视图类型时,我是震惊的。我不得不反复地思考这个问题以及我会选择的解决方案。有趣的是,当发现对视图的选择往往与美学无关时,他们常常会感到惊讶。
我推荐大家去看iOS 人机交互设计指南里关于 Modal 视图 的介绍,这是关于 modal 话题的很棒的参考资料。但最近有个朋友和我说,这篇文章的内容还不能满足他的要求。
出于好奇,我查询了各种现有的样式,来看看究竟有多少不同的种类。他是对的,这篇文章的内容确实不够完整。
那么哪种 modal 才是最好的选择呢?我列了一个清单,也许对你做决定有帮助。下面就来看看吧。
类型Modal 是一种使用户从当前工作流中转换到另一个界面,去做一些选择或完成某些任务的视图。当我们需要用户保持注意时它们是最好的工具。
与导航控制器这种注重内容和视图层级的视图不同,modal 总是为了某项特定任务而存在。
现在有很多类型的 modal ,它们可能覆盖整个屏幕或屏幕的一部分,也可能显示在屏幕中央或固定在屏幕顶部或底部。有时它们以弹出框的方式出现,有时又从一侧滑出。 这的确令人困惑。
在做决定之前你需要考虑一些事。我的经验是先确定视图是让人们选择一项任务还是完成一项任务。
选择器类这类 modal 要求你做出一个选择后才能继续操作。它可以是一个警告,或者一个让你指定你下一步操作或选择模式的对话框。
操作列表 是显示多个操作选项的最好方式。如果你除了列表没有太多额外需要展示的东西的话,这是个安全的选择。 弹出框 可以应用在之前视图的上下文比较重要的场景,弹出框的箭头在解释视图之间的关系上发挥了很好的作用。 如果你要提问或者从用户处获取权限, 最好使用警告框。
你可能注意到了以上介绍的视图都没有覆盖到整个屏幕,因为他们应该被快速使用,用户选择完就立刻回到之前的界面。
操作类这类 modal 是为了完成功能任务的,它们适用于添加、编辑等所有复杂的任务场景。
全屏视图
全屏视图是最常见的 modal 。通过覆盖整个屏幕来引起用户的充分注意,为可能包含多个步骤的复杂任务而设计。
一般情况下,使用全屏视图需要遵守以下两点:
完成性操作 (完成/保存/关闭) 总在视图右上角 取消性操作 (取消) 应该在视图左上角非全屏视图
有的时候你可能会有一些功能影响到部分主视图,在这种情况下最好让主视图作为背景显示。 这样人们就会立刻明白这个 modal 的作用。
如果你选择使用非全屏视图的话, 你还要额外考虑两件事:
选择合适的过渡方式 如果一个视图和屏幕上方的内容相关,那就让 modal 从那里滑出。让 modal 以用户可预见的方式出现会令应用的使用体验加分。
添加手势关闭操作 当 modal 以动画形式出现时,人们通常会用与动画过程相反的手势去关闭它(例如: 把放大的视图缩小)。对这一操作的支持会让这个应用使用起来更加和谐。
还有一种比较特殊的情况。有时候有些功能可能涉及之前视图的某个部分,这时候也同样可以使用弹窗方式实现。
Modal 是个非常有用的工具。刚开始接触可能会比较难理解,但是只要你在你的 app 上实践过,再用起来就会快速和简单很多。
如果你还是决定不了选择哪种 modal ,我准备了一个流程图,你可以把它当做快速参考。
希望对你有帮助!
原文发布时间为:2016年12月19日 本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。相关文章
- IOS添加自定义字体库
- iOS-一个弹出菜单动画视图开源项目分享
- iOS自定义model排序
- iOS中 图文混排/自定义图文混排 作者:韩俊强
- iOS中 自定义cell升级版 (高级)
- iOS中 UITabBarController中自定义UITabBar
- IOS开发自定义CheckBox控件
- 李洪强iOS开发之-实现点击单行View显示和隐藏Cell
- 李洪强经典面试案例33-如何面试 iOS 工程师
- 李洪强iOS开发本人集成环信的经验总结_02_基本配置
- 李洪强漫谈iOS开发[C语言-017]-printf函数
- 李洪强iOS开发之【Objective-C】07-自定义构造方法和description方法
- 李洪强漫谈iOS开发[C语言-001]-开发概述
- iOS开发多线程篇—自定义NSOperation
- iOS开发Swift篇—(三)字符串和数据类型
- iOS开发中代理使用出现的问题解决
- 关于iOS原生和react-native的交互
- iOS自定义控件开发详解
- 让iOS工程目录和文件夹保持一致的工具:synx介绍
- iOS编码规范精简版-根据apple、google等规范总结而来