CN108459857A - 一种基于美度计算的界面辅助设计方法和系统 - Google Patents

Abstract

本发明公开了一种基于美度计算的界面辅助设计方法和系统。针对已有的界面图片或布局设计，拾取目标界面布局设计要素，生成基本布局文件；对基本布局进行元素预处理，形成规范化的布局文件；根据规范化的布局文件，获取与美度计算相关的布局参数；分别计算各项美度指标的量化取值，形成美度综合列表，输出该列表并保存布局文件；根据美度综合列表修改界面布局设计，同时实时更新美度综合列表，修改完成后输出美度综合列表并保存布局文件。所述系统包括系统平台、计算模块、文件输入输出模块和手动输入模块。本发明采用14美度实时对界面布局评价，并将界面布局设计定量化方法以软件系统的形式工具化。

Description

一种基于美度计算的界面辅助设计方法和系统

技术领域

本发明属于界面布局设计领域，特别涉及了一种基于美度计算的界面辅助设计方法和系统。

背景技术

随着时代的发展，以用户为中心的设计渐入人心。感性工学以工学的方法研究感性中的理性，将人们的主观感受进行量化。在感性工学中，美感设计、美度评价已被较多的研究者所关注，界面布局作为人机界面设计的一个重要方面，更是被大量研究者深入研究并产生了多种布局美度评价理论。

早期的研究很少采用数学方法以量化这些变量的交互效应与用户的审美判断之间的关联，如Tullis(1988b)为基于文本的屏幕设计提供了许多明确定义的定性指南。针对界面设计要素进行定量化分析，Ngo等人提出了13个布局设计要素实现对界面元素布局的美度意象量化，Bauerly和Yili Liu则针对平衡感、对称度以及界面组件数目对界面美感的影响提出了相应的计算模型，Chien-Yin Lai,Pai-HsunChen等人基于HSV色彩空间模型，对彩色界面的视觉平衡感、对称度对界面美感的影响进行了量化处理。在Ngo以及Bauerly等人的研究中虽然提出了各自相应的计算模型，但是没有形成具体的辅助设计方法和系统来帮助设计从业者进行界面设计。

发明内容

为了解决上述背景技术提出的技术问题，本发明提供一种基于美度计算的界面辅助设计方法和系统，实现界面设计的实时布局和美度评价。

为了实现上述技术目的，本发明的技术方案为：

一种基于美度计算的界面辅助设计方法，包括以下步骤：

(1)针对已有的界面图片或布局设计，通过绘制目标界面布局图形或手动输入基本布局参数，拾取目标界面布局设计要素，生成基本布局文件；

(2)根据步骤(1)生成的基本布局文件，对布局进行元素预处理，形成规范化的布局文件；

(3)根据步骤(2)形成的规范化的布局文件，获取与美度计算相关的布局参数；

(4)将步骤(3)获取的布局参数代入美度计算公式中，分别计算各项美度指标的量化取值，形成美度综合列表，输出该列表并保存布局文件；

(5)根据美度综合列表修改界面布局设计，同时实时更新美度综合列表，修改完成后输出美度综合列表并保存布局文件。

进一步地，在步骤(2)中，所述元素预处理包括界面元素空间定位、边界剪裁、去除重叠部分和规则化处理。

进一步地，所述界面元素空间定位为，将功能分区抽象为能够包含其内部元素的最小矩形，通过最小矩形的起始点x、y坐标、总宽度W、总高度H实现各界面元素在整体界面中的空间定位，其中，x正方向为沿界面自左向右的扫描方向，y正方向为沿界面自上向下的扫描方向；具体步骤如下：

(A)构建界面内的有效像素点集：遍历界面像素点，根据像素点色彩值确定目标像素点，记录目标像素点坐标，构成目标点集1；

(B)计算界面的外框信息：比较目标点集1内各点的x、y坐标的极小值x_min、y_min和极大值x_max、y_max，并将(x_min,y_min)定为界面框架原点，则界面外框信息(W_frame,H_frame)＝(x_max-x_min,y_max-y_min)，W_frame为界面宽度，H_frame为界面高度；

