自己负责设计的APP马上就上线了。

在项目进行的过程中，也遗留了很多用户体验的问题。如输入框的焦点问题，控件的统一性等。所以很有必要再系统地整理一份设计规范。

视觉规范，如配色风格，尺寸标注等，视觉设计师已经整理了一份。从交互设计师的角度，主要从页面跳转、架构逻辑等角度考虑。

阅读了《iOS10 人机界面设计指南》、《Android用户界面指南》、《Windows设计指南》、《微信小程序设计指南》，下面就简单记录一下学习的过程。

一、iOS10 人机界面设计指南

（一）综述

1.1_设计原则

清晰：文字、图标、

遵从：要轻量化，突出内容

深度：纵深感，要有层级结构。

其他：美学完整性、一致性、直接操作、反馈、隐喻、用户控制。

1.2_iOS新特性

1.3_界面基本元素

栏

视图

控件

（二）交互

2.1_3D触摸：为触碰式交互增加了一个维度。

主屏幕交互

轻压和重压

Live Photos

2.2_辅助功能：帮助失明、失聪及其他残疾群体。

文字标签不可见，但是可使用声音描述；适当检查辅助功能的偏好设置；测试相应的辅助功能；通过隐藏式字幕和口述影像为失聪、失明的用户提供服务。

2.3_音频：无论声音是应用体验的要素还是点缀，都需了解用户对声音的要求，并满足他们的期待。

如何控制音量，可通过音量键、静音键、耳机声控和屏幕的音量调节滑块控制声音；使用系统提供的音量视图；可设置音频类别（如是否必要，是否会使其他声音静音，是否被录制）

2.4_身份验证：要求用户进行身份验证时，应该用有价值的东西交换。

应该尽可能延后登录，以允许用户先探索和了解你能够提供的内容；解释身份认证的优势；展示适合的键盘来减少输入。

2.5_数据输入：信息输入是一个冗长的流程。

1、选择比输入号，尽可能展示选项；2、可能时从系统获取信息；3、提供可靠的默认值；4、收集完必要信息，才能进入下一步；5、即时验证；6、简化值列表导航，通过按首字母或其他逻辑排列，加快浏览和选择速度；7、输入栏显示辅助说明。

2.6_反馈：让用户知道应用现在在做什么，下一步应该做什么，并且理解操作的结果。

1、轻轻反馈，不打扰用户；2、避免不必要的警告

2.7_文件处理：用户在创建、查看、操作文件时，无需思考文件系统。

文件随时自动保存；不要提供创建本地文件的选项；设计直观且图像化的文件浏览界面；在应用内就能预览文件；合适时，与其他应用共享文件。

2.8_启动初体验：应用启动时间是接触新用户并与老用户再次连接的第一个时机。

提供启动画面，并加载应用初始内容；选择合适的方向启动（考虑横竖屏）；快速使用，允许用户跳过；设想用户可能需要的帮助，当他们错过启动画面时，允许重新观看；只在教程中展示最关键的内容；通过操作而不是阅读来学习，让学习变得有趣而且易于学习；避免在开始时要求用户设置信息；避免展示应用的接受许可协议和免责声明；在应用重新启动时恢复之前的状态；不要太快或太频繁要求用户对你的应用评分；不要鼓励重启。

2.9_手势：手势表现了一种亲密的人与内容之间的联系，并且加强了对屏幕上对象直接的操作感。

手势类型：点击（Tab）、拖拽（Drag）、滑动Flick、横扫Swipe、双击Double Tap、捏合Pinch、长按Touch and hold、摇晃Shake

一般使用标准手势；不要禁止系统性的手势；避免使用标注手势来执行非标准操作；为基于界面的导航和操作提供补充性的快捷手势，而不是取而代之，如在iPad中，可以点击Home键退出到主屏幕，或是使用四指捏合的手势；使用多指手势加强某些应用的体验。

2.10_加载：在内容加载时，若未空白静止的页面，会让人感到困惑和失望，从而离开你的应用。

明确加载的状态，如加载图标，加载进度等；通过教育或娱乐填充加载时间；自定义加载动画；尽快显示内容，如显示占位符、图片或动画，并可在后台预加载。

2.11_模态：模态突出焦点，用户只有在完成当前任务或关闭一个信息或视图之后才能去做其他事情。

减少模态的使用；提供明显退出方式；保持模态的简单、简短且高度集中；使用标题；谨慎使用警告框；尊重用户的通知偏好设置；不要让模态视图盖在浮层上；让模态视图视觉风格与应用相符；选择合适的模态视图样式，如全屏、页列表、表格列表、当前上下文；选择合适的过渡方式。

2.12_导航：让用户注意不到导航的存在，才是好的导航设计。

三种导航结构：分层导航、扁平导航、内容驱动或体验驱动导航；提供清晰的路径；设计一个能够快速简单访问内容的信息结构；使用触摸手势制造流畅感；使用标准导航组件；访问分层内容；使用标签栏来展示内容或功能相似的类别；使用页面控件展示同类型内容。

2.13_请求许可：用户必须对应用予以授权，应用才能获取用户的个人信息。

只在应用真的需要时，才向用户请求获得个人数据；需求不明显时，向用户解释为什么需要这些信息；一启动就请求允许对运行应用直观重要的信息；不必要时不请求位置信息。

2.14_设置：成功的应用能一开始让用户很好使用，并同时提供了便捷的途径去调整体验。

能从系统获取的就不要询问用户；考虑对配置选项的优先排序；把不经常更改的配置选项放系统设置里；适当提供去设置的快捷路径。

