基于自適應(yīng)遺傳算法的微信小程序界面信息布局設(shè)計(jì)方法

劉彥會(huì)

(閩北職業(yè)技術(shù)學(xué)院 信息系, 福建 南平 353000)

微信作為最受歡迎的軟件之一,近年來(lái)的發(fā)展迅速,在人們的溝通與交流上發(fā)揮了重要的作用,越來(lái)越多的用戶已經(jīng)離不開(kāi)微信。基于其便捷性與快速性在功能上加入了小程序,以吸引更多的用戶,但在小程序的設(shè)計(jì)與布局上引起了學(xué)者的廣泛討論。

李源楓等研究了結(jié)合用戶導(dǎo)向和遺傳算法的醫(yī)療終端界面布局方法[1],該方法將用戶主觀認(rèn)知和客觀視覺(jué)原則結(jié)合后轉(zhuǎn)換成布局指標(biāo),對(duì)布局指標(biāo)與觀眾用戶之間的關(guān)系建模。并采用切片樹(shù)的方式對(duì)特征編碼,并不斷搜索最優(yōu)解,實(shí)現(xiàn)布局設(shè)計(jì);金昱潼等研究了基于視覺(jué)注意機(jī)制虛擬交互界面布局優(yōu)化方法[2],該方法主要根據(jù)人眼視覺(jué)注意機(jī)制,分出影響因素,并建立用戶注意力的目標(biāo)函數(shù)模型,采用軟件對(duì)目標(biāo)函數(shù)求解,實(shí)現(xiàn)交互界面設(shè)計(jì)。上述提出的方法雖然能夠?qū)崿F(xiàn)界面布局,但是微信小程序界面相對(duì)于終端和人機(jī)交互界面而言更小,信息需要更集中,因此布局后的效果有時(shí)不是很好。

為解決微信小程序界面布局不合理的問(wèn)題,提出基于自適應(yīng)遺傳算法的微信小程序界面信息布局設(shè)計(jì)方法。自適應(yīng)遺傳算法的細(xì)膩性與迭代計(jì)算能夠不遺漏每個(gè)元素與模塊,具有更好的遺傳性與穩(wěn)定性,將其應(yīng)用于小程序界面設(shè)計(jì)中,可以更加完整地展示信息,減少錯(cuò)誤點(diǎn)擊次數(shù),小程序點(diǎn)擊完成時(shí)間更短,并且布局更為美觀,增加了微信的實(shí)用性,為微信小程序的廣泛使用提供參考。

一、微信小程序界面信息布局設(shè)計(jì)方法

1.微信小程序視覺(jué)注意程度的影響因素分析

多種多樣的顏色不僅美觀明了還能夠便于區(qū)分各個(gè)區(qū)域,利用顏色的亮度與對(duì)比度來(lái)代表不同的事物的重要程度。當(dāng)出現(xiàn)在視線中時(shí),用戶就會(huì)不由自主地識(shí)別與感知到不同的色彩[3],將界面劃分出多個(gè)區(qū)域并以顏色裝飾,就會(huì)一目了然,根據(jù)國(guó)際規(guī)定的主要顏色來(lái)優(yōu)化微信小程序的界面,微信用戶使用小程序時(shí)就會(huì)朝著大的方向去觀察,而忽略小的像素點(diǎn),那么在視線中出現(xiàn)的布局就較為清晰。若把小程序看作一個(gè)不動(dòng)的物體,表面上的像素點(diǎn)用與來(lái)表示,那么區(qū)別兩者的色彩公式為:

(1)

當(dāng)顏色出現(xiàn)比較明顯的色差時(shí)[4],就會(huì)增加用戶的好感程度,會(huì)吸引用戶的視線,增加用戶的點(diǎn)擊率[5],最后劃分相似的顏色,構(gòu)成的矩陣為:

(2)

式中,m代表數(shù)量。基于每個(gè)顏色都會(huì)細(xì)分成無(wú)數(shù)個(gè)相似的顏色,其區(qū)別較小,此時(shí)就應(yīng)該將相似顏色間的飽和度與亮度進(jìn)行對(duì)比,兩個(gè)像素點(diǎn)之間的相似矩陣[6]表示為:

(3)