(C)获取各界面元素的目标点集：设当前点坐标p(x,y)，若x＝x_min或x＝x_max或y＝y_min或y＝y_max，则删除p(x,y)，从而删除界面外框信息，仅保留界面元素信息，得到目标点集2；

(D)计算各界面元素的角点位置信息：针对目标点集2，自点p(x_min+1,y_min+1)开始扫描，依次沿x正方向和y正方向逐点扫描，若当前点p(x,y)和其下点p(x,y+1)存在，而其左点p(x-1,y)和上点p(x,y-1)同时为空，则记录当前点为界面元素i的左上点若当前点的上点和右点p(x+1,y)同时为空，而其下点存在，则记录当前点为界面元素i的右上点若当前点的下点和右点同时为空，其左点存在，则记录当前点为界面元素i的右下点若当前点的下点和左点同时为空，右点存在，则记录当前点为界面元素i的左下点即为界面元素i的四个角点；

(E)计算界面元素i的位置信息：

(x_i,y_i,W_i,H_i)＝(x_imin-x_min,y_{i min}-y_min,x_{i max}-x_{i min},y_{i max}-y_{i min})

其中，x_i,y_i,W_i,H_i分别为元素i的起始点x、y坐标，宽度以及高度，x_{i min}、y_{i min}为元素i的坐标极小值，x_{i max}、y_{i max}为元素i的坐标极大值。

进一步地，所述规则化处理为，如果元素i为规则图形，则保留原图形作为布局元素；否则，将元素i统一处理成其最小外接矩形，即将元素i替代为中心不变，且宽、高为(W_i,H_i)＝(x_{i max}-x_{i min},y_{i max}-y_{i min})的矩形；其中心计算方法如下：

(a)定义横坐标求和参数SUM_x、纵坐标求和参数SUM_y以及区域面积参数Area；

(b)自该元素图形的点至点，依次沿x正方向和y正方向逐点扫描，若当前点p(x,y)不为空，则将x累加至SUM_x，y累加至SUM_y，同时Area自增1；否则，继续循环扫描；

(c)扫描完成之后，计算元素i的中心坐标：

(x_ic,y_ic)＝(SUM_x/Area,SUM_y/Area)。

进一步地，在步骤(3)中，所述美度计算相关的布局参数如下：

元素宽度W_i，元素高度H_i，界面宽度W_frame，界面高度H_frame，布局宽度W_layout，布局高度H_layout，元素总数n，尺寸数量n_size，对齐点数量n_ap，元素间行距数量n_spacing，元素面积a_i＝W_i×H_i，布局面积a_layout＝W_layout×H_layout，界面面积a_frame＝W_frame×H_frame，元素中心与画布中心的距离(x_center,y_center)为画布中心坐标，元素宽高比r_i＝W_i/H_i，布局宽高比r_layput＝W_layput/H_layput，界面宽高比r_frame＝W_frame/H_frame。

进一步地，在步骤(4)中，有14项美度指标，其计算公式如下：

D1、平衡度BM：

其中，BM_vertical和BM_horizontal分别对应于竖直和水平平衡度，且

L，R，T，B分别代表左、右、上、下；a_ij为元素i在j侧上的面积；n_j为在j侧的元素数；

D2、均衡度EM：

其中，|x_i-x_c|和|y_i-y_c|的最大值分别为W_frame/2和H_frame/2；

D3、对称度SYM：

其中，

X′_j、Y′_j、H′_j、B′_j、Θ′_j和R′_j分别为X_j、Y_j、H_j、B_j、Θ_j、R_j归一化后的值：

其中

UL,UR,LL,LR分别为坐标系的左上象限，右上象限，左下象限以及右下象限，x_icj、y_icj分别为位于j象限的元素i的中心坐标；

归一化值

D4、连续度SQM：

其中，{q_UL,q_UR,q_LL,q_LR}＝{4,3,2,1}，

w＝{w_UL,w_UR,w_LL,w_LR}，q_j为每个象限的权重值，j＝UL,UR,LL,LR；

