目录

  • 1 UI界面基础
    • 1.1 手机UI设计相关基本概念
      • 1.1.1 什么是UI设计
      • 1.1.2 什么是APP/客户端
      • 1.1.3 智能手机的操作系统有哪些
      • 1.1.4 UI专业术语认知
      • 1.1.5 交互设计七大定律
    • 1.2 UI设计与项目流程步骤
      • 1.2.1 UI设计与产品团队
      • 1.2.2 App界面设计实战之准备工作
      • 1.2.3 界面的原型设计
    • 1.3 UI设计与项目流程步骤
      • 1.3.1 各设备尺寸标准一览
      • 1.3.2 UI规范
      • 1.3.3 UE/UX用户体验设计基础认知
    • 1.4 UI设计的工具
    • 1.5 图标尺寸大小与格式建议
      • 1.5.1 图标尺寸大小
      • 1.5.2 图标格式建议
    • 1.6 APP布局说明
    • 1.7 熟悉各系统组件
      • 1.7.1 Android的基础UI组件
      • 1.7.2 iOS的基础UI组件
    • 1.8 界面设计的配色技巧
  • 2 UI界面设计常用元素制作
    • 2.1 常见控件的制作
      • 2.1.1 UI控件
      • 2.1.2 导航栏
      • 2.1.3 轮播点&选项卡
      • 2.1.4 TAB栏
      • 2.1.5 搜索框
    • 2.2 图片效果处理
      • 2.2.1 半透明背景
      • 2.2.2 画中画效果
      • 2.2.3 镜面效果
    • 2.3 App界面设计实战之登录页面
  • 3 实战篇—UI界面设计风格
    • 3.1 常用图标设计风格
      • 3.1.1 像素风格
      • 3.1.2 剪影2D风格
      • 3.1.3 扁平化风格
      • 3.1.4 写实风格
      • 3.1.5 3D风格
      • 3.1.6 MEB风格
    • 3.2 实战篇——扁平化风格
      • 3.2.1 布尔运算
        • 3.2.1.1 扁平化案例-优惠券
      • 3.2.2 扁平化案例-日历制作
    • 3.3 拟物化
      • 3.3.1 轻拟物写实-相机
      • 3.3.2 轻拟物写实-按钮
      • 3.3.3 轻拟物写实-勋章
    • 3.4 线性图标
  • 4 UI动效设计
    • 4.1 Tab栏图标动效
    • 4.2 导航动效
    • 4.3 界面动效
      • 4.3.1 App界面卡片切换动效
  • 5 【0】游戏UI设计师养成计划
    • 5.1 【课程思政】UI设计师的职业素养与职业能力
    • 5.2 【课程思政】UI设计与中国传统文化的应用与传播
    • 5.3 【立德树人】游戏UI设计如何传递积极社会价值观
    • 5.4 【人文关怀】游戏UI设计中的心理健康促进和护眼理念
    • 5.5 【行业新成果】角色详情界面案例赏析
    • 5.6 【行业新发展】人工智能与UI设计
    • 5.7 【行业新发展】探索手机游戏UI设计
    • 5.8 【行业新发展】游戏UI设计行业前沿资讯
    • 5.9 【1+X直通车】游戏美术设计职业技能等级标准
    • 5.10 【1+X直通车】游戏美术设计职业技能要求
    • 5.11 【企业导师连线】UI设计师的职业发展与未来挑战
    • 5.12 【企业导师连线】探索游戏UI设计前沿
  • 6 【1】UI设计理论基础
    • 6.1 交互设计7大定律(上)
    • 6.2 交互设计7大定律(下)
    • 6.3 界面的原型设计
    • 6.4 界面的配色技巧
  • 7 【2】动出活力—生活时尚类手机APP UI设计全流程
    • 7.1 【项目任务单】
    • 7.2 【前导内容】
    • 7.3 运动时尚类手机APP应用UI设计全流程1
    • 7.4 运动类时尚手机app应用UI设计全流程2
    • 7.5 运动时尚类手机APP应用UI设计全流程3
    • 7.6 运动时尚类手机APP应用UI设计全流程4
    • 7.7 【课堂活动】
    • 7.8 【随堂试卷】
  • 8 【3】东方意境游戏UI界面全流程制作
    • 8.1 【项目任务单】
    • 8.2 【前导内容】
    • 8.3 卡通国风界面笔刷设计与制作
    • 8.4 卡通国风界面原型设计及制作
    • 8.5 卡通国风图标及按钮设计-按钮设计
    • 8.6 卡通国风图标及按钮设计-图标设计
    • 8.7 卡通国风详情界面制作及细化-详情界面制作
    • 8.8 卡通国风详情界面制作及细化-界面细化
    • 8.9 【课堂活动】
    • 8.10 【随堂试卷】
  • 9 【4】中式古风风格UI全流程制作
    • 9.1 【项目任务单】
    • 9.2 【前导内容】
    • 9.3 国风中式古风界面底框绘制
    • 9.4 中式古风界面标签栏绘制-图稿绘制
    • 9.5 中式古风界面标签栏绘制-上色绘制
    • 9.6 【课堂活动】
    • 9.7 中式古风界面分类选项栏绘制-主体绘制
    • 9.8 中式古风界面分类选项栏绘制-周边元素绘制
    • 9.9 中式古风界面详情栏绘制-左侧详情绘制
    • 9.10 中式古风界面详情栏绘制-右侧详情绘制
    • 9.11 【随堂试卷】
  • 10 【5】AIGC在UI设计中的使用
    • 10.1 【项目任务单】
    • 10.2 AI绘图工具参数介绍
    • 10.3 AI绘图中的提示词使用技巧
    • 10.4 AI绘图中的图生图使用技巧
    • 10.5 【课堂活动】
    • 10.6 游戏斧头图标的AI绘制:线稿绘制
    • 10.7 游戏斧头图标的AI绘制:炼图技法
    • 10.8 游戏斧头图标的AI绘制:上色及修正
    • 10.9 游戏斧头图标的AI绘制:细化
    • 10.10 【随堂测验】
  • 11 【6】动出活力—生活时尚类手机APP UI动效设计
    • 11.1 【项目任务单】
    • 11.2 用户体验设计
    • 11.3 UI设计中的动效设计
    • 11.4 动效设计中的设计类型及动画效果
    • 11.5 动效设计方案
    • 11.6 手环页面展示动效
    • 11.7 鞋子页面展示动效
    • 11.8 【课堂活动】
    • 11.9 【随堂试卷】
