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

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