視覺(jué)傳達(dá)設(shè)計(jì)專業(yè)《UI設(shè)計(jì)》課程教學(xué)大綱

【UI設(shè)計(jì)】【UIDesign】一、基本信息課程代碼：【2040613】課程學(xué)分：【3】面向?qū)I(yè)：【視覺(jué)傳達(dá)設(shè)計(jì)】課程性質(zhì)：【系級(jí)必修課◎】開課院系：藝術(shù)設(shè)計(jì)學(xué)院視覺(jué)傳達(dá)設(shè)計(jì)系使用教材：教材【《移動(dòng)應(yīng)用界面設(shè)計(jì)》，常方圓于勝男編著，中國(guó)海洋大學(xué)出版社，2016.1】參考書目【《多設(shè)備時(shí)代的UI設(shè)計(jì)法則》，(日)原田秀司，中國(guó)青年出版社,2016.1】【《視界·無(wú)界：寫給UI設(shè)計(jì)師的設(shè)計(jì)書》王涵，電子工業(yè)出版社，2016.6】，【UI設(shè)計(jì)必修課.Sketch移動(dòng)界面設(shè)計(jì)教程》，李萬(wàn)軍，電子工業(yè)出版社，2017.9】先修課程：【字體與版式設(shè)計(jì)(4)2040219，網(wǎng)頁(yè)設(shè)計(jì)(3)2050100】二、課程簡(jiǎn)介UI設(shè)計(jì)（或稱界面設(shè)計(jì)）是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)說(shuō)的UI設(shè)計(jì)是虛擬UI，UI即UserInterface(用戶界面)的簡(jiǎn)稱。主要分為網(wǎng)站界面設(shè)計(jì)和App界面設(shè)計(jì)，以符合時(shí)尚潮流。本課程側(cè)重移動(dòng)端App的設(shè)計(jì)和研究。主要通過(guò)分析案例來(lái)研究視覺(jué)色彩搭配、明暗對(duì)比設(shè)計(jì)、空間設(shè)計(jì)、互動(dòng)體驗(yàn)等方面的視覺(jué)設(shè)計(jì)原理。同時(shí)講述了部分界面設(shè)計(jì)的傳統(tǒng)規(guī)范及UI設(shè)計(jì)的一般性原則，并配合新的設(shè)計(jì)趨勢(shì)，通過(guò)具體的實(shí)例子講解，使學(xué)生能夠更方便直觀地進(jìn)行知識(shí)吸收，形成融會(huì)貫通的知識(shí)結(jié)構(gòu)。通過(guò)具體調(diào)研和實(shí)戰(zhàn)，讓學(xué)生自己動(dòng)手從無(wú)到有、分析、策劃、獨(dú)立設(shè)計(jì)完成一款友好的、差異化的App，并通過(guò)原型圖來(lái)研究互動(dòng)體驗(yàn)，通過(guò)最終設(shè)計(jì)出的高保真完稿文件做動(dòng)態(tài)演示來(lái)輔助實(shí)現(xiàn)設(shè)計(jì)方案的提報(bào)。三、選課建議本課程適合視覺(jué)傳達(dá)設(shè)計(jì)專業(yè)或者其他設(shè)計(jì)類專業(yè)的二年級(jí)以上的學(xué)生學(xué)習(xí)，要求學(xué)生具備較豐富的互聯(lián)網(wǎng)使用經(jīng)驗(yàn)和有一定的繪畫、設(shè)計(jì)基礎(chǔ)及熟練掌握AdobePhotoshop，AdobeIllustrator等軟件的操作技能，并具備一定的版式設(shè)計(jì)能力和圖形設(shè)計(jì)能力。四、課程與專業(yè)畢業(yè)要求的關(guān)聯(lián)性專業(yè)畢業(yè)要求關(guān)聯(lián)LO11：理解他人的觀點(diǎn)，尊重他人的價(jià)值觀，能在不同場(chǎng)合用書面或口頭形式進(jìn)行有效溝通。LO111傾聽(tīng)他人意見(jiàn)、尊重他人觀點(diǎn)、分析他人需求。LO112應(yīng)用書面或口頭形式，闡釋自己的觀點(diǎn)，有效溝通。LO21：能根據(jù)環(huán)境需要確定學(xué)習(xí)目標(biāo)，并主動(dòng)地通過(guò)搜集信息、分析信息、討論、實(shí)踐、質(zhì)疑、創(chuàng)造等方法來(lái)實(shí)現(xiàn)學(xué)習(xí)目標(biāo)。LO211能根據(jù)需要自己確定學(xué)習(xí)目標(biāo)，并設(shè)計(jì)學(xué)習(xí)計(jì)劃。L0212能夠根據(jù)項(xiàng)目設(shè)計(jì)需要搜集相關(guān)資料，并根據(jù)設(shè)計(jì)需要對(duì)所采集的信息進(jìn)行分析LO31：具備設(shè)計(jì)素養(yǎng)與審美能力，熟悉設(shè)計(jì)行業(yè)的發(fā)展歷程與趨勢(shì)，掌握藝術(shù)設(shè)計(jì)基本理論，具備設(shè)計(jì)基礎(chǔ)、設(shè)計(jì)造型的表現(xiàn)能力。LO311掌握藝術(shù)設(shè)計(jì)基本理論，并與實(shí)踐相結(jié)合。LO312具備設(shè)計(jì)基礎(chǔ)、設(shè)計(jì)造型的表現(xiàn)能力，達(dá)到本專業(yè)的設(shè)計(jì)要求。LO32：能夠掌握攝影、攝像基本原理，并進(jìn)行拍攝實(shí)踐與后期處理，能夠利用多媒體技術(shù)進(jìn)行個(gè)人設(shè)計(jì)創(chuàng)作。LO321能夠掌握攝影基本原理，與后期圖片設(shè)計(jì)處理與運(yùn)用。LO322能夠掌握攝像基本原理，并進(jìn)行后期拍攝與剪輯。LO33：掌握設(shè)計(jì)策劃與創(chuàng)意方法，根據(jù)市場(chǎng)要求，運(yùn)用視覺(jué)設(shè)計(jì)所需要的手繪和造型技能，進(jìn)行創(chuàng)意設(shè)計(jì)。LO331掌握設(shè)計(jì)的前期調(diào)研與設(shè)計(jì)定位，為后期設(shè)計(jì)奠定基礎(chǔ)。LO332提高手繪表現(xiàn)能力，為后期設(shè)計(jì)提案，提供有效表現(xiàn)力。LO333運(yùn)用造型能力,具備創(chuàng)意設(shè)計(jì)的表現(xiàn)力與執(zhí)行力。LO34：具備項(xiàng)目實(shí)踐能力，了解行業(yè)通行的作業(yè)流程與方法，能夠獨(dú)立執(zhí)行項(xiàng)目設(shè)計(jì)與制作。LO341設(shè)計(jì)與項(xiàng)目相結(jié)合，提高實(shí)踐能力，與市場(chǎng)緊密結(jié)合，有利于提高學(xué)生對(duì)市場(chǎng)的適應(yīng)性。LO342了解行業(yè)的設(shè)計(jì)流程與制作工藝。LO35：知曉常用的材料特性及工藝流程，能采用不同材料及工藝，并根據(jù)產(chǎn)品特點(diǎn)進(jìn)行創(chuàng)意與設(shè)計(jì)制作。LO351設(shè)計(jì)與材料相結(jié)合，有利于加強(qiáng)制作工藝。LO352了解工藝流程，提高設(shè)計(jì)制作的不同表現(xiàn)形式，更符合產(chǎn)品形象的表現(xiàn)。LO36：了解多媒體交互設(shè)計(jì)的基本知識(shí)，能夠應(yīng)用用戶體驗(yàn)原理與交互設(shè)計(jì)原理于設(shè)計(jì)過(guò)程中。LO361掌握網(wǎng)頁(yè)設(shè)計(jì)、UI設(shè)計(jì)的基本原理。LO362與交互設(shè)計(jì)相結(jié)合，體現(xiàn)人工智能化。LO41：遵守紀(jì)律、守信守責(zé)；具有耐挫折、抗壓力的能力。（“責(zé)任”為我校校訓(xùn)內(nèi)容之一）L0411遵紀(jì)守法:遵守校紀(jì)校規(guī)，具備法律意識(shí)。L0412誠(chéng)實(shí)守信:為人誠(chéng)實(shí)，信守承諾，盡職盡責(zé)。(誠(chéng)實(shí)守信)?LO413愛(ài)崗敬業(yè):了解與專業(yè)相關(guān)的法律法規(guī)，在學(xué)習(xí)和社會(huì)實(shí)踐中遵守職業(yè)規(guī)范，具備職業(yè)道德操守。?LO414心理健康，能承受學(xué)習(xí)和生活中的壓力。LO51：同群體保持良好的合作關(guān)系，做集體中的積極成員；善于從多個(gè)維度思考問(wèn)題，利用自己的知識(shí)與實(shí)踐來(lái)提出新設(shè)想。L0511在集體活動(dòng)中能主動(dòng)擔(dān)任自己的角色，與其他成員密切合作，共同完成任務(wù)。L0512有質(zhì)疑精神，能有邏輯的分析與批判。L0513能用創(chuàng)新的方法或者多種方法解決復(fù)雜問(wèn)題或真實(shí)問(wèn)題。L0514了解行業(yè)前沿知識(shí)技術(shù)。LO61：具備一定的信息素養(yǎng)，并能在工作中應(yīng)用信息技術(shù)解決問(wèn)題。LO611能夠根據(jù)需要進(jìn)行專業(yè)文獻(xiàn)檢索。LO612能夠使用適合的工具來(lái)搜集信息，并對(duì)信息加以分析、鑒別、判斷與整合。LO613熟練使用計(jì)算機(jī)，掌握常用辦公軟件。LO71：愿意服務(wù)他人、服務(wù)企業(yè)、服務(wù)社會(huì);為人熱忱，富于愛(ài)心，懂得感恩LO711愛(ài)黨愛(ài)國(guó):了解祖國(guó)的優(yōu)秀傳統(tǒng)文化和革命歷史，構(gòu)建愛(ài)黨愛(ài)國(guó)的理想信念。LO712助人為樂(lè):富于愛(ài)心，懂得感恩，具備助人為樂(lè)的品質(zhì)。LO713奉獻(xiàn)社會(huì):具有服務(wù)企業(yè)、服務(wù)社會(huì)的意愿和行為能力。LO714愛(ài)護(hù)環(huán)境:具有愛(ài)護(hù)環(huán)境的意識(shí)和與自然和諧相處的環(huán)保理念。LO81：具有基本的外語(yǔ)表達(dá)溝通能力與跨文化理解能力，有國(guó)際競(jìng)爭(zhēng)與合作的意識(shí)LO811具備外語(yǔ)表達(dá)溝通能力，達(dá)到本專業(yè)的要求。LO812理解其他國(guó)家歷史文化，有跨文化交流能力。LO813有國(guó)際競(jìng)爭(zhēng)與合作意識(shí)。五、課程目標(biāo)/課程預(yù)期學(xué)習(xí)成果序號(hào)課程預(yù)期學(xué)習(xí)成果課程目標(biāo)（細(xì)化的預(yù)期學(xué)習(xí)成果）教與學(xué)方式評(píng)價(jià)方式1LO1121.1通曉界面設(shè)計(jì)的流程教師理論授課、案例分析、演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)UI分析報(bào)告2L02122.1根據(jù)分析，定位人群，設(shè)計(jì)符合該目標(biāo)用戶的界面教師理論授課、案例分析；學(xué)生實(shí)踐、教師輔導(dǎo)定位分析報(bào)告和線框圖原型設(shè)計(jì)3LO3423.1具備設(shè)計(jì)友好界面和控制的整體效果的能力教師理論授課、案例分析、演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)UI設(shè)計(jì)作品4LO3614.1掌握原型設(shè)計(jì)的方法：線框圖，高保真原型，可交互原型教師演示操作；學(xué)生實(shí)踐、教師輔導(dǎo)UI設(shè)計(jì)作品6LO7136.1具備服務(wù)企業(yè)或社會(huì)的意識(shí)教師講解要點(diǎn)；學(xué)生實(shí)踐，教師點(diǎn)評(píng)個(gè)人自創(chuàng)主題App設(shè)計(jì)作品六、課程內(nèi)容本課程總課時(shí)為48學(xué)時(shí)，其中教師課堂授課（含講解、演示、點(diǎn)評(píng)等環(huán)節(jié)）學(xué)時(shí)約為18學(xué)時(shí)；學(xué)生課內(nèi)實(shí)踐環(huán)節(jié)約為30學(xué)時(shí)；課外練習(xí)、調(diào)研、閱讀文獻(xiàn)及作業(yè)等時(shí)間不計(jì)在內(nèi)。序號(hào)課時(shí)工作任務(wù)知識(shí)要求技能要求理論實(shí)踐166App界頁(yè)分析·了解主流Apps界面設(shè)計(jì)，包括以下內(nèi)容：分析App的邏輯關(guān)系、梳理內(nèi)容思維導(dǎo)、loading的處理手法、主界面的跳轉(zhuǎn)出口、各頁(yè)面之間的邏輯關(guān)系、IOS系統(tǒng)和Android系統(tǒng)界面的狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄的位置分布和主流手機(jī)型號(hào)的像數(shù)尺寸、網(wǎng)格系統(tǒng)、結(jié)構(gòu)與內(nèi)容以及整體與局部尺度，然后據(jù)此繪制頁(yè)面結(jié)構(gòu)圖；分析界面中的設(shè)計(jì)元素，整理所使用到的設(shè)計(jì)素材，歸納其功能、作用及其交互方式。·能夠收集APP基本信息·能夠分析網(wǎng)頁(yè)的網(wǎng)格系統(tǒng)、結(jié)構(gòu)與內(nèi)容以及整體與局部尺寸·能夠根據(jù)APP頁(yè)面繪制頁(yè)面框架圖·能夠分析頁(yè)面中的設(shè)計(jì)元素的使用情況，辨析頁(yè)面框架（frame）與其中的素材·能夠總結(jié)界面功能、交互方式與設(shè)計(jì)特點(diǎn)，總結(jié)瀏覽體驗(yàn)·掌握界面繪制的技法：把握完整的繪制過(guò)程；圖案的繪制；對(duì)象的精確創(chuàng)建與編輯；智能對(duì)象、形狀圖層與蒙版等非破壞性編輯的方法；色彩的選擇與調(diào)制；界面細(xì)節(jié)表現(xiàn)難點(diǎn)：·從零散的尺寸中歸納出元素尺寸與間距的規(guī)律，并通過(guò)測(cè)量出的尺寸進(jìn)行App界面框架的繪制。·把握網(wǎng)頁(yè)繪制過(guò)程中的像素級(jí)別的細(xì)節(jié)；套用IOS、Android模版；248策劃自己開發(fā)的一款A(yù)pp的內(nèi)容規(guī)劃、思維導(dǎo)圖、收集互動(dòng)參考和素材整理·了解界面系統(tǒng)頁(yè)面布局方式（3.2）·理解柵格系統(tǒng)的基本結(jié)構(gòu)（3.2）·了解ISO系統(tǒng)的結(jié)構(gòu)（3.2）·了解設(shè)計(jì)模式（DesignPattern）的概念（3.2）·了解幾種常見(jiàn)的設(shè)計(jì)模式（3.2）·了解界面中的設(shè)計(jì)規(guī)范（3.2）·能夠在頁(yè)面設(shè)計(jì)中根據(jù)課題要求靈活應(yīng)用素材·能夠在頁(yè)面設(shè)計(jì)中應(yīng)用表單·能夠在頁(yè)面設(shè)計(jì)中運(yùn)用平面設(shè)計(jì)的四種設(shè)計(jì)原則：一致性原則（Alignment）、對(duì)比（Contrast）、均衡性原則（Balance）、相似（Proximity）3612設(shè)計(jì)自己開發(fā)的App從原型到高保真設(shè)計(jì)，并實(shí)現(xiàn)動(dòng)效演示·了解網(wǎng)頁(yè)設(shè)計(jì)的流程（3.2）·了解網(wǎng)頁(yè)設(shè)計(jì)的常見(jiàn)風(fēng)格（3.2）·理解設(shè)計(jì)主題（6.1）·掌握Sketch制作界面設(shè)計(jì)線框原型圖的技法（4.1）·掌握使用AdobePhotoshop與AdobeIllustrator制作高保真原型的方法（4.1）·掌握AE制作可以交互設(shè)計(jì)動(dòng)效的方法（4.1）·掌握理解設(shè)計(jì)需求的方法（3.2）·掌握界面設(shè)計(jì)中幾種常見(jiàn)設(shè)計(jì)元素（Icon、Button、Menu、typography）的設(shè)計(jì)方法（3.2）·掌握界面導(dǎo)航的設(shè)計(jì)方法（3.2）·掌握界面banner的設(shè)計(jì)方法（3.2）·掌握線框原型圖的制作方法（3.2）·在設(shè)計(jì)中能夠妥善處理界面框架、布局、元素、文字、色彩、質(zhì)感等設(shè)計(jì)要素（3.2）·掌握輸出圖片素材的方法（3.2）·掌握Sketch制作可以交互設(shè)計(jì)模式（menu，tabs，slideshow）的方法（4.1）·能夠制作素材與參考圖版權(quán)自查清單（5.1）·運(yùn)用網(wǎng)頁(yè)設(shè)中的設(shè)計(jì)規(guī)范（5.2）·能夠進(jìn)行契合公益主題的設(shè)計(jì)演繹（6.1）難點(diǎn)：1.理解并能夠運(yùn)用界面設(shè)計(jì)原理，并且能夠初步考慮界面設(shè)計(jì)中的用戶體驗(yàn)2.根據(jù)設(shè)計(jì)簡(jiǎn)報(bào)歸納出設(shè)計(jì)要點(diǎn)，歸納或者補(bǔ)全設(shè)計(jì)內(nèi)容；3.使用AE制作完整的動(dòng)效演示頁(yè)面4.能夠根據(jù)設(shè)計(jì)內(nèi)容選擇合適的設(shè)計(jì)模式的表現(xiàn)形式。424設(shè)計(jì)提案·了解設(shè)計(jì)提案的主要內(nèi)容與方法（1.1）·了解設(shè)計(jì)成果物提交規(guī)范（5.2）·能夠制作App的mockup（1.1）·能夠進(jìn)行版面編排（1.1）·能夠進(jìn)行設(shè)計(jì)說(shuō)明寫作（1.1）·能夠進(jìn)行口頭表述設(shè)計(jì)作品創(chuàng)意、創(chuàng)作過(guò)程（1.1）難點(diǎn)：1.設(shè)計(jì)排版的美觀性2.在設(shè)計(jì)評(píng)價(jià)中能夠歸納設(shè)計(jì)作品的優(yōu)點(diǎn)與不足七、課內(nèi)實(shí)驗(yàn)名稱及基本要求序號(hào)實(shí)驗(yàn)名稱主要內(nèi)容實(shí)驗(yàn)時(shí)數(shù)實(shí)驗(yàn)類型備注1App分析根據(jù)選題進(jìn)行網(wǎng)頁(yè)截圖、信息收集與分析總結(jié)、并制作PPT分析報(bào)告6綜合型第1周開設(shè)2策劃內(nèi)容、繪制思維導(dǎo)、根據(jù)教程進(jìn)行界面繪制技能的訓(xùn)練4驗(yàn)證型第3周開設(shè)4Sketch應(yīng)用熟悉界面；網(wǎng)格系統(tǒng)的設(shè)置；元素制作；使用母