2.15_用辞：每一个应用都是与用户对话的一部分。

使用熟悉移动的语言，避免使用不理解的术语；保持界面文本清晰简洁；避免使用傲慢的语言；尽量使用日常且友好的预期；谨慎使用幽默；使用相关一致的语言和图像；提供精准的日期；恰当指出可交互元素。

2.16_撤销和重做：很多应用通过摇晃设备来撤销或重做某个操作。

简明扼要描述操作，在前缀后面提供一两个词语；手势使用不要混淆；节制使用按钮；只在当前情境执行。.

（三）特性

3.1_多任务处理：随时且快速从一个应用切换到另一个，让你在不离开当前APP的情况下暂时性的使用第二个APP；

准备好应对中断，并准备好随时恢复；确保你的界面能够与双倍高度的状态栏共处；暂停需要时时关注或用户参与的活动；恰当处理来自应用外的声音；在后台完成用户发起的任务；节制的使用通知。

3.2_通知：利用通知提供及时和重要的信息。

通知样式：横幅，在屏幕上方出现几秒，然后消失；提醒，屏幕上方出现，直到被手动关闭。

通知可以是本地或远程的。本地通知由同一个设备发出和接收；远程通知，也叫推送通知，来自一个服务器。

提供有用的通知；即使用户没有回应，也不要为同一件事情发送多个通知；不要包含你的APP名字和图标；角标用来补充说明通知，而不能表示重要的信息；保持角标实时更新；提供声音以辅助你的通知提醒；考虑提供一个详情视图；提供直观、有用的操作；避免展示破坏性的操作。

3.3_打印：使用AirPrint技术来无线打印。

让打印选项易于发现；只在可以打印的情况下才允许打印；提供有价值的打印选项。

3.4_快速查看：预览文档。

在当前环境下合理展现预览视图，提供退出预览的按钮。

3.5_Siri：联动来执行任务以应对用户的语音命令和问题。

力求无需触屏或注视屏幕的声控体验；快速应答并减少交互操作；保证APP的回应是相关的、精确的以及合适的。

3.6_电视供应商

优设网 网址链接：

（四）视觉设计

4.1_动画：表达状态、提供反馈、加强直接操纵感，并视觉化呈现用户的操作结果。

明智且审慎使用动画和特效；使用连贯的动画；力求真实性和可信性。

4.2_品牌化：通过优雅别致的文字、颜色和图片来营造独特的品牌辨识度。

融入精妙的、不唐突的品牌元素；不要让品牌化阻碍了优秀的应用设计；内容比品牌化更重要；抑制住想要在应用中到处展示Logo的诱惑；遵循Apple的商标准则。

4.3_颜色：能够暗示可交互性、增加活力以及提供视觉的连续性。

在app内使用互补的颜色；选择一种与Logo相符的颜色数量有限的色板；考虑在app中使用一种关键色来暗示交互性；避免给可交互和不可交互的元素使用相同的颜色；在多种光线条件下测试app颜色方案；考虑true tone显示屏对颜色的影响；关注色盲用户以及不同文化对颜色的认知差异；使用足够的颜色对比度。

4.4_布局：合理布局以便在所有环境任何一种模式下都能使用。

环境变化时保持当前内容的焦点不变；确保最重要的内容在默认大小下清晰可读；保持整体一致的视觉外观；利用视觉权重和平衡来表示重要性；利用对齐来方便浏览，并且表达结构和层级；避免无缘由的布局变动；同时支持竖屏和横屏模式；如果只支持一种模式，请支持该模式的两种变量；利用当前使用内容来定制应用对旋转的反应；为可交互元素提供足够的空间；准备好应对文本大小的改变。

4.5_字体：iOS默认字体是San Francisco，它有两个变体。

通过字体粗细、大小和颜色来强调重要信息；尽量使用一种字体；尽量使用内置的文本样式；确保自定义字体清晰可读；让自定义字体实现辅助功能；根据内容的优先级来应对字体大小的改变。

（五）图表

5.1_应用图标：app需要一个精美、令人印象深刻的图标。

拥抱简洁；提供一个单独的焦点；设计一个易于辨识的图标；让背景简单并且避免使用透明度；只有当logo全部或部分由文字组成时，才在图标使用文字；不要包含照片、屏幕截图或界面元素；不要复用Apple硬件产品的图形；不要在界面到处放置APP图标；在不同壁纸上测试你的图标。

APP图标大小

5.2_自定义图标：不能用系统图标表示的任务或模式。

创作简单、辨识度高的设计；设计一个纯色并带有透明度、无锯齿、无阴影的图标；使自定义图标与系统图标有所区分；保持图标之间一致连贯；提供两种自定义标签栏图标的版本，如未选中和选中态；不要在自定义标签栏图标内包含文本；不要复用Apple硬件产品的图形。

5.3_图片大小和分辨率

高分辨率屏幕在相同的物理空间内有了更多数量的总像素，所以平均每点有了更多的像素。我们需要依据设备的不同，将每张图像的固有像素乘以相应的比例系数。

5.4启动画面：增强用户对你的app能够快速启动并且立即被使用的感觉。

设备屏幕不同，启动画面大小会有差异；最好是能与app首屏相似，避免跳转太突兀；淡化启动；不要打广告。

5.5_系统图标

导航栏和工具栏中，可以使用文本代替图标来表示某项。

（六）UI栏

6.1—导航栏：屏幕顶部，状态栏之下。

导航栏的左侧会出现一个返回按钮，并且一般会标有上一个页面的标题；