♝点选下方“可视化结构设计大学堂图书
他们公司目前在做的是这款服务于外贸出口企业的与此相反中文网站，其前一几天（约莫是5年底到6年底）顺利完成了商品的一场小型的插值工作，这几天闲了留下来，只好便抽了点时间编写了两套服务于这款商品的可视化规范化。
在这个过程江苏舜天队归纳出一些心得体会，在此撷取给他们。（PS：责任编辑最后会附有重新整理的Axure可视化规范化文档，可供他们参照）
创建规范化的基本要素：
明晰他们商品功能定位和最终目标 ；
总体规划可视化规范化的文本覆盖范围；
Lembron，简约简练。
一、知道他们商品功能定位和最终目标
他们的商品是功能定坐落于服务于外贸出口企业使用者的辅助工具，主要最终目标是协助顾客创建他们的外贸出口中文网站/找寻外贸出口顾客/顾客管理工作/外贸出口网络营销，单纯而言是T8300-信用卡业务-管客-网络营销-转化成。
所以他们的商品中需要最少的是命令行是输出/搜寻命令行和各种类型配置文档图象，而且在命令行的结构设计上不能结构设计可操作方式性太繁杂的命令行（一千万千万别为了崇尚绝妙炫彩而去结构设计较为罕见的命令行，不然不但加强后端老师工作量，使用者也不一定用的知道），要不然就违反了加速操作方式化学反应的准则，在这里提议他们可以参照穆萨的Ant design可视化规范化。
二、可视化规范化的文本覆盖范围
可视化规范化文本包括什么？
不同的商品的可视化规范化覆盖范围文本不同，一般而言网页端商品的相对移动端商品文本更多，这是因为网页端商品的页面布局多样，可视化命令行和方式更为繁杂；To C网页商品比To B网页商品文本更多，因为To B商品最终目标明晰，更注重使用效率，不会采用过于复杂和新颖的页面布局和可视化方式。
而针对他们的商品，可视化规范化文本归纳主要包括以下几个部分：
1. 结构导则化说明
结构导则化说明主要描述该结构导则化的基本信息：
2. 结构设计更新记录
因为可视化规范化是需要根据项目不断完善更新的，所以会有很多插值的记录，及时记录更新可以方便其他结构设计师、后端工程师知道他们更新了什么文本，及时同步给整个团队。
3. 结构导则化主体
主要包括字体规范化、色彩规范化（这两个提议和UI结构设计师共同制定）、页面布局、辅助工具、命令行库、图象，在这里我的做法是先汇总出当前商品版本所具有的所有规范化文本，再参照Ant design、Material Design、element等结构设计平台。
部分已有的规范化文本进行升级再整理，同时根据使用场景和优使用频率，将命令行分类和调整排序，这样基本上可视化规范化的框架就可以创建起来。
最终我为他们商品确定的可视化规范化文本展示如下：
三、Lembron，简约简练
如果他们通过上述方法来进行结构导则化重新整理，势必会得到一份体量更加庞大的可视化结构导则化文档，这个时候，结构设计师更多的需要根据他们的经验来进行删减（会合理删减的结构设计师才是优秀的结构设计师）。
哪些可以删减？哪些不能删减？
1. 可以删减
举例而言：下面两个时间覆盖范围筛选器，能达成的筛选目的和作用是一致的，但由于长度不一样，上面的筛选器能适配的页面场景更多，所以可以直接把下方的时间筛选器删减。
2. 不可以删减
举例而言：下面两个选择器，两个表面上目的看起来都是进行选择项选择，但右边的选择器带有搜寻框，适宜选择项数据庞大时的进行搜寻选择，左边的适宜选择项数据量不大时进行直接选择，所使用的场景并不相同，所以不能进行删减。
好的可视化规范化不需要太多的文字说明，团队成员直接看图即可知道这个组件的可视化方式（点选前、点选后、空数据、有数据、极限情况下等的可视化样式），当然有些不好通过图稿表达的信息也必须需要文字说明辅助，但相比文字而言，他们更喜欢看的肯定是图片。
最后附有我他们重新整理的可视化规范化axure文档，以供他们参照
链接：
https://pan.baidu.com/s/19WuKY4nnE_HQqDT5ASlcKw
密码：y5wj
感谢阅读！
原文链接：
http://www.woshipm.com/ucd/1094119.html
作者：李小先生
欢迎投稿：[email protected]
加老D私人微信18605817040，和老D一起学可视化，老D会在朋友圈发精选文章和招聘信息
可视化结构设计大学堂已经开设了新的栏目-行知书院，旨在协助小伙伴们来高效的学习现在市面上优秀的使用者体验书籍比如《可视化结构设计精髓》等等，同时结合老D的工作经验来协助你们从不同的高度和角度来解读书中的文本。每天一课，积少成多。已有222位小伙伴加入。详细了解行知书院
