本书对接1+X职业技能等级证书考试内容，融入课程思政内容，是岗课赛证融通的项目化教材。本书以培养学生的UI元素图形创意能力为根本，结合绘图软件的功能演示，通过案例有针对性地讲解UI项目的设计过程及软件的操作步骤，从而达到让学生熟练掌握绘图软件的目的。案例所使用的软件包括Photoshop、Illustrator和After Effects。全书共10个项目，项目1是概述，包含UI设计的基础知识和3个软件的功能简述。项目2～项目9是各个案例的分步解析，通过案例讲解界面构图、图形元素和色彩、字体规范等。项目10是综合实战，包括从项目分析、策划和设计到制作规范和如何完成的全过程讲解。本书不仅可以帮助学生迅速进入职场角色，还提供了丰富的教学资源帮助教师快速开课。本书主要适合作为软件技术专业，以及UI方向和艺术设计类相关专业的高职本科、专科学生的教材。

互联网通过智能手机、平板电脑等移动端设备传送海量信息。如今网络服务已经渗透到各个行业，以及生活的各个方面，因此从互联网获取信息已成为社会主流。网络营销、网上娱乐、网络股票基金等交易活动，网络书店等各类网络产业开始蓬勃发展。移动端App 界面设计的专业人才被称为UI 设计师，其工作内容包括软件的人机交互、操作逻辑和界面的整体设计，是中国互联网产业中非常抢手的人才。 本书提供了集图形创意理论知识、图形及动效软件操作、项目实战及拓展、1+X 职业技能等级证书考试内容、课程思政等于一体的教学方案，以项目案例为主导，方便教学时讲练结合，内容全面，实用性强，旨在培养实用技术型的专业人才，方便读者通过理论学习和实操训练提升就业竞争力。 本书以满足企业对人才的技能需求为根本，从企业真实工作岗位的要求和内容出发，选取企业真实项目案例，是典型的校企双元合作教材。编写团队的成员包括广州迈峰网络科技股份有限公司高级工程师李伟锋。该公司是广东科学技术职业学院的长期合作企业，针对我校计算机学院大三学生开设项目班，以公司项目提升学生的实战能力。李伟锋根据本校异步式教学模式中大三项目班学生的现状制定本书的编写大纲和目录，使项目班的学生可以按照本书的大纲和课件进行学习。他全程参与本书的编写，审核本书内容并提出意见和建议，并写下学生寄语：作为UI 设计师，在熟练掌握软件操作后，要想学习真正的设计知识，就需要从项目实践中获得。前期对优秀作品的模仿会让同学们的设计更加规范，对素材的积累会有效地提高同学们的设计效率，后期的审美意识、用户体验和交互设计唯有多看、多学和多思才能逐渐提升。当同学们具备设计思维和创意时，才能在设计行业走得更高、更远。 本书除了由企业工程师合作编写，还获得了校内专家包括谢文达副教授、姜建华副教授、曾文英教授的鼎力支持。他们阅读文稿后在本书的架构、内容设定、格式等方面提出了宝贵的意见和建议，帮助编写团队有效地提升了撰写水平。 本书共10 个项目，项目1、项目2、项目3 和项目7 由魏云柯老师编写，项目6、项目8 和项目10 由赖苑圆老师编写，项目5 和项目9 由修舒雯老师编写，项目4 由吴亚轩老师编写。编写团队的老师们克服困难、团结协作，不断提升自己，从而打造了一本全面、实用的项目化教材。 感谢在本书完稿前，胡婷婷和吴亚轩两位老师，不遗余力地逐字、逐句查看错漏；感谢电子工业出版社编辑人员的审核和校对。特别感谢广东科学技术职业学院为编写团队提供的平台及经费支持。特别感谢龙立功、杨忠明、康玉忠等专家对编写团队的无私帮助，以及对本书项目化教学特色方面的指导与支持。 说明：本书中部分软件（如Illustrator）的操作界面图片因平台底色较深，所以展示 不太清晰，请读者结合软件以实际操作为准，敬请谅解。

