《視覺界面設(shè)計》課程教學(xué)大綱

1、 視覺界面設(shè)計課程教學(xué)大綱 一、課程信息課程名稱（COURSE TITLE）視覺界面設(shè)計課程性質(zhì)（COURSE CHARACTER）專業(yè)必修課課程代碼（COURSE CODE）308B4022學(xué)分（CREDIT）3學(xué)時（CONTACT HOURS）32理論課時32實踐課時先修課程（PRE-COURSE）設(shè)計軟件(PS+AI)、圖形設(shè)計課程負(fù)責(zé)人（COURSE COORDINATOR） 二、課程目標(biāo)通過本課程的學(xué)習(xí)，學(xué)生應(yīng)達(dá)到以下幾方面的目標(biāo)： 1.理解和掌握視覺界面設(shè)計的基本概念，并熟知用戶體驗設(shè)計與界面交互設(shè)計的概念、內(nèi)容、設(shè)計流程及常見交互方式。2.掌握可視化界面設(shè)計（界面控件、界面圖標(biāo)、

2、界面皮膚）的基本方法與操作步驟。3、掌握響應(yīng)式設(shè)計概念以及視覺界面在PC、平板、手機(jī)等跨平臺設(shè)備中的響應(yīng)式布局設(shè)計特點，并熟悉常見的響應(yīng)式界面設(shè)計呈現(xiàn)模式。4.能熟練掌握Ps及AI等圖形界面設(shè)計工具進(jìn)行GUI（Graphic User interface）設(shè)計，培養(yǎng)獨(dú)立完成視覺界面設(shè)計的操作實踐能力，為今后的相關(guān)工作就業(yè)奠定基礎(chǔ)。5.具備良好的視覺界面創(chuàng)新意識及較好的文-圖轉(zhuǎn)譯、分析與表現(xiàn)力，并具備較好的團(tuán)隊協(xié)作意識和溝通能力。6.熟知移動端界面設(shè)計的評判標(biāo)準(zhǔn)與原則，不斷提升和開拓專業(yè)審美眼界；對當(dāng)前主流的界面風(fēng)格與國際流行趨勢有系統(tǒng)了解，并熟知其對應(yīng)的界面風(fēng)格特征與制作技巧。7.了解移動應(yīng)用

3、設(shè)計的相關(guān)軟件工具與資源，并對當(dāng)下流行的H5微單頁制作原理及相關(guān)操作有一定了解，具備初步的實踐經(jīng)驗。課程目標(biāo)對畢業(yè)要求的支撐關(guān)系表畢業(yè)要求畢業(yè)要求指標(biāo)點支撐的課程目標(biāo)2.形成對視覺傳達(dá)設(shè)計專業(yè)的基本認(rèn)知，熟練掌握藝術(shù)設(shè)計基礎(chǔ)理論、中外設(shè)計發(fā)展歷史、視覺傳達(dá)設(shè)計的基礎(chǔ)理論知識。2.1形成對視覺傳達(dá)設(shè)計專業(yè)的基本認(rèn)知。2.2熟練掌握藝術(shù)設(shè)計基礎(chǔ)理論、中外設(shè)計發(fā)展歷史、視覺傳達(dá)設(shè)計的基礎(chǔ)理論知識。課程目標(biāo)13.具有較高的藝術(shù)修養(yǎng)和審美能力，掌握視覺符號語言、視覺表達(dá)方式、視覺設(shè)計原則以及視覺媒介形式與設(shè)計形態(tài)的基本原理和方法。3.1具有較高的藝術(shù)修養(yǎng)和審美能力。3.2掌握視覺符號語言、視覺表達(dá)方式、

4、視覺設(shè)計原則以及視覺媒介形式與設(shè)計形態(tài)的基本原理和方法。課程目標(biāo)2、3、65.具有一定的調(diào)查研究能力、分析問題、解決問題能力，具備對視覺傳達(dá)設(shè)計專業(yè)市場調(diào)研、數(shù)據(jù)分析以及數(shù)據(jù)可視化呈現(xiàn)的技能。5.1具有一定的調(diào)查研究能力、分析問題、解決問題能力。5.2具備對視覺傳達(dá)設(shè)計專業(yè)市場調(diào)研、數(shù)據(jù)分析以及數(shù)據(jù)可視化呈現(xiàn)的技能。課程目標(biāo)2、3、4、5、66.熟悉視覺傳達(dá)設(shè)計具體流程，具有獨(dú)立完成視覺傳達(dá)設(shè)計的實踐與創(chuàng)新能力，具備對視覺傳達(dá)設(shè)計專業(yè)項目的設(shè)計能力、執(zhí)行能力以及管理能力。6.1熟悉視覺傳達(dá)設(shè)計具體流程，具有獨(dú)立完成視覺傳達(dá)設(shè)計的實踐與創(chuàng)新能力。6.2具備對視覺傳達(dá)設(shè)計專業(yè)項目的設(shè)計能力、執(zhí)行能

