Photoshop 移动UI设计基础与案例教程

第1章

初入移动UI设计的世界 015

1.1 认识移动UI设计 016

1.1.1 什么是移动UI设计 016

1.1.2 移动UI设计的目的和重要性 017

1.1.3 平面设计和移动UI的不同 018

1.1.4 移动UI设计的重要元素 019

1.2 移动UI设计的原则 020

1.2.1 功能决定界面设计风格 020

1.2.2 界面设计要统一 020

1.2.3 界面设计要清晰 021

1.2.4 界面设计内容要实用 022

1.2.5 界面设计要有层次感 022

1.3 移动设备的主流平台 023

1.3.1 iOS系统平台 023

1.3.2 Android系统平台 027

1.3.3 其他系统平台 028

第2章

设计优秀移动UI的条件 029

2.1 移动UI设计常用软件 030

2.1.1 Photoshop 030

2.1.2 Illustrator 031

2.1.3 3ds Max 032

2.2 移动UI设计常用图像格式 033

2.2.1 JPEG格式 033

2.2.2 PNG格式 033

2.2.3 GIF格式 034

2.2.4 有损压缩与无损压缩 034

2.3 移动设备的尺寸标准 035

2.3.1 英寸 035

2.3.2 分辨率 035

2.3.3 屏幕密度 036

2.3.4 图标尺寸大小 036

2.4 移动UI的设计布局和分类 038

2.4.1 界面设计的布局 038

2.4.2 界面设计的分类 039

2.5 移动UI的色彩搭配 042

2.5.1 色彩的心理效应 042

2.5.2 色彩的搭配原则 042

2.6 如何制作出优秀的移动UI 044

2.6.1 设计的UI与常规思维保持一致 044

2.6.2 用户能自由操作界面 044

2.6.3 对用户群的了解 045

2.6.4 设计要做到简约 046

2.6.5 UI的文本清晰 047

2.7 移动UI设计的流程 048

2.7.1 设计前的交流讨论 048

2.7.2 草图设计 048

2.7.3 用软件绘制界面 049

2.8 如何提升自己的设计能力 050

2.8.1 保证绘制图形的形状 050

2.8.2 美术基础 050

2.8.3 对色彩的敏感度 050

2.8.4 视觉体验 051

2.8.5 精细的细节 052

第3章

移动UI的基本绘制 053

3.1 基础图形的绘制 054

3.1.1 选框工具 054

3.1.2 形状工具 055

实战：使用矩形工具绘制移动地图图标 055

实战：使用圆角矩形工具绘制计算器图标 057

实战：使用椭圆工具绘制音乐图标 058

实战：使用多种工具绘制移动UI图标 059

3.1.3 钢笔工具 060

实战：使用钢笔工具绘制天气图标 060

3.2 必知的三大功能 062

3.2.1 文字工具 062

3.2.2 渐变工具 062

3.2.3 蒙版 063

3.3 **的样式效果 064

3.3.1 斜面与浮雕 064

3.3.2 描边 065

3.3.3 内阴影 065

3.3.4 渐变叠加 065

3.3.5 图案叠加 066

3.3.6 外发光 066

3.3.7 投影 066

3.4 添加画面质感 067

3.4.1 模糊 067

3.4.2 杂色 067

实战：制作翻页日历图标 068

第4章

移动UI的控件制作 077

4.1 常见控件的制作 078

4.1.1 图标 078

实战：制作图标 079

4.1.2 状态栏 080

实战：制作状态栏 080

4.1.3 导航栏 082

实战：制作导航栏 083

4.1.4 工具栏 084

实战：制作工具栏 084

4.1.5 标签栏 085

实战：制作标签栏 086

4.1.6 搜索栏 087

实战：制作搜索栏 087

4.1.7 选择栏 088

实战：制作选择栏 088

4.1.8 滚动条 090

实战：制作滚动条 091

4.1.9 切换器 092

实战：制作切换器 093

4.2 控件构成界面的制作 096

4.2.1 Assistive touch按钮 096

实战：制作Assistive touch按钮 096

4.2.2 3D Touch 099

实战：制作3D Touch 099

4.2.3 iOS 9上拉菜单 101

实战：制作iOS 9上拉菜单 101

第5章

不同平台的控件设计 103

5.1 iOS系统的发展及标准 104

5.1.1 iOS系统的发展 104

5.1.2 iOS的控件构成和尺寸 106

5.2 iOS系统的控件特点 108

5.2.1 界面美观 108

5.2.2 一致性 108

5.2.3 控制 108

5.2.4 反馈 108

5.2.5 设计元素 109

5.3 iOS控件界面设计 110

实战：制作通知界面 110

实战：制作iOS 10上拉界面 114

实战：制作音乐上拉界面 118

5.4 Android系统的界面元素 122

5.5 Android系统的控件特点 122

5.5.1 设计原则 122

5.5.2 风格 122

5.5.3 Android的控件构成和尺寸 124

5.6 Android控件界面设计 125

实战：制作闹钟设置界面 125

实战：制作社交界面 130

实战：制作设置界面 134

第6章

不同风格的UI设计 141

6.1 小清新风格手机界面 142

6.2 时尚风格手机界面 147

6.3 可爱风格手机界面 154

6.4 手绘风格手机界面 156

6.5 卡通风格手机界面 162

6.6 方格风格手机界面 167

6.7 扁平化风格手机界面 171

6.8 线性风格手机界面 181

第7章

iOS界面设计 197

7.1 扁平化风格界面 198

7.1.1 iOS应用主界面 198

7.1.2 iOS应用评论界面 202

7.1.3 iOS侧边选项栏 204

7.2 冷色系风格界面 206

7.2.1 iOS音乐界面 206

7.2.2 iOS日历界面 211

第8章

Android界面设计 219

8.1 线稿风格界面 220

8.1.1 Android主界面 220

8.1.2 Android拨号界面 224

8.2 创意风格界面 228

8.2.1 Android锁屏界面 228

8.2.2 Android菜单界面 235