UI设计小白兔之导出规范-UI与开发的桥梁

hello 大家好，

我是Wenhao,一只在UI设计路上摸索前进的小白。上篇文章探讨了"视觉规范"，它可以帮助团队中UI设计师之间更好的协同合作，那对于开发同事，UI设计师也需要交付给他们一份尽可能详细的“导出规范”。

导出规范的重要性

如何正确的理解“导出规范”是重要的，“导出规范”并不是指标注元素尺寸，间距，字体等等，在软件科技快速发展的今天，这些工作都可以无需再手动标注了，"蓝湖"实现了UI设计与开发在页面元素问题上的协同办公及实时反馈，除了"蓝湖""Figma"，在第一篇文章中我提到的“Abstract”同样具有此功能。所以“导出规范”的重点内容是向开发人员清晰地阐述每个设计模块它的“功能需求”“样式需求”及“API需求”。

导出规范的建立

我们先来确定两个名称，你的设计页面A，和导出规范页面B

每个页面A的需求尽可能在一个页面B中清楚表达，准确简洁的说明情况即可。每个页面B我们需要呈现的内容（从上到下简述）有：

第一内容，页面B命名。基于并不是每个页面都需要写“导出规范”的前提下，我们要选择性针对重要页面或复杂页面制作导出规范，所以页面的命名很重要，可以按照这样的格式：“项目名称/页面名称/需求文档”，如“UI设计小白兔/操作屏_基础版/导出规范”。

第二内容，当前页面A进入及退出的方式，用icon进行表达。如当前页面时从下向上移动进入的，就可以绘制出一个由下自上进入的icon形象进行表达（注意，如果是web的PC端网页，则不需要，因为没有交互动作）。

第三内容，分模块进行阐述。将你需要说明的当前设计页面A导入需求文档页面B，然后分模块/区域对页面A进行划区域示意说明，每个部分可以用不同的颜色加以区分，命名可以是1/2/3/4/...，之所以这样是因为有的模块中包含的元素及细节相当多，如果都在页面的一个区域下进行解释说明会使页面看起来不平衡。

第四内容，对每个模块进行中英文命名。

第五内容，逐个攻破每个模块的“功能需求”“样式需求”及“API需求”。

NO.1 举例说明

设计一个web PC端的视频网站详情页时，可将“相关内容/接下来播放”设计在播放器右侧列表模块（请注意，在设计web PC端的网页时，都要同步考虑PC端如何适配web的移动端，这是非常关键的设计思想，因为在移动端下“接下来播放模块”一般不会以右侧列表的方式存在）下面，我们就拿这个模块举例说明一下。

接下来播放区域 list_details_nextplay

功能需求：默认列表第一条为当前正在播放的视频。

样式需求：图文list列表展示；封面图利用服务器（##图像处理功能）api对需要展示的图片进行  压缩处理从而保证流畅的用户体验，同时节省运营流量成本；鼠标悬停时展示动图封面。

API

数据源：根据当前视频的关键词，标签，类型，索引。

排序：按照相似度进行排序。

数据模型：作品静态封面，作品动态封面，作品描述，时长，作者，发布日期。

数量：分页，默认10条每页（移动端3条每页）。

适配移动端：根据浏览器的宽度，自适应调整，具体布局参考移动端UI界面<web/移动端/详情页/…>

对上述例子的细节说明

1.模块英文命名的规范性，空格用“_”代替； “list_details_nextplay”表达的意思为“列表模块_详情页_接下来播放”。

2.“设计页面”命名的规范性。

具体布局参考移动端UI界面<web/移动端/详情页/…>，“/”为上下级目录的意思，此处为“web页面设计”下一级的“移动端页面设计”下一级的“详情页设计”下一级的“...”。

NO.2举例说明

通常情况下，页面会有控件（如弹窗/下拉菜单/输入框/...）的组件设计，但在“导出规范”中我们默认只显示“无控件显示的页面”即隐藏起控件，但在“导出规范的功能需求”中要特别说明此处并附上该控件组件的名称，必要时方便发开人员自行查看；而控件在页面中的具体位置如何展现呢，我们需要制作一个“含多种控件显示的页面”，放到工程中即可，无需在“导出规范”中展示，开发人员会自行查看。下面我们以web PC端的网页导航栏为例说明一下。（组件与控件的解释说明：一般情况下，任何元素/模块都可以制作出组件，“组件”是属性概念；控件是功能概念，一个控件制作完成后，为了方便对其进行运用和高效的修改，便可将其做成组件）

页头导航栏 navigation bar_details

功能需求：logo: wenhao_logo.json(播放一次，定帧到最后一帧); 

根据屏幕的宽度显示栏目的个数（最小三个），其他栏目隐藏至“…”（更多icon）详情参照组件<web控件/页头下拉菜单/更多> ;  

栏目有下级菜单，鼠标悬停时展示菜单，鼠标悬停时字体样式改变，详情参照组件<web控件/页头下拉菜单/wenhao> ; 

鼠标点击用户头像时，出现下拉菜单，详情参照组件<web控件/页头下拉菜单/用户头像> ; 

鼠标滚动向下时，页头导航栏悬停 ; 

搜索输入框的长度根据屏幕宽度适配 ;

适配移动端时，搜索输入框隐藏为“搜索”icon状态，头像与搜索栏的间距保持不变，栏目全部隐藏至“菜单”icon按钮内（“菜单”展示样式为下滑式多级菜单）; 

具体布局参考移动端UI界面<web/移动端/详情页/…>。

对上述例子的细节说明

对页面和组件的规范性命名是设计师之间和设计师与开发人员之间协作的良好基础，命名时要清楚页面的上下级关系，清楚符号的内在含义。

甜心小结

“导出规范”的目的是让开发人员真切了解业务需求和UI的设计，我们可能会问，开发对业务的了解不应该是通过PM（产品经理）么? 那么请了解，业务需求是整个团队的核心，它将各个部门紧密结合在一起，是一个项目共同的根基，其次，作为UI设计师，我们有责任将业务需求明确清晰的展现在页面的设计中，在了解需求的基础上，开发同事会更高效的了解我们页面的设计及交互，减少沟通的时间成本，避免程序改错。