产品是一件集需求分析、交互设计、项目管理、运营方法于一体的工作。入门产品，从繁杂事务中抓重点，其中有件事可以看App官方的界面设计指南，苹果和安卓有各自的设计指南。了解它们，并不能产出高质量交互，但至少知道在这两个最大的移动应用生态中，界面是什么样子，至少帮你设计出合格的界面。通读它们，还会有以下好处：
- 做出符合设计规范的产品。知道什么样的设计是被官方生态所接纳，轻则轻松上架，重则做出符合标准、审美一致、界面优雅的应用，上推荐首页也不是难事
- 掌握同行术语，交互设计师和客户端开发都按照官方说明来做设计，这个组件叫什么名字、如何摆放。知道这些，有了共同沟通的坐标
- 知道客户端界面哪些可以自定义，便于沟通需求。应用的界面框架，技术上支持高度定制，只是你要知道，哪部分支持自由发挥，哪部分受到限制
苹果官方设计规范是Human Interface Guidelines，包括应用架构、用户交互、系统适配、视觉设计、图标/图片设计、界面组件、应用扩展几个部分。新开发一个App，不可避免用到其中大部分设计，其中产品打交道最多的是应用架构和界面组件。以下清单，总结了这两个模块值得注意的设计原则和规范。
设计原则
- 美观和功能相结合，所有外形都是为了体现功能与服务
- 一致性：遵循标准、范式，有统一命名、样式和风格
- 即时返回结果：对屏幕上元素，皆可直接控制并有操作结果
- 给予反馈：每个行为都有反馈，它是声音、动画、界面元素变化的集合
- 控制：用户熟悉的界面、可预期的操作结果、可控并一切在掌握中的心态
各模块设计规范
“模块”在设计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