UI界面教學(xué)大綱

1、課程名稱界面（UI）設(shè)計(jì)課程編號課程類別必修課程學(xué)時(shí)48課程學(xué)分3課程實(shí)施方式（即教學(xué)組織形式、采用的教學(xué)方法及手段）考核方式考查開設(shè)時(shí)間第二學(xué)期使用教材創(chuàng)意UIPhotoshop玩轉(zhuǎn)圖標(biāo)設(shè)計(jì)，Arteyes設(shè)計(jì)工作室編著，人民郵電出版社2015年1月內(nèi)容簡介通過案例的方式介紹了如何使用Photoshop進(jìn)行圖標(biāo)設(shè)計(jì)。從輕松邁向圖標(biāo)王國、掌控圖標(biāo)創(chuàng)意原則、圖標(biāo)設(shè)計(jì)與軟件操作、扁平化圖標(biāo)設(shè)計(jì)、質(zhì)感圖標(biāo)的設(shè)計(jì)、涂鴉風(fēng)格圖標(biāo)設(shè)計(jì)到玩轉(zhuǎn)圖標(biāo)應(yīng)用和附錄逐一講解，使讀者由淺入深，逐步了解使用Photoshop制作圖標(biāo)的整體設(shè)計(jì)思路和制作過程。課程的目的與任務(wù)1、知識目標(biāo)通過對本課程的學(xué)習(xí)，使學(xué)生從心理學(xué)、

2、人機(jī)工程學(xué)、設(shè)計(jì)藝術(shù)出發(fā)，掌握硬件人機(jī)界面與軟件人機(jī)界面方法、理論與設(shè)計(jì)實(shí)例，探索新的交互技術(shù)。2、能力目標(biāo)通過本課程的學(xué)習(xí)，學(xué)生應(yīng)該掌握軟件的基本操作，并初步具備：UI界面設(shè)計(jì)能力；3、素質(zhì)目標(biāo)通過本課程的教學(xué)，我們重要的是培養(yǎng)學(xué)生觀察生活、體驗(yàn)生活、體驗(yàn)、審美能力、吃苦精神和激發(fā)學(xué)生的創(chuàng)造能力的方法和手段。課程學(xué)習(xí)指導(dǎo)UI設(shè)計(jì)是藝術(shù)設(shè)計(jì)專業(yè)（平面設(shè)計(jì)方向）的專業(yè)核心課程，是在圖形圖像處理、企業(yè)VI、標(biāo)志設(shè)計(jì)課程基礎(chǔ)上的延續(xù)和提高。課程幾乎涉及到了平面設(shè)計(jì)專業(yè)基礎(chǔ)課程的各個(gè)方面，課程實(shí)踐中注重對各專業(yè)基礎(chǔ)課程如圖形設(shè)計(jì)、編排設(shè)計(jì)、字體設(shè)計(jì)、構(gòu)成設(shè)計(jì)等課程的統(tǒng)合和整體應(yīng)用。UI界面設(shè)計(jì)是一門新

3、的學(xué)科，也稱之為當(dāng)代的新媒體，它是跨學(xué)科的學(xué)術(shù)領(lǐng)域，是在各門相關(guān)學(xué)科中提取相關(guān)的內(nèi)容要素而綜合起來的系統(tǒng)學(xué)科。在教學(xué)過程中，應(yīng)立足于加強(qiáng)學(xué)生實(shí)際操作能力的培養(yǎng)，采用項(xiàng)目教學(xué)，以工作任務(wù)引領(lǐng)提高學(xué)生學(xué)習(xí)興趣，激發(fā)學(xué)生的成就動機(jī)。教學(xué)過程中教師應(yīng)積極引導(dǎo)學(xué)生提升職業(yè)素養(yǎng)，提高職業(yè)道德。課時(shí)分配表章次內(nèi)容學(xué)時(shí)第一章輕松邁向圖標(biāo)王國6第二章掌控圖標(biāo)創(chuàng)意原則6第三章圖標(biāo)設(shè)計(jì)與軟件操作6第四章扁平化圖標(biāo)設(shè)計(jì)6第五章質(zhì)感圖標(biāo)的設(shè)計(jì)6Aye、.V7-.第八早涂鴉風(fēng)格圖標(biāo)設(shè)計(jì)6第七章玩轉(zhuǎn)圖標(biāo)應(yīng)用1248課程內(nèi)容與基本要求第1章輕松邁向圖標(biāo)王國1.1圖標(biāo)入門1.1.1什么是圖標(biāo)1.1.2圖標(biāo)與標(biāo)志的區(qū)別1.1.3

