WoW!移动UI视觉设计全攻略

WoW!移动UI视觉设计全攻略

分享

作者: 侯志刚著 , 薛聪锐著

出版社: 人民邮电出版社

出版时间: 2015-02

版次: 1

ISBN: 9787115369253

定价: 79.00

装帧: 平装

开本: 16开

纸张: 胶版纸

页数: 340页

正文语种: 简体中文

分类: 计算机与互联网

5 张插图图片

16人买过

　　《WoW！移动UI视觉设计全攻略》移动UI视觉设计，是以移动设备为操作平台，对移动设备中使用的界面进行视觉设计，在创作中赋予界面情感意义，激起使用者的兴趣。视觉设计包括对界面进行风格设定、色彩搭配和功能布局等多个内容，为界面创作出华丽而实用的外衣。　　WoW！移动UI视觉设计全攻略通过对移动设备三大主流操作系统的UI视觉设计的风格进行分析，讲解了APP用户界面的设计思路和制作过程，其中第1部分为基础篇，讲述了与移动设备相关的基础概念，以及Photoshop的绘图功能和修饰技巧；第2部分为入门篇，讲述了图标、按钮和滑块这三种基础的界面元素的设计和创作要点；第3部分为进阶篇，讲述了时间界面、播放器界面、浏览器界面、游戏界面和锁屏界面的设计要领和技巧；第4部分为提升篇，以项目要求的形式提出设计的内容，根据要求来对界面进行布局、配色和风格设定，展示给读者一个完整的APP界面的视觉设计流程。　　附带的学习资源包含书中所有案例的源文件和教学视频，方便读者学习使用。《WoW！移动UI视觉设计全攻略》特别适合移动设备UI视觉设计的初学者，同时对Photoshop使用者、平面设计师和APP开发设计人员也有参考价值。导读 9
01  互联网产品的设计 9
02  扁平化设计思想对移动UI视觉设计的影响 12
03  移动UI视觉设计的要点 13
第1部分·基础篇 15
第1章  *为移动UI视觉设计铺路
—入门必备 15
1．1  移动UI的基础概念 16
1．1．1  什么是移动UI 16
1．1．2  移动UI的应用范围 17
1．1．3  APP与UI视觉设计的关系 17
1．1．4  移动UI视觉设计的重要性 18
1．1．5  移动UI视觉设计的原则 19
1．2  移动UI视觉设计的五大阶段 21
1．2．1  产品定位及市场分析阶段 21
1．2．2  初步构思及架构设计阶段 21
1．2．3  修饰美化及界面设计阶段 22
1．2．4  界面输出及可用性测试阶段 22
1．2．5  产品上线及优化方案阶段 22
1．3  移动设备尺寸的相关概念 23
1．3．1  英寸 23
1．3．2  显示分辨率 23
1．3．3  像素密度 24
1．4  色彩对移动UI的重要性 25
1．4．1  色彩的基础概念 25
1．4．2  移动UI视觉中常用的色彩对比 26
1．4．3  不同颜色的情感表达 27
1．4．4  移动UI中的色彩级别 28
1．4．5  不同系统的色彩应用规范 28
1．5  常见的移动UI设计工具 29
1．5．1  矢量图形的编辑高手—Illustrator 29
1．5．2  强大的图形图像编辑利器—Photoshop 29
1．6  三大主流系统的UI设计特点 30
1．6．1  苹果iOS7系统—扁平化 30
1．6．2  安卓Android系统—极高自由度 32
1．6．3  微软Windows Phone8系统—极简色块 33
第2章  *让操作更高效
—Photoshop基础 35
2．1  五大必备的核心功能 36
2．1．1  控制设计对象的顺序—图层 36
2．1．2  调整图像的影调和色调—调整/填充图层 38
2．1．3  编辑图像的显示区域—蒙版 39
2．1．4  精确把握编辑的区域—选区 40
2．1．5  准确传递UI的信息—文字 40
2．2  七种不同的绘图工具 41
2．2．1  规则直角方形的绘制—矩形工具 41
2．2．2  圆角方形的绘制—圆角矩形工具 43
2．2．3  椭圆图形的绘制—椭圆工具 44
2．2．4  星形和多边形的绘制—多边形工具 44
2．2．5  线段和虚线的绘制—直线工具 45
2．2．6  复杂图形的绘制—自动形状工具 46
2．2．7  任意图形的绘制—钢笔工具 47
2．3  十大图层样式提升设计质感 48
2．3．1  组合高光和阴影—斜面和浮雕 48
2．3．2  修饰轮廓色—描边 50
2．3．3  制作凹陷外观—内阴影 51
2．3．4  提升内部层次—内发光 52
2．3．5  创建光滑表面—光泽 53
2．3．6  更改填充色—颜色叠加 54
2．3．7  打造炫彩效果—渐变叠加 55
2．3．8  添加花样填色—图案叠加 56
2．3．9  增强外部边缘光晕—外发光 57
2．3．10  增强立体感—投影 58

