做交互设计自检清单?看看IOS官方怎么说

产品是一件集需求分析、交互设计、项目管理、运营方法于一体的工作。入门产品,从繁杂事务中抓重点,其中有件事可以看App官方的界面设计指南,苹果和安卓有各自的设计指南。了解它们,并不能产出高质量交互,但至少知道在这两个最大的移动应用生态中,界面是什么样子,至少帮你设计出合格的界面。通读它们,还会有以下好处:

  1. 做出符合设计规范的产品。知道什么样的设计是被官方生态所接纳,轻则轻松上架,重则做出符合标准、审美一致、界面优雅的应用,上推荐首页也不是难事
  2. 掌握同行术语,交互设计师和客户端开发都按照官方说明来做设计,这个组件叫什么名字、如何摆放。知道这些,有了共同沟通的坐标
  3. 知道客户端界面哪些可以自定义,便于沟通需求。应用的界面框架,技术上支持高度定制,只是你要知道,哪部分支持自由发挥,哪部分受到限制

苹果官方设计规范是Human Interface Guidelines,包括应用架构、用户交互、系统适配、视觉设计、图标/图片设计、界面组件、应用扩展几个部分。新开发一个App,不可避免用到其中大部分设计,其中产品打交道最多的是应用架构和界面组件。以下清单,总结了这两个模块值得注意的设计原则和规范。

设计原则

  1. 美观和功能相结合,所有外形都是为了体现功能与服务
  2. 一致性:遵循标准、范式,有统一命名、样式和风格
  3. 即时返回结果:对屏幕上元素,皆可直接控制并有操作结果
  4. 给予反馈:每个行为都有反馈,它是声音、动画、界面元素变化的集合
  5. 控制:用户熟悉的界面、可预期的操作结果、可控并一切在掌握中的心态

各模块设计规范

“模块”在设计App中,可看作是功能、服务、特性的集合,一个模块包括若干个组件,合在一起达到设计目标。

加载 Loading

如果需要加载,必须清晰展示其状态,至少是有转圈加载,最好有进度条展示具体进度比例,或者用占位符(文字、图片、动画)、预加载界面

模态控件 Modality

Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view.

用户在完成任务或操作时,需要集中精力在一个空间内,模态控件用以制造这个空间,操作栏、警告弹框、操作面板都可用作模态控件。用户在关掉模态控件,或做出下一步操作之前,无法进行其他任务。所以模态组件一般带有取消、完成、操作项等按钮。

设计原则:

  • 尽量少用。移动应用中,用户倾向同时进行几个任务,而非单线程般操作,所以不喜欢阻断操作,比如连续碰到节点时选“是”或“否”
  • 提供安全的方式退出模态,让用户清楚知道,如果退出,会出现什么结果

导航 Navigation

三种风格:

  • 单路径纵深:每个屏幕做出一次路径选择,选择后只知道当前所在位置和路径,其他路径不可见,需返回才上一步才能选择其他路径;比如IOS系统设置中的菜单
  • 平铺:可见所有同一层级菜单,支持来回切换,大部分App底部Tab栏属于此类导航
  • 内容之间交错:官方说明称为“内容驱动”或“体验驱动”,常见于游戏、阅读等沉浸式体验产品中,内容本身带动导航

设计原则:

  • 从导航能容易并快速达到内容,也就是让用户离内容更近
  • 多用手势,让操作更流畅:比如左滑回到上一页,下滑关闭当前页面,是比手指点击更顺畅的交互

首次使用 Onboarding

设计原则:

  • 尽快进入首页:用户下载应用,首次打开必然带着某种期待,避免展示闪屏、菜单和指导。如果对第一次打开App的用户,必须介绍新版特性和使用指南,提供“跳过”操作
  • 不要太早或太频繁请求App Store评分

界面基础组件

构成界面的组件,在IOS中以UIKit框架实现,它将所有组件分成三类:

  • Bars:告诉用户所处位置,也包括发起操作的按钮
  • Views:实际内容的容器,包括所见信息,比如文本、图片、动画、交互元素;也包括操作项,如滑动、删除、拖拽
  • Controls:发起行动,输入/输出信息,常用组件有按钮、开关、输入框、进度条

各个组件设计checklist如下:

Bars

  • 导航栏 Navigation bar

    • 左上角返回按钮,最好展示上个页面名字;右侧可放:edit/done按钮,用以操作页面内容
    • 当键盘弹出、手势操作、全屏显示时,可以隐藏;并在手势操作下重新出现,如点击屏幕
    • 页面内容标题居中展示,页面无需标题时可不现实
    • 标题如果字体多字号大,导航栏中间放不下,可放在内容容器的左上角,屏幕上滑时,字体缩小显示在标题栏
  • 搜索框 Search bar

    • 支持一键清除所有输入
    • 支持取消搜索(退出搜索页面,停止执行中的搜索)
    • 占位符引导提示
    • 恰当用scope bar(筛选分类)来提纯结果,事先或事后筛选
  • 状态栏 Status bar

    • 屏幕顶部展示网络运营商、时间等信息
    • 默认透明,样式上最好App界面形成深浅颜色对比
    • 需要沉浸体验或全屏展示时,隐藏状态栏
  • 工具栏 Tool bar

    • 无需使用可隐藏,比如上滑手势时,点击屏幕可恢复展示
    • 工具栏上的按钮,可以是图标或文字

Views

  • 操作菜单 Action sheet

    • 两个用途:发起新任务或二次确认不可逆操作
    • 需要带有Canel按钮
    • 突出不可逆操作样式,如用红色字体
  • 操作面板 Activity views

    • 可定制该面板操作项,使之与当前内容有关,无关操作不出现在面板上
    • 一般两种操作,分上下两个区域平铺操作图标:分享到站外和APP内操作(复制、添加收藏、举报等)。分享到站外区域,列出各个社交平台或应用图标,至于“APP内操作”区域上方
    • 发起操作时,此面板应该立即消除,耗时需加载的任务放在后台默默执行
  • 警告弹框 Alert

    • 可包含元素:标题、正文、1~2个按钮、输入框
    • 弹框样式固定不可更改
    • 标题用短句、问题或词组,因为一个单词很难包含足够信息
    • 按钮上文案,写点击按钮的结果,而非操作过程,避免用“是/否”作文案;比如“View All, Reply, or Ignore",再比如表达接受的按钮文案,写“OK”
    • 左确认,右取消:通常来说,最可能点击的那个按钮放在右边,“取消/退出”按钮总是放在左边
  • 弹出菜单 Popover

    • 通常由界面某个元素触发,覆盖在顶层
    • 有非模态/模态两种:非模态弹出菜单由点击菜单按钮或菜单以外区域关闭;模态弹出菜单只能通过菜单上Cancel按钮或其他按钮关闭
    • 弹出菜单出现时,菜单以外区域元素无法交互,只有收起菜单才能继续交互
    • 避免在Iphone中使用Popover。我想可能因为屏幕小不适合,但不少App还是用了,只是面积小操作简单,没发现太多别扭之处
    • 如果支持打开多个弹出菜单,让用户关闭一个同时自动打开另一个,以减少点击操作

Controls

  • 文本编辑菜单 Edit Menus

    • 长按或双击屏幕文本时,出现的横排菜单栏
    • 可以对输入框中文字、纯文本、webview或图片这四种内容进行操作
    • 默认选项有剪贴、复制、黏贴、选择、全选、删除,根据不同内容选择不同操作项
    • 可以在菜单中加入定制操作项,但放在系统操作项之后,因为后者是最常用操作
  • 选择器 Pickers

    • 通常在编辑或点击菜单选项时,从屏幕底部弹出
    • 选项很多时不适合用Picker,用table代替,通常新开页面,整屏展示选项,比如在LBS服务中选择城市
  • 加载状态 Progress indicators

    • 分为activity indicator转圈和progress bar进度条两种,如果加载状态可量化,优先选择进度条
    • 加载时,只展示loading没有任何信息价值,可以提供有意思的信息,如王者荣耀开局前滚动播放游戏tips
    • 进度条可以适配成和APP相称的样式
  • 刷新控件 Refresh content control

    • 此控件在页面顶部以下拉手势触发,用以立即重新加载内容,通常用在table view(列表页)中
    • 即使这个控件需要手动触发,用户也不期待每次获取新内容都要这样做,所以有这个控件的页面,可以引入定时自动刷新机制
    • 此控件可以展示文案标题,如果需要,用文案告诉用户加载的结果,比如“更新于XX时间“或”已为你推荐XX条内容”
  • 分类控件 Segmented control

    • 不同部分,内容属性互斥,甚至视图不同,比如系统自带Map,用此控件实现在卫星、交通路线、地图之间切换
    • 和tab bar不同地方在于,此控件用在同一视图/页面中,不同类型内容之间切换;tab bar区分不同信息架构,segmented control区分同一信息架构内不同类型内容
  • 滑动条 Slider

    • 包含信息:已滑过轨迹颜色、中间滑块icon、左右icon(表达最大值/最小值的含义),三者皆可自定义
    • 不要用此控件来控制音量,有专门音量控制器
  • 加减器 Stepper

    • 用来加减,少量点击即可改变数字;加减号可换成定制图标,如果需控制的数量级大,不适合用此控件
  • 开关 Switches

    • 只用在列表中,其他地方如有同样需求,用按钮实现
    • 此控件通常影响其他屏幕上的内容,因为它自己可能被放在设置页面
  • 输入框 Text fields

    • 单行、高度固定,点击时自动触发键盘,用以输入少量信息
    • 右侧有清除整行输入内容的按钮
    • 输入不同类型内容,唤起不同键盘,如默认键盘、数字键盘、邮箱键盘、号码键盘、网页搜索键盘,具体参见UIKeyboardType

推荐阅读更多精彩内容

  • 我为什么读书? 培根说:读史使人明智,读诗使人灵秀,数学使人周密,科学使人深刻,伦理使人庄重,逻辑修辞使人善辩。 ...
    MargareTong阅读 31评论 1 0
  • [TOC] 内容 时间:2017/03/29 耗时19分钟 截图 总结
    上山老人阅读 32评论 0 0
  • 吃了饭没事出去溜达,这附近没啥好逛的,除了压马路就是去广场或者逛商场,或者去公园跑步,我要不跑步要不去广场,去广场...
    Puz阅读 42评论 0 0
  • 【昨晚睡觉时间】11:40 【今日醒来时间】8:00 【今天开心的事】 去虎峪实习,看了很多石头 【今天不满意的事...
    涤生照海阅读 32评论 0 0
  • 嘿小明儿阅读 33评论 0 2