新印象 解构UI界面设计

第 1章 界面类型/ 009
1．1 闪屏页\t010
1．1．1 品牌宣传型/\t010
1．1．2 节假关怀型/\t011
1．1．3 活动推广型/\t012
1．2 引导页\t013
1．2．1 功能介绍型（基础型）/\t013
1．2．2 情感带入型（中级型）/\t014
1．2．3 搞笑型（高级型）/\t015
1．3 浮层引导页/\t016
1．4 空白页/\t017
1．4．1 首次进入型/\t017
1．4．2 错误提示型/\t018
1．5 首页/\t019
1．5．1 列表型/\t019
1．5．2 图标型/\t020
1．5．3 卡片型/\t020
1．5．4 综合型/\t021
1．6 个人中心页/\t022
1．7 列表页/\t024
1．7．1 单行列表/\t024
1．7．2 双行列表/\t025
1．7．3 时间轴/\t025
1．7．4 图库列表/\t026
1．8 播放页面/\t027
1．9 详情页/\t028
1．10 可输入页面/\t029
1．11 实战：两步打造炫酷界面/\t030
1．11．1 绘制基础图形/\t030
1．11．2 添加颜色与细节/\t032
第 2章 界面构图/ 035
2．1 九宫格构图/\t036
案例分析/\t037
2．2 圆心放射构图/\t038
案例分析/\t039
2．3 三角形构图/\t041
案例分析/\t041
2．4 S形构图/\t043
案例分析/\t044
2．5 F形构图/\t047
案例分析/\t047
2．6 实战：用多种构图方式制作运动App/\t048
2．6．1 用放射构图设计运动页面/\t048
2．6．2 用倒三角形构图设计地图页面/\t053
2．6．3 用三角形构图设计个人页面/\t056
第3章 版面布局/ 059
3．1 界面版率/\t060
3．1．1 单色块填充/\t061
3．1．2 多色块组合/\t062
3．1．3 穿插填充/\t062
3．1．4 关键词图形化/\t063
3．1．5 放大文字/\t064
3．2 抠图法/\t065
案例分析/\t065
3．3 破界法/\t066
案例分析/\t066
3．4 局部提取/\t069
案例分析/\t069
3．5 对齐原则/\t070
3．5．1 界面中常用的对齐方式/\t070
3．5．2 小米的登录页/\t072
3．5．3 苹果的登录页/\t073
3．6 间距使用/\t074
案例分析/\t074
3．7 视觉层次/\t077
案例分析/\t077
3．8 实战：设计智能空气净化器界面/080
3．8．1 对页面进行整体布局/\t080
3．8．2 设计“较差”页面/\t082
3．8．3 设计“良好”页面/\t086
第4章 元素之道/ 087
4．1 点线面/\t088
案例分析/\t088
4．2 极简至上/\t093
案例分析/\t093
4．3 品牌灵魂/\t095
案例分析/\t095
4．4 形象灵魂化/\t096
案例分析/\t096
4．5 运动赋予生命/\t099
案例分析/\t099
4．6 菜单设定/\t100
案例分析/\t100
4．7 实战：快速制作晶格化界面/\t101
4．7．1 制作圆形头像/\t101
4．7．2 制作晶格背景/\t102
4．7．3 制作界面细节/\t104
第5章 “色诱”用户/ 107
5．1 感知色彩/\t108
5．1．1 红色/\t109
5．1．2 橙色/\t110
5．1．3 黄色/\t110
5．1．4 绿色/\t111
5．1．5 蓝色/\t111
5．1．6 粉色/\t112
5．1．7 黑色/\t112
5．2 色不过三/\t113
案例分析/\t113
5．3 主色、辅助色及点睛色/\t116
5．3．1 主色/\t116
5．3．2 辅助色/\t117
5．3．3 点睛色/\t118
5．4 如何配色/\t119
5．4．1 互补色搭配/\t119
5．4．2 冷暖对比搭配/\t121
5．5 实战：设计一款色彩统一的界面/123
5．5．1 设计页面图标/\t123
5．5．2 设计个人中心页/\t128
5．5．3 设计聊天页面/\t132
第6章 设计原则及规范/135
6．1 iOS的五大设计原则/\t136
6．1．1 凸显内容原则/\t137
6．1．2 统一化原则/\t139
6．1．3 适应化原则/\t140
6．1．4 层级性原则/\t144
6．1．5 易操作性原则/\t145
6．2 iOS界面尺寸及控件设计规范/\t147
6．2．1 界面尺寸/\t147
6．2．2 控件规范/\t149
6．3 Android设计原则及规范/\t154
6．3．1 Android的设计原则/\t154
6．3．2 Android的控件设计规范/\t158
6．3．3 Android的设计尺寸及单位/\t163
6．4 常用字体规范/\t165
6．4．1 成也字，败也字/\t165
6．4．2 字不过三/\t166
案例分析/\t166
6．4．3 字与背景要分明/\t168
6．4．4 字体与气氛要匹配/\t168
案例分析/\t168
6．4．5 常用字体类型/\t169
6．4．6 界面字体规范/\t172
6．4．7 字体常用颜色/\t174
6．5 建立一套设计规范/\t175
6．5．1 色彩控件规范/\t176
6．5．2 按钮控件规范/\t177
6．5．3 分割线规范/\t177
6．5．4 头像规范/\t177
6．5．5 提示框规范/\t178
6．5．6 文字规范/\t179
6．5．7 间距规范/\t180
6．5．8 图标规范/\t181
6．6 实战：打造毛笔字风格的登录页/182
6．6．1 制作基础字体/\t182
6．6．2 用笔刷设计细节/\t184
第7章 切图与标注/ 189
7．1 高效切图/\t190
7．1．1 iPhone屏幕与Android手机屏幕的关系/\t190
7．1．2 Android的常用单位/\t191
7．1．3 通用切图法/\t192
7．1．4 Android“点九”切图法/\t194
7．2 界面标注/\t197
7．2．1 标注软件/\t197
7．2．2 标注规范/\t198
7．3 实战：为一款首页界面切图/\t201
7．3．1 切图分析/\t201
7．3．2 iOS切图/\t203
7．3．3 Android切图/\t205
第8章 图标设计/ 207
8．1 图标创意/\t208
8．1．1 卡通形象化/\t208
8．1．2 关键词图形化/\t208
8．1．3 字体直观化/\t209
案例分析/\t209
8．2 图标类型/\t210
8．2．1 像素图标/\t210
案例分析/\t211
8．2．2 拟物化图标/\t212
8．2．3 扁平化图标/\t212
案例分析/\t214
8．2．4 线性图标/\t215
案例分析/\t215
8．2．5 立体图标/\t217
案例分析/\t217
8．3 实战：绘制功能图标/\t219
8．3．1 功能图标设计规范/\t219
8．3．2 功能图标绘制过程/\t220
8．4 实战：制作立体图标/\t227
8．4．1 制作透视网格/\t227
8．4．2 制作立体字/\t228
8．4．3 制作灯泡/\t229
8．4．4 制作光晕/\t230
8．5 实战：快速制作线条流畅的Logo/231
8．5．1 制作Logo形状的辅助线/\t231
8．5．2 生成Logo路径形状/\t232
8．5．3 将辅助线设置为虚线/\t234
第9章 高端艺术二维码/ 235
9．1 原理结构/\t236
9．2 动态二维码的表现/\t239
9．2．1 MICU二维码——航行/\t239
9．2．2 MICU二维码——音乐节/\t240
9．2．3 MICU二维码——清凉夏日/\t241
9．2．4 MICU二维码——UI疫苗站/\t241
9．2．5 MICU二维码——设计乐园/\t242
案例分析/\t242
9．3 实战：制作宝马春节艺术二维码/245
9．3．1 制作原码/\t245
9．3．2 设计二维码/\t246
9．3．3 制作动效/\t249
9．4 实战：快速制作界面动态展示图/253
9．4．1 导入GIF并转为智能对象/\t253
9．4．2 制作透视展示图/\t254