App+软件+游戏+网站界面设计教程电子书

内容简介

PREFACE　前言

读者服务

第1章　UI界面设计基础

1.1　了解UI界面设计

1.1.1　什么是UI界面设计

1.1.2　UI界面设计的发展历史

1.1.3　UI界面设计的分类

1.2　UI界面设计中的图像

1.2.1　常见的图像格式

1.2.2　常见的图像类型

1.3　UI界面设计中的文字

1.3.1　简化文字内容

1.3.2　字体设计合理

1.3.3　安排文字层次

1.3.4　信息表达准确

1.3.5　文字画面美感设计

1.4　UI界面设计中的黄金法则

1.4.1　保持界面的一致性

1.4.2　在界面中设置快捷方式

1.4.3　为用户提供信息反馈

1.4.4　提供简单的错误处理

1.5　UI界面设计的色彩搭配

1.5.1　色彩基础

1.5.2　色彩搭配原则

1.5.3　色彩搭配方案

1.6　UI界面设计中的布局

1.6.1　构图的基本概念

1.6.2　构图的法则

1.7　UI界面设计的工作流程

1.7.1　市场调研/需求分析

1.7.2　设计分析/线框图绘制

1.7.3　界面制作/调研验证

1.7.4　测试产品/改进方案

1.7.5　投入市场/用户反馈

1.8　常见的UI界面设计软件

1.8.1　Axure RP

1.8.2　Sketch

1.8.3　Photoshop

1.8.4　Illustrator

1.9　本章小结

第2章　UI界面设计元素

2.1　UI界面设计元素的分类

2.2　UI界面中的启动界面

2.2.1　启动界面的概念

2.2.2　启动界面的作用

2.2.3　启动界面的设计技巧

2.3　UI界面中的装饰线条

2.3.1　点与线的关系

2.3.2　线条风格的变化

2.3.3　装饰线条的作用

2.4　UI界面中的按钮和图标

2.4.1　按钮设计的概况

实战练习01　制作扁平化按钮

2.4.2　UI界面中的图标

2.4.3　图标的设计原则

2.4.4　图标的常用格式

2.4.5　拟物化风格图标

实战练习02　设计制作逼真的话筒图标

2.4.6　扁平化风格图标

实战练习03　设计制作扁平化图标

2.5　UI界面中的开关和进度条

2.5.1　软件开关

2.5.2　进度条设计

实战练习04　设计制作进度条

2.6　UI界面中的菜单和工具栏设计

2.6.1　菜单的重要性

2.6.2　菜单的设计重点

实战练习05　制作UI界面导航和索引菜单

2.6.3　工具栏的作用

2.7　本章小结

第3章　软件UI界面设计

3.1　软件界面设计基础

3.1.1　软件界面的概念

3.1.2　软件界面的分类

3.1.3　与移动端的差异性

3.1.4　软件包装及市场化

3.2　PC端应用软件设计规范

3.2.1　颜色规范

3.2.2　文字规范

3.2.3　控件规范

3.2.4　尺寸规范

3.3　软件安装与启动界面设计

3.3.1　软件启动界面设计

3.3.2　软件安装界面流程

3.3.3　安装界面的细节设计

3.4　软件面板设计

3.4.1　软件面板布局

实战练习01　制作在线聊天软件的界面框架

3.4.2　软件面板布局的合理性

实战练习02　制作软件界面的标题栏、头像与图标

3.4.3　软件面板的设计原则

实战练习03　制作聊天软件界面的联系人列表

3.5　软件皮肤设计

3.6　播放器软件界面设计

3.6.1　播放器界面设计原则

实战练习04　制作图片播放器的背景和名称

3.6.2　界面的人性化设计

实战练习05　制作图片播放器的主体

3.7　本章小结

第4章　游戏UI界面设计

4.1　游戏UI界面设计基础

4.1.1　关于游戏UI界面设计

