《UI界面設計》教案(總20頁

1、教 案課程名稱：UI界面設計授課教師：制訂時間：UI界面設計第一章 UI綜述課 題：UI綜述授課教師：教學目標：通過本章學習使學生了解UI在中國的發(fā)展，以及UI的是什么。教學重點：掌握UI在中國的發(fā)展，以及UI是什么。教學難點：掌握UI是什么。教學準備：課本、參考圖形教學方法：講授、討論、案例分析教 材：教學時間：8課時教學內容：UI在中國的發(fā)展，以及UI是什么UI即User Interface(用戶界面)的簡稱。UI設計則是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由,充分體現(xiàn)軟件的定位和特點。第一節(jié) UI是

2、什么軟件設計可分為兩個部分：編碼設計與UI設計。編碼設計大家都很熟悉，但是 UI設計還是一個很陌生的詞，即使一些專門從事網(wǎng)站與多媒體設計的人也不完全理解UI的意思。UI的本意是用戶界面，是英文User和 interface的縮寫。從字面上看是用戶與界面2個組成部分，但實際上還包括用戶與界面之間的交互關系。在飛速發(fā)展的電子產(chǎn)品中，界面設計工作一點點的被重視起來。做界面設計的“美工”也隨之被稱之為“UI設計師”或“UI工程師”。其實軟件界面設計就像工業(yè)產(chǎn)品中的工業(yè)造型設計一樣，是產(chǎn)品的重要賣點。一個電子產(chǎn)品擁有美觀的界面會給人帶來舒適的視覺享受，拉近人與商品的距離，為商家創(chuàng)造賣點。界面設計不是單純

3、的美術繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設計，是建立在科學性之上的藝術設計。檢驗一個界面的標準既不是某個項目開發(fā)組領導的意見也不是項目成員投票的結果，而是終端用戶的感受。所以界面設計要和用戶研究緊密結合，是一個不斷為最終用戶設計滿意視覺效果的過程。第二節(jié) UI設計師是做什么的在中國，UI設計還是一個需要不斷成長的設計領域，但eicodesign,Tigocn, lkkui design, Robin design等國內知名設計機構已經(jīng)進入了探索UI設計的道路。UI設計從工作內容上來說分為3個方向。它主要是由UI 研究的3個因素決定的， 其分別是研究工具，研究人與界面的關

4、系，研究人。研究界面圖形設計師Graphic UI designer國內目前大部分UI工作者都是從事這個行業(yè)。也有人稱之為美工，但實際上不是單純意義上的美術工人，而是軟件產(chǎn)品的產(chǎn)品外形設計師。這些設計師大多是美術院校畢業(yè)的，其中大部分是有美術設計教育背景，例如工業(yè)外形設計，裝潢設計，信息多媒體設計等。研究人與界面的關系交互設計師，interaction designer在圖形界面產(chǎn)生之前，長期以來UI設計師就是指交互設計師。交互設計師的工作內容就是設計軟件的操作流程，樹狀結構，軟件的結構與操作規(guī)范（spec）等。一個軟件產(chǎn)品在編碼之前需要作的就是交互設計，并且確立交互模型，交互規(guī)范。交互設計師

5、一般都是軟件工程師背景居多。研究人用戶測試/研究工程師User experience engineer任何的產(chǎn)品為了保證質量都需要測試，軟件的編碼需要測試，自然UI設計也需要被測試。這個測試和編碼沒有任何關系，主要是測試交互設計的合理性以及圖形設計的美觀性。測試方法一般都是采用焦點小組，用目標用戶問卷的形式來衡量UI設計的合理性。這個職位很重要，如果沒有這個職位，UI設計的好壞只能憑借設計師的經(jīng)驗或者領導的審美來評判，這樣就會給企業(yè)帶來嚴重的風險性。用戶研究工程師一般是心理學人文學背景比較合適。綜上所述UI設計師就是：軟件圖形設計師、交互設計師和用戶研究工程師。其中交互設計師：“UI”的本義是

6、用戶界面，是英文User和interface的縮寫。UI設計師則指從事對軟件的人機交互、操作邏輯、界面美觀的整體設計工作的人。工作內容：負責軟件界面的美術設計、創(chuàng)意工作和制作工作；根據(jù)各種相關軟件的用戶群，提出構思新穎、有高度吸引力的創(chuàng)意設計；對頁面進行優(yōu)化，使用戶操作更趨于人性化；維護現(xiàn)有的應用產(chǎn)品；收集和分析用戶對于GUI的需求。第三節(jié) UI設計在中國的現(xiàn)狀目前在國內UI還是一個相對陌生的詞，即便是洛可可設計也在UI設計的道路上不斷探索客戶及用戶的需求。我們經(jīng)常看到一些招聘廣告寫著：招聘界面美工、界面美術設計師等等。這表明在國內對UI的理解還停留在美術設計方面，認為UI的工作只是描邊畫線，

7、缺乏對用戶交互的重要性的理解；另一方面在軟件開發(fā)過程中還存在重技術而不重應用的現(xiàn)象。許多商家認為軟件產(chǎn)品的核心是技術，而UI僅僅是次要的輔助，這點在人員的比例與待遇上可以表現(xiàn)出來。 但這不是UI設計真正的價值體現(xiàn)，只是UI設計發(fā)展的一個必經(jīng)過程。我們以物質產(chǎn)品手機行業(yè)為例，當手機剛剛進入市場的時候不但價格貴的驚人，而且除了通話以外沒有什么其他功能。由于當時的主導是技術，所以大家都把精力放在信號、待機時間、壽命等方面，對于產(chǎn)品的造型，使用的合理性很少關心。事過境遷，如今技術已經(jīng)完全的達到用戶的需求，于是商家為了創(chuàng)造賣點，提高爭力，非常重視產(chǎn)品的外觀設計，除此之外還頻頻推出短信,彩屏，和鉉，彩信,

8、攝像頭等等。這樣一來產(chǎn)品的美觀、個性、易用、易學、人性化等等都成了產(chǎn)品的賣點。軟件產(chǎn)品與物質產(chǎn)品的發(fā)展是相同的。過去由于計算機硬件的限制，編碼設計成為軟件開發(fā)的代名詞，美觀親和的圖形化界面與合理易用的交互方式都沒有得到充分的重視，實際上這個時期的軟件叫作軟件程序，而不是軟件產(chǎn)品?，F(xiàn)今隨著計算機硬件的飛速發(fā)展，過去的軟件程序已經(jīng)不能適應用戶的要求。軟件產(chǎn)品在激烈的市場競爭中，僅僅有強大的功能是遠遠不夠的，不足以戰(zhàn)勝強勁的對手。幸運的是在國內一些高瞻遠矚的民族企業(yè)已經(jīng)開始意識到UI給軟件產(chǎn)品帶來的巨大賣點了，例如金山公司的影霸、詞霸、毒霸、網(wǎng)標，由于重視UI的開發(fā)與地位，才使得金山產(chǎn)品在同類軟件產(chǎn)

9、品中首屈一指。聯(lián)想軟件的UI部門積極開展用戶研究與使用性測試，將易用與美觀相結合，推出的雙模式電腦、幸福系列等成功UI范例，為聯(lián)想贏得全球消費 PC第三的稱號等等、等等.實踐證明，各商家只要在產(chǎn)品美觀和易用設計方面很小投入，將會有很大產(chǎn)出。其投入產(chǎn)出比，要比在功能領先性開發(fā)上的投入大得多。我們不得不承認現(xiàn)階段中國在很多領域都與西方發(fā)達國家有相當大的差距，如何趕上并超過他們是我們這代人肩負的歷史使命。軟件產(chǎn)品領域不象物質產(chǎn)品那樣存在工藝、材料上的限制，軟件產(chǎn)品核心問題就是人。提高軟件UI設計師個人能力減小人員上的差距是中國UI發(fā)展首要關鍵的問題。目前國內各院校還沒有設立相對健全的UI設計專業(yè)，所

10、以提高UI設計師能力關鍵在于提供一個良好的學習與交流的資源環(huán)境。國內已經(jīng)有很多交流設計網(wǎng)站，介紹工業(yè)設計、平面設計、服裝設計、繪畫藝術、多媒體flash等，但是UI設計一直沒有受到應有的關注，僅僅被放在數(shù)碼設計或者平面網(wǎng)頁設計的一個欄目里，這僅有的資源對培養(yǎng)優(yōu)秀的設計師是不夠的，必須有一個信息快捷、資源豐富、設計水平一流、專業(yè)權威的UI設計學習與交流的地方才能適應日益發(fā)展的UI設計師們的需求。第二章 設計流程課 題：UI設計流程授課教師：汪永吉教學目標：通過本章學習使學生了解UI設計原則、流程。教學重點：掌握UI設計原則、流程。教學難點：掌握UI設計流程。教學準備：課本、參考圖形教學方法：講授

11、、討論、案例分析教 材：教學時間：8課時教學內容：UI設計原則、流程第一節(jié) UI設計原則1.簡易性界面的簡潔UI設計圖片是要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯誤選擇的可能性。2.用戶語言界面中要使用能反應用戶本身的語言，而不是游戲設計者的語言。3.記憶負擔最小化人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶極不穩(wěn)定、有限，24小時內存在25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。4.一致性是每一個優(yōu)秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與游戲內容相一致。5.清楚在視覺效果上便于理解和使用。6.用戶的熟悉程度用戶可通過已掌握的知識

12、來使用界面，但不應超出一般常識。7.從用戶的觀點考慮想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。8.排列一個有序的界面能讓用戶輕松的使用。9.安全性用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。10.靈活性簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標、鍵盤或手柄)。11.人性化高效率和用戶滿意度是人性化的體現(xiàn)。應具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習慣定制界面，并能保存設置。第二節(jié) UI設計的流程確認目標用戶

