UI設(shè)計(jì)在項(xiàng)目開(kāi)發(fā)過(guò)程中工作量大、最艱苦也是最難以控制的階段。不管一座大樓的設(shè)計(jì)藍(lán)圖多宏偉，若沒(méi)有管道工、泥瓦匠、水電工等各種工匠一磚一瓦地艱辛積累，密切協(xié)作，這座大樓始終是空中樓閣、海市蜃樓。

一、界面設(shè)計(jì)

1)深入用戶(hù)分析

要進(jìn)行界面開(kāi)發(fā)設(shè)計(jì)，用戶(hù)分析是一步?？偹苤?，進(jìn)行任務(wù)和用戶(hù)分析，以及相關(guān)調(diào)研的必要性和重要性。用戶(hù)是計(jì)算機(jī)資源，軟件界面信息的使用者，由于目前計(jì)算機(jī)系統(tǒng)以及相關(guān)的信息技術(shù)應(yīng)用范圍很廣，其用戶(hù)范圍也遍及各個(gè)領(lǐng)域。我們必須了解各類(lèi)用戶(hù)的習(xí)性，技能、知識(shí)和經(jīng)驗(yàn)，以便預(yù)測(cè)不同類(lèi)別的用戶(hù)對(duì)界面有什么不同的需要與反應(yīng)，為交互系統(tǒng)的分析設(shè)計(jì)提供依據(jù)和參考，使設(shè)計(jì)出的交互系統(tǒng)更適合于各類(lèi)用戶(hù)的使用。由于用戶(hù)具有知識(shí)、視聽(tīng)能力、智能、記憶能力、可學(xué)習(xí)性、動(dòng)機(jī)、受訓(xùn)練程度、以及易遺忘、易出錯(cuò)等特性，使得對(duì)用戶(hù)的分類(lèi)、分析和設(shè)計(jì)變得更加復(fù)雜化。另外，為了設(shè)計(jì)友好而又人性化的界面，也必須考慮各類(lèi)不同類(lèi)型用戶(hù)的人文因素。

在軟件設(shè)計(jì)過(guò)程中，需求設(shè)計(jì)角色會(huì)確定軟件的目標(biāo)用戶(hù)，獲取最終用戶(hù)和直接用戶(hù)的需求。

用戶(hù)交互要考慮到目標(biāo)用戶(hù)的不同引起的交互設(shè)計(jì)重點(diǎn)的不同。

例如：對(duì)于科學(xué)用戶(hù)和對(duì)于電腦入門(mén)用戶(hù)的設(shè)計(jì)重點(diǎn)就不同。

2)設(shè)定合理的交互方式

軟件界面是人—機(jī)之間的信息界面，交互是一個(gè)結(jié)合計(jì)算機(jī)科學(xué)、美學(xué)、心理學(xué)、人機(jī)工程學(xué)等工業(yè)和商業(yè)領(lǐng)域的行為，其目標(biāo)是促進(jìn)設(shè)計(jì)，執(zhí)行和優(yōu)化信息與通信系統(tǒng)以滿足用戶(hù)的需要。

在交互過(guò)程中，交互設(shè)計(jì)關(guān)系到用戶(hù)界面的外觀與行為，它不完全受軟件的約束。界面設(shè)計(jì)師以及決定如何與用戶(hù)進(jìn)行交互的工程師應(yīng)該在這一領(lǐng)域深入研究。在界面開(kāi)發(fā)過(guò)程中，他們必須貼近用戶(hù)，或者與用戶(hù)一道來(lái)討論并得出結(jié)果，所以他們的工作是較為辛苦但是最具有意義的。

另一方面，界面與軟件代碼的生成，代碼本身的意義以及功能的實(shí)現(xiàn)是緊密聯(lián)系的。因此編譯代碼的人同樣也應(yīng)該在這方面做深入的研究。過(guò)去，編碼人員只是單獨(dú)地進(jìn)行軟件研發(fā)，而缺少必要的美學(xué)知識(shí)和界面專(zhuān)門(mén)技術(shù)來(lái)處理交互的問(wèn)題。不幸的是，最終的結(jié)果往往不是用戶(hù)所期望的。對(duì)于用戶(hù)而言，最好的交互方式讓程序員去實(shí)現(xiàn)往往是最難的，由此矛盾出現(xiàn)了，這使得很多專(zhuān)家或者工程師膚淺地應(yīng)付一些交互方面的問(wèn)題。以至于在軟件開(kāi)發(fā)完成之后，這些專(zhuān)家和工程師驚訝地發(fā)現(xiàn)，用戶(hù)對(duì)他們所實(shí)現(xiàn)的特征感到一片茫然，不知所措，通常選用另外一種方式進(jìn)行交互。不同類(lèi)型的目標(biāo)用戶(hù)有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來(lái)源于其原有的針對(duì)現(xiàn)實(shí)的交互流程、已有軟件工具的交互流程。