如果以色差作為比較的標(biāo)準(zhǔn),當(dāng)二者的相關(guān)性不斷增加時(shí),色彩較為鮮艷的顏色應(yīng)該處于物體的最前方[7],按照階梯下降的方式依次排列,以免造成色彩混亂,不能識(shí)別到正確的顏色,降低用戶的使用感受,減少用戶數(shù)量。當(dāng)二者的相關(guān)性逐漸減少時(shí),就要將不明顯的顏色放在物體的最前方,吸引用戶的眼球,增加點(diǎn)擊率。

像素點(diǎn)之間的距離也是決定界面如何布局設(shè)計(jì)的一個(gè)重要因素,每個(gè)功能鍵的距離要恰到好處,便于用戶觀看與查詢,那么就要求像素點(diǎn)之間的間隔距離一定[8],長(zhǎng)和寬都要科學(xué)合理。用坐標(biāo)表示像素點(diǎn)的長(zhǎng)和寬為(li,wi),若顏色的亮度與對(duì)比度相同,那么兩個(gè)點(diǎn)之間的距離公式為:

(4)

由此可建立一個(gè)顏色相關(guān)的對(duì)比度模型,保證在小程序布局設(shè)計(jì)上不出現(xiàn)沖突與失誤的同時(shí)[9],還能互不干擾,表達(dá)式為:

(5)

顏色的對(duì)比度模型不僅是與距離有關(guān),還與小程序界面的分布有關(guān),在正常狀態(tài)下像素點(diǎn)之間的間隔越短,視野中顏色的對(duì)比度越強(qiáng)烈,用戶的觀感就模糊。間隔越大,顏色的對(duì)比程度相對(duì)減弱,在視野中的圖標(biāo)就越清晰,那最后過(guò)濾掉不符合要求的距離后[10],矩陣就變?yōu)?

(6)

此時(shí),對(duì)比度模型的表達(dá)式更新為:

(7)

式中,代表距離函數(shù)。在距離函數(shù)的基礎(chǔ)上求解模型中的圖標(biāo)距離是設(shè)計(jì)界面的核心方向,搭配上顏色就會(huì)使小程序更加顯眼,使用戶的操作更加舒適與快捷。

2.目標(biāo)函數(shù)構(gòu)建

上述主要分析了小程序界面布局的影響因素,為使布局更加科學(xué)合理,滿足界面信息的特異性,需要建立一個(gè)目標(biāo)函數(shù),用來(lái)檢驗(yàn)距離模型與布局設(shè)計(jì)的準(zhǔn)確性。涉及參數(shù)主要有小程序界面圖標(biāo)與元素,包括坐標(biāo)軸上的所有變量,設(shè)定其中的參數(shù)不變,得到目標(biāo)函數(shù)的真實(shí)性,而建立函數(shù)的閾值就是最佳設(shè)計(jì)方案。

建立函數(shù)需要遵循多個(gè)原則,其中最為主要的就是布局可視性原則,是將界面中的所有元素按照色彩分成不同的等級(jí)[11],其中各個(gè)元素的與區(qū)域劃分緊密相連,按照等級(jí)之分得到的關(guān)系公式為:

(8)

其中,r代表等級(jí)之間的關(guān)系,與代表兩個(gè)等級(jí)區(qū)域,xA、xB與yA、yB代表兩個(gè)區(qū)域的色彩飽和度,a代表坐標(biāo)軸上的橫軸,b代表縱軸,以像素點(diǎn)為坐標(biāo)原點(diǎn),半徑為r,X與Y代表兩個(gè)像素點(diǎn)的集合,在兩個(gè)區(qū)域內(nèi)當(dāng)r的值增大時(shí),證明像素點(diǎn)恰好落在等級(jí)區(qū)域中間;當(dāng)r的值減小時(shí),像素點(diǎn)與區(qū)域之間的距離較遠(yuǎn),不能直接顯示在頁(yè)面上。

從原則上講布局中區(qū)域的面積越大越利于吸引用戶,飽和度與對(duì)比度強(qiáng)烈的區(qū)域更是如此,位置的優(yōu)先不但能夠增加可觀性,還能在一定程度上提高視野等級(jí),根據(jù)等級(jí)的不同采取不一樣的措施[12]。用戶觀看界面的角度不同就會(huì)導(dǎo)致觀察的重點(diǎn)不同,為了實(shí)現(xiàn)小程序的設(shè)計(jì)原則,在界面安排時(shí)要保證任務(wù)的順序性,具體先后排列公式如下:

