UI设计实战精讲

当今是以互联网发展为主的时代，人们的生活大多离不开电商购物、手机娱乐，互联网已占据了人们生活的相当一部分。随着计算机行业和互联网的迅速发展以及应用领域的拓宽，用户界面（UI）设计逐渐成为互联网热门的专业。用户界面是系统中不可缺少的部分，是人与电子计算机系统进行交互和信息交换的媒介，是用户使用电子计算机的综合环境。近年来，从事UI设计的人越来越多，企业对UI设计的要求越来越高，UI设计师的薪资也水涨船高。这背后的原因，是近年来智能移动设备越来越流行。

现今，智能设备和网络飞速发展，各种通信和网络连接设备与大众生活的联系日益密切。UI是用户与机器设备进行交互的平台，人们对各种类型UI的要求越来越高，促进了UI设计行业的兴盛，这就为UI设计人员提供了很大的发展空间。而作为从事相关工作的人员则必须要掌握必要的操作技能，以满足工作的需要。UI设计是指为用户提供人机交互的可视化界面，在UI的设计中，需要提取用户需求，针对需求进行分析，设计出合理美观并且操作简便的界面。UI设计是一门集工效学、认知心理学、人机交互原理学、设计艺术原理于一身的综合性学科。

本书用一种新的思路和方式来阐述UI设计的必修内容，包括技术、方法、流程与标准；从零开始，详细地讲解与UI设计有关的实用知识，可读性强，注重逻辑思维培养和从用户需求角度来考虑产品功能，帮助读者快速地建立起自己的UI设计知识框架。同时，本书弥补了市场上相关优秀书籍缺乏的现状，讲解了UI设计的视觉、用户体验、交互设计等方面的知识。

全书共十五章，系统地讲解了UI设计的发展过程、制作技巧和应用方法等，各章内容分别为：

章为互联网产品设计，主要讲解什么是互联网产品设计，互联网产品产生流程，互联网产品竞品分析方法及互联网产品的用户研究方法。

第二章为感知移动设计，主要介绍移动设计的特点，移动应用的生命周期，移动设计的创新——互联网思维，移动设备的三大主流平台和应用，移动设备中的人机交互设计，移动UI设计发展新趋势，移动设计就业要求等问题。

第三章为用户体验与UI交互设计概述，主要解读UI设计，用户体验，用户体验设计三大流程，交互设计，原型设计工具等内容。

第四章为移动产品的创意和原型草图设计，主要讲解移动产品的创意，移动产品的定位，移动产品的需求分析，讨论与初步设计，绘制用户体验原型草图等知识。

第五章为移动产品的低保真原型设计，主要研究移动应用产品设计规范，界面布局和导航机制，设计组件，低保真原型设计流程，低保真原型的可用性测试。

第六章为移动产品的高保真原型视觉设计，主要讲解图形元素的合理构建，界面的色彩选择，文字使用技巧，数字界面的主流风格与图标设计等知识。

第七章为Axure RP 8.0软件界面操作基础，主要讲解Axure软件综述，Axure基础元件，Axure RP 8.0元件基础应用案例。

第八章为微信交互案例，讲解微信登录界面操作案例，微信抽屉式导航案例，微信交互原型案例。

第九章为交互原型案例，讲解地图App交互原型案例，购物App交互原型案例，社团App案例，当地旅游App作品展示等内容。

第十章为XMind流程图设计基础，讲解流程图概述，创建流程图，流程图模板和结构，主题，导出与导入。

第十一章为Photoshop——App图标设计，主要讲解图标设计的基础知识，图标欣赏，心形图标设计，计算器图标设计，时钟图标设计等知识。

第十二章为Photoshop——手机主题界面设计，主要讲解手机主题的基础知识，手机主题界面赏析，“水晶花”主题界面设计，“冬雪的冬天”主题界面设计，“美好生日梦”主题界面设计，“清新雏菊”制作。

第十三章为AE动效设计基础，主要讲解如何导入素材输出格式，动态二维码的5个属性，常用工具栏及摄像机功能，GIF生成。

第十四章为响应式网站和H5动画，主要讲解HTML5的三个优势，HTML5的八大特性，HTML5的应用及布局方式，CSS3视觉表现方面的新特性。

第十五章为VR（虚拟现实）和AR（增强现实）交互，主要讲解VR和AR技术及其发展历史，VR和AR的发展前景及体系，VR和AR硬件及盈利模式，VR和AR交互，VR和AR项目设计流程及应用领域等知识。

本书作者中，李庆德（佛山科学技术学院）撰写第1～6章（约21万字），陈峰（台州学院）撰写第7～10章（约13万字），马凯（齐齐哈尔大学）撰写第11～15章（约15万字）。后，要特别感谢在本书编写过程中给予大力支持的UI设计方面的老师和同仁们，特别感谢尤媛媛和沈舒心提供的文字及图片整理工作。

因笔者水平有限，书中不足之处希望广大读者和专家批评指正！

著者　

2021年2月

互联网的发展，尤其是移动互联网的发展，使得社会对于UI设计人员的需求越来越大，其从业人员也需不断学习。本书共分十五章，以移动互联网应用需求为导向，以丰富实例为手段，详细讲解了UI设计的方法和技巧，以及注意事项等内容。

本书适宜从事UI设计以及相关的设计和美编人员参考。

李庆德，佛山科学技术学院视觉传达设计系教师，东北林业大学博士

从事艺术设计教学工作多年，在艺术设计、设计心理学、艺术理论、艺术展览诸方面发表了大量的作品及成果

2002年开始教授设计心理学、家具设计、广告设计及平面设计课程，发表多篇艺术设计论文，多年来积累大量设计教学经验和设计实例。发表sci文章19篇，中文论文有12篇，作品获得多种奖项。书籍主要有《CI设计原理与实践》《广告文案写作》《产品设计色彩》《Photoshop CS5艺术处理实例教程》《21世纪全国高等院校艺术设计系列实用规划教材：Photoshop CS5艺术处理实例教程》《家具设计》《数码照片艺术化处理圣经》等

2007年就读于中国?日本电通广告人才培养研修班

版画作品《城市和我》入围台湾、香港、齐齐哈尔两岸三地艺术作品展

章　互联网产品设计 001

节　什么是互联网产品设计 002

第二节　互联网产品产生流程 008

第三节　互联网产品竞品分析方法 013

第四节　互联网产品的用户研究方法 018

第二章　感知移动设计 025

节　移动设计的特点 026

第二节　移动应用的生命周期 030

第三节　移动设计的创新——互联网思维 036

第四节　移动设备的三大主流平台和应用 039

第五节　移动设备中的人机交互设计 044

第六节　移动UI设计发展新趋势 046

第七节　移动设计就业要求 050

第三章　用户体验与UI交互设计概述 053

节　UI设计 054

第二节　用户体验 060

第三节　用户体验设计三大流程 066

第四节　交互设计 074

第五节　原型设计工具 075

第四章　移动产品的创意和原型草图设计 085

节　移动产品的创意 086

第二节　移动产品的定位 091

第三节　移动产品的需求分析 095

第四节　讨论与初步设计 099

第五节　绘制用户体验原型草图 103

第五章　移动产品的低保真原型设计 116

节　移动应用产品设计规范 118

第二节　界面布局和导航机制 127

第三节　设计组件 132

第四节　低保真原型设计流程 139

第五节　低保真原型的可用性测试 144

第六章　移动产品的高保真原型视觉设计 149

节　图形元素的合理构建 150

第二节　界面的色彩选择 154

第三节　文字使用技巧 159

第四节　数字界面的主流风格与图标设计 160

第七章　Axure RP 8.0软件界面操作基础 167

节　Axure软件综述 168

第二节　Axure基础元件 171

第三节　Axure RP 8.0元件基础应用案例 174

第八章　微信交互案例 182

节　微信登录界面操作案例 182

第二节　微信抽屉式导航案例 186

第三节　微信交互原型案例 189

第九章　交互原型案例 194

节　地图App交互原型案例 194

第二节　购物App交互原型案例 199

第三节　社团App案例 202

第四节　当地旅游App作品展示 204

第十章　XMind流程图设计基础 207

节　流程图概述 207

第二节　创建流程图 210

第三节　流程图模板和结构 212

第四节　主题 214

第五节　导出与导入 217

第十一章　Photoshop——App图标设计 220

节　图标设计的基础知识 220

第二节　图标欣赏 222

第三节　心形图标设计 223

第四节　计算器图标设计 229

第五节　时钟图标设计 233

第十二章　Photoshop——手机主题界面设计 242

节　手机主题的基础知识 242

第二节　手机主题界面赏析 243

第三节　“水晶花”主题界面设计 244

第四节　“冬雪的冬天”主题界面设计 248

第五节　“美好生日梦”主题界面设计 251

第六节　“清新雏菊”制作 254

第十三章　AE动效设计基础 257

节　导入素材输出格式 257

第二节　动态二维码的5个属性 264

第三节　常用工具栏及摄像机功能 270

第四节　GIF生成 281

第十四章　响应式网站和H5动画 287

节　HTML5的三个优势 288

第二节　HTML5的八大特性 289

第三节　HTML5的应用及布局方式 290

第四节　CSS3视觉表现方面的新特性 291

第十五章　VR （虚拟现实）和AR （增强现实）交互 298

节　VR和AR技术及其发展历史 299

第二节　VR和AR的发展前景及体系 301

第三节　VR和AR硬件及盈利模式 303

第四节　VR和AR交互 309

第五节　VR和AR项目设计流程及应用领域 313

参考文献 316