CN108897541B - 应用程序的视觉还原方法、装置、存储介质及终端 - Google Patents
应用程序的视觉还原方法、装置、存储介质及终端 Download PDFInfo
- Publication number
- CN108897541B CN108897541B CN201810717697.2A CN201810717697A CN108897541B CN 108897541 B CN108897541 B CN 108897541B CN 201810717697 A CN201810717697 A CN 201810717697A CN 108897541 B CN108897541 B CN 108897541B
- Authority
- CN
- China
- Prior art keywords
- user interface
- application program
- comparison table
- original user
- font
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 230000000007 visual effect Effects 0.000 title claims abstract description 127
- 238000000034 method Methods 0.000 title claims abstract description 56
- 238000003860 storage Methods 0.000 title claims abstract description 30
- 238000013461 design Methods 0.000 claims abstract description 129
- 238000011161 development Methods 0.000 claims abstract description 33
- 238000002372 labelling Methods 0.000 claims abstract description 23
- 230000009467 reduction Effects 0.000 claims description 39
- 238000010606 normalization Methods 0.000 claims description 24
- 238000009877 rendering Methods 0.000 claims description 8
- 238000013507 mapping Methods 0.000 claims description 6
- 238000005520 cutting process Methods 0.000 claims description 5
- 238000007781 pre-processing Methods 0.000 claims description 3
- 238000012545 processing Methods 0.000 claims description 3
- 238000012423 maintenance Methods 0.000 abstract description 4
- 230000000694 effects Effects 0.000 description 32
- 230000006978 adaptation Effects 0.000 description 19
- 230000008569 process Effects 0.000 description 19
- 238000010586 diagram Methods 0.000 description 13
- 230000006870 function Effects 0.000 description 7
- 238000004519 manufacturing process Methods 0.000 description 4
- 238000004590 computer program Methods 0.000 description 3
- 230000003044 adaptive effect Effects 0.000 description 2
- 239000003086 colorant Substances 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 230000007613 environmental effect Effects 0.000 description 2
- 238000013467 fragmentation Methods 0.000 description 2
- 238000006062 fragmentation reaction Methods 0.000 description 2
- 238000005457 optimization Methods 0.000 description 2
- 230000035900 sweating Effects 0.000 description 2
- 206010009866 Cold sweat Diseases 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000012938 design process Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000007689 inspection Methods 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000011946 reduction process Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明实施例提供一种应用程序的视觉还原方法、装置、存储介质及终端，其中的方法包括：获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子；对所述原始用户界面中的元素盒子进行拆分；按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。本发明能够高保真的实现APP的视觉还原，开发维护成本低，且灵活性和普适性高。
Description
技术领域
本发明涉及互联网技术领域，具体涉及应用程序处理技术领域，尤其涉及一种应用程序的视觉还原方法，一种应用程序的视觉还原装置、一种计算机存储介质，一种用于应用程序的视觉还原的终端。
背景技术
一个应用程序(Application，APP)从设计至推出到市场的过程会包括设计阶段和开发阶段，设计阶段包括APP的UI(User Interface，用户界面)设计，开发阶段包括APP的UI视觉还原。视觉还原就是指将设计人员设计的UI落实到APP的过程。通常，APP在视觉还原的过程中需要考虑环境适配问题，例如：针对Android(安卓，一种移动操作系统)系统环境开发的APP，由于Android系统的开源特性，Android终端碎片化非常严重，此处的碎片化是指不同的终端制造商基于相同Android内核可能制造出多种搭载不同硬件平台、界面的Android终端，这些终端之间的运行速度、软件兼容性均有差别；因此，较佳的情况在于APP的视觉还原效果能够适配更多机型和分辨率。现有的APP的视觉还原方案大部分从布局和图片控件两个方面进行适配考虑的，即针对每一种终端单独开发一套布局和图片的适配方案，因此开发成本及维护成本均较高；另外，除了布局和图片，UI还包含文本元素且文本元素的数量非常多，现有的APP的视觉还原方案并未涉及文本的适配，但文本元素恰恰是影响APP的视觉还原效果的一个重要因素，文本元素的还原度差会直接影响整个UI的视觉还原效果较差。
发明内容
本发明实施例提供一种应用程序的视觉还原方法、装置、存储介质及终端，能够高保真的实现APP的视觉还原，开发维护成本低。
一方面，本发明实施例提供一种应用程序的视觉还原方法，可包括：
获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子；
对所述原始用户界面中的元素盒子进行拆分；
按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；
按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。
另一方面，本发明实施例提供一种应用程序的视觉还原装置，可包括：
获取单元，用于获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子；
拆分单元，用于对所述原始用户界面中的元素盒子进行拆分；
布局单元，用于按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；
视觉还原单元，用于按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。
再一方面，本发明实施例提供一种计算机存储介质，所述计算机存储介质存储有一条或一条以上指令，所述指令适于由处理器加载并执行如下方法：
获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子；
对所述原始用户界面中的元素盒子进行拆分；
按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；
按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。
再一方面，本发明实施例提供一种用于应用程序的视觉还原的终端，包括：
处理器，适于实现一条或一条以上指令；以及，
计算机存储介质，所述计算机存储介质存储有一条或一条以上指令，所述一条或一条以上指令适于由所述处理器加载并执行如下方法：
获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子；
对所述原始用户界面中的元素盒子进行拆分；
按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；
按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。
本发明实施例基于“All Box”理念进行APP的视觉还原，具体是获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面由多个元素盒子堆砌而成；对所述原始用户界面中的元素盒子进行拆分；按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。整个视觉还原过程只需前期制定好设计对照表，按照设计对照表将UI的元素排版在其对应的位置即可保证视觉效果，开发成本低，并且当UI设计改动时，例如颜色替换或元素盒子的风格调整；只要元素盒子的位置不变，整体页面效果也不会改变，灵活性和普适度较高；并且，针对不同终端的机型和分辨率均能够实现高保真的APP的视觉还原效果，适配度较高。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的APP运营架构图；
图2为本发明实施例提供的现有的应用程序的工程目录结构；
图3为本发明实施例提供的现有的应用程序的视觉还原方案得到的用户界面的示意图；
图4为本发明实施例提供的一种应用程序的视觉还原方法的流程图；
图5为本发明实施例提供的颜色对照表的示意图；
图6为本发明实施例提供的字体对照表的示意图；
图7为本发明实施例提供的字体对照表的制作流程图；
图8为本发明实施例提供的应用程序的原始用户界面的示意图；
图9为本发明实施例提供的应用程序经视觉还原得到的目标用户界面的示意图；
图10为本发明实施例提供的另一种应用程序的视觉还原方法的流程图；
图11为本发明实施例提供的一种应用程序的视觉还原装置的结构示意图；
图12为本发明实施例提供的一种用于应用程序的视觉还原的终端的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。
一个应用程序(Application，APP)从设计至推出到市场，大概需要经历这样一个流程：设计阶段—开发阶段—推广运营阶段。请参见图1所示的运营架构，设计阶段主要包括：产品原型的设计及UI的设计；此阶段可以是由设计人员使用诸如PC(PersonalComputer，个人计算机)、手机等终端来完成。开发阶段主要包括：产品的开发及UI的视觉还原；此阶段可以是由开发人员使用诸如PC、手机等终端来完成。推广运营阶段主要包括：由开发人员将开发并测试通过的APP上传至后台服务器，由后台服务器通过宣传、推广等手段将APP的相关内容推送至用户，用户可从后台服务器下载并安装APP进行使用。其中，UI的视觉还原是影响APP是否精细的重要因素。视觉还原就是指将设计人员设计的UI落实到APP的过程；实际应用中，无论设计人员提供的原始设计稿标注多么精确，开发出来的产品或多或少都会有误差，这个误差采用视觉还原度来表征，视觉还原度越高，还原出来的UI与设计的原始UI之间的差异越小，APP越精细。
通常，APP在视觉还原的过程中需要考虑环境适配问题，例如：针对Android(安卓，一种移动操作系统)系统环境开发的APP，由于Android系统的开源特性，Android终端碎片化非常严重，此处的碎片化是指不同的终端制造商基于相同Android内核可能制造出多种搭载不同硬件平台、界面的Android终端，这些终端之间的运行速度、软件兼容性均有差别；因此，较佳的情况在于APP的视觉还原效果能够适配更多机型和分辨率。如本发明实施例的相关技术提及，目前的APP的视觉还原方案大部分从布局和图片控件两个方面进行适配考虑的。布局适配是指根据不同终端的机型和分辨率，使用不同的布局文件；例如：针对大屏手机需额外提供设计标注；或者如果想要实现更为细致的布局适配，需要设计尽可能多的适于各种分辨率的布局样式，这样APP在不同终端上的视觉还原效果才能符合设计的原始UI呈现的效果。图片控件适配是指使用编辑工具或如技术对图片进行自适应展示来实现适配，例如要求APP中尽可能使用.9图，此处的.9图是Android开发里的一种特殊的图片，这种格式的图片通过ADT(Abstract Data Type，抽象数据模型)自带的编辑工具生成，使用九宫格切分的方法使图片支持在Android环境下的自适应展示；如果不使用.9图，那么不同分辨率就需要各自对应一张图片资源。请一并参见图2所示的APP工程目录结构示意图；由图2可知，目前的APP的视觉还原方案需要在APP的工程目录结构(即资源文件)中包含尽可能多分辨率的图片资源(如图2所示的各个图片文件目录分别用于存放各分辨率下的图片资源)和各种布局文件夹(如图2所示的各个布局目录)来解决不同机型和分辨率的终端的适配问题。目前的APP的视觉还原方案至少存在如下缺陷：(1)由于采用不同终端分别需要多个布局多个图片资源来进行适配，这就需要针对每一种终端单独开发一套布局和图片的适配方案，开发成本及维护成本均较高；并且这会使得APP的工程目录文件过大，当APP上线推出之后，过大的安装包会占据较多的下载带宽资源，也会占据终端较多的存储空间；(2)除了布局和图片，UI还包含文本元素且文本元素的数量非常多，现有的APP的视觉还原方案并未涉及文本的适配，但文本元素恰恰是影响APP的视觉还原效果的一个重要因素，例如请参见图3所示的经视觉还原得到的UI，很明显看到文本元素的还原程度较差，从而造成整个UI的视觉还原效果较差；针对图3所示情况，目前大多采用设计视觉走查来解决，即通过人工对文本元素的间距等进行重新调整，再返工二次开发，这无疑增加了开发成本，效率也低。
基于此，本发明实施例提出这样一种应用程序的视觉还原方案，该方案提出“AllBox”理念，“All Box”理念是指将UI中每个元素都当作一个盒子，那么整个UI就是由多个元素盒子(这些元素盒子的大小可相同也可不同)堆砌而成的；“All Box”理念采用设计对照表作为设计与开发的约定规范，在设计过程中按照横平竖直的规则对UI进行切割，保证UI能够被切割成设计对照表规范的多个元素盒子，并保证这些元素盒子堆砌时没有交叉；在开发过程通过将这些元素盒子进行堆砌即可还原出UI。此基于“All Box”理念的APP的视觉还原方案至少具备如下优点：(1)只需前期制定好设计对照表，按照设计对照表将UI的元素排版在其对应的位置即可保证视觉效果，开发成本低，并且当UI设计改动时，例如颜色替换或元素盒子的风格调整；只要元素盒子的位置不变，整体页面效果也不会改变，灵活性和普适度较高；(2)针对不同终端的机型和分辨率均能够实现高保真的APP的视觉还原效果，适配度较高。
基于上述描述，本发明实施例提供一种应用程序的视觉还原方法，该方法可以是由用于应用程序的视觉还原的终端来执行，具体可以是由图1所示的开发人员所使用的终端来执行。请参见图4，该方法可包括以下步骤S101-S104。
S101，获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子。
设计对照表用于定义所述应用程序的设计规范和开发规范；换句话说，设计对照表是设计人员与开发人员共同约定的规范。设计对照表可包括颜色对照表和字体对照表；其中，所述颜色对照表用于定义所述应用程序所使用的颜色规范；例如：颜色对照表可规定APP内涉及到的主色调、背景色、主标题色彩等多种颜色规范。具体请一并参见图5所示的颜色对照表的示意图；颜色对照表包括至少一种颜色属性，所述颜色属性至少包括颜色名称和色值；例如图5所示，C1black是一种颜色名称，且C1black这种颜色的色值为#111111；进一步，颜色对照表中的颜色属性还可包括颜色描述，例如C1black的颜色描述为“极黑，用于背景”；再如：C7green是另一种颜色名称，这种颜色的色值为#dfff00，颜色描述为“亮绿，用于主题色”。字体对照表用于定义所述应用程序所使用的字体规范；具体请一并参见图6所示的字体对照表的示意图；字体对照表包括至少一种字体属性，所述字体属性至少包括字体名称、字体大小、承载字体的元素盒子的高度、承载字体的元素盒子内的行间距；例如图6所示，T90是一种字体名称，其字体大小为90px(pixels，像素)，承载该种字体的元素盒子的高度(line hight)为108px，承载该种字体的元素盒子内的行间距(space)为60px；进一步，字体对照表中的每种字体属性还可包括使用描述，例如T90这种字体的使用描述为“导航标题-Medium，非常用，只出现于导航”；再如：T30为另一种字体名称，其字体大小为30px，承载该种字体的元素盒子的高度(line hight)为42px，承载该种字体的元素盒子内的行间距(sapce)为18px，该种字体的使用描述为“辅助信息，用于ins流标签”。当然，字体对照表中的字体属性还可以包含其他信息，例如段落要求(图6中所示的段落paragraph)。
设计对照表可以在多个APP内进行复用，通用性较高。具体实现中，设计对照表可以是由设计人员结合APP需要使用到的颜色和字体进行制作获得，并作为配置信息的一部分以提供给开发阶段。其中，字体对照表可以是由图1所示的设计人员所使用的终端来执行制作过程，请一并参见图7，该制作过程主要包括以下步骤s11-s17：
s11，根据设计人员所设计的APP的原始UI确定APP内使用到的字体种类型；
s12，使用测量工具例如PS(Photoshop一种图像处理软件)工具测量原始UI中元素的字体高度得到元素盒子的高度；
s13，在各种机型和各种分辨率的情况下按照元素盒子的高度进行视觉还原；
s14，判断字体是否超出元素盒子的承载范围；如果超出则执行s15，调整元素盒子的高度，使其能完全包容字体；
s16，如果未超出或者已对元素盒子的高度进行调整，则判断该元素盒子与其他元素盒子的耦合度是否低，如果耦合度低，表明该元素盒子并不与其他元素盒子相同或相似，则执行步骤s17，在字体对照表中添加该元素盒子对应的字体属性。
经历上述s11-s17即可制作得到如图6所示的字体对照表。特别需要说明的是，为了能够更好的适配各种机型和各种分辨率，本发明实施例采用dp(device independentpixels，设备独立像素)作为字体大小单位，由于dp与设备有关，在不同的设备(即不同机型、不同分辨率)中有不同的显示效果；那么，针对以dp为字体大小单位的字体所设计的元素盒子可以容纳不同设备显示出来的不同字体高度，换句话说，同一元素盒子可用于承载不同设备显示出来的不同字体，这就使得元素盒子在各种机型、各种分辨率的情况下均能够实现较佳的字体承载效果，既解决了机型及分辨率的适配问题，又能够保证APP的视觉还原效果。
APP的原始用户界面是指设计人员为APP的UI所设计的原稿，请一并参见图8所示的原始UI；如图8所示，原始UI中的元素被横平竖直的切割为一个一个的元素盒子，这些元素盒子堆砌形成了原始UI，并且，该原始UI中包括标注信息，所述标注信息包括以下至少一种：所使用的目标颜色名称、各元素盒子的属性、相邻元素盒子的间距、元素盒子距离与页面边缘的距离；例如图8中某元素盒子的标注为“C8red”，表明该元素盒子承载的文本元素(即金牛座)的字体名称为C8red，通过查找图5所示的颜色对照表即可知道该文本元素的字体颜色为红色；再如图8所示的承载QQ(腾讯公司推出的一种即时聊天工具)头像的元素盒子以及其下相邻承载“一滴眼泪的悲伤71149”这一文本的元素盒子的间距为0.5cm。其中，元素盒子的属性可包括以下任一种或多种：元素盒子所承载的元素的类型、元素盒子的宽度和/或高度；此处的元素的类型包括但不限于：文本、图片、富文本。例如图8中某元素盒子的标注信息为“T30”，表明该元素盒子用于承载文本元素，且该文本元素的字体采用的是设计对照表中的T30字体，那么从设计对照表中查找到T30这一项的字体属性，即可得到该元素盒子的高度；再如图8所示用于承载QQ头像的元素盒子的标注信息包括高度4.5cm，宽度为5cm。
设计对照表、APP的原始UI和原始UI的标注信息在设计阶段完成，并作为APP的配置信息提供至开发阶段；该配置信息可以存储在数据库中，步骤S101可以从数据库中获得APP的配置信息。
S102，对所述原始用户界面中的元素盒子进行拆分。
由于APP的原始UI是由多个元素盒子堆砌形成的，那么在视觉还原时，需要先将这些元素盒子进行拆分，得到一个一个单独的元素盒子，再分别针对这一个一个单独的元素盒子进行相应的程序开发，以在APP内实现这一个一个的元素盒子。
S103，按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局。
S104，按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。
步骤S103-S104中，按照设计对照表及标注信息，可以在屏幕中确定各个元素盒子的布局，即确定各个元素盒子在屏幕中的位置；按照这些元素盒子在屏幕中的位置依次摆放实现这些元素盒子相应的程序(控件)，即可以对APP进行视觉还原得到目标UI，该目标UI是指还原得到的APP的UI，请一并参见图9所示的目标UI的示意图；对比图8和图9可知，本发明实施例基于“All Box”理念的APP的视觉还原方法能够达到高保真的视觉还原效果。
本发明实施例基于“All Box”理念进行APP的视觉还原，具体是获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面由多个元素盒子堆砌而成；对所述原始用户界面中的元素盒子进行拆分；按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。整个视觉还原过程只需前期制定好设计对照表，按照设计对照表将UI的元素排版在其对应的位置即可保证视觉效果，开发成本低，并且当UI设计改动时，例如颜色替换或元素盒子的风格调整；只要元素盒子的位置不变，整体页面效果也不会改变，灵活性和普适度较高；并且，针对不同终端的机型和分辨率均能够实现高保真的APP的视觉还原效果，适配度较高。
本发明实施例还提供另一种应用程序的视觉还原方法，该方法可以是由用于应用程序的视觉还原的终端来执行，具体可以是由图1所示的开发人员所使用的终端来执行。请参见图10，该方法可包括以下步骤S201-S215。
S201，获取应用程序的原始用户界面。
APP的原始用户界面是指设计人员为APP的UI所设计的原稿。一种实施方式中，APP可以是一个全新的APP，此时该APP的原始用户界面是指为这个全新APP设计的UI原稿。另一种实施方式中，APP可以是一个已设计好的、但需要改版的APP，此时该APP的原始用户界面是指为这个APP改版设计的UI稿。
S202，在所述原始用户界面中按照横平竖直的原则对元素进行切割，形成多个元素盒子；每个元素盒子用于承载所述原始用户界面的一个元素，所述元素包括文本、图片或富文本。
横平竖直的原则可以保证UI能够被切割成多个元素盒子，并保证这些元素盒子堆砌时没有交叉。其中，用于承载文本和富文本的元素盒子可以被称为文本元素盒子；用于承载图片的元素盒子可以被称为图片元素盒子。富文本是一种特殊格式的文本，其能够比普通文本表达更丰富的内容；例如：即时通信应用中的表情就是一个典型的富文本，如富文本“:-D”用于表示“开心”这个表情，富文本“>_<”用于表示“抓狂”这个表情，富文本“＝＝b”用于表示“冒冷汗”这个表情。
S203，按照所述设计对照表在所述原始用户界面中进行标注，得到所述应用程序的标注信息；所述标注信息包括以下至少一种：所使用的目标颜色名称、各元素盒子的属性、相邻元素盒子的间距、元素盒子距离与页面边缘的距离。
设计对照表包括颜色对照表和字体对照表，其颜色对照表可参见图5；字体对照表可参见图6。按照设计对照表对原始UI进行标注，可得如图8所示的标注信息。需要说明的是，如果原始UI中的元素盒子使用的是设计对照表中的属性，那么就直接在该元素盒子侧标注相应的属性名称；例如：某元素盒子承载的文本元素使用T54的字体，那么可直接标注为“T54”；如果原始UI中存在元素盒子未使用设计对照表中的属性，那么则可以通过测量元素盒子的宽度和高度等属性并进行实际标注；例如：某元素盒子承载的图片元素未使用对照表中的属性，那么则可测量该图片元素的宽度和高度进行实际标注。
经过步骤S201-S203所获得的设计对照表、APP的原始UI和原始UI的标注信息在设计阶段完成，并作为APP的配置信息提供至开发阶段；该配置信息可以存储在数据库中。
S204，获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面由多个元素盒子堆砌而成。
S205，对所述原始用户界面的标注信息及所述设计对照表进行归一性检查。
S206，若归一性检查成功，则对所述原始用户界面中的元素盒子进行拆分。
步骤S205-S206中，归一性检查包含两个层面，一个层面是检查原始用户界面的标注信息是否完整，例如：若检查到某个元素盒子没有相应的标注信息，或检查到原始UI的标注信息未对原始UI使用的颜色进行标注；等等；那么原始UI的标注信息不完整，未完整标注的原始UI不能够较好的实现视觉还原，此时归一性检查不成功，需要返回给设计人员进行重新标注。如果原始UI的标注信息完整，那么进行另一个层面的检查，即检查原始UI的标注信息是否能够被设计对照表覆盖，例如：某元素盒子被标注为“T56”，但查找设计对照表中并未发现T56这一属性项，此时归一化检查不成功，需要返回设计人员进行重新标注或者在设计对照表中新增“T56”属性项。通过归一性检查能够保证原始UI的标注信息和设计对照表的完整准确性，从而保证APP的视觉还原过程能够顺利进行，保证APP的视觉还原效果。
如果归一性检查成功，则需要对原始UI中的元素盒子进行拆分；由于APP的原始UI是由多个元素盒子堆砌形成的，那么在视觉还原时，需要先将这些元素盒子进行拆分，得到一个一个单独的元素盒子，再分别针对这一个一个单独的元素盒子进行相应的程序开发，以在APP内实现这一个一个的元素盒子。
S207，在屏幕中绘制网格。
S208，按照所述设计对照表及所述标注信息，确定拆分后的各元素盒子在所述网格中的位置。
S209，根据各元素盒子在所述网格中的位置得到布局。
步骤S207-S209中，可在终端(开发阶段开发人员所使用的终端)中自定义一个view(视图)，该view在终端屏幕中呈现为网格；按照设计对照表及标注信息确定各个元素盒子在网格中的位置从而得到布局，也就是需要确定各元素盒子所承载的元素在该自定义view中的Layout(构图、布局)；例如图8所示，假设根据标注信息可知用于承载QQ头像的元素盒子与页面上边缘的距离为5cm且与页面左边缘的距离为2cm；设一个网格的边长为1cm，那么可得到该元素盒子的起始高度为网格由上而下的第6格；另外再根据标注信息可知该元素盒子的高度为4.5cm，那么可知该元素盒子由上而下占据网格中的第6格至第10.5格位置；再如图8所示，用于承载“一滴眼泪的悲伤71149”这一文本元素的元素盒子与承载QQ头像的元素盒子相邻，二者间距为0.5cm，那么可确定该文本元素盒子的高度为网格由上至下的第11格，再根据该文本元素盒子的其他标注信息可确定该文本元素盒子的位置。具体实现中，通过主线程来对APP进行视觉还原时，在步骤S208-S209中，可以通过一个或多个子线程来计算各元素盒子的Layout。
S210，为拆分后的各元素盒子分别映射相应的控件，一个元素盒子与一个控件相映射。
元素盒子是需要相应的控件来实现的，例如：承载文本的元素盒子通过Textview这个控件来实现，那么有多少个文本元素盒子，就需要摆放相同数量的Textview控件。元素盒子与控件相映射是指，通过控件来实现与该控件相映射的元素盒子，例如：某个Textview控件与T30的文本元素盒子相映射，表明通过该Textview控件能够T30的文本元素盒子，即该Textview能够实现字体大小为30px的文本，且该文本的高度为42px，文本行间距为18px。
S211，按照所规划的布局中各元素盒子在所述网格中的位置，在所述网格中放置与各元素盒子相映射的控件。
如前述例子，与元素盒子1相映射的控件摆放在网络中该元素盒子1所对应的位置，以此类推，在网络中放置各元素盒子相映射的控件。
S212，若所述多个元素盒子中包括承载了富文本的目标元素盒子，获取所述富文本所表示内容的宽度和高度。
S213，按照所述富文本所表示内容的宽度和高度动态调整所述网格中与所述目标元素盒子相映射的控件的宽度和高度。
步骤S212-S213是布局进行调整的过程，由于富文本所呈现出来的内容并非文本实际内容，例如“＝＝b”这个文本实际表示的是“冒冷汗”这个表情，因此，还原后的UI并不是要展现“＝＝b”这个文本，而实际要展现的是“冒冷汗”这个表情，因此，能够容纳富文本的元素盒子，在还原后并不一定能够容纳该富文本表示的内容，也就是之个内容很可能会超出元素盒子而影响视觉还原的效果；因此，如果某个元素盒子承载的是富文本，在确定该元素盒子的属性之后，还需要获得该富文本所表示的内容的实际宽度和高度来对该元素盒子的宽度和高度进行调整，以使得调整后的元素盒子的宽度和高度能够容纳富文本表示的内容；具体实现中以富文本表示表情为例，可以利用互联网中表情开源库，例如FaceBook的开源库TextLayoutBuilder，采用子线程去测量富文本表示的表情的宽度和高度，再重新调整与用于承载富文本的元素盒子相映射的控件的宽度和高度。
实际应用中，还可能存在其他布局调整的情况，例如：针对承载多行文本的元素盒子，设计对照表中给出了元素盒子内的行间距，使得承载多行文本的元素盒子能够像承载单行文本的元素盒子一样进行叠加，但是由于不同终端行间距表示方式不同，可能会影响还原后的文本表示方式，从而影响视觉还原效果，此时也需要进行布局调整；例如：低于Android5.0版本的Android终端中，针对单选文本会自动添加行间距；针对多行文本也会自动添加行间距，那么，在这些终端中进行APP视觉还原时就可能出现还原偏差而影响视觉还原效果。为了避免这种情况发生，本发明实施例设置了优化过程，具体可以是在视觉还原过程中，终端启动APP之后在终端屏幕中绘制一个多行文本视图，查看终端显示该多行文本视图时是否会自动添加行间距，如果是，则动态调整承载多行文本的元素盒子的高度和宽度，如将该元素盒子的高度和宽度进行相应行间距离的减少，以保证该元素盒子在终端自动添加行间距的情况下也不会对整个UI的还原效果产生影响。
S214，对放置了控件的所述网格进行渲染以对所述应用程序进行视觉还原得到目标用户界面。
依据各个元素盒子的Layout渲染自定义的view即可在APP内还原出目标UI。步骤S210-S214描述的是APP的视觉还原过程；这个视觉还原过程充分考虑了文本、富文本、图片这些元素对视觉还原的影响，并设置有动态优化机制，能够有效保证APP的视觉还原效果，使得开发阶段能够高保真的还原出APP的UI，并且还原出来的目标UI符合设计阶段期待的效果。
S215，将所述目标用户界面与所述原始用户界面进行比对得到所述应用程序的视觉还原度。
视觉还原度用于衡量目标UI与原始UI之间的差异，视觉还原度越高，还原出来的UI与设计的原始UI之间的差异越小，APP越精细。本发明实施例中，可以借助一些检验工具例如他山石等来获得APP的视觉还原度。
本发明实施例基于“All Box”理念进行APP的视觉还原，具体是获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面由多个元素盒子堆砌而成；对所述原始用户界面中的元素盒子进行拆分；按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。整个视觉还原过程只需前期制定好设计对照表，按照设计对照表将UI的元素排版在其对应的位置即可保证视觉效果，开发成本低，并且当UI设计改动时，例如颜色替换或元素盒子的风格调整；只要元素盒子的位置不变，整体页面效果也不会改变，灵活性和普适度较高；并且，针对不同终端的机型和分辨率均能够实现高保真的APP的视觉还原效果，适配度较高。
基于上述应用程序的视觉还原方法的实施例的描述，本发明实施例还提供一种应用程序的视觉还原装置，该装置可以是运行于终端中的一个计算机程序(包括程序代码)，具体可以是运行于图1所示的开发人员所使用的终端中的一个计算机程序；并且该装置可以被应用于上述图4和图10所示的应用程序的视觉还原方法中，以用于执行应用程序的视觉还原方法中的相应步骤。请参见图11，该装置运行如下单元：
获取单元101，用于获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子。
拆分单元102，用于对所述原始用户界面中的元素盒子进行拆分。
布局单元103，用于按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局。
视觉还原单元104，用于按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。
一种实施方式中，所述设计对照表用于定义所述应用程序的设计规范和开发规范；所述设计对照表包括颜色对照表和字体对照表；
所述颜色对照表用于定义所述应用程序所使用的颜色规范；所述颜色对照表包括至少一种颜色属性，所述颜色属性至少包括颜色名称和色值；
所述字体对照表用于定义所述应用程序所使用的字体规范；所述字体对照表包括至少一种字体属性，所述字体属性至少包括字体名称、字体大小、承载字体的元素盒子的高度、承载字体的元素盒子内的行间距。
另一种实施方式中，该装置还运行如下单元：
预处理单元105，用于获取应用程序的原始用户界面；
在所述原始用户界面中按照横平竖直的原则对元素进行切割，形成多个元素盒子；每个元素盒子用于承载所述原始用户界面的一个元素，所述元素包括文本、图片或富文本；以及，
按照所述设计对照表在所述原始用户界面中进行标注，得到所述应用程序的标注信息；所述标注信息包括以下至少一种：所使用的目标颜色名称、各元素盒子的属性、相邻元素盒子的间距、元素盒子距离与页面边缘的距离。
再一种实施方式中，所述布局单元具体用于：
在屏幕中绘制网格；
按照所述设计对照表及所述标注信息，确定拆分后的各元素盒子在所述网格中的位置；以及，
根据各元素盒子在所述网格中的位置得到布局。
再一种实施方式中，所述视觉还原单元具体用于：
为拆分后的各元素盒子分别映射相应的控件，一个元素盒子与一个控件相映射；
按照所规划的布局中各元素盒子在所述网格中的位置，在所述网格中放置与各元素盒子相映射的控件；
对放置了控件的所述网格进行渲染以对所述应用程序进行视觉还原得到目标用户界面。
再一种实施方式中，所述视觉还原单元还用于：
若所述多个元素盒子中包括承载了富文本的目标元素盒子，获取所述富文本所表示内容的宽度和高度；以及
按照所述富文本所表示内容的宽度和高度动态调整所述网格中与所述目标元素盒子相映射的控件的宽度和高度。
再一种实施方式中，该装置还运行如下单元：
归一性检查单元106，用于对所述原始用户界面的标注信息及所述设计对照表进行归一性检查；若归一性检查成功，则通知所述拆分单元对所述原始用户界面中的元素盒子进行拆分；以及，
比对单元107，用于将所述目标用户界面与所述原始用户界面进行比对得到所述应用程序的视觉还原度。
根据本发明的一个实施例，图4所示的应用程序的视觉还原方法涉及的步骤S101-S104可以是由图11所示的应用程序的视觉还原装置中的各个单元来执行的。例如，图4中所示的步骤S101、S102、S103、S104可以分别由图11中所示的获取单元101、拆分单元102、布局单元103、视觉还原单元104来执行。
根据本发明的一个实施例，图10所示的应用程序的视觉还原方法涉及的步骤S201-S215可以是由图11所示的应用程序的视觉还原装置中的各个单元来执行的。例如，图10中所示的步骤S201-S203、S204、S205、S206、S207-S209、S210-S214、S215可以分别由图11中所示的预处理单元105、获取单元101、归一性检查单元106、拆分单元102、布局单元103、视觉还原单元104、比对单元107来执行。
根据本发明的另一个实施例，图11所示的应用程序的视觉还原装置中的各个单元可以分别或全部合并为一个或若干个另外的单元来构成，或者其中的某个(些)单元还可以再拆分为功能上更小的多个单元来构成，这可以实现同样的操作，而不影响本发明的实施例的技术效果的实现。上述单元是基于逻辑功能划分的，在实际应用中，一个单元的功能也可以由多个单元来实现，或者多个单元的功能由一个单元实现。在本发明的其它实施例中，应用程序的视觉还原装置也可以包括其它单元，在实际应用中，这些功能也可以由其它单元协助实现，并且可以由多个单元协作实现。
本发明实施例基于“All Box”理念进行APP的视觉还原，具体是获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面由多个元素盒子堆砌而成；对所述原始用户界面中的元素盒子进行拆分；按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。整个视觉还原过程只需前期制定好设计对照表，按照设计对照表将UI的元素排版在其对应的位置即可保证视觉效果，开发成本低，并且当UI设计改动时，例如颜色替换或元素盒子的风格调整；只要元素盒子的位置不变，整体页面效果也不会改变，灵活性和普适度较高；并且，针对不同终端的机型和分辨率均能够实现高保真的APP的视觉还原效果，适配度较高。
基于上述实施例所示应用程序的视觉还原系统及应用程序的视觉还原方法，本发明实施例还提供了一种用于应用程序的视觉还原终端，该终端例如可以是开发阶段开发人员所使用的终端设备。具体实现中，本发明实施例中描述的终端包括但不限于诸如具有触摸敏感表面(例如，触摸屏显示器和/或触摸板)的移动电话、膝上型计算机或平板计算机之类的其它便携式设备。还应当理解的是，在某些实施例中，所述设备并非便携式通信设备，而是具有触摸敏感表面(例如，触摸屏显示器和/或触摸板)的台式计算机。请参见图12，该终端的内部结构可包括处理器、用户接口、网络接口及计算机存储介质。其中，终端内的处理器、用户接口、网络接口及计算机存储介质可通过总线或其他方式连接，在本发明实施例所示图12中以通过总线连接为例。
其中，用户接口是实现用户与终端进行交互和信息交换的媒介，其具体体现可以包括用于输出的显示屏(Display)以及用于输入的键盘(Keyboard)等等，需要说明的是，此处的键盘既可以为实体键盘，也可以为触屏虚拟键盘，还可以为实体与触屏虚拟相结合的键盘。然而，应当理解的是，用户接口还可以包括诸如鼠标和/或控制杆的一个或多个其它物理用户接口设备。处理器(或称CPU(Central Processing Unit，中央处理器))是终端的计算核心以及控制核心，其适于实现一条或一条以上指令，具体适于加载并执行一条或一条以上指令从而实现相应方法流程或相应功能；例如：CPU可以用于解析用户向终端所发送的开关机指令，并控制终端进行开关机操作；再如：CPU可以在终端内部结构之间传输各类交互数据，等等。计算机存储介质(Memory)是终端中的记忆设备，用于存放程序和数据。可以理解的是，此处的计算机存储介质既可以包括终端的内置存储设备，当然也可以包括终端所支持的扩展存储设备。计算机存储介质提供存储空间，该存储空间存储了终端的操作系统。并且，在该存储空间中还存放了适于被处理器加载并执行的一条或一条以上的指令，这些指令可以是一个或一个以上的计算机程序(包括程序代码)。需要说明的是，此处的计算机存储介质可以是高速RAM(Random Access Memory，随机存取存储器)存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器；可选的还可以是至少一个位于远离前述处理器的计算机存储介质。
还需要特别说明的是，终端支持各种应用程序，例如以下中的一个或多个：绘图应用程序、演示应用程序、文字处理应用程序、网站创建应用程序、盘刻录应用程序、电子表格应用程序、游戏应用程序、电话应用程序、视频会议应用程序、电子邮件应用程序、即时消息收发应用程序、锻炼支持应用程序、照片管理应用程序、数码相机应用程序、数字摄影机应用程序、web(万维网)浏览应用程序、数字音乐播放器应用程序和/或数字视频播放器应用程序。可以在终端上执行的各种应用程序可以使用诸如触摸敏感表面的至少一个公共物理用户接口设备。可以在应用程序之间和/或相应应用程序内调整和/或改变触摸敏感表面的一个或多个功能以及终端上显示的相应信息。这样，终端的公共物理架构(例如，触摸敏感表面)可以支持具有对用户而言直观且透明的用户界面的各种应用程序。
在本发明实施例中，处理器加载并执行计算机存储介质中存放的一条或一条以上指令，以实现上述图4和图10所示方法流程的相应步骤；具体实现中，计算机存储介质中的一条或一条以上指令由处理器加载并执行如下步骤：
获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子；
对所述原始用户界面中的元素盒子进行拆分；
按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；以及，
按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。
一种实施方式中，所述设计对照表用于定义所述应用程序的设计规范和开发规范；所述设计对照表包括颜色对照表和字体对照表；
所述颜色对照表用于定义所述应用程序所使用的颜色规范；所述颜色对照表包括至少一种颜色属性，所述颜色属性至少包括颜色名称和色值；
所述字体对照表用于定义所述应用程序所使用的字体规范；所述字体对照表包括至少一种字体属性，所述字体属性至少包括字体名称、字体大小、承载字体的元素盒子的高度、承载字体的元素盒子内的行间距。
另一种实施方式中，计算机存储介质中的一条或一条以上指令由处理器加载并执行所述获取应用程序的配置信息的步骤之前，还执行如下步骤：
获取应用程序的原始用户界面；
在所述原始用户界面中按照横平竖直的原则对元素进行切割，形成多个元素盒子；每个元素盒子用于承载所述原始用户界面的一个元素，所述元素包括文本、图片或富文本；以及，
按照所述设计对照表在所述原始用户界面中进行标注，得到所述应用程序的标注信息；所述标注信息包括以下至少一种：所使用的目标颜色名称、各元素盒子的属性、相邻元素盒子的间距、元素盒子距离与页面边缘的距离。
再一种实施方式中，计算机存储介质中的一条或一条以上指令由处理器加载并执行所述按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局的步骤时，具体执行如下步骤：
在屏幕中绘制网格；
按照所述设计对照表及所述标注信息，确定拆分后的各元素盒子在所述网格中的位置；以及，
根据各元素盒子在所述网格中的位置得到布局。
再一种实施方式中，计算机存储介质中的一条或一条以上指令由处理器加载并执行所述按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面的步骤的过程中，具体执行如下步骤：
为拆分后的各元素盒子分别映射相应的控件，一个元素盒子与一个控件相映射；
按照所规划的布局中各元素盒子在所述网格中的位置，在所述网格中放置与各元素盒子相映射的控件；以及，
对放置了控件的所述网格进行渲染以对所述应用程序进行视觉还原得到目标用户界面。
再一种实施方式中，计算机存储介质中的一条或一条以上指令由处理器加载并执行所述对放置了控件的所述网格进行渲染以对所述应用程序进行视觉还原得到目标用户界面的步骤之前，还执行如下步骤：
若所述多个元素盒子中包括承载了富文本的目标元素盒子，获取所述富文本所表示内容的宽度和高度；以及，
按照所述富文本所表示内容的宽度和高度动态调整所述网格中与所述目标元素盒子相映射的控件的宽度和高度。
再一种实施方式中，计算机存储介质中的一条或一条以上指令由处理器加载还执行如下步骤：
对所述原始用户界面的标注信息及所述设计对照表进行归一性检查；
若归一性检查成功，则执行对所述原始用户界面中的元素盒子进行拆分的步骤。
再一种实施方式中，计算机存储介质中的一条或一条以上指令由处理器加载还执行如下步骤：
将所述目标用户界面与所述原始用户界面进行比对得到所述应用程序的视觉还原度。
本发明实施例基于“All Box”理念进行APP的视觉还原，具体是获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面由多个元素盒子堆砌而成；对所述原始用户界面中的元素盒子进行拆分；按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。整个视觉还原过程只需前期制定好设计对照表，按照设计对照表将UI的元素排版在其对应的位置即可保证视觉效果，开发成本低，并且当UI设计改动时，例如颜色替换或元素盒子的风格调整；只要元素盒子的位置不变，整体页面效果也不会改变，灵活性和普适度较高；并且，针对不同终端的机型和分辨率均能够实现高保真的APP的视觉还原效果，适配度较高。
以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。
Claims (14)
1.一种应用程序的视觉还原方法，其特征在于，所述方法应用于所述应用程序的开发阶段；所述方法包括：
获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子；其中，所述设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息是在所述应用程序的设计阶段完成并提供至所述应用程序的开发阶段的；所述设计对照表能够在多个应用程序内进行复用；
对所述原始用户界面的标注信息及所述设计对照表进行归一性检查；所述归一性检查包括检查所述原始用户界面的标注信息是否完整；如果所述原始用户界面的标注信息完整，则继续检查所述原始用户界面的标信息是否能够被所述设计对照表覆盖；如果覆盖则归一化检查成功；如果未覆盖则归一化检查失败，返回至所述应用程序的设计阶段对所述原始用户界面进行重新标注或者在所述设计对照表中增加未覆盖的属性项；
若归一性检查成功，则对所述原始用户界面中的元素盒子进行拆分；
按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；
按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。
2.如权利要求1所述的方法，其特征在于，所述设计对照表用于定义所述应用程序的设计规范和开发规范；所述设计对照表包括颜色对照表和字体对照表；
所述颜色对照表用于定义所述应用程序所使用的颜色规范；所述颜色对照表包括至少一种颜色属性，所述颜色属性至少包括颜色名称和色值；
所述字体对照表用于定义所述应用程序所使用的字体规范；所述字体对照表包括至少一种字体属性，所述字体属性至少包括字体名称、字体大小、承载字体的元素盒子的高度、承载字体的元素盒子内的行间距。
3.如权利要求1所述的方法，其特征在于，所述获取应用程序的配置信息之前，还包括：
获取应用程序的原始用户界面；
在所述原始用户界面中按照横平竖直的原则对元素进行切割，形成多个元素盒子；每个元素盒子用于承载所述原始用户界面的一个元素，所述元素包括文本、图片或富文本；
按照所述设计对照表在所述原始用户界面中进行标注，得到所述原始用户界面的标注信息；所述标注信息包括以下至少一种：所使用的目标颜色名称、各元素盒子的属性、相邻元素盒子的间距、元素盒子距离与页面边缘的距离。
4.如权利要求1所述的方法，其特征在于，所述按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局，包括：
在屏幕中绘制网格；
按照所述设计对照表及所述标注信息，确定拆分后的各元素盒子在所述网格中的位置；
根据各元素盒子在所述网格中的位置得到布局。
5.如权利要求4所述的方法，其特征在于，所述按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面，包括：
为拆分后的各元素盒子分别映射相应的控件，一个元素盒子与一个控件相映射；
按照所规划的布局中各元素盒子在所述网格中的位置，在所述网格中放置与各元素盒子相映射的控件；
对放置了控件的所述网格进行渲染以对所述应用程序进行视觉还原得到目标用户界面。
6.如权利要求5所述的方法，其特征在于，所述对放置了控件的所述网格进行渲染以对所述应用程序进行视觉还原得到目标用户界面之前，还包括：
若所述多个元素盒子中包括承载了富文本的目标元素盒子，获取所述富文本所表示内容的宽度和高度；
按照所述富文本所表示内容的宽度和高度动态调整所述网格中与所述目标元素盒子相映射的控件的宽度和高度。
7.如权利要求1-3任一项所述的方法，其特征在于，还包括：
将所述目标用户界面与所述原始用户界面进行比对得到所述应用程序的视觉还原度。
8.一种应用程序的视觉还原装置，其特征在于，所述视觉还原属于所述应用程序的开发阶段；所述装置包括：
获取单元，用于获取应用程序的配置信息，所述配置信息包括设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息，所述原始用户界面包括多个元素盒子；其中，所述设计对照表、所述应用程序的原始用户界面及所述原始用户界面的标注信息是在所述应用程序的设计阶段完成并提供至所述应用程序的开发阶段的；所述设计对照表能够在多个应用程序内进行复用；
归一性检查单元，用于对所述原始用户界面的标注信息及所述设计对照表进行归一性检查；所述归一性检查包括检查所述原始用户界面的标注信息是否完整；如果所述原始用户界面的标注信息完整，则继续检查所述原始用户界面的标信息是否能够被所述设计对照表覆盖；如果覆盖则归一化检查成功；如果未覆盖则归一化检查失败，返回至所述应用程序的设计阶段对所述原始用户界面进行重新标注或者在所述设计对照表中增加未覆盖的属性项；
拆分单元，用于若归一性检查成功，对所述原始用户界面中的元素盒子进行拆分；
布局单元，用于按照所述设计对照表及所述标注信息，在屏幕中规划拆分后的各元素盒子的布局；
视觉还原单元，用于按照所规划的布局对所述应用程序进行视觉还原得到目标用户界面。
9.如权利要求8所述的装置，其特征在于，所述设计对照表用于定义所述应用程序的设计规范和开发规范；所述设计对照表包括颜色对照表和字体对照表；
所述颜色对照表用于定义所述应用程序所使用的颜色规范；所述颜色对照表包括至少一种颜色属性，所述颜色属性至少包括颜色名称和色值；
所述字体对照表用于定义所述应用程序所使用的字体规范；所述字体对照表包括至少一种字体属性，所述字体属性至少包括字体名称、字体大小、承载字体的元素盒子的高度、承载字体的元素盒子内的行间距。
10.如权利要求8所述的装置，其特征在于，还包括：
预处理单元，用于获取应用程序的原始用户界面；在所述原始用户界面中按照横平竖直的原则对元素进行切割，形成多个元素盒子；每个元素盒子用于承载所述原始用户界面的一个元素，所述元素包括文本、图片或富文本；以及，按照所述设计对照表在所述原始用户界面中进行标注，得到所述原始用户界面的标注信息；所述标注信息包括以下至少一种：所使用的目标颜色名称、各元素盒子的属性、相邻元素盒子的间距、元素盒子距离与页面边缘的距离；比对单元，用于将所述目标用户界面与所述原始用户界面进行比对得到所述应用程序的视觉还原度。
11.如权利要求8所述的装置，其特征在于，所述布局单元具体用于：
在屏幕中绘制网格；
按照所述设计对照表及所述标注信息，确定拆分后的各元素盒子在所述网格中的位置；以及，
根据各元素盒子在所述网格中的位置得到布局。
12.如权利要求11所述的装置，其特征在于，所述视觉还原单元具体用于：
为拆分后的各元素盒子分别映射相应的控件，一个元素盒子与一个控件相映射；
按照所规划的布局中各元素盒子在所述网格中的位置，在所述网格中放置与各元素盒子相映射的控件；
若所述多个元素盒子中包括承载了富文本的目标元素盒子，获取所述富文本所表示内容的宽度和高度；
按照所述富文本所表示内容的宽度和高度动态调整所述网格中与所述目标元素盒子相映射的控件的宽度和高度；以及，
对放置了控件的所述网格进行渲染以对所述应用程序进行视觉还原得到目标用户界面。
13.一种计算机存储介质，其特征在于，所述计算机存储介质存储有一条或一条以上指令，所述指令适于由处理器加载并执行如权利要求1-7任一项所述的应用程序的视觉还原方法。
14.一种用于应用程序的视觉还原的终端，其特征在于，包括：
处理器，适于实现一条或一条以上指令；以及，
计算机存储介质，所述计算机存储介质存储有一条或一条以上指令，所述一条或一条以上指令适于由所述处理器加载并执行如权利要求1-7任一项所述的应用程序的视觉还原方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810717697.2A CN108897541B (zh) | 2018-07-03 | 2018-07-03 | 应用程序的视觉还原方法、装置、存储介质及终端 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810717697.2A CN108897541B (zh) | 2018-07-03 | 2018-07-03 | 应用程序的视觉还原方法、装置、存储介质及终端 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108897541A CN108897541A (zh) | 2018-11-27 |
| CN108897541B true CN108897541B (zh) | 2022-02-11 |
Family
ID=64347708
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810717697.2A Active CN108897541B (zh) | 2018-07-03 | 2018-07-03 | 应用程序的视觉还原方法、装置、存储介质及终端 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108897541B (zh) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111258575B (zh) * | 2018-11-30 | 2023-09-15 | 阿里健康信息技术有限公司 | 一种页面布局处理方法及装置 |
| CN110018826A (zh) * | 2019-03-12 | 2019-07-16 | 深圳壹账通智能科技有限公司 | 用户界面生成方法及相关设备 |
| CN111405342B (zh) * | 2020-03-17 | 2021-05-07 | 北京字节跳动网络技术有限公司 | 富文本消息显示方法、装置、系统、介质和电子设备 |
| CN112035772A (zh) * | 2020-07-27 | 2020-12-04 | 长沙市到家悠享网络科技有限公司 | 页面评估方法、装置及设备 |
| CN111767054B (zh) * | 2020-09-01 | 2020-12-22 | 平安国际智慧城市科技股份有限公司 | 生成智能大屏的方法、装置和计算机设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102622232A (zh) * | 2012-03-06 | 2012-08-01 | 惠州华阳通用电子有限公司 | 一种嵌入式设备用户界面实现方法 |
| CN103955364A (zh) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | 一种适用于手机的前端组件方法 |
| CN104007991A (zh) * | 2014-06-06 | 2014-08-27 | 百度在线网络技术（北京）有限公司 | 应用程序界面布局调整方法和装置 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10540153B2 (en) * | 2016-12-03 | 2020-01-21 | Thomas STACHURA | Spreadsheet-based software application development |
-
2018
- 2018-07-03 CN CN201810717697.2A patent/CN108897541B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102622232A (zh) * | 2012-03-06 | 2012-08-01 | 惠州华阳通用电子有限公司 | 一种嵌入式设备用户界面实现方法 |
| CN103955364A (zh) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | 一种适用于手机的前端组件方法 |
| CN104007991A (zh) * | 2014-06-06 | 2014-08-27 | 百度在线网络技术（北京）有限公司 | 应用程序界面布局调整方法和装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108897541A (zh) | 2018-11-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108897541B (zh) | 应用程序的视觉还原方法、装置、存储介质及终端 | |
| US11216253B2 (en) | Application prototyping tool | |
| RU2645276C2 (ru) | Создание вариаций при преобразовании данных в потребляемый контент | |
| US9507480B1 (en) | Interface optimization application | |
| WO2020048326A1 (zh) | 一种界面显示方法、系统及终端设备 | |
| US20090051704A1 (en) | Object rendering from a base coordinate | |
| CN102591848A (zh) | 基于背景的前景特性选择 | |
| CN110096275B (zh) | 一种页面处理方法及装置 | |
| US10452747B2 (en) | Dynamically formatting scalable vector graphics | |
| CN104704468A (zh) | Web应用程序的跨系统安装 | |
| CN110516186A (zh) | 页面骨架自动化生成方法、设备、存储介质及装置 | |
| US10169304B1 (en) | Providing different font hints based on device, text and font context | |
| CN104715004B (zh) | 混淆页面描述语言输出以阻碍转换为可编辑格式 | |
| CN115357239A (zh) | 一种运营活动页面快速搭建方法、装置及电子设备 | |
| CN112395529B (zh) | 页面加载方法、装置、设备及存储介质 | |
| CN102467385A (zh) | 用于软件界面适配不同分辨率的方法和装置 | |
| AU2016266083A1 (en) | Method, system and apparatus for displaying an electronic document | |
| CN111199138A (zh) | 使用QML对含Emoji表情弹幕描边方法、系统、服务器及存储介质 | |
| US10423712B2 (en) | Creating and managing chattels to control design asset behaviors | |
| CN102099806B (zh) | 信息输出装置及信息输出方法 | |
| CN114385153A (zh) | 界面编辑方法、编辑终端及计算机可读存储介质 | |
| CN107977451B (zh) | 在显示页面中添加动态内容的方法、装置和终端设备 | |
| WO2022152159A1 (zh) | 一种ui界面自适应约束求解方法及相关装置 | |
| JP2014092745A (ja) | 情報処理装置、情報処理方法、及びプログラム | |
| KR102382703B1 (ko) | 어플리케이션 개발을 위한 멀티채널통합플랫폼 저작장치 및 저작방법 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |