从零开始学UI设计:思路与技法电子书

前言

第1章 UI介绍

1.1 什么是UI

1.2 UI设计师就业前景

1.3 UI设计的思路/遵循原则

第2章 图标设计基础

2.1 图标的概念

2.2 图标的分类

2.2.1 启动图标

2.2.2 功能图标

2.3 图标设计原则

2.3.1 识别性原则

2.3.2 统一性原则

2.3.3 差异性原则

2.3.4 原创图标

2.3.5 “潜规则”

2.4 常见图标设计风格

2.4.1 剪影图标

2.4.2 扁平图标

2.4.3 微扁平和轻写实图标

2.4.4 写实风格图标

2.5 图标网格系统

第3章 图标设计进阶

3.1 启动图标

3.1.1 启动图标的灵感来源

3.1.2 常见的几种启动图标设计手法

3.2 功能图标的灵感来源

3.2.1 吉祥物

3.2.2 启动图标特征

3.2.3 VI色

3.2.4 直接引用

3.3 建立统一风格的图标

3.3.1 描边样式

3.3.2 色值

3.3.3 圆角半径

3.3.4 图标大小

3.3.5 使用相同的元素

3.3.6 其他细节

3.4 字体图标

3.4.1 什么是字体图标

3.4.2 如何绘制字体图标

3.5 评估图标的设计质量

3.5.1 识别性

3.5.2 统一性

3.5.3 吸引力

第4章 图标设计实战

4.1 PS中的设置

4.1.1 工具设置

4.1.2 单位与标尺

4.1.3 对齐边缘

4.1.4 钢笔工具

4.1.5 网格和参考线

4.1.6 新建文档

4.2 布尔运算

4.2.1 新建图层

4.2.2 合并形状

4.2.3 减去顶层形状

4.2.4 与形状区域相交

4.2.5 排除重叠形状

4.2.6 合并形状组件

4.3 图标设计流程

4.3.1 设定需求，明确创作方向

4.3.2 头脑风暴，列举关键字

4.3.3 从关键字中联想造型，寻找灵感

4.3.4 手绘草图

4.3.5 软件绘制初稿

4.3.6 确定风格

4.3.7 视觉设计，完善细节

4.3.8 切图输出

4.4 剪影图标的绘制及设计思路

4.5 扁平图标的绘制及设计思路

4.6 微扁平图标/轻写实图标的绘制及设计思路

4.7 写实图标的绘制及设计思路

4.8 节日图标

4.9 关于创作

4.9.1 利用品牌视觉元素

4.9.2 “参考”和“模仿”

4.10 AI导入PS没有虚边

第5章 UI设计基础

5.1 产品思维导图

5.2 主流设计界面介绍

5.3 App页面类型

5.3.1 聚合类

5.3.2 列表类

5.3.3 内容类

5.3.4 功能类

5.4 App包含哪些界面

5.4.1 启动页

5.4.2 引导页

5.4.3 首页

5.4.4 登录/注册

5.4.5 无数据界面

5.4.6 出错界面

5.4.7 反馈界面

5.5 UI界面设计的布局

5.5.1 状态栏

5.5.2 导航栏

5.5.3 主体内容

5.5.4 标签栏

5.5.5 图标设计的规范

5.6 UI界面设计的字体

5.7 UI界面设计的间距

5.7.1 全局边距

5.7.2 卡片间距

5.7.3 内容间距

5.8 UI界面设计的颜色

5.8.1 通过各类App采集色彩

5.8.2 通过Dribbble等网站采集色彩

5.8.3 通过摄影作品采集色彩

5.8.4 从电影中采集色彩

5.8.5 提高审美，增强个人赏析力

5.9 从低保真到高保真

5.10 UI界面的逻辑关系

5.11 UI切图规则

5.11.1 马克鳗

5.11.2 Parker

5.11.3 CUTTERMAN——免费的PS切图插件

5.11.4 Design Mirror——最好用的设计稿手机预览工具

5.11.5 命名规则

5.11.6 Android切图

5.11.7 iOS切图

5.12 信息架构