D5、凝聚度CM：

其中，CM_fl是与布局和屏幕之间的比例关系相关的量， CM_lo是与元素和排版之间的比例关系相关的量，

D6、整体度UM：

其中，

D7、比例美感PM：

其中，PM_object为元素比例与形状最接近的比例之间的差异，PM_layout布局比例与形状最接近的比例之间的差异，

D8、简单度SMM：

其中，n_vap和n_hap分别为垂直和水平对齐点的数量；n为元素总数；

D9、密集度DM：

D10、规律度RM：

其中，RM_alignment是对齐点最少化的程度，RM_spacing是对齐点的一致间隔程度，

D11、经济性ECM：

D12、同质度HM：

其中，w是n个元素的排列，n_j是在j象限的元素数量，当n个元素均匀分别在各象限时，w取得最大值

D13、节奏度RHM：

其中，

X′_j，Y′_j和A′_j为X_j，Y_j，A_j的归一化值：

其中

n_j是在一个象限中的元素的总数；

归一化值

D14、优势度DOM：

其中，n_UL,n_UR,n_LL,n_LR分别为位于左上、右上、左下和右下象限的元素数。

进一步地，在步骤(5)中，修改界面布局设计并实时更新美度综合列表的方法如下：

(Ⅰ)建立选区，根据步骤(2)得到的的空间定位信息，通过判断选区的角点信息内包含的具体元素，分别将其选中变量赋值为TRUE，即表明该元素已处于被选中状态，记录选区与元素之间的相对位置信息，即两者左上点与之间矢量的坐标表示为(x_relative,y_relative)＝(x_selregion-x_i,y_selregion-y_i)；

(Ⅱ)移动选区，然后获取选区角点信息，即新的 根据步骤(Ⅰ)中记录的相对位置信息，保持元素原有空间定位信息中的宽度和高度，更新元素定位信息为(x_inew,y_inew,W_inew,H_inew)＝(x_{selregion-new}-x_relative,y_{selregion-new}-y_relative,W_i,H_i)，并将新的元素定位信息重新获取步骤(3)中所述布局参数；

(Ⅲ)根据步骤(Ⅱ)中获取的新布局参数重新计算美度指标，实时更新美度综合列表，更新完成后释放选中状态，将各元素选中变量值赋值为缺省值FALSE，并保存布局文件。

一种基于美度计算的界面辅助设计系统，包括：

系统平台，用于显示界面设计图像文件，选择图像中的设计元素，获取目标界面基本布局参数，将设计元素信息传递给计算模块，并将计算模块返回的计算结果展示给用户；

计算模块，用于界面布局设计元素预处理和美度公式计算，并返回美度计算结果给系统平台；

文件输入输出模块，用于导入现有界面设计图片和界面布局文件，或导出界面布局文件；

手动输入模块，用于手动输入布局位置以及尺寸信息，以便后续计算模块处理。

采用上述技术方案带来的有益效果：

本发明采用14美度实时进行界面布局评价，降低了设计从业者对专业人士的依赖程度，提高了界面设计水平，有效加速设计过程。同时，将界面布局设计定量化方法以软件系统的形式工具化，使用方便。

附图说明

图1是本发明的方法流程图；

图2是本发明的原型系统架构图；

图3是本发明中元素预处理过后的布局文件示意图；

图4是本发明系统整体功能示意图；

图5是本发明系统中计算模块功能示意图；

图6是本发明系统中文件输入输出模块功能示意图。

具体实施方式

以下将结合附图，对本发明的技术方案进行详细说明。

如图1、2所示，一种基于美度界面计算的辅助设计方法，包括以下步骤：步骤1、导入界面图片或布局设计，或新建画布，设置画布大小进行布局设计，然后进行目标界面布局设计元素拾取与绘制，对导入的界面文件进行布局设计元素框的绘制，或手动输入每个元素的具体参数(起始坐标及尺寸)，点击完成将数据输入。

步骤2、对布局进行元素预处理，包括边界裁剪，去除重叠部分、空间定位、规则化处理等，形成最终规范化的可供处理的布局文件。