13、在洛可可的UI設計過程中，需求設計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標用戶的不同引起的交互設計重點的不同。例如：對于科學用戶和對于用戶的設計重點就不同。采集目標用戶的習慣交互方式不同類型的目標用戶有不同的交互習慣。這種習慣的交互方式往往來源于其原有的針對現(xiàn)實的交互流程、已有軟件工具的交互流程。當然還要在此基礎上通過調研分析找到用戶希望達到的交互效果，并且以流程確認下來。提示和引導用戶軟件是用戶的工具。因此應該由用戶來操作和控制軟件。軟件響應用戶的動作和設定的規(guī)則。對于用戶交互的結果和反饋，提示用戶結果和反饋信息，引導用戶進行用戶需要的下一步操作。一致性原

14、則設計目標一致軟件中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設計目標需要一致。例如：如果以電腦操作初級用戶作為目標用戶，以簡化界面邏輯為設計目標，那么該目標需要貫徹軟件（）整體，而不是局部。元素外觀一致交互元素的外觀往往影響用戶的交互效果。同一個（類）軟件采用一致風格的外觀，對于保持用戶焦點，改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標用戶進行調查取得反饋。交互行為一致在交互模型中，不同類型的元素用戶觸發(fā)其對應的行為事件后，其交互行為需要一致。例如：所有需要用戶確認操作的對話框都至少包含確認和放棄兩個按鈕。對于交互行為一致性原則比

