動(dòng)態(tài)圖形設(shè)計(jì)在用戶界面交互設(shè)計(jì)中的易用性

程澤航

(阜陽(yáng)師范大學(xué) 信息工程學(xué)院，安徽 阜陽(yáng) 236000)

動(dòng)態(tài)圖形設(shè)計(jì)能夠?qū)⒁曈X(jué)技術(shù)的作用有效發(fā)揮，將其應(yīng)用于用戶界面交互設(shè)計(jì)中還能夠優(yōu)化用戶在使用期間可能存在的易用性問(wèn)題。而易用性是現(xiàn)階段很多設(shè)計(jì)人員與用戶共同關(guān)注的要素。為了保證使用效果，充分了解相關(guān)理念與應(yīng)用原則，有利于更好地發(fā)揮動(dòng)態(tài)圖形設(shè)計(jì)在用戶界面交互設(shè)計(jì)中的易用性。

一、用戶界面交互設(shè)計(jì)中易用性的特征

(一)用戶操作的可視性

瀏覽界面中的信息需要具備可視性，用戶在操作過(guò)程中才能更好地理清各種包含功能以及邏輯之間的關(guān)系，從而幫助用戶減少認(rèn)知成本。例如，用戶在操作過(guò)程中，通過(guò)點(diǎn)擊圖標(biāo)、顏色等就可以明確各種功能與操作方式，使瀏覽體驗(yàn)更加高效。

(二)元素的匹配性

元素匹配是在實(shí)際的基礎(chǔ)上建立的。當(dāng)元素具有一定的對(duì)應(yīng)關(guān)系，則通常會(huì)包含觸發(fā)元素以及被動(dòng)元素[1]。兩者之間形成一定的匹配關(guān)系，運(yùn)用這種匹配性能夠?qū)崿F(xiàn)用戶與設(shè)備之間的交互作用，從而提升使用體驗(yàn)。

(三)反饋性

反饋性與匹配性同樣是建立在真實(shí)基礎(chǔ)上的。例如，當(dāng)用戶在進(jìn)行事物的操作時(shí)，設(shè)備會(huì)對(duì)其反饋結(jié)果作出回應(yīng)。但如果沒(méi)有接收到反饋，則通常是出現(xiàn)了一些障礙。

二、動(dòng)態(tài)圖形設(shè)計(jì)在用戶界面交互設(shè)計(jì)中的應(yīng)用現(xiàn)狀

(一)動(dòng)態(tài)圖形和用戶界面交互邏輯

動(dòng)態(tài)圖形設(shè)計(jì)在用戶界面交互設(shè)計(jì)中具有承載大量邏輯信息的功能，也是一項(xiàng)設(shè)計(jì)工作中突出的優(yōu)勢(shì)。通過(guò)動(dòng)態(tài)圖形反映用戶界面中存在的邏輯關(guān)系能夠給予其有效的操作啟示，實(shí)現(xiàn)與設(shè)備的交互。但很多設(shè)計(jì)人員在工作中沒(méi)有將這一點(diǎn)充分重視起來(lái)，使兩者之間的邏輯關(guān)系受到不利的影響。因此，動(dòng)態(tài)圖形設(shè)計(jì)還要有效運(yùn)用其特點(diǎn)增添互動(dòng)的活力，從而帶給用戶更好的體驗(yàn)。

(二)設(shè)計(jì)流程

通常情況下，將實(shí)踐作為重點(diǎn)內(nèi)容的設(shè)計(jì)能夠更快地進(jìn)入到產(chǎn)出環(huán)節(jié)，但其規(guī)范性有待提高，并且不同的設(shè)計(jì)團(tuán)隊(duì)的工作流程以及模式都各具特色，不能完美融合。因此，對(duì)于新人設(shè)計(jì)者來(lái)說(shuō)，沒(méi)有充足的指導(dǎo)資料進(jìn)行工作中的輔助。同時(shí)在用戶界面交互設(shè)計(jì)中，動(dòng)態(tài)圖形的設(shè)計(jì)具備一定的原則，需要設(shè)計(jì)人員明確各個(gè)大類之間的區(qū)別，從而制訂有針對(duì)性的設(shè)計(jì)體系。

