ui設計教案18個課時

1、備 課 本Lesson Preparation _2013_-_2014_學年 第_一_學期Academic Year - Semester 課 程 名 稱 UI設計 Course教材名稱及版本 UI設計 Textbook and Edition授 課 班 級 2011平面1班 Class教 師 姓 名 黎 丹 Teacher審 核 人 周 增 輝 Approver填寫說明1、此備課本用來書寫教案，適用于所有專職教師、兼職教師和兼課教師。2、所有承擔教學任務的教師需書寫紙質(zhì)版教案，如因使用多媒體教學需要和教學任務繁重，可用電子版教案，但格式必須按紙質(zhì)版格式，且所有教案的書寫應與學期授課計劃相符

2、合。3、備課過程中的各個環(huán)節(jié)和要素可根據(jù)實際授課內(nèi)容進行填寫。如：授課課題：（教學章、節(jié)、標題或項目名稱）教學目標和要求：（教學目標一般說應包含知識教學、能力發(fā)展和思想教育三方面內(nèi)容，教學要求是指識記、理解、簡單應用、綜合應用等層次）教學重點和難點：教學重點，是為了達到確定的教學目的而必須著重講解和分析的內(nèi)容；教學難點，是就學生的接受情況而言的，學生經(jīng)過自學還不能理解或理解有困難的地方，即可確定為教學難點。教學方法：（討論、啟發(fā)、演示、辯論、講練結合、案例教學、情境模擬等）教學手段：（多媒體教學、錄像帶、掛圖、幻燈片等）授課時間：第     &

3、#160;    周課時累計：教學過程：（體現(xiàn)教學步驟，包括時間分配和教學內(nèi)容教學進程）作業(yè)布置：（含思考題、討論題）課后反思：（因為課后反思是教案實施效果追記，課前還不能打印，只能課后用筆手寫）4、 備課本的審核人為各教研室（項目中心）主任。授課課題認識界面門UI設計說課教學目標和要求通過本章學習使學生了解UI在中國的發(fā)展，以及UI的是什么教學重點和難點教學重點：掌握UI在中國的發(fā)展，以及UI是什么。教學難點：掌握UI是什么。教學方法案例教學教學手段多媒體授課時間第 九 周課時累計2教 學 過 程教學步驟及教學內(nèi)容時間分配導入新課:UI即User In

4、terface(用戶界面)的簡稱。UI設計則是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由,充分體現(xiàn)軟件的定位和特點。第一節(jié) UI是什么軟件設計可分為兩個部分：編碼設計與UI設計。教學步驟及教學內(nèi)容時間分配編碼設計大家都很熟悉，但是 UI設計還是一個很陌生的詞，即使一些專門從事網(wǎng)站與多媒體設計的人也不完全理解UI的意思。UI的本意是用戶界面，是英文User和 interface的縮寫。從字面上看是用戶與界面2個組成部分，但實際上還包括用戶與界面之間的交互關系。在飛速發(fā)展的電子產(chǎn)品中，界面設計工作一點點的被重視起

5、來。做界面設計的“美工”也隨之被稱之為“UI設計師”或“UI工程師”。其實軟件界面設計就像工業(yè)產(chǎn)品中的工業(yè)造型設計一樣，是產(chǎn)品的重要賣點。一個電子產(chǎn)品擁有美觀的界面會給人帶來舒適的視覺享受，拉近人與商品的距離，為商家創(chuàng)造賣點。界面設計不是單純的美術繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設計，是建立在科學性之上的藝術設計。檢驗一個界面的標準既不是某個項目開發(fā)組領導的意見也不是項目成員投票的結果，而是終端用戶的感受。所以界面設計要和用戶研究緊密結合，是一個不斷為最終用戶設計滿意視覺效果的過程。第二節(jié) UI設計師是做什么的在中國，UI設計還是一個需要不斷成長的設計領域，但eico

6、design,Tigocn, lkkui design, Robin design等國內(nèi)知名設計機構已經(jīng)進入了探索UI設計的道路。UI設計從工作內(nèi)容上來說分為3個方向。它主要是由UI 研究的3個因素決定的， 其分別是研究工具，研究人與界面的關系，研究人。研究界面圖形設計師Graphic UI designer國內(nèi)目前大部分UI工作者都是從事這個行業(yè)。也有人稱之為美工，但實際上不是單純意義上的美術工人，而是軟件產(chǎn)品的產(chǎn)品外形設計師。這些設計師大多是美術院校畢業(yè)的，其中大部分是有美術設計教育背景，例如工業(yè)外形設計，裝潢設計，信息多媒體設計等。研究人與界面的關系交互設計師，interaction d

7、esigner在圖形界面產(chǎn)生之前，長期以來UI設計師就是指交互設計師。交互設計師的工作內(nèi)容就是設計軟件的操作流程，樹狀結構，軟件的結構與操作規(guī)范（spec）等。一個軟件產(chǎn)品在編碼之前需要作的就是交互設計，并且確立交互模型，交互規(guī)范。交互設計師一般都是軟件工程師背景居多。研究人用戶測試/研究工程師User experience engineer任何的產(chǎn)品為了保證質(zhì)量都需要測試，軟件的編碼需要測試，自然UI設計也需要被測試。這個測試和編碼沒有任何關系，主要是測試交互設計的合理性以及圖形設計的美觀性。測試方法一般都是采用焦點小組，用目標用戶問卷的形式來衡量UI設計的合理性。這個職位很重要，如果沒有這

