網(wǎng)站用戶(hù)界面設(shè)計(jì)與表現(xiàn)分析

孫丹

摘 要 基于用戶(hù)界面設(shè)計(jì)思想，闡述網(wǎng)站開(kāi)發(fā)制作中的要點(diǎn)，在界面設(shè)計(jì)中導(dǎo)航與圖標(biāo)的設(shè)計(jì)要點(diǎn)，達(dá)到提升網(wǎng)站用戶(hù)體驗(yàn)度的目的。

關(guān)鍵詞 網(wǎng)站；用戶(hù)界面；用戶(hù)體驗(yàn)

中圖分類(lèi)號(hào)：G712 文獻(xiàn)標(biāo)識(shí)碼：B

文章編號(hào)：1671-489X（2016）21-0033-02

在網(wǎng)站的設(shè)計(jì)與開(kāi)發(fā)中，一個(gè)良好的界面設(shè)計(jì)能夠給用戶(hù)帶來(lái)良好的用戶(hù)體驗(yàn)。對(duì)用戶(hù)體驗(yàn)度的關(guān)注度在逐漸提升，從最初提出用戶(hù)體驗(yàn)的時(shí)代，到將用戶(hù)體驗(yàn)以技術(shù)方法進(jìn)行呈現(xiàn)，經(jīng)歷多年的歷程。UI（User Interface，用戶(hù)界面）設(shè)計(jì)的應(yīng)用是將用戶(hù)體驗(yàn)思想實(shí)踐落實(shí)，是將用戶(hù)體驗(yàn)思想通過(guò)網(wǎng)站的導(dǎo)航、界面、圖標(biāo)、色彩等表現(xiàn)層的設(shè)計(jì)，逐一應(yīng)用理論并結(jié)合技術(shù)層面進(jìn)行實(shí)現(xiàn)，是用戶(hù)體驗(yàn)思想的一種顯性表達(dá)。

1 什么是界面？

界面是一個(gè)窗口，界面設(shè)計(jì)是開(kāi)發(fā)中最重要的方面。對(duì)于應(yīng)用軟件來(lái)說(shuō)，用戶(hù)界面對(duì)用戶(hù)的應(yīng)用十分重要，用戶(hù)通過(guò)界面可以使用該軟件，并且希望界面比較簡(jiǎn)單、便于使用。圖形用戶(hù)界面是當(dāng)前用戶(hù)界面的主流，當(dāng)前各類(lèi)圖形用戶(hù)界面具有的一個(gè)相同點(diǎn)就是應(yīng)用的窗口使用鍵盤(pán)和鼠標(biāo)作為輸入設(shè)備。目前界面設(shè)計(jì)領(lǐng)域已經(jīng)開(kāi)展到移動(dòng)端，移動(dòng)端的界面設(shè)計(jì)原則有別于PC端。但是無(wú)論是基于哪種設(shè)置，良好的界面設(shè)計(jì)是同樣重要的。

2 軟件界面設(shè)計(jì)的前期準(zhǔn)備工作

在制作一個(gè)項(xiàng)目設(shè)計(jì)前，應(yīng)該先確立好設(shè)計(jì)的主題。比如：一個(gè)圖書(shū)管理系統(tǒng)軟件的主題就是“圖書(shū)管理”，遠(yuǎn)程教育系統(tǒng)的主題就是“遠(yuǎn)程教育”。于是軟件界面的設(shè)計(jì)就要圍繞主題來(lái)進(jìn)行，讓用戶(hù)一看軟件的界面，就知道這個(gè)軟件是做什么的。不能讓軟件的界面與軟件的主題相差太多，如果一個(gè)電腦硬件管理系統(tǒng)的界面上都是和電腦無(wú)關(guān)的東西，如花草、山水，就不能反映該軟件的主題與功能，那么，這個(gè)軟件的界面就是失敗的。

美工作為界面美化的主要人員，不但要擁有藝術(shù)設(shè)計(jì)、包裝設(shè)計(jì)的才能，還應(yīng)該穿插整個(gè)項(xiàng)目，給界面程序設(shè)計(jì)人員提出系統(tǒng)參考意見(jiàn)。

