第1章
初识移动UI设计 1
1.1 认识移动UI设计 2
1.1.1 UI设计的相关概念 2
1.1.2 移动UI设计的概念 2
1.1.3 移动UI设计的特点 3
1.1.4 移动UI设计的原则 4
1.1.5 移动UI设计的常用软件 7
1.1.6 移动UI设计的学习方法 13
1.2 认识App 14
1.2.1 App的基本概念 14
1.2.2 App的操作平台 15
1.2.3 App的设计流程 15
1.2.4 App的基本分类 17
第2章
移动UI设计规范 22
2.1 iOS界面设计规范 23
2.1.1 iOS界面设计尺寸 23
2.1.2 iOS界面结构 25
2.1.3 iOS界面基本布局 26
2.1.4 iOS界面图标规范 28
2.1.5 iOS界面文字规范 30
2.2 Android界面设计规范 31
2.2.1 Android界面设计尺寸 31
2.2.2 Android界面结构 33
2.2.3 Android界面基本布局 33
2.2.4 Android界面图标规范 35
2.2.5 Android界面文字规范 39
第3章
iOS界面设计 41
3.1 栏 42
3.1.1 状态栏 42
3.1.2 导航栏 42
3.1.3 课堂案例—制作电商类App的导航栏 44
3.1.4 搜索栏 49
3.1.5 标签栏 50
3.1.6 课堂案例—制作电商类App的标签栏 50
3.1.7 工具栏 57
3.1.8 课堂案例—制作电商类App的工具栏 57
3.2 视图 62
3.2.1 操作列表 62
3.2.2 活动视图 63
3.2.7 页面浏览控制器 65
3.2.8 弹出框 66
3.2.9 课堂案例—制作电商类App的弹出框 66
3.2.10 滚动视图 74
3.2.11 分屏视图 74
3.2.12 表单视图 74
3.2.13 文本视图 75
3.2.14 网络视图 75
3.3 控件 76
3.3.1 按钮 76
3.3.2 课堂案例—制作电商类App的按钮 77
3.3.3 编辑菜单 80
3.3.4 标签 80
3.3.5 页面 81
3.3.6 课堂案例—制作电商类App的页面 81
3.3.7 选择器 83
3.3.8 进度指示器 84
3.3.9 刷新 85
3.3.10 分段 85
3.3.11 课堂案例—制作电商类App的步进器 90
3.3.15 开关 94
3.3.16 文本框 94
3.3.17 课堂案例—制作电商类App的开关及文本框 94
3.4 课堂练习—制作电商类App的登录页 99
3.5 课后习题—制作电商类App的详情页 99
第4章
Android界面设计 101
4.1 栏 102
4.1.1 状态栏 102
4.1.2 系统导航栏 102
4.2 组件 102
4.2.1 底部应用栏 102
4.2.2 顶部应用栏 105
4.2.3 课堂案例—制作家具类App的顶部应用栏 107
4.2.4 背板 110
4.2.5 横幅 112
底部导航 118
4.2.9 按钮 124
4.2.10 课堂案例—制作家具类App的按钮 126
4.2.11 悬浮动作按钮 129
4.2.12 课堂案例—制作家具类App的悬浮动作按钮 130
4.2.13 卡片 133
4.2.14 课堂案例—制作家具类App的卡片 135
4.2.15 纸片 140
4.2.16 数据表 142
4.2.17 对话框 144
4.2.18 分隔线 145
4.2.19 课堂案例—制作家具类App的分各线 147
4.2.20 图片组 151
4.2.21 列表 152
4.2.22 菜单 156
4.2.23 抽屉式导航 158
4.2.24 状态指引 160
4.2.25 选择控件 161
4.2.26 课堂案例—制作家具类App的选择控件 162
4.2.27 底部面板 165
4.2.28 侧面板 166
4.2.29 滑块 167
4.2.30 底部提示栏 168
4.2.31 选项卡 169
4.2.32 文本框 171
4.2.33 课堂案例—制作家具类App的文本框 172
4.2.34 提示 175
4.3 课堂练习—制作家具类App的个人中心页 176
4.4 课后习题—制作家具类App购物车页 176
第5章
App界面设计实战 178
5.1 闪屏页 179
5.1.1 品牌推广型 179
5.1.2 活动广告型 179
5.1.3 节日关怀型 180
5.2 引导页 181
5.2.1 功能说明型 181
5.2.2 产品推广型 181
5.2.3 搞笑卖萌型 181
5.3 首页 182
5.3.1 列表型 182
5.3.2 网格型 182
5.3.3 卡片型 183
5.3.4 综合型 183
5.4 个人中心页 184
5.5 详情页 184
5.6 注册登录页 185
5.7 课堂案例—制作“侃侃”App 185
5.8 课堂练习—制作“美食来了”App 226
5.9 课后习题—制作“Circle”App 227