成都網(wǎng)站設(shè)計_UI設(shè)計概述

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

一、界面設(shè)計

1)深入用戶分析

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

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

用戶交互要考慮到目標用戶的不同引起的交互設(shè)計重點的不同。

例如：對于科學用戶和對于電腦入門用戶的設(shè)計重點就不同。

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

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

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

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

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

3)提示和引導用戶

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

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

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

1)一致性原則

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

設(shè)計目標要一致

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

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

這樣得到的好處：

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

2：降低培訓、支持成本，支持人員不會行費力逐個指導。

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

元素外觀要一致

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

交互行為要一致

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

例如：所有需要用戶確認操作的對話框都至少包含確認和放棄兩個按鈕。

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

2)界面元素對象化

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

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

* 制定文件命名標準

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

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

* 最終完成文件(經(jīng)過用戶認可的文件)

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

* 考慮用戶偏好習慣和方便性：

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

* 瀏覽器類型和版本兼容問題：

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

* 分辨率：

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

* 字體大?。?/p>

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

* 考慮特殊情況：

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

* 編寫幫助：

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

3)可用性原則

易理解

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

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

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

可達到

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

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

要注意的是交互的次數(shù)會影響可達到的效果。當一個功能被深深隱藏(一般來說超過4層)那么用戶達到該元素的幾率就大大降低了。

可達到的效果也同界面設(shè)計有關(guān)。過于復雜的界面會影響可達到的效果。

可控制

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

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

如果確實無法提供控制，則用能為目標用戶理解的方式提示用戶。

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

1)用戶調(diào)研

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

2)產(chǎn)品分析

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

3)產(chǎn)品定位

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

4)環(huán)境分析

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

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

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

6)幫助和出錯信息設(shè)計

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

7)確定界面

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

8)視覺設(shè)計

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

9)原型試用

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

10)綜合測試與訐估

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

11)維護階段

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

標題名稱：成都網(wǎng)站設(shè)計_UI設(shè)計概述
當前路徑：http://www.bm7419.com/news46/58496.html

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

廣告

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