S=[Si]=[S1,S2,Sn]

(9)

式中,S代表順序,n代表整數(shù)。以用戶視野為例,具體分析確定布局中的每個(gè)模塊存在幾種關(guān)系,當(dāng)位置的順序?yàn)镾ij={2,3,4}時(shí),代表兩個(gè)元素可以按照大小的方法排列,數(shù)字小的放在前面;當(dāng)順序?yàn)镾ij={4,1,2}時(shí),可以將元素左右排列,不涉及大小;當(dāng)順序?yàn)镾ij={1,2,3,4}時(shí),兩個(gè)元素隨機(jī)排列,沒(méi)有排列的要求。假設(shè)元素之間的順序與界面的大小有關(guān)[13],記作λ,則當(dāng)前提條件為Sij={2,3,4}時(shí),與界面大小的關(guān)系表達(dá)式為:

(10)

式中,λ代表相關(guān)因子,α代表界面與位置之間的角度。公式(10)表達(dá)了布局的設(shè)計(jì)與小程序模塊的關(guān)系,形成的矩陣為:

(11)

構(gòu)成的函數(shù)關(guān)系式為:

(12)

由公式(12)可知,元素之間的距離越大,界面布局模塊的相似性越大,反之越小。排除了其他因素影響小程序界面布局的設(shè)計(jì)的條件下明確各個(gè)區(qū)域的位置,不喧賓奪主的情況下,實(shí)現(xiàn)小程序界面布局。

3.界面布局最優(yōu)方案制定

自適應(yīng)遺傳算法是對(duì)基本遺傳算法的一種改進(jìn),它通過(guò)對(duì)遺傳參數(shù)的自適應(yīng)調(diào)整,提高遺傳算法的收斂精度,加快收斂速度。其基礎(chǔ)架構(gòu)是染色體結(jié)構(gòu),在算法中利用算子編碼的不同不斷迭代計(jì)算得到最優(yōu)解,到目前為止使用最多的就是編碼的方式來(lái)構(gòu)成每一段染色體的結(jié)構(gòu),一般情況下布局的設(shè)計(jì)只需要使用整數(shù)的編碼即可。自適應(yīng)遺傳算法根據(jù)遺傳算法的進(jìn)化特征自適應(yīng)地選擇將要進(jìn)入交叉操作的個(gè)體;在進(jìn)化的開(kāi)始階段,選擇交叉概率較大的個(gè)體,有利于保持種群的多樣性,在后期,需要細(xì)致搜索,防止破壞最優(yōu)解;變異過(guò)程中選擇變異概率小于0.01的個(gè)體,多次從廣泛搜索到細(xì)致搜索,可以保證搜索的全面性和精確性,實(shí)現(xiàn)精準(zhǔn)、快速收斂,得到全局最優(yōu)解。

根據(jù)自適應(yīng)遺傳算法的遺傳策略,建立的目標(biāo)函數(shù)是布局內(nèi)所有圖標(biāo)的長(zhǎng)度和[14],只有當(dāng)夾角一定對(duì)角線的長(zhǎng)度最短時(shí)就是所求的解,此時(shí)就要過(guò)濾掉與設(shè)計(jì)無(wú)關(guān)的算子,改進(jìn)函數(shù)使其不斷迭代計(jì)算,表達(dá)式為:

(13)

其中,T代表變換因子,g代表適應(yīng)度函數(shù),N代表矩陣,p代表概率,概率為1時(shí),對(duì)角線的長(zhǎng)度最大。

通過(guò)編碼可以確定染色體中包含的算子數(shù)量以及位置,把遺傳算子的順序打亂重新排列就會(huì)導(dǎo)致染色體結(jié)構(gòu)中出現(xiàn)空缺或者都處于相同的位置,為了使算子鑲嵌在對(duì)應(yīng)的位置,可以求出函數(shù)的最小值,盡量?jī)?yōu)化所有目標(biāo)函數(shù)。

