【正文】 人們的視覺習(xí)慣，并與頁面的整體色調(diào)想?yún)f(xié)調(diào)。其中，字體的選擇不要過于花哨，選用平常字體即可。一．什么是界面設(shè)計界面設(shè)計是為了滿足專業(yè)化、標準化需求而對軟件的使用界面進行美化、優(yōu)化、規(guī)范化的設(shè)計分支，具體包括軟件啟動封面設(shè)計、軟件框架設(shè)計、按鈕設(shè)計、面板設(shè)計、菜單設(shè)計、標簽設(shè)計、圖標設(shè)計、滾動條及狀態(tài)欄設(shè)計、安裝過程設(shè)計、包裝及商品化。如下圖：直觀的按鈕設(shè)計 二．圖形界面的分類隨著科技的發(fā)展，人們對信息的需求量也在不斷的增多，所以圖形界面也越來越多樣化和細分化，不同的圖形界面在設(shè)計上也會有不同的特點。圖形界面可以分為以下幾類：l 軟件用戶界面：軟件只是一種工具，然而人們與軟件的交互性操作都是通過軟件界面來進行的，所以軟件界面的設(shè)計不僅要美觀而且要易用。l 網(wǎng)絡(luò)界面：網(wǎng)絡(luò)的發(fā)展帶來的網(wǎng)站界面設(shè)計的繁榮，隨著網(wǎng)絡(luò)的發(fā)展，網(wǎng)站設(shè)計已經(jīng)從最初的純文字內(nèi)容發(fā)展到現(xiàn)在的包含圖像、視頻、動畫等多種媒體的形式。網(wǎng)站界面必須具有獨立性和創(chuàng)意性。在網(wǎng)站界面設(shè)計中，最重要的是使用戶方便地查找信息，并能夠感受到方便操作帶來的樂趣。如下圖的咖啡網(wǎng)站頁面l 手機界面：隨著科技的發(fā)展，手機的功能也越來越強大，手機界面的設(shè)計要人性化，不僅要方便使用，還要美觀。如下圖l 游戲界面：游戲軟件界面的制作通常比較華麗、主題鮮明，三維效果十分普遍，所以游戲中的人物或物品為主體，視覺效果占十分重要的地位。 l 播放器界面：在激烈的市場競爭中，軟件產(chǎn)品僅有強大的功能是遠遠不夠的，將易用性與美觀相結(jié)合，才能適應(yīng)用戶的需要，從而創(chuàng)造出更高的價值。教學(xué)步驟及教學(xué)內(nèi)容時間分配作業(yè)布置課后反思授課課題界面的整體設(shè)計 UI設(shè)計流程教學(xué)目標和要求通過本章學(xué)習(xí)使學(xué)生了解UI設(shè)計原則、流程。教學(xué)重點和難點教學(xué)重點：掌握UI設(shè)計原則、流程。教學(xué)難點：掌握UI設(shè)計流程。教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時間第 十 周課時累計16教 學(xué) 過 程教學(xué)步驟及教學(xué)內(nèi)容時間分配導(dǎo)入新課: 第一節(jié) UI設(shè)計原則　　　　界面的簡潔UI設(shè)計圖片是要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯誤選擇的可能性。教學(xué)步驟及教學(xué)內(nèi)容時間分配界面中要使用能反應(yīng)用戶本身的語言，而不是游戲設(shè)計者的語言。　　　　人腦不是電腦，在設(shè)計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶極不穩(wěn)定、有限，24小時內(nèi)存在25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易?！　　　∈敲恳粋€優(yōu)秀界面都具備的特點。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與游戲內(nèi)容相一致。　　　　在視覺效果上便于理解和使用?！　　　∮脩艨赏ㄟ^已掌握的知識來使用界面，但不應(yīng)超出一般常識。　　　　想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用?！　⊥ㄟ^比較兩個不同世界(真實與虛擬)的事物，完成更好的設(shè)計。如：書籍對比竹簡。　　　　一個有序的界面能讓用戶輕松的使用。　　　　用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示?！　　　『唵蝸碚f就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標、鍵盤或手柄)?！　　　「咝屎陀脩魸M意度是人性化的體現(xiàn)。應(yīng)具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并　　能保存設(shè)置。第二節(jié) UI設(shè)計的流程確認目標用戶　　在洛可可的UI設(shè)計過程中，需求設(shè)計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求?！　∮脩艚换ヒ紤]到目標用戶的不同引起的交互設(shè)計重點的不同?！　±纾簩τ诳茖W(xué)用戶和對于電腦入門用戶的設(shè)計重點就不同。采集目標用戶的習(xí)慣交互方式　　不同類型的目標用戶有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來源于其原有的針對現(xiàn)實的交互流程、已有軟件工具的交互流程。　　當然還要在此基礎(chǔ)上通過調(diào)研分析找到用戶希望達到的交互效果，并且以流程確認下來。提示和引導(dǎo)用戶　　軟件是用戶的工具。因此應(yīng)該由用戶來操作和控制軟件。軟件響應(yīng)用戶的動作和設(shè)定的規(guī)則?！　τ谟脩艚换サ慕Y(jié)果和反饋，提示用戶結(jié)果和反饋信息，引導(dǎo)用戶進行用戶需要的下一步操作。一致性原則　　設(shè)計目標一致　　軟件中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設(shè)計目標需要一致?！　±纾喝绻噪娔X操作初級用戶作為目標用戶，以簡化界面邏輯為設(shè)計目標，那么該目標需要貫徹軟件（軟件包）整體，而不是局部?！　≡赝庥^一致　　交互元素的外觀往往影響用戶的交互效果。同一個（類）軟件采用一致風(fēng)格的外觀，對于保持用戶焦點，改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標用戶進行調(diào)查取得反饋?！　〗换バ袨橐恢隆　≡诮换ツＰ椭?，不同類型的元素用戶觸發(fā)其對應(yīng)的行為事件后，其交互行為需要一致?！　±纾核行枰脩舸_認操作的對話框都至少包含確認和放棄兩個按鈕?！　τ诮换バ袨橐恢滦栽瓌t比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個理念設(shè)計，會更加簡化用戶操作流程?？捎眯栽瓌t　　可理解　　軟件要為用戶使用，用戶必須可以理解軟件各元素對應(yīng)的功能?！　∪绻荒転橛脩衾斫?，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應(yīng)的功能?！　±纾簞h除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認刪除操作，用戶可以更加詳細的理解該元素對應(yīng)的功能，同時可以取消該操作?！　】蛇_到　　用戶是交互的中心，交互元素對應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。　　用戶可以用諸如鍵盤、鼠標之類的交互設(shè)備通過移動和觸發(fā)已有的交互元素達到其它在此之前不可見或者不可交互的交互元素?！　∫⒁獾氖墙换サ拇螖?shù)會影響可達到的效果。當一個功能被深深隱藏（一般來說超過4層）那么用戶達到該元素的幾率就大大降低了?！　】蛇_到的效果也同界面設(shè)計有關(guān)。過于復(fù)雜的界面會影響可達到的效果。（參考簡單導(dǎo)向原則）　　可控制　　軟件的交互流程，用戶可以控制?！　」δ艿膱?zhí)行流程，用戶可以控制。　　如果確實無法提供控制，則用能為目標用戶理解的方式提示用戶。教學(xué)步驟及教學(xué)內(nèi)容時間分配作業(yè)布置課后反思授課課題界面的整體設(shè)計——導(dǎo)航欄和按鈕的設(shè)計要點教學(xué)目標和要求導(dǎo)航欄和按鈕的設(shè)計教學(xué)重點和難點重點：掌握導(dǎo)航欄和按鈕的設(shè)計要點難點：掌握導(dǎo)航欄和按鈕的設(shè)計要點并應(yīng)用教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時間第 十一 周課時累計18教 學(xué) 過 程教學(xué)步驟及教學(xué)內(nèi)容時間分配導(dǎo)入：導(dǎo)航欄和按鈕都是我們在網(wǎng)頁設(shè)計中經(jīng)常看到的，使得我們的操作更加方便，接下來了解一下他們的設(shè)計要點一導(dǎo)航欄導(dǎo)航欄如果設(shè)計得恰到好處，會給網(wǎng)頁增色很多。導(dǎo)航欄的設(shè)計不能太花哨，因為導(dǎo)航欄書籍功能物件，喧賓奪主就不好了。導(dǎo)航欄的設(shè)計主要有一下幾個要點：l 在導(dǎo)航欄目不多的情況下，通常是一排，橫豎都可以。若欄目超過六個就可以考慮用兩排。教學(xué)步驟及教學(xué)內(nèi)容時間分配l 造導(dǎo)航欄目很多的情況下，就可以多排，甚至不規(guī)則的多排（一排個數(shù)不同或者長度不同）.商業(yè)設(shè)計或者門戶網(wǎng)站通常會有多個頻道，在設(shè)計的時候需要考慮橫向雙排，因為使用豎排會占用太多空間。l 通常在內(nèi)容不多的情況下，可能無所謂欄目，站點就包括了導(dǎo)航的具體內(nèi)容。l 雙排導(dǎo)航未必要挨在一起，可以發(fā)揮想象，自由排列。l 圖片式導(dǎo)航比較美觀，但占用的空間比較大。l 目前網(wǎng)站中使用較多的欄目是用FLASH制作的網(wǎng)站導(dǎo)航，其體積小，視覺效果強烈。l 內(nèi)容小豐富的站點，可以考慮快捷導(dǎo)航，即框架快捷導(dǎo)航。因為不管你進入到哪個頁面都可以快速跳轉(zhuǎn)到另外的欄目，更加方便自己的操作。教學(xué)步驟及教學(xué)內(nèi)容時間分配二 、按鈕 如今按鈕的設(shè)計要求 越來越高,網(wǎng)頁中按鈕的設(shè)計主要有以下幾個要點：l 設(shè)計的按鈕要與整體的風(fēng)格相協(xié)調(diào)，不能太搶眼。l 有些單調(diào)的頁面，要靠花哨的按鈕來點綴。l 插圖與字的搭配，要考慮字跡清楚，色彩簡單，不能超過4種。l 很長的按鈕可能是框架的分解，應(yīng)該盡量纖細一些，否則頁面會顯得很臃腫。作業(yè)布置課后反思