蚂蚁金服体验科技大会《设计资产一起造》
有幸参加了18年蚂蚁金服体验科技大会，在《设计资产一起造》的工作坊中学到了很多关于设计语言的知识。在实际的项目中参照工作坊的思路打造出属于自己的产品设计语言。
关于设计系统/设计语言
国外大型互联网平台公司会有自己的设计语言和系统。如iOS和Android两大移动端平台，对于他们的设计规范的理解和遵循是每个交互和视觉设计师的必修课。对应的谷歌和苹果公司推出自己的设计语言，也是为了帮助和指导平台上应用的开发者和设计师们打造出美观易用的产品，最终使平台应用的用户获得一致的用户体验。有幸参加了18年蚂蚁金服体验科技大会，在《设计资产一起造》的工作坊中学到了很多关于设计语音的知识。在实际的项目中参照工作坊的思路打造出属于自己的语音。
Material Design
设计语言只是一种规范和指导，具体的设计取决于应用的开发者或设计师。苹果公司的iOS设计指南更多的讲原则和大方向，谷歌的Material Design更加全面而翔实。对于初级设计师来讲，Material Design更加有帮助，但是在国内几乎是被忽略的状态，原因有多种：
1.很多主流应用为了保持用户在两个平台上的体验一致性，采用统一的设计样式，尽量减少差异化；
2.安卓手机被各家厂商二次开发后，加入了自己的理解和品牌风格，和原生的系统差别较大；
3.由于历史和品牌原因，苹果的逼格就是要比安卓的逼格要高。导致设计和开发，用户和市场都向iOS靠齐。
以上各种原因导致的结果就是现在主流的思路是以iOS设计为标准去对Android平台做适配。而网易云音乐等少数产品堪称业界的一股清流，对两个平台的设计语言有差异化的理解并给出了精彩的设计方案。
iOS Design Guideline
一些大型的企业级软件服务商也推出了自己的设计语言，如美国的Salesforce和德国的SAP公司。与苹果和安卓面向C端的设计语言不同，SAP和Salesforce的设计是关于中后台的，面向的是企业用户，设计原则不同且场景更为复杂。他们推出自己的设计语言一方面是提高内部的工作效率保证平台体验的一直性，另一方面可能是方便第三方企业在他们提供的软件上做二次开发。
可以与之比肩的是国内蚂蚁金服推出的中后台设计语言Ant Design。在这次蚂蚁金服科技体验大会（SEE Conf）上，来自Ant Design pro 的主设计海纳和竹尔主持了《设计资产一起造》工作坊。带着我们感受了一下设计语言中最重要的一部分——设计资产是如何产生的。
《设计资产一起造》工作坊
原子设计理论
竹尔在讲述设计资产中最基础的部分全局样式提到了“原子设计”的概念。像我们所在的物理设计，设计也可以细分到不能在往下细分的原子级别，比如字体、颜色、间距等。推演一下，由原子级别的样式可以形成不同的分子级别的控件，如按钮、输入框和单项框等；分子级别的控件可以合成细胞级别的组件，如对话框、选项卡和卡片列表等；细胞级别的组建可以在像上组合成器官级别的功能模块，如数据表格、面包屑导航和底部标签导航栏等；器官级别的功能模块可以构成特定的页面，可以称之为部件级别，如列表页、详情页和结果页等具体页面。
由这些通用的设计资产，我们可以按照一定的任务流程组织页面（部件），形成产品中的功能需求比如注册和购买。功能需求汇总起来就是一个网站和手机应用了，最终到达了物体级别，形成了平台的生态链。
原子设计图示
工作坊演示
根据原子设计的理论。在工作坊的练习部分，海纳带着我们在各位助教的帮助下，以语雀网站为例演示了造设计资产的过程：
1. 识别第一步识别分为两层，首先识别布局重复的页面，犹如把不同动物的头部或者腿部都找出来放在一起。这时候需要注意的一点是看起来相同的页面可能并不是重复，而应该以功能为主，就像有些动物的手看起来也像手。完成了重复页面的整理，我们把每类页面抽象为线框图，图里面包含两到四个区块并简单标示其用途。接着继续在不同页面布局中识别重复的区块，把它剪下来取一个名字。就像把不同动物的眼睛都放在一起，称之为“眼睛”。
2. 定义可以从通用层面定义这个区块使用干嘛的？如“眼睛”用来是用来“看东西的地方”。也可以从具体的业务层来定义，如“眼睛”是用来“寻找食物的”。
3. 设计首先把当个区块的核心元素抽离提取出来，犹如把手的手指、手掌、手臂分辨出来。再梳理元素之间的构成关系，犹如手指是长在手掌上的，手掌连接着手臂。然后总结其中的规则，比如鱼可能手臂已经退化掉了，直接连接着鱼鳍（手指）。最后识别出变体，比如有些动物有五个手指，有些可能是三个。
4. 命名给这个区块取一个名称，可以按照位置来命名，也可以按照用途来命名。好的命名不仅能帮助我们识记资产，还可以直观地解释资产的用途：
5. 指南 把各项资产按照应用场景、交互逻辑、视觉规格、案例等维度描述总结出来，作为一份文档共享给团队。
6. 使用最后设计资产就能在实际的项目中被设计师、工程师、产品经理等一起使用参考了。不断的维护和更新，资产也会变得更加实用和有价值了。
星火快递的应用实践
大型的平台公司输出自己的设计语言，可以保证平台体验的一致性，提高设计的效率，降低沟通成本和重复设计的无用功。那么对于小的公司或者产品团队有没有这个必要呢？
平台型的设计语言为了适用范围会考虑到语言的通用性，一般具有指导意义而失去部分的实用性。比如iOS设计指南只给出设计的指导原则，需要设计师去解读并运用在具体的产品中、复杂的场景里。在具体的产品团队里根据“原子设计”的思路可以总结出更加偏向业务侧的“设计方言”，或者称之为交互规范更为恰当。
产品的交互规范可以在平台设计语言的基础上更为具体，更加适用于业务的实际应用。规范的建立可以提高设计稿的产出效率，保证界面的一致性。
下面以我工作中具体负责的产品星火快递为例，展示以工作坊学到的思路产出星火交互设计资产建立的过程。希望大家能得到启发，创造出属于自己的设计资产。
星火是社区快递的代理点用来管理快件的应用，各大快递公司的快递员把快件放在代理点后由代理点通知用户取件。常用的操作有快件的出库和入库，快件状态的管理和查询等。是属于工具型的B端应用。经过几个版本的迭代，产品的主体框架已经基本能确定了。有新的需求产生时，设计过程中需要复用之前设计过的组件，我之前的做法是打开过去的设计稿复制黏贴后再修改一下。这样做的效率不是很高，有的时候甚至会出现有印象设计过类似的场景，但忘了具体在那个版本里。这时要么就是重新再画一般，要么就是打开多个版本的设计稿慢慢找。
参加后蚂蚁金服体验科技的这次工作坊后，给了我一些启发。何不按照工作坊的思路给星火应用做一个简化版的设计资产呢？一方面可以提高今后星火产品中设计的产出效率，保证产品的一致性；另一方面可以巩固工作坊学到的知识，对设计所映射的行为本质再作一次反思。
1. 寻找重复把历次版本的设计稿打开，从最开始的版本开始审视每个页面的结构。把拆解出来的控价、组件都记录下来。如果在后续的版本发现相同的控件则忽略，发现相同的场景中不一致的控件则标记出来。过完五六个版本之后，会发现控件和组件已经覆盖了差不多了。再把更粗粒度的功能模块，比如出库、入库中常用的“扫描”模块，快件管理过程中常用的时间段“筛选”模块等记录下来。
星火原子设计
2. 重新设计把记录下来重复的控件、组件和模块设计成Axtrue 控件库，设计时要考虑到这些不同粒度的元素会出现的多状态，尽可能兼容多种场景。重新设计的过程也是总结思考，检视一致性的过程。可以对产品的设计有一个更全面、宏观、深刻的理解。
3. 补充样式对于颜色、文字、间距系统、图标等更细粒度的原子级元素，则可以按照通用的规则去设定和整理。
A.颜色部分包含：
a.多阶的无彩色，设计师可以有一个自己便好的灰度阶层，比如：000 333 666 999 D8D8D8 E5E5E5 F2F2F2 这组灰度很容易记忆；
b.品牌色分为主色和辅色。主色为一个，辅色可以有多个，一般不超过三个。
c.三类功能色，在情绪层面的安全色（一般是绿色），警戒色（一般是橙黄色）和错误异常色（一般是红色）。当品牌色和功能色有重合时，需要加以区分，比如品牌色是红色的话，错误异常色就可以考虑换成橙黄色了。
B.文字可以分为数字、大标题、小标题、列表标题、备注、文字按钮、文字链接等去设计，注意结合颜色、粗细和大小表现出视觉层级。
C.图标可以分为底部导航图标、标题栏图标、列表内标记图标、文字标签等维度去梳理，把常用的图标整合起来并考虑到图标的可能有的多种状态。
D.间距系统 以5px或者8px为单位构建一套间距系统，使页面元素符合亲密性原则。营造呼吸感，形成视觉层级，解释页面逻辑，引导用户焦点。
星火样式
4. 补充运用把样式和可复用的元素维护到Axtrue库中，接下来就是在实际的项目 中去运用、补充、修改，使之更加健壮实用。Axture库的维护还是很方便的，设计中发现库中有需要修改的地方，可是实时地打开库文件去编辑保存，然后再更新库。
简单重复被替代，向上寻找设计附加值
设计语言建立后，效率可以得到很大的提高。界面线框图和视觉稿的绘制难度也大大降低，设计产出的质量有了基本的保障。那么是不是产品或者开发学会了Axtrue 和sketch后，交互和视觉设计师就没有什么工作可做了？未来会不会出现设计的“鲁班”系统，实现界面设计的自动化？
确实，当一个设计系统被确定后。优秀的产品或开发者可以很好地完成设计的基本工作，只会做简单重复工作的设计师会变得越来越没有价值。当人人都会用电脑打字后，就没有打字机和打字员存在的必要了，就是这个道理。
设计语言和系统的建立是设计体系逐渐完善和成熟的标志，是设计师的自我革命。设计师需要回归创新创造的本质，向上需求突破，寻找和体现更高阶的设计价值：
1. 研究用户，发掘目标用户的心理特征和行为模式。运用同理心，重新定义需求，找到创造性的解决方案。
2. 打造品牌价值，在设计中遵循平台语言的的基础上寻求差异化和创新点。赋予产品以个性和亮点，能在目标用户中得到价值认同和情感共鸣。
3. 线下服务体验设计和智能硬件交互设计。跨越纯线上互联网设计的界限，与线下生活场景结合起来实现商业价值。拓宽体验设计的边界，积极拥抱语音交互设计、自动驾驶体验设计等新兴行业，而不仅仅把自己局限于移动端和网站。
4. 提高交互层面的易用性，和视觉层面的精细度。对于初级设计师，尽快脱离重复的设计工作，从认知心理学等方面寻找设计的本源。建立起设计理论框架，注重设计细节，体现美感。
5. 基本的产品运营思维，关注数据和增长。从设计的角度给出有助于业务推动的可行建议，围绕增长在项目中验证设计的价值。
互联网时代，唯一不变的是变化。倚仗的经验可能会是前行的包袱，跟上步伐，不断清空和更新自己，才能持续创造出新的价值。
