目录



第1章UI设计基础/

1．1认识UI/

1．1．1PC端设计与移动端UI设计的区别/

1．1．2响应式网页设计与自适应网页设计/

1．1．3UI设计基础概念/

1．1．4UI设计常用工具/

1．2UI设计与用户体验概述/

1．2．1交互设计是什么/

1．2．2UX(用户体验)设计概述/

1．3UI设计风格/

1．3．1扁平化/

1．3．2拟物化/

1．4UI设计原则/

1．4．1经典设计法则在UI设计中的应用/

1．4．2格式塔心理学在UI设计中的应用/

1．5基于移动App的设计配色/

1．5．1色彩搭配法则/

1．5．2色彩风格举例/

1．6如何建立一套UI设计规范/

1．6．1色彩控件规范/

1．6．2按钮控件规范/

1．6．3分割线规范/

1．6．4头像规范/

1．6．5文字规范/

1．6．6间距规范/

1．6．7图标规范/

第2章图标/

2．1图标的概念/

2．2图标的类型/

2．2．1工具图标/

2．2．2启动图标/


2．3图标的格式/

2．4图标设计工具 Adobe illustrator/

2．4．1文件的创建/

2．4．2矢量图形工具/

2．4．3属性面板/

2．4．4圆角工具/

2．4．5路径查找器/

2．4．6形状生成工具/

第3章工具图标的设计/

3．1工具图标的规范/

3．1．1表意准确/

3．1．2一致性/

3．1．3格线系统/

3．2线性图标的设计/

3．2．1搜索图标/

3．2．2聊天图标/

3．2．3眼睛图标/

3．2．4心形图标/

3．2．5卡券图标/

3．2．6房屋图标/

3．3面性图标的设计/

3．3．1搜索图标/

3．3．2聊天图标/

3．3．3眼睛图标/

3．3．4心形图标/

3．3．5卡券图标/

3．3．6房屋图标/

第4章启动图标的设计/

4．1启动图标的设计规范/

4．1．1启动图标的规格/

4．1．2启动图标的格线系统/

4．2工具型启动图标设计/

4．3文字型启动图标设计/

4．4轻拟物型启动图标设计/

第5章移动端界面设计案例/

5．1认识 App/

5．1．1App的基本设计原则/

5．1．2iOS及Android系统界面设计规范/

5．2App界面设计流程——以图片分享App为例/

5．2．1交互流程设计/

5．2．2风格定位/

5．2．3功能图标设计/

5．2．4界面视觉效果整体优化/

5．2．5应用图标设计/

5．2．6完善App页面/

5．3电商类App设计/

5．3．1首页设计

5．3．2首页中海报栏的制作/

5．3．3首页中图标区的制作/

5．3．4首页中头条板块的制作/

5．3．5弹出页面设计/

5．3．6个人中心设计/

5．4音乐类App设计/

5．4．1音乐播放页面设计/

5．4．2音乐类App首页设计/

第6章网站界面设计/

6．1网站设计的工作流程/

6．1．1原型图/

6．1．2视觉稿/

6．1．3设计规范/

6．1．4切图/

6．1．5前端代码/

6．1．6视觉走查(走查工具)/

6．2网站类型/

6．2．1门户网站/

6．2．2企业网站/

6．2．3产品网站/

6．2．4电商网站/

6．2．5游戏网站/

6．2．6专题页面/

6．2．7视频网站/

6．2．8移动端H5/

6．2．9后台网站/

6．2．10CRM系统/

6．2．11SaaS服务/

6．3网站组成/

6．3．1首页/

6．3．2二级页面/

6．3．3详情页/

6．3．4广告/

6．3．5Footer区域/

6．4技术原理/

6．4．1基于鼠标的交互/

6．4．2静态网页/

6．4．3前端开发语言/

6．4．4动态网页/

6．4．5雪碧图/

6．4．6视差滚动/

6．5网页设计规范/

6．5．1画板尺寸/

6．5．2文字规范/

6．5．3图片规范/

6．5．4按钮/

6．5．5表单/

6．6网页栅格设计原理和技巧/

6．6．1网页栅格系统的必要性/

6．6．2栅格系统的基础概念/

6．6．3怎样建立网页栅格/

6．7利用栅格系统实现响应式设计/

6．7．1什么是响应式/

6．7．2响应式的目的/

6．7．3为何利用栅格系统进行响应式设计/

6．7．4利用栅格系统实现响应式设计的步骤/

6．7．5栅格化工具推荐/

6．7．6常见问题解答/

参考文献/