在用戶界面設(shè)計(jì)中，靜態(tài)的圖形也是一項(xiàng)重點(diǎn)內(nèi)容，但在應(yīng)用過(guò)程中難免缺乏強(qiáng)大的關(guān)聯(lián)性，結(jié)構(gòu)較為分散，不能實(shí)現(xiàn)交互作用，相對(duì)單調(diào)而枯燥。而通過(guò)動(dòng)態(tài)圖形的引用能夠幫助用戶體驗(yàn)到更多的功能，通過(guò)視覺(jué)維度的增加使交互邏輯輕松呈現(xiàn)。更重要的是將動(dòng)態(tài)圖形應(yīng)用在用戶界面交互設(shè)計(jì)中，能夠通過(guò)提供輔助信息，提升用戶操作的質(zhì)量，增加滿意度。而這種易用性正是產(chǎn)品設(shè)計(jì)中的重要參考指標(biāo)，動(dòng)態(tài)圖形能夠更好地搭建設(shè)計(jì)產(chǎn)品與用戶之間的橋梁，將網(wǎng)絡(luò)界面視覺(jué)語(yǔ)言與相關(guān)邏輯通過(guò)動(dòng)態(tài)的形式展現(xiàn)具有更多維度的內(nèi)容，從而確保產(chǎn)品的區(qū)隔力[2]。

三、動(dòng)態(tài)圖形在用戶界面交互設(shè)計(jì)中的易用性

(一)多樣化的表現(xiàn)形式

1.視覺(jué)表現(xiàn)形式

根據(jù)人類視覺(jué)原理可發(fā)現(xiàn)，藝術(shù)的相關(guān)表達(dá)不僅包含自身的中心思想，還要借助有效的表現(xiàn)形式。動(dòng)態(tài)圖形在表現(xiàn)形式方面主要是遵循靜態(tài)圖形的相關(guān)規(guī)律與設(shè)計(jì)標(biāo)準(zhǔn)，通過(guò)各種運(yùn)動(dòng)變化造成視覺(jué)上的差異，并在運(yùn)動(dòng)曲線的作用下，逐漸形成不同的運(yùn)動(dòng)態(tài)勢(shì)，給用戶帶來(lái)視覺(jué)上的認(rèn)知。

2.視覺(jué)藝術(shù)結(jié)構(gòu)

視覺(jué)的結(jié)構(gòu)也就是畫面所呈現(xiàn)的形狀，利用各種元素之間形成的排列與組合，構(gòu)成全新的感官體驗(yàn)，是創(chuàng)意的升華。因此，在設(shè)計(jì)工作中，結(jié)構(gòu)十分重要，會(huì)對(duì)作品的效果發(fā)揮極大的影響。動(dòng)態(tài)圖形的結(jié)構(gòu)設(shè)計(jì)通常在構(gòu)思萌芽的階段就會(huì)形成，在整個(gè)設(shè)計(jì)過(guò)程中扮演著框架的角色，設(shè)計(jì)人員通過(guò)分析其中的邏輯關(guān)系與特性決定表現(xiàn)形式。

(二)信息層級(jí)的邏輯化

視覺(jué)層級(jí)在視覺(jué)傳達(dá)中十分重要，能夠決定設(shè)計(jì)產(chǎn)品的效果。設(shè)計(jì)人員可以通過(guò)將各個(gè)頁(yè)面元素進(jìn)行有序的規(guī)劃，使信息更加簡(jiǎn)單明了。從用戶界面交互的層面來(lái)說(shuō)，層級(jí)的規(guī)劃決定著用戶的操作體驗(yàn)，合理的層級(jí)能夠幫助他們更加高效地進(jìn)行信息瀏覽，促進(jìn)與設(shè)備設(shè)置之間的互動(dòng)，提升自我成就感。

四、基于易用性的動(dòng)態(tài)圖形設(shè)計(jì)原則

(一)元素針對(duì)性原則

動(dòng)態(tài)圖形的使用通常是在界面元素的屬性出現(xiàn)改變的時(shí)候，這種情況下，設(shè)計(jì)人員會(huì)應(yīng)用動(dòng)圖實(shí)現(xiàn)過(guò)渡的效果。但這一方法缺乏一定的合理性，主要原因是會(huì)在使用過(guò)程中形成資源上的耗費(fèi)。同時(shí)，多數(shù)的動(dòng)態(tài)圖形設(shè)計(jì)目的在于對(duì)產(chǎn)品易用性的優(yōu)化與提升，需要將更多的有效資源用于該方面，使其價(jià)值能夠充分發(fā)揮。

