Figma UI设计技法与实践

Figma作为一款强大的UI设计工具，正在为移动UI设计带来革命性的变革。其强大的功能和直观的界面，使得设计师们能够更加高效、专业地完成设计工作，为用户带来更加优质、流畅的移动应用体验。本书主要讲解对UI设计的基础知识，并针对iOS系统、Android系统和HarmonyOS系统UI设计规范进行讲解。本书将基础知识讲解与项目案例制作相结合，将枯燥的知识点融入丰富有趣的案例制作中，全面解析移动端App UI设计的流程及设计技巧。全书共分为5章，包括Figma基础操作、移动UI设计基础、使用Figma设计iOS系统UI、使用Figma设计Android系统UI和使用Figma设计HarmonyOS系统UI。书中案例均使用最新的UI设计工具Figma进行设计制作。本书配套资源中不但提供了书中所有实例的源文件和素材，还提供了所有实例的多媒体教学视频，以帮助读者轻松掌握Figma移动UI设计，同时还配有本书PPT课件，让新手从零起飞。本书适合UI设计爱好者和移动UI设计从业者阅读，也适合作为各院校相关设计专业的参考教材。

王欣，从事设计工作多年，有丰富的设计和教学经验。熟练掌握各种设计软件，了解设计流程，曾参与多个设计项目的设计和开发工作。对于色彩原理和搭配有独特见解。曾参与多个平面设计和网页设计项目，在多家专业杂志发表专业论文。出版相关图书多本。

第1章Figma基础操作
1.1认识Figma
1.1.1Figma概述
1.1.2Figma在移动UI设计中的优势
1.2Figma的安装与汉化
1.2.1使用在线Figma
1.2.2使用Figma客户端
1.2.3使用本地汉化版Figma
1.3认识Figma的工作界面
1.3.1Figma项目管理界面
1.3.2Figma工作界面详解
1.4使用Figma工具
1.4.1移动工具和缩放工具
1.4.2形状工具
1.4.3钢笔工具
1.4.4文本工具
1.4.5对象的编组操作
1.4.6使用画框
1.5Figma的“设计”面板
1.6使用Figma插件
1.6.1查找并保存Figma插件
1.6.2Figma插件的使用方法
1.7本章小结
1.8课后练习
1.8.1选择题
1.8.2判断题
1.8.3操作题
第2章移动UI设计基础
2.1UI设计概述
2.1.1什么是UI设计
2.1.2UI设计的常用术语
2.1.3UI设计的特点
2.2移动UI设计平台
2.2.1Android系统
2.2.2iOS系统和iPadOS系统
2.2.3HarmonyOS系统
2.2.4Wear OS和Watch OS系统
2.3移动UI项目开发职业划分
2.3.1产品经理
2.3.2项目经理
2.3.3UI设计师
2.3.4开发人员
2.4移动UI设计原则
2.5在Figma中进行图标设计
2.5.1使用Figma基本绘图工具设计简约功能图标
2.5.2使用Figma插件设计App启动图标
2.5.3使用Figma效果功能设计微质感图标
2.6本章小结
2.7课后练习
2.7.1选择题
2.7.2判断题
2.7.3操作题
第3章使用Figma设计iOS系统UI
3.1了解iOS系统
3.1.1网点密度与屏幕密度
3.1.2iOS系统的屏幕分辨率
3.1.3逻辑点与倍图
3.2iOS系统界面和组件尺寸
3.2.1iOS系统UI设计尺寸
3.2.2界面组件尺寸规范
3.3iOS系统字体规范
3.3.1字体
3.3.2字号
3.3.3颜色和字重
3.4iOS系统图标规范
3.5iOS系统按钮规范
3.6iOS系统图片规范
3.6.1图片比例
3.6.2图片格式
3.7iOS系统内容布局规范
3.7.1移动UI排版布局的基础原则
3.7.2常见的布局形式
3.7.3边距和间距设置
3.8关于Figma组件
3.8.1在Figma中创建组件
3.8.2使用Figma组件
3.8.3Figma变体组件的创建与使用
3.9使用Figma制作影视App
3.9.1制作影视App相关组件
3.9.2制作影视App首界面
3.9.3制作影视App影片详情界面
3.9.4制作影视App其他界面
3.10本章小结
3.11课后练习
3.11.1选择题
3.11.2判断题
3.11.3操作题
第4章使用Figma设计Android系统UI
4.1了解Android系统
4.1.1Android系统的发展
4.1.2Android系统的单位
4.1.3Android系统的常用分辨率
4.1.4Android系统的设计尺寸
4.2Android系统UI设计尺寸
4.2.1Android系统的组件尺寸
4.2.2Android系统的元素间距
4.3Android系统字体设计规范
4.3.1字体
4.3.2字号
4.4Android系统图标规范
4.4.1图标类型
4.4.2图标尺寸
4.5移动UI布局设计
4.5.1App界面常见的布局形式
4.5.2卡片式设计与无框设计
4.6Figma布局约束和网格
4.6.1使用Figma布局约束
4.6.2使用Figma布局网格
4.7使用Figma制作旅游App
4.7.1制作旅游App相关组件
4.7.2制作旅游App首界面
4.7.3制作旅游App收藏界面
4.7.4制作旅游App其他界面
4.8本章小结
4.9课后练习
4.9.1选择题
4.9.2判断题
4.9.3操作题
第5章使用Figma设计HarmonyOS系统UI
5.1了解HarmonyOS系统
5.1.1HarmonyOS系统的诞生与特点
5.1.2HarmonyOS与iOS和Android的区别
5.2HarmonyOS系统单位与尺寸
5.2.1HarmonyOS系统的单位
5.2.2HarmonyOS系统的组件尺寸
5.3HarmonyOS系统字体规范
5.3.1字体和字号
5.3.2对齐规则
5.4HarmonyOS系统图标规范
5.4.1图标的大小布局
5.4.2图标的特征
5.5HarmonyOS系统的间距
5.6UI的格式塔原理
5.6.1什么是格式塔原理
5.6.2格式塔原理的六大法则
5.7Figma自动布局
5.8使用Figma制作珠宝电商App
5.8.1制作珠宝电商App相关组件
5.8.2制作珠宝电商App首界面
5.8.3制作珠宝电商App购买界面
5.8.4制作珠宝电商App其他界面
5.9本章小结
5.10 课后练习
5.10.1选择题
5.10.2判断题
5.10.3操作题