UI设计

UI 设计是从人机交互、操作逻辑、界面美观方面对软件进行整体设计。首先，UI 是人与信息交互的媒介，它是信息产品的功能载体和典型特征。UI 作为系统的可用形式而存在，比如以视觉为主体的界面，强调的是视觉元素的组织和呈现。每一款产品或者交互形式都以这种形态出现，包括图形、图标、色彩、文字设计等，用户通过它们使用系统，这是 UI 作为人机交互的基础层面。其次，UI 是信息的采集与反馈、输入与输出，这是基于界面而产生的人与产品之间的交互行为。人与非物质产品的交互更多依赖于程序的无形运作来实现，这种与界面匹配的内部运行机制，需要通过界面对功能的隐喻和引导来完成。因此，UI 不仅要有精美的视觉表现，也要有方便快捷的操作，以符合用户的认知和行为习惯。*后，从用户的角度来进行界面结构、行为、视觉等层面的设计。大数据的背景下，在信息空间中，交互会变得更加自由、自然并无处不在，科学技术、设计理念及多通道界面的发展，用户体验到的交互是无意识的。UI 设计属于高新技术设计产业，是一门设计学科，也是广告设计专业和视觉传达设计专业的一门必修课程。 本书任务内容过程清晰明了，文字描述通俗易懂，图文并茂。针对技校学生特点编制的范例和任务形式，让学生更容易学习和实训。本书系统地介绍了 UI 设计的基本概念、风格表现、规范和原则、行业发展趋势、图标设计、界面设计、交互设计等知识，并通过讲解 UI 设计项目流程和具体操作步骤，提高学生的创作和实践能力。本书通过重点培养学生的创新精神，以及独立思考、独立制作的能力，做到了“理实一体”，达到了教材引领教学和指导教学的目的。本书共有七个项目，分别由广东岭南现代技师学院的黄家玲老师、广东省轻工业技师学院的余晓敏老师、惠州市技师学院的朱江老师、广东省交通城建技师学院的龚芷月老师，以及高州市第*职业技术学校的吴翠老师共同编写。由于编者教学经验及专业能力上的限制，本书可能存在一些不足之处，敬请读者批评指正。黄家玲

本教材的内容共分为七个训练项目，项目一介绍UI设计的基本概念和设计规范，提高学生对UI设计的认识；项目二介绍UI设计项目流程，让学生了解企业UI设计工作流程，掌握原型图、交互设计、图标、界面、标注与切图等UI设计的制作技巧；项目三介绍旅游界面设计与技能实训，学生通过对旅游类APP的产品定位实训，掌握原型图与交互设计的表现形式，提高学生的用户体验能力和交互能力；项目四介绍影音类界面设计与技能实训，让学生在了解影音类APP产品定位的基础上，掌握APP图标设计规范和风格；项目五介绍电商类界面设计与技能实训，让学生了解电商类APP的需求策划，掌握UI色彩搭配与视觉设计；项目六介绍游戏类界面设计与技能实训，让学生了解UI网页端，掌握UI网页类设计规范；项目六通过对UI设计在广告设计、网页设计、游戏设计等领域的应用案例分析，提高学生的设计鉴赏能力和审美能力。

黄家玲，讲师，商业美工技师，广告专业设计师。2012年指导学生参加广州市属技工院校第二届师生创新设计大赛，荣获广州市“一等奖”；2015年参加广州市技工院校教师职业能力竞赛微教学文本评审，荣获人社局“三等奖”；2015年参加计算机专业委员会论文评选活动，荣获广州市职业技能教学研究会“一等奖”；2016参加校企合作委员会组织校企合作办学论文评比，荣获“三等奖”；2015年参加广东省“和谐杯”手绘设计技能大赛软装设计职工组“三等奖”，荣获广东省工业工会荣誉称号“广东省设计师金创奖”；2016年论文《微课在Flash动画设计教学中的初探》荣获广东省职协年度优秀科研成果论文“一等奖”；2017年指导学生参加广东省“学院奖”，荣获“优秀指导老师奖”。2018年指导学生参加第27届时报金犊奖平面类，作品《红线牵》荣获“大陆三等奖”，个人获得“优秀指导教师奖”；2019年度荣获中国职协优秀科研成果“一等奖”。

项目一 UI设计的基本知识

学习任务一　UI 设计的基本概念 ..................................... 002

学习任务二　UI 设计的风格表现 ..................................... 007

学习任务三　UI 设计的规范和原则 ...................................011

学习任务四　UI 设计的行业发展趋势 ............................... 018

项目二 UI 设计项目流程

学习任务一　项目设计流程 ............................................ 024

学习任务二　图标设计................................................... 028

学习任务三　界面设计................................................... 034

学习任务四　交互设计................................................... 041

学习任务五　标注与切图 ............................................... 045

项目三 旅游类界面设计与技能实训

学习任务一　旅游类 APP 产品定位 ................................. 050

学习任务二　旅游类 APP 原型图设计与技能实训 .............. 055

学习任务三　旅游类 APP 图标设计与技能实训 ................. 059

学习任务四　旅游类 APP 界面设计与技能实训 ................. 063

项目四 影音类界面设计与技能实训

学习任务一　音乐类 APP 产品定位 .................................068

学习任务二　音乐类 APP 信息结构图设计与技能实训 ........ 074

学习任务三　音乐类 APP 原型图设计与技能实训 ..............078

学习任务四　音乐类 APP 界面设计与技能实训 ................. 082

项目五 电商类界面设计与技能实训

学习任务一　电商类 APP 产品需求策划........................... 090

学习任务二　电商类 APP 原型图设计与技能实训 ..............094

学习任务三　电商类 APP 交互设计与技能实训 .................098

学习任务四　电商类 APP 界面视觉设计与技能实训 ........... 102

项目六 游戏类界面设计与技能实训

学习任务一　网页游戏产品定位 ...................................... 108

学习任务二　网页游戏界面信息结构图设计与技能实训 ........112

学习任务三　网页游戏界面原型图设计与技能实训 ..............115

学习任务四　网页游戏界面视觉设计与技能实训 .................118

项目七 UI设计优秀案例欣赏 

本教材在编写体例上与技工院校倡导的理实一体化高度吻合，以“UI设计”课程的典型工作任务为主线设计训练项目和学习任务，注重对学生的实践拍摄能力的训练。本教材理论讲解简明实用，实践操作训练环节步骤清晰，目标明确，技能考核指标设定合理，通过具体的设计实训提高技工学生的操作技能。