网页UI设计

　　本书包含四个项目，项目1 页面草图绘制：关注用户需求，；项目2 页面原型设计：关注布局、响应式页面、页面交互、流程；项目3 网页页面界面设计：关注色彩和细节；项目4APP产品设计：关注对APP产品特征的设计把握。本教材是针对网页UI原型设计师的岗位进行的课程开发，并融入世界技能大赛网站设计项目技术标准及模块一的网页界面设计相关知识，以世赛项目为指引，围绕网页和移动应用的界面和交互设计原型技术展开，引入现在流行的栅格系统和扁平化设计理念，同时结合学生对设计知识的学习迁移过程对每个任务的要求进行渐进式编排，形成最终的以赛*领、紧贴企业实践的一体化课程。

　　钟爱青，计算机网络应用专业一体化教师，计算机科学与技术讲师，助理电子商务师，电子商务考评员，网络管理师。华南农业大学农业信息技术专业毕业，农学学士。江西师范大学计算机及应用专业毕业。

项目一 页面草图绘制 1
任务1 手绘草图 4
1.1.1 网页布局的基本知识 5
1.1.2 响应式网页布局的设计特点 8
1.1.3 手绘草图的方法 14
任务2 手绘流程图 21
1.2.1 绘制流程图 21
1.2.2 POP软件 23
项目二 页面原型设计 28
任务1 认识Axure软件 29
2.1.1 软件安装 29
2.1.2 软件的工作环境 34
2.1.3 基本元件 34
2.1.4 元件的样式与属性 35
任务2 使用Axure软件绘制页面原型 40
2.2.1 自适应视图 41
2.2.2 栅格系统 42
2.2.3 元件使用 48
任务3 使用Axure软件进行交互设计 71
2.3.1 交互样式设置 71
2.3.2 动态面板 73
2.3.3 组合/取消组合元件 74
2.3.4 元件交互的使用―显示/隐藏 76
2.3.5 变量 78
2.3.6 内联框架 78
任务4 使用Axure软件进行流程设计 117
2.4.1 流程图组件 117
2.4.2 母版 120
任务5 发布原型设计作品 124
2.5.1 快速预览查看原型 125
2.5.2 生成HTML文件查看原型 125
2.5.3 Web字体设置 126
2.5.4 移动设备设置 127
2.5.5 发布原型到AxShare 127
项目三 网页页面设计 137
任务1 移动端页面设计 138
3.1.1 网页设计标准尺寸 138
3.1.2 排版构成 143
3.1.3 色彩构成 146
3.1.4 扁平化概念 147
任务2 平板电脑端页面设计 182
版式构成 182
任务3 计算机端及宽屏页面设计 194
版面设计 194
任务4 页面交互设计 211
简析交互设计 211
任务5 产品汇报与展示 220
网页效果图展示 220
项目四 App产品原型设计 224
任务1 使用Axure软件绘制App产品线框图原型 225
4.1.1 App产品与Web产品 226
4.1.2 App产品常见UI组件 227
4.1.3 App产品交互设计注意事项 231
任务2 使用Photoshop软件制作App产品效果图和应用图标原型 234
任务3 使用Axure软件制作App产品高保真视觉原型 243