4.1.2　游戏UI界面中的设计理念

4.1.3　与其他UI界面设计的区别

4.1.4　认知心理学的作用

4.2　游戏UI界面设计中的视听元素

4.2.1　图形元素设计

实战练习01　制作游戏界面的背景和图形元素

4.2.2　动态元素设计

实战练习02　制作游戏界面的标签栏

4.2.3　视听元素设计

实战练习03　制作游戏界面的导航栏和装饰元素

4.3　游戏UI界面设计的要求

4.3.1　游戏UI界面设计的准备工作

实战练习04　制作游戏的帮助界面

4.3.2　游戏UI界面的设计原则

4.3.3　游戏UI界面的设计要点

4.4　游戏UI界面的类型

4.4.1　PC端游戏UI界面设计

4.4.2　移动端游戏UI界面设计

4.5　本章小结

第5章　网页UI界面设计

5.1　网页的类型

5.1.1　环境型界面

5.1.2　情感型界面

5.1.3　功能型界面

5.2　网页设计原则

5.2.1　界面美观

实战练习01　制作时尚简洁的网站背景

5.2.2　优秀的用户体验

5.2.3　中心明确

5.2.4　整体性与一致性

实战练习02　制作时尚简洁的网站主体与版底

5.2.5　及时更新与定期维护

5.3　网页界面构成元素

5.3.1　文本

5.3.2　图像

实战练习03　制作宽屏网页的顶部与底部

5.3.3　多媒体

5.3.4　配色

5.4　网页版式与布局

5.4.1 布局方式

5.4.2　网页选图

实战练习04　制作宽屏网页的主体

5.4.3　网页构图

5.5　网页切图规范

实战练习05 制作时尚简洁的电子商务网站切图

5.6　网页UI界面适配

5.6.1　适配的方式方法

5.6.2　适配需要注意的点

5.7　本章小结

第6章　Android系统UI界面设计

6.1　认识 Android 系统

6.1.1 Android 系统概述

6.1.2 Android 系统的优势

6.1.3　Android 系统的局限性

6.1.4　定制 Android 系统

6.2　Android 系统UI界面设计规范

6.2.1　Android 系统的基本单位

6.2.2　Android 系统界面的设计尺寸

实战练习01　制作购物App的顶部和Banner

6.2.3　Android 系统的图标与按钮

6.2.4　Android 系统的元素间距

6.2.5　App中的文字规范

实战练习02　制作App的分类图标和Banner

6.3　Android 系统UI界面设计原则

6.3.1 界面美观整洁

6.3.2　操作简便

6.3.3　优化用户体验

6.3.4　App界面的整体性

实战练习03　制作App的版本更新弹出框

6.4　Android 系统界面输出

6.4.1　设计稿标注

6.4.2　设计稿切图

实战练习04　制作App的优惠专区和底部导航

6.4.3　适配输出

6.5　本章小结

第7章　iOS系统UI界面设计

7.1　iOS系统概况

7.1.1　了解iOS系统

7.1.2　了解Watch OS系统

7.2　iOS系统界面设计规范

7.2.1　界面尺寸规范

7.2.2　栏高尺寸规范

7.2.3　边距和间距尺寸规范

实战练习01　制作iOS系统天气界面

7.2.4　图标尺寸规范

7.2.5　字体规范

7.2.6　图片设计规范

实战练习02　制作iOS手机监测界面上半部分

7.3　iOS系统界面设计原则

7.3.1　审美完整性

7.3.2　一致性

7.3.3　直接操作

7.3.4　反馈

7.3.5　隐喻

7.3.6　用户控制

实战练习03　制作iOS系统监测界面下半部分

7.4　iOS系统界面输出

7.4.1　项目立项

7.4.2　项目制作

7.4.3　切图标注

7.4.4　切图输出

实战练习04　制作完美的iOS系统天气界面切图

7.4.5　适配输出

7.5　本章小结