未读消息消息

购物车

我的订单

个人中心

店铺

我的订单收藏

拍卖

拍卖交易我的竞拍收藏

我的好友资金账户

卖家中心

客服 |

帮助中心 9:00-20:30 在线留言

客服电话

010-89648155

服务时间

客服咨询 8:00-21:00

纠纷处理 9:00-21:00

图书审核 9:00-18:00

监督与建议

请选择

手机孔网

Photoshop+PxCook+Cutterman网页UI设计教程

作者: 李晓斌著

出版社: 电子工业出版社

出版时间: 2021-08

版次: 1

ISBN: 9787121414329

定价: 89.80

装帧: 平装

开本: 16开

纸张: 胶版纸

页数: 232页

分类: 计算机与互联网

5 张插图图片

1人买过

本书主要讲解了iOS系统和Android系统两种移动设备系统界面的结构及设计规范，全面解析了移动端App界面的设计流程及技巧。本书还介绍了如何使用Adobe XD、Photoshop、PxCook和Cutterman等主流软件进行UI设计制作。
本书共6章。第1章主要讲解移动UI设计基础；第2章主要讲解iOS系统界面设计；第3章主要讲解Android系统界面设计；第4章主要讲解移动UI图标设计；第5章主要讲解iOS系统界面应用设计；第6章主要讲解Android系统界面应用设计。
本书将提供全部案例的素材、源文件和教学视频，读者可以结合书、练习文件和教学视频，提升移动端App界面设计的学习效率。

