目录

  • 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 【随堂试卷】
【随堂试卷】

项目六:动出活力—生活时尚类手机APPUI动效设计

随堂试卷

一、单选题:

 

1.用户体验设计(UXD)是一种以什么为中心的设计手段?

A. 产品

B. 市场

C. 用户

D. 技术

 

2.动效设计中的缓动是指什么?

A. 动画的开始和结束

B. 动画的中间过程

C. 动画的持续时间

D. 动画的延迟效果

 

3.在用户体验设计的五大层级中,哪一个层级涉及到制定产品目标和市场定位?

A. 战略层

B. 范围层

C. 结构层

D. 表现层

 

4.动效设计的作用之一是用于?

A. 转场过渡

B. 增加软件复杂性

C. 减少用户操作

D. 限制界面元素

 

5.动效设计方案中的“1+6+2”原则中的“1”代表什么?

A. 一个动人的小细节

B. 一个告知性动画

C. 一个欢迎动画

D. 一个交互类动画

 

二、多选题:

 

1.动效设计在UI设计中的作用包括哪些?

A. 动画过渡

B. 视觉反馈

C. 焦点引导

D. 功能说明

 

2.用户体验设计的三大原则包括哪些?

A. 可用性原则

B. 可见性原则

C. 可供性原则

D. 一致性原则

 

3.在动效设计方案撰写中,需要确定的动效类型包括哪些?

A. 通用动效

B. 业务层动效

C. 组件动效

D. 交互类动画

 

4.动效设计的原则和要求包括哪些?

A. 个性化原则

B. 导向性原则

C. 共鸣性原则

D. 情感性原则

 

5.动效设计前的准备工作包括哪些?

A. 确定动效类型

B. 确定动效点

C. 设计动效方案

D. 编写动效代码

 

三、判断题:

 

1.用户体验设计(UXD)是用户在使用产品过程中产生的感受,包括情感、认知、行为、成就等方面。(对/错)

 

2.在用户体验设计的五大层级中,表现层是通过界面设计、颜色、图标等元素,传达产品的视觉效果。(对/错)

 

3.动效设计的作用之一是操作反馈,即通过动画效果对用户的操作给予即时反馈。(对/错)

 

4.动效设计方案中的“1+6+2”原则中的“2”代表两个动人的小细节。(对/错)

 

5.动效设计的原则包括个性化、导向性、共鸣性和情感性。(对/错)

 

四、简答题:

 

1.描述用户体验设计(UXD)的五大层级,并解释每个层级的作用。

 

 

 

 

 

2. 解释动效设计中的缓动偏移和延迟以及父子关系三种动画效果,并给出它们在UI设计中的应用场景。

 

 

 

 

 

 

五、实操题:

 

1.智慧生活智能家居App的天气动画设计

 

习题需求说明

练习目的

理解和掌握天气动画的制作,培养对细节的关注,如动画的流畅性、色彩搭配和与用户交互的连贯性。

工具熟练度:通过使用AE (After Effects) 软件,提高初学者在实际设计中的工具操作熟练度。

基础技能培养:帮助初学者掌握加载动画的基本设计原则和技巧,为他们在未来的设计工作打下坚实的基础。

具体需求

请利用Adobe After Effects设计在智慧生活智能家居App的天气动画。在设计过程中,需要遵循移动App UI动效设计规范,并在参考基础上加入一些个人想法,注重设计元素的应用。参考素材仅作为大致方向指导,具体要求如下:

1. 动画元素选择:需要设计3种天气动画。天气可以从以下选项中选择:晴天、雨天、雪天、多云、雷暴等。

2. 动画时长:动画的时长应参考一般的加载动画规律,通常在2-5秒之间。动画不应过长,以避免用户在等待加载时感到不耐烦。

3. 输出格式:动画应输出为“.mp4”文件,并确保动画大小为512*512

4. 文件命名和格式:文件名为“智慧生活智能家居天气动画.aep”。

5. 制作时长:完成此动画的制作时长为2天。

在设计过程中,请确保遵循移动UI的设计规范,保持整体风格统一,注重细节处理;同时,可以加入一些个人想法,使设计更具创意和吸引力。

输出要求

01_Adobe After Effects源文件*1

02_预览视频文件.mp4*3

考核标准

1. 动画流畅性与连贯性:动画的过渡是否流畅,没有突兀的帧跳跃。动画的开始和结束是否自然。

2. 创意与原创性:动画中是否融入了个人的创意和想法。动画是否具有独特性,与其他常见的天气动画有所区别。