8、個職位，UI設計的好壞只能憑借設計師的經(jīng)驗或者領導的審美來評判，這樣就會給企業(yè)帶來嚴重的風險性。用戶研究工程師一般是心理學人文學背景比較合適。綜上所述UI設計師就是：軟件圖形設計師、交互設計師和用戶研究工程師。其中交互設計師：“UI”的本義是用戶界面，是英文User和interface的縮寫。UI設計師則指從事對軟件的人機交互、操作邏輯、界面美觀的整體設計工作的人。工作內(nèi)容：負責軟件界面的美術設計、創(chuàng)意工作和制作工作；根據(jù)各種相關軟件的用戶群，提出構思新穎、有高度吸引力的創(chuàng)意設計；對頁面進行優(yōu)化，使用戶操作更趨于人性化；維護現(xiàn)有的應用產(chǎn)品；收集和分析用戶對于GUI的需求。第三節(jié) UI設計在中國

9、的現(xiàn)狀目前在國內(nèi)UI還是一個相對陌生的詞，即便是洛可可設計也在UI設計的道路上不斷探索客戶及用戶的需求。我們經(jīng)?？吹揭恍┱衅笍V告寫著：招聘界面美工、界面美術設計師等等。這表明在國內(nèi)對UI的理解還停留在美術設計方面，認為UI的工作只是描邊畫線，缺乏對用戶交互的重要性的理解；另一方面在軟件開發(fā)過程中還存在重技術而不重應用的現(xiàn)象。許多商家認為軟件產(chǎn)品的核心是技術，而UI僅僅是次要的輔助，這點在人員的比例與待遇上可以表現(xiàn)出來。 但這不是UI設計真正的價值體現(xiàn)，只是UI設計發(fā)展的一個必經(jīng)過程。我們以物質(zhì)產(chǎn)品手機行業(yè)為例，當手機剛剛進入市場的時候不但價格貴的驚人，而且除了通話以外沒有什么其他功能。由于當時

10、的主導是技術，所以大家都把精力放在信號、待機時間、壽命等方面，對于產(chǎn)品的造型，使用的合理性很少關心。事過境遷，如今技術已經(jīng)完全的達到用戶的需求，于是商家為了創(chuàng)造賣點，提高爭力，非常重視產(chǎn)品的外觀設計，除此之外還頻頻推出短信,彩屏，和鉉，彩信,攝像頭等等。這樣一來產(chǎn)品的美觀、個性、易用、易學、人性化等等都成了產(chǎn)品的賣點。軟件產(chǎn)品與物質(zhì)產(chǎn)品的發(fā)展是相同的。過去由于計算機硬件的限制，編碼設計成為軟件開發(fā)的代名詞，美觀親和的圖形化界面與合理易用的交互方式都沒有得到充分的重視，實際上這個時期的軟件叫作軟件程序，而不是軟件產(chǎn)品?，F(xiàn)今隨著計算機硬件的飛速發(fā)展，過去的軟件程序已經(jīng)不能適應用戶的要求。軟件產(chǎn)品在

11、激烈的市場競爭中，僅僅有強大的功能是遠遠不夠的，不足以戰(zhàn)勝強勁的對手。幸運的是在國內(nèi)一些高瞻遠矚的民族企業(yè)已經(jīng)開始意識到UI給軟件產(chǎn)品帶來的巨大賣點了，例如金山公司的影霸、詞霸、毒霸、網(wǎng)標，由于重視UI的開發(fā)與地位，才使得金山產(chǎn)品在同類軟件產(chǎn)品中首屈一指。聯(lián)想軟件的UI部門積極開展用戶研究與使用性測試，將易用與美觀相結合，推出的雙模式電腦、幸福系列等成功UI范例，為聯(lián)想贏得全球消費 PC第三的稱號等等、等等.實踐證明，各商家只要在產(chǎn)品美觀和易用設計方面很小投入，將會有很大產(chǎn)出。其投入產(chǎn)出比，要比在功能領先性開發(fā)上的投入大得多。我們不得不承認現(xiàn)階段中國在很多領域都與西方發(fā)達國家有相當大的差距，如

12、何趕上并超過他們是我們這代人肩負的歷史使命。軟件產(chǎn)品領域不象物質(zhì)產(chǎn)品那樣存在工藝、材料上的限制，軟件產(chǎn)品核心問題就是人。提高軟件UI設計師個人能力減小人員上的差距是中國UI發(fā)展首要關鍵的問題。目前國內(nèi)各院校還沒有設立相對健全的UI設計專業(yè)，所以提高UI設計師能力關鍵在于提供一個良好的學習與交流的資源環(huán)境。國內(nèi)已經(jīng)有很多交流設計網(wǎng)站，介紹工業(yè)設計、平面設計、服裝設計、繪畫藝術、多媒體flash等，但是UI設計一直沒有受到應有的關注，僅僅被放在數(shù)碼設計或者平面網(wǎng)頁設計的一個欄目里，這僅有的資源對培養(yǎng)優(yōu)秀的設計師是不夠的，必須有一個信息快捷、資源豐富、設計水平一流、專業(yè)權威的UI設計學習與交流的地方

13、才能適應日益發(fā)展的UI設計師們的需求。教學步驟及教學內(nèi)容時間分配作業(yè)布置課后反思授課課題認識界面門教學目標和要求界面的概述教學重點和難點重點：了解什么UI,什么是界面難點：界面的概述教學方法案例教學教學手段多媒體授課時間第 九 周課時累計4教 學 過 程教學步驟及教學內(nèi)容時間分配導入新課:隨著硬件技術的飛速發(fā)展，使計算速度與存儲容量不再成為軟件開發(fā)人員所擔心的問題，用戶關心的主要問題是能否比較容易和舒適地使用軟件。換言之，人們的著眼點在于軟件的易用性和美觀，而易用與美觀主要取決于用戶界面，即UI的優(yōu)劣。本課主要講解UI的基本理論和設計屬性，以期在具體學習UI設計技巧和制作技術之前對UI設計有一

14、個整體的了解。什么事UI呢？UI的本意是用戶界面，是英文User和interface的縮寫。從字面上看是用戶與界面2個組成部分，但實際上還包括用戶與界面之間的交互關系，所以這樣可分為3個方向，他們分別是：用戶研究、交互設計、界面設計。教學步驟及教學內(nèi)容時間分配1、用戶研究    用戶研究包含兩個方面：一是可用性工程學（usability Engineering），研究如何提高產(chǎn)品的可用性，使得系統(tǒng)的設計更容易被人使用、學習和記憶；二是通過可用性工程學的研究，發(fā)掘用戶的潛在需求，為技術創(chuàng)新提供另外一條思路和方法（consumer insight）。 

15、60;  用戶研究是一個跨學科的專業(yè)，涉及可用性工程學、人類功效學、心理學、市場研究學、教育學、設計學等學科。用戶研究技術是站在人文學科的角度來研究產(chǎn)品，站在用戶的角度介入到產(chǎn)品的開發(fā)和設計中。   用戶研究通過對于用戶的工作環(huán)境、產(chǎn)品的使用習慣等研究，使得在產(chǎn)品開發(fā)的前期能夠把用戶對于產(chǎn)品功能的期望、對設計和外觀方面的要求融入到產(chǎn)品的開發(fā)過程中去，從而幫助企業(yè)完善產(chǎn)品設計或者探索一個新產(chǎn)品概念。    他是得到用戶需求和反饋的途徑，也是檢驗界面與交互設計是否合理的重要標準。2、交互設計    這部分指人

16、與機之間的交互工程，在過去交互設計也由程序員來做，其實程序員擅長編碼，而不善于與最終用戶交互。所以，很多的軟件雖然功能比較齊全，但是交互方面設計很粗糙，繁瑣難用，學習困難。使用這樣的軟件后，不是使人聰明與進步而是讓人感到愚弄與羞辱。許多人因為不能操作電腦軟件而下崗失業(yè)，這樣的交互使電腦成為讓人恐懼的科技怪獸。于是我們把交互設計從程序員的工作中分離出來單獨成為一個學科，也就是人機交互設計。他的目的在于加強軟件的易用、易學、易理解，使計算機真正成為方便地為人類服務的工具。3、界面設計    在漫長的軟件發(fā)展中，界面設計工作一直沒有被重視起來。做界面設計的人也被貶義的稱

17、為“美工”。其實軟件界面設計就像工業(yè)產(chǎn)品中的工業(yè)造型設計一樣，是產(chǎn)品的重要買點。一個友好美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點。界面設計不是單純的美術繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設計，是純粹的科學性的藝術設計。檢驗一個界面的標準即不是某個項目開發(fā)組領導的意見也不是項目成員投票的結果，而是最終用戶的感受。所以界面設計要和用戶研究緊密結合，是一個不斷為最終用戶設計滿意視覺效果的過程什么是UI? 常識 UI行業(yè)常用名詞及縮寫定義 - 什么是 UI ： UI的本意是用戶界面，是英文User和 interface的縮寫。 - 什么是 GUI

18、Graphics User Interface 圖形用戶界面 有時也稱為WIMP=Window/Icon/Menu/Pointing Device 窗口、圖標、菜單、指點設備 - 什么是 HUI Handset User Interface 手持設備用戶界面 - 什么是WUI Web User Interface 網(wǎng)頁風格用戶界面 - 什么是用戶界面設計： 在人和機器的互動過程（Human Machine Interaction）中，有一個層面，即我們所說的界面（interface）。從心理學意義來分，界面可分為感覺（視覺、觸覺、聽覺等）和情感兩個層次。用戶界面設計是屏幕產(chǎn)品的重要組成部分。界

19、面設計是一個復雜的有不同學科參與的工程，認知心理學、設計學、語言學等在此都扮演著重要的角色。用戶界面設計的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負擔；保持界面的一致性。教學步驟及教學內(nèi)容時間分配作業(yè)布置課后反思授課課題認識界面門界面設計原則和分類教學目標和要求了解和掌握界面設計原則和分類教學重點和難點重點：掌握界面設計的基本原則和分類難點：掌握界面設計的基本原則能熟練運用到設計當中教學方法案例教學教學手段多媒體授課時間第 九 周課時累計6教 學 過 程教學步驟及教學內(nèi)容時間分配本節(jié)課我們來說UI藝術性設計的原則方面的問題。在結構設計的基礎上，參照目標群體的心理模型和任務達成進行視覺

20、設計。包括色彩啊、字體呀、頁面哪等。視覺設計的原則主要有以下這么幾點，同學們一定要注意嘍！1）界面清晰明了，尤其導航要明確。最好允許用戶定制界面，如下圖：簡單的界面設計比如像一些音頻軟件、3D軟件他們的界面參數(shù)比較多，其復雜的窗口結構就更需要邏輯清晰的設計思路，這個時候呢，科學性肯定要遠遠大于藝術性！  ! l% x7 N$ N% E0 r% a2）減少短期記憶的負擔。就是說讓計算機幫助記憶，例如IE進入界面地址等可以讓機器記住。3 e#教學步驟及教學內(nèi)容時間分配3）依賴認知而非記憶。譬如打印圖標的記憶，下拉菜單列表中的選擇等要符合業(yè)界習慣。4）提供視覺線索。界面要有吸引力

21、，如下圖：5）提供默認(default)、撤消(undo)、恢復(redo)等功能。這方面好多同學可能不是很了解，但是你要做好一個真正的UI設計師，那么功能方面你還是要有一定的掌握喔！當然啦，同學也不用怕，只要你用心，其實很簡單的！Just do it!6）提供界面的快捷方式。7）盡量去使用真實事物的類比。如電話、打印機等的圖標設計，尊重用戶以往的使用經(jīng)驗和使用習慣。: r: F1 A7 ' A9 8）完美視覺的清晰度。條理清晰，圖片、文字的布局和隱喻不要讓用戶去猜。如圖9）界面要協(xié)調(diào)一致。如手機界面按鈕擺放，習慣左鍵肯定、右鍵否定或按內(nèi)容擺放。10）同樣功能用同樣的圖形表示。11）色

22、彩與內(nèi)容。整體軟件盡量不要超過5個色系（特殊需要例外），近似的顏色表示近似的意思。二、界面的分類界面依據(jù)其在人與界面互動過程中的作用方式，分為操作界面和顯示界面兩大類。通常操作界面起到的是控制作用，用戶通過操作界面發(fā)出信息，操作機器執(zhí)行命令，同時也通過操作界面對機器的反饋信息作出反應動作。操作界面主要包括：觸控屏幕、鼠標、鍵盤、操作手柄、遙控器等。顯示界面主要的職能是信息顯示。用戶通過顯示界面監(jiān)控機器對于指令的執(zhí)行狀況，同時也通過顯示了解機器在執(zhí)行命令后狀況。包括圖、文、聲、光等可釋讀要素。一般情況下，顯示界面和操作界面是共存的。操作界面為人機互動提供了動作平臺，而顯示界面則為人機互動提供了信

23、息平臺，這兩個平臺構成了人機互動的基本環(huán)境。根據(jù)界面的用戶特征，我們又可以將界面分為網(wǎng)頁用戶界面、游戲用戶界面、軟件用戶界面等幾大類。這樣分類的方式體現(xiàn)了“以用戶為中心”的核心理念，而整個界面設計教學步驟及教學內(nèi)容時間分配的過程都是圍繞“用戶”這個中心展開的。作業(yè)布置課后反思授課課題認識界面門設計界面的通用性的分析教學目標和要求進一步認識界面，了解設計界面的通用性并進行分析教學重點和難點重點：設計界面的通用性的分析難點：設計界面的功能、情感、環(huán)境的共通教學方法案例教學教學手段多媒體授課時間第 九 周課時累計8教 學 過 程教學步驟及教學內(nèi)容時間分配導入新課隨著硬件技術的飛速發(fā)展，使計算速度與存

24、儲容量不再成為軟件開發(fā)人員所擔心的問題，用戶關心的主要問題是能否比較容易和舒適地使用軟件。換言之，人們的著眼點在于軟件的易用性和美觀，而易用與美觀主要取決于用戶界面，即UI的優(yōu)劣。本課主要講解UI的基本理論和設計屬性，以期在具體學習UI設計技巧和制作技術之前對UI設計有一個整體的了解。1.1 UI設計基本介紹眾所周知，在當今的硬件與軟件環(huán)境下，一個軟件沒有很好的界面設計就不能算是成功的軟件，因為不管它內(nèi)部有多么精巧的技術，只要用戶不愿意使用它，它的優(yōu)越性就得不到發(fā)揮，它的價值和作用也就無從談起。于是一個不涉及技術而著眼于易用和美觀的用戶界面顯得越來越重要，這就是軟件UI設計。教學步驟及教學內(nèi)容

25、時間分配UI的本意是用戶界面(User Interface)，概括成一句話就是-人和工具之間的界面。這個界面實際上體現(xiàn)在我們生活中的每一個環(huán)節(jié)，例如同學們切菜的時候，刀把手就是這個界面;開車的時候方向盤啊儀表盤也是為個界面;看TV的時候遙控器亦是這個界面;用電腦的時候更不用說。于是乎，我們把UI分成兩大類：硬件界面和軟件界面。我們的教程所涉及的皆為軟件界面，同學們注意了，所以我們也可以稱之為特殊的或者狹義的UI設計。n! 軟件設計可分為兩個部分：編碼設計與UI設計。編碼設計相信同學們都比較熟悉，但UI設計對許多貓來說可能還比較陌生，可能連一些專門從事網(wǎng)站多媒體設計的人員也不是很理解UI的含義。

26、前面說了，UI是英文User和Interface的縮寫。從字面上看有用戶和界面兩個組成部分，但實際上還包括用戶與界面之后的交互關系，所以這樣可分為3個方向，分別是：用戶研究，交互設計和界面設計。后面我為同學們分描述。UI設計教程 1.2 設計界面通用性簡單分析 其實呢，按照界面的不同可以將其劃分為功能性界面、情感性界面以及環(huán)境性界面。將界面分為這3類有助于考察設計界面的諸多因素。當然啦，設計界面的劃分并不是完全絕對的嘍，這三類界面的涵義和內(nèi)家可能也會有交差和重疊，這個同學們應該比較好理解，譬如宗教文化是一種環(huán)境性因素，但它帶給信仰的人更多一層的肯定是情感的因素。嘿嘿！雖然說環(huán)境與情感

27、性不好區(qū)分，但是并不妨礙不同分類之間所存在的實質(zhì)性的差異。下面我?guī)е瑢W們分別來了解這三類界面。$ W; _1 I  E6 y7 7 W同學們不要著急喔！學習是循序漸進的，對UI設計來說，理論很重要喔！/ 功能性界面. o6 V/ M% V  F 功能性界面主要是來實現(xiàn)使用性內(nèi)容，因為呢，任何一件產(chǎn)品或內(nèi)外環(huán)境或平面視覺傳達作品，它們存在的價值和意義首先在于使用性，再由使用性牽涉到多種功能因素的分析及實現(xiàn)功能的技術方法與材料運用。在這一方面，分析思維將作為一種更改思維存在。不難理解吧，同學？嘿嘿！如果作為一種處理方式來設計產(chǎn)品，那么這種產(chǎn)品會使多種特征性

28、（譬如民族性，純粹性）因素中性化，如果去除產(chǎn)品商標，就很難認出是哪國的或哪個公司的產(chǎn)品。當然，這方面也說明了產(chǎn)品中存在著共同性因素，它使全人類做出同樣的反應。人的感覺和判斷能力存在國際性的、客觀性的特征。$ e: Y7 |8 8 Q/ v4 其實呢，功能性的界面是要建立在符號學的基礎上的。同學不知道什么是符號學？國際符號學會對符號學是這樣定義的：“符號是關于信號標志系統(tǒng)（PS:也就是通過某種渠道傳遞信息的系統(tǒng)唄?。┑睦碚?，它研究自然符號系統(tǒng)的人造符號系統(tǒng)的特征?！睆V義地說呢，就是能夠代表其他事物的東西都是符號，如字母、數(shù)字、儀式、意識、動作等，最復雜的一種符號系統(tǒng)可能就是語言嘍。設計功能界面，

29、不可避免地要讓使用者明白功能操作界面的功能性標志一定要很鮮明，這個很重要。5 : : c1 T! c! k; T/ 2 情感性界面8 y& M/ j/ D1 H( z3 _% I* Z5 一個family裝飾要賦予家居溫馨，一副design work要以情動人，and so on.其實呢，任何一件產(chǎn)品或者portiflio只有與人的情產(chǎn)生共鳴才能為我們所接受，像愛屋及烏也體現(xiàn)了人的感情寄托。所以呢，一件好設計作品設計作品是有相當大的魅力在。我們現(xiàn)代icon的設計發(fā)展也一直在朝著這一領域在開拓。符號學日漸被應用到廣告學，宗教學，神話學，民俗學等比較多的領域。譬如國外符號學界把符號學用于認

30、識論的研究，考察認識知覺，認識過程的符號學問題。同時，符號學還用于分析利用人體感官進行的交流，并將music 服裝等都作為符號系統(tǒng)加以分析研究，這都為設計藝術提供了寶貴借鑒價值的情感界面設計方法和手段。j" X# K; H" G!環(huán)境性界面; V, x4 z9 p9 ?+ S- x) b就不說UI，任何的設計都要與環(huán)境這個因素相聯(lián)系。它包括比較多，例如社會、政治和文化，科技，民族等等等等。人處于外界環(huán)境中，是以社會群體而不是以個體為基礎的，所以環(huán)境性因素一般牌非受控與難以預見的變化狀態(tài)中。聯(lián)系到設計的歷史，我們可以利用藝術社會學的觀點去認識各時期的設計潮流。其實呢，從18世