5、力以及管理能力。課程目標(biāo)4、57. 具有較寬的設(shè)計視野，了解視覺傳達(dá)設(shè)計領(lǐng)域的方針、政策、行業(yè)標(biāo)準(zhǔn)及學(xué)科的理論前沿和發(fā)展動態(tài)以及文化創(chuàng)意產(chǎn)業(yè)的發(fā)展?fàn)顩r，具有創(chuàng)新意識和對新產(chǎn)品、新工藝、新技術(shù)和新媒介進(jìn)行研究、開發(fā)和設(shè)計的能力。7.1具有較寬的設(shè)計視野，了解視覺傳達(dá)設(shè)計領(lǐng)域的方針、政策、行業(yè)標(biāo)準(zhǔn)及學(xué)科的理論前沿和發(fā)展動態(tài)以及文化創(chuàng)意產(chǎn)業(yè)的發(fā)展?fàn)顩r。7.2具有創(chuàng)新意識和對新產(chǎn)品、新工藝、新技術(shù)和新媒介進(jìn)行研究、開發(fā)和設(shè)計的能力。課程目標(biāo)6、79. 具備良好的表達(dá)能力、人際交往溝通能力、跨文化交流能力，具備團(tuán)隊協(xié)作能力，能夠在多學(xué)科背景下的團(tuán)隊中承擔(dān)個體、團(tuán)隊成員以及負(fù)責(zé)人的角色。9.1具備良好的表

6、達(dá)能力、人際交往溝通能力、跨文化交流能力。9.2具備團(tuán)隊協(xié)作能力，能夠在多學(xué)科背景下的團(tuán)隊中承擔(dān)個體、團(tuán)隊成員以及負(fù)責(zé)人的角色。課程目標(biāo)4、5三、教學(xué)內(nèi)容與預(yù)期學(xué)習(xí)成效知識單元對應(yīng)課程目標(biāo)知識點預(yù)期學(xué)習(xí)成效實現(xiàn)環(huán)節(jié)學(xué)時1.視覺界面設(shè)計概述課程目標(biāo)1、31.視覺界面設(shè)計的概念2.何謂“用戶體驗設(shè)計”3.界面交互設(shè)計是什么4.何謂“響應(yīng)式設(shè)計”5.視覺界面設(shè)計的發(fā)展1.理解和掌握視覺界面設(shè)計的基礎(chǔ)概念與發(fā)展節(jié)點及相應(yīng)風(fēng)格特征；2.理解和掌握用戶體驗設(shè)計、界面交互設(shè)計的概念、內(nèi)容及常見交互方式。3.理解和掌握響應(yīng)式設(shè)計概念及其用途。1.課堂教學(xué)2.課后實踐：分析與欣賞優(yōu)秀視覺界面設(shè)計作品，要求對學(xué)生

7、界面設(shè)計相關(guān)概念的理解情況進(jìn)行考核。理論2學(xué)時2.UI構(gòu)成與案例解析課程目標(biāo)2、3、61.PC端界面的基本構(gòu)成 2.移動端APP界面的基本構(gòu)成： eq oac(,1)狀態(tài)欄 eq oac(,2)導(dǎo)航欄 eq oac(,3)主菜單欄 eq oac(,4)內(nèi)容區(qū)域3.移動端主題界面基本構(gòu)成1.理解掌握PC端界面的基本構(gòu)成；2.熟練掌握APP基本界面構(gòu)成及其對應(yīng)位置及作用；3.熟練掌握移動端主題界面一般構(gòu)成。4.通過優(yōu)秀案例賞析，提升自我設(shè)計鑒賞水平。1.課堂教學(xué)2.課內(nèi)外實踐：要求學(xué)生分別搜集PC端及移動端優(yōu)秀UI設(shè)計作品進(jìn)行對照分析，并標(biāo)明對應(yīng)的位置結(jié)構(gòu)名稱、找出異同。理論2學(xué)時3.UI設(shè)計流程

8、與設(shè)計原則課程目標(biāo)1、2、61.UI設(shè)計流程介紹： eq oac(,1)創(chuàng)意想法 eq oac(,2)調(diào)研報告 eq oac(,3)產(chǎn)品構(gòu)思 eq oac(,4)產(chǎn)品審核 eq oac(,5)產(chǎn)品立項 eq oac(,6)開會討論 eq oac(,7)市場分析（需求、功能） eq oac(,8)產(chǎn)品原型 eq oac(,9)初步初審 eq oac(,10)UI設(shè)計與再次評審 eq oac(,11)技術(shù)研發(fā) eq oac(,12)準(zhǔn)備上線 eq oac(,13)正式發(fā)布 eq oac(,14)運(yùn)營營銷 eq oac(,15)用戶數(shù)據(jù) eq oac(,16)改進(jìn)建議與更新完善2.UI設(shè)計原則 eq

