1、第 38 卷 第 20 期 包 装 工 程 2017 年 10 月 PACKAGING ENGINEERING 143 收稿日期：2017-06-31 作者简介： 李 奋强（1958） ，男，甘肃人，兰州理工大学教授，主要研究方向为产品系统设计、设计学和设计系统工程学。 PC 端与移动端界面布局相关性评价方法研究 李奋强，王博鹏 （兰州理工大学，兰州 730050） 摘要： 目的 分析与评价同款软件在 PC 端界面与移动端界面布局的相关性。 方法 分析软件产品的界面 设计结构特征及布局描述方法，确定描述界面布局的关键指标，对这些指标进行权重系数的分析计算， 并将指标量化，通过相关度分析将两个终
2、端界面量化后的各指标做相关系数的计算。结论 结合每个指 标的权重值，得出两个终端界面布局的相关程度。 关键词：软件产品；界面布局；相关性；相关度分析 中图分类号：TB472 文献标识码：A 文章编号：1001-3563(2017)20-0143-07 Evaluation Methods of the Relevance between PC and Mobile Terminal Layout LI Fen-qiang, WANG Bo-peng (Lanzhou University of Technology, Lanzhou 730050, China) ABSTRACT: It ai
3、ms to analyze and evaluate the relevance of the same software on the PC side interface and the layout of the mobile terminal. It analyzes the interface design structure and layout description method of software product, deter- mines the key index to describe the interface layout, analyzes and calcul
4、ates the weight coefficient of index calculation, and makes quantitative indicators, by correlation analysis, the indexes of two terminal interfaces are quantized, and the correlation coefficients are calculated. Combined with the weight value of each index, the correlation degree of the two termina
5、l interface layout is obtained. KEY WORDS: software product; interface layout; relevance; correlation degree analysis PC 端界面与移动端界面布局设计过程中，有些 软件产品在两者的相关性上控制得当， 用户会体验到 两个界面有着清晰的连贯性， 又不失各自特色； 有些 则没有分析好两个界面的关系，使两者相关性不协 调，导致用户体验不连贯、产品识别不清晰等问题， 界面评价的目的是描述界面的可用程度 1 ，因此界面 布局相关性评价研究就成为解决该问题的关键所在， 本文对此提出一种有效的
6、量化评价方法及流程， 以便 相关工作的开展。 1 界面布局相关性 相关性指事物之间相互关联的特性。 同款软件产 品在终端设备上分为 PC 端与移动端两种，移动端在 目标用户、信息架构、核心体验等方面都继承 PC 端 的风格。以网易云音乐为例，PC 端可满足用户管理 本地音乐， 同步其他设备音乐等需求； 移动端操作简 练， 运用有限界面实现相应功能。 基于不同设备决定 了两个界面布局差异的必然性，但保持两者相关性， 控制其相关程度，是实现产品识别的关键。 2 界面布局评价指标确立 2.1 代表性样本界面确立 设计调查问卷，列出 10 余款目前市面上的音乐 软件产品， 让用户及 UI 设计师共 2
7、0 人， 投票选出其 在感官上，认为两个端面布局相关性最佳的 3 款产 品，统计分析结果见表 1。 以票数最高的网易云音乐为例， 正常使用两个终 端上的 APP 时，屏幕上只显示整体界面的一部分， 不能显示完整界面，因此先将断开的样本界面整合， 恢复界面原貌， 并对整合后的界面按平均值法做灰度 144 包 装 工 程 2017 年 10 月 表 1 各音乐软件产品及其票数 Tab.1 Music software products and their votes 产品 名称 票 数 产品名称 票 数 产品名称 票 数 产品名称 票 数 苹果 音乐 6 虾米音乐 5 天天动听 2 豆瓣音乐 3
8、酷狗 音乐 5 咪咕音乐 2 酷我音乐 4 百度音乐 7 多米 音乐 3 QQ 音乐 7 网易云音乐 12 SoundCloud 4 处理，排除色彩干扰，得到的两个样本界面，见图 1 （图片由笔者绘制） 。 2.2 指标筛选 由 7 位 UI 设计师，根据 10 款产品共 20 个样本 界面的布局特征进行分析。参考 Ngo 提出的布局指 标 2 ，列出一系列评价指标由专家咨询法 3 征询 UI 设计师的意见， 然后进行统计处理并反馈结果， 经过 几轮咨询各位设计师意见趋于集中， 最后一次讨论结 果包含 25 个指标。以这些指标建立指标集发放给 22 名设计师，让其投票选出最适合描述界面布局的
9、12 个代表性指标，结果见表 2。 根据票数最多的 12 个指标设计相似度调查问卷 并发放给 20 余名设计师，按照相似程度 0,0.2,0.4, 0.6,0.8,1 一共 5 个标准进行打分，得到多个相似系数 矩阵 4 ，将得出的数据做均值处理并补全矩阵得到结 果，见表 3。 将得到的结果导入 SPSS 进行 K-Means 聚类分析 5 ， 结果见表 4。 图 1 PC 端与移动端样本界面 Fig.1 The sample interface of PC terminal and mobile terminal 第 38 卷 第 20 期 李奋强等：PC 端与移动端界面布局相关性评价方法研
10、究 145 表 2 描述界面布局的 25 个指标及其票数 Tab.2 25 indicators of description of the interface layout and their votes 指标 票数 指标 票数 指标 票数 指标 票数 指标 票数 居中度 7 匹配度 6 对称度 11 体量度 8 呼应度 9 次序度 11 经济度 12 易用度 9 整体度 17 密集度 11 连续度 8 优势度 12 合并度 4 比例度 18 清晰度 8 简洁度 16 均衡度 10 平衡度 12 引导度 7 协调度 22 规律度 10 节奏度 12 轻松度 5 凝聚度 12 紧凑度 7 表
11、3 指标相似度调查结果 Tab.3 Survey results of index similarity 整体度 简洁度 优势度 节奏度 经济度 比例度 密集度 对称度 协调度 凝聚度 次序度 平衡度 整体度 1 0.161 54 0.776 92 0.261 54 0.153 85 0.223 08 0.076 93 0.223 08 0.107 69 0.176 93 0.815 38 0.061 54 简洁度 0.161 54 1 0.223 08 0.115 39 0.299 99 0.123 08 0.792 31 0.176 93 0.046 15 0.792 31 0.184 6
12、2 0.123 08 优势度 0.776 92 0.223 08 1 0.192 31 0.084 61 0.215 39 0.092 31 0.176 93 0.061 54 0.076 92 0.846 15 0.223 08 节奏度 0.261 54 0.115 39 0.192 31 1 0.899 99 0.838 46 0.184 62 0.115 39 0.230 77 0.046 15 0.100 01 0.238 46 经济度 0.153 85 0.299 99 0.084 61 0.899 99 1 0.776 92 0.069 23 0.130 77 0.069 23 0
13、.076 92 0.230 77 0.084 61 比例度 0.223 08 0.123 08 0.215 39 0.838 46 0.776 92 1 0.123 08 0.223 08 0.215 39 0.046 15 0.115 39 0.199 99 密集度 0.076 93 0.792 31 0.092 31 0.184 62 0.069 23 0.123 08 1 0.099 99 0.084 61 0.853 84 0.084 61 0.123 08 对称度 0.223 08 0.176 93 0.176 93 0.115 39 0.130 77 0.223 08 0.099
14、99 1 0.907 69 0.046 15 0.153 85 0.907 69 协调度 0.107 69 0.046 15 0.061 54 0.230 77 0.069 23 0.215 39 0.084 61 0.907 69 1 0.038 46 0.207 69 0.838 46 凝聚度 0.176 93 0.792 31 0.076 92 0.046 15 0.076 92 0.046 15 0.853 84 0.046 15 0.038 46 1 0.076 92 0.084 62 次序度 0.815 38 0.184 62 0.846 15 0.100 01 0.230 77
15、0.115 39 0.084 61 0.153 85 0.207 69 0.076 92 1 0.176 92 平衡度 0.061 54 0.123 08 0.223 08 0.238 46 0.084 61 0.199 99 0.123 08 0.907 69 0.838 46 0.084 62 0.176 92 1 表 4 K-Means 聚类分析结果 Tab.4 The results of cluster analysis of K-Means 序号 布局指标 聚类（5） 距离 序号 布局指标 聚类（5） 距离 1 整体度 3 0.237 7 密集度 1 0.196 2 简洁度 1 0
16、.279 8 对称度 2 0.159 3 优势度 3 0.206 9 协调度 2 0.177 4 节奏度 4 0.147 10 凝聚度 1 0.207 5 经济度 5 0.000 11 次序度 3 0.207 6 比例度 4 0.147 12 平衡度 2 0.165 由此确定描述界面布局的 5 个代表性评价指标， 分别为简洁度（D S ） 、协调度（D C ） 、整体度（D M ） 、 比例度（D P ）和经济度（D E ） 。 3 界面布局评价指标权重分析 运用相对比较赋权法计算指标权重系数。 将评价 指标 x j （j=1，2，3，4，5）按行和列排开，再根据 三级比例标度对任意两指标的相
17、对重要关系进行分 析 6 ，并将评分值记入表中。 三级比例标度评分的分值为 q ij ， 则标度值及其含 义如下： 1 05 0 i i i ij j j j xx xx xx q. 当 比 重要时 当 与 同样重要 时 当没 有重 要 时(1) 评分构成的矩阵Q=(q ij ) nn ，q n =0.5，q ij +q ji =1。则 指标 x i 的权重系数为： n i n j ij n j ij i q q w 11 1(2) 通过公式(1)得到调查数据，确定每份调查结果146 包 装 工 程 2017 年 10 月 的评分矩阵Q 并结合公式(2)，计算出每份问卷 5 个 指标的权重系数
18、 w i （0w i 1） 。根 据 20 名设计师所填 问卷得到的各指标权重系数， 及均值化处理得到的最 终权重系数结果，见表 5。 表 5 权重系数结果 Tab.5 Results of weight coefficient 序号 简洁度 w S协调度 w C整体度 w M比例度 w P经济度 w E问卷 1 0.24 0.24 0.24 0.08 0.2 问卷 2 0.04 0.28 0.24 0.24 0.2 问卷 3 0.12 0.36 0.28 0.2 0.04 问卷 4 0.04 0.32 0.16 0.28 0.2 问卷 5 0.08 0.36 0.16 0.2 0.2 问卷
19、6 0.2 0.12 0.32 0.2 0.16 问卷 7 0.24 0.2 0.32 0.2 0.04 问卷 8 0.28 0.2 0.36 0.12 0.04 问卷 9 0.12 0.36 0.2 0.12 0.2 问卷 10 0.28 0.2 0.36 0.12 0.04 问卷 11 0.16 0.32 0.16 0.32 0.04 问卷 12 0.2 0.12 0.36 0.28 0.04 问卷 13 0.08 0.32 0.12 0.32 0.16 问卷 14 0.08 0.32 0.32 0.2 0.08 问卷 15 0.08 0.28 0.2 0.36 0.08 问卷 16 0.
20、2 0.32 0.12 0.32 0.04 问卷 17 0.32 0.16 0.04 0.16 0.32 问卷 18 0.16 0.32 0.04 0.32 0.16 问卷 19 0.12 0.2 0.28 0.36 0.04 问卷 20 0.12 0.28 0.28 0.28 0.04 最终权重 0.158 0.264 0.228 0.234 0.116 4 相关度分析方法及实施 4.1 相关度分析及相关系数 相关度分析是处理变量间不确定关系的一种统 计学方法 7 ，其本质即计算相关系数（0 1） ，是 描述两组或多组变量相关性的概念。 相关系数的绝对 值越大，表明变量间的相关程度越高，绝对
21、值越小， 表明相关程度越低。 这里的相关系数又称相关度， 即 相关性定量分析的结果。 假设存在随机变量集 ， ，其中 =x 1 ，x 2 ，.， x i ； =x 1 ，x 2 ，.，x i 。i 为变量的个数，则变量 集 ， 中每个元素的相关系数为： iiii i iiii x xxx x xxx ， ，(3)若研究的变量集 ， 中各元素对整个变量集的 贡献不同，即重要程度不同，这时变量集 ， 的相 关系数为： 11 22 33 ii . www w (4) 4.2 指标量化 简洁度 D S 。通过计算界面元素的对齐程度得到。 n upright 为垂直方向对齐点的数量， n across
22、表示水平方向 对齐点的数量，n 是界面元素总数。 upright across 1( ) 4 S nn D n (5) 协调度 D C 。指界面元素中心和整体界面中心间 的差异。 a i 是界面元素的面积； b interface 和 h interface 是整 体界面的宽和高； （x i ，y i ）表示界面元素 i 的坐标， （x 0 ，y 0 ）表示界面中心的坐标 8 。 00 interface interface 22 1 2 nn ii ii ii nn ii ii C axx ayy baha D (6) 整体度 D M 。通过分析元素布局与界面框架之间 的关系得到。 a di
23、stribution 表示界面元素布局面积， a interface 表示整体界面的面积。 distribution interface distribution interface interface distribution interface distribution M u ,u u u D u ,u u u (7)第 38 卷 第 20 期 李奋强等：PC 端与移动端界面布局相关性评价方法研究 147 distribution distribution frame distribution interface u, u n i i a a aa (8)比例度 D P 。指界面元素和布
24、局间的比例与常用 美度比例的相近程度。 P element 是界面元素比例间的差 异，P distribution 是布局比例间的差异，t j 为 5 种常用比 例，b i ，h i 和 b distribution ，h distribution 分别是界面元素 i 和布局的宽高 9 。 element distribution 2 P PP D element distribution min 1 1 0.5 n ji i tt PP n ，(9) min 1 0.5 j layout tt (10) distribution distribution distribution ,1 1
25、, 11 ,1 1 ii i ii i i i rr r r h trt rr b rr ， ， ， distribution distribution distribution h r b (11)经济度 D E 。指运用尽量少的界面元素传递尽可 能多的信息的程度。 通过计算界面元素尺寸的一致性 得到， n d 为宽高两项数据有任意一项不同的界面元素 的数量。 1 d E n D n (12) 4.3 相关度分析实施 运用相关度分析，对网易云音乐 PC 端与移动端 的界面布局进行相关系数计算。 4.3.1 抽象表征及各指标量化 根据界面中的不同功能区域，将网易云音乐的 PC 端界面分为 17 个部分，移动端界面分为 14 个部 分。 将各分区抽象为能够包含其内部元素的最小矩形 并编号，建立坐标系，以界面左上角为原点，X 正方 向为沿界面自左向右，Y 正方向为自上向下 10 。两 个 终端界面的抽象表征见图 2（图片由笔者绘制） 。 PC
个人主页