由于美度计算公式中使用的参量与Windows中GUI不同，以及画布坐标与窗口坐标不重合及滚动条的使用使画布坐标发生移动等原因，需要在计算之前将布局元素参量调成为左上角横坐标、左上角纵坐标、元素宽和元素高的形式，并将这些坐标统一于画布坐标系中。由于设计上并不阻止用户绘制超出画布边界的元素框，但在计算过程中，超出画布区域的部分会使计算出错，故还须在计算之间对元素框进行裁剪。图3为元素预处理过后的布局文件示意图。

步骤3、根据形成的规范化的布局文件，获取与美度计算相关的布局参数。

步骤4、根据美度计算公式计算出14项美度指标值，形成美度综合列表，输出美度计算结果并保存布局。

步骤5、根据美度综合列表修改界面布局设计，可通过选中界面元素进行自由拖动改变界面布局设计；同时实时更新美度综合列表，修改完成后输出美度综合列表并保存布局文件。

本发明还提出一种基于美度计算的辅助界面设计系统，如图4，5，6所示，包括：

系统平台：显示界面设计图像文件，选择图像中的设计元素，将设计元素信息传递给计算模块和将计算模块返回的计算结果展示给用户。

计算模块：设计元素预处理，使用美度公式计算处理后的数据，返回美度计算结果给系统平台。

文件输入输出模块：将系统外部的数据导入至系统，以及将系统内的数据导出。可导入现有界面设计图片和界面布局文件，也可导出界面布局文件。

手动输入模块：手动输入布局位置以及尺寸等信息，以提供更加快速精确的布局生成，以便后续计算模块处理。

出于窗口应用程序的考虑，选用Windows平台作为该系统的开发平台。Windows是个人电脑(PC)的主流操作系统，拥有庞大的用户群和非常丰富的软件、硬件支持。在Windows操作界面统一的风格使得用户能较为适应新软件的界面。此外Windows系统对中文有较好支持。在技术层面上，windows提供了大量的API(应用程序接口)和风格统一的控件，便于开发人员开发Windows平台上的应用软件。

开发语言及开发工具上分别选择C语言和Visual Studio 2010。在语言的原则上，C语言没有C++繁琐复杂的语言结构，同时又能较为容易的开发中小型程序。相对与其他程序语言而言，C语言较易掌握，便于日后非专业开发人员继续开发。Visual Studio 2010是微软公司开发的一款IDE(集成开发环境)，可以用来创建Windows平台下的Windows应用程序和网络应用程序，其可以方便的开发C/C++工程，其提供的联想、提示功能可以节省开发时间，Visual Studio版使用免费许可，故而不存在盗版问题，同时其核心功能没有缩水。

实施例仅为说明本发明的技术思想，不能以此限定本发明的保护范围，凡是按照本发明提出的技术思想，在技术方案基础上所做的任何改动，均落入本发明保护范围之内。

Claims (8)

1.一种基于美度计算的界面辅助设计方法，其特征在于，包括以下步骤：

(1)针对已有的界面图片或布局设计，通过绘制目标界面布局图形或手动输入基本布局参数，拾取目标界面布局设计要素，生成基本布局文件；

(2)根据步骤(1)生成的基本布局文件，对布局进行元素预处理，形成规范化的布局文件；

(3)根据步骤(2)形成的规范化的布局文件，获取与美度计算相关的布局参数；

(4)将步骤(3)获取的布局参数代入美度计算公式中，分别计算各项美度指标的量化取值，形成美度综合列表，输出该列表并可保存布局文件；

(5)根据美度综合列表修改界面布局设计，同时实时更新美度综合列表，修改完成后输出美度综合列表并保存布局文件。

2.根据权利要求1所述基于美度计算的界面辅助设计方法，其特征在于，在步骤(2)中，所述元素预处理包括界面元素空间定位、边界剪裁、去除重叠部分和规则化处理。

