1、YOUR LOGO原創力獨家文檔教材配套參考答案 課 題: 第1章 初識UI 設計課 時: 2課時授課類型: 講授教學目標: 了解UI 設計行業的現狀 掌握UI 設計的基本概念 熟悉UI 設計項目流程 了解UI 設計不同的風格表現 掌握UI 設計的學習方法教學重點:UI 設計的基本概念、UI 設計的學習方法教學難點:UI 設計的基本概念、UI 設計的學習方法本章技能點：UI 設計不同的風格表現本章教學技巧：知識講解教學過程：（一）課前準備1.授課前準備準備好教學用具和教學設備2.板書課題：第1章 初識UI 設計項目目標： 了解UI 設計行業的現狀 掌握UI 設計的基本概念 熟悉UI 設計項目流

2、程 了解UI 設計不同的風格表現 掌握UI 設計的學習方法3.課程引入通過不同的App界面引入UI設計的概念（二）課程內容1.1 UI設計的相關概念UI設計的相關概念包括了UI設計的基本概念、UI與WUI和GUI的關系以及UI設計的常用術語和常用軟件。1.1.1 UI設計的概念UI即User Interface（用戶界面）的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。優秀的UI設計不僅要保證界面的美觀，更要保證交互設計（Interaction Design，IxD）的可用性及用戶體驗（User Experience，UE/UX）的友好度，如圖所示。 App界面展示1.1.2 UI

3、與WUI和GUI在設計領域，UI現在被廣泛分為WUI和GUI。WUI全稱Web User Interface，即網頁界面。在企業中，WUI設計師主要從事PC端網頁設計的工作。GUI全稱Graphical User Interface，即圖形用戶界面。因為移動端包含大量圖形用戶界面，因此在企業中，GUI設計師主要從事移動端App的設計工作，如圖1-2所示。 WUI（左）GUI（右）1.1.3 UI設計常用術語中英文對照UI ：（User Interface）用戶界面。GUI：（Graphics User Interface）圖形用戶界面。HUI：（Handset User Interface）手

4、持設備用戶界面。WUI：（Web User Interface）網頁風格用戶界面。IA: （Information Architect）信息架構。UX/UE:（User Experience）用戶體驗。IxD:（Interaction Design)交互設計。UED:（User Experience Design) 用戶體驗設計。UCD:（User Centered Design）以用戶為中心的設計。UGD:（User Growth Design）用戶增長設計。UR:（User Research）用戶研究。PM:（ProductManager）產品經理。1.1.4 UI設計常用軟件下圖所示的軟

5、件是結合了軟件的專業性、市場的認可度及用戶的使用量等因素總結出的常用軟件。還有一部分專業性和功能都不錯的軟件，但由于篇幅限制不再詳細剖析。如果有特別喜愛、崇尚軟件技術流的設計師可以通過網絡進行研究。但以上軟件如果能夠掌握，完全可以勝任UI設計技術方面的工作。針對初學者，建議先掌握Photoshop和Illustrator，有條件的話還要掌握Sketch。UI設計常用軟件分類1.2 UI設計項目流程無論是從0開始打造一個產品，還是對產品進行迭代更新，一定要有不同技能的角色分工合作。想要保證以最高效的方式做出具備市場競爭力的產品，就一定需要規范的設計流程。1.2.1 項目設計流程針對整個產品的設計

6、流程而言，UI設計僅是其中的一部分。一個產品從啟動到上線，會經歷多個環節、由多個角色共同協作完成。每個角色基本都會有對應的1個或多個環節，如圖所示。上圖為大流程，下圖為展開流程，下圖中的橙色為多個角色共同協作完成1.2.2 UI設計流程UI設計師（User Interface Designer，UID），是公司中專門負責界面設計的職位。其負責的具體內容包括界面設計、切圖標注、動效制作等，UI設計師的主要交接文件是設計稿件與切圖標注。隨著UI設計的不斷發展，UI設計師的工作已不局限于原先單純的視覺執行層面，而是參與到了更多的產品設計環節中。由于職位對應的工作內容日趨多元化，UI工作環節甚至可以分

7、出更為細致的工作流程，如圖所示。UI設計流程圖1.3 UI設計的風格表現UI設計的風格在2017年由擬物化為主轉化到了以扁平化為主，因此UI設計的風格主要可以分為擬物化和扁平化兩大類，如圖所示。擬物化（左）扁平化（右）1.擬物化風格擬物化風格主要通過高光、紋理、陰影等效果模擬現實物品的造型和質感，將實物在UI設計中再現，如圖所示。擬物化圖標優點：缺點：2.扁平化風格扁平化風格去除了諸如透視、紋理、漸變等冗余、厚重和繁雜的裝飾效果，運用抽象、極簡和符號化的設計元素進行表現，如圖所示。扁平化圖標優點：缺點：1.4 UI設計的行業發展國內UI設計行業歷經了10年的發展，從相關崗位、能力要求以及薪資待

8、遇等各方面都產生了巨大的變化。想要進入UI設計行業，要先了解UI設計行業的現狀及發展趨勢。1.4.1 UI設計行業現狀隨著近10年的發展，國內UI設計的市場規模不斷擴大，UI設計師的需求亦越發龐大，高級UI設計的專業人才緊缺。企業需求從原先單一地重視視覺美觀度已經提升到了關注產品整體的用戶體驗。國內諸如阿里巴巴、騰訊、網易等大型互聯網公司，都各自成立了用戶體驗設計部門，如圖所示，吸納了眾多UI設計類人才。 大型互聯網公司1.地域特征由于政策引進、網絡發展和人才聚集等原因，我國UI設計行業有著強烈的地域特征。目前，UI設計行業發展最為突出的地區依然是北京，其次是上海，深圳與杭州是僅次于北京、上海

9、的熱門地區，如圖1-10所示。 四大熱門城市及其他地區的UI設計師分布2.行業分布大部分UI設計師都在互聯網公司從業，不少傳統行業的公司也已經融入了互聯網技術，并開始招聘UI設計師，向互聯網+的方向發展，如圖所示。UI設計行業分布3.崗位細分得益于UI設計行業的加速發展，UI設計相關的崗位變得越來越細分化，演變出了不少新的崗位，如圖所示。 UI設計崗位細分4. 能力需求近年來，UI設計的能力需求早已從基礎的視覺規范、界面美觀上升到了產品的交互設計、用戶體驗層面，“全棧設計師”和“全鏈路設計師”的概念亦順應能力需求而提出。UI設計師對能力的綜合性需求越來越高，如圖所示。能力需求5.薪酬待遇以熱門

10、城市為基準，UI設計師月薪在8000元以上的超過50%，如圖所示。影響UI設計師薪資的因素主要有工作崗位、過往經歷、從業年限等。UI設計行業待遇分布1.4.2 UI設計發展趨勢從早期的專注于工具的技法型表現，到現在要求UI設計師參與到整個商業鏈條，兼顧商業目標和用戶體驗，可以看出國內的UI設計行業發展是跨躍式的。UI設計從設計風格、技術實現到應用領域都發生了巨大的變化，如圖所示。UI設計發展趨勢1.技術實現虛擬現實、增強現實及人工智能等技術的發展，使得UI設計更加高效，交互亦更為豐富。2.設計風格UI設計的風格經歷了由擬物化到扁平化設計的轉變，現在扁平化風格依然為主流，但加入了Material

11、 Design設計語言（材料設計語言，是由Google推出的全新設計語言），使設計更為醒目且細膩。3.應用領域UI設計的應用領域已由原先的PC端和移動端擴展到可穿戴設備、無人駕駛汽車、AI機器人等，更為廣闊。今后無論技術如何進步，設計風格如何轉變，甚至于應用領域如何不同，UI設計都將參與到產品設計的整個鏈條中，實現人性化、包容化、多元化的目標。 1.5 UI設計的學習方法對于UI設計的初學者來講，首先要明確市場現在到底需要什么樣的設計師，這樣才能有針對性地學習提升。結合市場需求，我們推薦下列學習方法。1.軟件學習軟件的學習是UI設計的剛需和基礎，設計師即使有再好的想法，但不能通過軟件制作出來也

12、是徒勞。我們主要需要掌握的軟件有Photoshop、Illustrator、After Effects、Axure RP和墨刀，有條件的設計師還可以學習Sketch和Principle，如圖所示。UI設計需掌握的主流軟件2.開拓眼界眼界的開拓至關重要，許多UI設計師無法做出美觀的界面就是沒有看到太多優秀的設計。這里推薦3種方法助力設計師開拓眼界。第1種：閱讀優秀設計師的文章，吸收優秀設計師的經驗。當然針對初學者而言首先要學習規范類的文章，如iOS設計規范和Android設計規范，二者都可以在網上查到官方的設計指南，如圖所示。本書亦在3.2App設計的規范對其進行了深入剖析幫助設計師理解。第2種：閱讀優秀書籍，系統的學習UI設計的相關知識和設計應用方法。大家可以通過網上輸入關鍵詞查找到所需書籍。通過閱讀圖書的內容提要和目錄了解書籍的內容和特色，并通過購買所需書籍來進行全面的學習。第3種：欣賞優秀的作品，建議設計師每天拿出12小時到UI中國、站酷（ZCOOL）、追波（Dribbble）這些網站瀏覽最新的作品，并加入收藏，形成自己的資料