1.品牌性和接觸點(diǎn)

動(dòng)態(tài)圖形的設(shè)計(jì)工作重點(diǎn)在于產(chǎn)品易用性的完善，從而將產(chǎn)品的功用有效地發(fā)揮，保證用戶對(duì)其的感知度。因此，需要設(shè)計(jì)人員在工作過(guò)程中找出產(chǎn)品在使用期間的高頻次觸點(diǎn)，并且對(duì)其各種環(huán)節(jié)進(jìn)行仔細(xì)的研究與分析，增加動(dòng)態(tài)設(shè)計(jì)的靈活性，增加品牌認(rèn)知度。

2.頁(yè)面間分裂

處理用戶界面交互設(shè)計(jì)中的分裂問(wèn)題，需要設(shè)計(jì)人員事先明確其分裂感的大小，一般情況下，可以通過(guò)驗(yàn)證的方式。例如，將所有的單個(gè)頁(yè)面提取出來(lái)進(jìn)行輪播，然后將分裂感較大的部分篩選出來(lái)，從而保證用戶的操作體驗(yàn)，使頁(yè)面之間的過(guò)度更加自然合理。

3.功能信息

信息的提示能夠反映動(dòng)態(tài)圖形設(shè)計(jì)的主要功能與優(yōu)勢(shì)，利用圖形的動(dòng)態(tài)表現(xiàn)能夠?qū)崿F(xiàn)信息的傳遞以及用戶界面交互邏輯的反映，搭建出更具真實(shí)感的交互體系。例如，頁(yè)面中提示鍵與頁(yè)面的過(guò)渡能夠?qū)烧咧g的邏輯關(guān)系清晰地反映出來(lái)，提升用戶的認(rèn)知感受。

(二)目標(biāo)明確性原則

在用戶界面交互設(shè)計(jì)過(guò)程中，設(shè)計(jì)人需要了解動(dòng)態(tài)設(shè)計(jì)的目的以及組成因素。通常情況下，個(gè)別元素的構(gòu)成相對(duì)簡(jiǎn)單易懂，但在多種元素共同發(fā)生變化時(shí)，不僅會(huì)影響其屬性，還會(huì)出現(xiàn)彼此之間的關(guān)聯(lián)性改變，發(fā)揮聯(lián)動(dòng)的作用。例如，用戶在瀏覽日歷界面時(shí)，其色彩的便簽與信息區(qū)的內(nèi)容會(huì)發(fā)生關(guān)聯(lián)活動(dòng)，將各種信息元素強(qiáng)力關(guān)聯(lián)起來(lái)，從而有效提升用戶對(duì)于相關(guān)信息的管控力。

(三)時(shí)機(jī)合理性原則

動(dòng)態(tài)圖形引入的時(shí)間是整個(gè)用戶界面交互設(shè)計(jì)中的重點(diǎn)內(nèi)容。如果時(shí)間點(diǎn)超前，將會(huì)給用戶帶來(lái)不好的體驗(yàn)感受，但如果延后，則增加用戶的焦慮感。因此，正常情況下，設(shè)計(jì)人員需要結(jié)合實(shí)際需要與設(shè)計(jì)標(biāo)準(zhǔn)進(jìn)行實(shí)時(shí)的反饋。要想做好該方面的工作，需要保證動(dòng)態(tài)效果具備及時(shí)、準(zhǔn)確等功能，才能為用戶與設(shè)備之間的良好互動(dòng)打下良好的基礎(chǔ)，提升體驗(yàn)感受。另外，需要對(duì)設(shè)計(jì)內(nèi)容的信息量進(jìn)行合理的控制，一旦超出標(biāo)準(zhǔn)，將直接影響用戶的實(shí)際體驗(yàn)。

五、動(dòng)態(tài)圖形在用戶界面易用性的設(shè)計(jì)方案

(一)明確用戶場(chǎng)景

用戶場(chǎng)景主要指的是設(shè)計(jì)人員在正式投入設(shè)計(jì)工作之前，需要將用戶的需要進(jìn)行明確的了解與分析，并結(jié)合實(shí)際進(jìn)行評(píng)估，找到其關(guān)鍵點(diǎn)作為主要的定位參考，并根據(jù)場(chǎng)景的關(guān)系分析用戶的使用目的，從而進(jìn)一步提升設(shè)計(jì)的質(zhì)量與效率，保證產(chǎn)品的易用性。

(二)信息渠道的分類

在用戶活動(dòng)期間，能夠幫助收集信息的方式較多，但基本可以分為兩大類：第一種是用戶主動(dòng)收集；第二種是用戶被動(dòng)接收。前者指的是用戶自主地進(jìn)行信息的搜索與選擇，具有一定的目的性，此時(shí)設(shè)計(jì)人員需要掌握其實(shí)際需要的場(chǎng)景，在此基礎(chǔ)上進(jìn)行有針對(duì)性的操作；后者是用戶沒(méi)有明確的信息需要，此時(shí)可以由界面進(jìn)行信息的推送。另外，針對(duì)用戶主動(dòng)獲取的方式，需要讓動(dòng)態(tài)的變化具有一定的功能性意義，而不是僅僅停留在單一的表達(dá)形式上。

(三)建立時(shí)空維度坐標(biāo)系統(tǒng)

動(dòng)態(tài)圖形在用戶界面交互設(shè)計(jì)中可以通過(guò)各種元素在坐標(biāo)軸上的不同變化反映出來(lái)，如圖1所示。

圖1 時(shí)間空間坐標(biāo)系統(tǒng)

圖1中橫坐標(biāo)表示時(shí)間的持續(xù)長(zhǎng)度，縱坐標(biāo)表示空間的主要變化。在第一象限中，主要特點(diǎn)是持續(xù)時(shí)間長(zhǎng)、空間變化較為強(qiáng)烈，能夠更好地吸引用戶的注意力，適合品牌的展示，強(qiáng)化氛圍的烘托[3]。第二象限的特點(diǎn)是持續(xù)時(shí)間短、空間變化強(qiáng)烈，適合跨頁(yè)面的轉(zhuǎn)場(chǎng)，發(fā)揮平滑的作用。以此類推，第三想象的特點(diǎn)是瞬時(shí)的信息提示，能夠?qū)?dòng)態(tài)的效果進(jìn)行實(shí)時(shí)反饋，并具有高效性，第四象限能夠?qū)τ脩暨M(jìn)行視覺(jué)沖擊，適用于頁(yè)面的信息提示。

(四)層級(jí)的搭建

通常情況下，動(dòng)態(tài)圖形在用戶界面層級(jí)的搭建需要考慮以下幾方面內(nèi)容：

第一，保證易用性，在層級(jí)設(shè)計(jì)過(guò)程中，需要顧及框架層以及結(jié)構(gòu)的作用，兼顧兩者在其中的重要性，防止純視覺(jué)導(dǎo)向的問(wèn)題，從而保證網(wǎng)絡(luò)頁(yè)面內(nèi)容具備良好的條理性[4]。但僅僅將重點(diǎn)放在審美中依舊不足，需要設(shè)計(jì)人員提升工作效率，思考各種元素具有的使命與功能，從而發(fā)揮設(shè)計(jì)產(chǎn)品的易用性。通常情況下可通過(guò)用戶需求的方式進(jìn)行。

第二，界面的留白，留白設(shè)計(jì)在設(shè)計(jì)領(lǐng)域中比較常見(jiàn)，同時(shí)也是一門重要的學(xué)問(wèn)，能夠?qū)⒏鞣N元素清晰地隔離開(kāi)來(lái)，使設(shè)計(jì)組件更加簡(jiǎn)潔，有利于后期工作的使用。同時(shí)能夠起到強(qiáng)化視覺(jué)效果的作用，平衡整個(gè)設(shè)計(jì)頁(yè)面，并且能夠更好地適用于各種尺寸的界面，進(jìn)一步擴(kuò)大應(yīng)用范圍。經(jīng)過(guò)調(diào)查發(fā)現(xiàn)，在日常生活中，界面按鍵的大小一般在7mm—10mm之間，而小于6mm、多于10mm的留白則會(huì)造成視覺(jué)上的不適感。因此，合理留白的部分能夠有效給予用戶視覺(jué)反饋。

