软件界面设计稿前端元素识别方法与流程

本发明涉及软件开发
技术领域：
，特别是涉及软件界面设计稿前端元素识别方法。
背景技术：
：软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程，软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程，软件一般是用某种程序设计语言来实现的，通常采用软件开发工具可以进行开发，软件分为系统软件和应用软件，并不只是包括可以在计算机上运行的程序，与这些程序相关的文件一般也被认为是软件的一部分，软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试，然后进行编写再提交程序，在进行软件开发过程中，通常使用相应的软件开发工作平台；软件开发工作平台是一个以众包模式提供各项工作管理相关服务的互联网平台，发包方将工作任务需求发布到工作平台，平台将任务分解并根据各项子任务的技能要求，从平台人才库中寻找匹配的接包方，将子任务分配给合适的接包方，接包方接到分派的子任务后开始工作，子任务完成后将工作结果提交至平台，发包方接发包方接收任务交付结果并审查，发包方在发布任务时，将任务费用托管在平台，待任务交付并验收后，再通过平台与接包方进行结算，在软件开发工作平台，前端软件开发任务的工作是根据发包方提供的软件界面设计稿开发前端软件，发包方需要预先把任务费用托管到平台，接包方交付验收后，平台将费用支付给接包方，在这个过程中，需要对开发任务的工作量有一个合理的评估，从而得出任务费用；但是，发包方对任务工作量的预估往往和接包方实际完成的工作量不一致，从而影响平台上的业务交易，严重的会造成任务失败和用户的投诉纠纷，为了准确的评估前端软件开发任务的工作量，需要对发包方上传的软件界面设计稿进行分析，根据界面的元素来评估具体工作内容，并预估工作量；因此，我们提出软件界面设计稿前端元素识别方法。技术实现要素：本发明的目的在于提供软件界面设计稿前端元素识别方法，以解决上述背景中提出的问题。为解决上述技术问题，本发明是通过以下技术方案实现的：本发明为软件界面设计稿前端元素识别方法，包括以下步骤：step1：创建并更新设计稿素材样本库，对设计稿素材进行初步整理，设置素材的元数据，包括设计稿格式和应用领域；step2：人工对设计稿进行分析，标注出页面元素；step3：建立设计稿分析的人工神经网络，通过设置多个卷积层使人工神经网络具有针对设计稿分析任务的良好性能；step4：使用设计稿素材库对人工神经网络进行训练，得到成熟的设计稿分析模型，包括各类页面元素的特征模型；step5：输入待分析的设计稿文件，对设计稿进行预处理，去除无关数据，保留待分析的核心数据，并添加适当的引导性数据；step6：利用训练后的人工神经网络，对输入的设计稿进行分析，得到设计稿各页面的结构特征，并提取页面的各类元素；step7：再次利用训练后的人工神经网络，对提取的各个元素进行分析，得到元素的特征信息；step8：根据所提取的元素的特征信息，搜索各类元素的特征模型库，寻找最匹配的元素特征模型;step9：基于元素特征及对应的特征模型，得到所识别的元素类型及相关参数；step10：将设计稿的分析结果，包括所有元素的相关信息进行整理后输出。优选地，所述step1中，对准备用于训练的样本，预先设置表示设计稿基本属性的元数据。优选地，所述step2中，对设计稿素材进行人工标注时，需要将页面的所有元素尽量全的标注出来，并记录元素的类型及元素的尺寸、轮廓和位置信息，所述元素类型包括：文字、图片、交互组件（文本输入框、按钮、下拉框）、动效组件（flash动画、轮播图、进度条）。优选地，所述step4中，通过训练得到的设计稿分析模型包括各类页面元素的特征识别模型、图像分类模型和目标检测模型。优选地，所述step5中，对输入的设计稿文件，若存在多个图层，并且最底层为背景层，则删除背景层，以减小背景图对识别过程的干扰，同时，对于输入的来自同一个软件产品的设计稿，设置这一批设计稿的应用领域信息。优选地，所述step6中，分析页面中各图层的元素的形状及位置信息，合并相关图层并提取各元素的属性，包括形状、颜色、文字、轮廓和位置。优选地，所述step7中，分析所提取的元素的形状、颜色和文字信息，生成该元素对应的特征值，计算各元素特征值的相似度，将相似度大于预设阈值的元素设置分组标签，并计算分组标签下所有元素的统一特征值，用于同类元素的后续处理。优选地，所述step8中，首先基于所提取的元素的特征值，从特征库中搜索相似度大于预设阈值的分组标签，并按相似度大小排序，然后依次从各分组中，搜索相似度最大的元素特征模型，接下来根据分组设置特征分析模型，将所提取的元素的特征值输入分析模型，得到该元素在各个分组的特征模型中的输出结果。本发明具有以下有益效果：本发明软件界面设计稿前端元素识别方法能够准确评估前端软件开发任务的工作量，对发包方上传的软件界面设计稿进行分析，同时根据界面的元素来评估具体工作内容，并预估工作量，有效提升工作效率。本发明软件界面设计稿前端元素识别方法操作简便，流程运行清晰完整，运行成本可控，具备一定的推广价值。当然，实施本发明的任一产品并不一定需要同时达到以上所述的所有优点。附图说明为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1为本发明的软件界面设计稿前端元素识别方法示意图；图2为本发明的软件界面设计稿前端元素识别方法总体流程图；图3为本发明的软件界面设计稿前端元素识别方法中建立好的人工神经网络示意图。具体实施方式下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。请参阅图1-2所示：本发明为软件界面设计稿前端元素识别方法，包括以下步骤：step1：创建并更新设计稿素材样本库，对设计稿素材进行初步整理，设置素材的元数据，包括设计稿格式和应用领域；step2：人工对设计稿进行分析，标注出页面元素；step3：建立设计稿分析的人工神经网络，通过设置多个卷积层使人工神经网络具有针对设计稿分析任务的良好性能；step4：使用设计稿素材库对人工神经网络进行训练，得到成熟的设计稿分析模型，包括各类页面元素的特征模型；step5：输入待分析的设计稿文件，对设计稿进行预处理，去除无关数据，保留待分析的核心数据，并添加适当的引导性数据；step6：利用训练后的人工神经网络，对输入的设计稿进行分析，得到设计稿各页面的结构特征，并提取页面的各类元素；step7：再次利用训练后的人工神经网络，对提取的各个元素进行分析，得到元素的特征信息；step8：根据所提取的元素的特征信息，搜索各类元素的特征模型库，寻找最匹配的元素特征模型;step9：基于元素特征及对应的特征模型，得到所识别的元素类型及相关参数；step10：将设计稿的分析结果，包括所有元素的相关信息进行整理后输出。其中，step1中，对准备用于训练的样本，预先设置表示设计稿基本属性的元数据，具体参数如下：元数据说明格式设计稿的文件格式，有psd、sketch、ai、jpg、png等应用领域设计稿关联的应用领域，如：电商、门户、论坛等风格设计稿的界面风格，如简约、商务、科技、传统等客户端设计稿应用的终端类型，包括pc端、移动端等其中，step2中，对设计稿素材进行人工标注时，需要将页面的所有元素尽量全的标注出来，并记录元素的类型及元素的尺寸、轮廓和位置信息，元素类型包括：文字、图片、交互组件（文本输入框、按钮、下拉框）、动效组件（flash动画、轮播图、进度条）。其中，step4中，通过训练得到的设计稿分析模型包括各类页面元素的特征识别模型、图像分类模型和目标检测模型。其中，step5中，对输入的设计稿文件，若存在多个图层，并且最底层为背景层，则删除背景层，以减小背景图对识别过程的干扰，同时，对于输入的来自同一个软件产品的设计稿，设置这一批设计稿的应用领域信息。其中，step6中，分析页面中各图层的元素的形状及位置信息，合并相关图层并提取各元素的属性，包括形状、颜色、文字、轮廓和位置。其中，step7中，分析所提取的元素的形状、颜色和文字信息，生成该元素对应的特征值，计算各元素特征值的相似度，将相似度大于预设阈值的元素设置分组标签，并计算分组标签下所有元素的统一特征值，用于同类元素的后续处理。其中，step8中，首先基于所提取的元素的特征值，从特征库中搜索相似度大于预设阈值的分组标签，并按相似度大小排序，然后依次从各分组中，搜索相似度最大的元素特征模型，接下来根据分组设置特征分析模型，将所提取的元素的特征值输入分析模型，得到该元素在各个分组的特征模型中的输出结果。请参阅图3所示，为step3中建立好的人工神经网络图。本方案中，软件界面具备以下特征，①、易用性，按钮名称应该易懂，用词准确，屏弃摸棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好，理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作；②、规范性，通常界面设计都按windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式；③、帮助设施，系统提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法；④、合理性，屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置；⑤、美观与协调性，界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力；⑥、菜单位置，按照按功能来组织；⑦、独特性，设计具有自己独特风格的界面尤为重要，尤其在商业软件流通中有着很好的迁移默化的广告效用；⑧、快捷方式的组合，在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些；⑨、安全性，应当尽量周全地考虑到各种可能发生的问题，使出错的可能降至最小；⑩、多窗口的应用与系统资源，设计优秀的软件不仅要有完备的功能，而且要尽可能的占用最底限度的资源。在本说明书的描述中，参考术语“一个实施例”、“示例”、“具体示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属
技术领域：
技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。当前第1页12