基于设计图的在线协作装置及方法与流程

本发明涉及数据处理技术领域，具体涉及一种基于设计图的在线协作装置及方法。

背景技术：

目前，国内的产品经理、设计师、工程师在项目产品开发过程中，没有一个单独的协作技术方案可以帮他们高效沟通。

一般产品经理会将需求以文档形式，通过qq、微信、邮件等传输形式发给设计师与工程师，然后团队开会，将需求文档以打印或ppt投屏形式进行沟通。设计师根据产品经理需求进行app或网页设计，一般会将设计图以压缩包形式通过微信、qq、邮件等形式发给产品经理与其他相关人员。产品经理与相关人员如果对设计图有修改建议，会采取不同的线上或线下形式向设计师提出修改建议，如qq、微信、邮件、面对面讲述等，很容易遗漏修改需求。

设计图定稿后，设计师需要手动为设计图上每个元素进行标记，并按工程师要求将需要元素进行切片，此繁琐手动工作会占据设计师工作时长1/3～1/2，且极易错标漏标，或遗漏工程师所需切片。这就造成了工程师会经常因此找设计师挨个比对，效率极低。工程师是根据设计师给出的设计图进行最后的编程，但可能会因为低效沟通，或渠道出错问题，造成对设计图跳转逻辑不清晰，或者设计图版本滞后等问题，最终导致返工，延长了产品开发周期。

技术实现要素：

本发明实施例的目的在于提供一种基于设计图的在线协作装置及方法，能够提高产品研发团队的沟通与协作效率，将机械的手工操作自动化，提高团队工作效率与精准度。

为实现上述目的，本发明实施例提供一种基于设计图的在线协作装置，所述协作装置包括：

文件上传模块，用于产品经理将项目设计过程中使用的产品需求文件上传到对应的项目中供产品设计研发团队成员查看；

设计图上传模块，用于上传设计师根据产品需求文件设计的设计图到对应的项目中供产品设计研发团队成员查看；

信息提取模块，用于提取设计师上传的设计图标注信息和图层信息；

图形切片模块，用于根据预设的尺寸参数对上传的设计图进行图形切割；

代码生成模块，用于根据设计师上传的设计图中的设计元素生成供工程师编程使用的样式代码；

项目画布模块，用于展示设计师上传的设计图供产品设计研发团队成员查看。

作为基于设计图的在线协作装置的优选方案，所述协作装置还包括逻辑连线模块，逻辑连线模块用于绘制设计图之间的跳转逻辑连线并根据连线顺序切换设计图。通过在不同的设计图之间绘制逻辑连续，表明设计图之间的逻辑关系。可以通过现有技术的鼠标在一个基础设计图的一侧绘制逻辑线的起点，在另外的延伸设计图(与基础设计图有逻辑关系的设计图)的一侧绘制终点，从而借助计算机技术生成不同设计图之间的逻辑线。

作为基于设计图的在线协作装置的优选方案，所述协作装置还包括跳转交互模块，跳转交互模块用于工程师查看设计图页面之间的跳转逻辑。通过跳转交互模块能够查看不同的设计图之间的跳转逻辑，通过鼠标单击设计图上的元素能够展示对应的跳转逻辑。

作为基于设计图的在线协作装置的优选方案，所述协作装置还包括切图下载模块，用于工程师下载所需要的设计图切图。设计师在将设计图上传过程中，图形切片模块能够根据预设的尺寸参数对上传的设计图进行图形切割；设计师根据设计需要下载所需要的设计图切图。

作为基于设计图的在线协作装置的优选方案，所述协作装置还包括聚焦分区模块，用于聚焦显示产品设计研发团队成员选择的分区而隐藏未选择的分区。默认状态下，选中一个分区时，其他分区内容依旧会显示；通过聚焦分区模块，选中一个分区时，其他分区内容会隐藏，有利于页面加快响应速度。

