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

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

1)深入用戶分析

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

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

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

例如：對(duì)于科學(xué)用戶和對(duì)于電腦入門用戶的設(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)以滿足用戶的需要。

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

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

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

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

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

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

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

1)一致性原則

每個(gè)新的系統(tǒng)對(duì)用戶來(lái)說(shuō)都是一次新的學(xué)習(xí)過(guò)程，如果界面風(fēng)格經(jīng)常變化，不保持統(tǒng)一，無(wú)疑更增加了用戶的學(xué)習(xí)難度，也許會(huì)導(dǎo)致用戶的厭煩。比如：一頁(yè)的導(dǎo)航條是圖片型的放在頁(yè)面頂部橫排的，而在第二頁(yè)導(dǎo)航條卻成了文字型居左豎排，用戶會(huì)為了捉摸不清設(shè)計(jì)師的意圖而大光其火。再比如，有些設(shè)計(jì)師考慮到用戶方便，在頁(yè)面上放置了后退的按鈕，但是要是不注意保持一致的話，用戶也許會(huì)糊涂后退、回首頁(yè)、BACK、上一頁(yè)這些按鈕究竟有什么區(qū)別?也許非常惱火你是不是拿他在開涮!所以在界面風(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ì)保持高度一致性，用戶不必進(jìn)行過(guò)多的學(xué)習(xí)就可以掌握其共性;還可以把局部的知識(shí)和經(jīng)驗(yàn)推廣使用到其他場(chǎng)合。人機(jī)界面設(shè)計(jì)的一致性要求對(duì)構(gòu)成易學(xué)易用是極為重要的。

這樣得到的好處：

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

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

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

元素外觀要一致

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

交互行為要一致

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

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

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

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ì)涉及的要素比較多，文件類型復(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ò)用戶認(rèn)可的文件)

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

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

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

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

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

* 分辨率：

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

* 字體大小：

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

* 考慮特殊情況：

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

* 編寫幫助：

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

3)可用性原則

易理解

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

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

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

可達(dá)到

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

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

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

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

可控制

軟件的交互流程，用戶可以控制。

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

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

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

1)用戶調(diào)研

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

2)產(chǎn)品分析

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

3)產(chǎn)品定位

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

4)環(huán)境分析

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

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

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

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

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

7)確定界面

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

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

包括為吸引用戶的注意所進(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)需求分析后，開發(fā)出一個(gè)滿足系統(tǒng)摹本要求的、簡(jiǎn)單的、可運(yùn)行系統(tǒng)給用戶試用，讓用戶進(jìn)行評(píng)價(jià)提出改進(jìn)意見，進(jìn)一步完善系統(tǒng)的需求規(guī)格和系統(tǒng)設(shè)計(jì);

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

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

11)維護(hù)階段

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

網(wǎng)頁(yè)標(biāo)題：成都網(wǎng)站設(shè)計(jì)_UI設(shè)計(jì)概述
本文URL：http://www.rwnh.cn/news/58496.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)網(wǎng)站制作、云服務(wù)器、ChatGPT、軟件開發(fā)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(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)