當(dāng)然還要在此基礎(chǔ)上通過(guò)調(diào)研分析找到用戶(hù)希望達(dá)到的交互效果，并且以流程確認(rèn)下來(lái)。

3)提示和引導(dǎo)用戶(hù)

軟件最終是用戶(hù)的使用工具。因此應(yīng)該由用戶(hù)來(lái)操作和控制軟件。軟件響應(yīng)用戶(hù)的動(dòng)作和設(shè)定的規(guī)則。

交互系統(tǒng)的反饋是指用戶(hù)從計(jì)算機(jī)一方得到信息，表示計(jì)算機(jī)對(duì)用戶(hù)的動(dòng)作所做的反應(yīng)。對(duì)于用戶(hù)交互的結(jié)果和反饋，提示用戶(hù)結(jié)果和反饋信息，引導(dǎo)用戶(hù)進(jìn)行用戶(hù)需要的下一步操作。如果系統(tǒng)沒(méi)有反饋，用戶(hù)就無(wú)法判斷他的操作是否為計(jì)算機(jī)所接受，是否正確，以及操作的效果是什么.反饋信息的呈現(xiàn)方式可以是多種多樣的，如文本、圖形和聲音等。

二、界面設(shè)計(jì)遵循的規(guī)則：

1)一致性原則

每個(gè)新的系統(tǒng)對(duì)用戶(hù)來(lái)說(shuō)都是一次新的學(xué)習(xí)過(guò)程，如果界面風(fēng)格經(jīng)常變化，不保持統(tǒng)一，無(wú)疑更增加了用戶(hù)的學(xué)習(xí)難度，也許會(huì)導(dǎo)致用戶(hù)的厭煩。比如：一頁(yè)的導(dǎo)航條是圖片型的放在頁(yè)面頂部橫排的，而在第二頁(yè)導(dǎo)航條卻成了文字型居左豎排，用戶(hù)會(huì)為了捉摸不清設(shè)計(jì)師的意圖而大光其火。再比如，有些設(shè)計(jì)師考慮到用戶(hù)方便，在頁(yè)面上放置了后退的按鈕，但是要是不注意保持一致的話，用戶(hù)也許會(huì)糊涂后退、回首頁(yè)、BACK、上一頁(yè)這些按鈕究竟有什么區(qū)別?也許非常惱火你是不是拿他在開(kāi)涮!所以在界面風(fēng)格設(shè)計(jì)上應(yīng)該遵循以下原則：

設(shè)計(jì)目標(biāo)要一致

軟件中往往存在多個(gè)組成部分(組件、元素)。無(wú)論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)，做到真正的一致。

如在提示、菜單和幫助中產(chǎn)生相同的術(shù)語(yǔ);具體是指在不同的應(yīng)用系統(tǒng)中都具有相似的界面外觀、布局、相似的交互方式以及相似的信息顯示等。界面設(shè)計(jì)保持高度一致性，用戶(hù)不必進(jìn)行過(guò)多的學(xué)習(xí)就可以掌握其共性;還可以把局部的知識(shí)和經(jīng)驗(yàn)推廣使用到其他場(chǎng)合。人機(jī)界面設(shè)計(jì)的一致性要求對(duì)構(gòu)成易學(xué)易用是極為重要的。

這樣得到的好處：

1：使用戶(hù)使用起來(lái)能夠建立起精確的心里模型，使用熟練了一個(gè)界面后，切換到另外一個(gè)界面能夠很輕松的推測(cè)出各種功能，語(yǔ)句理解也不需要費(fèi)神理解。

2：降低培訓(xùn)、支持成本，支持人員不會(huì)行費(fèi)力逐個(gè)指導(dǎo)。

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

元素外觀要一致

交互元素的外觀往往影響用戶(hù)的交互效果。同一個(gè)(類(lèi))軟件采用一致風(fēng)格的外觀，對(duì)于保持用戶(hù)焦點(diǎn)，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒(méi)有特別統(tǒng)一的衡量方法。因此需要對(duì)目標(biāo)用戶(hù)進(jìn)行調(diào)查取得反饋。

交互行為要一致

在交互模型中，不同類(lèi)型的元素用戶(hù)觸發(fā)其對(duì)應(yīng)的行為事件后，其交互行為需要一致。

例如：所有需要用戶(hù)確認(rèn)操作的對(duì)話框都至少包含確認(rèn)和放棄兩個(gè)按鈕。

