设计规范怎样进行

最近在梳理项目的规范和优化，优化是不涉及主副流程的变化，以功能组件和认知进行的单页面优化。还做了一个上线项目的用户简单调研和结果分析。磨磨蹭蹭的，由于看到分享的很好的行业“红人”，哈哈，就有写作整理的冲动。

1.背景简介
2.特色价值观
3.过程方法
4.整理语言过程
5.指标论证

1.背景简介

经过频繁的迭代，和人员变化，设计组件的一致性出现明显的差异，需要统一整理
也为了提高需求-产品-设计-开发-测试这个流程更流畅高效。通过统一规范组件库来提高开发效率和降低成本难度

2.特色价值观

先从规范开始，我的规范细节把握的并不是很精确，又不希望做出流水线无特色调性的规范。那跟直接用蚂蚁家的大众规范有啥不同？
我就先给产品定调性，和特点。
可以来自于用户，管理，公司文化，系统的价值定位等，提取共同之处，总结出关键词，又从关键词里分化出更具体的形容词。
比如NIKE出名的LOGO是一个勾，颜色黑白，相关网站宣传就可以提取形，色，质，字，构来展示差异感

关键词可以是运动，力量，具体的外化形容词是倾斜，进攻，风的卷曲（流线型）等
之后可以定一些原则，同一模式组件，优先级唯一
或者卡片组件的颜色不超过3种，字号3种以内等

理论知识可以看下佐藤可士和，深泽泽人，原研哉的书
先从客户需要什么
用户需要什么
共同点是
退一步思考，上帝和极限视角的观察
打个比喻
总结归纳出关键词，写出关键词要怎么做

我之前有写过一个方法论的整理，那里有
是关于品牌特性挖掘特性的简单方法，
还有交互分析的简单步骤
还剩下规范模式的组合这个没写完
之后还会补上优化这块的方法论

3.过程方法

现在已经挖掘出了产品的调性，开始做规范了

先看几个出名的行业标准规范
比如IBM家的，蚂蚁家的，宝马奥迪家的，
苹果，谷歌家的也是要看

分类最简单的是蚂蚁家的，难怪大众化，分成基础，输入和输出几大类
苹果家的很有弹性，容易延展出人文特性https://www.ibm.com/design/language/typography/typeface/
谷歌家的多元化，易改https://material.io/design/layout/understanding-layout.html#shadows
IBM的细细的线，搭配数据文字，专业特性很明显https://www.ibm.com/design/language/typography/typeface/
还有个B端标准，叫做SAP，从基调原则到末端组建执行都有https://experience.sap.com/fiori-design-web/colors/
微软家的，跟开发联系的比较近https://docs.microsoft.com/en-us/windows/apps/design/style/color

之后还要看现在国内行业的动向，
这一步就看大厂们的公众号
https://mp.weixin.qq.com/s?__biz=MzkyNTIzMjE1Nw==&mid=2247490798&idx=1&sn=fce7700cf9b606f02c95aa0147bfb599&source=41#wechat_redirect
https://mp.weixin.qq.com/s?__biz=MzkyNTIzMjE1Nw==&mid=2247490787&idx=1&sn=e5c864a9d7e51a5d44554c1fb81022b9&source=41#wechat_redirect
https://www.uisdc.com/zt/design-guideline

先把规范的分类框架列出来
3.1价值和原则
3.2基础
3.3元件&组件
3.4界面框架
3.5设计模式
3.6语气和语调
3.7代码
这块通过蓝湖自动生成对应组建，估计还有个易上手执行的意思。（这一步要综合相关者比如上级，产品和开发的意见）

3.1价值和原则
把之前提炼出来的关键字和外化表现词，加以阐述
原则就是使用原则，根据什么样的基准来进行使用

3.2基础规范
然后基础规范这部分分成形，色，质，字，构来展示表达

3.2.1形
形又分为，图标，圆角,logo中的品牌元素等
图标非常重要，最近又在练图标。从基本图形融合开始，再到风格和形式

3.2.2色
色要包括主副点缀色外，还有延展色和状态色，文字色，层级色
延展色通常在主副色上延伸，就是色阶。我参照彩云的把主副色跟灰色阶叠加或者调整透明度来延伸
灰色阶要符合可用性测评，我直接用来做层级色

状态色就是正常，警示，失败，疑惑的颜色

文字色就是黑白灰和彩色文字，333，666，999之类，可以根据品牌色调整。彩色文字色有文字按钮色，警示色，失败色等

之后详细讲
颜色取色有猫爪取色，方形取色，对比色，临近色等

