基于虚拟现实的多彩UI界面分块布局方法_张鑫.pdf

收稿日期:20201210修回日期:20210331第 40 卷第 2 期计算机仿真2023 年 2 月文章编号:10069348(2023)02028804基于虚拟现实的多彩 UI 界面分块布局方法张鑫，安见才让(青海民族大学计算机学院，青海 西宁 810007)摘要:由于传统方法忽略了用户视觉与 UI 界面之间的关系，导致分块过密、色彩不够显著。因此研究基于虚拟现实的多彩UI 界面分块布局方法。预先明确用户视觉与 UI 界面之间的关系，利用灰度线性插值法，定位 UI 界面分块布局边缘点。引入图像尺度空间理论，匹配 UI 界面分块，基于虚拟现实技术，渲染 UI 分块界面色彩，实现对多彩 UI 界面的分块布局。实验结果表明，与传统布局方法相比，所研究的方法的分块密度更合适，分块之间、分块与界面背景之间的色彩差异更显著。可见所研究的分块布局方法可以提升多彩 UI 界面分块布局视觉增强效果。关键词:虚拟现实技术;分块结构;分块布局;灰度线性插值法中图分类号:TP391文献标识码:BBlock Layout Method of Colorful UI InterfaceBased on Virtual ealityZHANG Xin，AN Jiancairang(School of Computer，Qinghai Nationalities University，Qinghai Xining 810007，China)ABSTACT:The neglect of the relationship between user vision and UI interface leads to over dense blocks and un-clear colors in traditional methods Therefore，the block layout method of colorful UI interface based on virtual realitywas studied Firstly，the relationship between user vision and UI interface was determined Secondly，the gray linearinterpolation method was introduced to locate the edge points of the block layout of the UI interface Then，based onthe image scale space theory，the UI interface blocks were matched Then，according to the virtual reality technology，the UI block interface color was rendered Eventually，the block layout of the colorful UI interface was completedThe experimental results show that the block density，color difference between blocks，color difference betweenblocks and interface background and block visual effect of this method are better than those of the traditional methodKEYWODS:Virtual reality technology;Block structure;Block layout;Gray linear interpolation method1引言随着互联网与现代科技的不断发展，智能设备与各式各样的 APP 相互合作，为人们的工作和生活提供可靠技术。多彩 UI 界面分块布局，直接影响用户对设备和软件的使用体验，关系到智能设备的普及和软件的发展，因此，相关学者对 UI 界面布局问题进行了深入研究。文献 1 提出基于人因特性驱动蚁群算法的操作界面布局优化方法，利用人因工程分析软件对可视域与可达域进行分析，建立界面布局优化函数。依据位置关系，引入约束条件，实现对布局位置的限定，最后运用蚁群算法对布局结果进行布局排列。实验结果表明，该方法可提升人机交互性能，但是分块过密，界面布局效果不佳。文献 2 提出基于视觉注意机制虚拟交互界面布局优化方法，运用视觉注意机制，提取交互元件色彩，再进行界面布局优化。实验结果表明，该方法优化后的界面能够符合视觉注意机制，但是色彩不够显著。除此之外，还有学者提出了多彩 UI 界面分块布局边缘点定位方法，利用成像模型检测图像边缘，以此提升分块布局的融合效果。在传统方法的基础上，为提高多彩 UI 界面分块布局的视觉表达效果，提出基于虚拟现实的多彩 UI 界面分块布局方法。在了解该技术核心理论与使用技巧的前提下，重新设置一个多彩 UI 界面分块布局方法，为用户的设备使用界面、软件应用界面，提供更好的优化技术，增强用户的视觉体验。8822基于虚拟现实的多彩 UI 界面分块布局方法2.1明确用户视觉与 UI 界面之间的关系根据用户对多彩 UI 界面的使用感受，对 UI 界面分块布局进行优化改进，加深设计细节，节约设计成本，提升工作效率。在整个设计过程中，以用户为起点和中心，将用户需求中隐藏的视觉感知部分提取出来，作为分块的一项参考数据3。根据视觉思维的基本研究内容可知，用户交互体验源于视觉思维偏好，而特定情况下的用户需求，受地域、民族意识、企业制度、年龄段以及专业能力的影响，还存在文化差异上的区别，影响 UI 界面的分块布局4。同时，在 UI 界面分块布局中，色彩的应用对用户视觉有极大的影响。用户对色彩的感知能力，取决于光波与物体的交互方式。人们通过透明物体看到物体，透明物体允许大部分光波通过。UI 界面虽然已出现虚拟现实和镭射等技术，屏幕也出现了 STN、TFT 以及 UFB 屏幕，但目前的 UI 界面仍以 LED 为主。一些光波被物体吸收或反射，此时反射波的频率决定了物体的颜色。假设光线都被反射，那么物体的颜色会呈现出白色;若光线无法被反射，那么物体的颜色会呈现黑色。用户在观察色彩时，都有属于每个颜色的反射区域。假设一个人观察物体为蓝色，那么这个物体在蓝色区域中的光波反射率强于其它频率;如果物体的黄色区域光波反射也很强，那么在用户眼中就会是绿色。因此，对 UI 界面分块布局时，要充分考虑屏幕特性以及视觉对于光源的感受规律，对传统分块布局进行修正5。2.2定位 UI 界面分块布局边缘点根据上述分析结果，求取拟合点及其灰度差值，粗定位UI 界面分块布局边缘点。假设粗定位边缘点集中存在一个任意点 Q0，以该点为中心，沿其梯度方向，在两边各取 6 个相邻节点，分别记为 A1A6和 B1 B6，此时的粗定位边缘及其邻近点为拟合点。默认两个相邻节点之间的距离为 d 个像素值，此时的参数 d 与任意点 Q0的梯度方向存在关联性6。当任意点 Q0梯度方向与水平线之间的夹角 小于 45时，说明任意两相邻节点，在 x 轴方向的距离为 1 个像素值，否则任意两相邻节点，在 y 轴方向的距离为 1 个像素值。将界面图像的像素看成正方形小网格，将小网格的中心点作为整像素点，而预设两边的 12 个拟合点不都是整像素点，因此，利用灰度线性插值法处理拟合点的灰度值。设置点 Q0的坐标为(x0，y0)，当水平线夹角 小于 45时，则拟合点 A1横坐标为 x1=x0+1，计算与 A1点相近的两个整像素点的灰度值，公式为g(x1，y1)=(1)g(x0，y0)+g(x0，y0+1)(1)式中:=x0y0;g(x1，y1)表示整像素点的灰度值7。当水平线夹角 大于 45时，A1点的纵坐标为 y1=y0+1，根据点 A1最相近的两个整像素点的灰度值，进行线性插值处理，得到点 A1的灰度值。同理根据上述计算过程，计算剩余拟合点的灰度值。为了降低计算误差，拟合点的灰度差值，通过后向差分和前向差分的平均值来确定。因此，设 g(x0，y0)为点 Q0的灰度值，g(x1，y1)为点 B1的灰度值，则灰度差值计算结果为g0=|g(x1，y1)g(x0，y0)|2+|g(x1，y1)g(x0，y0)|2(2)同理确定其它拟合点的灰度值，其中 A1A6节点的灰度值分别为 g1g6，B1B6的灰度值分别为 g1g68。2.3匹配 UI 界面分块引入图像尺度空间理论，利用虚拟现实技术匹配 UI 界面分块。首先利用高斯卷积核进行尺度变换，生成尺度空间和极值点。假设二维图像为 P(x，y)，高斯卷积核为 G(x，y，)，则图像与高斯卷积核之间的卷积，可以描述图像的尺度空间，该尺度的计算公式为G(x，y，)=122expx2+y222()L(x，y，)=G(x，y，)P(x，y)(3)式中:L(x，y，)表示界面分块的尺度空间;(x，y)表示已知某一点的像素空间位置;表示尺度因子;表示卷积符号。假设相邻尺度图像差用 s(x，y，)表示，建立高斯差分尺度空间，则存在s(x，y，)=G(x，y，)G(x，y，)P(x，y)=L(x，y，)L(x，y，)(4)式中:表示相邻两个尺度间的比例因子9。利用拟合三维二次函数，去除不稳定的拟合点灰度值，保证分块边缘点匹配的抗噪性和稳定性，该函数公式为D(F)=D+DTFF+12DT2DF2F(5)对上述公式进行求导，得到极值点F，对应的计算公式为DF()=D+12DTFF(6)利用 DF()剔除低对比度的不稳定拟合点，当存在DF()0.03 时，不稳定点剔除率与稳定点误去除率之间的比值最大，因此，将 0.03 作为不稳定点的剔除标准。设置一个阈值 k，利用高斯差分算子构成的 Hessian 矩阵，计算主曲率是否在阈值 k 之下，此时剔除边缘响应点的计算公式为tr(H)2det(H)(k+1)2k(7)式中:tr(H)表示矩阵的迹;det(H)表示矩阵的模。通过大量的分析与处理，当阈值 k 的值为 8 时能够得出更好的计算结果。拟合点邻域像素梯度的模值和方向是描述旋转不变的重要因素，两个基本因素的计算过程，可通过下列公式描述(x，y)=arctanL(x，y+1)L(x，y 1)L(x+1，y)L(x 1，y)()h(x，y)=L(x+1，y)L(x 1，y)2+L(x，y+1)L(x，y 1)2 (8)982式中:(x，y)表示梯度方向;h(x，y)表示梯度模值。将拟合点邻域窗口内的直方图，平均分为 36 个方向，得到邻域像素的梯度方向，其中峰值代表邻域梯度的主方向。为保证 UI界面分块的不变性，通过梯度方向直方图设置种子点，生成不同维度的描述子，通过上述计算步骤，实现对 UI 界面的分块布局10。2.4基于虚拟现实技术渲染 UI 分块界面色彩利用虚拟现实技术，对 UI 分块界面进行色彩渲染，则虚拟现实下的 UI 分块界面，色彩区域分布信息量输出结果为U=Nn=1nf(c，u)2v2Nn=1(xij)2n2v2(9)公式中:N 表示界面分块颜色特征的总个数;n 表示界面分块颜色特征个数;v 表示偏移系数;xi表示第 i 个分块的信息分解量;j表示分区域 j 的像素特征分量;c 表示颜色特征分解系数;u 表示背景颜色分解系数1112。通过虚拟现实技术在局部区域子块内建立界面分块布局的区域分布模型，得到匹配后的边缘轮廓信息l=2 x(xi+2)x xi+12xEd()(10)公式中:x 表示界面分块差异值;E 表示界面分块视差。利用虚拟现实技术定义 UI 界面的特征集，采用超像素重构的方式，设置色彩渲染规则，按照上述公式描述的分块轮廓信息，计算界面超像素生成统计特征量，公式为T=Nn=1n2v2exp(xi zn)22v2()(11)根据式(11)所求结果，按照每一个 UI 界面