9、 oac(,1)內(nèi)容優(yōu)先 eq oac(,2)為觸摸而設(shè)計 eq oac(,3)輸入方式的轉(zhuǎn)換 eq oac(,4)多通道設(shè)計 eq oac(,5)易學(xué)性 eq oac(,6)為中斷而設(shè)計 eq oac(,7)人性化設(shè)計（智能有愛）1.熟練掌握UI產(chǎn)品開發(fā)具體流程與步驟；2.重點掌握：流程圖、低保真設(shè)計圖及高保真設(shè)計圖間的相互區(qū)別、用途及制作方法；3.理解和掌握UI切圖的思路與方法；4.掌握UI設(shè)計原則與參考標(biāo)準(zhǔn)。1.課堂教學(xué)2.課內(nèi)外實踐：要求學(xué)生選擇1套完整的APP界面并繪制其流程圖及低保真線框圖。另外，對相關(guān)流程及原則進(jìn)行提問考核。理論4學(xué)時+實踐4學(xué)時4.圖形界面軟件設(shè)計與制作課程目標(biāo)

10、2、41.Photoshop 軟件繪制圖形界面的方法2.Photoshop 軟件中色彩設(shè)定及漸變色使用方法；3.Photoshop 軟件中文字字體大小；4.Photoshop 軟件中界面尺寸設(shè)定；5.Illustrator軟件繪制圖形界面的方法6.矢量圖形設(shè)計軟件Illustrator界面設(shè)計特點；7.Illustrator軟件中色彩設(shè)定及漸變色使用方法；8.Illustrator軟件中中文字字體大??；9.Illustrator 軟件中界面尺寸設(shè)定；10.GUI界面軟件設(shè)計制作案例講授（手機(jī)用戶界面、電腦圖標(biāo)設(shè)計制作等）1.熟練掌握視覺界面設(shè)計相關(guān)參數(shù)設(shè)定及設(shè)計操作方法（PS+AI）；2.熟練

11、掌握視覺界面設(shè)計的細(xì)節(jié)制作技巧，并做到靈活運(yùn)用。3.做到熟練運(yùn)用PS、AI視覺界面設(shè)計相關(guān)工具與功能。1.課堂教學(xué)2.課內(nèi)外實踐：搜集優(yōu)秀視覺界面設(shè)計作品進(jìn)行臨摹練習(xí)，并對學(xué)生界面設(shè)計臨摹情況進(jìn)行輔導(dǎo)與考核。理論8學(xué)時+實踐10學(xué)時5.圖形界面圖標(biāo)、控件創(chuàng)意與設(shè)計課程目標(biāo)5、61.視覺界面圖標(biāo)、控件功能劃分及風(fēng)格；2.界面圖標(biāo)、控件功能語義的視覺轉(zhuǎn)換；3.視覺界面圖標(biāo)、控件設(shè)計的主流風(fēng)格；4.視覺界面圖標(biāo)、控件創(chuàng)意方法（直接轉(zhuǎn)譯法、間接轉(zhuǎn)譯法）；5.視覺界面圖標(biāo)、控件創(chuàng)意草圖繪制；6.視覺界面圖標(biāo)、控件整體圖形、色彩設(shè)定；7.視覺界面圖標(biāo)、控件創(chuàng)意電腦設(shè)計與制作。1.重點理解和掌握界面圖標(biāo)、控

12、件功能語義的視覺轉(zhuǎn)換思路與方法；2.熟練掌握視覺界面圖標(biāo)及控件的創(chuàng)意方法；1.課堂教學(xué)2.課內(nèi)實踐：針對指定界面圖標(biāo)的功能語義進(jìn)行視覺轉(zhuǎn)換，并對學(xué)生圖標(biāo)功能語義的視覺轉(zhuǎn)換能力及設(shè)計制作能力進(jìn)行綜合考核。理論10學(xué)時+實踐14學(xué)時6.圖形界面導(dǎo)航的設(shè)計架構(gòu)課程目標(biāo)2、31.標(biāo)簽式2.輻射式3.列表式4.平鋪式5.抽屜式6.點聚式等1.熟練掌握界面導(dǎo)航的常規(guī)架構(gòu)模式，為借鑒和創(chuàng)新奠定基礎(chǔ)。2.理解和掌握各常規(guī)導(dǎo)航架構(gòu)的各自特點,具備1.課堂教學(xué)2.課內(nèi)實踐：理論2學(xué)時7.圖形界面響應(yīng)式布局與導(dǎo)航類型課程目標(biāo)2、31.響應(yīng)式布局類型： eq oac(,1)左右雙列布局模式 eq oac(,2)左右單