3.根据权利要求3所述基于美度计算的界面辅助设计方法，其特征在于，所述界面元素空间定位为，将功能分区抽象为能够包含其内部元素的最小矩形，通过最小矩形的起始点x、y坐标、总宽度W、总高度H实现各界面元素在整体界面中的空间定位，其中，x正方向为沿界面自左向右的扫描方向，y正方向为沿界面自上向下的扫描方向；具体步骤如下：

(A)构建界面内有效像素点集：遍历界面像素点，根据像素点色彩值确定目标像素点，记录目标像素点坐标，构成目标点集1；

(B)计算界面外框信息：比较目标点集1内各点的x、y坐标的极小值x_min、y_min和极大值x_max、y_max，并将(x_min,y_min)定为界面框架原点，则界面外框信息(W_frame,H_frame)＝(x_max-x_min,y_max-y_min)，W_frame为界面宽度，H_frame为界面高度；

(C)获取各界面元素的目标点集：设当前点坐标p(x,y)，若x＝x_min或x＝x_max或y＝y_min或y＝y_max，则删除p(x,y)，从而删除界面外框信息，仅保留界面元素信息，得到目标点集2；

(D)计算各界面元素的角点位置信息：针对目标点集2，自点p(x_min+1,y_min+1)开始扫描，依次沿x正方向和y正方向逐点扫描，若当前点p(x,y)和其下点p(x,y+1)存在，而其左点p(x-1,y)和上点p(x,y-1)同时为空，则记录当前点为界面元素i的左上点若当前点的上点和右点p(x+1,y)同时为空，而其下点存在，则记录当前点为界面元素i的右上点若当前点的下点和右点同时为空，其左点存在，则记录当前点为界面元素i的右下点若当前点的下点和左点同时为空，右点存在，则记录当前点为界面元素i的左下点即为界面元素i的四个角点；

(E)计算界面元素i的位置信息：

(x_i,y_i,W_i,H_i)＝(x_imin-x_min,y_imin-y_min,x_imax-x_imin,y_imax-y_imin)

其中，x_i,y_i,W_i,H_i分别为元素i的起始点x、y坐标，宽度以及高度，x_imin、y_imin为元素i的坐标极小值，x_imax、y_imax为元素i的坐标极大值。

4.根据权利要求3所述基于美度计算的界面辅助设计方法，其特征在于，所述规则化处理为，如果元素i为规则图形，则保留原图形作为布局元素；否则，将元素i统一处理成其最小外接矩形，即将元素i替代为中心不变，且宽、高为(W_i,H_i)＝(x_imax-x_imin,y_imax-y_imin)的矩形；其中心计算方法如下：

(a)定义横坐标求和参数SUM_x、纵坐标求和参数SUM_y以及区域面积参数Area；

(b)自该元素图形的点至点，依次沿x正方向和y正方向逐点扫描，若当前点p(x,y)不为空，则将x累加至SUM_x，y累加至SUM_y，同时Area自增1；否则，继续循环扫描；

(c)扫描完成之后，计算元素i的中心坐标：

(x_ic,y_ic)＝(SUM_x/Area,SUM_y/Area)。

5.根据权利要求4所述基于美度计算的界面辅助设计方法，其特征在于，在步骤(3)中，所述美度计算相关的布局参数如下：

元素宽度W_i，元素高度H_i，界面宽度W_frame，界面高度H_frame，布局宽度W_layout，布局高度H_layout，元素总数n，尺寸数量n_size，对齐点数量n_ap，元素间行距数量n_spaci_ng，元素面积a_i＝W_i×H_i，布局面积a_layout＝W_layout×H_layout，界面面积a_frame＝W_frame×H_frame，元素中心与画布中心的距离(x_center,y_center)为画布中心坐标，元素宽高比r_i＝W_i/H_i，布局宽高比r_layput＝W_layput/H_layput，界面宽高比r_frame＝W_frame/H_frame。

6.根据权利要求5所述基于美度计算的界面辅助设计方法，其特征在于，在步骤(4)中，有14项美度指标，其计算公式如下：

D1、平衡度BM：

