新印象解构UI界面设计

新印象解构UI界面设计
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者:
2019-01
版次: 1
ISBN: 9787115492272
定价: 79.00
装帧: 平装
开本: 小16开
页数: 256页
正文语种: 简体中文
434人买过
  • 这是一本全面介绍UI设计的书,是帮助初级和中级读者快速学习UI设计知识、技巧和操作的参考书。
    本书从UI设计基础入手,结合大量的案例分析和针对性实战,全面深入地阐述了UI设计的界面类型、界面构图、版面布局、元素运用、界面用色、设计原则与规范、切图与标注、图标设计及艺术二维码设计等方面的内容。
    本书共9章,每章分别介绍一个板块的内容,讲解细致,案例分析与实战数量丰富。通过丰富的实战练习,读者可以轻松而高效地掌握UI设计的相关技术。
    本书讲解模式新颖,非常符合读者学习新知识的思维习惯。书中附带所有实战的源文件(完成文件)和素材文件,以方便读者练习。
    本书适合UI设计师、准备转入UI设计方向的平面设计师,以及相关专业的高校学生阅读。 王铎,先后服务于腾讯、奇虎360、jin日头条等知名公司,人民网特邀讲师。 参与项目手机QQ、360****、360空气净化器及360防丢卫士、老虎地图、****等产品。 第五届国际大学生动画节漫画插画类作品奖 创意紫峰优秀作品奖中国包装创意设计大赛 优秀奖中国之星设计艺术大奖获 中国绿化基金会“绿色爱心设计师”称号。 第 1章  界面类型/       009
    1.1  闪屏页 010
    1.1.1  品牌宣传型/ 010
    1.1.2  节假关怀型/ 011
    1.1.3  活动推广型/ 012
    1.2  引导页 013
    1.2.1  功能介绍型(基础型)/ 013
    1.2.2  情感带入型(中级型)/ 014
    1.2.3  搞笑型(高级型)/ 015
    1.3  浮层引导页/ 016
    1.4  空白页/ 017
    1.4.1  首次进入型/ 017
    1.4.2  错误提示型/ 018
    1.5  首页/ 019
    1.5.1  列表型/ 019
    1.5.2  图标型/ 020
    1.5.3  卡片型/ 020
    1.5.4  综合型/ 021
    1.6  个人中心页/ 022
    1.7  列表页/ 024
    1.7.1  单行列表/ 024
    1.7.2  双行列表/ 025
    1.7.3  时间轴/ 025
    1.7.4  图库列表/ 026
    1.8  播放页面/ 027
    1.9  详情页/ 028
    1.10  可输入页面/ 029
    1.11  实战:两步打造炫酷界面/ 030
    1.11.1  绘制基础图形/ 030
    1.11.2  添加颜色与细节/ 032

    第 2章  界面构图/       035
    2.1  九宫格构图/ 036
    案例分析/ 037
    2.2  圆心放射构图/ 038
    案例分析/ 039
    2.3  三角形构图/ 041
    案例分析/ 041
    2.4  S形构图/ 043
    案例分析/ 044
    2.5  F形构图/ 047
    案例分析/ 047
    2.6  实战:用多种构图方式制作运动App/ 048
    2.6.1  用放射构图设计运动页面/ 048
    2.6.2  用倒三角形构图设计地图页面/ 053
    2.6.3  用三角形构图设计个人页面/ 056

    第3章  版面布局/      059
    3.1  界面版率/ 060
    3.1.1  单色块填充/ 061
    3.1.2  多色块组合/ 062
    3.1.3  穿插填充/ 062
    3.1.4  关键词图形化/ 063
    3.1.5  放大文字/ 064
    3.2  抠图法/ 065
    案例分析/ 065
    3.3  破界法/ 066
    案例分析/ 066
    3.4  局部提取/ 069
    案例分析/ 069
    3.5  对齐原则/ 070
    3.5.1  界面中常用的对齐方式/ 070
    3.5.2  小米的登录页/ 072
    3.5.3  苹果的登录页/ 073
    3.6  间距使用/ 074
    案例分析/ 074
    3.7  视觉层次/ 077
    案例分析/ 077
    3.8  实战:设计智能空气净化器界面/080
    3.8.1  对页面进行整体布局/ 080
    3.8.2  设计“较差”页面/ 082
    3.8.3  设计“良好”页面/ 086

    第4章  元素之道/      087
    4.1  点线面/ 088
    案例分析/ 088
    4.2  极简至上/ 093
    案例分析/ 093
    4.3  品牌灵魂/ 095
    案例分析/ 095
    4.4  形象灵魂化/ 096
    案例分析/ 096
    4.5  运动赋予生命/ 099
    案例分析/ 099
    4.6  菜单设定/ 100
    案例分析/ 100
    4.7  实战:快速制作晶格化界面/ 101
    4.7.1  制作圆形头像/ 101
    4.7.2  制作晶格背景/ 102
    4.7.3  制作界面细节/ 104

    第5章  “色诱”用户/  107
    5.1  感知色彩/ 108
    5.1.1  红色/ 109
    5.1.2  橙色/ 110
    5.1.3  黄色/ 110
    5.1.4  绿色/ 111
    5.1.5  蓝色/ 111
    5.1.6  粉色/ 112
    5.1.7  黑色/ 112
    5.2  色不过三/ 113
    案例分析/ 113
    5.3  主色、辅助色及点睛色/ 116
    5.3.1  主色/ 116
    5.3.2  辅助色/ 117
    5.3.3  点睛色/ 118
    5.4  如何配色/ 119
    5.4.1  互补色搭配/ 119
    5.4.2  冷暖对比搭配/ 121
    5.5  实战:设计一款色彩统一的界面/123
    5.5.1  设计页面图标/ 123
    5.5.2  设计个人中心页/ 128
    5.5.3  设计聊天页面/ 132

    第6章  设计原则及规范/135
    6.1  iOS的五大设计原则/ 136
    6.1.1  凸显内容原则/ 137
    6.1.2  统一化原则/ 139
    6.1.3  适应化原则/ 140
    6.1.4  层级性原则/ 144
    6.1.5  易操作性原则/ 145
    6.2  iOS界面尺寸及控件设计规范/ 147
    6.2.1  界面尺寸/ 147
    6.2.2  控件规范/ 149
    6.3  Android设计原则及规范/ 154
    6.3.1  Android的设计原则/ 154
    6.3.2  Android的控件设计规范/ 158
    6.3.3  Android的设计尺寸及单位/ 163
    6.4  常用字体规范/ 165
    6.4.1  成也字,败也字/ 165
    6.4.2  字不过三/ 166
    案例分析/ 166
    6.4.3  字与背景要分明/ 168
    6.4.4  字体与气氛要匹配/ 168
    案例分析/ 168
    6.4.5  常用字体类型/ 169
    6.4.6  界面字体规范/ 172
    6.4.7  字体常用颜色/ 174
    6.5  建立一套设计规范/ 175
    6.5.1  色彩控件规范/ 176
    6.5.2  按钮控件规范/ 177
    6.5.3  分割线规范/ 177
    6.5.4  头像规范/ 177
    6.5.5  提示框规范/ 178
    6.5.6  文字规范/ 179
    6.5.7  间距规范/ 180
    6.5.8  图标规范/ 181
    6.6  实战:打造毛笔字风格的登录页/182
    6.6.1  制作基础字体/ 182
    6.6.2  用笔刷设计细节/ 184

    第7章  切图与标注/    189
    7.1  高效切图/ 190
    7.1.1  iPhone屏幕与Android手机屏幕的关系/ 190
    7.1.2  Android的常用单位/ 191
    7.1.3  通用切图法/ 192
    7.1.4  Android“点九”切图法/ 194
    7.2  界面标注/ 197
    7.2.1  标注软件/ 197
    7.2.2  标注规范/ 198
    7.3  实战:为一款首页界面切图/ 201
    7.3.1  切图分析/ 201
    7.3.2  iOS切图/ 203
    7.3.3  Android切图/ 205

    第8章  图标设计/       207
    8.1  图标创意/ 208
    8.1.1  卡通形象化/ 208
    8.1.2  关键词图形化/ 208
    8.1.3  字体直观化/ 209
    案例分析/ 209
    8.2  图标类型/ 210
    8.2.1  像素图标/ 210
    案例分析/ 211
    8.2.2  拟物化图标/ 212
    8.2.3  扁平化图标/ 212
    案例分析/ 214
    8.2.4  线性图标/ 215
    案例分析/ 215
    8.2.5  立体图标/ 217
    案例分析/ 217
    8.3  实战:绘制功能图标/ 219
    8.3.1  功能图标设计规范/ 219
    8.3.2  功能图标绘制过程/ 220
    8.4  实战:制作立体图标/ 227
    8.4.1  制作透视网格/ 227
    8.4.2  制作立体字/ 228
    8.4.3  制作灯泡/ 229
    8.4.4  制作光晕/ 230
    8.5  实战:快速制作线条流畅的Logo/231
    8.5.1  制作Logo形状的辅助线/ 231
    8.5.2  生成Logo路径形状/ 232
    8.5.3  将辅助线设置为虚线/ 234

    第9章  高端艺术二维码/  235
    9.1  原理结构/ 236
    9.2  动态二维码的表现/ 239
    9.2.1  MICU二维码——航行/ 239
    9.2.2  MICU二维码——音乐节/ 240
    9.2.3  MICU二维码——清凉夏日/ 241
    9.2.4  MICU二维码——UI疫苗站/ 241
    9.2.5  MICU二维码——设计乐园/ 242
    案例分析/ 242
    9.3  实战:制作宝马春节艺术二维码/245
    9.3.1  制作原码/ 245
    9.3.2  设计二维码/ 246
    9.3.3  制作动效/ 249
    9.4  实战:快速制作界面动态展示图/253
    9.4.1  导入GIF并转为智能对象/ 253
    9.4.2  制作透视展示图/ 254
  • 内容简介:
    这是一本全面介绍UI设计的书,是帮助初级和中级读者快速学习UI设计知识、技巧和操作的参考书。
    本书从UI设计基础入手,结合大量的案例分析和针对性实战,全面深入地阐述了UI设计的界面类型、界面构图、版面布局、元素运用、界面用色、设计原则与规范、切图与标注、图标设计及艺术二维码设计等方面的内容。
    本书共9章,每章分别介绍一个板块的内容,讲解细致,案例分析与实战数量丰富。通过丰富的实战练习,读者可以轻松而高效地掌握UI设计的相关技术。
    本书讲解模式新颖,非常符合读者学习新知识的思维习惯。书中附带所有实战的源文件(完成文件)和素材文件,以方便读者练习。
    本书适合UI设计师、准备转入UI设计方向的平面设计师,以及相关专业的高校学生阅读。
  • 作者简介:
    王铎,先后服务于腾讯、奇虎360、jin日头条等知名公司,人民网特邀讲师。 参与项目手机QQ、360****、360空气净化器及360防丢卫士、老虎地图、****等产品。 第五届国际大学生动画节漫画插画类作品奖 创意紫峰优秀作品奖中国包装创意设计大赛 优秀奖中国之星设计艺术大奖获 中国绿化基金会“绿色爱心设计师”称号。
  • 目录:
    第 1章  界面类型/       009
    1.1  闪屏页 010
    1.1.1  品牌宣传型/ 010
    1.1.2  节假关怀型/ 011
    1.1.3  活动推广型/ 012
    1.2  引导页 013
    1.2.1  功能介绍型(基础型)/ 013
    1.2.2  情感带入型(中级型)/ 014
    1.2.3  搞笑型(高级型)/ 015
    1.3  浮层引导页/ 016
    1.4  空白页/ 017
    1.4.1  首次进入型/ 017
    1.4.2  错误提示型/ 018
    1.5  首页/ 019
    1.5.1  列表型/ 019
    1.5.2  图标型/ 020
    1.5.3  卡片型/ 020
    1.5.4  综合型/ 021
    1.6  个人中心页/ 022
    1.7  列表页/ 024
    1.7.1  单行列表/ 024
    1.7.2  双行列表/ 025
    1.7.3  时间轴/ 025
    1.7.4  图库列表/ 026
    1.8  播放页面/ 027
    1.9  详情页/ 028
    1.10  可输入页面/ 029
    1.11  实战:两步打造炫酷界面/ 030
    1.11.1  绘制基础图形/ 030
    1.11.2  添加颜色与细节/ 032

    第 2章  界面构图/       035
    2.1  九宫格构图/ 036
    案例分析/ 037
    2.2  圆心放射构图/ 038
    案例分析/ 039
    2.3  三角形构图/ 041
    案例分析/ 041
    2.4  S形构图/ 043
    案例分析/ 044
    2.5  F形构图/ 047
    案例分析/ 047
    2.6  实战:用多种构图方式制作运动App/ 048
    2.6.1  用放射构图设计运动页面/ 048
    2.6.2  用倒三角形构图设计地图页面/ 053
    2.6.3  用三角形构图设计个人页面/ 056

    第3章  版面布局/      059
    3.1  界面版率/ 060
    3.1.1  单色块填充/ 061
    3.1.2  多色块组合/ 062
    3.1.3  穿插填充/ 062
    3.1.4  关键词图形化/ 063
    3.1.5  放大文字/ 064
    3.2  抠图法/ 065
    案例分析/ 065
    3.3  破界法/ 066
    案例分析/ 066
    3.4  局部提取/ 069
    案例分析/ 069
    3.5  对齐原则/ 070
    3.5.1  界面中常用的对齐方式/ 070
    3.5.2  小米的登录页/ 072
    3.5.3  苹果的登录页/ 073
    3.6  间距使用/ 074
    案例分析/ 074
    3.7  视觉层次/ 077
    案例分析/ 077
    3.8  实战:设计智能空气净化器界面/080
    3.8.1  对页面进行整体布局/ 080
    3.8.2  设计“较差”页面/ 082
    3.8.3  设计“良好”页面/ 086

    第4章  元素之道/      087
    4.1  点线面/ 088
    案例分析/ 088
    4.2  极简至上/ 093
    案例分析/ 093
    4.3  品牌灵魂/ 095
    案例分析/ 095
    4.4  形象灵魂化/ 096
    案例分析/ 096
    4.5  运动赋予生命/ 099
    案例分析/ 099
    4.6  菜单设定/ 100
    案例分析/ 100
    4.7  实战:快速制作晶格化界面/ 101
    4.7.1  制作圆形头像/ 101
    4.7.2  制作晶格背景/ 102
    4.7.3  制作界面细节/ 104

    第5章  “色诱”用户/  107
    5.1  感知色彩/ 108
    5.1.1  红色/ 109
    5.1.2  橙色/ 110
    5.1.3  黄色/ 110
    5.1.4  绿色/ 111
    5.1.5  蓝色/ 111
    5.1.6  粉色/ 112
    5.1.7  黑色/ 112
    5.2  色不过三/ 113
    案例分析/ 113
    5.3  主色、辅助色及点睛色/ 116
    5.3.1  主色/ 116
    5.3.2  辅助色/ 117
    5.3.3  点睛色/ 118
    5.4  如何配色/ 119
    5.4.1  互补色搭配/ 119
    5.4.2  冷暖对比搭配/ 121
    5.5  实战:设计一款色彩统一的界面/123
    5.5.1  设计页面图标/ 123
    5.5.2  设计个人中心页/ 128
    5.5.3  设计聊天页面/ 132

    第6章  设计原则及规范/135
    6.1  iOS的五大设计原则/ 136
    6.1.1  凸显内容原则/ 137
    6.1.2  统一化原则/ 139
    6.1.3  适应化原则/ 140
    6.1.4  层级性原则/ 144
    6.1.5  易操作性原则/ 145
    6.2  iOS界面尺寸及控件设计规范/ 147
    6.2.1  界面尺寸/ 147
    6.2.2  控件规范/ 149
    6.3  Android设计原则及规范/ 154
    6.3.1  Android的设计原则/ 154
    6.3.2  Android的控件设计规范/ 158
    6.3.3  Android的设计尺寸及单位/ 163
    6.4  常用字体规范/ 165
    6.4.1  成也字,败也字/ 165
    6.4.2  字不过三/ 166
    案例分析/ 166
    6.4.3  字与背景要分明/ 168
    6.4.4  字体与气氛要匹配/ 168
    案例分析/ 168
    6.4.5  常用字体类型/ 169
    6.4.6  界面字体规范/ 172
    6.4.7  字体常用颜色/ 174
    6.5  建立一套设计规范/ 175
    6.5.1  色彩控件规范/ 176
    6.5.2  按钮控件规范/ 177
    6.5.3  分割线规范/ 177
    6.5.4  头像规范/ 177
    6.5.5  提示框规范/ 178
    6.5.6  文字规范/ 179
    6.5.7  间距规范/ 180
    6.5.8  图标规范/ 181
    6.6  实战:打造毛笔字风格的登录页/182
    6.6.1  制作基础字体/ 182
    6.6.2  用笔刷设计细节/ 184

    第7章  切图与标注/    189
    7.1  高效切图/ 190
    7.1.1  iPhone屏幕与Android手机屏幕的关系/ 190
    7.1.2  Android的常用单位/ 191
    7.1.3  通用切图法/ 192
    7.1.4  Android“点九”切图法/ 194
    7.2  界面标注/ 197
    7.2.1  标注软件/ 197
    7.2.2  标注规范/ 198
    7.3  实战:为一款首页界面切图/ 201
    7.3.1  切图分析/ 201
    7.3.2  iOS切图/ 203
    7.3.3  Android切图/ 205

    第8章  图标设计/       207
    8.1  图标创意/ 208
    8.1.1  卡通形象化/ 208
    8.1.2  关键词图形化/ 208
    8.1.3  字体直观化/ 209
    案例分析/ 209
    8.2  图标类型/ 210
    8.2.1  像素图标/ 210
    案例分析/ 211
    8.2.2  拟物化图标/ 212
    8.2.3  扁平化图标/ 212
    案例分析/ 214
    8.2.4  线性图标/ 215
    案例分析/ 215
    8.2.5  立体图标/ 217
    案例分析/ 217
    8.3  实战:绘制功能图标/ 219
    8.3.1  功能图标设计规范/ 219
    8.3.2  功能图标绘制过程/ 220
    8.4  实战:制作立体图标/ 227
    8.4.1  制作透视网格/ 227
    8.4.2  制作立体字/ 228
    8.4.3  制作灯泡/ 229
    8.4.4  制作光晕/ 230
    8.5  实战:快速制作线条流畅的Logo/231
    8.5.1  制作Logo形状的辅助线/ 231
    8.5.2  生成Logo路径形状/ 232
    8.5.3  将辅助线设置为虚线/ 234

    第9章  高端艺术二维码/  235
    9.1  原理结构/ 236
    9.2  动态二维码的表现/ 239
    9.2.1  MICU二维码——航行/ 239
    9.2.2  MICU二维码——音乐节/ 240
    9.2.3  MICU二维码——清凉夏日/ 241
    9.2.4  MICU二维码——UI疫苗站/ 241
    9.2.5  MICU二维码——设计乐园/ 242
    案例分析/ 242
    9.3  实战:制作宝马春节艺术二维码/245
    9.3.1  制作原码/ 245
    9.3.2  设计二维码/ 246
    9.3.3  制作动效/ 249
    9.4  实战:快速制作界面动态展示图/253
    9.4.1  导入GIF并转为智能对象/ 253
    9.4.2  制作透视展示图/ 254
查看详情