Photoshop CC移动UI界面设计与实战

Photoshop CC移动UI界面设计与实战
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者:
2015-06
版次: 1
ISBN: 9787121259982
定价: 79.00
装帧: 平装
开本: 16开
纸张: 胶版纸
页数: 344页
字数: 384千字
正文语种: 简体中文
  •   目前移动设备产品日益增多,移动应用程序的市场呈现出百花齐放的胜景。为了能够迎合用户、提高用户体验,越来越多的移动应用程序产品开始提倡“以用户为中心”的设计理念,这就要求移动UI视觉设计师们要有敏锐的设计嗅觉和完整的设计流程及思维。本书从移动UI视觉设计的基础知识出发,通过分析和讲解三大主流系统的设计规范和设计技巧,将移动UI视觉设计中的创意思路与操作案例完美地结合在一起,力求在帮助读者提高UI界面制作能力的同时,拓展他们移动UI视觉设计的创造思路。 
      《Photoshop CC移动UI界面设计与实战》一共包含三部分,共14个Part的内容。第1部分基础篇(Part1~Part3):介绍移UI视觉设计的基础知识,Photoshop软件的常用操作功能,以及介绍移动UI界面中基础元素的设计规范;第2部分三大主流系统(Part4~Part6):分别对三大系统进行有针对性的讲解,利用相关的案例介绍移动UI视觉设计的制作方法和技巧;第3部分App应用实例(Part7~Part14):以完整的App界面设计为主要内容,展示不同风格移动UI界面设计的特点和制作方法。《Photoshop CC移动UI界面设计与实战》包含了大量精美的界面元素、App应用程序界面视觉设计的案例,利用较详细的布局规划、创意思维、配色方案、组件分析等部分来对案例的创作思路进行阐述,告诉读者移动UI视觉设计的创作技巧。 创锐设计 
      创锐设计,由一支优秀的平面设计师与图形图像资深编辑队伍组成。出版过众多优秀的图形图像方面的专业书籍,不仅在国内处于领先地位,还有大量作品输出过海外版权,备受读者青睐。在课程教材方面,由于他们拥有多年教育培训的经验,因此十分了解初学读者的心理需求,从而研究出了一套行之有效的教学方法;此外,他们又参加过多个商业项目的设计工作,熟悉行业规范、了解客户需求,拥有较高的设计水平,积累了丰富的制作经验、为专业进阶读者指出了技术进阶的明路;在他们的图书中,选择的实例不仅融会贯通了软件技法,更能通过分享图像处理经验,激发读者的灵感、迸发发创意火花,达到事半功倍的效果。 

    Part 1 移动UI设计基础 / 1
    1.1 UI设计存在的意义 / 2
    1.1.1 人机交互的桥梁 / 2
    1.1.2 操作逻辑系统的展现 / 3
    1.1.3 展现系统的整体风格 / 3
    1.2 移动UI设计的原则 / 4
    1.2.1 视觉一致性原则 / 4
    1.2.2 视觉简易性原则 / 5
    1.2.3 从用户的习惯考虑 / 6
    1.2.4 操作的灵活性及人性化 / 8
    1.3 三大主流操作系统的特点对比 / 9
    1.4 不同系统UI视觉的主要组成要素及特征 / 9
    1.4.1 iOS系统中的组成要素及特征 / 10
    1.4.2 Android系统中的组成要素及特征 / 12
    1.4.3 WP系统中的组成要素及特征 / 13
    1.5 认识移动终端的分辨率和像素 / 14
    1.6 移动UI的创意与灵感收集 / 16
    1.6.1 各种经验和灵感的记录 / 16
    1.6.2 将对象抽象化 / 17
    1.6.3 设计灵感的转移 / 18
    1.7 移动UI的视觉设计流程 / 20

    Part 2 PS在移动UI设计中的常用功能简介 / 23
    2.1 绘图工具的介绍 / 24
    2.1.1 规则形状的绘制 / 24
    2.1.2 自定义形状的绘制 / 25
    2.1.3 绘制任意所需的形状 / 27
    2.2 图层样式的运用 / 28
    2.2.1 增强立体感的图层样式 / 28
    2.2.2 发光效果的图层样式 / 30
    2.2.3 更改色彩的图层样式 / 31
    2.3 蒙版的编辑 / 33
    2.3.1 图层蒙版 / 33
    2.3.2 剪贴蒙版 / 34
    2.4 文字的添加 / 36
    2.4.1 文字的添加与设置 / 36
    2.4.2 文字的高级编辑 / 37

    Part 3 移动UI界面中基本元素的制作 / 39
    3.1 按钮 / 40
    3.1.1 按钮设计的基础知识 / 40
    3.1.2 扁平化按钮的设计 / 41
    3.2 开关 / 45
    3.2.1 开关设计的基础知识 / 45
    3.2.2 简易色块开关的设计 / 47
    3.3 进度条 / 49
    3.3.1 进度条设计的基础知识 / 49
    3.3.2 扁平化进度条的设计 / 49
    3.3.3 层次感强烈的进度条设计 / 52
    3.4 搜索栏 / 56
    3.4.1 搜索栏设计的基础知识 / 56
    3.4.2 扁平化搜索栏的设计 / 58
    3.5 列表框 / 63
    3.5.1 列表框设计的基础知识 / 63
    3.5.2 简易列表框的设计 / 64
    3.5.3 立体化列表框的设计 / 68
    3.6 标签栏 / 70
    3.6.1 标签栏设计的基础知识 / 70
    3.6.2 线性化标签栏设计 / 71
    3.6.3 木纹质感的标签栏设计 / 72
    3.7 图标栏 / 75
    3.7.1 图标栏设计的基础知识 / 75
    3.7.2 线性化图标栏设计 / 76
    3.7.3 纸箱纹理的图标栏设计 / 79

    Part 4 iOS系统及其组件的设计 / 83
    4.1 iOS系统的发展及其特点 / 84
    4.1.1 iOS系统的发展 / 84
    4.1.2 iOS 8系统的设计特点 / 86
    4.2 iOS系统设计的规范 / 89
    4.2.1 设计原则 / 89
    4.2.2 色彩和字体 / 92
    4.2.3 图标的设计 / 96
    4.3 iOS系统界面设计实训 / 100
    4.3.1 扁平化图标的设计 / 100
    4.3.2 半透明效果的界面设计 / 108

    Part 5 Android系统及其组件的设计 / 115
    5.1 Android系统的特点 / 116
    5.2 Android系统的设计规范 / 118
    5.2.1 度量单位 / 118
    5.2.2 字体的使用标准 / 118
    5.2.3 色彩的应用规范 / 121
    5.2.4 四种类型的图标 / 124
    5.3 六种标准的Widget规范 / 126
    5.3.1 Widget框架简介 / 126
    5.3.2 Widget框架的标准尺寸 / 128
    5.3.3 4×1的Widget框架设计 / 129
    5.3.4 3×3的Widget框架设计 / 133
    5.3.5 2×2的Widget框架设计 / 137
    5.3.6 4×1的加长Widget框架设计 / 140
    5.3.7 3×3的横向Widget框架设计 / 144
    5.3.8 2×2的横向Widget框架设计 / 149
    5.4 Android系统界面设计实训 / 154
    5.4.1 立体化的图标设计 / 154
    5.4.2 超强立体感的界面设计 / 163
    Part 6 WP系统及其组件的设计 / 175

    6.1 WP系统的特点 / 176
    6.2 高自由度的Live Tiles / 178
    6.2.1 Live Tiles简介 / 178
    6.2.2 Live Tiles常见表现形式 / 180
    6.2.3 Live Tiles设计的十大要点 / 181
    6.2.4 Live Tiles设计 / 185
    6.3 独特的Panorama / 183
    6.3.1 Panorama(全景视图)简介 / 187
    6.3.2 Panorama设计注意事项 / 188
    6.3.3 Panorama设计 / 193
    6.4 WP系统界面设计实训 / 196
    6.4.1 线性图标的设计 / 196
    6.4.2 极简风格的界面设计 / 200

    Part 7 孕妈帮手App设计 / 207
    界面布局规划 / 208
    创意思路剖析 / 208
    确定配色方案 / 209
    定义组件风格 / 210
    制作步骤详解 / 210

    Part 8 新闻网站App设计 / 221
    界面布局规划 / 222
    创意思路剖析 / 222
    确定配色方案 / 223
    定义组件风格 / 224
    制作步骤详解 / 224

    Part 9 美食网站App设计 / 237
    界面布局规划 / 238
    创意思路剖析 / 238
    确定配色方案 / 239
    定义组件风格 / 240
    制作步骤详解 / 240

    Part 10 篮球运动App设计 / 253
    界面布局规划 / 254
    创意思路剖析 / 254
    确定配色方案 / 255
    定义组件风格 / 255
    制作步骤详解 / 256

    Part 11 流量银行App设计 / 269
    界面布局规划 / 270
    创意思路剖析 / 270
    确定配色方案 / 271
    定义组件风格 / 271
    制作步骤详解 / 272

    Part 12 藏宝游戏App设计 / 283
    界面布局规划 / 284
    创意思路剖析 / 284
    确定配色方案 / 285
    定义组件风格 / 286
    制作步骤详解 / 286

    Part 13 音乐播放App设计 / 209
    界面布局规划 / 300
    创意思路剖析 / 300
    确定配色方案 / 301
    定义组件风格 / 302
    制作步骤详解 / 302

    Part 14 旅游资讯App设计 / 319
    界面布局规划 / 320
    创意思路剖析 / 320
    确定配色方案 / 321
    定义组件风格 / 322
    制作步骤详解 / 322
  • 内容简介:
      目前移动设备产品日益增多,移动应用程序的市场呈现出百花齐放的胜景。为了能够迎合用户、提高用户体验,越来越多的移动应用程序产品开始提倡“以用户为中心”的设计理念,这就要求移动UI视觉设计师们要有敏锐的设计嗅觉和完整的设计流程及思维。本书从移动UI视觉设计的基础知识出发,通过分析和讲解三大主流系统的设计规范和设计技巧,将移动UI视觉设计中的创意思路与操作案例完美地结合在一起,力求在帮助读者提高UI界面制作能力的同时,拓展他们移动UI视觉设计的创造思路。 
      《Photoshop CC移动UI界面设计与实战》一共包含三部分,共14个Part的内容。第1部分基础篇(Part1~Part3):介绍移UI视觉设计的基础知识,Photoshop软件的常用操作功能,以及介绍移动UI界面中基础元素的设计规范;第2部分三大主流系统(Part4~Part6):分别对三大系统进行有针对性的讲解,利用相关的案例介绍移动UI视觉设计的制作方法和技巧;第3部分App应用实例(Part7~Part14):以完整的App界面设计为主要内容,展示不同风格移动UI界面设计的特点和制作方法。《Photoshop CC移动UI界面设计与实战》包含了大量精美的界面元素、App应用程序界面视觉设计的案例,利用较详细的布局规划、创意思维、配色方案、组件分析等部分来对案例的创作思路进行阐述,告诉读者移动UI视觉设计的创作技巧。
  • 作者简介:
    创锐设计 
      创锐设计,由一支优秀的平面设计师与图形图像资深编辑队伍组成。出版过众多优秀的图形图像方面的专业书籍,不仅在国内处于领先地位,还有大量作品输出过海外版权,备受读者青睐。在课程教材方面,由于他们拥有多年教育培训的经验,因此十分了解初学读者的心理需求,从而研究出了一套行之有效的教学方法;此外,他们又参加过多个商业项目的设计工作,熟悉行业规范、了解客户需求,拥有较高的设计水平,积累了丰富的制作经验、为专业进阶读者指出了技术进阶的明路;在他们的图书中,选择的实例不仅融会贯通了软件技法,更能通过分享图像处理经验,激发读者的灵感、迸发发创意火花,达到事半功倍的效果。 

  • 目录:
    Part 1 移动UI设计基础 / 1
    1.1 UI设计存在的意义 / 2
    1.1.1 人机交互的桥梁 / 2
    1.1.2 操作逻辑系统的展现 / 3
    1.1.3 展现系统的整体风格 / 3
    1.2 移动UI设计的原则 / 4
    1.2.1 视觉一致性原则 / 4
    1.2.2 视觉简易性原则 / 5
    1.2.3 从用户的习惯考虑 / 6
    1.2.4 操作的灵活性及人性化 / 8
    1.3 三大主流操作系统的特点对比 / 9
    1.4 不同系统UI视觉的主要组成要素及特征 / 9
    1.4.1 iOS系统中的组成要素及特征 / 10
    1.4.2 Android系统中的组成要素及特征 / 12
    1.4.3 WP系统中的组成要素及特征 / 13
    1.5 认识移动终端的分辨率和像素 / 14
    1.6 移动UI的创意与灵感收集 / 16
    1.6.1 各种经验和灵感的记录 / 16
    1.6.2 将对象抽象化 / 17
    1.6.3 设计灵感的转移 / 18
    1.7 移动UI的视觉设计流程 / 20

    Part 2 PS在移动UI设计中的常用功能简介 / 23
    2.1 绘图工具的介绍 / 24
    2.1.1 规则形状的绘制 / 24
    2.1.2 自定义形状的绘制 / 25
    2.1.3 绘制任意所需的形状 / 27
    2.2 图层样式的运用 / 28
    2.2.1 增强立体感的图层样式 / 28
    2.2.2 发光效果的图层样式 / 30
    2.2.3 更改色彩的图层样式 / 31
    2.3 蒙版的编辑 / 33
    2.3.1 图层蒙版 / 33
    2.3.2 剪贴蒙版 / 34
    2.4 文字的添加 / 36
    2.4.1 文字的添加与设置 / 36
    2.4.2 文字的高级编辑 / 37

    Part 3 移动UI界面中基本元素的制作 / 39
    3.1 按钮 / 40
    3.1.1 按钮设计的基础知识 / 40
    3.1.2 扁平化按钮的设计 / 41
    3.2 开关 / 45
    3.2.1 开关设计的基础知识 / 45
    3.2.2 简易色块开关的设计 / 47
    3.3 进度条 / 49
    3.3.1 进度条设计的基础知识 / 49
    3.3.2 扁平化进度条的设计 / 49
    3.3.3 层次感强烈的进度条设计 / 52
    3.4 搜索栏 / 56
    3.4.1 搜索栏设计的基础知识 / 56
    3.4.2 扁平化搜索栏的设计 / 58
    3.5 列表框 / 63
    3.5.1 列表框设计的基础知识 / 63
    3.5.2 简易列表框的设计 / 64
    3.5.3 立体化列表框的设计 / 68
    3.6 标签栏 / 70
    3.6.1 标签栏设计的基础知识 / 70
    3.6.2 线性化标签栏设计 / 71
    3.6.3 木纹质感的标签栏设计 / 72
    3.7 图标栏 / 75
    3.7.1 图标栏设计的基础知识 / 75
    3.7.2 线性化图标栏设计 / 76
    3.7.3 纸箱纹理的图标栏设计 / 79

    Part 4 iOS系统及其组件的设计 / 83
    4.1 iOS系统的发展及其特点 / 84
    4.1.1 iOS系统的发展 / 84
    4.1.2 iOS 8系统的设计特点 / 86
    4.2 iOS系统设计的规范 / 89
    4.2.1 设计原则 / 89
    4.2.2 色彩和字体 / 92
    4.2.3 图标的设计 / 96
    4.3 iOS系统界面设计实训 / 100
    4.3.1 扁平化图标的设计 / 100
    4.3.2 半透明效果的界面设计 / 108

    Part 5 Android系统及其组件的设计 / 115
    5.1 Android系统的特点 / 116
    5.2 Android系统的设计规范 / 118
    5.2.1 度量单位 / 118
    5.2.2 字体的使用标准 / 118
    5.2.3 色彩的应用规范 / 121
    5.2.4 四种类型的图标 / 124
    5.3 六种标准的Widget规范 / 126
    5.3.1 Widget框架简介 / 126
    5.3.2 Widget框架的标准尺寸 / 128
    5.3.3 4×1的Widget框架设计 / 129
    5.3.4 3×3的Widget框架设计 / 133
    5.3.5 2×2的Widget框架设计 / 137
    5.3.6 4×1的加长Widget框架设计 / 140
    5.3.7 3×3的横向Widget框架设计 / 144
    5.3.8 2×2的横向Widget框架设计 / 149
    5.4 Android系统界面设计实训 / 154
    5.4.1 立体化的图标设计 / 154
    5.4.2 超强立体感的界面设计 / 163
    Part 6 WP系统及其组件的设计 / 175

    6.1 WP系统的特点 / 176
    6.2 高自由度的Live Tiles / 178
    6.2.1 Live Tiles简介 / 178
    6.2.2 Live Tiles常见表现形式 / 180
    6.2.3 Live Tiles设计的十大要点 / 181
    6.2.4 Live Tiles设计 / 185
    6.3 独特的Panorama / 183
    6.3.1 Panorama(全景视图)简介 / 187
    6.3.2 Panorama设计注意事项 / 188
    6.3.3 Panorama设计 / 193
    6.4 WP系统界面设计实训 / 196
    6.4.1 线性图标的设计 / 196
    6.4.2 极简风格的界面设计 / 200

    Part 7 孕妈帮手App设计 / 207
    界面布局规划 / 208
    创意思路剖析 / 208
    确定配色方案 / 209
    定义组件风格 / 210
    制作步骤详解 / 210

    Part 8 新闻网站App设计 / 221
    界面布局规划 / 222
    创意思路剖析 / 222
    确定配色方案 / 223
    定义组件风格 / 224
    制作步骤详解 / 224

    Part 9 美食网站App设计 / 237
    界面布局规划 / 238
    创意思路剖析 / 238
    确定配色方案 / 239
    定义组件风格 / 240
    制作步骤详解 / 240

    Part 10 篮球运动App设计 / 253
    界面布局规划 / 254
    创意思路剖析 / 254
    确定配色方案 / 255
    定义组件风格 / 255
    制作步骤详解 / 256

    Part 11 流量银行App设计 / 269
    界面布局规划 / 270
    创意思路剖析 / 270
    确定配色方案 / 271
    定义组件风格 / 271
    制作步骤详解 / 272

    Part 12 藏宝游戏App设计 / 283
    界面布局规划 / 284
    创意思路剖析 / 284
    确定配色方案 / 285
    定义组件风格 / 286
    制作步骤详解 / 286

    Part 13 音乐播放App设计 / 209
    界面布局规划 / 300
    创意思路剖析 / 300
    确定配色方案 / 301
    定义组件风格 / 302
    制作步骤详解 / 302

    Part 14 旅游资讯App设计 / 319
    界面布局规划 / 320
    创意思路剖析 / 320
    确定配色方案 / 321
    定义组件风格 / 322
    制作步骤详解 / 322
查看详情
12