第2部分·入门篇 59
第3章  *准确传递功能应用
—图标的设计 59
3．1  与图标设计相关 60
3．1．1  图标的标准格式及大小 60
3．1．2  图标设计的三大原则 63
3．1．3  不同系统下图标的设计特点 65
3．2  图标设计案例 67
3．2．1  线性风格的图标制作 67
3．2．2  单色风格的图标制作 70
3．2．3  折纸效果的图标制作 73
3．2．4  可爱风格的图标制作 77
3．2．5  金属材质的图标制作 82
第4章  *控制和调节应用程度
—滑块的设计 87
4．1  与滑块设计相关 88
4．1．1  滑块的构成要素和作用 88
4．1．2  滑块的类型 89
4．1．3  不同系统中滑块的设计要点 89
4．2  滑块设计案例 91
4．2．1  简约图形组成的滑块 91
4．2．2  清新自然的滑块制作 96
4．2．3  渐变效果的滑块制作 101
4．2．4  粉嫩可爱风格的滑块 107
4．2．5  蓝色酷炫风格的滑块 111
第5章  *接通和断开功能
—按钮的设计 115
5．1  与按钮设计相关 116
5．1．1  按钮的不同状态 116
5．1．2  按钮形状及作用之间的影响 117
5．1．3  不同系统下按钮的设计风格 117
5．1．4  按钮设计的三大技巧 119
5．2  按钮设计案例 121
5．2．1  扁平化按钮的制作 121
5．2．2  白色简易效果的按钮 125
5．2．3  半透明按钮的制作 129
5．2．4  夜光效果的按钮制作 133
5．2．5  木制效果的按钮制作 137

