美文网首页@互联网 ·产品实战iOS人机交互指南,精简版@产品
精简版 | iOS人机交互指南——各种视图(表格、操作表、滚动视

精简版 | iOS人机交互指南——各种视图(表格、操作表、滚动视

作者: 五九楼 | 来源:发表于2016-12-06 14:04 被阅读443次

Action Sheet(操作表)

Activity View(活动视图)

活动视图提供分享和动作扩展到其他应用,参考Sharing and Actions

  • 设计一种简单的模板图片来代表你定制的活动,用来生成图标,大小在70x70左右。
  • 使用简洁的标题来描述你的动作。
  • 确保活动与当前内容相符合。
  • 使用Action Button来展示活动视图。
  • 更多细节可参考UIActivity中的UIActivityViewController

Alert(警告框)

  • 谨慎使用警告框。
  • 在多个屏幕方向上测试警告框的外观。
  • 更多实现细节UIAlertController
  • 使用简短描述性的警告框标题。
  • 如果有必要提供内容,使用简短完整的句子。
  • 避免使用责备谩骂等语言。
  • 使用清晰的按钮,避免提供过多解释。
  • 一般来说,警告框使用两个按钮。如果有多余两个选项可以使用Action Sheet
  • 为按钮提供简明符合逻辑的标题。
  • 根据用户的预期来摆放按钮,重要的按钮放靠右摆放。取消按钮总是放在最左边。
  • 必须提供取消按钮。
  • 标识出不可恢复的操作。可参考UIAlertActionStyleDestructive
  • 允许通过Home键来关闭警告框。如果没有取消按钮,可以考虑通过代码实现Home键关闭警告框。

Collections(集合)


集合用来管理有序的内容,例如图片。一般来说,集合用来展示基于图片的内容。

  • 如果标准的布局已经足够,不要有过多新的设计。
  • 如果是文本内容,使用表格而不是集合来代替。
  • 当设计到自动布局时要小心使用。
  • 更多实现细节可参考UICollectionView

图片视图

图片视图用户展示单张图片或一组动态图。默认的图片视图是没有交互的。

  • 如果可以,确保所有在图片视图中显示的图片都有相对一致的尺寸。
  • 更多实现细节可参考UIImageView

地图

地图可以让你在应用内显示位置数据,和支持大部分的内置地图的功能。

  • 一般来说,需要保持你的地图可进行交互。
  • 使用预期的pin颜色,因为用户已经熟悉地图app中的标准pin颜色。
  • 更多实现细节可参考MapKit

Pages(页面)


页面视图控制器提供一种方式实现线性导航的页面切换。例如一个文档、书本等。过渡动画有两种类型:Scrolling或pagecurl。

  • 如果可以的话,实现非线性地页面切换方式。很多用户在切换页面时是直接跳转到目标页面,因此需用提供自定义控件来实现这样的跳转。
  • 更多实现细节参考UIPageViewController

Popovers

来自Apple官网来自Apple官网

popover是临时的视图用于展示其他屏幕上的内容。popover最适合在大屏幕上使用。

  • 避免在iPhone上显示popover。应该采用模态视图来代替。
  • 使用关闭按钮来进行确认动作。
  • 自动关闭popover时保存内容。
  • 在合适的位置显示popover。
  • 每次只现实一个popover。
  • 不要在popover上面现实其他视图。
  • 如果可以的话,让用户先关闭popover在通过交互显示另一个。
  • 避免使用太大的popover。
  • 确保定制的popover看起来像个popover
  • 当改变popover的尺寸时,提供平滑地过渡动画。
  • 更多实现细节参考UIPopoverPresentationController

Scroll Views(滚动视图)

  • 支持缩放行为。
  • 当滚动视图使用页面模式时考虑提供一个页面控制元素。关于页面控制元素可参考Page Controls
  • 不要在一个滚动视图中加入另一个滚动视图。
  • 一般来说,每次只显示一个滚动视图。
  • 更多实现细节参考UIScrollView

Split View

来自Apple官网来自Apple官网
  • 为你的内容选择合适的split view布局。
  • 在主版面上高亮显示可交互的元素。
  • 一般来说,只在一个版面显示导航。
  • 提供多种方式来进入隐藏的主版面。
  • 更多实现细节参考UISplitViewController

Table(表格)

iOS提供两种类型的表格:Plain和Grouped。

  • 考虑表格的宽度。
  • 快速显示表格内容。
  • 内容加载时显示加载进度。
  • 确保内容实时更新。用户手动进行刷新,可参考Refresh Content Controls
  • 不要在包含右边元素的表格中显示下标。
  • 更多实现细节可参考UITableView

关于表格的行

Text View

来自Apple官网来自Apple官网

text view用来显示多行格式化的文本内容。

Web View

用来加载富文本的网页内容,如嵌入式Html或网站。

  • 如果可以的话显示前进和后退按钮。
  • 避免使用web view来充当网页浏览器。
  • 更多实现细节可参考WKWebView

相关文章

网友评论

    本文标题:精简版 | iOS人机交互指南——各种视图(表格、操作表、滚动视

    本文链接:https://www.haomeiwen.com/subject/fclrmttx.html