UI设计

吴红英

目录

  • 1 初始 UI 界面设计
    • 1.1 了解UI设计
      • 1.1.1 什么是UI设计
      • 1.1.2 了解PC端界面
      • 1.1.3 了解移动端界面
      • 1.1.4 PC端和移动端的区别
    • 1.2 UI设计的联系
      • 1.2.1 产品需求分析
      • 1.2.2 用户界面设计
    • 1.3 UI设计项目对接流程
      • 1.3.1 项目流程讲解
      • 1.3.2 与前端、产品对接要点
      • 1.3.3 实战项目鉴赏
  • 2 UI 常见组件设计
    • 2.1 引导类组件设计
      • 2.1.1 引导页（幻灯片）式引导
      • 2.1.2 浮层式引导
      • 2.1.3 嵌入式引导
      • 2.1.4 课堂练习
    • 2.2 导航类组件设计
      • 2.2.1 底部标签栏导航
      • 2.2.2 舵式导航
      • 2.2.3 分段控制式导航
      • 2.2.4 列表式导航
      • 2.2.5 下拉菜单式导航
      • 2.2.6 抽屉式导航
      • 2.2.7 宫格式导航
      • 2.2.8 卡片式导航
      • 2.2.9 课堂练习
    • 2.3 操作类组件设计
      • 2.3.1 底部操作列表
      • 2.3.2 底部浮层视图
      • 2.3.3 编辑菜单
      • 2.3.4 底部工具栏
      • 2.3.5 按钮
      • 2.3.6 选择器
      • 2.3.7 下拉菜单
      • 2.3.8 文本框
      • 2.3.9 课堂练习
    • 2.4 单元控件类组件设计
      • 2.4.1 搜索
      • 2.4.2 开关
      • 2.4.3 页面控制器
      • 2.4.4 图标
      • 2.4.5 滑块
      • 2.4.6 进度
      • 2.4.7 选框
      • 2.4.8 课堂练习
  • 3 主题图标设计
    • 3.1 主题图标设计
      • 3.1.1 图标尺寸大小
      • 3.1.2 图标设计的格式
      • 3.1.3 如何设计一组图标
      • 3.1.4 设计思路：设计图标的三个阶段
    • 3.2 实战扁平化主题图标
      • 3.2.1 扁平化图标的要点
      • 3.2.2 实战扁平化主题图标绘制
    • 3.3 实战创意主题图标
      • 3.3.1 创意图标的要点
      • 3.3.2 实战创意主题图标绘制
    • 3.4 主题图标自我提升
  • 4 产品原型图认知
    • 4.1 Axure制作规范
      • 4.1.1 什么是Axure
      • 4.1.2 基础控件认知
      • 4.1.3 原型图设计规范
    • 4.2 实战原型图绘制（服务系统）
      • 4.2.1 ​首页原型图绘制
      • 4.2.2 登录页原型图绘制
      • 4.2.3 设备管理页原型图绘制
      • 4.2.4 食品管理页原型图绘制
      • 4.2.5 绿化管理页原型图绘制
      • 4.2.6 项目管理页原型图绘制
    • 4.3 原型图自我提升
  • 5 UI 配色理论
    • 5.1 配色理论基础
      • 5.1.1 色彩搭配理论
      • 5.1.2 色彩搭配运用
    • 5.2 色彩的魅力
      • 5.2.1 颜色的属性
      • 5.2.2 色彩渐变应用
    • 5.3 优秀配色赏析
  • 6 UI 界面设计
    • 6.1 PC界面制作规范
      • 6.1.1 界面布局规范
      • 6.1.2 字体在PC界面的规范
    • 6.2 PC端界面设计（官网首页）
    • 6.3 IOS.Android设计规范
      • 6.3.1 ​IOS界面布局规范
      • 6.3.2 Android界面布局规范
      • 6.3.3 字体在移动端界面规范
    • 6.4 项目原型设计定位
      • 6.4.1 项目原型定义属性
      • 6.4.2 项目原型效果设计
    • 6.5 移动端界面设计（服务系统）
      • 6.5.1 登录页界面设计
      • 6.5.2 首页界面设计
      • 6.5.3 设备管理界面设计
      • 6.5.4 项目管理界面设计
      • 6.5.5 食品管理界面设计
      • 6.5.6 绿化管理界面设计
    • 6.6 移动端界面设计（灯控平台）
      • 6.6.1 登录页界面设计
      • 6.6.2 首页界面设计
      • 6.6.3 灯控管理界面设计
      • 6.6.4 数据日志界面设计
      • 6.6.5 系统配置界面设计
      • 6.6.6 能耗管理界面设计
    • 6.7 界面设计自我提升
  • 7 标注与切图
    • 7.1 标注工具介绍及使用
      • 7.1.1 标注工具介绍
      • 7.1.2 标注方法讲解（PxCook）
    • 7.2 切图规范
      • 7.2.1 切图规范
    • 7.3 切图、标注文件交接
      • 7.3.1 IOS APP界面设计切图命名规范
    • 7.4 实战APP项目标注与切图
      • 7.4.1 设计图实战标注（服务系统）
      • 7.4.2 设计图实战切图（服务系统）
  • 8 交互设计
    • 8.1 什么是交互设计
      • 8.1.1 如何理解交互设计
      • 8.1.2 互联网产品界面交互设计
      • 8.1.3 UI设计师（交互设计）核心价值
    • 8.2 设计中的交互原则
      • 8.2.1 UI设计师要懂交互
    • 8.3 金融类 APP 交互与设计规范
      • 8.3.1 设计原则
      • 8.3.2 用语规范
      • 8.3.3 设计样式
  • 9 新建课程目录
    • 9.1 推广图设计
      • 9.1.1 了解推广图
      • 9.1.2 场景思考
      • 9.1.3 设计执行
    • 9.2 推广方法及渠道
      • 9.2.1 推广方法
      • 9.2.2 推广渠道
  • 10 应聘实战及简历制作
    • 10.1 UI 设计新人常见的七个问题
    • 10.2 UI 面试中会问什么问题 ?
    • 10.3 简历制作
    • 10.4 优秀简历欣赏
UI设计项目对接流程

1.3UI设计项目对接流程

当一个实战项目没拿到手之前，必须是有项目经理提供项目给产品经理，再由产品经理总结功能需求。功能需求完成后交接给产品设计人员，也可以称为（UX设计师）做原型图以及交互动效。原型图结束后交由UI设计师进行界面设计。紧跟着便是前端工程师负责实现页面，完成后再交给后端工程师进行功能开发。最后在交还给产品经理进行项目评估与测试。（注：有时候交互设计与产品设计是不同的两个人做的）