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 教学视频
  • 3 知识检测

UI设计流程


  



设计流程




说明: IMG_256

 

和一个软件产品要经过很多阶段才能使用一样,一个完整的UI作品也要经过诸多步骤才能让人使用。一个完整的UI设计是会经过“需求分析”、“功能设计”、“视觉设计”、“技术实现”、“反馈迭代”这五个过程。

说明: IMG_258

 

设计一个UI作品,首先我们要确定目标用户。

UI设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

例如:对于科学用户和对于电脑入门用户的设计重点就不同。

确定目标用户之后,就是采集目标用户的习惯交互方式。

不同类型的目标用户有不同的交互习惯,可以通过其原有的针对现实的交互流程、已有软件工具的交互流程来采集,同时还要在此基础上调研分析找到用户希望达到的交互效果,并且以流程确认下来。

接下来就是进行UI设计,设计时要遵循一致性的原则。

包括设计目标一致:软件中往往存在多个组成部分(组件、元素),不同组成部分之间的交互设计目标需要一致;元素外观一致:交互元素的外观往往影响用户的交互效果。

同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助;交互行为一致:在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。

例如:所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。

设计要能提示和引导用户。

软件要为用户使用,用户必须可以理解软件各元素对应的功能。如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户操作该元素能理解它的功能。

比如:删除操作元素。用户点击删除操作按钮时提示用户如何删除操作或者是否确认删除操作,使用户理解该元素的功能,同时可以取消操作。

用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制,软件的交互流程和功能的执行流程,用户可以控制,如果确实无法提供控制,则用能让用户理解的方式提示用户。

设计完成后是测试和改进。

设计完成后,可以让准备几套风格没有能明显看出的差异作品部分目标用户进行试用,对用户的感受进行记录,并设计出各种改进方案,对作品进行最终改进,设计出最后的作品。

投向市场,收集反馈意见。

最后就是把设计的UI作品投向市场,但不要认为这样就结束了,我们还需要用户反馈,因为好的设计师会在产品上市以后去站柜台,零距离接触最终用户,看看用户真正使用时的感想,为以后的升级版本积累经验资料。