新增AI技术，辅助制作UI界面 精选基础知识，快速了解UI设计，内容适合教学 改版更新案例，案例选取贴近教学实际 知识点解析十课堂案例，熟悉设计思路，掌握制作方法 配套资源丰富，帮助教师和学生更好的教学和学习

本书全面、系统地介绍UI 设计的相关知识点和基本设计技巧，包括初识UI 设计、图标设计、App界面设计、网页界面设计、软件界面设计和游戏界面设计等内容。?本书除第1 章外，其他章的内容均以知识点讲解和课堂案例为主线。知识点讲解部分可以使读者系统地了解UI 设计的各类知识，课堂案例部分可以使读者快速掌握UI 设计流程并能完成案例制作。第2章至第6 章的最后还安排了课堂练习、课后习题和AI 扩展案例,课堂练习和课后习题能拓展读者对UI设计的实际应用能力；AI 扩展案例可以在案例制作中巧妙融入AI 技术，辅助完成设计。王京晶，北京印刷学院新媒体学院任教17年，主要教学课程视觉表现软件基础、数字媒体软件基础、视听语言、影视广告设计等；组织学生参加中国大学生广告艺术学院奖、北京科普新媒体创新大赛等各种比赛，通过比赛提高学生的实践经验。第 1章 初识UI设计?1.1 UI设计基础??????????2?1.1.1 UI设计的概念? ??????2?1.1.2 WUI和GUI????????2?1.1.3 UI设计常用术语中?英文对照? ????????3?1.2 UI设计的常用软件???????3?1.3 UI设计的项目流程???????4?1.3.1 项目设计流程? ??????4?1.3.2 UI设计流程? ???????4?1.4 UI设计的风格?????????5?1.4.1 拟物化风格? ???????6?1.4.2 扁平化风格? ???????6?1.5 UI设计的行业现状及发展趋势??6?1.5.1 UI设计行业现状? ?????6?1.5.2 UI设计发展趋势? ?????9?1.6 UI设计的学习方法???????9?1.7 AI扩展阅读 ?????????11?1.7.1 AI扩展知识1——AI辅助?UI设计的常用工具? ????11?1.7.2 AI扩展知识2——AI辅助?UI设计的流程? ??????11?第 2章 图标设计?2.1 图标的基础知识????????13?2.1.1 图标的概念? ???????13?2.1.2 图标设计的流程? ?????13?2.1.3 图标设计的原则? ?????15?2.2 图标的设计规范????????18?2.2.1 图标的尺寸及单位? ????18?2.2.2 图标的视觉统一? ?????21?2.2.3 图标的清晰度? ??????21?2.3 图标的风格??????????22?2.3.1 拟物化风格? ???????22?2.3.2 扁平化风格? ???????22?2.3.3 3D风格? ????????23?2.3.4 2.5D风格?????????23?2.4 课堂案例——绘制扁平化风格的?面性图标???????????24?2.5 课堂练习???????????29?2.5.1 课堂练习——绘制扁平化风格?的不透明色块面性图标???29?2.5.2 课堂练习——绘制扁平化风格?的微渐变面性图标? ????30?2.6 课后习题???????????30?2.6.1 课后习题——绘制扁平化风格?的光影效果图标? ?????30?目 录?2.6.2 课后习题——绘制扁平化风格?的折纸投影图标? ?????31?2.7 AI助学图标设计???????31?2.7.1 AI助学——即梦AI生成?3D风格图标? ??????31?2.7.2 AI助学——豆包生成?2.5D风格图标? ?????32?第3章 App界面设计?3.1 App界面设计的基础知识???34?3.1.1 App的概念? ??????34?3.1.2 App界面设计的流程? ??34?3.1.3 App界面设计的原则? ??36?3.2 App界面的设计规范?????38?3.2.1 iOS界面的设计规范????38?3.2.2 Android界面的设计规范??43?3.3 App常用的界面类型?????47?3.3.1 引导页??????????47?3.3.2 闪屏页??????????48?3.3.3 首页???????????48?3.3.4 详情页??????????50?3.3.5 个人中心页????????51?3.3.6 注册登录页????????51?3.4 课堂案例——制作畅游旅游?App界面??????????52?3.4.1 课堂案例——制作畅游旅游?App引导页? ??????52?3.4.2 课堂案例——制作畅游旅游?App闪屏页? ??????56?3.4.3 课堂案例——制作畅游旅游?App首页? ???????57?3.4.4 课堂案例——制作畅游旅游?App酒店详情页? ????68?3.4.5 课堂案例——制作畅游旅游?App个人中心页? ????88?3.4.6 课堂案例——制作畅游旅游?App登录页? ??????98?3.5 课堂练习——制作潮货电商?App界面?????????105?3.6 课后习题——制作三餐美食?App界面?????????106?3.7 AI助学——妙多AI制作悦途旅游?App界面?????????107?第4章 网页界面设计?4.1 网页界面设计的基础知识???110?4.1.1 网页界面设计的概念? ??110?4.1.2 网页界面设计的流程? ??110?4.1.3 网页界面设计的原则? ??112?4.2 网页界面的设计规范?????114?4.2.1 网页界面设计的?单位及尺寸? ??????114?4.2.2 网页界面设计的界面结构??117?4.2.3 网页界面设计的布局? ??117?4.2.4 网页界面设计的文字? ??120?4.2.5 网页界面设计的图标? ??123?4.3 网页常用的界面类型?????126?4.4 课堂案例——制作东方木品家居?电商网站界面????????129?4.4.1 课堂案例——制作东方木品?家居电商网站首页? ???129?4.4.2 课堂案例——制作东方木品家?居电商网站产品列表页???149?4.4.3 课堂案例——制作东方木品家?居电商网站产品详情页??158?4.5 课堂练习——制作一点生活家居?电商网站界面????????166?4.6 课后习题——制作臻艺装饰家居?电商网站界面????????167?4.7 AI助学——MasterGO制作尚?家家居电商网站界面?????167?第5章 软件界面设计?5.1 软件界面设计的基础知识???170?5.1.1 软件界面设计的概念? ??170?5.1.2 软件界面设计的流程? ??170?5.1.3 软件界面设计的原则? ??173?5.2 软件界面的设计规范?????174?5.2.1 软件界面设计的单位及?尺寸? ?????????174?5.2.2 软件界面设计的界面结构??175?5.2.3 软件界面设计的布局? ??176?5.2.4 软件界面设计的文字? ??179?5.2.5 软件界面设计的图标? ??181?5.3 软件常用的界面类型?????185?5.4 课堂案例——制作天籁音乐?播放器软件界面???????188?5.4.1 课堂案例——制作天籁音乐?播放器软件首页? ????188?5.4.2 课堂案例——制作天籁音乐?播放器软件歌单页? ???203?5.4.3 课堂案例——制作天籁音乐?播放器软件歌曲列表页??208?5.5 课堂练习——制作不凡音乐?播放器软件界面???????216?5.6 课后习题——制作酷听音乐?播放器软件界面???????217?5.7 AI助学——MasterGO制作律动?音乐播放器软件界面?????217?第6章 游戏界面设计?6.1 游戏界面设计的基础知识???220?6.1.1 游戏界面设计的概念? ??220?6.1.2 游戏界面设计的流程? ??220?6.1.3 游戏界面设计的原则? ??222?6.2 游戏界面的设计规范?????224?6.2.1 游戏界面设计的单位及?尺寸? ????????? 224?6.2.2 游戏界面设计的界面结构? 225?6.2.3 游戏界面设计的类型和?布局? ????????? 225?6.2.4 游戏界面设计的文字? ?? 229?6.2.5 游戏界面设计的图标? ?? 229?6.3 课堂案例——制作果蔬消消消?游戏界面??????????230?6.4 课堂练习——制作糖果消消乐?游戏界面??????????238?6.5 课后习题——制作开心连连看?游戏界面??????????239?6.6 AI 助学——妙多AI 制作美味?消消乐游戏界面???????239