移动UI界面设计

第 1章　初识移动UI设计　1
1．1　移动App产品开发的基本流程　2
1．2　移动UI设计的三大操作系统　4
1．2．1　Android系统　5
1．2．2　iOS系统　6
1．2．3　Windows Phone系统　6
1．3　移动UI设计常用的软件　7
1．3．1　Photoshop　8
1．3．2　Illustrator　8
1．3．3　Axure RP　9
1．4　移动UI设计中常用的图片存储格式　10
1．4．1　JPEG（．jpg）　10
1．4．2　GIF（．gif）　10
1．4．3　PNG（．png）　10
1．4．4　点九PN（．9．png）　10
1．5　与设计尺寸相关的术语　11
1．5．1　屏幕尺寸　11
1．5．2　分辨率　11
1．5．3　屏幕像素密度　12
1．6　制作Apple Watch App闹钟图标　13
1．6．1　图标概述　13
1．6．2　图标的分类　15
1．6．3　图标的设计方法　19
1．6．4　演示案例——制作Apple Watch App闹钟图标　20
本章总结　21
本章作业　21
第　2章 移动UI图标设计规范　23
2．1　移动UI图标设计原则　24
2．1．1　可识别性　24
2．1．2　一致性　25
2．1．3　兼容性　27
2．2　制作iOS系统口袋商城启动图标　28
2．2．1　iOS系统图标概述　29
2．2．2　iOS系统图标设计规范　29
2．2．3　演示案例——制作iOS系统口袋商城启动图标　31
2．3　制作Android系统电影启动图标　33
2．3．1　Android系统图标概述　33
2．3．2　Android系统图标设计规范　34
2．3．3　演示案例——制作Android系统电影启动图标　37
2．4　制作双系统下商场启动图标　39
2．4．1　双系统下的启动图标　39
2．4．2　双系统下启动图标的差异　40
2．4．3　演示案例——制作双系统下商场启动图标　41
本章总结　43
本章作业　43
第3章　扁平化风格图标设计　45
3．1　制作扁平化风格相机图标　46
3．1．1　扁平化风格概述　46
3．1．2　扁平化风格的设计原则　49
3．1．3　演示案例——制作扁平化风格相机图标　52
3．2　制作折纸风格“设置”图标　54
3．2．1　折纸风格图标概述　55
3．2．2　折纸风格图标的艺术特征　55
3．2．3　演示案例——制作折纸风格“设置”图标　57
3．3　制作长阴影风格Safari图标　58
3．3．1　长阴影风格图标的特点　59
3．3．2　演示案例——制作长阴影风格Safari图标　60
本章总结　61
本章作业　61
第4章　拟物化风格图标设计　63
4．1　制作拟物化风格日历启动图标　64
4．1．1　拟物化风格的概念　65
4．1．2　拟物化风格的特点　67
4．1．3　演示案例——制作拟物化风格日历启动图标　69
4．2　制作拟物化风格抽屉邮件启动图标　70
4．2．1　拟物化风格图标的设计流程　71
4．2．2　拟物化风格图标的设计原则　75
4．2．3　演示案例——制作拟物化风格抽屉邮件启动图标　78
4．3　制作拟物化风格相机图标　81
4．3．1　拟物化风格图标的造型设计手法　82
4．3．2　拟物化风格图标的质感表现手法　83
4．3．3　演示案例——制作拟物化风格相机图标　85
本章总结　87
本章作业　88
第5章　Android系统UI设计规范　89
5．1　制作Android系统手机界面模板　90
5．1．1　Android系统手机界面设计概述　90
5．1．2　Android系统手机的设计尺寸与常见术语　92
5．1．3　Android系统中的栏　93
5．1．4　Android系统中的按钮与可点击区域　95
5．1．5　建立适合Android系统的网格系统　96
5．1．6　Android系统中的字体与字号　97
5．1．7　演示案例——制作Android系统手机界面模板　98
5．2　制作Android系统手机UI套件　99
5．2．1　Android系统的手机控件　99
5．2．2　演示案例——制作Android系统手机UI套件　105
5．3　制作Android系统邮箱界面　106
5．3．1　Android系统界面中的列表和网格　107
5．3．2　演示案例——制作Android系统邮箱界面　109
本章总结　111
本章作业　111
第6章　iOS系统UI设计规范　113
6．1　制作iOS系统手机界面模板　114
6．1．1　iOS系统手机设计概述　115
6．1．2　iOS系统手机的设计尺寸与常见术语　115
6．1．3　iOS系统中的栏　117
6．1．4　iOS系统的按钮与可点击区域　120
6．1．5　iOS系统中的字体与字号　121
6．1．6　演示案例——制作iOS系统手机界面模板　121
6．2　制作iOS系统手机UI套件　122
6．2．1　iOS系统的手机控件　123
6．2．2　演示案例——制作iOS系统手机UI套件　131
6．3　制作iOS系统控制中心界面　132
6．3．1　iOS系统界面的布局　133
6．3．2　演示案例——制作iOS系统控制中心界面　135
本章总结　137
本章作业　137
第7章　“生活帮帮帮”App项目的设计与制作　139
7．1　Android系统应用程序项目案例——“生活帮帮帮”项目　140
7．1．1　项目背景　140
7．1．2　设计要求及主要功能　141
7．2　App类型及界面设计技巧　143
7．2．1　App的类型　143
7．2．2　App的界面设计技巧　146
7．2．3　项目实现流程　148
7．3　“生活帮帮帮”界面设计实现思路　148
7．3．1　内容优先和布局合理　148
7．3．2　界面的绘制和构建　149
7．3．3　功能架构　149
7．3．4　色彩运用　151
7．3．5　技术要点　151
7．3．6　设计前的注意事项　151
本章总结　152
本章作业　152