像苹果Google一样做设计语言，带你了解全流程（上）

总结和规范设计语言的意义非常明确，即解决团队内部的统一性和效率问题，通过统一的设计语言创造统一的品牌符号形象，捕捉用户的认知和记忆点。那么，我们应该如何总结我们自己的设计语言呢？作者将为您做一个详细的分享。 如何定义一套设计语言？ 设计语言，一个看似火爆的词，设计团队都在做设计规范，似乎不够专业，UED价值不够高。 关于设计语言有很多参考，最著名的是苹果和谷歌材料设计，也是设计语言的创始人。后来，我将分享设计语言的价值，如何创建一个设计语言，设计语言包含什么。我希望通过几个阶段的分享，我能帮助你很好地掌握这项技能。 为什么要设计语言？ 1. 对内 这应该是很多设计团队都会遇到的情况——一个按钮有很多尺寸、颜色、尺寸，有时我们已经有了标准，但各种业务需要个性化，或不同，导致整个APP在我们的设计中，设计变得非常混乱。 很多APP由于缺乏基本原则，APP界面的每个页面都是不同的，风格层次不均匀，缺乏统一，所以在内部，设计语言是为了解决统一和效率，避免开发工程师重复开发一些组件。 2. 对外 在外部，统一的品牌符号和品牌特征有助于加深用户对产品的印象。统一的颜色和交互形式可以帮助用户加深对产品的熟悉和信任。良好的设计语言本身可以为产品体验增加积分，更好地创造一致的体验。 设计语言解决了哪些问题？ 1. 一致性 在整个平台上创建一致性、颜色、按钮、字体和品牌一致性，给用户一种安全感和熟悉感，解决设计师因个人特征而导致界面不统一的问题。 2. 明确设计原则 让每个设计都清楚地知道产品需要传达给用户的设计特点和原则，以及整个平台的约束。例如，我们的平台特点是安全感、方形和相应的设计规范，如小圆角和方形图形。 然后设计师必须在这种约束下进行设计，而不是圆形和可爱的图形，因为它违反了整个设计原则。 3. 效率 对于一些常用的组件、颜色、分割线、按钮、图标、字体，tab、如果表单等组件提前统一设计，可以大大降低重复设计，使设计师更加注重加强设计质量，提高研发效率。基本颜色、字体和间距可以提前开发，重复开发可以减少。 4. 多平台统一 我们现在处于一个屏幕尺寸、平板电脑、笔记本电脑、安卓机器、制造商定制的系统等各种设备的社会。我们的设计需要在这些平台上运行，我们必须确保设计的统一。 设计语言包含哪些内容？ 正如我们前面所说，设计语言的重要性，以及设计语言解决了什么问题，那么设计语言应该包含什么，以及如何定义这些内容呢？ 1.设计原则 （1）Airibnb设计语言的关键词在建立设计语言之前，首先要根据整个产品定位、价值观来得出： 统一：每一种设计都要统一，不能有太多的个性差异化特征。 关于内容：用户应该更加关注内容，而不是设计本身。 确定：减少设计中的不确定因素和预期。 （2）在facebook在设计原则语言中，也首先强调了它们的设计价值：通用、人性、干净、统一、有用、快速、透明facebook在所有的设计中，围绕这些点作为设计指南。 (3)苹果的设计规范包括:完整性、一致性、直接操作、反馈、隐喻、用户控制等。 因此，在建立设计语言的第一步，应该建立设计标准。 2. 色彩系统 色彩、字体、图形三大元素。 所以在建立系统时，颜色是非常重要的一部分，需要定义整个系统的颜色结构系统，一旦颜色系统建立，以下设计将围绕这些颜色设计，颜色包括品牌颜色、辅助、字体颜色黑白灰色、不可用、超链接、成功或失败等。 ▲主色盘 ▲辅助色盘 ▲色盘延伸 3. 图形 ▲图形是设计中最重要的元素之一。如何定义插图风格图形、图标和背景图形属于图形的一部分。 ▲有几种类型的插有几种类型，例如atlassian规范了他们的插图类型，插图需要有秘密和故事，插图必须有构建感，定义了人物特征和颜色规范。 ▲它包括对空白页图形的定义 ▲定义图标风格，包括颜色关系 ▲对于头像，定义了五官和无五官的风格 ▲包括整个规范的正确示范和错误示范 ▲图标规范 4. 栅格系统 网格系统是为了更好地布局页面，保证布局的统一性，网格系统分为最小单位和间距。 ▲在airbnb对于间距，使用了8倍数，所有规范都很有弹性，建立了8、16、24、48、64。 ▲网格系统中的列也被称为栏 ▲网格系统中的行 ▲网格系统中的水槽 ▲网格系统中的边距 5. 字体 界面内容最多，字体、字体除传统意义上的大小外，还有字间距、行间距、字重对比等，以及字体颜色等。 ▲顾名思义，字体的厚度可以通过字体的重量来加强。 ▲需要定义字体大小、应用场景、界面中字体使用什么样的场景，以及相应的字间距、行间距等。 ▲如何定义字体颜色，品牌颜色、成功、错过、超链接错误等。 6. 投影 在设计系统中，我们需要定义投影关系，投影需要定义不同的强度来满足页面的需要，通常通过透明度和投影距离来定义。 7. 图文关系 如何处理界面中的图片和文字，如何使用多色调，如何处理黑色图片上的文字，如何处理白色图片中的文字。 四、总结 设计一个系统是一个非常复杂的过程，一般需要在早期阶段完成；设计系统完成后，不要随意更改基本颜色、颜色和字体，成本相对较高。至少要确保这些字体颜色在一两年内不会发生很大变化。 今天我和大家分享一个设计系统，一个设计语言的一般框架以后我会拆解里面的每个模块，逐渐和大家分享如何设计语言！ 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。