美文网首页@互联网 ·产品实战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