15、較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個理念設計，會更加簡化用戶操作流程?？捎眯栽瓌t可理解軟件要為用戶使用，用戶必須可以理解軟件各元素對應的功能。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應的功能。例如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認刪除操作，用戶可以更加詳細的理解該元素對應的功能，同時可以取消該操作?？蛇_到用戶是交互的中心，交互元素對應用戶需要的功能。因此交互元素必須可以被用戶控制。用戶可以用諸如鍵盤、鼠標

16、之類的交互設備通過移動和觸發(fā)已有的交互元素達到其它在此之前不可見或者不可交互的交互元素。要注意的是交互的次數(shù)會影響可達到的效果。當一個功能被深深隱藏（一般來說超過4層）那么用戶達到該元素的幾率就大大降低了?？蛇_到的效果也同界面設計有關。過于復雜的界面會影響可達到的效果。（參考簡單導向原則）可控制軟件的交互流程，用戶可以控制。功能的執(zhí)行流程，用戶可以控制。如果確實無法提供控制，則用能為目標用戶理解的方式提示用戶。第三章 案例展示欣賞與分析課 題：UI設計案例展示欣賞與分析授課教師：汪永吉教學目標：通過本章學習使學生了解UI設計案例展示欣賞與分析。教學重點：掌握UI設計案例展示欣賞與分析。教學難點

17、：掌握UI設計案例展示欣賞與分析。教學準備：課本、參考圖形教學方法：講授、討論、案例分析教 材：教學時間：8課時教學內容：UI設計圖標、輸入法、播放器、界面；第一節(jié) 圖標圖標是具有明確指代含義的計算機圖形。其中桌面圖標是軟件標識，界面中的圖標是功能標識。圖標分為廣義和狹義兩種：廣義具有指代意義的圖形符號，具有高度濃縮并快捷傳達信息、便于記憶的特性。應用范圍很廣，軟硬件網(wǎng)頁社交場所公共場合無所不在，例如：男女廁所標志和各種交通標志等。狹義應用于計算機軟件方面，包括：程序標識、數(shù)據(jù)標識、命令選擇、模式信號或切換開關、狀態(tài)指示等。一個圖標是一個小的圖片或對象，代表一個文件，程序，網(wǎng)頁，或命令。圖標有

