UI界面设计

龙怡瑄

目录

  • 1 项目1：UI设计基础
    • 1.1 课程简介
    • 1.2 UI设计概述
    • 1.3 UI设计流程
    • 1.4 UI设计原则
    • 1.5 UI设计要素
      • 1.5.1 设计风格
      • 1.5.2 色彩搭配
    • 1.6 UI 设计技术准备篇（PS进阶）
      • 1.6.1 形状工具
      • 1.6.2 蒙版
      • 1.6.3 布尔运算
      • 1.6.4 重复变换
      • 1.6.5 图层样式
    • 1.7 课程思政
  • 2 项目2：移动端UI设计常识与设计规范
    • 2.1 移动应用平台
    • 2.2 移动设备尺寸标准
    • 2.3 移动UI设计规范
    • 2.4 APP页面设计
    • 2.5 课程思政
  • 3 项目3：图标设计
    • 3.1 认识图标
    • 3.2 图标分类与设计规范
    • 3.3 线性图标设计
    • 3.4 剪影图标设计
    • 3.5 扁平化图标设计
    • 3.6 拟物化图标设计
    • 3.7 其他风格图标设计
    • 3.8 手机主题图标设计
    • 3.9 课程思政
  • 4 项目4：APP控件的设计
    • 4.1 APP控件概述
    • 4.2 按钮
    • 4.3 滑动条
    • 4.4 表单
    • 4.5 数据图表
    • 4.6 其他控件
    • 4.7 拓展阅读：超全面的UI元素尺寸设置指南
    • 4.8 课程思政
  • 5 项目5：交互设计与原型图绘制
    • 5.1 交互设计概述
    • 5.2 原型制作工具——Axure RP
      • 5.2.1 高保真交互设计案例
    • 5.3 原型制作工具——墨刀（拓展））
  • 6 项目6：APP项目设计实战
    • 6.1 APP框架设计
    • 6.2 APP项目实战——“UI社”APP产品设计与实现
      • 6.2.1 产品定位与背景简要分析
      • 6.2.2 竞品分析
      • 6.2.3 产品架构梳理
      • 6.2.4 绘制低保真原型图
      • 6.2.5 APP的视觉规范
      • 6.2.6 产品启动图标的制作
      • 6.2.7 启动页与引导页效果图制作
      • 6.2.8 登录页效果图制作
      • 6.2.9 首页效果图制作
      • 6.2.10 内容页与其他页面效果图制作
    • 6.3 课程思政
  • 7 项目7：交付文档与对接
    • 7.1 标注
    • 7.2 切图
    • 7.3 知识拓展：IOS设计适配
    • 7.4 知识拓展：蓝湖软件的使用
  • 8 项目8：APP文档整理与作品提案
    • 8.1 文档整理与作品提案
  • 9 知识拓展1：UI设计综合实例
    • 9.1 优选网APP项目（拓展）
    • 9.2 极速云盘项目（拓展）
    • 9.3 小米电视界面项目（拓展）
  • 10 知识拓展2：PC端UI设计常识
    • 10.1 网页UI设计概述
    • 10.2 移动端UI设计和PC端网页UI设计区别
    • 10.3 网页UI设计特点
    • 10.4 网页的构成元素
    • 10.5 网页UI设计原则
    • 10.6 网页设计规范
    • 10.7 单元检测
  • 11 知识拓展3：网站页面布局和模块设计
    • 11.1 网站页面布局
    • 11.2 网页logo设计
    • 11.3 网站导航设计
    • 11.4 网站banner设计
    • 11.5 网页效果图设计
  • 12 拓展资源
    • 12.1 学习参考网站
    • 12.2 优秀学生作品展
      • 12.2.1 18级作品
      • 12.2.2 20软件1-2班优秀设计APP项目
      • 12.2.3 21级作品
      • 12.2.4 22级作品
    • 12.3 比赛获奖设计案例
    • 12.4 行业优秀设计案例
    • 12.5 样机素材下载
    • 12.6 教材电子版
    • 12.7 操作习题集
    • 12.8 UI界面设计常用软件下载
网页UI设计概述
  • 1 教学课件
  • 2 教学视频

10.1 网页UI设计概述



       伴随着互联网在各个行业与领域的普及，互联网的迅速发展也带动了PC端网页UI设计的繁荣。网页界面的美观与易用性，给用户群体留下深刻的印象。

       本节将从认识网页UI设计、网页结构分析、网页分类、移动端UI设计区别和PC端网页UI设计、设计特点、设计原则和设计规范等方面，对网页UI设计的基础知识进行讲解。