新印象——解构UI界面设计电子书

内容提要

推荐

前言

第1章 界面类型

1.1 闪屏页

1.1.1 品牌宣传型

1.1.2 节假关怀型

1.1.3 活动推广型

1.2 引导页

1.2.1 功能介绍型（基础型）

1.2.2 情感带入型（中级型）

1.2.3 搞笑型（高级型）

1.3 浮层引导页

1.4 空白页

1.4.1 首次进入型

1.4.2 错误提示型

1.5 首页

1.5.1 列表型

1.5.2 图标型

1.5.3 卡片型

1.5.4 综合型

1.6 个人中心页

1.7 列表页

1.7.1 单行列表

1.7.2 双行列表

1.7.3 时间轴

1.7.4 图库列表

1.8 播放页面

1.9 详情页

1.10 可输入页面

1.11 实战：两步打造炫酷界面

1.11.1 绘制基础图形

1.11.2 添加颜色与细节

第2章 界面构图

2.1 九宫格构图

案例分析

2.2 圆心放射构图

案例分析

2.3 三角形构图

案例分析

2.4 S形构图

案例分析

2.5 F形构图

案例分析

2.6 实战：用多种构图方式制作运动App

2.6.1 用放射构图设计运动页面

2.6.2 用倒三角形构图设计地图页面

2.6.3 用三角形构图设计个人页面

第3章 版面布局

3.1 界面版率

3.1.1 单色块填充

3.1.2 多色块组合

3.1.3 穿插填充

3.1.4 关键词图形化

3.1.5 放大文字

3.2 抠图法

案例分析

3.3 破界法

案例分析

3.4 局部提取

案例分析

3.5 对齐原则

3.5.1 界面中常用的对齐方式

3.5.2 小米的登录页

3.5.3 苹果的登录页

3.6 间距使用

案例分析

3.7 视觉层次

案例分析

3.8 实战：设计智能空气净化器界面

3.8.1 对页面进行整体布局

3.8.2 设计“较差”页面

3.8.3 设计“良好”页面

第4章 元素之道

4.1 点线面

案例分析

4.2 极简至上

案例分析

4.3 品牌灵魂

案例分析

4.4 形象灵魂化

案例分析

4.5 运动赋予生命

案例分析

4.6 菜单设定

案例分析

4.7 实战：快速制作晶格化界面

4.7.1 制作圆形头像

4.7.2 制作晶格背景

4.7.3 制作界面细节

第5章 『色诱』用户

5.1 感知色彩

5.1.1 红色

5.1.2 橙色

5.1.3 黄色

5.1.4 绿色

5.1.5 蓝色

5.1.6 粉色

5.1.7 黑色

5.2 色不过三

案例分析

5.3 主色、辅助色及点睛色

5.3.1 主色

5.3.2 辅助色

5.3.3 点睛色

5.4 如何配色

5.4.1 互补色搭配

5.4.2 冷暖对比搭配

5.5 实战：设计一款色彩统一的界面

5.5.1 设计页面图标

5.5.2 设计个人中心页

5.5.3 设计聊天页面

第6章 设计原则及规范

6.1 iOS的五大设计原则

6.1.1 凸显内容原则

6.1.2 统一化原则

6.1.3 适应化原则

6.1.4 层级性原则

6.1.5 易操作性原则

6.2 iOS界面尺寸及控件设计规范

6.2.1 界面尺寸

6.2.2 控件规范

6.3 Android设计原则及规范

6.3.1 Android的设计原则

6.3.2 Android的控件设计规范

6.3.3 Android的设计尺寸及单位

6.4 常用字体规范

6.4.1 成也字，败也字

6.4.2 字不过三

案例分析

6.4.3 字与背景要分明

6.4.4 字体与气氛要匹配

案例分析

6.4.5 常用字体类型

6.4.6 界面字体规范

6.4.7 字体常用颜色

6.5 建立一套设计规范

6.5.1 色彩控件规范

6.5.2 按钮控件规范

6.5.3 分割线规范

6.5.4 头像规范

6.5.5 提示框规范

6.5.6 文字规范

6.5.7 间距规范

6.5.8 图标规范

6.6 实战：打造毛笔字风格的登录页

6.6.1 制作基础字体

6.6.2 用笔刷设计细节

第7章 切图与标注

7.1 高效切图

7.1.1 iPhone屏幕与Android手机屏幕的关系

7.1.2 Android的常用单位

7.1.3 通用切图法

7.1.4 Android“点九”切图法

7.2 界面标注

7.2.1 标注软件

7.2.2 标注规范

7.3 实战：为一款首页界面切图

7.3.1 切图分析

7.3.2 iOS切图

7.3.3 Android切图

第8章 图标设计

8.1 图标创意

8.1.1 卡通形象化

8.1.2 关键词图形化

8.1.3 字体直观化

案例分析

8.2 图标类型

8.2.1 像素图标

案例分析

8.2.2 拟物化图标

8.2.3 扁平化图标

案例分析

8.2.4 线性图标

案例分析

8.2.5 立体图标

案例分析

8.3 实战：绘制功能图标

8.3.1 功能图标设计规范

8.3.2 功能图标绘制过程

8.4 实战：制作立体图标

8.4.1 制作透视网格

8.4.2 制作立体字

8.4.3 制作灯泡

8.4.4 制作光晕

8.5 实战：快速制作线条流畅的Logo

8.5.1 制作Logo形状的辅助线

8.5.2 生成Logo路径形状

8.5.3 将辅助线设置为虚线

第9章 高端艺术二维码

9.1 原理结构

9.2 动态二维码的表现

9.2.1 MICU二维码——航行

9.2.2 MICU二维码——音乐节

9.2.3 MICU二维码——清凉夏日

9.2.4 MICU二维码——UI疫苗站

9.2.5 MICU二维码——设计乐园

案例分析

9.3 实战：制作宝马春节艺术二维码

9.3.1 制作原码

9.3.2 设计二维码

9.3.3 制作动效

9.4 实战：快速制作界面动态展示图

9.4.1 导入GIF并转为智能对象

9.4.2 制作透视展示图