UI设计的校验方法、UI设计的校验展示方法及系统技术方案

本公开涉及UI设计的校验方法、UI设计的校验展示方法及系统。本公开至少一个实施例中，通过确定待校验的UI设计稿对应的分层待校验信息，实现对大量待校验信息的分层处理，不同层包括不同的待校验信息，避免直接对大量待校验信息进行校验，减少漏检问题，便于更全面地校验；另外，分层处理可以实现校验重要程度的区分，通过设置各层待校验信息优先级，进一步实现了依据校验重要程度确定的校验先后顺序，以便分层校验，提高校验效率；此外，针对不同层，通过预先配置UI设计库，实现UI设计库分层梳理，不再是采用统一的UI设计库，不仅提高UI设计的多样性，而且提高UI校验的针对性和校验效率。效率。效率。

【技术实现步骤摘要】
UI设计的校验方法、UI设计的校验展示方法及系统


[0001]本公开实施例涉及用户页面处理领域，具体涉及一种UI设计的校验方法、UI设计的校验展示方法、系统、介质及计算机程序产品。

技术介绍

[0002]通常情况下，为了给用户提供更好的视觉体验和交互体验，很多机构会对用户界面(User Interface，UI)有一定的展示要求，而UI展示整齐美观、风格统一等是UI展示的一个重要要求。
[0003]但是多数情况下，UI研发人员根据展示要求设计出来的UI的展示效果并不符合展示要求，常常出现UI组件展示不整齐、风格不一致等问题，导致用户体验较差。
[0004]现有技术中，大部分是通过人工方式校验设计的UI是否符合展示要求，但是通过人工的方式对各个UI设计进行校验，一方面容易导致校验不全面，另一方面校验效率较低。

技术实现思路

[0005]本公开的至少一个实施例提供了一种UI设计的校验方法、UI设计的校验展示方法、装置、系统、介质及计算机程序产品。
[0006]第一方面，本公开实施例提出一种UI设计的校验方法，该方法包括：
[0007]获取待校验的UI设计稿，并确定UI设计稿对应的分层待校验信息以及各层校验优先级；
[0008]基于分层待校验信息，从各层预先配置的至少一个UI设计库中，获取各层待校验信息对应的UI设计配置信息；
[0009]基于各层校验优先级，利用各层待校验信息对应的UI设计配置信息，对多层待校验信息进行分层校验。
[0010]在一些实施例中，确定UI设计稿对应的分层待校验信息以及各层校验优先级，包括：
[0011]确定UI设计稿对应的整体层待校验信息、框架层待校验信息和组件层待校验信息；
[0012]确定整体层待校验信息的校验优先级高于框架层待校验信息的校验优先级、框架层待校验信息的校验优先级高于组件层待校验信息的校验优先级。
[0013]在一些实施例中，基于分层待校验信息，从各层预先配置的至少一个UI设计库中，获取各层待校验信息对应的UI设计配置信息，包括：
[0014]基于整体层待校验信息，从整体层预先配置的至少一个UI设计库中，匹配校验整体层所需的UI设计库；基于整体层待校验信息，从框架层预先配置的至少一个UI设计库中，匹配校验框架层所需的UI设计库；基于整体层待校验信息，从组件层预先配置的至少一个UI设计库中，匹配校验组件层所需的UI设计库；
[0015]从匹配的整体层所需的UI设计库中，获取整体层待校验信息对应的UI设计配置信
息；从匹配的框架层所需的UI设计库中，获取框架层待校验信息对应的UI设计配置信息；从匹配的组件层所需的UI设计库中，获取组件层待校验信息对应的UI设计配置信息。
[0016]在一些实施例中，基于各层校验优先级，利用各层待校验信息对应的UI设计配置信息，对多层待校验信息进行分层校验，包括：
[0017]基于整体层待校验信息对应的UI设计配置信息，校验整体层待校验信息；
[0018]在校验整体层待校验信息后，基于框架层待校验信息对应的UI设计配置信息，校验框架层待校验信息；
[0019]在校验框架层待校验信息后，基于组件层待校验信息对应的UI设计配置信息，校验组件层待校验信息。
[0020]在一些实施例中，整体层待校验信息包括：UI设计稿对应的前端版本、UI设计稿的整体样式设计信息；框架层待校验信息包括：UI设计稿的通用框架设计信息；组件层待校验信息包括：UI设计稿中每个UI组件的样式设计信息；
[0021]基于前端版本，利用预先建立的前端版本与整体层UI设计库、框架层UI设计库、组件层UI设计库之间的对应关系，从整体层预先配置的至少一个UI设计库中，匹配前端版本对应的整体层UI设计库；从框架层预先配置的至少一个UI设计库中，匹配前端版本对应的框架层UI设计库；从组件层预先配置的至少一个UI设计库中，匹配前端版本对应的组件层UI设计库。
[0022]在一些实施例中，基于各层校验优先级，利用各层待校验信息对应的UI设计配置信息，对多层待校验信息进行分层校验之后，方法还包括：
[0023]获取整体层待校验信息中各第一问题项、框架层待校验信息中各第二问题项、组件层待校验信息中各第三问题项；
[0024]基于各第一问题项、各第二问题项和各第三问题项，确定UI设计稿的校验结果，校验结果用于表示UI设计稿是否通过校验。
[0025]在一些实施例中，校验结果为一致性指标值；基于各第一问题项、各第二问题项和各第三问题项，确定UI设计稿的校验结果，包括：
[0026]基于各第一问题项、各第二问题项和各第三问题项，确定UI设计稿中存在问题的校验项数量；
[0027]获取UI设计稿的校验项总数以及每个校验项预先配置的标准权重和问题权重，其中，标准权重表示对应校验项的重要程度，问题权重表示对应校验项存在问题时的问题严重程度；
[0028]基于UI设计稿中存在问题的校验项数量、校验项总数以及每个校验项预先配置的标准权重和问题权重，确定UI设计稿的一致性指标值。
[0029]在一些实施中，UI设计稿的整体样式设计信息包括以下至少一种：页面内容区域左右边距设计信息、UI组件图标设计信息、UI微件在UI设计稿中的布局设计信息。
[0030]在一些实施例中，UI设计稿的通用框架设计信息包括以下至少一种：导航栏样式设计信息、导航区样式设计信息、标题区样式设计信息。
[0031]在一些实施例中，UI设计稿中每个UI组件的样式设计信息包括以下至少一种：对话框样式设计信息、表格样式设计信息、结构表单样式设计信息、步骤表单样式设计信息、信息展示区样式设计信息、侧滑栏样式设计信息、概览页样式设计信息、选项卡样式设计信
息、提示消息样式设计信息、气泡样式设计信息、卡片样式设计信息。
[0032]第二方面，本公开实施例还提出一种UI设计的校验展示方法，该方法包括：
[0033]获取UI设计稿对应的分层待校验信息的分层校验结果以及各层校验优先级；
[0034]展示UI设计稿的UI界面，并基于各层校验优先级，在UI界面上对分层校验结果进行分层展示；
[0035]在当前展示的校验结果图层中，显示校验结果切换控件；
[0036]响应于校验结果切换控件的触发操作，展示该触发操作对应的校验结果图层。
[0037]在一些实施例中，基于各层校验优先级，在UI界面上对分层校验结果进行分层展示，包括：
[0038]在UI界面上展示校验优先级最高层的校验结果，并隐藏其余各层的校验结果；
[0039]响应于校验结果切换控件的触发操作，展示该触发操作对应的校验结果图层，包括：
[0040]响应于校验结果切换控件的触发操作，隐藏当前展示的校验结果图层，并在UI界面上展示该触发操作对应的校验结果图层。
[0041]在一些实施例中，该方法还包括在当前展示的校本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种UI设计的校验方法，所述方法包括：获取待校验的UI设计稿，并确定所述UI设计稿对应的分层待校验信息以及各层校验优先级；基于所述分层待校验信息，从各层预先配置的至少一个UI设计库中，获取各层待校验信息对应的UI设计配置信息；基于所述各层校验优先级，利用所述各层待校验信息对应的UI设计配置信息，对所述多层待校验信息进行分层校验。2.根据权利要求1所述的方法，其中，所述确定所述UI设计稿对应的分层待校验信息以及各层校验优先级，包括：确定所述UI设计稿对应的整体层待校验信息、框架层待校验信息和组件层待校验信息；确定所述整体层待校验信息的校验优先级高于所述框架层待校验信息的校验优先级、所述框架层待校验信息的校验优先级高于所述组件层待校验信息的校验优先级。3.根据权利要求2所述的方法，其中，所述基于所述分层待校验信息，从各层预先配置的至少一个UI设计库中，获取各层待校验信息对应的UI设计配置信息，包括：基于所述整体层待校验信息，从整体层预先配置的至少一个UI设计库中，匹配校验整体层所需的UI设计库；基于所述整体层待校验信息，从框架层预先配置的至少一个UI设计库中，匹配校验框架层所需的UI设计库；基于所述整体层待校验信息，从组件层预先配置的至少一个UI设计库中，匹配校验组件层所需的UI设计库；从匹配的整体层所需的UI设计库中，获取整体层待校验信息对应的UI设计配置信息；从匹配的框架层所需的UI设计库中，获取框架层待校验信息对应的UI设计配置信息；从匹配的组件层所需的UI设计库中，获取组件层待校验信息对应的UI设计配置信息。4.根据权利要求2所述的方法，其中，所述基于所述各层校验优先级，利用所述各层待校验信息对应的UI设计配置信息，对所述多层待校验信息进行分层校验，包括：基于所述整体层待校验信息对应的UI设计配置信息，校验所述整体层待校验信息；在校验所述整体层待校验信息后，基于所述框架层待校验信息对应的UI设计配置信息，校验所述框架层待校验信息；在校验所述框架层待校验信息后，基于所述组件层待校验信息对应的UI设计配置信息，校验所述组件层待校验信息。5.根据权利要求3所述的方法，其中，所述整体层待校验信息包括：所述UI设计稿对应的前端版本、所述UI设计稿的整体样式设计信息；所述框架层待校验信息包括：所述UI设计稿的通用框架设计信息；所述组件层待校验信息包括：所述UI设计稿中每个UI组件的样式设计信息；基于所述前端版本，利用预先建立的前端版本与整体层UI设计库、框架层UI设计库、组件层UI设计库之间的对应关系，从整体层预先配置的至少一个UI设计库中，匹配所述前端版本对应的整体层UI设计库；从框架层预先配置的至少一个UI设计库中，匹配所述前端版本对应的框架层UI设计库；从组件层预先配置的至少一个UI设计库中，匹配所述前端版本对应的组件层UI设计库。6.根据权利要求2所述的方法，其中，所述基于所述各层校验优先级，利用所述各层待
校验信息对应的UI设计配置信息，对所述多层待校验信息进行分层校验之后，所述方法还包括：获取所述整体层待校验信息中各第一问题项、所述框架层待校验信息中各第二问题项、所述组件层待校验信息中各第三问题项；基于所述各第一问题项、所述各第二问题项和所述各第三问题项，确定所述UI设计稿的校验结果，所述校验结果用于表示所述UI设计稿是否通过校验。7.根据权利要求6所述的方法，其中，所述校验结果为一致性指标值；所述基于所述各第一问题项、所述各第二问题项和所述各第三问题...

【专利技术属性】
技术研发人员：彭瑶，
申请(专利权)人：阿里巴巴中国有限公司，
类型：发明
国别省市：