说到设计规范，能是很设计师忽略的一个东西，或者就注意到，也并没有引够的重视，今天咱们就来讲讲，为什么设计规范甚至是平台规范对我们来说很重要？
你觉苹、谷歌、微软设计团队怎么样？或者你有什么往设计公司或团队呢？
可想见，这些团队的设计师都是精挑细来的人才，他们都有各自的擅长的领域，这些精英们一起设计来的软件系统当然就是他们集体的智慧结晶。同时，既然是团队合作，那一定会有配合的问题，他们是怎么保证团队同的设计师做来的东西够有统一的格和交互方式呢？一个 iOS系统，里面除了系统层的设计，还包括各种置软件的设计，及第方团队设计的软件，他们又是怎么做到看起来就像是同一个人做的呢？
一定有统一的规范，用来让所有人对于这个产品、这个有同的认识和理解，才有可能做这一点。
这就平台规范的意义。
我之所以用「平台规范」而不是「设计规范」，就是想让大家意识到，规范东西其不只是给设计师看的，还包含给开人看的部分，甚至所有接触到个产品的设计开程的人应该，所以用「平台规范」更为贴切一。
然，有些品公开了设计规范，或者本身不是个平台性品，我们设计师也可以先关注他们设计规范，从那里也能学到很多东西。
是的，实规范这东西最大的意义只是来你遵守的，作为设计师，那些精英团队写的规范，全可作为你习的对象，里面包含着他们对自己产和平台的思考，及对自己设计念的总结。
且不说，要在这些上做计的候需要遵循的规范，换个角度想，既然向往这些计队，那为什不从这些规范开始学习呢？
按惯例，先新技能树：
我们看平台规范的时候，可以从这四方面入手：
- 则（Principle） ：产品整体的计则，和其产品在理念上的别；
- 架构（Architecture） ：规范的架构设，可以了解它的产品全貌；
- 说明（Instruction） ：每个控件的使用规范，开用的 API 接口；
- 动效（Motion） ：他们是怎么做动效，这些动效是怎么配合设计原则。
一、原则
我们任何一款产品的设，首先知道的就，自己这款产品哪平台的？如果会同时线多平台，那每平台之间的区别什么？的时候分别注意什么方？
常见的平台有：
- 桌面端：Windows、Mac OS；
- 移动端：iOS、Android；
- 网页端：桌Web、移动Web、H5、小程序；
- 可穿戴设备：手表、VR、AR等；
- 其：比如视、车载导航、智能家的屏幕等。
这些是对外的大平台，往小了看，如果我们设计的是一个微信上、支付宝上的功，或者是改进腾讯电脑管上的一个功，这时都可把微信、支付宝、电脑管或者自的产当成是一个小平台，我们应该基于之前产的原则和规范来做设计。
由于各个之间存在着差异性，它会着重告知的殊则，比如 iOS10 就调这三点：
- 清晰（Clarity）：纵观整个系统，任何尺寸的字都清晰易读，图标精确易懂，恰当且微妙的修，聚焦于功，一切设计由功而驱。留白、颜色、字体、图形及它界面元素够巧妙地突重点容并且表达可交互性；
- 遵从（Deference）：流畅的动效和清爽美观的界面有助于用户理解内容并之交互，而不会干扰用户。当前内容占据整屏，半透和模糊理能够暗示其它更多的内容。减少使用边框、渐变和阴让界面尽可能地轻量化，从而突出内容；
- 深度（Depth）：清楚的视觉层动的动效表达了层次结构，赋予了活力，并于理解。易于发的且可触发的界面元素能提升体验愉悦感，让用户功触发相应功能或者获得多内的同时还能掌控当置的龙去脉。当用户浏览内时，流畅的过渡提供一种纵深感。
从这三点可以显出 iOS10 的计点，它围绕着的高清屏幕、毛玻璃效果以及扁化的计风格，制订了核心计则。
不妨对照这三条原则，再去看手机里的操作系统，能发苹果的设师们如何严格遵守这些原则，从设出独具特色的界面交互的。
iOS10 还有一通用的设计原则，我们同样能用在自己的产品设计中：
- 学完整性：视觉表象、交互行与其功能整合的优良程度；
- 一致：内部一致的标准和规范有助塑造统一的用户模式；
- 接操作：用户接操作象（而不是过控件）能够提升用户参与度并有助于理解；
- 反馈：户的每个交互行为都需要有对应的反馈，如果有进的话要有明确的示，还可适当入效和声音；
- 隐喻：当界面的视觉表象和操作行为用户熟悉的日常体验相似，用户就能更快速地学会这款应用；
- 用户控制：应用可以对用户行出智能提醒建议，但不应该替用户决。
如果你在做计的过程中，真的理解透 iOS 给出的这些计则，并且用这些则来检验的产品，你做出的西就不会差。因此在你真正有足够的计经验和领悟之前，完全没必要重新发轮——真的没那多新则。
二、架构
除了规范的内容之外，其实每一个规范文档的结构也有多值得学习的地方。
1. Windows 计规范
如果你要做一个整的软件系统，如腾讯电脑管，那要怎么开始设计，要考虑哪些容？既然这些都是桌面端的应，那妨参考微软的 Windows 设计规范。2
可以出，计这类软件，布局、式和控件是重点要考虑的三块内容，甚至在式那还要细化计每一种控件，有了这个目录在，在计的完整性上面就得以保证了。
当然，未必全部都重新设，这需考虑到我们的设本，完全可以只挑选其中的一部分行设，些部分不需或者用得极少的话，可以直接用 Windows 的或者 Web 默认样式，但提了解全局默认样式总好处的。
2. 腾讯文档品牌设
如果你需要做一套新的品牌计，那不妨参考下最近腾讯文档做的品牌定说。3
腾讯文档虽然只一新品牌，但这腾讯ISUX团队亲自操刀的品牌设，整设流程内方面还很得我们借鉴的。他们设品牌目标、提取关键词的过程，具体落时的样式规范，这些都可以作品牌设的范本参考。
怎么样？么看来，无论你想做什么类型的设计，是不是有以借鉴的目标？
有值提醒是，这些平台规范往往都是以网站形作为呈现，内容特多，而有些是英文版，所以大多数容易望而却步。我荐大家在看时候最好根据自己情况，先选定 iOS、Android 或者微软三者作为目标，边看边写笔记，看完家，消化后再看其他，这样效会更好些。
但是这的设计规范更得很快，如上面说的是 iOS10 的中版规范，但实官上早就更到 iOS11 了，而前Windows有一版全中的规范特别详细有，现在更成英的 UWP 版本的规范了。要习的话千万要趁早，多存档（保存PDF、书签），要等到到了才追悔莫及。
参考资：
- 《译文 | iOS 10 人机界面设计指 （一）》
- 《Introduction to UWP app design》
- 《腾讯档牌设定》
三、说明
如今苹果它的多平台都撰写了详细的人机交互规范，包含桌面系统（macOS）、移动系统（iOS）、可穿戴系统（watchOS），还电视（tvOS）车载系统（CarPlay），这里简直一平台交互明的科全书。任何一类型的平台的设，都可以过参考他们制订的交互规范，可以学到不少好东。
次强，你要学的是他们写的、对应平台的互识，就你做的是 Windows、Android 平台上的设计，一样能学到很东西，别被思框架。
举个例子，比 iOS10 的人机互规范中，它对何设计数据输界面的说明，就是一个很的学习范。
示例：数据输（Data Entry）
无论是点击界面元素还是使用键盘，信息输是一个冗长的流程。当一个应用在做一有用的情前要求用户一连串的输，进而拖慢流程，么用户很快感到失望，甚至彻底地抛弃个应用。（ST注：先从用户使用的角度说明为什么重视里的设计，暗示我们里要做到高效和简单）
△ ST注：给出相关的设计原则，每一点是干货
1. 能时展示选项
尽能地提高信息输的效率。比，考虑使用选择器或是列表来替代输栏，因为从一列提前设定的选项中选择一个比打字容易。
2. 能时从系统中获取信息
不要强迫用户提供以自动或是在用户许内就能获取的信息，比联系人或是历信息。
3. 提供靠的默认值
尽能地预填最能的信息值。提供一个靠的默认值缩短做决定的时间从而加快流程。
4. 只有在收集完必需信息之才能进行下一步
在允许「下一步」或「继续」按钮前，确所有必要的输框有信息。尽能地在用户输之就立马检查输值，样他们就能立即改正。
5. 只要求必要的信息
只有系统运行正必需的信息才使用必填栏。
6. 简化值列表的导航
尤其是在列表和选择器中，必须能够简单地选择值。考虑通将值列表按首字母排序或是其它逻辑排列，从而加快浏览和选择的速度。
7. 在输栏显示提示以辅助说明
当输栏没有其它文字时，以包含占位符文字——比「邮件」或「密码」。当占位符文字已经够说明时不要单独使用标签来描述。
论你有没有设计过这类控件，他们提供这些原则都是很好参考，如你正愁没你做个系统性指导，那这套规范简是套教书级干货有没有？而是苹设计团队提供、免费。
四、动效
平台规范不仅含了交互说明，我们能从学到很多做动效知识，最出名然要数谷歌 Material Design 里动效系统了。来看他们团队于动效说明：
1. 谷歌动效说明
2. 什么动效很重？
动效展示了 App 的组织方式以及可执行的操作。
动效提供：
- 不同视图间的引导；
- 提示用户使用手势生什么；
- 元素层和空关系；
- 转移户注意，注场景背后发生的程序行为（如获取容或载一个视图）；
- 让产品变得有个性、优雅和让人喜爱。
3. Material 是如何运动？
Material 系统是从现实世界力学获灵感，比如力和摩擦。这些力学理念反映在用户输入屏幕上元素影响以及元素相互作用。
- 响应：Material 充满能量，它以在触的位置快速响应用户的操；
- 自然：Material 描绘了受现实世界力学启发自然运动；
- 聪明：Material 会聪明地了解周围环境，包括户和周围的他 Material。它可和附元素互并对户意图做适当的反应；
- 示：运动中的 Material 会将你的注力在正确的间引导正确的位置。
4. 好动效是怎样？
- 动效很的：交互动效不应该让用户的待时间；
- 动效是清晰的：渡动效应该清晰、简单和连贯，应该避免一次做太动；
- 动作是凝聚：Material 元素速度、响应性和意图是统。时，你所定义动效体验在个 App 都应该是致。
除上面关动效的基定义，他们还写很详细的做动效时应该注意的细节，以及各种动画曲的应用场等，非常推荐喜欢动效的同学去一下。果说互说明方面苹果团是大佬，动画说明方面毫无疑问谷歌团才是大佬。
4. 微软的动效说明
微软在 Windows 10 以，也做一套自己的 Fluent 设计系统，也是蛮有特的，我也举例介绍一下他们对动效的说明吧（他们称之为动画）。
5. 什么连贯动画？
ST注：明其中一种动画——连贯动画的作用
连贯动画让你以通为一个元素在两种不同视图之间的转换创建动画来创建动态和引注目的导航验。 有助用户持其上下文并提供不同视图之间的连贯。 在连贯动画中，当 UI 内容生变化时，元素似乎在两种不同视图之间持「连贯」，从其在源视图中的位置掠屏幕，到达其在新视图中的目标位置。 强不同视图之间的共同内容，并创建转换程中美观且动态的效果。
6. 查看际操
在段简短的视频中，应用使用连贯动画来为一个正在「继续」变成下一页标题中一部分的项目图像动画。 该效果有助在转换程让用户理前关系。
7. 何选择连贯动画？
页面之间导航时，很重的一点让用户了解导航过后会出哪些新内，以及这些新内与他们导航时的意图何关联。 连贯动画提供了一强的视觉隐喻，通过将用户的注意力转移到两视图之间共享的内，强调了二者之间的关系。 此外，连贯动画页面导航增添了视觉效果润色，这可以让的应用的动态设与众不同。
8. 如何实施
设置连贯动画涉及两骤：
- 准备源页面上的动画对象，这向系统表源素将参贯动画
- 启动目标页面的动画，将参考传递到目标元素
在这个步骤之间，源素将以冻结状显示在应用中的其 UI 上方，让你可以同执行任何其转换动画。 出于此因，你在个步骤之间不应等待超过 250 毫秒，因为源素的存在可能会让人心（ST注：这个对动画间的规定可以记住）。 如果你准备一个动画且并未在三秒内启动它，则系统将释放该动画，且任何对 TryStart 的后续调用将失败。
可以通过调用 ConnectedAnimationService.GetForCurrentView 访问当的 ConnectedAnimationService 实例。 准备动画，请此实例调用 PrepareToAnimate，将参考传递到用转换中的唯一密钥 UI 元素。 该唯一密钥让可以稍后检索动画，例如不同页面检索。
ConnectedAnimationService.GetForCurrentView().PrepareToAnimate(「image」, SourceImage);
（ST注：明了动画的作用之后，他们始明如何发中使用这种动画的方式，用这种动画的时候可以把它给发看）
附录：常用平台规范
- iOS的 Do’s and Don’ts： https://developer.apple.com/design/tips/
- 苹果的人机交互指南（HIG)：https://developer.apple.com/design/
- iOS10人机交互指南（中文版翻译）：https://www.uisdc.com/ios-10-gui-design-guideline-1
- Google Design： https://design.google
- Google Material Design – Motion ：https://material.io/guidelines/motion/material-motion.html
- 微软的UWP设计规范：https://developer.microsoft.com/zh-cn/windows/apps/design
- 腾讯文档品牌定：https://isux.tencent.com/articles/tencent-docs.html
参考资：
- 《译文 | iOS 10 界设计指南 （）》
- 《Material Motion – Motion – Material Design》
- 《适用于 UWP 应用的贯动画》
注作者的微信公众号：「落羽敬斋」
图片素材作者：runo Peg
浙公网安备33011002017549号