第3部分·进阶篇 141
第6章  *让时钟表现更有品味
—时钟界面设计 141
6．1  翻转式时钟界面设计 142
灵感构思解析 142
设计元素简述 143
色彩搭配技巧 143
制作步骤详解 143
01  魔方的绘制与组合 144
02  界面布局制作 144
03  图标和文字的添加 145
04  变换对象制作翻转效果 146
不同应用平台展示 147
6．2  齿轮状平板钟面设计 148
灵感构思解析 148
设计元素简述 149
色彩搭配技巧 149
制作步骤详解 149
01  时钟界面的绘制 150
02  齿轮状设置区域的制作 150
03  页面的组合和修饰 151
不同应用平台展示 152
6．3  天气刻度样式的时间界面 153
灵感构思解析 153
设计元素简述 154
色彩搭配技巧 154
制作步骤详解 154
01  天气刻度样式的钟面绘制 150
02  时钟界面的组合和修饰 151
03  日历设置页面绘制 151
不同应用平台展示 158
6．4  半透明线条感的时间界面 159
灵感构思解析 159
设计元素简述 160
色彩搭配技巧 160
制作步骤详解 160
01  界面背景的编辑 161
02  半透明钟面的绘制 161
03  页面的修饰和完善 162
04  事件设置界面的绘制 163
不同应用平台展示 164
第7章  *传递最美妙的音乐
—播放器界面设计 165
7．1  带声波的播放器界面设计 166
灵感构思解析 166
设计元素简述 167
色彩搭配技巧 167
制作步骤详解 167
01  制作出背景界面 168
02  绘制音波和播放控件 169
03  制作专辑界面 170
不同应用平台展示 171
7．2  清新自然风格的播放器界面设计 172
灵感构思解析 172
设计元素简述 173
色彩搭配技巧 173
制作步骤详解 173
01  播放界面顶栏的绘制 174
02  播放滑块的制作 175
03  对象的组合 176
不同应用平台展示 176
7．3  冷酷简约风格的播放器界面设计 177
灵感构思解析 177
设计元素简述 178
色彩搭配技巧 178
制作步骤详解 178
01  绘制背景和按钮 179
02  绘制播放器 179
03  添加光盘图像 180
不同应用平台展示 181
7．4  单色调风格的播放器界面设计 182
灵感构思解析 182
设计元素简述 183
色彩搭配技巧 183
制作步骤详解 183
01  播放区域的绘制 184
02  按钮控件的绘制 185
03  歌曲列表的绘制 187
不同应用平台展示 188
第8章  *把互联网装入口袋
—浏览器界面设计 189
8．1  白色圣洁风格的浏览器界面 190
构图布局解析 190
设计元素简述 191
色彩搭配技巧 191
制作步骤详解 191
01  界面中基本元素的绘制 192
02  文字、图标与基本元素的组合 193
03  界面的完善和拼接 194
不同应用平台展示 194
8．2  线性扁平风格的浏览器界面 195
构图布局解析 195
设计元素简述 196
色彩搭配技巧 196
制作步骤详解 196
01  界面背景的绘制 197
02  账号选择界面的制作 197
03  信息界面的制作 199
不同应用平台展示 200
8．3  圣诞主题风格的浏览器界面 201
构图布局解析 201
设计元素简述 202
色彩搭配技巧 202
制作步骤详解 202
01  按钮和滑块的绘制 203
02  搜索栏和标题栏的制作 204
03  界面的完善和组合 206
不同应用平台展示 207
8．4  暗色简约风格的浏览器界面 208
构图布局解析 209
设计元素简述 209
色彩搭配技巧 209
制作步骤详解 210
01  网站首页的绘制 210
02  购物页面的绘制 211
03  个人信息页面的绘制 212
04  搜索页面的绘制 213
不同应用平台展示 214
第9章  *让娱乐变得更享受
—游戏界面设计 215
9．1  游戏欢
内容简介:
　　《WoW！移动UI视觉设计全攻略》移动UI视觉设计，是以移动设备为操作平台，对移动设备中使用的界面进行视觉设计，在创作中赋予界面情感意义，激起使用者的兴趣。视觉设计包括对界面进行风格设定、色彩搭配和功能布局等多个内容，为界面创作出华丽而实用的外衣。　　WoW！移动UI视觉设计全攻略通过对移动设备三大主流操作系统的UI视觉设计的风格进行分析，讲解了APP用户界面的设计思路和制作过程，其中第1部分为基础篇，讲述了与移动设备相关的基础概念，以及Photoshop的绘图功能和修饰技巧；第2部分为入门篇，讲述了图标、按钮和滑块这三种基础的界面元素的设计和创作要点；第3部分为进阶篇，讲述了时间界面、播放器界面、浏览器界面、游戏界面和锁屏界面的设计要领和技巧；第4部分为提升篇，以项目要求的形式提出设计的内容，根据要求来对界面进行布局、配色和风格设定，展示给读者一个完整的APP界面的视觉设计流程。　　附带的学习资源包含书中所有案例的源文件和教学视频，方便读者学习使用。《WoW！移动UI视觉设计全攻略》特别适合移动设备UI视觉设计的初学者，同时对Photoshop使用者、平面设计师和APP开发设计人员也有参考价值。
目录:
导读 9
01  互联网产品的设计 9
02  扁平化设计思想对移动UI视觉设计的影响 12
03  移动UI视觉设计的要点 13
第1部分·基础篇 15
第1章  *为移动UI视觉设计铺路
—入门必备 15
1．1  移动UI的基础概念 16
1．1．1  什么是移动UI 16
1．1．2  移动UI的应用范围 17
1．1．3  APP与UI视觉设计的关系 17
1．1．4  移动UI视觉设计的重要性 18
1．1．5  移动UI视觉设计的原则 19
1．2  移动UI视觉设计的五大阶段 21
1．2．1  产品定位及市场分析阶段 21
1．2．2  初步构思及架构设计阶段 21
1．2．3  修饰美化及界面设计阶段 22
1．2．4  界面输出及可用性测试阶段 22
1．2．5  产品上线及优化方案阶段 22
1．3  移动设备尺寸的相关概念 23
1．3．1  英寸 23
1．3．2  显示分辨率 23
1．3．3  像素密度 24
1．4  色彩对移动UI的重要性 25
1．4．1  色彩的基础概念 25
1．4．2  移动UI视觉中常用的色彩对比 26
1．4．3  不同颜色的情感表达 27
1．4．4  移动UI中的色彩级别 28
1．4．5  不同系统的色彩应用规范 28
1．5  常见的移动UI设计工具 29
1．5．1  矢量图形的编辑高手—Illustrator 29
1．5．2  强大的图形图像编辑利器—Photoshop 29
1．6  三大主流系统的UI设计特点 30
1．6．1  苹果iOS7系统—扁平化 30
1．6．2  安卓Android系统—极高自由度 32
1．6．3  微软Windows Phone8系统—极简色块 33
第2章  *让操作更高效
—Photoshop基础 35
2．1  五大必备的核心功能 36
2．1．1  控制设计对象的顺序—图层 36
2．1．2  调整图像的影调和色调—调整/填充图层 38
2．1．3  编辑图像的显示区域—蒙版 39
2．1．4  精确把握编辑的区域—选区 40
2．1．5  准确传递UI的信息—文字 40
2．2  七种不同的绘图工具 41
2．2．1  规则直角方形的绘制—矩形工具 41
2．2．2  圆角方形的绘制—圆角矩形工具 43
2．2．3  椭圆图形的绘制—椭圆工具 44
2．2．4  星形和多边形的绘制—多边形工具 44
2．2．5  线段和虚线的绘制—直线工具 45
2．2．6  复杂图形的绘制—自动形状工具 46
2．2．7  任意图形的绘制—钢笔工具 47
2．3  十大图层样式提升设计质感 48
2．3．1  组合高光和阴影—斜面和浮雕 48
2．3．2  修饰轮廓色—描边 50
2．3．3  制作凹陷外观—内阴影 51
2．3．4  提升内部层次—内发光 52
2．3．5  创建光滑表面—光泽 53
2．3．6  更改填充色—颜色叠加 54
2．3．7  打造炫彩效果—渐变叠加 55
2．3．8  添加花样填色—图案叠加 56
2．3．9  增强外部边缘光晕—外发光 57
2．3．10  增强立体感—投影 58