我由于要考虑数据展示时要用多色，所以通常会从主副色延展出一个色环，大概6-8种色。同时会从谷歌安全色里，找相似的替换上去。之后就会从这个色环发散出渐变色等。
参考资料：https://mp.weixin.qq.com/s/nu6-TVzUECvuIZaL_MPhyw
https://www.materialpalette.com/colors

3.2.3质
质包括阴影，图纹，插画，3D等，我把动效也分进去了

3.2.4字
字体类型通常有中文，英文和数字各一个（通常不超过3种）
字号是开始有一个基础字号和相邻字号倍数（基准字号10Pt，相邻字号倍数 1:1.125）
行高包括原生字体行高，在原生字高上延展（±4Px倍数），多行文字高度（段落内行高英文1.3，中文1.5; 段落之间间距2倍，以下一行的字高为基准。）

3.2.5构
图像，图标，卡片大小，间距，图像比例等，还有珊格，层级和布局layout（硬件的横竖屏分布，要先了解好限制），分割线，描边，圆角等细节

就是这样子
具体我是输出了23张PPT左右

3.3元件&组件
我把基础的形色质字构整理完后就开始设计组件的整理。
包括元件（按钮，开关，链接，步进器，单选，复选，搜索，状态栏，指示器，滑动条，步骤条，时间轴，标签等）
组件这块根据状态来分类，常态，载入前，载入中，载入后，特殊场景如无内容断网等
我主要是分成导航类，引导类，提示类，加载类，状态反馈，数据展示，数据输入

对于之后还有框架，模式，语气和语调等

3.4界面框架
就是页面视图布局，比如手机端的顶部状态栏，底部TAB

中间单屏的内容区域
一个视图是组建的集合，完整地表述完成一项操作/事情
比如查阅柜机详情，雨棚去向，发朋友圈，提交审核资料，扫描合同之类

通常会排列出几个常用页面框架。
在页面旁边把形色质字构之类的排列出来。背景颜色，标签，文字，组件，间距，可视化，时间轴，按钮，卡片，阴影等

这一块会把高频页面当作衣服工艺图（打版）一样。在页面旁边把形色质字构之类的排列出来。
上传蓝湖后，会有代码和标注，所以就木有标注

这部分会包括仪表盘，登录注册，概述，详情，个人中心，其他等

3.5设计模式
一个设计模式是一个功能。比如输入表单，筛选模式，列表等。
其中又包括功能模式和感官模式。
通常功能模式与必要任务流程相关，木有流程就中断。
感官模式包括情感，品牌文化等。比如运营标签，微笑，品牌色，品牌符号。
有时候2者又会综合在一起，形成同一个模式

组件组合起来形成一个模式

包括筛选器，创建流程，渐进式，连续滚动，新手引导，手势，指纹，声音，动画，其他。

在这一块也可以补上场景，就是说明什么时候用这种模式。有个选择的标准原则来用，避免分歧。通常会把使用的视图场景放出来。有个使用合适与否的☑️和❌

（也可以另外开一个常见错误和正确示例）

3.6语气和语调
B端要根据主谓宾进行句式的使用，主语，谓语，宾语，定语，状语，补语可以很好滴阐述一件事情。
句式通常有陈述句，疑问句，祈使句，感叹句
https://wenku.baidu.com/view/01c598ec4afe04a1b071de8f.html
如果品牌感官模式上有所规划，可以在主语（比如小蜜）和语气词（淘宝的亲）上做些特性。有个人物IP一起配合，形成品牌印象等

这部分还包括反馈的普通提示，警示提示，成功提示，失败提示，等待提示，询问提示等

3.7代码
由于设计和开发的对接沟通往往通过蓝湖来，蓝湖上又有对应的组件标注和代码。
代码展示部分就通过蓝湖来对应了

4.整理语言过程
一开始跟上级沟通，说是要统一产品和前端的意见。之后进行简单访谈后，以蓝湖作为平台，进行规范和代码的衔接。
然后大量阅读文献，包括知名的规范和大厂的文章。分门别类
再列出规范提纲，在进行二级分类。从页面中提取规范组件进行排列。漏的，比如特殊状态就补上

5.指标论证
目前来说确实提供了更快熟悉系统模式的方法，保持了相对的一致性。
对于多人多项目场景来说是有必要存在的

后续会一边迭代一边更新规范上传

题外话
最近看了品牌升级的资料。发现跟规范整理有相似之处。

品牌升级本质上是提高品牌质感的传达，在纷扰的信息中足够纯净，积起视觉力量，传送到人的心里形成记忆点也叫做差异性

规范是为了，提高信息传达效率，主次先后。
统一观点原则，保持信息渠道的畅通。
与人更流畅地互动，互相传达（人与人，人与机器，系统与人，环境与人）
减少噪点，减少沟通阻力