小程序界面的布局不僅需要全局,還要注意每個(gè)軟件位置的設(shè)置,按照程序的功能與重要性來(lái)整體劃分。根據(jù)算法定義出每個(gè)區(qū)域的等級(jí)[15],記作E=(w1,w2…,w3),表示所有等級(jí)的集合,w代表不同的區(qū)域。視野距離等級(jí)就可以記作D=(d1,d2,…,d6),表示所有顏色劃分區(qū)域的集合。而對(duì)于迭代計(jì)算中的變量來(lái)說(shuō)主要分布在界面面積相對(duì)較大的區(qū)域中,利用顏色與功能的分級(jí)來(lái)獲取界面中的單元格數(shù)量,將迭代后的結(jié)果傳達(dá)到整個(gè)界面,得到的最優(yōu)解集合為R,U=(uA,uB,…,uH),A～H代表從低到高的等級(jí),則最后確定算法的迭代公式為:

(14)

式中,w代表權(quán)重因子。該函數(shù)主要是表達(dá)了視覺(jué)傳達(dá)正確與功能區(qū)合理的情況下得到的線性指數(shù),能夠在單元格分配不均勻的條件下保證布局的合理性,找到界面中的重要區(qū)域,確定界面中顏色較為明顯的視覺(jué)指數(shù)表達(dá)式為:

(15)

式中,K值的變化關(guān)系著功能區(qū)的改變,也是驗(yàn)證自適應(yīng)遺傳算法準(zhǔn)確性的約束條件,還是決定單元格面積大小的主要因素,具體可分解為:

(16)

式中,當(dāng)?shù)燃?jí)達(dá)到最高等級(jí)時(shí),sj為j的區(qū)域面積,i與j的面積與順序相同;當(dāng)視覺(jué)等級(jí)為F時(shí),i與j和單元格的距離相同,根據(jù)權(quán)重的彈性變化得到視覺(jué)指數(shù)的取值范圍,之后重復(fù)迭代計(jì)算可得在界面布局中最為合理的指數(shù),以此完成微信小程序界面信息布局優(yōu)化設(shè)計(jì)。

二、實(shí)驗(yàn)對(duì)比

1.實(shí)驗(yàn)內(nèi)容

此次實(shí)驗(yàn)分為兩部分,一部分以某健身房小程序內(nèi)部布局為例,直接對(duì)比文獻(xiàn)[1]用戶導(dǎo)向和遺傳算法、文獻(xiàn)[2]視覺(jué)注意機(jī)制和本文方法三種方法的布局效果,對(duì)比直觀感受;第二部分實(shí)驗(yàn)規(guī)劃實(shí)驗(yàn)任務(wù),分別采用三種方法布局,布局對(duì)象為整個(gè)微信小程序,其中包含較多內(nèi)容,布局后選取10名年齡為20～30歲的報(bào)名者參加實(shí)驗(yàn),參與者均為對(duì)手機(jī)小程序操作有一定的經(jīng)驗(yàn),在講解實(shí)驗(yàn)場(chǎng)景、實(shí)驗(yàn)流程以及實(shí)驗(yàn)注意事項(xiàng)后即可進(jìn)行實(shí)驗(yàn)的人員。

實(shí)驗(yàn)二的主要流程如下所示:

步驟1:觀察導(dǎo)航區(qū),找到并進(jìn)入規(guī)劃模塊;

步驟2:選取任務(wù)列表,規(guī)劃的小程序主要內(nèi)容如表1所示:

表1 小程序樣本

步驟3:實(shí)驗(yàn)者分別點(diǎn)擊上述小程序中的內(nèi)容,對(duì)比三種方法的點(diǎn)擊錯(cuò)誤次數(shù);

步驟4,任務(wù)由測(cè)試者獨(dú)立完成,不給予任何語(yǔ)言提示,在完成任務(wù)操作后,記錄任務(wù)的完成時(shí)間。

2.實(shí)驗(yàn)結(jié)果分析

分別采用三種方法對(duì)上述內(nèi)容布局,對(duì)比規(guī)劃后每個(gè)小程序錯(cuò)誤點(diǎn)擊次數(shù),對(duì)比結(jié)果如圖1所示:

圖1 錯(cuò)誤點(diǎn)擊次數(shù)