對(duì)于交互行為一致性原則比較極端的理念是相同類(lèi)型的交互元素所引起的行為事件相同。但是我們可以看到這個(gè)理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個(gè)理念設(shè)計(jì)，會(huì)更加簡(jiǎn)化用戶(hù)操作流程。

2)界面元素對(duì)象化

在程序設(shè)計(jì)中需要注重模塊化，而界面設(shè)計(jì)中對(duì)象化同樣非常重要。將界面元素對(duì)象化，比如底部版權(quán)信息、導(dǎo)航條等，圖片、JS也盡可能復(fù)用，比如站點(diǎn)標(biāo)志、搜索按鈕、滾動(dòng)信息的JS文件等等;

建立標(biāo)準(zhǔn)的文檔管理和設(shè)計(jì)規(guī)范：界面設(shè)計(jì)涉及的要素比較多，文件類(lèi)型復(fù)雜，而界面文件往往還需要另外通過(guò)程序進(jìn)行編譯，這就要求了界面設(shè)計(jì)人員必須建立規(guī)的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)的文檔管理方法：

* 制定文件命名標(biāo)準(zhǔn)

* 設(shè)定文件統(tǒng)一路徑

* 保存原始創(chuàng)作文件(例如PSD、Fla源文件)

* 最終完成文件(經(jīng)過(guò)用戶(hù)認(rèn)可的文件)

* 單獨(dú)管理摸版文件(經(jīng)過(guò)編譯或嵌入程序的文件)

* 考慮用戶(hù)偏好習(xí)慣和方便性：

我們經(jīng)?？梢月?tīng)到界面設(shè)計(jì)師說(shuō)：“怎么在我機(jī)器上看得好好的，怎么在你那里就變樣了?”其實(shí)道理很簡(jiǎn)單，用戶(hù)的操作環(huán)境和習(xí)慣與設(shè)計(jì)環(huán)境是有差別的，界面設(shè)計(jì)同程序一樣需要進(jìn)行測(cè)試，主要測(cè)試的對(duì)象為：

* 瀏覽器類(lèi)型和版本兼容問(wèn)題：

假如有個(gè)很重要的菜單是需要IE5.5支持的，但是用戶(hù)萬(wàn)一使用的是IE4.0版本，那么這個(gè)菜單就再也打不開(kāi)，結(jié)果可想而知;

* 分辨率：

界面設(shè)計(jì)師的屏幕也許是17寸的，分辨率甚至做到1280×960都是可以接受的，但是用戶(hù)的如果用的14寸顯示器，分辨率只能達(dá)到640×480，界面布局看起來(lái)會(huì)很可笑;

* 字體大小：

利用樣式表精確控制頁(yè)面元素，特別是字體是很重要的。有不少用戶(hù)喜歡更改瀏覽器默認(rèn)的字體顯示大小，當(dāng)設(shè)計(jì)師看到用戶(hù)將字體顯示調(diào)整成大而將表格撐得亂七八糟的時(shí)候，或許會(huì)痛心疾首的;

* 考慮特殊情況：

用戶(hù)或許在瀏覽器設(shè)置了禁止顯示圖片或禁止JS腳本等，有必要為圖片設(shè)置好尺寸以免影響其他元素的顯示，并有其他的方式代替JS需要顯示的效果和信息。

* 編寫(xiě)幫助：

無(wú)論多么出色的界面設(shè)計(jì)對(duì)用戶(hù)來(lái)說(shuō)都是陌生的，那么編寫(xiě)站點(diǎn)幫助或軟件幫助是個(gè)非常有效的辦法，把你的設(shè)計(jì)意圖和使用介紹明明白白地告訴用戶(hù)，在用戶(hù)遇到困難的時(shí)候能夠得到最快的幫助，不但可以降低用戶(hù)的不滿程度，同時(shí)可以幫助用戶(hù)更加系統(tǒng)深入地學(xué)習(xí)和掌握。

3)可用性原則

易理解

軟件要為用戶(hù)使用，用戶(hù)必須可以理解軟件各元素對(duì)應(yīng)的功能。

如果不能為用戶(hù)理解，那么需要提供一種非破壞性的途徑，使得用戶(hù)可以通過(guò)對(duì)該元素的操作，理解其對(duì)應(yīng)的功能。

例如：刪除操作元素。用戶(hù)可以點(diǎn)擊刪除操作按鈕，提示用戶(hù)如何刪除操作或者是否確認(rèn)刪除操作，用戶(hù)可以更加詳細(xì)的理解該元素對(duì)應(yīng)的功能，同時(shí)可以取消該操作。

可達(dá)到

用戶(hù)是交互的中心，交互元素對(duì)應(yīng)用戶(hù)需要的功能。因此交互元素必須可以被用戶(hù)控制。