31、紀的時候，西方的一批藝術家們已經(jīng)注意到藝術創(chuàng)造與審美趣味深受地理，氣候，民族以及歷史條件等環(huán)境因素的影響。這不難理解，因為這大抵就是同學們會看到不同國家民族的作品面大相徑庭的原因嘍。記得，法國有外比較著名的老外，嘿嘿，貌似是個學者，他說物質(zhì)文明和精神文明的性質(zhì)面貌都取決于種族，環(huán)境，時代三大因素。也就是這個理兒。無論是工藝美術運動，同學們熟知的包豪思現(xiàn)代主義還是我提起來都抖擻的80年代的反設計，乃至現(xiàn)代的多元化等等都很明顯地反應了環(huán)境因素對咱們設計的影響。! k! $ G# F) 同學們都玩游戲，其實呢，游戲中的界面設計就是最典型的環(huán)境性界面。其實呢，成功的作品都能夠完美地把以上三種界面結合的

32、作品。愛好設計的同學們肯定聽說過著名的盧浮宮擴建工程，貌似是貝聿銘設計的，功能性處理的那是相當?shù)呐?，并沒有屈于形式而損害功能。人們參觀盧浮宮，不是回到古代，而是以新的價值觀去重新審視與欣賞，尤其是它的三角形外教學步驟及教學內(nèi)容時間分配觀符合了人們的心理期望，但是他又把情感性界面處理到極致，嘿嘿，我在這里就不附圖了，同學們可以搜索看看。作業(yè)布置課后反思授課課題人本界面回歸人性的界面設計教學目標和要求理解“認知摩擦”和“可用性”兩個概念教學重點和難點重點：理解“認知摩擦”和“可用性”兩個概念難點：理解“認知摩擦”和“可用性”兩個概念教學方法案例教學教學手段多媒體授課時間第 十 周課時累計10教 學

33、 過 程教學步驟及教學內(nèi)容時間分配導入新課:人類的認知水平在隨著問題的變化而變化過程中所遇到的阻力就是認知摩擦。在軟件硬件不斷升級的過程中，認知摩擦時刻存在。例如:我們在面對一個升級到新版本的軟件時，通常需要花上一段時間才能熟悉掌握它，而升級所帶來的新功能又很少能用到，或者是通過一段時間的學習后才能正確使用，這其實就是“認知摩擦”在作祟。 當然，少量的認知摩擦對于提升我們的認知能力是有幫助的，因此我們提倡回歸人性的界面設計，就是通過各種方法讓這種認知摩擦控制在一定范圍之內(nèi)。但在實際操作中要做到這一點并不容易。比如，在設計微波爐的界面時，是不是讓按鈕和把手都更加適合人的眼睛和手指，讓信息更容易被

34、讀取就解決了認知摩擦的問題呢？教學步驟及教學內(nèi)容時間分配為用戶而設計-可用性可用性的標準對任何的人實施中心的活動都有效，界面設計尤其如此。 在一組可用性不錯的手機圖標設計中，通過圖形我們就能明白其意義而不需要翻閱說明書。可用性是評估用戶界面是否容易使用的程度屬性。一般來說，可用性由5個屬性組成。（1） 可學習性，也就是初次接觸界面時，用戶在沒有任何經(jīng)驗的情況下使用界面完成基本任務的難易程度。（2） 效率，當用戶熟悉了這個界面后，其完成任務的速度。（3） 可記憶性，在一段時間沒有使用之后再次使用界面，用戶重新熟練操作的難易程度。（4） 出錯，用戶在使用界面是除了多少錯誤，這些錯誤的嚴重程度，以及

35、是否能夠方便迅速的覺察錯誤并恢復。（5） 滿意度，用戶使用這個界面的滿意程度。實現(xiàn)可用性的途徑有如下5個方面。（1） 為用戶的實際工作而設計。（2） 學會與客戶溝通。（3） 避免為創(chuàng)新而創(chuàng)新。（4） 努力建立有效的交互。（5） 用實際工作來測試界面。 操作界面的類型與特征 操作界面可以分為連續(xù)性和不連續(xù)性操作界面兩大類，其中不連續(xù)性操作界面可分為三種情況：一是開關，如電燈開關等；二是不連續(xù)性調(diào)整控制。如電視機的頻道按鈕；三是符號輸入按鈕，如電腦鍵盤。 連續(xù)性操作界面也可以分為兩種情況:一是定量調(diào)節(jié)控制，其作用是調(diào)節(jié)機器到莫一種狀態(tài)，如收音機上的電臺波段調(diào)諧鈕；二是連續(xù)調(diào)節(jié)控制，其作用是不斷調(diào)節(jié)

36、機器狀態(tài)，使其沿理想方向運行，如方向盤。教學步驟及教學內(nèi)容時間分配作業(yè)布置課后反思授課課題人本界面教學目標和要求通過本章學習使學生了解UI設計案例展示欣賞與分析教學重點和難點教學重點：掌握UI設計案例展示欣賞與分析。教學難點：掌握UI設計案例展示欣賞與分析。教學方法案例教學教學手段多媒體授課時間第 十 周課時累計12教 學 過 程教學步驟及教學內(nèi)容時間分配導入新課第一節(jié) 圖標圖標是具有明確指代含義的計算機圖形。其中桌面圖標是軟件標識，界面中的圖標是功能標識。教學步驟及教學內(nèi)容時間分配圖標分為廣義和狹義兩種：廣義具有指代意義的圖形符號，具有高度濃縮并快捷傳達信息、便于記憶的特性。應用范圍很廣，軟

