信息化UI設(shè)計教案新部編本一學(xué)期

1、精品教學(xué)教案設(shè)計| Excellent teaching plan教師學(xué)科教案20 -20學(xué)年度第一學(xué)期任教學(xué)科:任教年級:任教老師:xx市實驗學(xué)校精品教學(xué)教案設(shè)計| Excellent teaching plan大綱第一章 信息化 UI 設(shè)計基礎(chǔ)§ 1.1 理解信息化UI 設(shè)計§ 1.2 數(shù)字化圖像的基礎(chǔ)案例 1：繪制簡潔的開機(jī)按鈕案例 2：制作網(wǎng)站主頁按鈕案例 3：制作逼真皮革按鈕第二章 圖標(biāo)設(shè)計§ 2.1 了解圖標(biāo)設(shè)計§ 2.2 圖標(biāo)設(shè)計的繪制原則案例 1：制作 IE 瀏覽器圖標(biāo)案例 2：繪制真實鏡頭圖標(biāo)案例3:繪制手機(jī)信息APP圖標(biāo)第三章 網(wǎng)頁設(shè)

2、計§ 3.1 了解網(wǎng)頁 UI§ 3.2 網(wǎng)頁界面構(gòu)成元素§ 3.3 網(wǎng)頁設(shè)計的原則§ 3.4 網(wǎng)頁界面布局形式案例 1：繪制網(wǎng)頁中的主體案例 2：繪制網(wǎng)頁戰(zhàn)中的廣告條案例 3：繪制網(wǎng)頁的背景和導(dǎo)航欄第四章 軟件界面設(shè)計§ 4.1 軟件界面設(shè)計發(fā)展歷程§ 4.2 軟件界面設(shè)計簡介§ 4.3 軟件界面設(shè)計的原則§ 4.4 軟件界面設(shè)計中的屏幕設(shè)計案例 1：繪制軟件中的登錄界面案例 2：繪制輸入法皮膚案例 3：繪制信息查詢界面案例 4：繪制簡單的日歷軟件界面第五章 手機(jī)界面設(shè)計§ 5.1 手機(jī)界面設(shè)計的重要性&

3、#167; 5.2 手機(jī)界面設(shè)計的要求§ 5.3 手機(jī)界面設(shè)計的特征育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰§ 5.4 手機(jī)界面設(shè)計的基本常識案例1：繪制手機(jī)界面中的游戲圖標(biāo)案例2:繪制IOS應(yīng)用商店圖標(biāo)案例3:繪制IOS操作系統(tǒng)手機(jī)界面案例4：繪制Android 撥號界面第六章 播放器界面設(shè)計§ 6.1 注意人性化設(shè)計§ 6.2 播放器界面設(shè)計的原則§ 6.3 情感化因素不可忽視案例1：繪制黑色時尚播放器案例2：繪制簡約時尚播放器案例3：繪制音樂播放器界面第七章 大作業(yè)精品教學(xué)教案設(shè)計| Excellent teaching plan教師課時授課計

4、劃（1 ）授課班級授課日期見日志見日志見日志學(xué)生出勤情況見日志見日志見日志課 題第一章信息化UI設(shè)計基礎(chǔ) § 1.1理解信息化UI設(shè)計 §1.2數(shù)字化圖像的基礎(chǔ)本次授課目的與要求知識目標(biāo)1、什么是UI設(shè)計；2、UI設(shè)計的分類。能力培 養(yǎng)目標(biāo)1、能夠熟記UI設(shè)計的定義；2、能夠掌握UI設(shè)計的分類。課堂類型實踐課教具多媒體教學(xué)設(shè)備考核對象全體學(xué)生復(fù)習(xí)舊課要點新課重點1、什么是UI設(shè)計；2、UI設(shè)計的分類。新課難點及解決措施1、能夠熟記UI設(shè)計的定義；2、能夠掌握UI設(shè)計的分類。多給學(xué)生做演示，講解制作方法。課后總結(jié)及改進(jìn)措施學(xué)生能夠浮見記UI設(shè)計的定義，并掌握 UI設(shè)計的分類。

5、備課時間2017.9.3主任審閱年月日涉及標(biāo)準(zhǔn)參考工具書授課內(nèi)容時間 分配育人猶如春風(fēng)化雨，授業(yè)不惜蠟炬成灰10分一、組織教學(xué)1 、點名簽到35分2 、復(fù)習(xí)舊課二、教學(xué)內(nèi)容一、UI設(shè)計UI設(shè)計即為用戶界面設(shè)計，全稱 UI=User Interface 。 UI設(shè) 計是為了滿足專業(yè)化、標(biāo)準(zhǔn)化需求而對軟件界面進(jìn)行美化、優(yōu)化 和規(guī)范化的設(shè)計分支。二、UI設(shè)計分類隨著信息技術(shù)的高速發(fā)展，人們對信息的需求量不斷增加， 圖形界面的設(shè)計也越來越多樣化。UI設(shè)計主要可以分為手機(jī)界面 設(shè)計、網(wǎng)站設(shè)計、軟件用戶界面設(shè)計和游戲界面設(shè)計等，不同類 型的界面設(shè)計風(fēng)格和特點各不相同。1 .手機(jī)界面設(shè)計現(xiàn)如今，手機(jī)儼然已經(jīng)

6、成為普通大眾的生活必需品，而手機(jī) 的功能也越來越完善，很多高端手機(jī)的性能甚至與電腦不分高下。 手機(jī)界面設(shè)計最大的要求就是人性化，不僅要便于用戶操作，還 要美觀大方。2 .網(wǎng)站設(shè)計近年來，隨著電子商務(wù)的高速發(fā)展，國內(nèi)網(wǎng)站設(shè)計行業(yè)也正 在快速崛起。從最初的純文本網(wǎng)頁到版式古板，配色拙劣，再到 現(xiàn)如今的配色新奇，版式多元化，網(wǎng)站設(shè)計得到了長足發(fā)展。3.軟件用戶界面用戶主要通過軟件與各種機(jī)器設(shè)備進(jìn)行交流，更確切的說， 是軟件界面。為了方便用戶使用，軟件界面的設(shè)計應(yīng)該簡潔美觀、 易于操作。4 .播放器界面如今，市場上的各種音樂播放器軟件層出不窮，體驗者們不 再局限于追求軟件的強(qiáng)大功能，更對軟件界面風(fēng)格提