李晓斌，多年视频剪辑与特效制作工作背景与设计经验，精通视频讲解与特效相关软件，熟练掌握After Effect软件的各项功能与操作技巧，能够完成视频特效的添加与优化。优秀的团队合作精神，对工作认真负责，积极主动，思维严谨，具有较高的技术水平和丰富的工作经验。曾出版多本相关教材，参与多所院校的视频剪辑的培训工作。第1章网页UI设计初体验
1.1 初识网页UI   1
1.2 网页UI的分类  2
1.3 网页UI设计的工作流程 5
1.3.1 网页产品调研  5
1.3.2 网页原型设计  6
1.3.3 设计网页UI 7
1.3.4 网页UI 标注    8
1.3.5 网页UI 切图输出  8
1.4 深刻理解网页UI设计原则 8
1.4.1 视觉美观  8
1.4.2 主题明确  9
1.4.3 内容与形式相统一  10
1.4.4 整体性  11
1.4.5 快速加载    11
1.4.6 为用户考虑    12
1.5 网页UI的设计风格 13
1.5.1 拟物化风格    13
1.5.2 扁平化风格    13
1.5.3 极简化风格    14
1.5.4 3D 风格  14
1.5.5 插画风格    15
1.5.6 低多边形风格  15
1.5.7 无边框风格    15
1.5.8 纵向分割风格  16
1.5.9 超级头版风格  17
1.6 设计网页UI的常用工具 17
1.6.1 Axure RP 9    17
1.6.2 Photoshop 和Illustrator  18
1.6.3 Sketch 和Adobe XD  21
1.6.4 PxCook 和Cutterman   23
1.7 本章小结   24
第2章合理的网页版式与布局
2.1 了解网页布局 25
2.1.1 网页布局的目的  25
2.1.2 网页布局的操作流程   26
2.2 网页布局的基本方法 27
2.2.1 网页的布局设计  27
2.2.2 网页布局的原则  28
2.3 网页布局的常见类型 29
2.3.1 国字型  30
2.3.2 拐角型  30
2.3.3 标题正文型    31
2.3.4 左右框架型    31
2.3.5 上下框架型    31
2.3.6 封面型  32
2.3.7 变化型  33
2.4 根据内容位置决定网页布局方式 33
2.4.1 满屏式网页布局  33
2.4.2 一栏式网页布局  34
实战练习01――设计并制作白酒网页35
2.4.3 两栏式网页布局  40
实战练习02――布局啤酒网站  42
2.4.4 三栏式网页布局  45
2.4.5 水平和垂直居中的网页布局  47
2.5 页面分割方向的布局方式 48
2.5.1 纵向分割    48
2.5.2 横向分割    49
实战练习03――布局家居网站  49
2.5.3 纵向与横向复合型  52
2.5.4 运用固定区域的设计   53
2.6 网页布局的特性 53
2.7 PC端与移动端网页布局的区别 55
2.8 本章小结   56
第3章奠定基础的网页构成元素
3.1 网页中的线条 57
3.1.1 点、线、面的关系  57
3.1.2 网页中应用的线条风格  58
3.1.3 线条在网页UI 中的作用  62
3.2 网页中的标志 66
3.2.1 网页标志的尺寸  66
3.2.2 网页标志的特点  66
3.2.3 网页标志的设计规范   67
实战练习01――设计并制作网页标志69
3.2.4 网页标志的表现形式   71
3.3 网页中的图标和按钮 73
3.3.1 网页图标的概念  73
3.3.2 网页图标的设计原则   73
3.3.3 网页图标的应用  75
实战练习02――设计并制作简易图标76
3.3.4 网页按钮的概念  80
3.3.5 网页按钮的功能  80
3.3.6 设计出色的网页按钮   81
实战练习03――设计并制作简单的网页元素  83
3.4 网页中的导航 88
3.4.1 布局网页导航  88
3.4.2 网页导航的设计技巧   91
实战练习04――设计并制作家居网页的主体广告和导航 92
3.5 网页中的文字 96
3.5.1 网页中的文字设置  96
3.5.2 网页文字的设计原则   100
3.5.3 网页文字的排版规则   100
3.6 网页中的图片  103
3.6.1 网页中的图片设置  103
3.6.2 网页图片的应用  104
3.7 网页中的富媒体106
3.8 本章小结   106
第4章美观的网页配色
4.1 配色的基础107
4.1.1 色彩的概念  107
4.1.2 色彩的三要素  107
4.1.3 颜色模式    110
4.1.4 十六进制颜色码   111
4.2 网页配色的基本要素  112
4.2.1 网页的主题色  112
实战练习01――设计并制作家具网站的登录页面  113
4.2.2 网页的背景色  115
4.2.3 网页的辅助色  116
4.2.4 网页的文本色  117
4.2.5 网页的强调色  117
4.3 网页元素的色彩搭配  118
4.3.1 网页标志与广告  118
4.3.2 网页导航    118
实战练习02――设计并制作图片资源网页  118
4.3.3 背景色与文字  120
4.3.4 链接文字    121
4.4 根据色调进行网页配色122
4.5 利用色彩对比进行网页配色  123
4.5.1 色彩的冷暖对比  123
4.5.2 色彩的大小对比  124
4.5.3 色彩的色相对比  124
4.6 网页中的配色技巧  128
4.6.1 突出网页主题  128
实战练习03――设计并制作咖啡网页  131
4.6.2 融合整体配色  132
4.7 本章小结   134
第5章 iOS系统UI设计
5.1 iOS系统简介135
5.2 iOS系统的元素设计  136
5.2.1 尺寸单位    136
5.2.2 尺寸大小    137
5.2.3 组件尺寸    138
5.2.4 图标  138
5.3 iOS系统的边距和间距设计140
5.3.1 全局边距    140
实战练习01――设计并制作运动App 的主页  141
5.3.2 卡片间距    143
5.3.3 内容间距    144
5.4 iOS系统的文字设计  146
5.4.1 字体  146
5.4.2 字号与字重  146
实战练习02――设计并制作旅游App 的“我的”界面  147
5.5 iOS系统的图片设计  151
5.5.1 图片的比例  151
5.5.2 图片的格式  152
5.6 iOS系统的网页布局  153
5.6.1 列表式布局  153
5.6.2 陈列馆式布局  153
5.6.3 宫格式布局  154
5.6.4 卡片式布局  154
5.7 iOS系统UI的设计原则  155
5.7.1 亲密性  155
5.7.2 对齐、对比和重复  156
5.7.3 直截了当    158
5.7.4 提供邀请    160
5.8 本章小结   162
第6章 Android系统UI设计
6.1 Android系统简介  163
6.2 Android系统的元素设计  163
6.2.1 设计单位    164
6.2.2 界面尺寸    165
6.2.3 组件尺寸    165
实战练习01――设计并制作App 的登录界面166
6.3 Android系统的文字设计  168
6.3.1 字体和字重  168
6.3.2 字号  169
6.4 Android系统的图标设计  170
6.4.1 启动图标    170
6.4.2 标签栏/ 系统通知图标170
6.4.3 上下文图标  171
6.4.4 图标尺寸    171
实战练习02――设计并制作App 界面中的上下文图标  172
6.5 Android系统UI的设计原则  174
6.5.1 一步到位    174
6.5.2 即时反应    177
6.5.3 简化交互    179
实战练习03――设计并制作Android 系统App“我的”界面181
6.6 本章小结   184
第7章适配输出网页UI设计
7.1 PC端网页的适配输出185
7.1.1 PC 端的适配方法  185
7.1.2 适配时需要注意的点   185
7.2 iOS系统界面的适配输出  186
7.2.1 界面标注    186
7.2.2 标注工具――PxCook188
实战练习01――标注iOS 系统App 界面191
7.2.3 适配输出    193
7.3 Android系统界面的适配输出195
7.3.1 界面标注    195
7.3.2 适配输出    196
7.3.3 .9 切图法    198
7.3.4 输出工具――Cutterman 插件201
实战练习02――输出Android 系统的App 界面  201
7.4 本章小结   203
第8章综合案例
8.1 设计PC端的家居网页204
8.1.1 家居网页案例分析  204
8.1.2 家居网页色彩分析  205
8.1.3 家居网页制作步骤  206
8.2 设计iOS系统的旅游App界面  209
8.2.1 旅游App 界面案例分析209
8.2.2 旅游App 界面色彩分析210
8.2.3 旅游App 界面制作步骤211
8.3 设计Android系统的家居App界面215
8.3.1 家居App 界面案例分析215
8.3.2 家居App 界面色彩分析217
8.3.3 家居App 界面制作步骤218
8.4 本章小结   222
内容简介:
本书主要讲解了iOS系统和Android系统两种移动设备系统界面的结构及设计规范，全面解析了移动端App界面的设计流程及技巧。本书还介绍了如何使用Adobe XD、Photoshop、PxCook和Cutterman等主流软件进行UI设计制作。
本书共6章。第1章主要讲解移动UI设计基础；第2章主要讲解iOS系统界面设计；第3章主要讲解Android系统界面设计；第4章主要讲解移动UI图标设计；第5章主要讲解iOS系统界面应用设计；第6章主要讲解Android系统界面应用设计。
本书将提供全部案例的素材、源文件和教学视频，读者可以结合书、练习文件和教学视频，提升移动端App界面设计的学习效率。
作者简介:
李晓斌，多年视频剪辑与特效制作工作背景与设计经验，精通视频讲解与特效相关软件，熟练掌握After Effect软件的各项功能与操作技巧，能够完成视频特效的添加与优化。优秀的团队合作精神，对工作认真负责，积极主动，思维严谨，具有较高的技术水平和丰富的工作经验。曾出版多本相关教材，参与多所院校的视频剪辑的培训工作。
目录:
第1章网页UI设计初体验
1.1 初识网页UI   1
1.2 网页UI的分类  2
1.3 网页UI设计的工作流程 5
1.3.1 网页产品调研  5
1.3.2 网页原型设计  6
1.3.3 设计网页UI 7
1.3.4 网页UI 标注    8
1.3.5 网页UI 切图输出  8
1.4 深刻理解网页UI设计原则 8
1.4.1 视觉美观  8
1.4.2 主题明确  9
1.4.3 内容与形式相统一  10
1.4.4 整体性  11
1.4.5 快速加载    11
1.4.6 为用户考虑    12
1.5 网页UI的设计风格 13
1.5.1 拟物化风格    13
1.5.2 扁平化风格    13
1.5.3 极简化风格    14
1.5.4 3D 风格  14
1.5.5 插画风格    15
1.5.6 低多边形风格  15
1.5.7 无边框风格    15
1.5.8 纵向分割风格  16
1.5.9 超级头版风格  17
1.6 设计网页UI的常用工具 17
1.6.1 Axure RP 9    17
1.6.2 Photoshop 和Illustrator  18
1.6.3 Sketch 和Adobe XD  21
1.6.4 PxCook 和Cutterman   23
1.7 本章小结   24
第2章合理的网页版式与布局
2.1 了解网页布局 25
2.1.1 网页布局的目的  25
2.1.2 网页布局的操作流程   26
2.2 网页布局的基本方法 27
2.2.1 网页的布局设计  27
2.2.2 网页布局的原则  28
2.3 网页布局的常见类型 29
2.3.1 国字型  30
2.3.2 拐角型  30
2.3.3 标题正文型    31
2.3.4 左右框架型    31
2.3.5 上下框架型    31
2.3.6 封面型  32
2.3.7 变化型  33
2.4 根据内容位置决定网页布局方式 33
2.4.1 满屏式网页布局  33
2.4.2 一栏式网页布局  34
实战练习01――设计并制作白酒网页35
2.4.3 两栏式网页布局  40
实战练习02――布局啤酒网站  42
2.4.4 三栏式网页布局  45
2.4.5 水平和垂直居中的网页布局  47
2.5 页面分割方向的布局方式 48
2.5.1 纵向分割    48
2.5.2 横向分割    49
实战练习03――布局家居网站  49
2.5.3 纵向与横向复合型  52
2.5.4 运用固定区域的设计   53
2.6 网页布局的特性 53
2.7 PC端与移动端网页布局的区别 55
2.8 本章小结   56
第3章奠定基础的网页构成元素
3.1 网页中的线条 57
3.1.1 点、线、面的关系  57
3.1.2 网页中应用的线条风格  58
3.1.3 线条在网页UI 中的作用  62
3.2 网页中的标志 66
3.2.1 网页标志的尺寸  66
3.2.2 网页标志的特点  66
3.2.3 网页标志的设计规范   67
实战练习01――设计并制作网页标志69
3.2.4 网页标志的表现形式   71
3.3 网页中的图标和按钮 73
3.3.1 网页图标的概念  73
3.3.2 网页图标的设计原则   73
3.3.3 网页图标的应用  75
实战练习02――设计并制作简易图标76
3.3.4 网页按钮的概念  80
3.3.5 网页按钮的功能  80
3.3.6 设计出色的网页按钮   81
实战练习03――设计并制作简单的网页元素  83
3.4 网页中的导航 88
3.4.1 布局网页导航  88
3.4.2 网页导航的设计技巧   91
实战练习04――设计并制作家居网页的主体广告和导航 92
3.5 网页中的文字 96
3.5.1 网页中的文字设置  96
3.5.2 网页文字的设计原则   100
3.5.3 网页文字的排版规则   100
3.6 网页中的图片  103
3.6.1 网页中的图片设置  103
3.6.2 网页图片的应用  104
3.7 网页中的富媒体106
3.8 本章小结   106
第4章美观的网页配色
4.1 配色的基础107
4.1.1 色彩的概念  107
4.1.2 色彩的三要素  107
4.1.3 颜色模式    110
4.1.4 十六进制颜色码   111
4.2 网页配色的基本要素  112
4.2.1 网页的主题色  112
实战练习01――设计并制作家具网站的登录页面  113
4.2.2 网页的背景色  115
4.2.3 网页的辅助色  116
4.2.4 网页的文本色  117
4.2.5 网页的强调色  117
4.3 网页元素的色彩搭配  118
4.3.1 网页标志与广告  118
4.3.2 网页导航    118
实战练习02――设计并制作图片资源网页  118
4.3.3 背景色与文字  120
4.3.4 链接文字    121
4.4 根据色调进行网页配色122
4.5 利用色彩对比进行网页配色  123
4.5.1 色彩的冷暖对比  123
4.5.2 色彩的大小对比  124
4.5.3 色彩的色相对比  124
4.6 网页中的配色技巧  128
4.6.1 突出网页主题  128
实战练习03――设计并制作咖啡网页  131
4.6.2 融合整体配色  132
4.7 本章小结   134
第5章 iOS系统UI设计
5.1 iOS系统简介135
5.2 iOS系统的元素设计  136
5.2.1 尺寸单位    136
5.2.2 尺寸大小    137
5.2.3 组件尺寸    138
5.2.4 图标  138
5.3 iOS系统的边距和间距设计140
5.3.1 全局边距    140
实战练习01――设计并制作运动App 的主页  141
5.3.2 卡片间距    143
5.3.3 内容间距    144
5.4 iOS系统的文字设计  146
5.4.1 字体  146
5.4.2 字号与字重  146
实战练习02――设计并制作旅游App 的“我的”界面  147
5.5 iOS系统的图片设计  151
5.5.1 图片的比例  151
5.5.2 图片的格式  152
5.6 iOS系统的网页布局  153
5.6.1 列表式布局  153
5.6.2 陈列馆式布局  153
5.6.3 宫格式布局  154
5.6.4 卡片式布局  154
5.7 iOS系统UI的设计原则  155
5.7.1 亲密性  155
5.7.2 对齐、对比和重复  156
5.7.3 直截了当    158
5.7.4 提供邀请    160
5.8 本章小结   162
第6章 Android系统UI设计
6.1 Android系统简介  163
6.2 Android系统的元素设计  163
6.2.1 设计单位    164
6.2.2 界面尺寸    165
6.2.3 组件尺寸    165
实战练习01――设计并制作App 的登录界面166
6.3 Android系统的文字设计  168
6.3.1 字体和字重  168
6.3.2 字号  169
6.4 Android系统的图标设计  170
6.4.1 启动图标    170
6.4.2 标签栏/ 系统通知图标170
6.4.3 上下文图标  171
6.4.4 图标尺寸    171
实战练习02――设计并制作App 界面中的上下文图标  172
6.5 Android系统UI的设计原则  174
6.5.1 一步到位    174
6.5.2 即时反应    177
6.5.3 简化交互    179
实战练习03――设计并制作Android 系统App“我的”界面181
6.6 本章小结   184
第7章适配输出网页UI设计
7.1 PC端网页的适配输出185
7.1.1 PC 端的适配方法  185
7.1.2 适配时需要注意的点   185
7.2 iOS系统界面的适配输出  186
7.2.1 界面标注    186
7.2.2 标注工具――PxCook188
实战练习01――标注iOS 系统App 界面191
7.2.3 适配输出    193
7.3 Android系统界面的适配输出195
7.3.1 界面标注    195
7.3.2 适配输出    196
7.3.3 .9 切图法    198
7.3.4 输出工具――Cutterman 插件201
实战练习02――输出Android 系统的App 界面  201
7.4 本章小结   203
第8章综合案例
8.1 设计PC端的家居网页204
8.1.1 家居网页案例分析  204
8.1.2 家居网页色彩分析  205
8.1.3 家居网页制作步骤  206
8.2 设计iOS系统的旅游App界面  209
8.2.1 旅游App 界面案例分析209
8.2.2 旅游App 界面色彩分析210
8.2.3 旅游App 界面制作步骤211
8.3 设计Android系统的家居App界面215
8.3.1 家居App 界面案例分析215
8.3.2 家居App 界面色彩分析217
8.3.3 家居App 界面制作步骤218
8.4 本章小结   222

查看详情

Photoshop+PxCook+Cutterman网页UI设计教程

内容简介:

作者简介:

目录: