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