37、硬件網(wǎng)頁社交場所公共場合無所不在，例如：男女廁所標志和各種交通標志等。狹義應用于計算機軟件方面，包括：程序標識、數(shù)據(jù)標識、命令選擇、模式信號或切換開關、狀態(tài)指示等。一個圖標是一個小的圖片或?qū)ο?，代表一個文件，程序，網(wǎng)頁，或命令。圖標有助于用戶快速執(zhí)行命令和打開程序文件。單擊或雙擊圖標以執(zhí)行一個命令。圖標也用于在瀏覽器中快速展現(xiàn)內(nèi)容。所有使用相同擴展名的文件具有相同的圖標。圖標有一套標準的大小和屬性格式，且通常是小尺寸的。每個圖標都含有多張相同顯示內(nèi)容的圖片，每一張圖片具有不同的尺寸和發(fā)色數(shù)。一個圖標就是一套相似的圖片，每一張圖片有不同的格式。從這一點上說圖標是三維的。圖標還有另一個特性：它含有

38、透明區(qū)域，在透明區(qū)域內(nèi)可以透出圖標下的桌面背景。在結構上圖標其實和麥當勞的巨無霸漢堡差不多。一個圖標實際上是多張不同格式的圖片的集合體，并且還包含了一定的透明區(qū)域。因為計算機操作系統(tǒng)和顯示設備的多樣性，導致了圖標的大小需要有多種格式。象素分辨 操作系統(tǒng)在顯示一個圖標時，會按照一定的標準選擇圖標中最適合當前顯示環(huán)境和狀態(tài)的圖像。如果你用的是Windows98操作系統(tǒng)，顯示環(huán)境是 800x600分辨率，32位色深，你在桌面上看到的每個圖標的圖像格式就是256色32x32象素大小。如果在相同的顯示環(huán)境下，Windows XP操作系統(tǒng)中，這些圖標的圖像格式就是：真彩色（32位色深）、32x32象素大小

39、。下面就是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 - 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

40、 24 - 16 * 16 x 16 - 16* 這種格式在XP圖標中并不是必須的。注意：Windows98/2000對24 x 24格式的圖標不兼容。你可以在相關應用軟件中打開含有這種圖像格式的圖標，但操作系統(tǒng)卻認為是無效的。你必須確保你所設計的圖標中至少含有以上所列的圖像格式來獲得良好的顯示效果。如果操作系統(tǒng)在圖標中找不到特定的圖像格式，它總是采用最接近的圖像格式來顯示，比如把大小為48 x 48的圖標縮小為24 x 24象素大小。當然，效果就差些了。不同的操作系統(tǒng)版本W(wǎng)indows 95， Windows 98， Windows ME， Windows 2000· 建議： 48

41、x48 （ 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色，

42、 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色）&

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

44、音輸入法是基于搜索引擎技術的、特別適合網(wǎng)民使用的、新一代的輸入法產(chǎn)品，用戶可以通過互聯(lián)網(wǎng)備份自己的個性化詞庫和配置信息。搜狗拼音輸入法為中國國內(nèi)現(xiàn)今主流漢字拼音輸入法之一，奉行永久免費的原則。QQ拼音輸入法：QQ拼音輸入法是騰訊公司開發(fā)的一種方便人們使用和觀看的輸入法，可下載各種各樣的皮膚來改變自身的皮膚。同學們主要在以下幾個方面來考慮：1 造型；2 顏色；3 藝術性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標的文件，我們接下來可以分享一下。第三節(jié) 手機界面設計同學們主要在以下幾個方面來考慮：1 造型；2 顏色；3 藝術性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標的文件，我們接下來可以分享一下。

45、第四節(jié) 播放器同學們主要在以下幾個方面來考慮：1 造型；2 顏色；3 藝術性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標的文件，我們接下來可以分享一下。第五節(jié) 系統(tǒng)界面教學步驟及教學內(nèi)容時間分配同學們主要在以下幾個方面來考慮：1 造型；2 顏色；3 藝術性；4 創(chuàng)造性；5 統(tǒng)一性；我收集了一些圖標的文件，我們接下來可以分享一下。作業(yè)布置課后反思授課課題界面的整體設計教學目標和要求界面設計的重要性,設計原則教學重點和難點重點：界面設計的重要性,設計原則難點：掌握界面設計的重要性,設計原則進行界面設計教學方法案例教學教學手段多媒體授課時間第 九 周課時累計14教 學 過 程教學步驟及教學內(nèi)容時間分配

46、提問導入:用戶界面設計為什么這么重要呢?下面帶著大家一起來了解界面設計.用戶界面設計從字面上來說 ,是面向用戶的 。用戶界面的發(fā)展經(jīng)歷了從低級到高級的過程，用戶界面在軟件系統(tǒng)中的價值比重也越來越高，用戶假面設計不僅要美觀，而且要實用。用戶界面是人機之間交流、溝通的層面，用戶界面設計是以人為中心，使產(chǎn)品達到逾越使用的設計。教學步驟及教學內(nèi)容時間分配界面設計的重要性界面是用戶與網(wǎng)頁交互的窗口，用戶通過界面想計算機輸入信息進行控制、查詢和操作；網(wǎng)頁則通過界面想用戶提供信息，以供閱讀、分析、判斷。所以界面設計在網(wǎng)頁中占有重要的位置。界面設計的原則界面設計是瀏覽者與網(wǎng)絡交流的平臺，由于它在網(wǎng)絡中具有特殊

47、位置，所以其設計要遵循一定的原則。首先是簡易性，簡易是為了方便用戶使用，了解網(wǎng)頁內(nèi)容。其次是清楚安全，指在用戶出現(xiàn)危機的選擇時有信息介入系統(tǒng)的提示。最后是靈活人性化，指讓用戶輕松快捷的使用。界面設計的要求界面設計師瀏覽者瀏覽網(wǎng)頁的第一印象，所以它的設計風格要與整體頁面相一致，顏色的搭配要符合人們的視覺習慣，并與頁面的整體色調(diào)想?yún)f(xié)調(diào)。其中，字體的選擇不要過于花哨，選用平常字體即可。一什么是界面設計界面設計是為了滿足專業(yè)化、標準化需求而對軟件的使用界面進行美化、優(yōu)化、規(guī)范化的設計分支，具體包括軟件啟動封面設計、軟件框架設計、按鈕設計、面板設計、菜單設計、標簽設計、圖標設計、滾動條及狀態(tài)欄設計、安裝

48、過程設計、包裝及商品化。如下圖：直觀的按鈕設計 二圖形界面的分類隨著科技的發(fā)展，人們對信息的需求量也在不斷的增多，所以圖形界面也越來越多樣化和細分化，不同的圖形界面在設計上也會有不同的特點。圖形界面可以分為以下幾類：l 軟件用戶界面：軟件只是一種工具，然而人們與軟件的交互性操作都是通過軟件界面來進行的，所以軟件界面的設計不僅要美觀而且要易用。l 網(wǎng)絡界面：網(wǎng)絡的發(fā)展帶來的網(wǎng)站界面設計的繁榮，隨著網(wǎng)絡的發(fā)展，網(wǎng)站設計已經(jīng)從最初的純文字內(nèi)容發(fā)展到現(xiàn)在的包含圖像、視頻、動畫等多種媒體的形式。網(wǎng)站界面必須具有獨立性和創(chuàng)意性。在網(wǎng)站界面設計中，最重要的是使用戶方便地查找信息，并能夠感受到方便操作帶來的樂

49、趣。如下圖的咖啡網(wǎng)站頁面l 手機界面：隨著科技的發(fā)展，手機的功能也越來越強大，手機界面的設計要人性化，不僅要方便使用，還要美觀。如下圖l 游戲界面：游戲軟件界面的制作通常比較華麗、主題鮮明，三維效果十分普遍，所以游戲中的人物或物品為主體，視覺效果占十分重要的地位。 l 播放器界面：在激烈的市場競爭中，軟件產(chǎn)品僅有強大的功能是遠遠不夠的，將易用性與美觀相結合，才能適應用戶的需要，從而創(chuàng)造出更高的價值。教學步驟及教學內(nèi)容時間分配作業(yè)布置課后反思授課課題界面的整體設計- UI設計流程教學目標和要求通過本章學習使學生了解UI設計原則、流程。教學重點和難點教學重點：掌握UI設計原則、流程。教學難點：掌握

50、UI設計流程。教學方法案例教學教學手段多媒體授課時間第 十 周課時累計16教 學 過 程教學步驟及教學內(nèi)容時間分配導入新課: 第一節(jié) UI設計原則1.簡易性界面的簡潔  UI設計圖片是要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯誤選擇的可能性。教學步驟及教學內(nèi)容時間分配2.用戶語言界面中要使用能反應用戶本身的語言，而不是游戲設計者的語言。3.記憶負擔最小化人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶極不穩(wěn)定、有限，24小時內(nèi)存在25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。4.一致性是每一個優(yōu)秀界面都具備的特點。界面的結構必須清晰且

51、一致，風格必須與游戲內(nèi)容相一致。5.清楚在視覺效果上便于理解和使用。6.用戶的熟悉程度用戶可通過已掌握的知識來使用界面，但不應超出一般常識。7.從用戶的觀點考慮想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。8.排列一個有序的界面能讓用戶輕松的使用。9.安全性用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。10.靈活性簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標、鍵盤或手柄)。11.人性化高效率和用戶滿意度是人性化的體現(xiàn)。應具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習慣定制界面，并能保存設置。第二節(jié) UI設計的流程確認目標用戶在洛可可的UI設計過程中，需求設計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標用戶的不同引起的交互設計重點的不同。例如：對于科學用戶和對于電腦入門用戶的設計重點就不同。采集目標用戶的習慣交互方式不同類型的目標用戶有不同的交互習慣。這種習慣的交互方式往往來源于其原有的針對現(xiàn)實的交互流程、已有軟件工具的交互流程。當然還要在此基礎上通過調(diào)研分析找到用