3 確定界面設(shè)計(jì)原則

確定界面類(lèi)型時(shí)，需要考慮多方面的因素，如用戶(hù)的自身特性、系統(tǒng)的成本/效益、環(huán)境、系統(tǒng)任務(wù)等。這時(shí)，在著手進(jìn)行軟件界面設(shè)計(jì)前，必須在心里有一個(gè)輪廓，對(duì)要設(shè)計(jì)的軟件的功能有所了解，同時(shí)對(duì)該軟件的界面設(shè)計(jì)有成形的構(gòu)想，還要遵守界面設(shè)計(jì)的原則。

1）一致性原則。一致性主要體現(xiàn)在軟件的顯示方式和概念模式的一致性，并且在類(lèi)似的情況下具有一樣的操作序列，如在幫助、提示及菜單中產(chǎn)生相同的術(shù)語(yǔ)，具體是指在不同的應(yīng)用系統(tǒng)中具有相似的布局、相似的外觀界面、相似的信息顯示及相似的交互方式等。界面設(shè)計(jì)保持高度一致性，這樣用戶(hù)使用不同的軟件時(shí)可以掌握軟件的共性，將局部的經(jīng)驗(yàn)和知識(shí)推廣到其他場(chǎng)合。界面設(shè)計(jì)的一致性要求對(duì)于用戶(hù)的軟件應(yīng)用十分重要。

2）控件的使用、提示信息窗口風(fēng)格、顏色、信息措辭做到一致，遵循統(tǒng)一的標(biāo)準(zhǔn)。這樣做具有以下優(yōu)勢(shì)：

①通過(guò)一致的界面風(fēng)格，可以讓用戶(hù)建立起一樣的心理模式，對(duì)于一個(gè)界面使用熟練之后，切換到下一界面，用戶(hù)也容易使用，容易理解語(yǔ)句，推測(cè)出界面的各種功能；

②給用戶(hù)統(tǒng)一的感覺(jué)，不覺(jué)得混亂，而是心情愉快，支持度增加。

用戶(hù)界面簡(jiǎn)稱(chēng)為UI，通過(guò)對(duì)UI進(jìn)行設(shè)計(jì)，其設(shè)計(jì)內(nèi)容包括軟件的操作邏輯、人機(jī)交互、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)讓軟件變得有個(gè)性、有品位，并且操作簡(jiǎn)單、舒適、自由，充分體現(xiàn)軟件的特點(diǎn)及定位。人機(jī)交互，即人與設(shè)備之間的交流，UI設(shè)計(jì)在設(shè)備之間成功地充當(dāng)了翻譯的角色。

4 網(wǎng)站中UI的重要地位

網(wǎng)站的設(shè)計(jì)與開(kāi)發(fā)不僅要適用于PC機(jī)的模式使用，更要適用于移動(dòng)設(shè)備使用，使兩者的操作都具有良好的用戶(hù)體驗(yàn)。這就給很多網(wǎng)站的UI設(shè)計(jì)提出很高的要求，同時(shí)也凸顯出UI在當(dāng)前網(wǎng)站中的重要性。網(wǎng)站最大的門(mén)檻就是取得用戶(hù)信任，而UI設(shè)計(jì)直接影響用戶(hù)的體驗(yàn)和網(wǎng)站的形象，用戶(hù)考察一個(gè)網(wǎng)站是否有實(shí)力，是否是正當(dāng)網(wǎng)站，UI是首要因素。一個(gè)網(wǎng)站UI做得好，可以讓網(wǎng)站的形象在用戶(hù)心中得到提升，而且能讓用戶(hù)得到瀏覽的體驗(yàn)，甚至能決定一個(gè)網(wǎng)站的轉(zhuǎn)化率。

5 UI設(shè)計(jì)在網(wǎng)站設(shè)計(jì)中的體現(xiàn)