作为基于设计图的在线协作装置的优选方案，所述协作装置还包括标记模块，标记模块用于设计师在设计图上标记文字或颜色信息。利用标记模块可在设计图上打点标记，或拖拽区域标记。标记内容支持@项目内成员用户名，被@的成员会收到邮件或微信通知。默认状态下，最新上传的设计图会出现在画布最上方，但是拖拽至其他地方后，很难分辨出哪几张设计图是最新上传的，通过标记模块能够将预设时间内或最新上传的设计图通过颜色属性标记出来。

作为基于设计图的在线协作装置的优选方案，所述协作装置还包括评论模块和消息通知模块，所述评论模块用于产品设计研发团队成员对设计师上传的设计图进行评论；所述消息通知模块用于产品设计研发团队成员之间进行消息通知。对于设计师上传的设计图，产品设计研发团队成员如果有修改建议或需求，通过评论模块对设计师上传的设计图进行评论，并通过消息通知模块对想要通知的产品设计研发团队成员进行消息通知。

本发明还提供一种基于设计图的在线协作方法，所述协作方法采用上述的协作系统，所述协作方法包括如下步骤：

产品经理调用文件上传模块将项目设计过程中使用的产品需求文件上传到对应的项目中，供产品设计研发团队成员查看；

设计师根据产品需求文件进行设计图设计，并调用设计图上传模块将根据产品需求文件设计的设计图上传到对应的项目中，供产品设计研发团队成员查看；

设计图上传的过程中，调用信息提取模块提取设计师上传的设计图标注信息和图层信息，并调用图形切片模块根据预设的尺寸参数对上传的设计图进行图形切割；

调用代码生成模块根据设计师上传的设计图中的设计元素生成供工程师编程使用的样式代码；并调用项目画布模块展示设计师上传的设计图供产品设计研发团队成员查看。

作为基于设计图的在线协作方法的优选方案，所述协作方法还包括：调用逻辑连线模块绘制设计图之间的跳转逻辑连线并根据连线顺序切换设计图。通过在不同的设计图之间绘制逻辑连续，表明设计图之间的逻辑关系。可以通过现有技术的鼠标在一个基础设计图的一侧绘制逻辑线的起点，在另外的延伸设计图(与基础设计图有逻辑关系的设计图)的一侧绘制终点，从而借助计算机技术生成不同设计图之间的逻辑线。

作为基于设计图的在线协作方法的优选方案，所述协作方法还包括：调用跳转交互模块展示设计图页面之间的跳转逻辑供工程师查看。通过跳转交互模块能够查看不同的设计图之间的跳转逻辑，通过鼠标单击设计图上的元素能够展示对应的跳转逻辑。

作为基于设计图的在线协作方法的优选方案，所述协作方法还包括：调用切图下载模块供工程师下载所需要的设计图切图。设计师在将设计图上传过程中，图形切片模块能够根据预设的尺寸参数对上传的设计图进行图形切割；设计师根据设计需要下载所需要的设计图切图。

作为基于设计图的在线协作方法的优选方案，所述协作方法还包括：调用聚焦分区模块聚焦显示产品设计研发团队成员选择的分区而隐藏未选择的分区。默认状态下，选中一个分区时，其他分区内容依旧会显示；通过聚焦分区模块，选中一个分区时，其他分区内容会隐藏，有利于页面加快响应速度。

作为基于设计图的在线协作方法的优选方案，所述协作方法还包括：调用标记模块供设计师在设计图上标记文字或颜色信息。利用标记模块可在设计图上打点标记，或拖拽区域标记。标记内容支持@项目内成员用户名，被@的成员会收到邮件或微信通知。默认状态下，最新上传的设计图会出现在画布最上方，但是拖拽至其他地方后，很难分辨出哪几张设计图是最新上传的，通过标记模块能够将预设时间内或最新上传的设计图通过颜色属性标记出来。

