基于網(wǎng)頁設(shè)計中UI界面的應(yīng)用

文/樊鴻燁 關(guān)玉欣

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)絡(luò)已成為人們獲取信息的主要途徑，網(wǎng)絡(luò)信息傳播的載體是網(wǎng)站，而網(wǎng)站的特點(diǎn)，就是通過網(wǎng)站圖文信息、服務(wù)方式等將關(guān)鍵信息傳達(dá)給人們。在新媒體技術(shù)的影響下，網(wǎng)頁UI設(shè)計便成為了用戶瀏覽體驗(yàn)的重要影響因素。對網(wǎng)頁設(shè)計中的UI界面應(yīng)用問題進(jìn)行探究，有助于互聯(lián)網(wǎng)技術(shù)的發(fā)展進(jìn)步。

1 UI界面設(shè)計的設(shè)計原則

UI是用戶界面（User Interface）的簡稱，UI界面設(shè)計主要指的是軟件操作邏輯與界面美觀的整體設(shè)計。合理化的UI設(shè)計不僅可以展示出軟件的自身特色，也可以讓軟件操作過程呈現(xiàn)出舒適化、簡單化與自由化的特點(diǎn)，根據(jù)計算機(jī)技術(shù)的發(fā)展現(xiàn)狀，以下三點(diǎn)成為了UI界面的主要設(shè)計原則。

1.1 輕量感

輕量感可以讓用戶在處理嚴(yán)肅復(fù)雜的信息時，仍然有適當(dāng)?shù)妮p松愉悅感受。例如，去除繁雜的樣式，使用更輕盈的轉(zhuǎn)場效果等。

1.2 指引性

人性化的指引能夠幫助用戶更加明確和深入的處理信息。例如輔助的名詞解釋，插圖輔助等。

1.3 可靠性

一個穩(wěn)定的網(wǎng)頁界面能夠給用戶帶來可靠的感覺，例如，在顏色等視覺表現(xiàn)上提供給用戶穩(wěn)定而又專業(yè)和可靠的感受。

2 UI界面在網(wǎng)頁設(shè)計中的視覺信息傳達(dá)

網(wǎng)頁設(shè)計是利用讓用戶感覺合理的字體樣式和色彩美化頁面設(shè)計的過程。網(wǎng)頁設(shè)計旨在讓用戶感受到完美的視覺體驗(yàn)，在UI界面設(shè)計方面，以下兩點(diǎn)發(fā)揮著較為重要的作用。

2.1 UI界面文字應(yīng)用

UI界面中的文字可以發(fā)揮出解釋網(wǎng)頁內(nèi)容的作用。易讀性與可讀性是UI界面文字設(shè)計的基本要求。文字的易讀性，要求UI界面的文字設(shè)計可以讓用戶更容易獲取自己想要獲取的關(guān)鍵詞。文字可讀性與網(wǎng)頁界面視覺性有關(guān)，文字的排版、行距等內(nèi)容均是文字可讀性的影響因素。

2.2 UI界面的圖片應(yīng)用

UI界面的圖片應(yīng)用，對圖片的質(zhì)量和清晰度具有較為嚴(yán)格的要求。一般情況下，圖片的排版方式可以分為下張預(yù)覽、幻燈片展示和大圖平鋪等多種方式，圖片內(nèi)容需要與網(wǎng)頁的宣傳內(nèi)容相吻合。

3 UI界面在網(wǎng)頁設(shè)計中的用戶體驗(yàn)與人機(jī)交互效果

3.1 網(wǎng)站的結(jié)構(gòu)布局

網(wǎng)站的結(jié)構(gòu)布局對一個網(wǎng)站是否被關(guān)注起著至關(guān)重要的作用。例如一個網(wǎng)站的首頁如果結(jié)構(gòu)布局凌亂不堪，視覺感官令人厭煩，那么將會造成瀏覽者對其關(guān)注的吸引力下降。下圖所示的內(nèi)容為優(yōu)酷TV的結(jié)構(gòu)布局。

根據(jù)圖中所示內(nèi)容，網(wǎng)站結(jié)構(gòu)布局具有簡潔化的特點(diǎn)。電影、電視劇、綜藝視頻等分區(qū)之間的界限較為清晰。用戶可以在第一時間了解網(wǎng)站所提供的視頻的主要類型，進(jìn)而根據(jù)自己的需要，選擇視頻內(nèi)容。

3.2 24色相環(huán)的配色原理

在網(wǎng)頁設(shè)計中，色彩永遠(yuǎn)是最重要的一環(huán)。色彩是視覺信息傳達(dá)的要素。進(jìn)入一個網(wǎng)頁的瞬間，首先進(jìn)入視線的就是色彩，瀏覽者對網(wǎng)頁的整體感覺印象就會固定下來，如同人與人之間第一次見面。紅、黃、藍(lán)，我們稱它們?yōu)椤叭保叭笔巧喹h(huán)的基礎(chǔ)原色。把三原色等量的進(jìn)行混合，就可以得到三間色；綠色、紫色、橙色。通過間色等量混合的復(fù)色，便構(gòu)成了24種顏色的環(huán)，即24色相環(huán)。 如圖2所示。

24色相環(huán)的配色原理分為：互補(bǔ)色，對比色，鄰近色。

3.2.1 互補(bǔ)色

即“色相環(huán)”上相對的顏色，設(shè)計中搭配使用互補(bǔ)色，會產(chǎn)生沖突、刺激的視覺效果，是一種非常奪目的配色方案。當(dāng)然互補(bǔ)色不要直接用，要用中間色中和一下，中間色就是沒有感情色彩的顏色，如黑、白、灰。

3.2.2 對比色

即“色相環(huán)”上呈120°角的顏色，對比色設(shè)計方案雖然沒有互補(bǔ)色那么刺激眼球，但是會體現(xiàn)一種豪華和華麗，讓畫面更加生動和有生機(jī)。

3.2.3 鄰近色、同類色

鄰近色是“色相環(huán)”上呈90°角的顏色，同類色是“色相環(huán)”上呈60°角的顏色，使用鄰近色和同類色來做設(shè)計會使畫面顯得更加和諧、統(tǒng)一，給人舒適感。

圖1：優(yōu)酷TV結(jié)構(gòu)圖

圖2：二十四色相環(huán)

4 結(jié)論

在互聯(lián)網(wǎng)技術(shù)與新媒體技術(shù)的影響下，人工智能，虛擬現(xiàn)實(shí)等技術(shù)得到快速發(fā)展，人們在追求軟件的功能強(qiáng)大且可靠的情況下，也開始追求界面所帶的舒適視覺感。因此，UI設(shè)計開始從只重技術(shù)不重設(shè)計轉(zhuǎn)變?yōu)槎呒骖櫋Ｒ粋€網(wǎng)站，在能夠準(zhǔn)確表達(dá)它要傳達(dá)的意思的同時，需要給使用者良好的視覺感受和用戶體驗(yàn)。所以，只有將技術(shù)和設(shè)計、良好的互動體驗(yàn)結(jié)合起來才能達(dá)到更好的效果，實(shí)現(xiàn)更合理的人機(jī)交互。而UI設(shè)計就是為了實(shí)現(xiàn)這些目的而服務(wù)的。因此，UI設(shè)計不僅是一種創(chuàng)意，更是科學(xué)技術(shù)與藝術(shù)設(shè)計相結(jié)合的產(chǎn)物。