【随堂试卷】

项目:动出活力—生活时尚类手机APP应用UI设计全流程

随堂试卷

一、单选题:

 

1.原型图在软件研发流程中是什么?

A. 可选步骤

B. 非常基础和重要的一类设计项目

C. 仅用于设计界面美观

D. 仅在产品构思初期使用

正确答案:B

 

2.低保真原型通常使用哪种风格?

A. 彩色

B. 灰度风格

C. 高清摄影图片

D. 3D模型

正确答案:B

 

3.在墨刀中,创建原型项目的第一步是什么?

A. 利用素材库搭建组件

B. 制作页面跳转交互

C. 创建一个原型项目

D. 进行预览和分享

正确答案:C

 

4.单色配色方案中色彩的变化主要体现在哪些方面?

A. 颜色的种类

B. 色彩的饱和度

C. 色彩的深浅、明暗或饱和度

D. 色彩的对比度

正确答案:C

 

5.互补色配色方案中,选择主色后应该使用哪种颜色用于强调?

A. 类似色

B. 互补色

C. 单色

D. 任何颜色

正确答案:B

 

二、多选题:

 

1.原型图的构成内容可能包括哪些?

A. 界面

B. 交互设计

C. 动态效果

D. 产品需求文档

正确答案:A, B, C, D

 

2.高保真原型图的特点包括哪些?

A. 使用精美的图片

B. 对界面布局等细节要求高

C. 低保真度

D. 使用更精美的图片

正确答案:A, B, D

 

3.制作原型图的步骤包括哪些?

A. 创建原型项目

B. 利用素材库搭建组件

C. 制作页面跳转交互

D. 制作状态交互

正确答案:A, B, C, D

 

4.配色方案的类型包括哪些?

A. 单色配色

B. 相近色

C. 补色搭配

D. 自定义配色方案

正确答案:A, B, C, D

 

5.对比度在UI设计中的作用包括哪些?

A. 缓解眼睛疲劳

B. 聚焦用户注意力

C. 提高易读性

D. 增加视觉冲击力

正确答案:A, B, C

 

三、判断题:

 

1.线框原型是保真度最低的原型图。(正确)

2.高保真原型图不需要考虑界面布局的基础规范。(错误)

3.在墨刀中,可以利用素材库快速搭建组件进行原型制作。(正确)

4.单色配色方案中色彩的变化主要体现在颜色的种类上。(错误)

5.对比度和文本易读性配适性中,W3C建议对正文和图像文本使用41以上的对比度。(错误)

 

四、简答题:

 

1. 描述如何快速制作原型图的步骤。

 

快速制作原型图的步骤包括:

创建原型项目:在原型设计软件中开始新项目。

利用素材库搭建组件:使用软件提供的素材库中的组件搭建界面。

制作页面跳转交互:设置组件之间的交互,如页面跳转。

制作状态交互:设计组件的状态变化,如悬停、点击效果。

进行预览和分享:完成设计后,预览原型并分享给他人审阅。

 

 

2. 解释为什么在设计APP界面时要考虑色盲用户群体的特殊配色设计。

 

在设计APP界面时考虑色盲用户群体的特殊配色设计的原因包括:

色盲用户对某些颜色的区分有困难,如红绿色盲难以区分红色和绿色。

通过提供多样的视觉线索,可以确保色盲用户也能正确理解和使用APP

考虑色盲用户的需求,可以提高APP的可用性和包容性,使其对更广泛的用户群体友好。

使用对比度高的颜色组合和清晰的图标、图形等视觉元素,有助于色盲用户更好地识别和操作界面。

 

 

 

五、实操题:

 

1.UI按钮设计】

习题需求说明

练习目的

    本次习题任务需要学生使用Photoshop绘制一个石头材质的游戏按钮。这能够帮助学生熟悉Photoshop的界面窗口和菜单布局,理解基本操作和图像的处理技法,掌握石头材质按钮的特点效果图的基础上绘制和上色的技巧,并理解不同风格的游戏界面对UI和按钮的不同需求。

具体需求

01_使用Photoshop绘制一个石头材质的按钮,使用多边形套索等多种工具

02_突出按钮材质的特点,对细节结构、明暗关系进行刻画

03_文件命名:anniu1

04_制作时长:0.5

输出要求

01_成品文件png格式*1

考核标准

01_成品图使用Photoshop进行绘制,合理运用形状、字体工具和多种图层样式

02_突出石头材质有棱角、纹理、块面感等特点,正确把握材质的光影变化及明暗关系

03_UI按钮的元素功能齐全,造型美观,有视觉重点

参考图


 

根据提示步骤完成相应页面即可得60分;若设计功能完整则可得75分;若有创新点可酌情加分。