13、列拆分模式 eq oac(,3)左中右三列布局模式 eq oac(,4)上下單行3列拆分模式 eq oac(,5)上下單行2列拆分模式 eq oac(,6)封面式布局模式 eq oac(,7)標(biāo)題式布局模式（上中下）2.響應(yīng)式導(dǎo)航類型1.熟練掌握PC端及移動端常見的幾種界面與導(dǎo)航布局模式，提高對整體界面布局的把控能力。2.理解和掌握響應(yīng)式設(shè)計的概念及其對跨平臺界面布局、導(dǎo)航及用戶體驗的適配意義。1.課堂教學(xué)2.課內(nèi)實踐：針對前期搜集的優(yōu)秀界面設(shè)計作品，進(jìn)行跨平臺界面的布局異同臨摹，并視其完成情況進(jìn)行考核。理論2學(xué)時+實踐2學(xué)時8.APP應(yīng)用軟件及H5介紹課程目標(biāo)71.APP設(shè)計工具： eq o

14、ac(,1)Axure eq oac(,2)JustinMind eq oac(,3)Iphone Mockup eq oac(,4)Flash eq oac(,5)POP eq oac(,6)xScope eq oac(,7)Skala Preview eq oac(,8)Android Design Preview eq oac(,9)IOS App Icon Template2.H5介紹 eq oac(,1)H5概念介紹 eq oac(,2)H5制作站點推薦 eq oac(,3)H5制作原理及其操作界面介紹 eq oac(,4)H5案例欣賞與互動體驗1.熟練掌握APP移動應(yīng)用設(shè)計相關(guān)軟件

15、名稱與各自特點。2.熟知H5概念及相關(guān)學(xué)習(xí)站點，以及H5產(chǎn)品用途與互動方式。3.熟練掌握H5制作原理、頁面構(gòu)成及基礎(chǔ)操作與輸出方式。1.課堂教學(xué)2.課內(nèi)外實踐：通過網(wǎng)絡(luò)書籍等資源對相關(guān)軟件進(jìn)行了解和學(xué)習(xí)，并對H5概念及H5操作方法進(jìn)行深入了解；最終完成一套命題界面的創(chuàng)新設(shè)計作業(yè)并視其完成情況進(jìn)行考核。理論2學(xué)時+實踐2學(xué)時 四、教學(xué)目標(biāo)達(dá)成度評價1.教學(xué)目標(biāo)1、3、6的達(dá)成度通過課堂討論與提問形式進(jìn)行綜合考評；2.教學(xué)目標(biāo)2、4的達(dá)成度通過課堂練習(xí)及作業(yè)的完成質(zhì)量進(jìn)行綜合考評；3.教學(xué)目標(biāo)5、6的達(dá)成度通過課堂練習(xí)與實際作業(yè)創(chuàng)意及完成質(zhì)量進(jìn)行綜合考評；4.教學(xué)目標(biāo)7的達(dá)成度通過課堂引導(dǎo)及課外自

16、學(xué)與課堂提問形式進(jìn)行考評；五、成績評定課程成績包括3個部分，分別為平時出勤、課程表現(xiàn)、課堂作業(yè)質(zhì)量。具體要求及成績評定方法如下：1平時出勤。平時出勤采用“只扣分，不加分”的方法計算成績，無故曠課一次，將在總評成績中扣除2分。曠課5次，取消本門課程的考核資格。2課程表現(xiàn)，占總成績的20%。（1）學(xué)習(xí)態(tài)度，要求每位學(xué)生能積極有效的學(xué)習(xí)專業(yè)理論和技能，認(rèn)真聽講，積極參與，勤于思考。（2）動手能力，要求每位學(xué)生在理論指導(dǎo)下努力訓(xùn)練，掌握視覺界面設(shè)計制作相關(guān)技能，并體現(xiàn)在練習(xí)和作品中。（3）討論部分要求學(xué)生根據(jù)課程內(nèi)容，分組討論學(xué)習(xí)內(nèi)容，并闡述心得和認(rèn)識。3課程作業(yè)質(zhì)量，要求能夠體現(xiàn)課程目標(biāo)要求，并能夠體現(xiàn)一定的技術(shù)性和藝術(shù)性及創(chuàng)新性，充分體現(xiàn)視覺界面制作集技術(shù)含量與藝術(shù)審美相結(jié)合的課程特點。占總成績的80%。六、課程教材及主要參考書1. 建議教材：傅小貞 胡甲超 鄭元攏編著，移動設(shè)計，電子工業(yè)出版社,2013年版.2.主要參考書：1.