ui設(shè)計(jì) 教案 18個(gè)課時(shí).doc

備 課 本Lesson Preparation _2013_-_2014_學(xué)年 第_一_學(xué)期Academic Year - Semester 課 程 名 稱(chēng) UI設(shè)計(jì) Course教材名稱(chēng)及版本 UI設(shè)計(jì) Textbook and Edition授 課 班 級(jí) 2011平面1班 Class教 師 姓 名 黎 丹 Teacher審 核 人 周 增 輝 Approver填寫(xiě)說(shuō)明1、此備課本用來(lái)書(shū)寫(xiě)教案，適用于所有專(zhuān)職教師、兼職教師和兼課教師。2、所有承擔(dān)教學(xué)任務(wù)的教師需書(shū)寫(xiě)紙質(zhì)版教案，如因使用多媒體教學(xué)需要和教學(xué)任務(wù)繁重，可用電子版教案，但格式必須按紙質(zhì)版格式，且所有教案的書(shū)寫(xiě)應(yīng)與學(xué)期授課計(jì)劃相符合。3、備課過(guò)程中的各個(gè)環(huán)節(jié)和要素可根據(jù)實(shí)際授課內(nèi)容進(jìn)行填寫(xiě)。如：授課課題：（教學(xué)章、節(jié)、標(biāo)題或項(xiàng)目名稱(chēng)）教學(xué)目標(biāo)和要求：（教學(xué)目標(biāo)一般說(shuō)應(yīng)包含知識(shí)教學(xué)、能力發(fā)展和思想教育三方面內(nèi)容，教學(xué)要求是指識(shí)記、理解、簡(jiǎn)單應(yīng)用、綜合應(yīng)用等層次）教學(xué)重點(diǎn)和難點(diǎn)：教學(xué)重點(diǎn)，是為了達(dá)到確定的教學(xué)目的而必須著重講解和分析的內(nèi)容；教學(xué)難點(diǎn)，是就學(xué)生的接受情況而言的，學(xué)生經(jīng)過(guò)自學(xué)還不能理解或理解有困難的地方，即可確定為教學(xué)難點(diǎn)。教學(xué)方法：（討論、啟發(fā)、演示、辯論、講練結(jié)合、案例教學(xué)、情境模擬等）教學(xué)手段：（多媒體教學(xué)、錄像帶、掛圖、幻燈片等）授課時(shí)間：第周課時(shí)累計(jì)：教學(xué)過(guò)程：（體現(xiàn)教學(xué)步驟，包括時(shí)間分配和教學(xué)內(nèi)容教學(xué)進(jìn)程）作業(yè)布置：（含思考題、討論題）課后反思：（因?yàn)檎n后反思是教案實(shí)施效果追記，課前還不能打印，只能課后用筆手寫(xiě)）4、 備課本的審核人為各教研室（項(xiàng)目中心）主任。授課課題認(rèn)識(shí)界面門(mén)UI設(shè)計(jì)說(shuō)課教學(xué)目標(biāo)和要求通過(guò)本章學(xué)習(xí)使學(xué)生了解UI在中國(guó)的發(fā)展，以及UI的是什么教學(xué)重點(diǎn)和難點(diǎn)教學(xué)重點(diǎn)：掌握UI在中國(guó)的發(fā)展，以及UI是什么。教學(xué)難點(diǎn)：掌握UI是什么。教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時(shí)間第 九 周課時(shí)累計(jì)2教 學(xué) 過(guò) 程教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配導(dǎo)入新課:UI即User Interface(用戶(hù)界面)的簡(jiǎn)稱(chēng)。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。第一節(jié) UI是什么軟件設(shè)計(jì)可分為兩個(gè)部分：編碼設(shè)計(jì)與UI設(shè)計(jì)。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配編碼設(shè)計(jì)大家都很熟悉，但是 UI設(shè)計(jì)還是一個(gè)很陌生的詞，即使一些專(zhuān)門(mén)從事網(wǎng)站與多媒體設(shè)計(jì)的人也不完全理解UI的意思。UI的本意是用戶(hù)界面，是英文User和 interface的縮寫(xiě)。從字面上看是用戶(hù)與界面2個(gè)組成部分，但實(shí)際上還包括用戶(hù)與界面之間的交互關(guān)系。在飛速發(fā)展的電子產(chǎn)品中，界面設(shè)計(jì)工作一點(diǎn)點(diǎn)的被重視起來(lái)。做界面設(shè)計(jì)的“美工”也隨之被稱(chēng)之為“UI設(shè)計(jì)師”或“UI工程師”。其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要賣(mài)點(diǎn)。一個(gè)電子產(chǎn)品擁有美觀的界面會(huì)給人帶來(lái)舒適的視覺(jué)享受，拉近人與商品的距離，為商家創(chuàng)造賣(mài)點(diǎn)。界面設(shè)計(jì)不是單純的美術(shù)繪畫(huà)，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶(hù)而設(shè)計(jì)，是建立在科學(xué)性之上的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)既不是某個(gè)項(xiàng)目開(kāi)發(fā)組領(lǐng)導(dǎo)的意見(jiàn)也不是項(xiàng)目成員投票的結(jié)果，而是終端用戶(hù)的感受。所以界面設(shè)計(jì)要和用戶(hù)研究緊密結(jié)合，是一個(gè)不斷為最終用戶(hù)設(shè)計(jì)滿(mǎn)意視覺(jué)效果的過(guò)程。第二節(jié) UI設(shè)計(jì)師是做什么的在中國(guó)，UI設(shè)計(jì)還是一個(gè)需要不斷成長(zhǎng)的設(shè)計(jì)領(lǐng)域，但eicodesign,Tigocn, lkkui design, Robin design等國(guó)內(nèi)知名設(shè)計(jì)機(jī)構(gòu)已經(jīng)進(jìn)入了探索UI設(shè)計(jì)的道路。UI設(shè)計(jì)從工作內(nèi)容上來(lái)說(shuō)分為3個(gè)方向。它主要是由UI 研究的3個(gè)因素決定的， 其分別是研究工具，研究人與界面的關(guān)系，研究人。研究界面圖形設(shè)計(jì)師Graphic UI designer國(guó)內(nèi)目前大部分UI工作者都是從事這個(gè)行業(yè)。也有人稱(chēng)之為美工，但實(shí)際上不是單純意義上的美術(shù)工人，而是軟件產(chǎn)品的產(chǎn)品外形設(shè)計(jì)師。這些設(shè)計(jì)師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計(jì)教育背景，例如工業(yè)外形設(shè)計(jì)，裝潢設(shè)計(jì)，信息多媒體設(shè)計(jì)等。研究人與界面的關(guān)系交互設(shè)計(jì)師，interaction designer在圖形界面產(chǎn)生之前，長(zhǎng)期以來(lái)UI設(shè)計(jì)師就是指交互設(shè)計(jì)師。交互設(shè)計(jì)師的工作內(nèi)容就是設(shè)計(jì)軟件的操作流程，樹(shù)狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范（spec）等。一個(gè)軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。交互設(shè)計(jì)師一般都是軟件工程師背景居多。研究人用戶(hù)測(cè)試/研究工程師User experience engineer任何的產(chǎn)品為了保證質(zhì)量都需要測(cè)試，軟件的編碼需要測(cè)試，自然UI設(shè)計(jì)也需要被測(cè)試。這個(gè)測(cè)試和編碼沒(méi)有任何關(guān)系，主要是測(cè)試交互設(shè)計(jì)的合理性以及圖形設(shè)計(jì)的美觀性。測(cè)試方法一般都是采用焦點(diǎn)小組，用目標(biāo)用戶(hù)問(wèn)卷的形式來(lái)衡量UI設(shè)計(jì)的合理性。這個(gè)職位很重要，如果沒(méi)有這個(gè)職位，UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來(lái)評(píng)判，這樣就會(huì)給企業(yè)帶來(lái)嚴(yán)重的風(fēng)險(xiǎn)性。用戶(hù)研究工程師一般是心理學(xué)人文學(xué)背景比較合適。綜上所述UI設(shè)計(jì)師就是：軟件圖形設(shè)計(jì)師、交互設(shè)計(jì)師和用戶(hù)研究工程師。其中交互設(shè)計(jì)師：“UI”的本義是用戶(hù)界面，是英文User和interface的縮寫(xiě)。UI設(shè)計(jì)師則指從事對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)工作的人。工作內(nèi)容：負(fù)責(zé)軟件界面的美術(shù)設(shè)計(jì)、創(chuàng)意工作和制作工作；根據(jù)各種相關(guān)軟件的用戶(hù)群，提出構(gòu)思新穎、有高度吸引力的創(chuàng)意設(shè)計(jì)；對(duì)頁(yè)面進(jìn)行優(yōu)化，使用戶(hù)操作更趨于人性化；維護(hù)現(xiàn)有的應(yīng)用產(chǎn)品；收集和分析用戶(hù)對(duì)于GUI的需求。第三節(jié) UI設(shè)計(jì)在中國(guó)的現(xiàn)狀目前在國(guó)內(nèi)UI還是一個(gè)相對(duì)陌生的詞，即便是洛可可設(shè)計(jì)也在UI設(shè)計(jì)的道路上不斷探索客戶(hù)及用戶(hù)的需求。我們經(jīng)?？吹揭恍┱衅笍V告寫(xiě)著：招聘界面美工、界面美術(shù)設(shè)計(jì)師等等。這表明在國(guó)內(nèi)對(duì)UI的理解還停留在美術(shù)設(shè)計(jì)方面，認(rèn)為UI的工作只是描邊畫(huà)線(xiàn)，缺乏對(duì)用戶(hù)交互的重要性的理解；另一方面在軟件開(kāi)發(fā)過(guò)程中還存在重技術(shù)而不重應(yīng)用的現(xiàn)象。許多商家認(rèn)為軟件產(chǎn)品的核心是技術(shù)，而UI僅僅是次要的輔助，這點(diǎn)在人員的比例與待遇上可以表現(xiàn)出來(lái)。 但這不是UI設(shè)計(jì)真正的價(jià)值體現(xiàn)，只是UI設(shè)計(jì)發(fā)展的一個(gè)必經(jīng)過(guò)程。我們以物質(zhì)產(chǎn)品手機(jī)行業(yè)為例，當(dāng)手機(jī)剛剛進(jìn)入市場(chǎng)的時(shí)候不但價(jià)格貴的驚人，而且除了通話(huà)以外沒(méi)有什么其他功能。由于當(dāng)時(shí)的主導(dǎo)是技術(shù)，所以大家都把精力放在信號(hào)、待機(jī)時(shí)間、壽命等方面，對(duì)于產(chǎn)品的造型，使用的合理性很少關(guān)心。事過(guò)境遷，如今技術(shù)已經(jīng)完全的達(dá)到用戶(hù)的需求，于是商家為了創(chuàng)造賣(mài)點(diǎn)，提高爭(zhēng)力，非常重視產(chǎn)品的外觀設(shè)計(jì)，除此之外還頻頻推出短信,彩屏，和鉉，彩信,攝像頭等等。這樣一來(lái)產(chǎn)品的美觀、個(gè)性、易用、易學(xué)、人性化等等都成了產(chǎn)品的賣(mài)點(diǎn)。軟件產(chǎn)品與物質(zhì)產(chǎn)品的發(fā)展是相同的。過(guò)去由于計(jì)算機(jī)硬件的限制，編碼設(shè)計(jì)成為軟件開(kāi)發(fā)的代名詞，美觀親和的圖形化界面與合理易用的交互方式都沒(méi)有得到充分的重視，實(shí)際上這個(gè)時(shí)期的軟件叫作軟件程序，而不是軟件產(chǎn)品?，F(xiàn)今隨著計(jì)算機(jī)硬件的飛速發(fā)展，過(guò)去的軟件程序已經(jīng)不能適應(yīng)用戶(hù)的要求。軟件產(chǎn)品在激烈的市場(chǎng)競(jìng)爭(zhēng)中，僅僅有強(qiáng)大的功能是遠(yuǎn)遠(yuǎn)不夠的，不足以戰(zhàn)勝?gòu)?qiáng)勁的對(duì)手。幸運(yùn)的是在國(guó)內(nèi)一些高瞻遠(yuǎn)矚的民族企業(yè)已經(jīng)開(kāi)始意識(shí)到UI給軟件產(chǎn)品帶來(lái)的巨大賣(mài)點(diǎn)了，例如金山公司的影霸、詞霸、毒霸、網(wǎng)標(biāo)，由于重視UI的開(kāi)發(fā)與地位，才使得金山產(chǎn)品在同類(lèi)軟件產(chǎn)品中首屈一指。聯(lián)想軟件的UI部門(mén)積極開(kāi)展用戶(hù)研究與使用性測(cè)試，將易用與美觀相結(jié)合，推出的雙模式電腦、幸福系列等成功UI范例，為聯(lián)想贏得全球消費(fèi) PC第三的稱(chēng)號(hào)等等、等等.實(shí)踐證明，各商家只要在產(chǎn)品美觀和易用設(shè)計(jì)方面很小投入，將會(huì)有很大產(chǎn)出。其投入產(chǎn)出比，要比在功能領(lǐng)先性開(kāi)發(fā)上的投入大得多。我們不得不承認(rèn)現(xiàn)階段中國(guó)在很多領(lǐng)域都與西方發(fā)達(dá)國(guó)家有相當(dāng)大的差距，如何趕上并超過(guò)他們是我們這代人肩負(fù)的歷史使命。軟件產(chǎn)品領(lǐng)域不象物質(zhì)產(chǎn)品那樣存在工藝、材料上的限制，軟件產(chǎn)品核心問(wèn)題就是人。提高軟件UI設(shè)計(jì)師個(gè)人能力減小人員上的差距是中國(guó)UI發(fā)展首要關(guān)鍵的問(wèn)題。目前國(guó)內(nèi)各院校還沒(méi)有設(shè)立相對(duì)健全的UI設(shè)計(jì)專(zhuān)業(yè)，所以提高UI設(shè)計(jì)師能力關(guān)鍵在于提供一個(gè)良好的學(xué)習(xí)與交流的資源環(huán)境。國(guó)內(nèi)已經(jīng)有很多交流設(shè)計(jì)網(wǎng)站，介紹工業(yè)設(shè)計(jì)、平面設(shè)計(jì)、服裝設(shè)計(jì)、繪畫(huà)藝術(shù)、多媒體flash等，但是UI設(shè)計(jì)一直沒(méi)有受到應(yīng)有的關(guān)注，僅僅被放在數(shù)碼設(shè)計(jì)或者平面網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)欄目里，這僅有的資源對(duì)培養(yǎng)優(yōu)秀的設(shè)計(jì)師是不夠的，必須有一個(gè)信息快捷、資源豐富、設(shè)計(jì)水平一流、專(zhuān)業(yè)權(quán)威的UI設(shè)計(jì)學(xué)習(xí)與交流的地方才能適應(yīng)日益發(fā)展的UI設(shè)計(jì)師們的需求。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配作業(yè)布置課后反思授課課題認(rèn)識(shí)界面門(mén)教學(xué)目標(biāo)和要求界面的概述教學(xué)重點(diǎn)和難點(diǎn)重點(diǎn)：了解什么UI,什么是界面難點(diǎn)：界面的概述教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時(shí)間第 九 周課時(shí)累計(jì)4教 學(xué) 過(guò) 程教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配導(dǎo)入新課:隨著硬件技術(shù)的飛速發(fā)展，使計(jì)算速度與存儲(chǔ)容量不再成為軟件開(kāi)發(fā)人員所擔(dān)心的問(wèn)題，用戶(hù)關(guān)心的主要問(wèn)題是能否比較容易和舒適地使用軟件。換言之，人們的著眼點(diǎn)在于軟件的易用性和美觀，而易用與美觀主要取決于用戶(hù)界面，即UI的優(yōu)劣。本課主要講解UI的基本理論和設(shè)計(jì)屬性，以期在具體學(xué)習(xí)UI設(shè)計(jì)技巧和制作技術(shù)之前對(duì)UI設(shè)計(jì)有一個(gè)整體的了解。什么事UI呢？UI的本意是用戶(hù)界面，是英文User和interface的縮寫(xiě)。從字面上看是用戶(hù)與界面2個(gè)組成部分，但實(shí)際上還包括用戶(hù)與界面之間的交互關(guān)系，所以這樣可分為3個(gè)方向，他們分別是：用戶(hù)研究、交互設(shè)計(jì)、界面設(shè)計(jì)。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配1、用戶(hù)研究 用戶(hù)研究包含兩個(gè)方面：一是可用性工程學(xué)（usability Engineering），研究如何提高產(chǎn)品的可用性，使得系統(tǒng)的設(shè)計(jì)更容易被人使用、學(xué)習(xí)和記憶；二是通過(guò)可用性工程學(xué)的研究，發(fā)掘用戶(hù)的潛在需求，為技術(shù)創(chuàng)新提供另外一條思路和方法（consumer insight）。 用戶(hù)研究是一個(gè)跨學(xué)科的專(zhuān)業(yè)，涉及可用性工程學(xué)、人類(lèi)功效學(xué)、心理學(xué)、市場(chǎng)研究學(xué)、教育學(xué)、設(shè)計(jì)學(xué)等學(xué)科。用戶(hù)研究技術(shù)是站在人文學(xué)科的角度來(lái)研究產(chǎn)品，站在用戶(hù)的角度介入到產(chǎn)品的開(kāi)發(fā)和設(shè)計(jì)中。 用戶(hù)研究通過(guò)對(duì)于用戶(hù)的工作環(huán)境、產(chǎn)品的使用習(xí)慣等研究，使得在產(chǎn)品開(kāi)發(fā)的前期能夠把用戶(hù)對(duì)于產(chǎn)品功能的期望、對(duì)設(shè)計(jì)和外觀方面的要求融入到產(chǎn)品的開(kāi)發(fā)過(guò)程中去，從而幫助企業(yè)完善產(chǎn)品設(shè)計(jì)或者探索一個(gè)新產(chǎn)品概念。 他是得到用戶(hù)需求和反饋的途徑，也是檢驗(yàn)界面與交互設(shè)計(jì)是否合理的重要標(biāo)準(zhǔn)。2、交互設(shè)計(jì) 這部分指人與機(jī)之間的交互工程，在過(guò)去交互設(shè)計(jì)也由程序員來(lái)做，其實(shí)程序員擅長(zhǎng)編碼，而不善于與最終用戶(hù)交互。所以，很多的軟件雖然功能比較齊全，但是交互方面設(shè)計(jì)很粗糙，繁瑣難用，學(xué)習(xí)困難。使用這樣的軟件后，不是使人聰明與進(jìn)步而是讓人感到愚弄與羞辱。許多人因?yàn)椴荒懿僮麟娔X軟件而下崗失業(yè)，這樣的交互使電腦成為讓人恐懼的科技怪獸。于是我們把交互設(shè)計(jì)從程序員的工作中分離出來(lái)單獨(dú)成為一個(gè)學(xué)科，也就是人機(jī)交互設(shè)計(jì)。他的目的在于加強(qiáng)軟件的易用、易學(xué)、易理解，使計(jì)算機(jī)真正成為方便地為人類(lèi)服務(wù)的工具。3、界面設(shè)計(jì) 在漫長(zhǎng)的軟件發(fā)展中，界面設(shè)計(jì)工作一直沒(méi)有被重視起來(lái)。做界面設(shè)計(jì)的人也被貶義的稱(chēng)為“美工”。其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要買(mǎi)點(diǎn)。一個(gè)友好美觀的界面會(huì)給人帶來(lái)舒適的視覺(jué)享受，拉近人與電腦的距離，為商家創(chuàng)造賣(mài)點(diǎn)。界面設(shè)計(jì)不是單純的美術(shù)繪畫(huà)，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶(hù)而設(shè)計(jì)，是純粹的科學(xué)性的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)即不是某個(gè)項(xiàng)目開(kāi)發(fā)組領(lǐng)導(dǎo)的意見(jiàn)也不是項(xiàng)目成員投票的結(jié)果，而是最終用戶(hù)的感受。所以界面設(shè)計(jì)要和用戶(hù)研究緊密結(jié)合，是一個(gè)不斷為最終用戶(hù)設(shè)計(jì)滿(mǎn)意視覺(jué)效果的過(guò)程什么是UI? 常識(shí) UI行業(yè)常用名詞及縮寫(xiě)定義 - 什么是 UI ： UI的本意是用戶(hù)界面，是英文User和 interface的縮寫(xiě)。 - 什么是 GUI Graphics User Interface 圖形用戶(hù)界面 有時(shí)也稱(chēng)為WIMP=Window/Icon/Menu/Pointing Device 窗口、圖標(biāo)、菜單、指點(diǎn)設(shè)備 - 什么是 HUI Handset User Interface 手持設(shè)備用戶(hù)界面 - 什么是WUI Web User Interface 網(wǎng)頁(yè)風(fēng)格用戶(hù)界面 - 什么是用戶(hù)界面設(shè)計(jì)： 在人和機(jī)器的互動(dòng)過(guò)程（Human Machine Interaction）中，有一個(gè)層面，即我們所說(shuō)的界面（interface）。從心理學(xué)意義來(lái)分，界面可分為感覺(jué)（視覺(jué)、觸覺(jué)、聽(tīng)覺(jué)等）和情感兩個(gè)層次。用戶(hù)界面設(shè)計(jì)是屏幕產(chǎn)品的重要組成部分。界面設(shè)計(jì)是一個(gè)復(fù)雜的有不同學(xué)科參與的工程，認(rèn)知心理學(xué)、設(shè)計(jì)學(xué)、語(yǔ)言學(xué)等在此都扮演著重要的角色。用戶(hù)界面設(shè)計(jì)的三大原則是：置界面于用戶(hù)的控制之下；減少用戶(hù)的記憶負(fù)擔(dān)；保持界面的一致性。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配作業(yè)布置課后反思授課課題認(rèn)識(shí)界面門(mén)界面設(shè)計(jì)原則和分類(lèi)教學(xué)目標(biāo)和要求了解和掌握界面設(shè)計(jì)原則和分類(lèi)教學(xué)重點(diǎn)和難點(diǎn)重點(diǎn)：掌握界面設(shè)計(jì)的基本原則和分類(lèi)難點(diǎn)：掌握界面設(shè)計(jì)的基本原則能熟練運(yùn)用到設(shè)計(jì)當(dāng)中教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時(shí)間第 九 周課時(shí)累計(jì)6教 學(xué) 過(guò) 程教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配本節(jié)課我們來(lái)說(shuō)UI藝術(shù)性設(shè)計(jì)的原則方面的問(wèn)題。在結(jié)構(gòu)設(shè)計(jì)的基礎(chǔ)上，參照目標(biāo)群體的心理模型和任務(wù)達(dá)成進(jìn)行視覺(jué)設(shè)計(jì)。包括色彩啊、字體呀、頁(yè)面哪等。視覺(jué)設(shè)計(jì)的原則主要有以下這么幾點(diǎn)，同學(xué)們一定要注意嘍！1）界面清晰明了，尤其導(dǎo)航要明確。最好允許用戶(hù)定制界面，如下圖：簡(jiǎn)單的界面設(shè)計(jì)比如像一些音頻軟件、3D軟件他們的界面參數(shù)比較多，其復(fù)雜的窗口結(jié)構(gòu)就更需要邏輯清晰的設(shè)計(jì)思路，這個(gè)時(shí)候呢，科學(xué)性肯定要遠(yuǎn)遠(yuǎn)大于藝術(shù)性！! l% x7 N$ N% E0 r% a2）減少短期記憶的負(fù)擔(dān)。就是說(shuō)讓計(jì)算機(jī)幫助記憶，例如IE進(jìn)入界面地址等可以讓機(jī)器記住。3 e#教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配3）依賴(lài)認(rèn)知而非記憶。譬如打印圖標(biāo)的記憶，下拉菜單列表中的選擇等要符合業(yè)界習(xí)慣。4）提供視覺(jué)線(xiàn)索。界面要有吸引力，如下圖：5）提供默認(rèn)(default)、撤消(undo)、恢復(fù)(redo)等功能。這方面好多同學(xué)可能不是很了解，但是你要做好一個(gè)真正的UI設(shè)計(jì)師，那么功能方面你還是要有一定的掌握喔！當(dāng)然啦，同學(xué)也不用怕，只要你用心，其實(shí)很簡(jiǎn)單的！Just do it!6）提供界面的快捷方式。7）盡量去使用真實(shí)事物的類(lèi)比。如電話(huà)、打印機(jī)等的圖標(biāo)設(shè)計(jì)，尊重用戶(hù)以往的使用經(jīng)驗(yàn)和使用習(xí)慣。: r: F1 A7 A9 8）完美視覺(jué)的清晰度。條理清晰，圖片、文字的布局和隱喻不要讓用戶(hù)去猜。如圖9）界面要協(xié)調(diào)一致。如手機(jī)界面按鈕擺放，習(xí)慣左鍵肯定、右鍵否定或按內(nèi)容擺放。10）同樣功能用同樣的圖形表示。11）色彩與內(nèi)容。整體軟件盡量不要超過(guò)5個(gè)色系（特殊需要例外），近似的顏色表示近似的意思。二、界面的分類(lèi)界面依據(jù)其在人與界面互動(dòng)過(guò)程中的作用方式，分為操作界面和顯示界面兩大類(lèi)。通常操作界面起到的是控制作用，用戶(hù)通過(guò)操作界面發(fā)出信息，操作機(jī)器執(zhí)行命令，同時(shí)也通過(guò)操作界面對(duì)機(jī)器的反饋信息作出反應(yīng)動(dòng)作。操作界面主要包括：觸控屏幕、鼠標(biāo)、鍵盤(pán)、操作手柄、遙控器等。顯示界面主要的職能是信息顯示。用戶(hù)通過(guò)顯示界面監(jiān)控機(jī)器對(duì)于指令的執(zhí)行狀況，同時(shí)也通過(guò)顯示了解機(jī)器在執(zhí)行命令后狀況。包括圖、文、聲、光等可釋讀要素。一般情況下，顯示界面和操作界面是共存的。操作界面為人機(jī)互動(dòng)提供了動(dòng)作平臺(tái)，而顯示界面則為人機(jī)互動(dòng)提供了信息平臺(tái)，這兩個(gè)平臺(tái)構(gòu)成了人機(jī)互動(dòng)的基本環(huán)境。根據(jù)界面的用戶(hù)特征，我們又可以將界面分為網(wǎng)頁(yè)用戶(hù)界面、游戲用戶(hù)界面、軟件用戶(hù)界面等幾大類(lèi)。這樣分類(lèi)的方式體現(xiàn)了“以用戶(hù)為中心”的核心理念，而整個(gè)界面設(shè)計(jì)教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配的過(guò)程都是圍繞“用戶(hù)”這個(gè)中心展開(kāi)的。作業(yè)布置課后反思授課課題認(rèn)識(shí)界面門(mén)設(shè)計(jì)界面的通用性的分析教學(xué)目標(biāo)和要求進(jìn)一步認(rèn)識(shí)界面，了解設(shè)計(jì)界面的通用性并進(jìn)行分析教學(xué)重點(diǎn)和難點(diǎn)重點(diǎn)：設(shè)計(jì)界面的通用性的分析難點(diǎn)：設(shè)計(jì)界面的功能、情感、環(huán)境的共通教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時(shí)間第 九 周課時(shí)累計(jì)8教 學(xué) 過(guò) 程教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配導(dǎo)入新課隨著硬件技術(shù)的飛速發(fā)展，使計(jì)算速度與存儲(chǔ)容量不再成為軟件開(kāi)發(fā)人員所擔(dān)心的問(wèn)題，用戶(hù)關(guān)心的主要問(wèn)題是能否比較容易和舒適地使用軟件。換言之，人們的著眼點(diǎn)在于軟件的易用性和美觀，而易用與美觀主要取決于用戶(hù)界面，即UI的優(yōu)劣。本課主要講解UI的基本理論和設(shè)計(jì)屬性，以期在具體學(xué)習(xí)UI設(shè)計(jì)技巧和制作技術(shù)之前對(duì)UI設(shè)計(jì)有一個(gè)整體的了解。1.1 UI設(shè)計(jì)基本介紹眾所周知，在當(dāng)今的硬件與軟件環(huán)境下，一個(gè)軟件沒(méi)有很好的界面設(shè)計(jì)就不能算是成功的軟件，因?yàn)椴还芩鼉?nèi)部有多么精巧的技術(shù)，只要用戶(hù)不愿意使用它，它的優(yōu)越性就得不到發(fā)揮，它的價(jià)值和作用也就無(wú)從談起。于是一個(gè)不涉及技術(shù)而著眼于易用和美觀的用戶(hù)界面顯得越來(lái)越重要，這就是軟件UI設(shè)計(jì)。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配UI的本意是用戶(hù)界面(User Interface)，概括成一句話(huà)就是-人和工具之間的界面。這個(gè)界面實(shí)際上體現(xiàn)在我們生活中的每一個(gè)環(huán)節(jié)，例如同學(xué)們切菜的時(shí)候，刀把手就是這個(gè)界面;開(kāi)車(chē)的時(shí)候方向盤(pán)啊儀表盤(pán)也是為個(gè)界面;看TV的時(shí)候遙控器亦是這個(gè)界面;用電腦的時(shí)候更不用說(shuō)。于是乎，我們把UI分成兩大類(lèi)：硬件界面和軟件界面。我們的教程所涉及的皆為軟件界面，同學(xué)們注意了，所以我們也可以稱(chēng)之為特殊的或者狹義的UI設(shè)計(jì)。n! 軟件設(shè)計(jì)可分為兩個(gè)部分：編碼設(shè)計(jì)與UI設(shè)計(jì)。編碼設(shè)計(jì)相信同學(xué)們都比較熟悉，但UI設(shè)計(jì)對(duì)許多貓來(lái)說(shuō)可能還比較陌生，可能連一些專(zhuān)門(mén)從事網(wǎng)站多媒體設(shè)計(jì)的人員也不是很理解UI的含義。前面說(shuō)了，UI是英文User和Interface的縮寫(xiě)。從字面上看有用戶(hù)和界面兩個(gè)組成部分，但實(shí)際上還包括用戶(hù)與界面之后的交互關(guān)系，所以這樣可分為3個(gè)方向，分別是：用戶(hù)研究，交互設(shè)計(jì)和界面設(shè)計(jì)。后面我為同學(xué)們分描述。UI設(shè)計(jì)教程 1.2 設(shè)計(jì)界面通用性簡(jiǎn)單分析其實(shí)呢，按照界面的不同可以將其劃分為功能性界面、情感性界面以及環(huán)境性界面。將界面分為這3類(lèi)有助于考察設(shè)計(jì)界面的諸多因素。當(dāng)然啦，設(shè)計(jì)界面的劃分并不是完全絕對(duì)的嘍，這三類(lèi)界面的涵義和內(nèi)家可能也會(huì)有交差和重疊，這個(gè)同學(xué)們應(yīng)該比較好理解，譬如宗教文化是一種環(huán)境性因素，但它帶給信仰的人更多一層的肯定是情感的因素。嘿嘿！雖然說(shuō)環(huán)境與情感性不好區(qū)分，但是并不妨礙不同分類(lèi)之間所存在的實(shí)質(zhì)性的差異。下面我?guī)е瑢W(xué)們分別來(lái)了解這三類(lèi)界面。$ W; _1 IE6 y7 7 W同學(xué)們不要著急喔！學(xué)習(xí)是循序漸進(jìn)的，對(duì)UI設(shè)計(jì)來(lái)說(shuō)，理論很重要喔！/ 功能性界面. o6 V/ M% VF 功能性界面主要是來(lái)實(shí)現(xiàn)使用性?xún)?nèi)容，因?yàn)槟?，任何一件產(chǎn)品或內(nèi)外環(huán)境或平面視覺(jué)傳達(dá)作品，它們存在的價(jià)值和意義首先在于使用性，再由使用性牽涉到多種功能因素的分析及實(shí)現(xiàn)功能的技術(shù)方法與材料運(yùn)用。在這一方面，分析思維將作為一種更改思維存在。不難理解吧，同學(xué)？嘿嘿！如果作為一種處理方式來(lái)設(shè)計(jì)產(chǎn)品，那么這種產(chǎn)品會(huì)使多種特征性（譬如民族性，純粹性）因素中性化，如果去除產(chǎn)品商標(biāo)，就很難認(rèn)出是哪國(guó)的或哪個(gè)公司的產(chǎn)品。當(dāng)然，這方面也說(shuō)明了產(chǎn)品中存在著共同性因素，它使全人類(lèi)做出同樣的反應(yīng)。人的感覺(jué)和判斷能力存在國(guó)際性的、客觀性的特征。$ e: Y7 |8 8 Q/ v4 其實(shí)呢，功能性的界面是要建立在符號(hào)學(xué)的基礎(chǔ)上的。同學(xué)不知道什么是符號(hào)學(xué)？國(guó)際符號(hào)學(xué)會(huì)對(duì)符號(hào)學(xué)是這樣定義的：“符號(hào)是關(guān)于信號(hào)標(biāo)志系統(tǒng)（PS:也就是通過(guò)某種渠道傳遞信息的系統(tǒng)唄?。┑睦碚摚芯孔匀环?hào)系統(tǒng)的人造符號(hào)系統(tǒng)的特征?！睆V義地說(shuō)呢，就是能夠代表其他事物的東西都是符號(hào)，如字母、數(shù)字、儀式、意識(shí)、動(dòng)作等，最復(fù)雜的一種符號(hào)系統(tǒng)可能就是語(yǔ)言嘍。設(shè)計(jì)功能界面，不可避免地要讓使用者明白功能操作界面的功能性標(biāo)志一定要很鮮明，這個(gè)很重要。5 : : c1 T! c! k; T/ 2 情感性界面8 y& M/ j/ D1 H( z3 _% I* Z5 一個(gè)family裝飾要賦予家居溫馨，一副design work要以情動(dòng)人，and so on.其實(shí)呢，任何一件產(chǎn)品或者portiflio只有與人的情產(chǎn)生共鳴才能為我們所接受，像愛(ài)屋及烏也體現(xiàn)了人的感情寄托。所以呢，一件好設(shè)計(jì)作品設(shè)計(jì)作品是有相當(dāng)大的魅力在。我們現(xiàn)代icon的設(shè)計(jì)發(fā)展也一直在朝著這一領(lǐng)域在開(kāi)拓。符號(hào)學(xué)日漸被應(yīng)用到廣告學(xué)，宗教學(xué)，神話(huà)學(xué)，民俗學(xué)等比較多的領(lǐng)域。譬如國(guó)外符號(hào)學(xué)界把符號(hào)學(xué)用于認(rèn)識(shí)論的研究，考察認(rèn)識(shí)知覺(jué)，認(rèn)識(shí)過(guò)程的符號(hào)學(xué)問(wèn)題。同時(shí)，符號(hào)學(xué)還用于分析利用人體感官進(jìn)行的交流，并將music 服裝等都作為符號(hào)系統(tǒng)加以分析研究，這都為設(shè)計(jì)藝術(shù)提供了寶貴借鑒價(jià)值的情感界面設(shè)計(jì)方法和手段。j X# K; H G!環(huán)境性界面; V, x4 z9 p9 ?+ S- x) b就不說(shuō)UI，任何的設(shè)計(jì)都要與環(huán)境這個(gè)因素相聯(lián)系。它包括比較多，例如社會(huì)、政治和文化，科技，民族等等等等。人處于外界環(huán)境中，是以社會(huì)群體而不是以個(gè)體為基礎(chǔ)的，所以環(huán)境性因素一般牌非受控與難以預(yù)見(jiàn)的變化狀態(tài)中。聯(lián)系到設(shè)計(jì)的歷史，我們可以利用藝術(shù)社會(huì)學(xué)的觀點(diǎn)去認(rèn)識(shí)各時(shí)期的設(shè)計(jì)潮流。其實(shí)呢，從18世紀(jì)的時(shí)候，西方的一批藝術(shù)家們已經(jīng)注意到藝術(shù)創(chuàng)造與審美趣味深受地理，氣候，民族以及歷史條件等環(huán)境因素的影響。這不難理解，因?yàn)檫@大抵就是同學(xué)們會(huì)看到不同國(guó)家民族的作品面大相徑庭的原因嘍。記得，法國(guó)有外比較著名的老外，嘿嘿，貌似是個(gè)學(xué)者，他說(shuō)物質(zhì)文明和精神文明的性質(zhì)面貌都取決于種族，環(huán)境，時(shí)代三大因素。也就是這個(gè)理兒。無(wú)論是工藝美術(shù)運(yùn)動(dòng)，同學(xué)們熟知的包豪思現(xiàn)代主義還是我提起來(lái)都抖擻的80年代的反設(shè)計(jì)，乃至現(xiàn)代的多元化等等都很明顯地反應(yīng)了環(huán)境因素對(duì)咱們?cè)O(shè)計(jì)的影響。! k! $ G# F) 同學(xué)們都玩游戲，其實(shí)呢，游戲中的界面設(shè)計(jì)就是最典型的環(huán)境性界面。其實(shí)呢，成功的作品都能夠完美地把以上三種界面結(jié)合的作品。愛(ài)好設(shè)計(jì)的同學(xué)們肯定聽(tīng)說(shuō)過(guò)著名的盧浮宮擴(kuò)建工程，貌似是貝聿銘設(shè)計(jì)的，功能性處理的那是相當(dāng)?shù)呐?，并沒(méi)有屈于形式而損害功能。人們參觀盧浮宮，不是回到古代，而是以新的價(jià)值觀去重新審視與欣賞，尤其是它的三角形外教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配觀符合了人們的心理期望，但是他又把情感性界面處理到極致，嘿嘿，我在這里就不附圖了，同學(xué)們可以搜索看看。作業(yè)布置課后反思授課課題人本界面回歸人性的界面設(shè)計(jì)教學(xué)目標(biāo)和要求理解“認(rèn)知摩擦”和“可用性”兩個(gè)概念教學(xué)重點(diǎn)和難點(diǎn)重點(diǎn)：理解“認(rèn)知摩擦”和“可用性”兩個(gè)概念難點(diǎn)：理解“認(rèn)知摩擦”和“可用性”兩個(gè)概念教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時(shí)間第 十 周課時(shí)累計(jì)10教 學(xué) 過(guò) 程教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配導(dǎo)入新課:人類(lèi)的認(rèn)知水平在隨著問(wèn)題的變化而變化過(guò)程中所遇到的阻力就是認(rèn)知摩擦。在軟件硬件不斷升級(jí)的過(guò)程中，認(rèn)知摩擦?xí)r刻存在。例如:我們?cè)诿鎸?duì)一個(gè)升級(jí)到新版本的軟件時(shí)，通常需要花上一段時(shí)間才能熟悉掌握它，而升級(jí)所帶來(lái)的新功能又很少能用到，或者是通過(guò)一段時(shí)間的學(xué)習(xí)后才能正確使用，這其實(shí)就是“認(rèn)知摩擦”在作祟。 當(dāng)然，少量的認(rèn)知摩擦對(duì)于提升我們的認(rèn)知能力是有幫助的，因此我們提倡回歸人性的界面設(shè)計(jì)，就是通過(guò)各種方法讓這種認(rèn)知摩擦控制在一定范圍之內(nèi)。但在實(shí)際操作中要做到這一點(diǎn)并不容易。比如，在設(shè)計(jì)微波爐的界面時(shí)，是不是讓按鈕和把手都更加適合人的眼睛和手指，讓信息更容易被讀取就解決了認(rèn)知摩擦的問(wèn)題呢？教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配為用戶(hù)而設(shè)計(jì)-可用性可用性的標(biāo)準(zhǔn)對(duì)任何的人實(shí)施中心的活動(dòng)都有效，界面設(shè)計(jì)尤其如此。 在一組可用性不錯(cuò)的手機(jī)圖標(biāo)設(shè)計(jì)中，通過(guò)圖形我們就能明白其意義而不需要翻閱說(shuō)明書(shū)?？捎眯允窃u(píng)估用戶(hù)界面是否容易使用的程度屬性。一般來(lái)說(shuō)，可用性由5個(gè)屬性組成。（1） 可學(xué)習(xí)性，也就是初次接觸界面時(shí)，用戶(hù)在沒(méi)有任何經(jīng)驗(yàn)的情況下使用界面完成基本任務(wù)的難易程度。（2） 效率，當(dāng)用戶(hù)熟悉了這個(gè)界面后，其完成任務(wù)的速度。（3） 可記憶性，在一段時(shí)間沒(méi)有使用之后再次使用界面，用戶(hù)重新熟練操作的難易程度。（4） 出錯(cuò)，用戶(hù)在使用界面是除了多少錯(cuò)誤，這些錯(cuò)誤的嚴(yán)重程度，以及是否能夠方便迅速的覺(jué)察錯(cuò)誤并恢復(fù)。（5） 滿(mǎn)意度，用戶(hù)使用這個(gè)界面的滿(mǎn)意程度。實(shí)現(xiàn)可用性的途徑有如下5個(gè)方面。（1） 為用戶(hù)的實(shí)際工作而設(shè)計(jì)。（2） 學(xué)會(huì)與客戶(hù)溝通。（3） 避免為創(chuàng)新而創(chuàng)新。（4） 努力建立有效的交互。（5） 用實(shí)際工作來(lái)測(cè)試界面。 操作界面的類(lèi)型與特征 操作界面可以分為連續(xù)性和不連續(xù)性操作界面兩大類(lèi)，其中不連續(xù)性操作界面可分為三種情況：一是開(kāi)關(guān)，如電燈開(kāi)關(guān)等；二是不連續(xù)性調(diào)整控制。如電視機(jī)的頻道按鈕；三是符號(hào)輸入按鈕，如電腦鍵盤(pán)。 連續(xù)性操作界面也可以分為兩種情況:一是定量調(diào)節(jié)控制，其作用是調(diào)節(jié)機(jī)器到莫一種狀態(tài)，如收音機(jī)上的電臺(tái)波段調(diào)諧鈕；二是連續(xù)調(diào)節(jié)控制，其作用是不斷調(diào)節(jié)機(jī)器狀態(tài)，使其沿理想方向運(yùn)行，如方向盤(pán)。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配作業(yè)布置課后反思授課課題人本界面教學(xué)目標(biāo)和要求通過(guò)本章學(xué)習(xí)使學(xué)生了解UI設(shè)計(jì)案例展示欣賞與分析教學(xué)重點(diǎn)和難點(diǎn)教學(xué)重點(diǎn)：掌握UI設(shè)計(jì)案例展示欣賞與分析。教學(xué)難點(diǎn)：掌握UI設(shè)計(jì)案例展示欣賞與分析。教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時(shí)間第 十 周課時(shí)累計(jì)12教 學(xué) 過(guò) 程教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配導(dǎo)入新課第一節(jié) 圖標(biāo)圖標(biāo)是具有明確指代含義的計(jì)算機(jī)圖形。其中桌面圖標(biāo)是軟件標(biāo)識(shí)，界面中的圖標(biāo)是功能標(biāo)識(shí)。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配圖標(biāo)分為廣義和狹義兩種：廣義具有指代意義的圖形符號(hào)，具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。應(yīng)用范圍很廣，軟硬件網(wǎng)頁(yè)社交場(chǎng)所公共場(chǎng)合無(wú)所不在，例如：男女廁所標(biāo)志和各種交通標(biāo)志等。狹義應(yīng)用于計(jì)算機(jī)軟件方面，包括：程序標(biāo)識(shí)、數(shù)據(jù)標(biāo)識(shí)、命令選擇、模式信號(hào)或切換開(kāi)關(guān)、狀態(tài)指示等。一個(gè)圖標(biāo)是一個(gè)小的圖片或?qū)ο螅硪粋€(gè)文件，程序，網(wǎng)頁(yè)，或命令。圖標(biāo)有助于用戶(hù)快速執(zhí)行命令和打開(kāi)程序文件。單擊或雙擊圖標(biāo)以執(zhí)行一個(gè)命令。圖標(biāo)也用于在瀏覽器中快速展現(xiàn)內(nèi)容。所有使用相同擴(kuò)展名的文件具有相同的圖標(biāo)。圖標(biāo)有一套標(biāo)準(zhǔn)的大小和屬性格式，且通常是小尺寸的。每個(gè)圖標(biāo)都含有多張相同顯示內(nèi)容的圖片，每一張圖片具有不同的尺寸和發(fā)色數(shù)。一個(gè)圖標(biāo)就是一套相似的圖片，每一張圖片有不同的格式。從這一點(diǎn)上說(shuō)圖標(biāo)是三維的。圖標(biāo)還有另一個(gè)特性：它含有透明區(qū)域，在透明區(qū)域內(nèi)可以透出圖標(biāo)下的桌面背景。在結(jié)構(gòu)上圖標(biāo)其實(shí)和麥當(dāng)勞的巨無(wú)霸漢堡差不多。一個(gè)圖標(biāo)實(shí)際上是多張不同格式的圖片的集合體，并且還包含了一定的透明區(qū)域。因?yàn)橛?jì)算機(jī)操作系統(tǒng)和顯示設(shè)備的多樣性，導(dǎo)致了圖標(biāo)的大小需要有多種格式。象素分辨 操作系統(tǒng)在顯示一個(gè)圖標(biāo)時(shí)，會(huì)按照一定的標(biāo)準(zhǔn)選擇圖標(biāo)中最適合當(dāng)前顯示環(huán)境和狀態(tài)的圖像。如果你用的是Windows98操作系統(tǒng)，顯示環(huán)境是 800x600分辨率，32位色深，你在桌面上看到的每個(gè)圖標(biāo)的圖像格式就是256色32x32象素大小。如果在相同的顯示環(huán)境下，Windows XP操作系統(tǒng)中，這些圖標(biāo)的圖像格式就是：真彩色（32位色深）、32x32象素大小。下面就是Windows各個(gè)操作系統(tǒng)中的標(biāo)準(zhǔn)圖標(biāo)格式：（單位：大小象素顏色）Windows 98 SE/ME/200048 x 48 - 256 32 x 32 - 256 16 x 16 - 25648 x 48 - 16 32 x 32 - 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圖標(biāo)中并不是必須的。注意：Windows98/2000對(duì)24 x 24格式的圖標(biāo)不兼容。你可以在相關(guān)應(yīng)用軟件中打開(kāi)含有這種圖像格式的圖標(biāo)，但操作系統(tǒng)卻認(rèn)為是無(wú)效的。你必須確保你所設(shè)計(jì)的圖標(biāo)中至少含有以上所列的圖像格式來(lái)獲得良好的顯示效果。如果操作系統(tǒng)在圖標(biāo)中找不到特定的圖像格式，它總是采用最接近的圖像格式來(lái)顯示，比如把大小為48 x 48的圖標(biāo)縮小為24 x 24象素大小。當(dāng)然，效果就差些了。不同的操作系統(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 （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 （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色）此畫(huà)面為手機(jī)的操作系統(tǒng)的圖標(biāo)。同學(xué)們主要在以下幾個(gè)方面來(lái)考慮：1 造型；2 顏色；3 藝術(shù)性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標(biāo)的文件，我們接下來(lái)可以分享一下。第二節(jié) 輸入法設(shè)計(jì)輸入法是指為了將各種符號(hào)輸入計(jì)算機(jī)或其他設(shè)備（如手機(jī)）而采用的編碼方法。漢字輸入的編碼方法，基本上都是采用將音、形、義與特定的鍵相聯(lián)系，再根據(jù)不同漢字進(jìn)行組合來(lái)完成漢字的輸入的。中文熱門(mén)輸入法搜狗拼音輸入法：搜狗拼音輸入法是2006年6月由搜狐（SOHU）公司推出的一款Windows平臺(tái)下的漢字拼音輸入法。搜狗拼音輸入法是基于搜索引擎技術(shù)的、特別適合網(wǎng)民使用的、新一代的輸入法產(chǎn)品，用戶(hù)可以通過(guò)互聯(lián)網(wǎng)備份自己的個(gè)性化詞庫(kù)和配置信息。搜狗拼音輸入法為中國(guó)國(guó)內(nèi)現(xiàn)今主流漢字拼音輸入法之一，奉行永久免費(fèi)的原則。QQ拼音輸入法：QQ拼音輸入法是騰訊公司開(kāi)發(fā)的一種方便人們使用和觀看的輸入法，可下載各種各樣的皮膚來(lái)改變自身的皮膚。同學(xué)們主要在以下幾個(gè)方面來(lái)考慮：1 造型；2 顏色；3 藝術(shù)性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標(biāo)的文件，我們接下來(lái)可以分享一下。第三節(jié) 手機(jī)界面設(shè)計(jì)同學(xué)們主要在以下幾個(gè)方面來(lái)考慮：1 造型；2 顏色；3 藝術(shù)性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標(biāo)的文件，我們接下來(lái)可以分享一下。第四節(jié) 播放器同學(xué)們主要在以下幾個(gè)方面來(lái)考慮：1 造型；2 顏色；3 藝術(shù)性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標(biāo)的文件，我們接下來(lái)可以分享一下。第五節(jié) 系統(tǒng)界面教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配同學(xué)們主要在以下幾個(gè)方面來(lái)考慮：1 造型；2 顏色；3 藝術(shù)性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標(biāo)的文件，我們接下來(lái)可以分享一下。作業(yè)布置課后反思授課課題界面的整體設(shè)計(jì)教學(xué)目標(biāo)和要求界面設(shè)計(jì)的重要性,設(shè)計(jì)原則教學(xué)重點(diǎn)和難點(diǎn)重點(diǎn)：界面設(shè)計(jì)的重要性,設(shè)計(jì)原則難點(diǎn)：掌握界面設(shè)計(jì)的重要性,設(shè)計(jì)原則進(jìn)行界面設(shè)計(jì)教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時(shí)間第 九 周課時(shí)累計(jì)14教 學(xué) 過(guò) 程教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配提問(wèn)導(dǎo)入:用戶(hù)界面設(shè)計(jì)為什么這么重要呢?下面帶著大家一起來(lái)了解界面設(shè)計(jì).用戶(hù)界面設(shè)計(jì)從字面上來(lái)說(shuō) ,是面向用戶(hù)的 。用戶(hù)界面的發(fā)展經(jīng)歷了從低級(jí)到高級(jí)的過(guò)程，用戶(hù)界面在軟件系統(tǒng)中的價(jià)值比重也越來(lái)越高，用戶(hù)假面設(shè)計(jì)不僅要美觀，而且要實(shí)用。用戶(hù)界面是人機(jī)之間交流、溝通的層面，用戶(hù)界面設(shè)計(jì)是以人為中心，使產(chǎn)品達(dá)到逾越使用的設(shè)計(jì)。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配界面設(shè)計(jì)的重要性界面是用戶(hù)與網(wǎng)頁(yè)交互的窗口，用戶(hù)通過(guò)界面想計(jì)算機(jī)輸入信息進(jìn)行控制、查詢(xún)和操作；網(wǎng)頁(yè)則通過(guò)界面想用戶(hù)提供信息，以供閱讀、分析、判斷。所以界面設(shè)計(jì)在網(wǎng)頁(yè)中占有重要的位置。界面設(shè)計(jì)的原則界面設(shè)計(jì)是瀏覽者與網(wǎng)絡(luò)交流的平臺(tái)，由于它在網(wǎng)絡(luò)中具有特殊位置，所以其設(shè)計(jì)要遵循一定的原則。首先是簡(jiǎn)易性，簡(jiǎn)易是為了方便用戶(hù)使用，了解網(wǎng)頁(yè)內(nèi)容。其次是清楚安全，指在用戶(hù)出現(xiàn)危機(jī)的選擇時(shí)有信息介入系統(tǒng)的提示。最后是靈活人性化，指讓用戶(hù)輕松快捷的使用。界面設(shè)計(jì)的要求界面設(shè)計(jì)師瀏覽者瀏覽網(wǎng)頁(yè)的第一印象，所以它的設(shè)計(jì)風(fēng)格要與整體頁(yè)面相一致，顏色的搭配要符合人們的視覺(jué)習(xí)慣，并與頁(yè)面的整體色調(diào)想?yún)f(xié)調(diào)。其中，字體的選擇不要過(guò)于花哨，選用平常字體即可。一什么是界面設(shè)計(jì)界面設(shè)計(jì)是為了滿(mǎn)足專(zhuān)業(yè)化、標(biāo)準(zhǔn)化需求而對(duì)軟件的使用界面進(jìn)行美化、優(yōu)化、規(guī)范化的設(shè)計(jì)分支，具體包括軟件啟動(dòng)封面設(shè)計(jì)、軟件框架設(shè)計(jì)、按鈕設(shè)計(jì)、面板設(shè)計(jì)、菜單設(shè)計(jì)、標(biāo)簽設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、滾動(dòng)條及狀態(tài)欄設(shè)計(jì)、安裝過(guò)程設(shè)計(jì)、包裝及商品化。如下圖：直觀的按鈕設(shè)計(jì) 二圖形界面的分類(lèi)隨著科技的發(fā)展，人們對(duì)信息的需求量也在不斷的增多，所以圖形界面也越來(lái)越多樣化和細(xì)分化，不同的圖形界面在設(shè)計(jì)上也會(huì)有不同的特點(diǎn)。圖形界面可以分為以下幾類(lèi)：l 軟件用戶(hù)界面：軟件只是一種工具，然而人們與軟件的交互性操作都是通過(guò)軟件界面來(lái)進(jìn)行的，所以軟件界面的設(shè)計(jì)不僅要美觀而且要易用。l 網(wǎng)絡(luò)界面：網(wǎng)絡(luò)的發(fā)展帶來(lái)的網(wǎng)站界面設(shè)計(jì)的繁榮，隨著網(wǎng)絡(luò)的發(fā)展，網(wǎng)站設(shè)計(jì)已經(jīng)從最初的純文字內(nèi)容發(fā)展到現(xiàn)在的包含圖像、視頻、動(dòng)畫(huà)等多種媒體的形式。網(wǎng)站界面必須具有獨(dú)立性和創(chuàng)意性。在網(wǎng)站界面設(shè)計(jì)中，最重要的是使用戶(hù)方便地查找信息，并能夠感受到方便操作帶來(lái)的樂(lè)趣。如下圖的咖啡網(wǎng)站頁(yè)面l 手機(jī)界面：隨著科技的發(fā)展，手機(jī)的功能也越來(lái)越強(qiáng)大，手機(jī)界面的設(shè)計(jì)要人性化，不僅要方便使用，還要美觀。如下圖l 游戲界面：游戲軟件界面的制作通常比較華麗、主題鮮明，三維效果十分普遍，所以游戲中的人物或物品為主體，視覺(jué)效果占十分重要的地位。 l 播放器界面：在激烈的市場(chǎng)競(jìng)爭(zhēng)中，軟件產(chǎn)品僅有強(qiáng)大的功能是遠(yuǎn)遠(yuǎn)不夠的，將易用性與美觀相結(jié)合，才能適應(yīng)用戶(hù)的需要，從而創(chuàng)造出更高的價(jià)值。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配作業(yè)布置課后反思授課課題界面的整體設(shè)計(jì)- UI設(shè)計(jì)流程教學(xué)目標(biāo)和要求通過(guò)本章學(xué)習(xí)使學(xué)生了解UI設(shè)計(jì)原則、流程。教學(xué)重點(diǎn)和難點(diǎn)教學(xué)重點(diǎn)：掌握UI設(shè)計(jì)原則、流程。教學(xué)難點(diǎn)：掌握UI設(shè)計(jì)流程。教學(xué)方法案例教學(xué)教學(xué)手段多媒體授課時(shí)間第 十 周課時(shí)累計(jì)16教 學(xué) 過(guò) 程教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配導(dǎo)入新課: 第一節(jié) UI設(shè)計(jì)原則1.簡(jiǎn)易性界面的簡(jiǎn)潔UI設(shè)計(jì)圖片是要讓用戶(hù)便于使用、便于了解、并能減少用戶(hù)發(fā)生錯(cuò)誤選擇的可能性。教學(xué)步驟及教學(xué)內(nèi)容時(shí)間分配2.用戶(hù)語(yǔ)言界面中要使用能反應(yīng)用戶(hù)本身的語(yǔ)言，而不是游戲設(shè)計(jì)者的語(yǔ)言。3.記憶負(fù)擔(dān)最小化人腦不是電腦，在設(shè)計(jì)界面時(shí)必須要考慮人類(lèi)大腦處理信息的限度。人類(lèi)的短期記憶極不穩(wěn)定、有限，24小時(shí)內(nèi)存在25%的遺忘率。所以對(duì)用戶(hù)來(lái)說(shuō)，瀏覽信息要比記憶更容易。4.一致性是每一個(gè)優(yōu)秀界面都具備的特點(diǎn)。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與游戲內(nèi)容相一致。5.清楚在視覺(jué)效果上便于理解和使用。6.用戶(hù)的熟悉程度用戶(hù)可通過(guò)已掌握的知識(shí)來(lái)使用界面，但不應(yīng)超出一般常識(shí)。7.從用戶(hù)的觀點(diǎn)考慮想用戶(hù)所想，做用戶(hù)所做。用戶(hù)總是按照他們自己的方法理解和使用。通過(guò)比較兩個(gè)不同世界(真實(shí)與虛擬)的事物，完成更好的設(shè)計(jì)。如：書(shū)籍對(duì)比竹簡(jiǎn)。8.排列一個(gè)有序的界面能讓用戶(hù)輕松的使用。9.安全性用戶(hù)能自由的作出選擇，且所有選擇都是可逆的。在用戶(hù)作出危險(xiǎn)的選擇時(shí)有信息介入系統(tǒng)的提示。10.靈活性簡(jiǎn)單來(lái)說(shuō)就是要讓用戶(hù)方便的使用，但不同于上述。即互動(dòng)多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤(pán)或手柄)。11.人性化高效率和用戶(hù)滿(mǎn)意度是人性化的體現(xiàn)。應(yīng)具備專(zhuān)家級(jí)和初級(jí)玩家系統(tǒng)，即用戶(hù)可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。第二節(jié) UI設(shè)計(jì)的流程確認(rèn)目標(biāo)用戶(hù)在洛可可的UI設(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)就不同。采集目標(biāo)用戶(hù)的習(xí)慣交互方式不同類(lèi)型的目標(biāo)用戶(hù)有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來(lái)源于其原有的針對(duì)現(xiàn)實(shí)的交互流程、已有軟件工具的交互流程。當(dāng)然還要在此基礎(chǔ)上通過(guò)調(diào)研分析找到用戶(hù)希望達(dá)到的交互效果，并且