4、常見移動應(yīng)用圖標(biāo)1.1.4常見電腦應(yīng)用圖標(biāo)1.2圖標(biāo)設(shè)計(jì)的意義和作用1.2.1什么是圖標(biāo)1.2.2圖形內(nèi)在含義1.2.3圖標(biāo)設(shè)計(jì)的作用1.3圖標(biāo)的像素分辨1.3.1 Windows操作系統(tǒng)的圖標(biāo)像素分辨1.3.2 WindowsXP操作系統(tǒng)的圖標(biāo)像素分辨1.3.3安卓操作系統(tǒng)的圖標(biāo)像素分辨1.3.4iOS操作系統(tǒng)的圖標(biāo)像素分辨1.4常見圖標(biāo)的標(biāo)準(zhǔn)尺寸1.4.1常見移動操作系統(tǒng)的圖標(biāo)標(biāo)準(zhǔn)尺寸1.4.2常見電腦操作系統(tǒng)的圖標(biāo)標(biāo)準(zhǔn)尺寸1.5圖標(biāo)的設(shè)計(jì)要素和結(jié)構(gòu)1.5.1圖標(biāo)型的把握1.5.2圖標(biāo)型的把握1.5.3透視、光源與陰影1.5.4元素的組合1.5.5視覺均衡1.6那些你不知的圖標(biāo)分類1.6.

5、1 PNG格式圖標(biāo)1.6.2 ICON格式圖標(biāo)1.6.3 ICL格式圖標(biāo)1.6.4 IP格式圖標(biāo)1.7制作圖標(biāo)的常用軟件1.7.1 PhotoshopCS61.7.2 IllustratorCS6第2章掌控圖標(biāo)創(chuàng)意原則2.1圖標(biāo)制作的原則2.1.1可識別性原則2.1.2差異性原則2.1.3合適的精細(xì)度和元素個(gè)數(shù)原則2.1.4風(fēng)格統(tǒng)一性原則2.1.5原創(chuàng)性原則2.2圖標(biāo)的創(chuàng)意2.2.1界面需求2.2.2圖標(biāo)的創(chuàng)意元素2.2.3創(chuàng)意圖標(biāo)的特點(diǎn)2.3圖標(biāo)設(shè)計(jì)草圖的繪制和渲染2.3.1圖標(biāo)的設(shè)計(jì)方法及技巧2.3.2圖標(biāo)視覺分析2.3.3最終草圖定稿2.3.4草圖渲染2.4圖標(biāo)的視覺分析和效果2.4.1

6、用戶體驗(yàn)2.4.2圖標(biāo)的可識別性2.4.3圖標(biāo)設(shè)計(jì)的連續(xù)性第3章圖標(biāo)設(shè)計(jì)與軟件操作3.1基礎(chǔ)圖形繪制圖標(biāo)中的元素3.1.1圓形圖標(biāo)的繪制3.1.2方形圖標(biāo)的繪制3.1.3圓角矩形圖標(biāo)的繪制3.1.4組合圖形圖標(biāo)的繪制3.1.5自定義形狀圖標(biāo)的繪制3.2讓人過目不忘的簡單生活圖標(biāo)3.2.1移動設(shè)備電池圖標(biāo)繪制3.2.2安卓系統(tǒng)啟動圖標(biāo)3.2.3 iOS系統(tǒng)啟動圖標(biāo)3.2.4 Windows系統(tǒng)啟動圖標(biāo)3.3具有設(shè)計(jì)性的圖標(biāo)制作3.3.1具有設(shè)計(jì)性的開關(guān)圖標(biāo)3.3.2具有設(shè)計(jì)性的音樂旋鈕圖標(biāo)3.3.3具有設(shè)計(jì)性的導(dǎo)航欄圖標(biāo)的繪制3.4色彩斑斕的圖標(biāo)3.4.1粉嫩色系圖標(biāo)3.4.2藍(lán)綠色系圖標(biāo)3.4