第2部分·入门篇 59
第3章  *准确传递功能应用
—图标的设计 59
3．1  与图标设计相关 60
3．1．1  图标的标准格式及大小 60
3．1．2  图标设计的三大原则 63
3．1．3  不同系统下图标的设计特点 65
3．2  图标设计案例 67
3．2．1  线性风格的图标制作 67
3．2．2  单色风格的图标制作 70
3．2．3  折纸效果的图标制作 73
3．2．4  可爱风格的图标制作 77
3．2．5  金属材质的图标制作 82
第4章  *控制和调节应用程度
—滑块的设计 87
4．1  与滑块设计相关 88
4．1．1  滑块的构成要素和作用 88
4．1．2  滑块的类型 89
4．1．3  不同系统中滑块的设计要点 89
4．2  滑块设计案例 91
4．2．1  简约图形组成的滑块 91
4．2．2  清新自然的滑块制作 96
4．2．3  渐变效果的滑块制作 101
4．2．4  粉嫩可爱风格的滑块 107
4．2．5  蓝色酷炫风格的滑块 111
第5章  *接通和断开功能
—按钮的设计 115
5．1  与按钮设计相关 116
5．1．1  按钮的不同状态 116
5．1．2  按钮形状及作用之间的影响 117
5．1．3  不同系统下按钮的设计风格 117
5．1．4  按钮设计的三大技巧 119
5．2  按钮设计案例 121
5．2．1  扁平化按钮的制作 121
5．2．2  白色简易效果的按钮 125
5．2．3  半透明按钮的制作 129
5．2．4  夜光效果的按钮制作 133
5．2．5  木制效果的按钮制作 137

第3部分·进阶篇 141
第6章  *让时钟表现更有品味
—时钟界面设计 141
6．1  翻转式时钟界面设计 142
灵感构思解析 142
设计元素简述 143
色彩搭配技巧 143
制作步骤详解 143
01  魔方的绘制与组合 144
02  界面布局制作 144
03  图标和文字的添加 145
04  变换对象制作翻转效果 146
不同应用平台展示 147
6．2  齿轮状平板钟面设计 148
灵感构思解析 148
设计元素简述 149
色彩搭配技巧 149
制作步骤详解 149
01  时钟界面的绘制 150
02  齿轮状设置区域的制作 150
03  页面的组合和修饰 151
不同应用平台展示 152
6．3  天气刻度样式的时间界面 153
灵感构思解析 153
设计元素简述 154
色彩搭配技巧 154
制作步骤详解 154
01  天气刻度样式的钟面绘制 150
02  时钟界面的组合和修饰 151
03  日历设置页面绘制 151
不同应用平台展示 158
6．4  半透明线条感的时间界面 159
灵感构思解析 159
设计元素简述 160
色彩搭配技巧 160
制作步骤详解 160
01  界面背景的编辑 161
02  半透明钟面的绘制 161
03  页面的修饰和完善 162
04  事件设置界面的绘制 163
不同应用平台展示 164
第7章  *传递最美妙的音乐
—播放器界面设计 165
7．1  带声波的播放器界面设计 166
灵感构思解析 166
设计元素简述 167
色彩搭配技巧 167
制作步骤详解 167
01  制作出背景界面 168
02  绘制音波和播放控件 169
03  制作专辑界面 170
不同应用平台展示 171
7．2  清新自然风格的播放器界面设计 172
灵感构思解析 172
设计元素简述 173
色彩搭配技巧 173
制作步骤详解 173
01  播放界面顶栏的绘制 174
02  播放滑块的制作 175
03  对象的组合 176
不同应用平台展示 176
7．3  冷酷简约风格的播放器界面设计 177
灵感构思解析 177
设计元素简述 178
色彩搭配技巧 178
制作步骤详解 178
01  绘制背景和按钮 179
02  绘制播放器 179
03  添加光盘图像 180
不同应用平台展示 181
7．4  单色调风格的播放器界面设计 182
灵感构思解析 182
设计元素简述 183
色彩搭配技巧 183
制作步骤详解 183
01  播放区域的绘制 184
02  按钮控件的绘制 185
03  歌曲列表的绘制 187
不同应用平台展示 188
第8章  *把互联网装入口袋
—浏览器界面设计 189
8．1  白色圣洁风格的浏览器界面 190
构图布局解析 190
设计元素简述 191
色彩搭配技巧 191
制作步骤详解 191
01  界面中基本元素的绘制 192
02  文字、图标与基本元素的组合 193
03  界面的完善和拼接 194
不同应用平台展示 194
8．2  线性扁平风格的浏览器界面 195
构图布局解析 195
设计元素简述 196
色彩搭配技巧 196
制作步骤详解 196
01  界面背景的绘制 197
02  账号选择界面的制作 197
03  信息界面的制作 199
不同应用平台展示 200
8．3  圣诞主题风格的浏览器界面 201
构图布局解析 201
设计元素简述 202
色彩搭配技巧 202
制作步骤详解 202
01  按钮和滑块的绘制 203
02  搜索栏和标题栏的制作 204
03  界面的完善和组合 206
不同应用平台展示 207
8．4  暗色简约风格的浏览器界面 208
构图布局解析 209
设计元素简述 209
色彩搭配技巧 209
制作步骤详解 210
01  网站首页的绘制 210
02  购物页面的绘制 211
03  个人信息页面的绘制 212
04  搜索页面的绘制 213
不同应用平台展示 214
第9章  *让娱乐变得更享受
—游戏界面设计 215
9．1  游戏欢

查看详情

相关分类

计算机理论编程与开发操作系统大数据与云计算图形图像/多媒体网站设计与网页开发网络与通讯硬件、嵌入式开发办公软件信息安全辅助设计与工程计算软件工程/开发项目管理

WoW!移动UI视觉设计全攻略正版现货，品相完整，套书只发一本,多版面书籍只对书名

九品

图书-天下的书店

北京市东城区

平均发货25小时成功完成率89.14%

￥17.78

券

100减20

立即购买加入购物车
WoW!移动UI视觉设计全攻略正版现货，品相完整，套书只发一本,多版面书籍只对书名

九品

新起点书店

北京市海淀区

平均发货23小时成功完成率89.8%

￥17.00

券

100减20

立即购买加入购物车
WoW!移动UI视觉设计全攻略侯志刚人民邮电出版社 9787115369253 正版旧书里面部分笔记内容完好可正常使用旧书不附带光盘

九品

有路官方旗舰店

江西省南昌市

平均发货10小时成功完成率93.4%

￥15.80

券

100减20

立即购买加入购物车不属于本条目
WoW!移动UI视觉设计全攻略下午5点前订单，当日发货！超时赔付

九五品

才华有限

四川省成都市

平均发货10小时成功完成率94.5%

￥7.29

券

100减20

立即购买加入购物车
WoW!移动UI视觉设计全攻略侯志刚人民邮电出版社 9787115369253 正版旧书正版旧书里面部分笔记内容完好可正常使用旧书不附带光盘

九五品

辉煌二手教材专营店

江西省南昌市

平均发货10小时成功完成率94.58%

￥10.80

券

100减20

立即购买加入购物车不属于本条目
WoW!移动UI视觉设计全攻略此书为批量上架，如是【套装书籍】请联系店铺客服确认商品后再下单，默认只发一册，感谢您的支持！

九品

东方国际书店

北京市通州区

平均发货8小时成功完成率93.58%

￥11.39

券

100减20

立即购买加入购物车
4

WoW!移动UI视觉设计全攻略

九品

矮子书店

湖南省湘潭市

平均发货9小时成功完成率96.85%

￥3.00

券

100减20

立即购买加入购物车
WoW!移动UI视觉设计全攻略【正版有货可开发票；库存书！标题与图片不一致时,请质询】

全新

心流图书

广东省广州市

平均发货10小时成功完成率88.94%

￥52.50

券

100减20

立即购买加入购物车不属于本条目
2

WoW!移动UI视觉设计全攻略 0147B02

八品

光光书店

广东省东莞市

平均发货10小时成功完成率93.11%

￥18.00

券

100减20

立即购买加入购物车不属于本条目
2

WoW!移动UI视觉设计全攻略

八五品

书语书屋

北京市朝阳区

平均发货11小时成功完成率96.82%

￥6.00

券

100减20

立即购买加入购物车
5

WoW!移动UI视觉设计全攻略（正版二手有使用痕迹确保每本手工实拍）

八五品

大道二手书店

广东省广州市

平均发货4小时成功完成率96.15%

￥5.34

券

100减20

立即购买加入购物车
WOW移动UI视觉设计全攻略

九五品

山頭斜照

北京市通州区

平均发货30小时成功完成率82.58%

￥26.00

券

100减20

立即购买加入购物车不属于本条目
WoW!移动UI视觉设计全攻略

九品

大象图书1号店

广东省佛山市

平均发货6小时成功完成率96.85%

￥6.88

券

100减20

立即购买加入购物车
3

WoW!移动UI视觉设计全攻略

八五品

德宝书店

河北省衡水市

平均发货11小时成功完成率95.88%

￥16.62

券

100减20

立即购买加入购物车
WoW!移动UI视觉设计全攻略书号:9787115369253;作者:候志刚，薛聪锐　编著;出版社:人民邮电出版社;

九品

梓豪书店

河北省廊坊市

平均发货6小时成功完成率76.92%

￥28.44

券

100减20

立即购买加入购物车