作为基于设计图的在线协作方法的优选方案，所述协作方法还包括：调用评论模块供产品设计研发团队成员对设计师上传的设计图进行评论。

作为基于设计图的在线协作方法的优选方案，所述协作方法还包括：调用消息通知模块供产品设计研发团队成员之间进行消息通知。对于设计师上传的设计图，产品设计研发团队成员如果有修改建议或需求，通过评论模块对设计师上传的设计图进行评论，并通过消息通知模块对想要通知的产品设计研发团队成员进行消息通知。

作为基于设计图的在线协作方法的优选方案，所述协作方法还包括：基于所述协作方法制作一个脱离代码的app或网页原型，通过电脑端或手机端对所述协作方法进行实施或演示。产品经理、设计师可以基于设计图，制作一个脱离代码的app或网页原型，可以在电脑端或手机端进行预览与点击跳转操作(一个高保真的demo)。便于整个团队理解最终产品形态，并提前预览产品样式，有效避免在开发后发现产品逻辑bug等问题。

本发明实施例具有如下优点：提高产品设计研发团队成员的工作效率和沟通效率，降低了试错和劳动成本，缩短了产品研发周期。

附图说明

图1为本发明实施例提供的基于设计图的在线协作装置示意图；

图2为本发明实施例提供的基于设计图的在线协作方法流程图。

具体实施方式

以下实施例用于说明本发明，但不用来限制本发明的范围。

参见图1，一种基于设计图的在线协作装置，所述协作装置包括：

文件上传模块1，用于产品经理将项目设计过程中使用的产品需求文件上传到对应的项目中供产品设计研发团队成员查看；

设计图上传模块2，用于上传设计师根据产品需求文件设计的设计图到对应的项目中供产品设计研发团队成员查看；

信息提取模块3，用于提取设计师上传的设计图标注信息和图层信息；

图形切片模块4，用于根据预设的尺寸参数对上传的设计图进行图形切割；

代码生成模块5，用于根据设计师上传的设计图中的设计元素生成供工程师编程使用的样式代码；

项目画布模块6，用于展示设计师上传的设计图供产品设计研发团队成员查看。

文件上传过程中可以基于photoshop插件、sketch插件或adobexdcc(adobeexperiencedesigncreativecloud)客户端。插件是一种遵循一定规范的应用程序接口编写出来的程序。其只能运行在程序规定的系统平台下(可能同时支持多个平台)，而不能脱离指定的平台单独运行。adobexdcc是一站式userexperience/userinterface设计平台，可以进行移动应用和网页设计与原型制作，同时也是结合设计与建立原型功能，并同时提供工业级性能的跨平台设计产品。设计师使用adobexdcc可以更高效准确的完成静态编译或者框架图到交互原型的转变。

基于设计图的在线协作装置的一个实施例中，所述协作装置还包括逻辑连线模块7，逻辑连线模块7用于绘制设计图之间的跳转逻辑连线并根据连线顺序切换设计图。通过在不同的设计图之间绘制逻辑连续，表明设计图之间的逻辑关系。可以通过现有技术的鼠标在一个基础设计图的一侧绘制逻辑线的起点，在另外的延伸设计图(与基础设计图有逻辑关系的设计图)的一侧绘制终点，从而借助计算机技术生成不同设计图之间的逻辑线。

基于设计图的在线协作装置的一个实施例中，所述协作装置还包括跳转交互模块8，跳转交互模块8用于工程师查看设计图页面之间的跳转逻辑。通过跳转交互模块8能够查看不同的设计图之间的跳转逻辑，通过鼠标单击设计图上的元素能够展示对应的跳转逻辑。

基于设计图的在线协作装置的一个实施例中，所述协作装置还包括切图下载模块9，用于工程师下载所需要的设计图切图。设计师在将设计图上传过程中，图形切片模块4能够根据预设的尺寸参数对上传的设计图进行图形切割；设计师根据设计需要下载所需要的设计图切图。