基于圖1可知,在各個(gè)類別點(diǎn)擊上,所提出的方法僅出現(xiàn)一次點(diǎn)擊錯(cuò)誤情況,而對(duì)比方法出現(xiàn)多次錯(cuò)誤點(diǎn)擊情況,說(shuō)明布局不清晰,實(shí)驗(yàn)者不能準(zhǔn)確地找到相應(yīng)的小程序。

接下來(lái)分析在各個(gè)小程序點(diǎn)擊上的完成時(shí)間,對(duì)比結(jié)果如圖2所示:

圖2 小程序點(diǎn)擊完成時(shí)間對(duì)比

基于圖2可知,所提出方法在短時(shí)間內(nèi)就能找到相應(yīng)的小程序,較對(duì)比方法的完成時(shí)間更少。原因是所提出方法采用自適應(yīng)遺傳算法對(duì)布局優(yōu)化,不斷迭代,直到生成最優(yōu)的布局,所以生成的界面較為清晰,使整個(gè)界面更加直觀,從而減少了小程序的尋找時(shí)間。

圖3所示為三種方法下的布局效果。

圖3 布局效果對(duì)比

基于圖3可知,三種布局方法整體布局均采用上下型布局,在頁(yè)面的中間部分放置的是導(dǎo)航區(qū)。但是在字體大小搭配以及小圖標(biāo)設(shè)置上有一定的差距,所研究的方法在整個(gè)界面信息布局中,導(dǎo)航區(qū)大小適中,沒(méi)有出現(xiàn)重疊現(xiàn)象,并且我的魅力值是實(shí)時(shí)更新的,所以設(shè)置new的圖標(biāo),使表達(dá)內(nèi)容更加能吸引用戶的眼球。同時(shí),在各個(gè)模塊的展示上,可以同時(shí)瀏覽多個(gè)信息,能夠讓操作用戶同時(shí)感知整體和布局的變化情況。而用戶導(dǎo)向和遺傳算法將頁(yè)面底部的導(dǎo)航區(qū)放置到頁(yè)面最上方,并且健身房的展示部分不全面,出現(xiàn)灰色遮擋部分,整體頁(yè)面不是很美觀,并且出現(xiàn)圖標(biāo)重疊的現(xiàn)象;視覺(jué)注意機(jī)制方法雖然沒(méi)有發(fā)生圖標(biāo)重疊現(xiàn)象,但是圖標(biāo)也是過(guò)大,并會(huì)受到導(dǎo)航信息的視覺(jué)干擾,總體來(lái)說(shuō),所研究的基于自適應(yīng)遺傳算法的布局方法布局效果最優(yōu)。

三、結(jié)語(yǔ)

為了進(jìn)一步優(yōu)化界面信息布局效果,設(shè)計(jì)了一個(gè)基于自適應(yīng)遺傳算法的微信小程序界面信息布局方法。分析微信小程序視覺(jué)注意程度的影響因素,將圖標(biāo)、顏色等指標(biāo)作為目標(biāo)函數(shù),檢驗(yàn)距離模型與布局設(shè)計(jì)的準(zhǔn)確性;制定界面布局最優(yōu)方案,采用自適應(yīng)遺傳算法不斷迭代最優(yōu)解,基于全局觀念按照程序的功能與重要性來(lái)整體劃分小界面單元格面積大小,以此完成微信小程序界面信息布局設(shè)計(jì)。實(shí)驗(yàn)結(jié)果表明此次研究的方法有效提升了布局效果:將界面中的模塊按照顏色區(qū)分出來(lái),檢測(cè)到界面中元素的具體位置,逐步迭代計(jì)算得到最優(yōu)解,這是由于自適應(yīng)遺傳算法具有收斂速度快的特點(diǎn);用戶快速地接收到所需要的信息,建立目標(biāo)函數(shù)使小程序中主要布局更加顯眼,界面簡(jiǎn)單明了,增加了微信的實(shí)用性;用戶的錯(cuò)誤點(diǎn)擊次數(shù)和小程序點(diǎn)擊完成時(shí)間有效減少,微信小程序界面布局更加清晰美觀,這是由于設(shè)定了約束條件,根據(jù)約束條件可以制定出最優(yōu)的界面規(guī)劃方案。實(shí)驗(yàn)證明,該方法可以為微信小程序界面的布局提供有效參考。