第三，黃金比例的構(gòu)建，將黃金比例應(yīng)用于用戶界面交互設(shè)計(jì)中能夠使產(chǎn)品的效果更具審美力，利用比例螺旋曲線能夠?qū)㈨?yè)面進(jìn)行科學(xué)的切割，如圖2所示，便于之后的規(guī)劃工作。

圖2 比例螺旋曲線

第四，網(wǎng)格設(shè)計(jì)在界面設(shè)計(jì)中相當(dāng)于輔助線的作用，網(wǎng)格的利用能夠幫助設(shè)計(jì)人員明確界面的疏密情況與各個(gè)元素的規(guī)劃，并且提升設(shè)計(jì)的效率。

第五，顏色。在用戶界面交互設(shè)計(jì)中是一種關(guān)鍵的設(shè)計(jì)元素，并且具有一定的層級(jí)關(guān)系。例如，冷色系、暖色系、顏色的對(duì)比與互補(bǔ)等。將不同的顏色進(jìn)行巧妙的配合能夠?qū)崿F(xiàn)界面效果的強(qiáng)化與弱化，從而為設(shè)計(jì)人員的調(diào)整工作提供便利。

第六，字體設(shè)計(jì)。界面字體如果過(guò)多，難以保證用戶的瀏覽效率，甚至產(chǎn)生厭倦的情緒。因此，在用戶界面交互設(shè)計(jì)過(guò)程中，還要注重對(duì)于版面、字體、間距等布局的調(diào)控，從而使界面的文字更加耐讀，將用戶需要的信息有效傳達(dá)，并提升瀏覽的質(zhì)量。

第七，移動(dòng)設(shè)計(jì)。由于用戶界面交互設(shè)計(jì)的頁(yè)面具有較大的空間，能夠設(shè)置更多的信息，因此，設(shè)計(jì)人員可以設(shè)置多種層級(jí)。但是在移動(dòng)端口的設(shè)計(jì)有所差異，它存在空間上的限制，層級(jí)量不能過(guò)多，需要簡(jiǎn)潔化的設(shè)計(jì)。

第八，促進(jìn)界面的邏輯化。一方面，能夠推動(dòng)商業(yè)目標(biāo)的實(shí)現(xiàn)，另一方面可以改善引導(dǎo)用戶瀏覽的途徑。設(shè)計(jì)人員在正式投入工作之前可以將各種元素進(jìn)行科學(xué)的梳理，明確其優(yōu)先級(jí)。例如，在交易網(wǎng)站中，界面的設(shè)計(jì)元素對(duì)于視覺(jué)效果有重要影響，其中產(chǎn)品的輪插圖能夠?qū)⒂脩舻淖⒁饬衅饋?lái)，然后進(jìn)行商品的信息簡(jiǎn)介、鏈接，各個(gè)層級(jí)都需要進(jìn)行合理的優(yōu)化，才能實(shí)現(xiàn)商業(yè)目標(biāo)的達(dá)成。而這一過(guò)程，通過(guò)動(dòng)態(tài)圖形的設(shè)計(jì)，能夠使商業(yè)價(jià)值較高的分區(qū)更加突出，形成明顯的設(shè)計(jì)層面，從而提升用戶的關(guān)注度，增加實(shí)際轉(zhuǎn)化率，一般來(lái)說(shuō)，宣傳的部分占據(jù)總界面的1/3,而產(chǎn)品的功能等信息占據(jù)2/3。

六、結(jié)論

綜上所述，動(dòng)態(tài)圖形設(shè)計(jì)在用戶界面交互設(shè)計(jì)中的易用性對(duì)于其效果的良好發(fā)揮具有重要意義。設(shè)計(jì)人員應(yīng)遵循易用性的動(dòng)態(tài)圖形設(shè)計(jì)原則，將明確用戶場(chǎng)景，分類信息渠道和建立時(shí)空維度充分運(yùn)用到設(shè)計(jì)中，以起到提高用戶操作質(zhì)量，提升用戶滿意度的作用。