其中，BM_vertical和BM_horizontal分别对应于竖直和水平平衡度，且

j＝L,R,T,B，L，R，T，B分别代表左、右、上、下；a_ij为元素i在j侧上的面积；n_j为在j侧的元素数；

D2、均衡度EM：

其中，|x_i-x_c|和|y_i-yc|的最大值分别为W_frame/2和H_frame/2；

D3、对称度SYM：

其中，

X_j′、Y_j′、H_j′、B_j′、Θ_j′和R_j′分别为X_j、Y_j、H_j、B_j、Θ_j、R_j归一化后的值：

其中

UL,UR,LL,LR分别为坐标系的左上象限，右上象限，左下象限以及右下象限，x_icj、y_icj分别为位于j象限的元素i的中心坐标；

归一化值O＝X,Y,H,W,Θ,R；

D4、连续度SQM：

其中，{q_UL,q_UR,q_LL,q_LR}＝{4,3,2,1}，

w＝{w_UL,w_UR,w_LL,w_LR}，q_j为每个象限的权重值，j＝UL,UR,LL,LR；

D5、凝聚度CM：

其中，CM_fl是与布局和屏幕之间的比例关系相关的量， CM_lo是与元素和排版之间的比例关系相关的量，

D6、整体度UM：

其中，

D7、比例美感PM：

其中，PM_object为元素比例与形状最接近的比例之间的差异，

PM_layout布局比例与形状最接近的比例之间的差异，

D8、简单度SMM：

其中，n_vap和n_hap分别为垂直和水平对齐点的数量；n为元素总数；

D9、密集度DM：

D10、规律度RM：

其中，RM_alignment是对齐点最少化的程度，其他，RM_spacing是对齐点的一致间隔程度，

D11、经济性ECM：

D12、同质度HM：

其中，w是n个元素的排列，n_j是在j象限的元素数量，当n个元素均匀分别在各象限时，w取得最大值

D13、节奏度RHM：

其中，

X_j′，Y_j′和A_j′为X_j，Y_j，A_j的归一化值：

其中

n_j是在一个象限中的元素的总数；

归一化值

D14、优势度DOM：

其中，n_UL,n_UR,n_LL,n_LR分别为位于左上、右上、左下和右下象限的元素数。

7.根据权利要求3-6中任意一项所述基于美度计算的界面辅助设计方法，其特征在于，在步骤(5)中，修改界面布局设计并实时更新美度综合列表的方法如下：

(Ⅰ)建立选区，根据步骤(2)得到的的空间定位信息，通过判断选区的角点信息内包含的具体元素，分别将其选中变量赋值为TRUE，即表明该元素已处于被选中状态，记录选区与元素之间的相对位置信息，即两者左上点与之间矢量的坐标表示为(x_relative,y_relative)＝(x_selregion-x_i,y_selregion-y_i)；

(Ⅱ)移动选区，然后获取选区角点信息，即新的 根据步骤(Ⅰ)中记录的相对位置信息，保持元素原有空间定位信息中的宽度和高度，更新元素定位信息为(x_inew,y_inew,W_inew,H_inew)＝(x_{selregion-new}-x_relative,y_{selregion-new}-y_relative,W_i,H_i)，并将新的元素定位信息重新获取步骤(3)中所述布局参数；

(Ⅲ)根据步骤(Ⅱ)中获取的新布局参数重新计算美度指标，实时更新美度综合列表，更新完成后释放选中状态，将各元素选中变量值赋值为缺省值FALSE，并保存布局文件。

8.一种基于美度计算的界面辅助设计系统，其特征在于，包括：

系统平台，用于显示界面设计图像文件，选择图像中的设计元素，获取目标界面基本布局参数，将设计元素信息传递给计算模块，并将计算模块返回的计算结果展示给用户；

计算模块，用于界面布局设计元素预处理和美度公式计算，并返回美度计算结果给系统平台；

文件输入输出模块，用于导入现有界面设计图片和界面布局文件，或导出界面布局文件；

手动输入模块，用于手动输入布局位置以及尺寸信息，以便后续计算模块处理。