基于设计图的在线协作装置的一个实施例中，所述协作装置还包括聚焦分区模块10，用于聚焦显示产品设计研发团队成员选择的分区而隐藏未选择的分区。默认状态下，选中一个分区时，其他分区内容依旧会显示；通过聚焦分区模块10，选中一个分区时，其他分区内容会隐藏，有利于页面加快响应速度。

基于设计图的在线协作装置的一个实施例中，所述协作装置还包括标记模块11，标记模块11用于设计师在设计图上标记文字或颜色信息。利用标记模块11可在设计图上打点标记，或拖拽区域标记。标记内容支持@项目内成员用户名，被@的成员会收到邮件或微信通知。默认状态下，最新上传的设计图会出现在画布最右方，但是拖拽至其他地方后，很难分辨出哪几张设计图是最新上传的，通过标记模块11能够将预设时间内或最新上传的设计图通过颜色属性标记出来。

基于设计图的在线协作装置的一个实施例中，所述协作装置还包括评论模块12和消息通知模块13，所述评论模块12用于产品设计研发团队成员对设计师上传的设计图进行评论；所述消息通知模块13用于产品设计研发团队成员之间进行消息通知。对于设计师上传的设计图，产品设计研发团队成员如果有修改建议或需求，通过评论模块12对设计师上传的设计图进行评论，并通过消息通知模块13对想要通知的产品设计研发团队成员进行消息通知。

参见图1和图2，本发明还提供一种基于设计图的在线协作方法，所述协作方法采用上述的协作系统，所述协作方法包括如下步骤：

s1：产品经理调用文件上传模块1将项目设计过程中使用的产品需求文件上传到对应的项目中，供产品设计研发团队成员查看；

s2：设计师根据产品需求文件进行设计图设计，并调用设计图上传模块2将根据产品需求文件设计的设计图上传到对应的项目中，供产品设计研发团队成员查看；

s3：设计图上传的过程中，调用信息提取模块3提取设计师上传的设计图标注信息和图层信息，并调用图形切片模块4根据预设的尺寸参数对上传的设计图进行图形切割；

s4：调用代码生成模块5根据设计师上传的设计图中的设计元素生成供工程师编程使用的样式代码；并调用项目画布模块6展示设计师上传的设计图供产品设计研发团队成员查看。

基于设计图的在线协作方法的一个实施例中，所述协作方法还包括：调用逻辑连线模块7绘制设计图之间的跳转逻辑连线并根据连线顺序切换设计图。通过在不同的设计图之间绘制逻辑连续，表明设计图之间的逻辑关系。可以通过现有技术的鼠标在一个基础设计图的一侧绘制逻辑线的起点，在另外的延伸设计图(与基础设计图有逻辑关系的设计图)的一侧绘制终点，从而借助计算机技术生成不同设计图之间的逻辑线。

基于设计图的在线协作方法的一个实施例中，所述协作方法还包括：调用跳转交互模块8展示设计图页面之间的跳转逻辑供工程师查看。通过跳转交互模块8能够查看不同的设计图之间的跳转逻辑，通过鼠标单击设计图上的元素能够展示对应的跳转逻辑。

基于设计图的在线协作方法的一个实施例中，所述协作方法还包括：调用切图下载模块9供工程师下载所需要的设计图切图。设计师在将设计图上传过程中，图形切片模块4能够根据预设的尺寸参数对上传的设计图进行图形切割；设计师根据设计需要下载所需要的设计图切图。

基于设计图的在线协作方法的一个实施例中，所述协作方法还包括：调用聚焦分区模块10聚焦显示产品设计研发团队成员选择的分区而隐藏未选择的分区。默认状态下，选中一个分区时，其他分区内容依旧会显示；通过聚焦分区模块10，选中一个分区时，其他分区内容会隐藏，有利于页面加快响应速度。

基于设计图的在线协作方法的一个实施例中，所述协作方法还包括：调用标记模块11供设计师在设计图上标记文字或颜色信息。利用标记模块11可在设计图上打点标记，或拖拽区域标记。标记内容支持@项目内成员用户名，被@的成员会收到邮件或微信通知。默认状态下，最新上传的设计图会出现在画布最上方，但是拖拽至其他地方后，很难分辨出哪几张设计图是最新上传的，通过标记模块11能够将预设时间内或最新上传的设计图通过颜色属性标记出来。

基于设计图的在线协作方法的一个实施例中，所述协作方法还包括：调用评论模块12供产品设计研发团队成员对设计师上传的设计图进行评论。

基于设计图的在线协作方法的一个实施例中，所述协作方法还包括：调用消息通知模块13供产品设计研发团队成员之间进行消息通知。对于设计师上传的设计图，产品设计研发团队成员如果有修改建议或需求，通过评论模块12对设计师上传的设计图进行评论，并通过消息通知模块13对想要通知的产品设计研发团队成员进行消息通知。

基于设计图的在线协作方法的一个实施例中，所述协作方法还包括：基于所述协作方法制作一个脱离代码的app或网页原型，通过电脑端或手机端对所述协作方法进行实施或演示。产品经理、设计师可以基于设计图，制作一个脱离代码的app或网页原型，可以在电脑端或手机端进行预览与点击跳转操作(一个高保真的demo)。便于整个团队理解最终产品形态，并提前预览产品样式，有效避免在开发后发现产品逻辑bug等问题。

脱离代码是代码分离与重用，分离是将有不同目地的逻辑代码分离开，分离是为重用做准备，进而实现代码的模块化，工业化，标准化。代码分离形式就是将代码拆分开成多个文件，通过引用的形式调用组合在一起使用。比如java服务器页面里面会有很多的层叠样式表，一般简单的就是在写java服务器页面的时候层叠样式表也一起写在了页面元素的属性里面。使用代码分离就是单独写层叠样式表文件，这样修改的时候只需要去找层叠样式表文件，简化代码，增加代码可读性，易于修改，同时浏览器加载的时候也会快一些。

网页原型是网站草图，比较粗糙的原型用excel画，把基本的背景图贴进去，一些复杂元素截图贴进去，输入框的样式就调excel单元格。这样userinterface在制作真的页面时可以参考每个元素应该在哪个位置，另外也可以用axure做，做出来的控件都是真的可以点击的，只是数据是假的。

通过本发明技术方案可以为产品设计研发团队提供一个在线平台，产品经理可以将需求文档等项目相关文档传到对应的项目中，团队成员随时对应查看，不用去各种渠道翻找。设计师根据产品需求进行设计图设计，将设计图上传至项目画布上，团队成员随时随地都可以查看该项目的设计图，及每张设计图的各个历史版本及相关状态页面。如果有修改建议或需求，可以在设计图上进行标记、评论，并@相关成员，被@成员会及时收到通知。设计师在将设计图上传过程中，自动提取该设计图的标注信息，与图层信息，即自动标注与切图，并自动生成每个元素的相应样式代码，可直接复制使用。工程师在编程过程中可以自助查看需要的标注信息，并复制相应代码、下载需要的切图，亦可在画布页查看整个产品设计图页面的跳转逻辑。产品经理、设计师可以基于设计图，制作一个脱离代码的app或网页原型，可以在电脑端、或手机端进行预览与点击跳转操作(一个高保真的demo)。便于整个团队理解最终产品形态，并提前预览产品样式，有效避免在开发后发现产品逻辑bug等问题。

虽然，上文中已经用一般性说明及具体实施例对本发明作了详尽的描述，但在本发明基础上，可以对之作一些修改或改进，这对本领域技术人员而言是显而易见的。因此，在不偏离本发明精神的基础上所做的这些修改或改进，均属于本发明要求保护的范围。