5.12.1 减少目录级数

5.12.2 功能的排布要有逻辑，分类要清晰，命名要准确、易懂

5.12.3 减少操作次数、减少界面跳转层级

5.12.4 操作要顺畅，界面跳转符合用户心理预期

5.13 视觉层次

5.14 用户研究

5.14.1 用户画像

5.14.2 用户画像制作

5.14.3 用户讨论

5.14.4 前期调查

5.14.5 可行性测试

5.14.6 大数据分析和用户的反馈

5.14.7 使用场景

5.14.8 操作手势

5.14.9 格式塔心理学

5.14.10 情感化设计

5.15 UI交互八原则

第6章 UI设计进阶

6.1 开始做一个产品

6.2 和甲方斗智斗勇

6.3 UI设计的思路

6.3.1 颜色

6.3.2 字体（以下提到的是都在iPhone 5的尺寸下面设计的字号）

6.3.3 分割线

6.3.4 图标

6.3.5 排版

6.4 UI设计配色

6.4.1 UI色彩认知

6.4.2 配色原则

6.4.3 App配色欣赏

6.4.4 配色工具

6.4.5 颜色搭配6-3-1法则

6.4.6 推荐几款有用的颜色工具

6.5 和程序员沟通

6.6 什么是UX

6.7 物理尺寸与视觉尺寸

6.8 视觉对齐与形状

6.9 视觉圆角

第7章 UI设计实战

7.1 绘制思维导图

7.2 设计UI低保真界面

7.3 设计UI高保真界面

第8章 PS视频时间轴动画

8.1 帧的概念

8.2 视频时间轴面板介绍

8.2.1 播放控件

8.2.2 音频播放控制按钮

8.2.3 设置按钮

8.2.4 在播放头处拆分

8.2.5 过渡效果

8.2.6 当前时间指示器

8.2.7 时间标尺

8.2.8 工作区域指示器

8.2.9 面板选项卡

8.2.10 向轨道添加媒体

8.2.11 图层持续时间条

8.2.12 向轨道添加音频

8.2.13 时间轴视图缩放控件

8.2.14 帧速率

8.2.15 当前时间

8.2.16 渲染视频

8.2.17 转为帧动画

8.2.18 关键帧导航器

8.2.19 启用/移除关键帧

8.2.20 折叠/展开图层关键帧选项

8.3 为什么要做动画？

8.4 小汽车动画（位移动画）

8.5 消失的飞碟（不透明度动画）

8.6 凹陷的掌印（图层样式动画）

8.7 loading加载（缩放动画）

8.8 找找找（蒙版动画）

8.9 镜头切换（过渡动画）

8.10 播放器动画（综合案例）

8.10.1 思路构想

8.10.2 软件实现

第9章 PS帧动画

9.1 面板介绍

9.2 “吐司小哥”表情包设计

9.2.1 思路构想

9.2.2 软件实现

第10章 UI设计也要小插画

10.1 插画的概念

10.2 插画灵感的获取

10.2.1 采集

10.2.2 重构

10.3 Adobe.Illustrator简介

10.3.1 工作界面（本文中的AI版本为CC 2018）

10.3.2 文档新建和输出

10.3.3 钢笔工具

10.3.4 剪刀工具

10.3.5 形状工具

10.3.6 吸管工具

10.3.7 混合工具

10.3.8 渐变工具

10.3.9 对齐面板

10.3.10 变换面板

10.3.11 路径查找器

10.3.12 图像描摹

10.3.13 实时上色

10.4 信手拈来的素材——写生

10.5 宁波街景——重构在插画中的运用

10.6 办公室的爱恋——让小插画富有故事性

10.7 可爱的耳环——重构和写生的结合

10.8 如何让插画形成系列

10.8.1 《带你去旅行》

10.8.2 《小红帽的冰雪之旅》

10.8.3 《假如我是老板》

10.8.4 假面骑士Redesign（再设计）

10.9 对插画的补充

10.9.1 不可忽视的绘画能力

10.9.2 练习手绘的好处

10.9.3 透视

写在结尾的一些话

参考文献