UI設(shè)計(jì)的成功之處就是為網(wǎng)站帶來(lái)比較高的瀏覽量與轉(zhuǎn)化率。對(duì)于很多網(wǎng)站平臺(tái)的建立，UI的設(shè)計(jì)不僅體現(xiàn)在其從界面所表現(xiàn)的色彩、樣式上，還體現(xiàn)在導(dǎo)航系統(tǒng)設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、不同類(lèi)型網(wǎng)站的風(fēng)格定位等方面。

導(dǎo)航的設(shè)計(jì)與使用 構(gòu)成網(wǎng)站導(dǎo)航的是網(wǎng)頁(yè)中的焦點(diǎn)元素，它們讓用戶(hù)清晰直觀地找到自己想要的東西，引導(dǎo)用戶(hù)去尋找網(wǎng)站上最重要的信息，以達(dá)到銷(xiāo)售或者查詢(xún)等目的。導(dǎo)航設(shè)計(jì)并沒(méi)有一個(gè)統(tǒng)一的設(shè)計(jì)方法，每個(gè)網(wǎng)站由于其目標(biāo)、需求、設(shè)計(jì)手法、運(yùn)營(yíng)等諸多因素影響，導(dǎo)致它們?cè)趯?dǎo)航設(shè)計(jì)上千差萬(wàn)別，但是導(dǎo)航設(shè)計(jì)還是有基本的規(guī)律和原則的，確保組織架構(gòu)的可靠性。

1）確定信息架構(gòu)。信息架構(gòu)是合理的組織信息的展現(xiàn)形式，支撐起網(wǎng)站內(nèi)容的骨架。信息架構(gòu)的主要任務(wù)是為信息與用戶(hù)認(rèn)知之間構(gòu)建一座暢通的橋梁。更重要的是，要從用戶(hù)的角度來(lái)看待網(wǎng)站內(nèi)容，從一個(gè)用戶(hù)的角度去看待一個(gè)網(wǎng)站的信息需求。對(duì)針對(duì)頁(yè)面信息的完整性、連續(xù)性、可靠性等問(wèn)題進(jìn)行解決，明確網(wǎng)站所要達(dá)成的目標(biāo)，針對(duì)網(wǎng)站的用戶(hù)群去解決登錄、訂閱等邏輯問(wèn)題。

2）保持簡(jiǎn)單的風(fēng)格。絕大多數(shù)的網(wǎng)站瀏覽者可能會(huì)一致認(rèn)同這一點(diǎn)：網(wǎng)站的導(dǎo)航區(qū)域要盡可能設(shè)計(jì)得簡(jiǎn)單。的確，復(fù)雜而擁擠的導(dǎo)航會(huì)阻礙網(wǎng)站的整體可用性。

圖標(biāo)的設(shè)計(jì)與使用 對(duì)于用戶(hù)接收的信息而言，相對(duì)于文字信息的表現(xiàn)，圖像的信息表達(dá)能力要遠(yuǎn)遠(yuǎn)大于文字，在有限的時(shí)間和空間里，把界面中精彩的文字描述轉(zhuǎn)化為一個(gè)簡(jiǎn)練而意義明確的圖標(biāo)，就成為滿(mǎn)足用戶(hù)需求的有效途徑。更深一步，圖標(biāo)的應(yīng)用讓整個(gè)界面與人之間的交互更便捷，使情感化設(shè)計(jì)和人性化設(shè)計(jì)得以回歸。在各種終端交互界面中，圖標(biāo)不僅起到代替文字描述以節(jié)約空間的作用，不僅是一種裝飾圖形與符號(hào)，更重要的是它發(fā)揮著交互性、情感化、指代性、隱喻性等作用。人機(jī)界面交互中，一個(gè)小小的icon（圖標(biāo)）是減小用戶(hù)閱讀負(fù)擔(dān)，實(shí)現(xiàn)界面友好性、界面情感化等交互目的的重要途徑。

