无论是前台商品副经理却是前台商品副经理，都离不开蓝本结构设计，蓝本是各个工作岗位间协作沟通交流的重要文件格式众所周知。所以该如何绘出蓝本结构设计，做到增效呢？作者从绘出蓝本及表明标示的增效小基本功展开撷取，期望对你有所协助。
无论是前台 PM 却是前台 PM，沃苏什卡多多少少都要展开蓝本结构设计。蓝本能说是商品、开发、试验间展开交流沟通交流最重要的文件格式众所周知，所以怎么把蓝本画得Accous呢？从结构设计流程上看，蓝本结构设计结点包括但不限于剖析市场需求概要、规划网页结构、完善信息结构、绘出蓝本及展开表明标示。前面三个结点对个人有对个人的方法，今天主要想和我们撷取一下后两个——绘出蓝本及表明标示的增效小基本功，期望对你有协助。
一、制作自上而下表明
浅显蔡伯介，自上而下表明就是那些你用不着写第二次的小东西。比如说说网络异常 / 读取失败 / 没有数据，这些这是任意网页都可能会碰出现的情况，如果分开写，每个网页都要写一次，改的话得同时改很多地方性，称心费心而且不利于市场需求的统一管理。所有，把这些通用型性的小东西写在一个地方性，既能简约蓝本文件格式，降低开发、试验、结构设计等人员的阅读成本，又能少写点字，Lembron呢？
自上而下表明能是适用于于全文件格式的，也能是适用于于某个插值的。像是一些和插值关联度高的圣吉龙县。写在全文件格式性的表明里就有些输入输出，写在插值内自上而下表明中就刚刚好（不合逻辑）。
根据通用型性，能将自上而下表明分成两种：通用型表明和销售业务表明。通用型表明是在大多数商品 / 网页内都能通用型的，比如说网页状况、读取状况、通用型手势、快捷方式感测器等；而销售业务表明则相同，这类表明和销售业务高度相关，相同内容在相同销售业务间有较大差异，比如说天数展现准则、绰号长度等。下面给我们举几个红豆：
1. 通用型表明
移动端自上而下说明具体可见侠客写的文章，很详细：https://zhuanlan.zhihu.com/p/22270169
2. 销售业务表明前段时间两条最新消息天数展现准则：
图中是QQ的展现准则。全自动试出来的，不对的地方性热烈欢迎尖萼。
前段时间两条最新消息展现准则：图中QQ的展现准则。全自动试出来的，不对的地方性热烈欢迎尖萼。
商品开卖 / 停售 / 下载天数展现准则：第三版结构设计的准则里跨年天数也是带「时时 : 分分」的，后来因为商品条目官地实在放不下，就把后面的具体天数砍掉了（都跨年了，具体天数没所以重要了叭）。所以具体的展现准则是和实际系统密切相关的。
二、建立字段表明表能把用到的数据用表格的形式罗列出来，清晰且一目了然。
三、取用元件库展开蓝本绘出在绘出蓝本时，有一些控件会被经常用到。如果每次用到都重新制作，不仅无法保证交互效果的统一性，而且会占用很多工作天数。为了咱岌岌可危的发际线，我向我们使用 Axure 元件库功能。
什么，你说 Axure 自带的元件库丑？
网上有不少大公司的结构设计的元件库，找个你喜欢的导入就行。比如说蚂蚁金服、饿了么、有赞等。
什么，你说用不着找？
那我这给我们推荐几个。
1. Vant 移动端组件库
非常全面的一个组件库，自带交互。除了通用型组件，还有带有B2C销售业务组件，用来绘出移动端蓝本很方便。
结构设计网站：Zan Design
资源下载：Zan Design 移动端元件库
2. Ant Design 移动端组件库支付宝风格的组件库，组件没有 Vant 所以多，但是通用型性强。
结构设计网站：Ant Design
资源下载：Ant Design 移动端元件库
3. Ant Design 前台组件库这个不用多说了吧，前台商品必备。UI 样式可配置，拓展性强，大多数商品风格都能轻松适应。
大厂结构设计的组件库当然不错，但是用起来也会碰到一些问题。比如说和自己的结构设计风格不一致呀，有无用的组件呀，部分组件需要微调等等。所以建议每个 PM 都自己积累元件并长期更新。不用一次完成，平时工作中碰到新的就维护进去，这样不会占用很多天数，而且能保证蓝本整体的视觉统一。我司前台部分用的是蚂蚁金服组件库，基本不用修改，所以没有制作元件库。APP 端因为有些特殊组件，通用型组件库里没有就积累了一些，基本是 Ant Design 和 Vant 的混合版，这里就不献丑了……
四、建立交互市场需求表明库
如果系统用的是某个开源的 UI 项目的话，组件的交互基本都是确定好了的，交互表明文件格式能少些甚至不用写。如果没有用开源项目，所有的轮子都是腾讯或者自己造的话，那交互表明文件格式就必不可少了。碰到一些常见、使用频率高的组件，能建立一个 ” 交互表明库 “，用到的时候贴一个链接或者 copy 一下，能减少开发的理解成本。
PM 多多少少会碰到被开发围攻的情况，大部分情形可能都是因为市场需求描述不准确导致的。如果有一个准则模板参考，是不是就能减少遗漏的情况呢？
市场需求表明基本分为三个部分：市场需求表明、交互表明、交互预览。
市场需求表明一般包含：前置事件、后置事件、初始化、读取 / 分页、排序、正常和异常结果等，具体看组件类型；
交互表明一般包含：相同组件的表明会有较大差异，如果想描述得很详细，能参考开源项目的 API 文件格式；
交互预览一般包含：输入状况 / 选中状况 / 聚焦状况、禁止状况、读取状况等等。
五、展开交互自查输出完后先对照交互自查表把每个细节剖析一遍，让蓝本更加更加全面和缜密。
自查表是之前存的，忘记是哪篇文章了。如果你知道的话热烈欢迎补充～
好了，以上就是对个人平时画蓝本积累的一些基本功和感悟，完全是出于对个人习惯和主观经验得来的，热烈欢迎评论区一起探讨。
参考文章：1、侠客，善用 Axure 写 PRD，自上而下规范一个都不能少
2、交互结构设计自查表
本文由 @门庭 原创发布于人人都是商品副经理。未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议。