18、助于用戶快速執(zhí)行命令和打開程序文件。單擊或雙擊圖標以執(zhí)行一個命令。圖標也用于在瀏覽器中快速展現(xiàn)內容。所有使用相同擴展名的文件具有相同的圖標。圖標有一套標準的大小和屬性格式，且通常是小尺寸的。每個圖標都含有多張相同顯示內容的圖片，每一張圖片具有不同的尺寸和發(fā)色數(shù)。一個圖標就是一套相似的圖片，每一張圖片有不同的格式。從這一點上說圖標是三維的。圖標還有另一個特性：它含有透明區(qū)域，在透明區(qū)域內可以透出圖標下的桌面背景。在結構上圖標其實和麥當勞的巨無霸漢堡差不多。一個圖標實際上是多張不同格式的圖片的集合體，并且還包含了一定的透明區(qū)域。因為計算機操作系統(tǒng)和顯示設備的多樣性，導致了圖標的大小需要有多種格式。

19、象素分辨 操作系統(tǒng)在顯示一個圖標時，會按照一定的標準選擇圖標中最適合當前顯示環(huán)境和狀態(tài)的圖像。如果你用的是Windows98操作系統(tǒng)，顯示環(huán)境是 800x600分辨率，32位色深，你在桌面上看到的每個圖標的圖像格式就是256色32x32象素大小。如果在相同的顯示環(huán)境下，Windows XP操作系統(tǒng)中，這些圖標的圖像格式就是：（32位色深）、32x32象素大小。下面就是Windows各個操作系統(tǒng)中的標準圖標格式：（單位：大小象素顏色）Windows 98 SE/ME/200048 x 48 - 256 32 x 32 - 256 16 x 16 - 25648 x 48 - 16 32 x 32

20、 - 16 16 x 16 - 16Windows XP48 x 48 - 32bit 32 x 32 - 32bit 24 x 24 - 32bit * 16 x 16 - 32bit48 x 48 - 256 32 x 32 - 256 24 x 24 - 256 * 16 x 16 - 25648 x 48 - 16 32 x 32 - 16 24 x 24 - 16 * 16 x 16 - 16* 這種格式在XP圖標中并不是必須的。注意：Windows98/2000對24 x 24格式的圖標不兼容。你可以在相關應用軟件中打開含有這種圖像格式的圖標，但操作系統(tǒng)卻認為是無效的。你必須確保你

21、所設計的圖標中至少含有以上所列的圖像格式來獲得良好的顯示效果。如果操作系統(tǒng)在圖標中找不到特定的圖像格式，它總是采用最接近的圖像格式來顯示，比如把大小為48 x 48的圖標縮小為24 x 24象素大小。當然，效果就差些了。不同的操作系統(tǒng)版本W(wǎng)indows 95， Windows 98， Windows ME， Windows 2000 建議： 48x48 （ 256色， 16色） ， 32x32 （ 256色， 16色） ， 16x16 （ 256色， 16色）. 最低： 32x32 （ 256色， 16色） ， 16x16 （ 256色， 16色）.Windows XP 建議： 48x48 （

22、RGB /A， 256色， 16色） ， 32x32 （RGB /A， 256色， 16色） ， 24x24 （RGB /A， 256色， 16色） ， 16x16 （RGB /A， 256色， 16色）最低： 32x32 （的RGB /A， 256色， 16色） ， 16x16 （的RGB /A， 256色， 16色）.可選： 128x128 （的RGB /A）Windows Vista? 建議： 256x256 （RGB /A） ， 64x64 （RGB /A） ， 48x48 （RGB /A， 256色， 16色） ， 32x32 （RGB /A， 256色， 16色） ， 24x24

23、（RGB /A， 256色， 16色） ， 16x16 （RGB /A， 256色， 16色） 最低： 256x256 （RGB /A） ， 48x48 （RGB /A， 256色） ， 32x32 （RGB /A， 256色） ， 16x16 （RGB /A， 256色） 可選： 256x256 （ 256色， 16色） ， 64x64 （ 256色， 16色）此畫面為手機的操作系統(tǒng)的圖標。同學們主要在以下幾個方面來考慮：1 造型；2 顏色；3 藝術性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標的文件，我們接下來可以分享一下。第二節(jié) 輸入法設計輸入法是指為了將各種符號輸入計算機或其他設備（如手機）而采用的編碼方法。漢字輸入的編碼方法，基本上都是采用將音、形、義與特定的鍵相聯(lián)系，再根據(jù)不同漢字進行組合來完成漢字的輸入的。中文熱門輸入法搜狗拼音輸入法：搜狗拼音輸入法是2006年6月由搜狐（SOHU）公司推出