1）圖標(biāo)遵循的設(shè)計(jì)原則。圖標(biāo)在設(shè)計(jì)與運(yùn)用上要形象，語(yǔ)言要單一，表現(xiàn)要概括，提取圖像中不可或缺的元素去表達(dá)；在構(gòu)圖上要飽滿(mǎn)，圖像空間占有率要在75%以上，從視覺(jué)上要一樣大；形象造型上體積要豐滿(mǎn)，來(lái)增加構(gòu)圖的識(shí)別性，太復(fù)雜會(huì)降低圖標(biāo)的識(shí)別度；在用色方面，前景色與背景色要有足夠的反差，用明暗的反差、冷暖的反差去對(duì)比表現(xiàn)。當(dāng)用兩個(gè)形象語(yǔ)言表達(dá)一個(gè)圖標(biāo)時(shí)，要有主次，不能同等對(duì)待。

2）圖標(biāo)設(shè)計(jì)的四要素。

①達(dá)意性。圖標(biāo)要清楚地表達(dá)設(shè)備要處理的功能，圖標(biāo)的核心價(jià)值是傳達(dá)功能含義。

②概括性。在圖標(biāo)的表現(xiàn)中，可有可無(wú)的東西不能太多，不是原始圖像的直接使用，要過(guò)濾掉可有可無(wú)的元素，對(duì)凸顯其特征的內(nèi)容進(jìn)行展示，從現(xiàn)實(shí)生活中提取物品最典型的特點(diǎn)進(jìn)行創(chuàng)作。

③可用性。所有的設(shè)計(jì)都要具有可用性，圖標(biāo)設(shè)計(jì)與制作的本質(zhì)是要最終運(yùn)用到程序和網(wǎng)站中?？捎眯缘膽?yīng)用包括了可識(shí)別性和可開(kāi)發(fā)性，圖標(biāo)在任何設(shè)備環(huán)境下都能夠被用戶(hù)所識(shí)別，所設(shè)計(jì)的圖標(biāo)能真正地運(yùn)用于實(shí)際的網(wǎng)站中。

④情感性。圖標(biāo)的設(shè)計(jì)與使用要貼近用戶(hù)的生活、經(jīng)驗(yàn)、情感，使用戶(hù)具有親切感，增加用戶(hù)對(duì)網(wǎng)站的信任，提升用戶(hù)體驗(yàn)。

圖標(biāo)的風(fēng)格要統(tǒng)一 在一個(gè)網(wǎng)站上運(yùn)用的圖標(biāo)，其風(fēng)格定位要統(tǒng)一，要從形狀與取向的統(tǒng)一、透視的統(tǒng)一、光線的統(tǒng)一、材質(zhì)的統(tǒng)一、色彩的統(tǒng)一等方面對(duì)圖標(biāo)進(jìn)行定位，以保證網(wǎng)站風(fēng)格的統(tǒng)一性。

6 展望與發(fā)展

UI設(shè)計(jì)是一個(gè)新興的設(shè)計(jì)領(lǐng)域，是高于平面設(shè)計(jì)之上的、基于用戶(hù)體驗(yàn)的設(shè)計(jì)思念理論而形成的一門(mén)專(zhuān)門(mén)的學(xué)科，并且隨著人們對(duì)用戶(hù)體驗(yàn)的關(guān)注程度越來(lái)越高，對(duì)UI設(shè)計(jì)的要求也會(huì)逐步增高。UI設(shè)計(jì)的應(yīng)用領(lǐng)域也會(huì)隨著移動(dòng)端技術(shù)的不斷成熟與發(fā)展，越來(lái)越廣泛地?cái)U(kuò)展到人們的生活中。參考文獻(xiàn)

[1]于松翠.基于用戶(hù)體驗(yàn)的網(wǎng)站界面設(shè)計(jì)研究[D].西安：西安工程大學(xué)，2013.

[2]黃曉斌，邱明輝.網(wǎng)站用戶(hù)界面設(shè)計(jì)模式語(yǔ)言的比較研究[J].現(xiàn)代圖書(shū)情報(bào)技術(shù)，2011（10）：12-17.

[3]楊佩佩，華薇娜.電子商務(wù)網(wǎng)站用戶(hù)界面的比較與分析[J].科技情報(bào)開(kāi)發(fā)與經(jīng)濟(jì)，2008，18（30）：155-157.