7、出了新的要 求。5 .游戲界面相較于其它軟件界面來說，游戲界面通常都比較華麗、主題 鮮明三維效果應(yīng)用非常普遍，具有較強(qiáng)的視覺震撼力。三、學(xué)生自由練習(xí)與教師指導(dǎo)35分10分四、小結(jié)教師課時授課計劃（2）授課班級授課日期見日志見日志見日志學(xué)生出勤情況見日志見日志見日志課 題A章 案例1 案例2 案例3信息化UI設(shè)計基礎(chǔ) 繪制簡潔的開機(jī)按鈕 制作網(wǎng)站主頁按鈕 制作逼真皮革按鈕本次授課目的與要求知識目標(biāo)1、常見的圖像的格式、模式和類型；2、Photoshop基礎(chǔ)操作；能力培 養(yǎng)目標(biāo)1、能夠了解常見的圖像的格式、模式和類型；2、能夠掌握Photoshop基礎(chǔ)操作。課堂類型實踐課教具多媒體教學(xué)設(shè)備考核對象

8、全體學(xué)生復(fù)習(xí)舊課要點1、什么是UI設(shè)計；2、UI設(shè)計的分類。新課重點1、常見的圖像的格式、模式和類型；2、Photoshop基礎(chǔ)操作；新課難點及解決措施1、能夠了解常見的圖像的格式、模式和類型；2、能夠掌握Photoshop基礎(chǔ)操作。多給學(xué)生做演示，講解制作方法。課后總結(jié)及改進(jìn)措施學(xué)生能夠了解常見的圖像的格式、模式和類型，并掌握Photoshop基礎(chǔ)操作。備課時間2017.9.10主任審閱年月日涉及標(biāo)準(zhǔn)參考工具書授課內(nèi)容時間 分配10分35分一、組織教學(xué)1 、點名簽到2 、復(fù)習(xí)舊課二、教學(xué)內(nèi)容一、數(shù)字化圖像的基礎(chǔ)日常生活中，人們總會和各種各樣的圖片打交道，這些圖片 來自不同的渠道，它們的顏色、

9、格式、體積和用途都不盡相同。 常見圖像格式：JPEG格式是目前市面上最常使用的存儲格式，它可以提供優(yōu) 質(zhì)照片質(zhì)量的壓縮格式，是目前所有圖像格式中壓縮率最高的，PNG&式主要應(yīng)用于網(wǎng)絡(luò)圖像，可以保存 24位真彩圖像，并 且支持透明背景和消除鋸齒功能，GIF格式使用的壓縮方式會將圖片壓縮的很小，非常有利于在 互聯(lián)網(wǎng)上傳輸，此外它還支持以動畫方式存儲圖像。BMP格式最早應(yīng)用于微軟公司的 Windows操作系統(tǒng)，是一種 Windows標(biāo)準(zhǔn)的位圖圖形文件格式。TIFF格式便于在應(yīng)用程序和計算機(jī)平臺之間進(jìn)行數(shù)據(jù)交換， 是一種靈活的圖像格式。常見圖像模式：在Photoshop中，“圖像模式”和“顏色

10、模式”是一個概念， Photoshop CC中共包括9種顏色模式，分別為RGB莫式、CMYKI 式、Lab模式、HSB奠式、位圖模式、灰度模式、多通道模式、雙色調(diào)模式和索引顏色模式。常見圖像類型：位圖圖像也稱為點陣圖，它最基本的單位是像素，像素呈方 塊狀。矢量圖像是由稱作矢量的數(shù)學(xué)對象定義的直線和曲線構(gòu)成 的，它最基本的單位是錨點和路徑，平常所見到和使用的矢量圖 形作品是由矢量軟件創(chuàng)建的。二、Photoshop基礎(chǔ)操作Photoshop是目前市面上使用最為普遍的圖像處理與合成軟 件，最新的版本為Photoshop CC本書中的全部操作實例都將使用 Photoshop CC 完成。在使用Phot

11、oshop CC進(jìn)行設(shè)計操作之前，首先需要將該軟件 安裝到計算機(jī)中，然后雙擊桌面上的快捷方式圖標(biāo)即可成功啟動優(yōu)化酉己置Photoshop CC對于其他類型的專業(yè)軟件來說，Photoshop CC算得上是一個 消耗系統(tǒng)資源的大戶。為了使 Photoshop CC運行能夠更加流暢， 各個功能都能正常使用，我們需要在操作前進(jìn)行簡單的設(shè)置，使 其工作起來更得心應(yīng)手。執(zhí)行"編輯 首選項 性能”命令，彈出“首選項”對話框， 提高“歷史記錄狀態(tài)”的數(shù)值，并將剩余容量大、不常使用的本 地磁盤指定為暫存盤。文件的基本操作：Photoshop CC文件的基本操作主要包括新建文件、打開文件和存儲文件。圖像

12、的變換：使用Photoshop CC進(jìn)行設(shè)計制作時，經(jīng)常需要對各種對象進(jìn)行變換，例如移動位置，縮放、旋轉(zhuǎn)和翻轉(zhuǎn)圖像等。這些操作大 部分可以通過執(zhí)行“編輯 變換”命令來完成。設(shè)置前景色和背景色：設(shè)置前景色和背景色也是使用極其頻繁的操作。在PhotoshopCC中，用戶可以通過3種方式設(shè)置前景色和背景色，分別為使用 “拾色器”對話框，使用“顏色”面板和使用“色板”面板。按鈕的應(yīng)用格式：使用Photoshop CC制作簡潔的開機(jī)按鈕后，還要將其存儲為 We用f用格式的文件，才能應(yīng)用于網(wǎng)頁。常用的We斷用的格式有 JPG PNGf口 GIF。實現(xiàn)不同的漸變效果：漸變色可以實現(xiàn)多個顏色之間平滑過渡的填充

13、效果，在UI設(shè)計中使用極為頻繁。在Photoshop CC中，用戶可以通過多種方法 創(chuàng)建漸變色。三、學(xué)生自由練習(xí)與教師指導(dǎo)四、小結(jié)35分10分教師課時授課計劃（3）授課班級授課日期見日志見日志見日志學(xué)生出勤情況見日志見日志見日志課 題第二章圖標(biāo)設(shè)計§ 2.1 了解圖標(biāo)設(shè)計§ 2.2 標(biāo)設(shè)計的繪制原則本次授課目的與要求知識目標(biāo)1、什么是圖標(biāo)設(shè)計；2、圖標(biāo)設(shè)計的繪制原則；能力培 養(yǎng)目標(biāo)1、能夠了解什么是圖標(biāo)設(shè)計；2、能夠熟記圖標(biāo)設(shè)計的繪制原則。課堂類型實踐課教具多媒體教學(xué)設(shè)備考核對象全體學(xué)生復(fù)習(xí)舊課要點1、常見的圖像的格式、模式和類型；2、Photoshop基礎(chǔ)操作；新課重點1

14、、什么是圖標(biāo)設(shè)計；2、圖標(biāo)設(shè)計的繪制原則；新課難點及解決措施1、能夠了解什么是圖標(biāo)設(shè)計；2、能夠熟記圖標(biāo)設(shè)計的繪制原則。多給學(xué)生做演示，講解制作方法。課后總結(jié)及改進(jìn)措施學(xué)生能夠了解什么是圖標(biāo)設(shè)計，并熟記圖標(biāo)設(shè)計的繪制原則。備課時間2017.9.17主任審閱年月日涉及標(biāo)準(zhǔn)參考工具書時間授課內(nèi)容分配10分35分一、組織教學(xué)1 、點名簽到2 、復(fù)習(xí)舊課二、教學(xué)內(nèi)容圖標(biāo)是具有指代性的計算機(jī)圖形，具有高度濃縮并快速傳達(dá) 信息和便于記憶的特點。圖標(biāo)的應(yīng)用范圍非常廣泛，從各種軟硬 件到現(xiàn)實生活到處都可以看到各種圖標(biāo)的影子，可以說我們的生 活離不開圖標(biāo)。什么是圖標(biāo)：圖標(biāo)的概念分廣義和狹義兩種。從廣義上來說，圖

15、標(biāo)是指具 有指代意義的圖形符號，具有快速傳達(dá)信息和便于記憶的特性。 它的應(yīng)用范圍很廣，軟硬件網(wǎng)頁社交場所公共場合無所不在，例 如各種交通標(biāo)志和各種軟件圖標(biāo)等。圖標(biāo)設(shè)計的作用:一個圖標(biāo)是一個小的圖片或?qū)ο螅硪粋€文件、程序或命令。圖標(biāo)可以幫助用戶快速執(zhí)行各種命令或打開應(yīng)用程序。止匕外， 圖標(biāo)也用于在瀏覽器中快速展現(xiàn)內(nèi)容。圖標(biāo)設(shè)計的意義：作為UI界面設(shè)計的關(guān)鍵部分，圖標(biāo)在 UI交互設(shè)計中無處不 在。一套成功的圖標(biāo)設(shè)計不僅需要質(zhì)感精美，引人眼球，更重要的是具有良好的可用性。一般來講，具有強(qiáng)烈質(zhì)感的圖標(biāo)可以為 網(wǎng)頁增添亮點，給瀏覽者留下深刻的印象。二、圖標(biāo)設(shè)計的繪制原則相較于文字來說，圖標(biāo)有著很明顯

16、的優(yōu)勢。比文字更直觀， 也更漂亮。在制作圖標(biāo)時，我們也應(yīng)該相應(yīng)的強(qiáng)化圖標(biāo)的優(yōu)勢， 降低劣勢。未來軟件界面的設(shè)計方向是簡潔、實用、高效?？勺R別性原則：可識別性原則是圖標(biāo)設(shè)計的首要原則。可識 別性就是指設(shè)計的圖標(biāo)應(yīng)該能夠準(zhǔn)確表達(dá)相應(yīng)的操作，讓瀏覽者 一看到就能明白它是用來做什么的。與環(huán)境協(xié)調(diào)的原則：圖標(biāo)制作出來以后最終被應(yīng)用到圖形界 面中才能體現(xiàn)出價值，獨立存在的圖標(biāo)是沒有意義的。差異性原則：差異性是指圖標(biāo)之間有明顯的差別，能夠讓人 一眼區(qū)分出來不同的圖標(biāo)，這樣才能被瀏覽者所關(guān)注和記憶，并 對界面內(nèi)容留有印象。這是圖標(biāo)設(shè)計的重要原則之一，同時也是 最容易被設(shè)計者忽略的一條原則。視覺效果的原則：視覺

17、效果是指圖標(biāo)設(shè)計應(yīng)該刻畫質(zhì)感和細(xì) 節(jié)，使其更加美觀，滿足使用者的視覺要求。創(chuàng)造性原則：一般在制作圖標(biāo)時都會創(chuàng)建較大尺寸的文檔， 或者使用矢量形狀創(chuàng)建圖標(biāo)，制作完成后也會將其保存為不同的 尺寸，以滿足不同界面的使用。三、學(xué)生自由練習(xí)與教師指導(dǎo)35分四、小結(jié)10分教師課時授課計劃（4）授課班級授課日期見日志見日志見日志學(xué)生出勤情況見日志見日志見日志課 題第F 案例1 案例2 案例3圖標(biāo)設(shè)計制作IE瀏覽器圖標(biāo)繪制真實鏡頭圖標(biāo)繪制手機(jī)信息APP圖標(biāo)本次授課目的與要求知識目標(biāo)1、Photoshop圖層的基本操作；2、案例的制作；能力培 養(yǎng)目標(biāo)1、能夠掌握Photoshop圖層的基本操作；2、能夠完成本章

18、案例。課堂類型實踐課教具多媒體教學(xué)設(shè)備考核對象全體學(xué)生復(fù)習(xí)舊課要點1、什么是圖標(biāo)設(shè)計；2、圖標(biāo)設(shè)計的繪制原則；新課重點1、Photoshop圖層的基本操作；2、案例的制作；新課難點及解決措施1、能夠掌握Photoshop圖層的基本操作；2、能夠完成本章案例。多給學(xué)生做演示，講解制作方法。課后總結(jié)及改進(jìn)措施學(xué)生能夠掌握Photoshop圖層的基本操作，并完成本章案例。備課時間2017.9.24主任審閱年月日涉及標(biāo)準(zhǔn)參考工具書授課內(nèi)容時間 分配10分35分一、組織教學(xué)1 、點名簽到2 、復(fù)習(xí)舊課二、教學(xué)內(nèi)容Photoshop圖層的基本操作“圖層”在Photoshop CC中是一個至關(guān)重要的概念，所

19、有的 操作和編輯都與之有密切的關(guān)系。那什么是“圖層”呢？簡言之， “圖層”就如同一些堆疊在一起的透明紙張，每一張都存儲著不 同的圖像。這些圖像以一定的順序排列在一張，從而構(gòu)成一副完 整的圖像。0oloruseprinting your draams新建圖層Photoshop CC中提供了很多種創(chuàng)建新圖層的方法，最常用的 兩種分別為是直接在“圖層”面板中創(chuàng)建和通過菜單命令創(chuàng)建。 在“圖層”面板中創(chuàng)建新圖層 使用“新建”命令新建圖層 選擇圖層在Photoshop CC中對文件進(jìn)行操作時，必須首先選中相應(yīng)的 圖層，才能保證當(dāng)前操作的正確應(yīng)用。選擇圖層的操作通常也在 “圖層”面板中進(jìn)行。1 .可以選擇

20、單個圖層：2 .可以選擇多個連續(xù)的圖層3 .可以擇多個不連續(xù)的圖層復(fù)制、移動圖層復(fù)制的方法有很多種，同一文檔之間的復(fù)制、不同文檔的復(fù) 制、通過命令復(fù)制和復(fù)制局部圖形。在同一文檔之間復(fù)制圖層若要在同一文檔中復(fù)制圖層，只需將相應(yīng)的一個或多個圖層 直接拖曳至“圖層”面板下方的“創(chuàng)建新圖層”圖標(biāo)上即可。在不同文檔之間復(fù)制圖層若要在不同文檔之間復(fù)制圖層，選中需要復(fù)制的圖層，執(zhí)行 “圖層 復(fù)制圖層”命令，或單擊“圖層”面板右上角的擴(kuò)展圖標(biāo), 在彈出擴(kuò)展菜單中選擇“復(fù)制圖層”命令，彈出“復(fù)制圖層”對 話框，定需要復(fù)制到的文檔，然后單擊“確定”圖標(biāo)即可。使用“通過拷貝的圖層”命令復(fù)制圖層除了將圖層拖曳到“創(chuàng)建

21、新圖層"圖標(biāo)復(fù)制圖層外，用戶也 可以執(zhí)行“圖層 新建,通過拷貝的圖層”命令，或按快捷鍵【Ctrl+J】快速復(fù)制，如果沒有創(chuàng)建選區(qū)，執(zhí)行該命令可以快速復(fù)制當(dāng)前圖層。復(fù)制局部圖形復(fù)制局部圖像與復(fù)制整個圖層的方式類似。使用“框選工具” 或者“魔棒工具”將要復(fù)制的圖形創(chuàng)建選區(qū)，執(zhí)行“圖層 新建圖 層通過拷貝的圖層”命令，或直接按快捷鍵【 Ctrl+J】，即可將 選區(qū)內(nèi)的圖像復(fù)制到新的圖層中。鼠標(biāo)直接拖動若要調(diào)整圖層順序，先選中相應(yīng)的圖層，然后將其拖曳到新 的位置即可?！芭帕小泵钣脩粢部梢詫Ξ?dāng)前的圖層執(zhí)行“圖層 才非列”命令，根據(jù)需求 在子菜單中分別選擇置為頂層、前移一層、后移一層、置為底層

22、 或反向選項調(diào)整圖層順序。重命名圖層、刪除圖層重命名圖層：若要對圖層名稱進(jìn)行重命名，雙擊相應(yīng)圖層的 名稱部分，激活編輯模式，直接輸入新的名稱，然后按【 Enter 鍵確認(rèn)命名。刪除圖層：先在“圖層”面板中選中相應(yīng)的圖層，單擊面板下方的“刪除圖層”圖標(biāo)，或者直接用鼠標(biāo)拖曳圖層至該圖標(biāo)上 刪除。添加圖層樣式：若要為圖層應(yīng)用“圖層樣式”，先選中相應(yīng)的圖層, 單擊面板下方的“添加圖層樣式”圖標(biāo)，在彈出的菜單中選擇需 要的選項，然后在彈出的“圖層樣式”對話框中設(shè)置參數(shù)值即可。畫筆工具在Photoshop CC中，“畫筆工具”的應(yīng)用比較廣泛，使用它 可以繪制出比較柔和的線條，其效果如同用毛筆畫出的線條。該

23、 工具可以設(shè)置畫筆的筆尖形狀、筆刷尺寸、不透明度、流量和噴 槍等屬性。如果結(jié)合“畫筆”面板中的各項功能，還能繪制出更 多變的筆觸效果。工具預(yù)設(shè).切操畫筆面板.模歪不透明度. 流軌經(jīng)面魄壓力控制大小V*3 K Z ' A - B z*: 福明s：花h = 嫁cr 厘“ 由笨他也給畫板壓力控制不透明喚檢模式按班使用“畫筆工具”時，在英文狀態(tài)下，按鍵可減小畫筆 的直徑，按【】鍵可增加畫筆的直徑，對于實邊圓、柔邊圓和書 法畫筆，按【Shift+鍵可減小畫筆的硬度，按【Shift+鍵 則增加畫筆的硬度。按鍵盤上的數(shù)字鍵可以跳調(diào)整工具的不透明度。按【1】時， 不透明度為10%按【5】時，不透明度為

24、50%按【75時不透 明度為75%按【0】時不透明度為100% 預(yù)設(shè)畫筆工具單擊工具箱中的“畫筆工具”按鈕，在選項欄中單擊“畫筆” 選項右側(cè)的按鈕，可以打開“畫筆預(yù)設(shè)選取器”。可以看到很多不 同形狀的畫筆，單擊任意畫筆即可使用該畫筆形狀。Photoshop CC 提供了多種類型的畫筆，為了方便選取畫筆，用戶可以通過單擊“畫筆預(yù)設(shè)選取器”面板中右上方的菜單按鈕，在彈出的下拉菜 單中改變“畫筆預(yù)設(shè)選取器”的顯示方式，在該菜單中還提供了 其它相應(yīng)的選項供用戶選擇。自定義畫筆當(dāng)用戶自定義特殊畫筆時，只能定義畫筆的形狀，而不能定 義畫筆的顏色。因為使用畫筆繪畫時，顏色都是由前景色的顏色決定的。鋼筆工具P

25、hotoshop CC中的“鋼筆工具”，可用于繪制具有最高精度的 路徑，“鋼筆工具”屬于矢量繪圖工具，具優(yōu)點是可以勾畫出平滑 的曲線，在縮放或者變形之后仍能保持平滑效果。當(dāng)無法使用普 通的形狀工具創(chuàng)建出復(fù)雜的圖形時，就需要用“鋼筆工具”進(jìn)行 創(chuàng)建。*. 崛 * 如*國我_ Sfi里 匕*與。/白g取創(chuàng)建路徑使用“鋼筆工具”可以創(chuàng)建閉合或者不閉合的路徑，單條或 多條路徑。使用“鋼筆工具”在畫布中任意位置單擊插入第一個錨點。 繼續(xù)在其它位置單擊插入第二個錨點，并拖曳控制手柄控制路徑 形狀。使用相同方法插入更多的錨點，并拖曳控制手柄調(diào)整路徑形 狀。若要閉合路徑，單擊第一個錨點，并拖曳控制手柄調(diào)整路徑

26、 形狀。松開鼠標(biāo)，完成該閉合路徑的創(chuàng)建。%.、. x /)'*1 編輯路徑添加錨點工具：使用“添加錨點工具”在路徑上單擊，可在 單擊點添加一個錨點。刪除錨點工具：使用“刪除錨點工具”單擊路徑上的某一個 錨點，可以將其刪除。轉(zhuǎn)換點工具：使用“轉(zhuǎn)換點工具”單擊路徑的平滑點，可以 將其轉(zhuǎn)換為角點；使用“轉(zhuǎn)換點工具”單擊路徑的角點，并拖動 控制手柄調(diào)整路徑形狀，可以將其轉(zhuǎn)換為平滑點。路徑選擇工具：使用“路徑選擇工具”單擊路徑的任意部分, 即可將整條路徑全部選中。例如要復(fù)制路徑，或者單擊調(diào)整復(fù)合 路徑中的單個路徑，就需要首先使用“路徑選擇工具”選中相應(yīng) 的路徑。直接選擇工具：用戶可以使用“直接選

27、擇工具”單擊選擇路 徑上的單擊錨點，或者拖選多個錨點，并且可以調(diào)整每個錨點的 控制手柄。原始路徑形狀 平滑點轉(zhuǎn)角點 角點轉(zhuǎn)平滑路徑的變換操作使用“路徑選擇工具”選擇路徑，執(zhí)行"編輯 變換路徑”命 令，在該命令的子菜單中，包括各種變換路徑命令，執(zhí)行路徑變 換命令時，當(dāng)前路徑上會顯示出定界框、中心點和控制點。形狀工具Photoshop CC的“工具箱”中包含5個形狀工具，它們分別 是矩形工具、圓角矩形工具、橢圓工具、多邊形工具、直線工具 和自定形狀工具。這些工具可以幫助用戶快速創(chuàng)建出許多規(guī)則的、 較為常用的形狀，被大量應(yīng)用于 UI設(shè)計與制作。矩形工具、圓角矩形和橢圓工具顧名思義，矩形工具

28、、圓角矩形工具和橢圓工具就是用來創(chuàng) 建矩形、圓角矩形和橢圓的，用戶只需要在“工具箱”中單擊選 擇相應(yīng)的工具，然后在畫布中拖動即可創(chuàng)建出矩形、圓角矩形或 橢圓。多邊形工具和直線工具“多邊形工具”用于在文檔中創(chuàng)建多邊形和星形，“直線工具” 用于在文檔中創(chuàng)建直線。自定義形狀“自定形狀工具”允許用戶創(chuàng)建一些出比較常用的形狀，例 如各種箭頭、花紋、動物和標(biāo)志等，這些形狀通常無法直接使用規(guī)則的形狀工具創(chuàng)建出來。三、學(xué)生自由練習(xí)與教師指導(dǎo)四、小結(jié)35分10分教師課時授課計劃（5）授課班級授課日期見日志見日志見日志學(xué)生出勤情況見日志見日志見日志課 題第三章網(wǎng)頁設(shè)計 3.1 了解網(wǎng)頁UI 3.2 3.2 網(wǎng)貝界

29、囿構(gòu)成兀素本次授課目的與要求知識目標(biāo)1、什么是網(wǎng)貝 UI;2、網(wǎng)貝界囿構(gòu)成兀素；能力培 養(yǎng)目標(biāo)1、掌握網(wǎng)貝UI概念；2、掌握網(wǎng)頁界面構(gòu)成元素；課堂類型實踐課教具多媒體教學(xué)設(shè)備考核對象全體學(xué)生復(fù)習(xí)舊課要點1、Photoshop圖層的基本操作；2、案例的制作；新課重點1、什么是網(wǎng)頁UI;2、網(wǎng)貝界囿構(gòu)成兀素；新課難點及解決措施1、掌握網(wǎng)貝UI概念；2、掌握網(wǎng)頁界面構(gòu)成兀素；多給學(xué)生展示作品并分析，是學(xué)生從講解中領(lǐng)會制作方法。課后總結(jié)及改進(jìn)措施學(xué)生能夠掌握網(wǎng)頁UI概念，并掌握網(wǎng)頁界面構(gòu)成兀素。備課時間2017.10.8主任審閱年月日涉及標(biāo)準(zhǔn)參考工具書時間授課內(nèi)容分配10分35分一、組織教學(xué)1 、點名

30、簽到2 、復(fù)習(xí)舊課二、教學(xué)內(nèi)容一、網(wǎng)頁UI網(wǎng)頁是一個包含文字、圖像和各種多媒體文件的 Html文檔, 我們根據(jù)網(wǎng)頁的具體內(nèi)容將其劃分為環(huán)境性界面、功能性界面和 情感性界面3種類型。什么是網(wǎng)頁設(shè)計：通俗的說，一張網(wǎng)頁就是一個 Html格式的文檔，這個文檔又 包含文字、圖片、聲音和動畫等其他格式的文件，這張網(wǎng)頁中的 所有元素被存儲在一臺與互聯(lián)網(wǎng)相連接的計算機(jī)中。當(dāng)用戶發(fā)出瀏覽這張頁面的請求時，就由這臺計算機(jī)將頁面 中的所有元素發(fā)送至用戶的計算機(jī)，然后再由用戶的瀏覽器將這 些元素按照特定的布局方式顯示出來，就是我們實際看到的網(wǎng)頁 的樣子。網(wǎng)頁設(shè)計的分類：網(wǎng)頁界面根據(jù)具體內(nèi)容和風(fēng)格的不同，大致可以分為

31、三大類 型：環(huán)境性界面、情感性界面和功能性界面。1 .環(huán)境性界面環(huán)境性網(wǎng)頁界面所包含的內(nèi)容非常廣泛，包括經(jīng)濟(jì)、文化、 科技、時事政治、歷史、民族、宗教信仰和風(fēng)俗習(xí)慣等。2 .情感性界面人是有感情的，當(dāng)一件事物真正的感動了受眾，引起人們在 情感上的強(qiáng)烈共鳴，就會被牢牢的記住，網(wǎng)頁設(shè)計也是如此。3 .功能性界面功能性界面所占的比例很大，主要是用來展示產(chǎn)品和相關(guān)信 息的，它實現(xiàn)的是使用性內(nèi)容。二、網(wǎng)頁界面構(gòu)成元素網(wǎng)頁中的元素多種多樣，其中比較常見的有文字、圖像、動 畫、音頻和視頻等，還有通過代碼實現(xiàn)的各種動態(tài)交互效果。這 些元素都各有特點，合格的設(shè)計師總是可以將不同的元素有條有 理的組合在一起，制作

32、出一張美觀協(xié)調(diào)的頁面。文字：文字最大的優(yōu)勢主要體現(xiàn)在兩方面：一是體積小。50個中文字符只占1k,但將這50個漢字以黑色黑體12點存儲為JPG圖像，卻需要至少30k。二是信息傳達(dá)效果明確。同樣一張圖像， 在不同的人眼里總是會被解讀成不同的含義。圖像：現(xiàn)如今的網(wǎng)頁設(shè)計領(lǐng)域可謂是色彩橫行，圖片當(dāng)?shù)赖?局面。這也難怪，畢竟相較于文字來說，具體直觀、色彩豐富的 圖像更能刺激人們的感官。色彩：在網(wǎng)頁設(shè)計中，各種色塊主要用來連接和過渡不同的 元素和版塊，從而使頁面整體效果更平衡、協(xié)調(diào)、豐富。多媒體：網(wǎng)頁界面中的多媒體元素主要包括Flash動畫、音頻和視頻，其中Flash動畫的應(yīng)用現(xiàn)在已經(jīng)比較普遍了。35分1

33、0分三、學(xué)生自由練習(xí)與教師指導(dǎo)四、小結(jié)教師課時授課計劃（6）授課班級授課日期見日志見日志見日志學(xué)生出勤情況見日志見日志見日志課 題第三章網(wǎng)頁設(shè)計§ 3.3 頁設(shè)計的原則§ 3.4 貝界囿布局形式本次授課目的與要求知識目標(biāo)1、網(wǎng)頁設(shè)計的原則；2、網(wǎng)貝界囿布局形式；能力培 養(yǎng)目標(biāo)1、能夠熟記網(wǎng)頁設(shè)計的原則；2、能夠掌握網(wǎng)貝界囿布局形式。課堂類型實踐課教具多媒體教學(xué)設(shè)備考核對象全體學(xué)生復(fù)習(xí)舊課要點1、什么是網(wǎng)頁UI;2、網(wǎng)貝界囿構(gòu)成兀素；新課重點1、網(wǎng)頁設(shè)計的原則；2、網(wǎng)貝界囿布局形式；新課難點及解決措施1、能夠熟記網(wǎng)頁設(shè)計的原則；2、能夠掌握網(wǎng)貝界囿布局形式。多給學(xué)生展示作品并

34、分析，是學(xué)生從講解中領(lǐng)會及制作方法。課后總結(jié)及改進(jìn)措施學(xué)生能夠熟記網(wǎng)頁設(shè)計的原則，并能夠掌握網(wǎng)頁界面布局形式。備課時間2017.10.15主任審閱年月日涉及標(biāo)準(zhǔn)參考工具書時間授課內(nèi)容分配10分35分一、組織教學(xué)1 、點名簽到2 、復(fù)習(xí)舊課二、教學(xué)內(nèi)容一、網(wǎng)頁設(shè)計的原則網(wǎng)頁界面是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展 戰(zhàn)略的重要途徑。設(shè)計之前首先要明確設(shè)計頁面的目的和用戶需 求，從而規(guī)劃出切實可行的設(shè)計方案。視覺美觀性原則：視覺美觀是網(wǎng)頁設(shè)計最基本的原則。巧妙 運用點、線、面等基本元素，巧妙地互相穿插、互相襯托、互相 補(bǔ)充構(gòu)成完美的頁面效果，充分表達(dá)完美的設(shè)計意境，主題突出原則：網(wǎng)頁界面的具

35、體內(nèi)容應(yīng)針對所服務(wù)對象的不同而具有不同的形式。整體性原則：網(wǎng)頁的整體性包括內(nèi)容上的整體性和形式上的 整體性。為用戶考慮原則：使用者優(yōu)先觀念、考慮用戶的網(wǎng)絡(luò)連接、 考慮用戶瀏覽器。更新和維護(hù)原則：服務(wù)器及相關(guān)軟硬件的維護(hù)。數(shù)據(jù)庫維護(hù)。 內(nèi)容的更新和調(diào)整。 制定相關(guān)網(wǎng)站維護(hù)的規(guī)定，將網(wǎng)站維護(hù)制度 化、規(guī)范化。做好網(wǎng)站安全管理，防范黑客入侵網(wǎng)站，檢查網(wǎng)站各個功能， 鏈接是否有錯。二、網(wǎng)頁界面布局形式網(wǎng)頁界面的設(shè)計主要有單頁和分欄兩種，在設(shè)計時會根據(jù)不 同的網(wǎng)頁性質(zhì)和頁面內(nèi)容選擇合適的布局形式，頁面布局形式很 多常見的網(wǎng)頁可分為以下幾種類型。標(biāo)題性：標(biāo)題型的表現(xiàn)形式是上面是標(biāo)題，網(wǎng)頁下面是文字 部分，

36、一些文字文章、公司簡介、注冊頁面多屬于這種類型。 左右框架型：左右框架型是一種分為左右布局的網(wǎng)頁，頁面結(jié)構(gòu) 非常清楚，使瀏覽者看了一目了然。上下框架性：同左右框架型相似，不同之處在與上下框架型 是把網(wǎng)頁分為了上下結(jié)構(gòu)布局的網(wǎng)頁。綜合型：綜合型網(wǎng)頁是一種比較全面的布局方式，它是左右 框架型與上下框架型相結(jié)合的表現(xiàn)。動畫型：動畫型是目前非常流行的網(wǎng)頁設(shè)計表現(xiàn)形式的一種 方式，它主要指的是Flash ,由于Flash的功能非常強(qiáng)大，所以頁 面表達(dá)的信息更形象、直觀，且視覺效果出眾。圖片型：這種類型的網(wǎng)頁設(shè)計，給人感覺形象、直觀、很精 美，通常出現(xiàn)在服裝類網(wǎng)頁、時尚類網(wǎng)頁或是企業(yè)網(wǎng)站，具優(yōu)點 非常醒目

37、、美觀、視覺感染力強(qiáng)，但是下載的速度慢。三、學(xué)生自由練習(xí)與教師指導(dǎo)35分10分四、小結(jié)教師課時授課計劃（7）授課班級授課日期見日志見日志見日志學(xué)生出勤情況見日志見日志見日志課 題第三章 案例1 案例2 案例3網(wǎng)頁設(shè)計繪制網(wǎng)頁中的主體繪制網(wǎng)頁戰(zhàn)中的廣告條繪制網(wǎng)頁的背景和導(dǎo)航欄本次授課目的與要求知識目標(biāo)1、圖層的“不透明度”；2、圖層的“混合模式”；3、蒙版的應(yīng)用能力培 養(yǎng)目標(biāo)1、能夠掌握圖層的使用方法；2、能夠掌握蒙版的使用方法；課堂類型實踐課教具多媒體教學(xué)設(shè)備考核對象全體學(xué)生復(fù)習(xí)舊課要點1、網(wǎng)頁設(shè)計的原則；2、網(wǎng)貝界囿布局形式；新課重點1、圖層的“不透明度”；2、圖層的“混合模式”；3、蒙版的

38、應(yīng)用新課難點及解決措施1、能夠掌握圖層的使用方法；2、能夠掌握蒙版的使用方法；多給學(xué)生展示作品并分析，是學(xué)生從講解中領(lǐng)會及制作方法。課后總結(jié)及改進(jìn)措施學(xué)生能夠掌握圖層的使用方法，并掌握蒙版的使用方法。備課時間2017.10.22主任審閱年月日涉及標(biāo)準(zhǔn)參考工具書授課內(nèi)容時間 分配一、組織教學(xué)1 、點名簽到2 、復(fù)習(xí)舊課二、教學(xué)內(nèi)容一、圖層的“不透明度”在“圖層”面板中有兩個控制圖層不透明度的選項“不透明度”和“填充”。不透明度：“不透明度”用于控制圖層、圖層組中繪制的像素 和形狀的不透明度，如果對圖層應(yīng)用了圖層樣式，則圖層樣式的 不透明度也會受到該值的影響。10分35分填充：“填充”只影響圖層中

39、繪制的像素和形狀的不透明度， 不會影響圖層樣式的不透明度。填充為0%不透明度為37%二、圖層的“混合模式”“混合模式”是Photoshop CC中一項非常重要的功能。簡單 地說，“混合模式”是將當(dāng)前一個像素的顏色與它正下方的每個像 素的顏色相混合，以便生成一個新的顏色。正常模式是Photoshop CC中的默認(rèn)模式。在此模式下編輯或 者繪制的每個像素，都將是結(jié)果色，如果圖層的不透明度設(shè)置為 100%時，完全遮蓋下方圖層。加深模式組加深模式組的混合模式可將當(dāng)前圖層像素與底層圖像像素進(jìn) 行比較，并使底層圖像像素變暗，所以會創(chuàng)建較暗的圖像顏色。 減淡模式組減淡模式的特點是當(dāng)前圖像中的黑色會被屏蔽，任

40、何比黑色 亮的區(qū)域都可能加亮底層圖像。減淡模式組是與加深模式組相對 的混合模式。對比模式組對比模式綜合了加深和減淡模式的特點，混合時50%勺灰色會 完全消失，任何亮于 50哪色區(qū)域都可能加亮下面的圖像，暗于50唾色的區(qū)域都可能使底層圖像變暗。三、蒙版的應(yīng)用蒙版在Photoshop CC中已經(jīng)成為一種概念，目的是能夠自由 控制選區(qū)，這樣就產(chǎn)生了通道。蒙版可以隨時讀出和更改事先存 入的通道，對不同的通道可以進(jìn)行合并和相減等操作。認(rèn)識蒙版蒙版是模仿傳統(tǒng)印刷中的一種工藝，印刷時會用一種紅色的 膠狀物來保護(hù)印版，所以在Photoshop CC中蒙版默認(rèn)的顏色是紅 色。蒙版的分類Photoshop CC提

41、供了 3種蒙版，分別是圖層蒙版、剪貼蒙版 和矢量蒙版。蒙版的“屬性”面板蒙版“屬性”面板用于調(diào)整選定的濾鏡蒙版、圖層蒙版或矢 量蒙版的不透明度和羽化范圍，單擊“圖層”面板中的蒙版再執(zhí) 行“窗口 屬性”命令或雙擊蒙版，打開“屬性”面板。汨步如碼被： AiRk n皿, i&fl.o tot筋增的，$ 今 1圖層蒙版圖層蒙版是與分辨率相關(guān)的位圖圖像，可使用繪畫或選擇工 具進(jìn)行編輯。圖層蒙版是非破壞性的，可以返回并重新編輯蒙版， 而不會丟失蒙版隱藏的像素。矢量蒙版矢量蒙版與分辨率無關(guān)，可使用鋼筆或形狀工具創(chuàng)建，它可 以返回并重新編輯，而不會丟失蒙版隱藏的像素。在“圖層”面 板中，矢量蒙版都顯示

42、為圖層縮覽圖右邊的附加縮覽圖，矢量蒙 版縮覽圖代表從圖層內(nèi)容中剪切下來的路徑。剪貼蒙版剪貼蒙版是一種非常靈活的蒙版，它使用一個圖像的形狀限 制另一個圖像的顯示范圍，而矢量蒙版和圖層蒙版都只能控制一 個圖層的顯示區(qū)域。移動復(fù)制蒙版要將蒙版移到另一個圖層，將該蒙版拖動到其他圖層即可。如果要復(fù)制蒙版，可按住【Alt】鍵將蒙版拖動到另一個圖層。鏈接和取消鏈接蒙版默認(rèn)情況下，圖層或組將鏈接到其圖層蒙版或矢量蒙版，蒙版縮覽圖和圖像縮覽圖之間有一個鏈接圖標(biāo)。三、學(xué)生自由練習(xí)與教師指導(dǎo)四、小結(jié)35分10分教師課時授課計劃（8）授課班級授課日期見日志見日志見日志學(xué)生出勤情況見日志見日志見日志課 題第四章軟件界面

43、設(shè)計 4.1 4.1軟件界面設(shè)計發(fā)展歷程 4.2 軟件界面設(shè)計簡介本次授課目的與要求知識目標(biāo)1、軟件界面設(shè)計發(fā)展歷程；2、軟件界面設(shè)計簡介；能力培 養(yǎng)目標(biāo)1、能夠了解軟件界面設(shè)計發(fā)展歷程；2、能夠熟記軟件界面設(shè)計簡介；課堂類型實踐課教具多媒體教學(xué)設(shè)備考核對象全體學(xué)生復(fù)習(xí)舊課要點1、圖層的“不透明度”；2、圖層的“混合模式” ；3、蒙版的應(yīng)用新課重點1、軟件界面設(shè)計發(fā)展歷程；2、軟件界面設(shè)計簡介；新課難點及解決措施1、能夠了解軟件界面設(shè)計發(fā)展歷程；2、能夠熟記軟件界面設(shè)計簡介；多給學(xué)生展示作品并分析，是學(xué)生從講解中領(lǐng)會及制作方法。課后總結(jié)及改進(jìn)措施學(xué)生能夠了解軟件界面設(shè)計發(fā)展歷程，并熟記軟件界面

44、設(shè)計簡介。備課時間2017.10.29主任審閱年月日涉及標(biāo)準(zhǔn)參考工具書時間授課內(nèi)容分配一、組織教學(xué)1 、點名簽到2 、復(fù)習(xí)舊課二、教學(xué)內(nèi)容一、軟件界面設(shè)計發(fā)展歷程10分35分軟件用戶界面的發(fā)展經(jīng)歷了從低級到高級，從簡單到復(fù)雜的 過程，軟件界面在軟件系統(tǒng)中的價值比越來越重要，好的軟件界 面不僅要實用，還要易用，更要美觀，好的軟件界面不僅可以讓 軟件變得個性化，還可以使軟件的操作變得更加舒服、簡單。二、軟件界面設(shè)計簡介網(wǎng)頁界面設(shè)計和軟件界面設(shè)計的區(qū)別很大，網(wǎng)頁設(shè)計通常側(cè) 重于界面的美觀、華麗和時尚，能吸引住游客，軟件界面設(shè)計則 更注重實用性和功能性。軟件界面設(shè)計的標(biāo)準(zhǔn)：1 .簡潔、美觀。2 .擁有

45、良好的視覺特征。3 .清晰一致的設(shè)計，軟件的界面風(fēng)格和色調(diào)應(yīng)該協(xié)調(diào)一致，所有具有相同含義的術(shù)語應(yīng)該統(tǒng)一，且易于理解和使用。4 .較快的響應(yīng)速度。5 .以用戶為中心，站在用戶的角度考慮問題，設(shè)計和制作用戶需 要的界面軟件界面設(shè)計的分類：軟件界面設(shè)計的范圍比較廣泛，它是用戶與系統(tǒng)進(jìn)行交互的 集合，這些系統(tǒng)不僅僅包括計算機(jī)系統(tǒng)，還包括某些機(jī)器、硬件 設(shè)備和工具等。最常見的軟件界面設(shè)計包括計算機(jī)軟件界面設(shè)計、 手機(jī)界面設(shè)計和播放器界面設(shè)計。三、學(xué)生自由練習(xí)與教師指導(dǎo)四、小結(jié)35分10分教師課時授課計劃（9）授課班級授課日期見日志見日志見日志學(xué)生出勤情況見日志見日志見日志課 題第四章軟件界面設(shè)計

46、7;4.3 軟件界面設(shè)計的原則§4.4 軟件界面設(shè)計中的屏幕設(shè)計本次授課目的與要求知識目標(biāo)1、軟件界面設(shè)計的原則；2、軟件界面設(shè)計中的屏幕設(shè)計；能力培 養(yǎng)目標(biāo)1、能夠掌握軟件界面設(shè)計的原則；2、能夠熟記軟件界面設(shè)計中的屏幕設(shè)計。課堂類型實踐課教具多媒體教學(xué)設(shè)備考核對象全體學(xué)生復(fù)習(xí)舊課要點1、軟件界面設(shè)計發(fā)展歷程；2、軟件界面設(shè)計簡介；新課重點1、軟件界面設(shè)計的原則；2、軟件界面設(shè)計中的屏幕設(shè)計；新課難點及解決措施1、能夠掌握軟件界面設(shè)計的原則；2、能夠熟記軟件界面設(shè)計中的屏幕設(shè)計。多給學(xué)生展示作品并分析，是學(xué)生從講解中領(lǐng)會制作方法。課后總結(jié)及改進(jìn)措施學(xué)生能夠掌握軟件界面設(shè)計的原則，并熟記軟件界面設(shè)計中的屏幕設(shè)計。備課時間2017.11.5主任審閱年月日涉及標(biāo)準(zhǔn)參考工具書授課內(nèi)容時間 分配一、組織教學(xué)10分1 、點名簽到2 、復(fù)習(xí)舊課二、教學(xué)內(nèi)容35分一、軟件界面設(shè)計的原則易用性：軟件界面中的圖標(biāo)應(yīng)該盡量美觀、簡潔、功能設(shè)置 應(yīng)該合理，便于了解和使用，盡可能降低用戶發(fā)生誤操作的概率 清晰性：