7、.3暖色調(diào)圖標(biāo)第4章扁平化圖標(biāo)設(shè)計(jì)4.1純色形狀扁平化圖標(biāo)實(shí)戰(zhàn)1應(yīng)用類純色形狀扁平化圖標(biāo)實(shí)戰(zhàn)2生活類純色形狀扁平化圖標(biāo)4.2 Windows系統(tǒng)中的扁平化圖標(biāo)實(shí)戰(zhàn)1Windows操作系統(tǒng)的扁平化圖標(biāo)實(shí)戰(zhàn)2WindowsXP操作系統(tǒng)的扁平化圖標(biāo)4.3 iOS系統(tǒng)中的扁平化圖標(biāo)實(shí)戰(zhàn)1線條扁平化圖標(biāo)實(shí)戰(zhàn)2圖形扁平化圖標(biāo)第5章質(zhì)感圖標(biāo)的設(shè)計(jì)5.1質(zhì)感立體圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)1立體透明圖標(biāo)制作實(shí)戰(zhàn)2立體毛絨圖標(biāo)制作5.2質(zhì)感寫實(shí)圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)1逼真質(zhì)感圖標(biāo)實(shí)戰(zhàn)2逼真食物圖標(biāo)實(shí)戰(zhàn)3金屬質(zhì)感寫實(shí)圖標(biāo)實(shí)戰(zhàn)4逼真生活物品圖標(biāo)第6章涂鴉風(fēng)格圖標(biāo)設(shè)計(jì)6.1矢量涂鴉風(fēng)格圖標(biāo)實(shí)戰(zhàn)1矢量牌游質(zhì)感風(fēng)格圖標(biāo)實(shí)戰(zhàn)2矢量趣味涂鴉圖標(biāo)6.2

8、可愛動畫涂鴉風(fēng)格圖標(biāo)實(shí)戰(zhàn)1可愛游戲涂鴉風(fēng)格圖標(biāo)實(shí)戰(zhàn)2可愛動畫涂鴉風(fēng)格圖標(biāo)6.3手繪涂鴉界面圖標(biāo)實(shí)戰(zhàn)1手繪涂鴉界面圖標(biāo)實(shí)戰(zhàn)2手繪相機(jī)應(yīng)用圖標(biāo)實(shí)戰(zhàn)3手繪導(dǎo)航應(yīng)用圖標(biāo)第7章玩轉(zhuǎn)圖標(biāo)應(yīng)用7.1移動應(yīng)用和圖標(biāo)實(shí)戰(zhàn)1手機(jī)App應(yīng)用和圖標(biāo)實(shí)戰(zhàn)2蘋果手機(jī)App應(yīng)用和圖標(biāo)實(shí)戰(zhàn)3移動iPad應(yīng)用和圖標(biāo)7.2電腦桌面應(yīng)用圖標(biāo)實(shí)戰(zhàn)1電腦桌面圖標(biāo)實(shí)戰(zhàn)2矢量插畫電腦應(yīng)用和圖標(biāo)學(xué)生自學(xué)內(nèi)容重要思考題1. 完成簡單數(shù)字圖標(biāo)設(shè)計(jì)2. 完成電腦，手機(jī)APP圖標(biāo)設(shè)計(jì)參考書目1、教材名稱：認(rèn)知與設(shè)計(jì)理解UI設(shè)計(jì)準(zhǔn)則主編：美JeffJohnson著張一寧譯出版社：人民郵電出版社出版時(shí)間：2011年9月第1版2、人機(jī)界面設(shè)計(jì)羅仕鑒，朱上上，孫守遷著機(jī)械工業(yè)出版社2002年9月3、人本界面