基于信息图形化的网页界面视觉均衡优化仿真

李馥颖,蒋 强

(1. 沈阳理工大学,辽宁 沈阳 110159;2. 沈阳理工大学自动化与电气工程学院,辽宁 沈阳 110159)

1 引言

在网络快速发展的时代,人类的生活方式发生了改变,网上冲浪、聊天、购物已经成为生活和工作中必不可少的一部分。网页界面设计不仅影响网站形象,也关系到用户访问率。因此,界面视觉优化受到相关领域的高度重视。但从整体设计发展情况来看,依然存在一些弊端,例如内容单一、重点内容不突出等。为此,相关学者也针对此问题展开如下研究。文献[1]利用视觉注意机制实现网页的布局优化,结合视觉注意机制,选取色彩、间距等多个影响因素,将视觉注意力最高作为目标,建立目标函数,使用遗传算法求解目标函数,根据求解结果完成界面优化设计。文献[2]研究一种基于用户触点的界面优化方法,将用户触点作为研究核心,合理分析界面中所有触点模块,以提高用户满意度作为目标,设置界面可行性优化方案。立足用户触点,提高界面设计的个性化与人性化。

在现有研究的基础上,本文提出一种基于信息图形化的网页界面视觉优化方法。图形和文字相比优势更加明显,能够将文本数据形象、直观的表示出来,更加吸引人们的注意。将信息图形化应用到网络界面设计中,可以确保界面高度一致,满足用户个性化需求,促进用户和页面的互动。

2 信息图形化设计准则

2.1 网页界面中信息传达过程

1)信息传达

针对网页界面设计而言,信息传达就是设计者将文字信息变换成视觉语言展示到网页中[3-5]。用户通过终端登录网页,可以获取感兴趣的信息。在此过程中,信息传达方式如图1所示。

图1 网页界面设计的信息传达方式

由图1可知,信息传达过程是将初始数据利用视觉化手段变换为视觉信息,用户通过网页界面获取感兴趣的信息。从上述过程看出,界面上的视觉信息尤为关键,是用户获得信息的唯一形式,决定了用户获取信息的速率,这正是进行网页界面优化的基本原因。

2)信息接收

信息接收过程就是对网页信息翻译的过程[6],因网页的自身交互特征明显,所以在信息传达过程中不是让用户被动的接收信息,而是使用户主动获取对自己有用的信息。如果某个网页中的信息吸引了用户,则更加容易被记住。

在信息接收过程中,需要分析用户对信息处理的流程,如图2所示。

图2 用户信息接收过程示意图

分析图2可知,感觉器官包括很多种,但在网页界面中视觉刺激是最重要的,因此在界面优化过程中应格外注重用户的视觉效果。

2.2 信息图形化设计准则

在界面优化过程中,按照信息图形化设计准则进行优化,可以更好地提高信息传递的准确性与全面性,带给用户全新的体验。设计准则通常包括如下几点:

1)人性化原则[7]:信息图形化的最终目的是传递信息,只有用户通过图形获取准确的信息,才算达到目的。所以,设计过程中,必须将以人为本作为基础,例如需要分析用户的认知心理与操作习惯等。

2)简洁原则:优化过程中,应确保界面结构简单,摒弃复杂的装饰,将实用性放在首位。但简单并非无装饰,是在精准传递信息的基础上尽可能减少装饰元素。

3)创意化原则:有创意性的图形能产生更好的表达效果,在界面设计中,创意图形是在信息传达的基础上提高用户注意力。

4)普遍性原则[8]:在日常生活中,很多领域都会进行图形设计,因此设计者需要探究大量信息,从中找出共性,进而设计出用户易懂、易于接受的图形,尽量避免地域差异,为信息传递提供便利。

5)准确性原则:优化过程中,待表达的信息具有零散性特征,且复杂度较高,为保证信息传达的精准性,需要对其进一步归纳和总结,明确区分主、次信息,突出重点内容。

3 网页界面视觉优化

基于网页界面中信息传达过程与信息图形化设计准则,展开网页界面视觉优化研究。通过界面数据聚类处理,明确信息主次,提高界面简洁度;通过界面图像平滑处理,提高对比度;通过界面色彩增强,提高界面亮度的舒适性。

3.1 信息预处理

数据信息在图形化之前种类较多,且较为分散,为提高信息传达的准确性,需要对待图形化的信息进行处理。本文利用大数据聚类算法将有相同特征的信息分类在一起,且明确主次信息[9]。

采用大数据聚类算法处理界面信息时,应构建数据分布时域函数[10]:

(1)

使用交叉编译法描述聚类属性的特征分布情况:

(2)

式中,z表示固定常数,n表示界面交互参数。

为确定聚类中心,通过分布类间离散度完成特征分类[11]:

(3)

使用数据融合输出算法,计算界面数据流之间存在聚类中心向量bi与bj的间距[12]:

(4)

根据上述距离,得到最终的界面信息聚类结果为:

(5)

式中,e表示界面数据的维数总量,μif表示聚类空间分布维数。

经过上述聚类,将图形化之前的界面数据进行预处理,确保相同特征的数据聚集在一起。这样不但能够提高界面的简洁度,还能提高信息传达的精准性。

3.2 图形界面平滑处理

要想给用户带来良好的浏览体验,必须保证界面的清晰度,如果界面中的图形模糊,用户的观感将大打折扣。为此,本文分别从照度与反射两个分量对界面图形作平滑处理。

由于网页图像具有邻近性,利用双边滤波算法计算图像边缘特征[13]:

(6)

式中,W表示边缘特征值,K表示滤波系数,σ表示环绕参数,a表示界面亮度差,x与y表示单位距离。

利用下述公式完成图像卷积计算,获取照度分量:

(7)

式中,L(x,y)表示真实距离x与y的照度分量,ξi′表示高斯函数,可以对各类特征赋予权重系数。

网页图像大多为彩色图像,所以为增强用户的视觉效果,通过建立彩色双边滤波来计算图像综合照度,使用的函数公式如下:

(8)

根据界面的亮度特点,设计下述对比度调整函数[14]:

(9)

式中,β表示对比度调整系数,CDF表示一种矩阵计算方式。

则图像反射分量计算公式如下:

(10)

式中,r表示反射分量,t表示尺度参数。

3.3 界面彩色增强

(11)

式中,I表示色彩空间,U表示增益系数,ωN表示N个图像的色彩权重,Fj′表示颜色偏移量,是一个固定常数。

将色彩空间当作某个分量,结合界面入射光和反光角度α获取亮度与饱和度存在的关系,得到RGB色彩变换的增强函数:

X(RGB)=I(x,t)+α

(12)

式中,X(RGB)表示增强函数,如果α的值不变,可结合I的变化情况得到增强函数的变化趋势。

网页界面图像的亮度会存在一定波动,要想获取图像的最大亮度值,需要进行以下计算

(13)

式中,Fmax表示图像最大亮度值,[χR(b,c)]、[χG(b,c)]和[χB(b,c)]表示图像在RGB空间中像素点的像素分量。

运算Fmax中高于灰度阈值的色彩数量,公式如下

(14)

上述操作不仅增强了界面色彩,还能将界面亮度调整到合适的阈值,改善用户的浏览体验。

在优化过程中,除了注重色彩搭配和亮度以外,还要关注页面的布局是否规范。设计师需要明确界面主题,将关键信息放在醒目位置,达到良好的视觉传达效果。主要从如下几方面出发:

1)导航栏必须简洁醒目;

2)遵从用户浏览界面时的视觉习惯;

3)最大程度减少用户视觉疲劳;

4)分清界面的主从功能,合理设计浏览过程。

4 仿真过程与结果分析

为分析所提方法的视觉优化效果,需要依托视觉展示系统。因此,在此次仿真中,设置一个具有超强采集性能和兼容性能的视觉展示系统。该系统的整体结构如图3所示。

图3 视觉展示系统结构示意图

为了给各类方法提供良好的展示平台,需要保证系统展示界面清晰,因此对系统如下硬件部分进行重点处理:

信息采集器:主要作用是收集外部信号,其芯片型号为TUD232,此芯片可以实现视频、文字等数据的同步采集,性能全面。

处理器:设备型号为AARM10,针对采集的数据做进一步处理,选择合理的显示模板,显示各类信息,通过处理器来解决系统运行效率低的问题。

显示器:综合考虑分辨率、清晰度等因素,选择液晶显示器。

1)负载测试

负载是体现网页界面是否会出现卡顿的重要指标,当界面弹出时,如果系统负载上升较快,则容易出现卡顿现象。为此,利用下述公式分别计算所提方法、视觉注意机制、用户触点算法优化后的界面负载情况,测试结果如图4所示。

图4 不同优化方法负载测试结果图

(15)

式中,G(W∩H)表示交叉分布概率函数,G(W)和G(H)分别表示特征量和交互数据的概率密度函数。

依据式(15)计算不同方法的负载情况,结果如图4所示。

由图4可知,所提方法从界面运行开始到结束,系统的负载基本没有出现变化,且在三种方法中始终保持负载最低;视觉注意机制的负载最高,当测试时间在15s时,出现下降趋势,但不明显;用户触点算法在界面运行初期出现较大波动,说明界面不够稳定,容易出现卡顿问题。说明所提方法能够使系统运行负载最小,是因为该方法使用了大数据处理技术,通过数据聚类将类似的信息规整到一起,不仅能够提高界面的简洁度,还能减少界面运行时的负载。

2)界面清晰度测试

将灰度值作为网络界面清晰度的评价指标,上述三种方法的灰度值如图5所示。

图5 不同方法网页界面灰度值分布示意图

分析图5可知,所提方法的灰度值分布十分均匀,而其它两种方法不同灰度级上的灰度值分布差异较大。这表明信息图形化方法能提高界面的清晰度,不会出现图形模糊现象,改善了用户的视觉体验。这是因为所提方法使用图像平滑处理技术,并通过色彩增强处理来提高对比度,进而改善页面画质。

3)界面整体效果

为突出本文方法的优化效果,将优化前、后的界面进行对比,如图6和图7所示。

图6 优化前网络界面视觉图

图7 优化后网络界面视觉图

从图6和图7中可以看出,优化前的界面较为杂乱,各图标形式没有统一,图标不够简洁,甚至有些图标难以直观反映其表示的含义;而优化后的图标形式规整、简洁,整个界面复杂度很低,便于用户直观的获取图标所表示的含义,更能吸引用户。

5 结论

将复杂的文字变换为可视化图形,能够提高用户获取信息的速度,也是信息图形化价值的展现。为此,本文利用信息图形化方法实现网页界面的视觉优化。分析信息图形化设计原则,探究信息传递过程,利用大数据处理方法将信息聚类,减少冗余,再通过图像处理技术提高界面清晰度。通过此次优化,信息图形化将以新的方式呈现,为用户带来更好的体验,所提方法必将会成为信息传播的一条重要捷径。