设计规范系统对于一个产品的UI来说无疑是很重要的，无论是国内大的团队还是小的团队，都需要做。关于设计语言的参考也特别多，最出名的莫过于苹果和谷歌，也是设计语言的鼻祖。还有一些其他公司的也放上简单的介绍和链接，大家都可以学习一下。
1.Material Design
官网：https://material.io/design/
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目标是创造一个将经典的设计原则和科技、创新相结合的设计语言，并且在不同设备上提供一致的体验底层系统，并同时支持触摸、语音、鼠标、键盘等输入方式。他们还做了一个Material Design的主题编辑器（现可用于Sketch），让各类型产品都可以用谷歌的设计语言来设计自己的产品。
主题编辑器：https://material.io/resources/theme-editor/
设计目标
• Create 创造：创造一个将经典的设计原则和科技、创新相结合的设计语言。
• Unify 统一：开发一套统一的底层系统，保持各端一致的用户体验。
• Customize 自定义：灵活多变的视觉语言，让各家自成一派，形成独特鲜明的品牌风格。
设计原则
• 物质是隐喻
Material Design受到物理世界及其纹理的启发，包括它们如何反射光和投射阴影。材料表面重新构想了纸张和墨水的介质。
• 大胆、图形、鲜明
物料设计由印刷设计方法（版式，栅格，空间，比例，颜色和图像）指导，以创建层次结构，含义和重点，使观众沉浸在体验中。
• 动效赋予意义
微妙顺畅地反馈和过渡性的动作效果，引起用户的注意力并使之保持持续关注。当元素出现在一个界面中的时候，元素之间的互动重塑了环境。
• 基础灵活
Material Design 同样旨在实现品牌价值的传递。结合了基础的代码、组件和元素，可表达不同的品牌需求。
• 跨平台
Material Design使用Android，iOS，Flutter和Web上的共享组件在各个平台上维护相同的UI。
2.Apple Human Interface Guidelines
官网 ： https://developer.apple.com/cn/design/
苹果设计资源： https://developer.apple.com/design/resources/
苹果的人机规范指南包括了macOS、iOS、watchOS、tvOS。这里简单介绍一下iOS，其他的之后更新。这个给我们做各类型的苹果产品的设计提供了基础规范准则。
设计目标
• Clarity清晰：在整个系统中，各种大小的文字都清晰易读，图标精确而清晰。负空间，颜色，字体，图形和界面元素巧妙地突出了重要内容并传达了交互性。
• Deference遵从： 顺应用户的行为，流畅的动效和清晰美观的界面，使用户沉浸在顺畅的交互中，不去打扰用户。
• Depth深度：清晰的视觉层级和流畅的动效，同样提供了系统清晰的层次感，使其富有活力且易于用户理解。
设计原则
• 整体美感
整体美感不仅仅包括美观的 APP 界面，还包括流畅的交互体验，产品功能和用户行为的有效结合。比如当一款工具类 APP 主要是帮助用户完成一项任务时，设计师应关注于用户操作本身的行为路径，和产品功能相结合来帮助用户完成目标，使用户聚焦功能本身。
• 一致性
一个保持了一致性原则的 APP，通过使用标准的控件、熟悉的 icon、标准的文字规范、统一的组件俗语来实现一个拥有标准化范例的系统。这个系统提供的特性和交互行为也符合用户的心智模型和预期。
• 直接操作
让用户在屏幕上直接对内容进行操作的交互行为，可以鼓励用户和系统进行交互并且更易于理解。当用户翻转屏幕或者使用手势直接与屏幕交互时，他们会感知到直接操作的行为，并且能立即得到操作结果。
• 反馈
反馈能够响应操作，呈现结果，使用户获得信息。手机中内置的 iOS 应用程序为用户的每一个动作提供可感知的反馈。交互元素在点击时会凸显被高亮显示，进度指示器显示了需要长时间运行的操作进度、动效和声音，使用户能够更清晰地感知交互行为的结果并作出响应。
• 隐喻
当一个 APP 的虚拟对象和操作路径与用户本身所熟悉的心智模型一致时，不管它是来自于真实世界还是数字世界，用户都能很快上手。隐喻之所以有效果，是因为用户和屏幕存在物理上的交互。用户可以通过移动分层视图来显示手机上被遮挡的内容；拽拖并且滑动对象，切换开关，移动滑块，滚动数值选择器，用户甚至可以通过翻转手势来翻阅手机上的杂志和文章。
• 用户控制
在 iOS 系统中，用户是主导者，而不是 APP。APP 可以提供行动建议，给予警告提示，但是不应该替用户做选择。优秀的 APP 始终会在用户主导和用户不想要出现的结果中保持平衡。一个 APP 应该始终让用户感知到在他的掌控之中。交互的元素给用户熟悉感并且可预期；对有破坏性的操作可确认；对错误操作可取消，即使是在进行中的行为也可中断。
3.Ant Design
蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
设计价值观
• 自然
作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。
在行为的执行中，利用行为分析、人工智能、传感器、元数据等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。
在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实的产品体验。详见视觉语言
• 确定
保持克制： 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。
面向对象的方法： 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版。
模块化设计： 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。
设计原则
• 亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
• 对齐
正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
• 对比
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
• 重复
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
• 直截了当
正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。
• 足不出户
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
• 简化交互
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
• 提供邀请
很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
• 巧用过渡
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
• 即时反应
『提供邀请』的强大体现在交互之前给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在交互期间为用户提供视觉反馈；『即时反应』的重要性体现在交互之后立即给出反馈。
设计资源（所有）：https://ant.design/docs/spec/download-cn
Sketch的插件Kitchen很好用：https://kitchen.alipay.com/
官网的模板：https://landing.ant.design/index-cn
4.Airbnb Design（DLS）
官网：https://airbnb.design/the-way-we-build/
随著 Airbnb 的规模日益扩大，从原本的3人小团队，到目前服务范围已遍及191个国家、使用超过40种语言，设计工程部门更是跨足世界各地，除了设计上的需求有增无减，各部门的协作及统合上的效率也显得更为重要。为了能更有效率管理产品，有更多空间专注在制作细节和创意上，因此他们成立了新的工具团队，重新组织设计架构和语言。
设计原则
• 统一性
每个模块的设计都是整体的一部分,应该对整体的表现有正向的提升作用。不应该有单独的特性或风格。
• 通用性
Airbnb在全世界都被广泛地应用。我们的产品和视觉语言应该被所有用户认可并理解。
• 形象化
我们同时专注于功能设计和视觉设计，我们的产出物应该能清晰地引导用户的认知。
• 会话式
我们使用了动态呼吸式的表现手法让用户能够轻易地理解我们的产品。
5.Element Design
官网：https://element.eleme.cn/#/zh-CN 设计资源：https://element.eleme.cn/#/zh-CN/resource
饿了么公司做的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，很适合开发后台产品。
设计原则
• 一致性
与现实生活一致：与现实生活的流程，逻辑保持一致，并遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，例如：设计样式，图标和文本，元素的位置等。
• 反馈
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
• 效率
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解细长做出决定；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
• 可控
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括取消，回退和终止当前操作等。
5.IBM Design
官网：https://www.ibm.com/design/language/
设计原则
• 仔细思考
• 独特统一
• 易于执行
• 积极进取
未完待续，持续更新中...
网友评论