3.文件规范:文件命名是否正确,是否为“智慧生活智能家居天气动画.aep”。输出文件是否为AE项目文件,动画大小是否为512*512

参考素材图


 

 

 

2.智慧生活智能家居App底部导航条动效设计

习题需求说明

练习目的

理解底部导航条在移动应用中的重要性及其在用户体验中的作用;学习如何设计与应用主题相关的导航条动效;培养对细节的关注,如动画的流畅性、色彩搭配和与用户交互的连贯性。

工具熟练度:通过使用AE (After Effects) 软件,提高初学者在实际设计中的工具操作熟练度。

基础技能培养:帮助初学者掌握加载动画的基本设计原则和技巧,为他们在未来的设计工作打下坚实的基础。

具体需求

请利用Adobe After Effects设计智慧生活和智能家居App的底部导航条的动效设计。在设计过程中,需要遵循移动App UI动效设计规范,并在参考基础上加入一些个人想法,注重设计元素的应用。参考素材仅作为大致方向指导,具体要求如下:

1. 需要设计底部导航条的动效动画。包含至少四个主要功能模块,如“首页”、“场景”、“商城”和“我的”。

2. 动画时长:动画的时长应参考一般的加载动画规律,通常在2-5秒之间。动画不应过长,以避免用户在等待加载时感到不耐烦。

3. 输出格式:动画应输出为“.mp4”文件,并确保动画大小为1080*1920

4. 文件命名和格式:文件名为“智慧生活智能家居导航条动效.aep”。

5. 制作时长:完成此动画的制作时长为2天。

在设计过程中,请确保遵循移动UI的设计规范,保持整体风格统一,注重细节处理;同时,可以加入一些个人想法,使设计更具创意和吸引力。

输出要求

01_Adobe After Effects源文件*1

02_预览视频文件.mp4*1

考核标准

1. 动画流畅性与连贯性:动画的过渡是否流畅,没有突兀的帧跳跃。动画的开始和结束是否自然。

2. 创意与原创性:动画中是否融入了个人的创意和想法。动画是否具有独特性,与其他常见的导航条动画有所区别。

3.文件规范:文件命名是否正确,是否为“智慧生活智能家居导航条动效.aep”。输出文件是否为AE项目文件,动画大小是否为1080*1920

参考素材图


 

 

 

 

 

 

 

 

参考答案

一、单选题答案:

1. C. 用户

2. B. 动画的中间过程

3. A. 战略层

4. A. 转场过渡

5. C. 一个欢迎动画

二、多选题答案:

1. A. 动画过渡, B. 视觉反馈, C. 焦点引导, D. 功能说明

2. A. 可用性原则, B. 可见性原则, C. 可供性原则

3. A. 通用动效, B. 业务层动效, C. 组件动效

4. A. 个性化原则, B. 导向性原则, C. 共鸣性原则, D. 情感性原则

5. A. 确定动效类型, B. 确定动效点, C. 设计动效方案

三、判断题答案:

1. 

2. 

3. 

4. 

5. 

四、简答题答案:

1.用户体验设计(UXD)的五大层级包括:

战略层:制定产品目标、明确市场定位,为产品开发提供根本指引。

范围层:划分和统筹功能需求,从最小可行性版本开始,逐步迭代完善。

结构层:建立产品的骨架,制定架构图和流程图,将产品需求逻辑清晰呈现。

框架层:填充交互设计,让产品的交互流程变得可视可理解,是产品雏形的具体体现。

表现层:通过界面设计、颜色、图标等元素,传达产品的视觉效果,影响用户感知和情感。

2.动效设计中的三种动画效果及其应用场景:

“缓动”:指的是在一个动作在过渡中进行的方式,比如一个物体可以从界面的一侧缓慢启动,然后加速,最后到另一侧突然停止。在UI设计中,这种效果可以用来平滑过渡界面元素,如菜单的展开和收缩。

“偏移和延迟”:在同时移动的UI元素之间创建层次结构,并说明它们是相关的,但又是不同的。这种效果可以用来区分同时发生的多个动画,如在列表项加载时,每个项可以有微小的延迟,以便用户区分它们。

“父子关系”:将一个UI元素的属性链接到其他元素的属性,当父元素中的属性发生变化时,子元素的链接属性也会发生变化。在UI设计中,这种效果可以用来创建复杂的动态效果,如一个按钮的点击导致相关元素的大小、颜色或位置发生变化。

五、实操题答案

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