用戶(hù)可以用諸如鍵盤(pán)、鼠標(biāo)之類(lèi)的交互設(shè)備通過(guò)移動(dòng)和觸發(fā)已有的交互元素達(dá)到其它在此之前不可見(jiàn)或者不可交互的交互元素。

要注意的是交互的次數(shù)會(huì)影響可達(dá)到的效果。當(dāng)一個(gè)功能被深深隱藏(一般來(lái)說(shuō)超過(guò)4層)那么用戶(hù)達(dá)到該元素的幾率就大大降低了。

可達(dá)到的效果也同界面設(shè)計(jì)有關(guān)。過(guò)于復(fù)雜的界面會(huì)影響可達(dá)到的效果。

可控制

軟件的交互流程，用戶(hù)可以控制。

功能的執(zhí)行流程，用戶(hù)可以控制。

如果確實(shí)無(wú)法提供控制，則用能為目標(biāo)用戶(hù)理解的方式提示用戶(hù)。

三、界面設(shè)計(jì)的基本步驟

1)用戶(hù)調(diào)研

擬定需求，綜合分析得到產(chǎn)品使用情況的一個(gè)大致概貌。

2)產(chǎn)品分析

根據(jù)產(chǎn)品的復(fù)雜性、難易程度等，詳細(xì)分解任務(wù)動(dòng)作，進(jìn)行合理分工，確定適合于用戶(hù)的交互方式;

3)產(chǎn)品定位

在了解了用戶(hù)，了解了相關(guān)產(chǎn)品后，針對(duì)產(chǎn)品做出的定位才會(huì)更加明確。

4)環(huán)境分析

確定系統(tǒng)的硬、軟件支持環(huán)境及接口，向用戶(hù)提供各類(lèi)文檔要求等;

5)屏幕顯示和布局設(shè)計(jì)

制定屏幕顯示信息的內(nèi)容和界面顯示的次序，然后進(jìn)行屏幕總體布局和顯示結(jié)構(gòu)設(shè)計(jì)。

6)幫助和出錯(cuò)信息設(shè)計(jì)

決定和安排幫助信息和出錯(cuò)信息的內(nèi)容，組織查詢(xún)方法， 井進(jìn)行出錯(cuò)信息、幫助信息的顯示格式設(shè)計(jì);

7)確定界面

根據(jù)用戶(hù)的自身特性.以及產(chǎn)品分析和定位，確定使用的開(kāi)發(fā)環(huán)境和產(chǎn)品布局得出產(chǎn)品的界面設(shè)計(jì)結(jié)構(gòu)圖，確立產(chǎn)品界面原型：

8)視覺(jué)設(shè)計(jì)

包括為吸引用戶(hù)的注意所進(jìn)行的增強(qiáng)顯示的設(shè)計(jì)，例如，采取運(yùn)動(dòng)，改變形狀、大小、顏色、亮度、環(huán)境等特征(如加線，加框、前景和背景設(shè)計(jì)等)，還包括創(chuàng)新的設(shè)計(jì)以增加亮點(diǎn)，或者應(yīng)用多媒體手段等;

9)原型試用

在經(jīng)過(guò)初步系統(tǒng)需求分析后，開(kāi)發(fā)出一個(gè)滿足系統(tǒng)摹本要求的、簡(jiǎn)單的、可運(yùn)行系統(tǒng)給用戶(hù)試用，讓用戶(hù)進(jìn)行評(píng)價(jià)提出改進(jìn)意見(jiàn)，進(jìn)一步完善系統(tǒng)的需求規(guī)格和系統(tǒng)設(shè)計(jì);

10)綜合測(cè)試與訐估

這個(gè)階段的關(guān)鍵任務(wù)是通過(guò)各類(lèi)型的測(cè)試與評(píng)估，使系統(tǒng)達(dá)到預(yù)定的要求.它可以采取多種方法，如試驗(yàn)法、用戶(hù)反饋、專(zhuān)家分析、軟件測(cè)試等，對(duì)軟件界面的諸多因素如功能性、可靠性、效率、美觀性等進(jìn)行訐估，以獲取用戶(hù)對(duì)界面的滿意度，便于盡早發(fā)現(xiàn)錯(cuò)誤或者不滿意的地方，以改進(jìn)和完善系統(tǒng)設(shè)計(jì)。

11)維護(hù)階段

維護(hù)階段的關(guān)鍵任務(wù)是：通過(guò)各類(lèi)必要的維護(hù)活動(dòng)，使系統(tǒng)持久地滿足用戶(hù)的需要。

標(biāo)題名稱(chēng)：成都網(wǎng)站設(shè)計(jì)_UI設(shè)計(jì)概述
當(dāng)前路徑：http://www.rwnh.cn/news46/58496.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、服務(wù)器托管、軟件開(kāi)發(fā)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)