Photoshop CC 移动UI 界面设计与实战(第2版)
玩转移动UI基础,掌控两大主流系统,精通APP套用设计,图文详解、配套视频,系统、全面、从新手到高手!
创锐设计 编着
ISBN 978-7-121-32980-7
2018年1月出版
定价:79.00元
292页
16开
基本介绍
- 书名:Photoshop CC 移动UI 界面设计与实战(第2版)
- 作者:创锐设计
- ISBN:978-7-121-32980-7
- 页数:292
- 定价:79
- 出版社:电子工业出版社
- 出版时间:2018-1-1
- 开本:16
内容提要
《Photoshop CC 移动UI 界面设计与实战(第2版)》从移动UI视觉设计的基础知识出发,通过分析和讲解两大主流系统的设计规範和设计技巧,将移动UI视觉设计中的创意思路与操作案例有机地结合在一起,力求在帮助读者提高UI界面製作能力的同时,拓展移动UI视觉设计的创作思路。
《Photoshop CC 移动UI 界面设计与实战(第2版)》包含三部分,共12个Part的内容。第1部分为基础篇(Part1~Part3):介绍移动UI视觉设计的基础知识,Photoshop软体的常用操作功能,以及移动UI界面中基础元素的设计规範;第2部分介绍两大主流系统(Part4~Part5):分别对两大系统进行有针对性的讲解,通过相关的案例介绍移动UI视觉设计的製作方法和技巧;第3部分讲解App套用实例(Part6~Part12):以完整的App界面设计为主要内容,展示不同风格移动UI界面设计的特点和製作方法。
《Photoshop CC 移动UI 界面设计与实战(第2版)》配有下载资源,内含不同类型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视觉的主要组成要素及特徵 / 10
1.4.1 iOS系统中的组成要素及特徵 / 10
1.4.2 Android系统中的组成要素及特徵 / 11
1.5 认识移动终端的解析度和像素 / 13
1.6 移动UI的创意与灵感收集 / 14
1.6.1 各种经验和灵感的记录 / 14
1.6.2 将对象抽象化 / 15
1.6.3 设计灵感的转移 / 16
1.7 移动UI的视觉设计流程 / 18
Part 2 PS在移动UI设计中的常用功能简介 / 21
2.1 绘图工具的介绍 / 22
2.1.1 规则形状的绘製 / 22
2.1.2 自定义形状的绘製 / 23
2.1.3 绘製任意所需的形状 / 25
2.2 图层样式的运用 / 26
2.2.1 增强立体感的图层样式 / 26
2.2.2 发光效果的图层样式 / 28
2.2.3 更改色彩的图层样式 / 29
2.3 蒙版的编辑 / 31
2.3.1 图层蒙版 / 31
2.3.2 剪贴蒙版 / 32
2.4 文字的添加 / 34
2.4.1 文字的添加与设定 / 34
2.4.2 文字的高级编辑 / 35
Part 3 移动UI界面中基本元素的製作 / 37
3.1 按钮 / 38
3.1.1 按钮设计的基础知识 / 38
3.1.2 扁平化按钮的设计 / 39
3.2 开关 / 42
3.2.1 开关设计的基础知识 / 42
3.2.2 简易色块开关的设计 / 44
3.2.3 拟物化开关的设计 / 45
3.3 进度条 / 47
3.3.1 进度条设计的基础知识 / 47
3.3.2 扁平化进度条的设计 / 49
3.3.3 层次感强烈的进度条设计 / 50
3.4 搜寻栏 / 54
3.4.1 搜寻栏设计的基础知识 / 54
3.4.2 扁平化搜寻栏的设计 / 56
3.5 列表框 / 61
3.5.1 列表框设计的基础知识 / 61
3.5.2 简易列表框的设计 / 62
3.5.3 立体化列表框的设计 / 64
3.6 标籤栏 / 68
3.6.1 标籤栏设计的基础知识 / 68
3.6.2 线性化标籤栏设计 / 69
3.6.3 木纹质感的标籤栏设计 / 70
3.7 图示栏 / 73
3.7.1 图示栏设计的基础知识 / 73
3.7.2 线性化图示栏设计 / 74
3.7.3 纸箱纹理的图示栏设计 / 77
Part 4 iOS系统及其组件的设计 / 81
4.1 iOS系统设计特点 / 82
4.1.1 充分利用整个萤幕 / 82
4.1.2 使用半透明底板 / 82
4.1.3 信息的清晰呈现 / 83
4.2 iOS系统设计的规範 / 85
4.2.1 设计原则 / 85
4.2.2 色彩和字型 / 88
4.2.3 图示的设计 / 92
4.3 iOS系统界面设计实训 / 96
4.3.1 扁平化图示的设计 / 96
4.3.2 半透明效果的界面设计 / 104
Part 5 Android系统及其组件的设计 / 111
5.1 Android系统的特点 / 112
5.2 Android系统的设计规範 / 114
5.2.1 度量单位 / 114
5.2.2 字型的使用标準 / 116
5.2.3 色彩的套用规範 / 117
5.2.4 四种类型的图示 / 120
5.3 六种标準的Widget规範 / 122
5.3.1 Widget框架简介 / 122
5.3.2 Widget框架的标準尺寸 / 124
5.3.3 4×1的Widget框架设计 / 125
5.3.4 3×3的Widget框架设计 / 129
5.3.5 2×2的Widget框架设计 / 133
5.3.6 4×1的加长Widget框架设计 / 136
5.3.7 3×3的横向Widget框架设计 / 140
5.3.8 2×2的横向Widget框架设计 / 145
5.4 Android系统界面设计实训 / 150
5.4.1 立体化的图示设计 / 150
5.4.2 超强立体感的界面设计 / 159
Part 6 孕妈帮手App设计 / 171
界面布局规划 / 172
创意思路剖析 / 172
确定配色方案 / 173
定义组件风格 / 174
製作步骤详解 / 174
Part 7 美食网站App设计 / 185
界面布局规划 / 186
创意思路剖析 / 186
确定配色方案 / 187
定义组件风格 / 188
製作步骤详解 / 188
Part 8 篮球运动App设计 / 201
界面布局规划 / 202
创意思路剖析 / 202
确定配色方案 / 203
定义组件风格 / 203
製作步骤详解 / 204
Part 9 流量银行App设计 / 217
界面布局规划 / 218
创意思路剖析 / 218
确定配色方案 / 219
定义组件风格 / 219
製作步骤详解 / 220
Part 10 藏宝游戏App设计 / 231
界面布局规划 / 232
创意思路剖析 / 232
确定配色方案 / 233
定义组件风格 / 234
製作步骤详解 / 234
Part 11 音乐播放App设计 / 247
界面布局规划 / 248
创意思路剖析 / 248
确定配色方案 / 249
定义组件风格 / 250
製作步骤详解 / 250
Part 12 旅游资讯App设计 / 267
界面布局规划 / 268
创意思路剖析 / 268
确定配色方案 / 269
定义组件风格 / 270
製作步骤详解 / 270
前言
在科技高速发展的今天,移动设备已经成为人们生活和娱乐的必需品之一,移动设备的用户界面及体验越来越受到用户的关注。对于一个优秀的App应用程式而言,其界面的视觉设计起着关键的作用,它是除互动式设计外,用户能够直接接触到的东西。如果把App的功能比作人的肌肉和骨骼,那幺移动UI的视觉设计就是人的外貌和品格,是一款成功的应用程式必不可少的重要组成部分。设计师如何才能设计出让人过目不忘且实用美观的界面呢?在本书中你可以找到答案。
本书从移动UI界面设计的基础开始,针对当今主流的两大移动系统,讲述移动UI视觉设计的创意收集、设计重点、製作规範等一系列的知识,将理论与实践进行有机结合,通过从无到有、从局部到整体的方式讲解App应用程式的界面设计,帮助读者建立正确、实用的移动UI视觉设计的思路与方法。
本书内容梗概
第1部分 基础篇(Part 1~Part 3):介绍移动UI视觉设计的基础知识,讲解移动UI视觉设计所使用到的Photoshop软体的常用操作功能,以及移动UI界面中基础元素的设计规範。
第2部分 两大主流系统(Part 4、Part 5):对两大系统进行有针对性的讲解,从界面的图示、设计风格等角度入手,讲述两大系统各自的区别与特点,并利用相关的案例来介绍移动UI视觉设计的製作方法和技巧。
第3部分 App套用实例(Part 6~Part 12):以完整的App界面设计为主要内容,通过对界面布局、创意、配色和组件等进行详细分析,用不同功能的App的创作思维和製作步骤来展示不同风格的移动UI界面设计的特点和製作方法。
本书特色分析
全面系统的知识体系:书中将两大主流系统的设计规範和风格进行了详细介绍,通过图文并茂、层次清晰的方式直观地展示出全面而系统的移动UI视觉设计的相关知识,帮助读者了解和掌握与移动UI视觉设计相关的概念和必备的基础知识。
精闢的设计思路剖析:在本书的案例中,我们针对案例设计的创意思路、设计来源等进行详细阐述,帮助读者形成自己的设计思维,并将设计创意分析与软体操作相结合,让读者在提升移动UI界面製作技能的同时,拓展创意和设计思维。
呈现精美的设计案例:书中包含了大量精美的App设计案例,每个案例都根据不同类型和功能的App进行构思和创作,并将平面设计知识和软体运用知识贯穿其中,可以帮助读者快速提高设计思维的灵活性和软体操作技能。