项目1 概述............................................................................................ 001 1.1　UI 设计的概念和设计原则 ....................................................................... 001 1.2　UI 设计的流程 ......................................................................................... 003 1.3　UI 元素的分类 ......................................................................................... 007 1.4　UI 版面和字体设计 .................................................................................. 009 1.4.1 版面设计的思路 ......................................................................... 010 1.4.2 版面设计的步骤 ......................................................................... 015 1.4.3 字体设计在图标和弹出窗口中的运用 ......................................... 016 1.4.4 字体设计的方法和步骤 ............................................................... 017 1.5　UI 色彩和图形设计概述 .......................................................................... 019 1.5.1 UI 色彩运用法则......................................................................... 019 1.5.2 色彩规范的制作 ......................................................................... 021 1.5.3 图形设计在UI 中的运用 ............................................................. 022 1.5.4 图形设计的方法和步骤 ............................................................... 023 1.6　绘图软件Photoshop 界面工具和功能简述.............................................. 024 1.7　绘图软件Illustrator 界面工具和功能简述 ................................................ 027 1.8　动效软件After Effects 界面工具和功能简述 ........................................... 028 项目2 小学霸英语App 功能图标设计及绘制方法........................................... 030 2.1　功能图标的概念 ...................................................................................... 030 2.2　功能图标范例——已上线 ........................................................................ 030 2.3　功能图标的设计原则 ............................................................................... 032 2.4　功能图标的风格类型 ............................................................................... 035 2.5　功能图标的设计步骤 ............................................................................... 036 2.6　完整项目课堂演示+ 学生实操 小学霸英语App 底部标签栏图标设计及 绘制方法 ................................................................................................. 042 2.6.1 项目相关知识 ............................................................................. 042 2.6.2 项目准备与设计 ......................................................................... 042 2.6.3 项目实施 .................................................................................... 044 2.6.4 项目总结 .................................................................................... 055 2.7　拓展练习 ................................................................................................. 056 项目3 甜在心App 图标设计及绘制方法....................................................... 058 3.1　App 图标的概念 ...................................................................................... 058 3.2　App 图标范例——已上线 ........................................................................ 058 3.3　App 图标的设计原则 ............................................................................... 064 3.4　App 图标的设计步骤 ............................................................................... 064 3.5　完整项目课堂演示+ 学生实操 甜在心App 图标设计及绘制方法 ............ 070 3.5.1 项目相关知识 ............................................................................. 070 3.5.2 项目准备与设计 ......................................................................... 070 3.5.3 项目实施 .................................................................................... 072 3.5.4 项目总结 .................................................................................... 089 3.6　拓展练习 ................................................................................................. 091 项目4 桃兔社交通信App 图标和个人页设计及绘制方法.................................. 092 4.1　色彩的重要性 .......................................................................................... 092 4.2　什么是色彩 ............................................................................................. 092 4.3　色彩搭配方法 .......................................................................................... 096 4.4　优秀的图标和界面配色案例赏析 ............................................................. 099 4.5　使用绘图软件设置色彩 ........................................................................... 101 4.6　完整项目课堂演示+ 学生实操 桃兔社交通信App 图标和个人页设计及 绘制方法 ................................................................................................. 107 4.6.1 项目相关知识 ............................................................................. 107 4.6.2 项目准备与设计 ......................................................................... 108 4.6.3 项目实施 .................................................................................... 109 4.6.4 项目总结 .................................................................................... 124 4.7　拓展练习 ................................................................................................. 125 项目5 怪鱼旅行App 引导页设计及绘制方法..................................................126 5.1　引导页的概念 .......................................................................................... 126 5.2　引导页范例——已上线 ........................................................................... 126 5.3　引导页的设计原则................................................................................... 129 5.4　引导页的类别 .......................................................................................... 130 5.5　引导页的设计步骤................................................................................... 136 5.6　完整项目课堂演示+ 学生实操 怪鱼旅行App 引导页设计及绘制方法 ..... 139 5.6.1 项目相关知识 ............................................................................. 140 5.6.2 项目准备与设计 ......................................................................... 140 5.6.3 项目实施 .................................................................................... 142 5.6.4 项目总结 .................................................................................... 149 5.7　拓展练习 ................................................................................................. 150 项目6 “不期而遇”女装促销Banner 设计及绘制方法....................................152 6.1　Banner 的概念 ........................................................................................ 152 6.2　Banner 的设计原则 ................................................................................. 153 6.3　Banner 的设计步骤 ................................................................................. 155 6.4　完整项目课堂演示+ 学生实操 “不期而遇”女装促销Banner 设计及 绘制方法 ................................................................................................. 163 6.4.1 项目相关知识 ............................................................................. 164 6.4.2 项目准备与设计 ......................................................................... 164 6.4.3 项目实施 .................................................................................... 165 6.4.4 项目总结 .................................................................................... 170 6.5　拓展练习 ................................................................................................. 170 项目7 好又省家装详情页一屏和个人页一屏设计及绘制方法...............................172 7.1　详情页和个人页的概念 ........................................................................... 172 7.2　详情页和个人页范例——已上线 ............................................................. 173 7.3　详情页和个人页的设计原则 .................................................................... 180 7.4　详情页和个人页的设计步骤 .................................................................... 185 7.5　完整项目课堂演示+ 学生实操 好又省家装详情页一屏和个人页一屏设计 及绘制方法 ............................................................................................. 188 7.5.1 项目相关知识 ............................................................................. 188 7.5.2 项目准备与设计 ......................................................................... 188 7.5.3 项目实施 .................................................................................... 191 7.5.4 项目总结 .................................................................................... 194 7.6　拓展练习 ................................................................................................. 195 项目8 “Weather Icons”动态图标设计及绘制方法......................................196 8.1　动态图标的概念 ...................................................................................... 196 8.2　动态图标范例——已上线 ........................................................................ 197 8.3　动态图标的类型 ...................................................................................... 199 8.4　After Effects 操作入门 ............................................................................ 203 8.5　完整项目课堂演示+ 学生实操 “Weather Icons”动态图标设计及 绘制方法 ................................................................................................. 206 8.5.1 项目相关知识 ............................................................................. 208 8.5.2 项目准备与设计 ......................................................................... 208 8.5.3 项目实施 .................................................................................... 208 8.5.4 项目总结 .................................................................................... 215 8.6　拓展练习 ................................................................................................. 216 项目9 怪鱼旅行App 首页版式设计及绘制方法...............................................217 9.1　了解移动端界面版式设计 ........................................................................ 217 9.2　优秀的移动端App 首页版式范例——已上线 .......................................... 217 9.3　App 界面的布局构成 ............................................................................... 219 9.4　App 界面的设计原则 ............................................................................... 229 9.5　App 界面的设计规范 ............................................................................... 231 9.6　完整项目课堂演示+ 学生实操 怪鱼旅行App 首页版式设计及绘制方法 ... 232 9.6.1 项目相关知识 ............................................................................. 232 9.6.2 项目准备与设计 ......................................................................... 233 9.6.3 方案一项目实施 ......................................................................... 233 9.6.4 方案二项目实施 ......................................................................... 248 9.6.5 项目总结 .................................................................................... 249 9.7　拓展练习 ................................................................................................. 250 项目10 怦然乐动App 界面设计及绘制方法...................................................251 10.1　App 界面设计概述 ................................................................................ 251 10.2　项目启动 ............................................................................................... 251 10.3　项目调研与分析 .................................................................................... 252 10.4　系统设计 ............................................................................................... 260 10.5　视觉设计 ............................................................................................... 264 10.6　完整项目课堂演示+ 学生实操 怦然乐动App 界面 设计及绘制方法 ..... 268 10.6.1 项目相关知识 ........................................................................... 268 10.6.2 项目准备与设计 ....................................................................... 268 10.6.3 项目实施 .................................................................................. 268 10.6.4 项目总结 .................................................................................. 271 10.7　拓展练习 ............................................................................................... 272