《移动UI设计案例教程》第二章
《Photoshop CC移动UI设计实例教程(微课版)》 教案
《Photoshop CC移动UI设计实例教程（微课版）》教案一、教学目标1. 掌握Photoshop CC的基本操作和功能。
2. 学习移动UI设计的基本原则和技巧。
3. 能够运用Photoshop CC设计出符合用户需求的移动UI界面。
二、教学内容1. Photoshop CC的基本功能介绍图像处理基础选择工具和修饰工具图层和蒙版色彩和色调调整2. 移动UI设计原则设计规范和标准界面布局和结构色彩搭配和视觉效果字体和图标设计三、教学方法1. 讲授法：讲解Photoshop CC的基本操作和功能，以及移动UI设计的原则和方法。
2. 演示法：通过实际操作演示设计过程，让学生更好地理解和掌握操作技巧。
3. 实践法：让学生通过实际操作练习，提高设计能力。
四、教学准备1. 计算机和投影仪2. Photoshop CC软件3. 移动UI设计素材和案例五、教学过程1. 导入：介绍教案主题，激发学生的学习兴趣。
2. 讲解：讲解Photoshop CC的基本操作和功能，以及移动UI设计的原则和方法。
3. 演示：通过实际操作演示设计过程，让学生更好地理解和掌握操作技巧。
4. 练习：让学生通过实际操作练习，提高设计能力。
6. 作业布置：布置相关的练习题目，巩固所学知识。
六、教学评估1. 课堂参与度：观察学生在课堂上的积极参与程度，提问和回答问题的积极性。
2. 练习作品：评估学生在实践环节的设计作品，包括创意、技巧和符合设计原则的程度。
3. 作业完成情况：检查学生完成作业的情况，包括及时性和质量。
七、教学反思1. 教学方法：反思所采用的教学方法是否适合学生的学习需求，是否能够有效地促进学生的理解和掌握。
2. 教学内容：反思教学内容是否全面，是否能够满足学生的学习目标。
3. 教学效果：评估学生的学习成果，反思教学目标和教学方法的实现程度。
八、教学拓展1. 移动UI设计趋势：介绍当前移动UI设计的趋势，如扁平化设计、materialdesign等。
Photoshop CC 移动UI设计案例教程(全彩慕课版)
目录分析
1.1认识移动UI 设计
1.2认识App
1.1.1 UI设计的相关概念 1.1.2移动UI设计的概念 1.1.3移动UI设计的特点 1.1.4移动UI设计的原则 1.1.5移动UI设计的常用软件 1.1.6移动UI设计的学习方法
1.2.1 App的基本概念 1.2.2 App的操作平台 1.2.3 App的设计流程 1.2.4 App的基本分类
2.1 iOS系统 设计规范
2.2 Android 系统设计规范
2.1.1 iOS设计尺寸 2.1.2 iOS界面结构 2.1.3 iOS基本布局 2.1.4 iOS图标规范 2.1.5 iOS字体规范
2.2.1 Android设计尺寸 2.2.2 Android界面结构 2.2.3 Android基本布局 2.2.4 roid字体规范 2.2.5 Android图标规范
5.1闪屏页 5.2引导页
5.3首页 5.4个人中心页
1
5.5详情页
2
5.6注册登录 页
3 5.7课堂案
例——制作美 食到家App
4 5.8课堂练
习——制作 Delicacy App
5 5.9课后习
题——制作美 食来了App
5.1.1品牌推广型闪屏页 5.1.2活动广告型 5.1.3节日关怀型
1
3.1栏
2
3.2视图
3
3.3控件
4 3.4课堂练
习——制作旅 游类App酒店 详情页
5 3.5课后习
题——制作旅 游类App预约 美食页
3.1.1课堂案例——制作旅游类App首页 3.1.2状态栏 3.1.3导航栏 3.1.4搜索栏 3.1.5范围栏 3.1.6标签栏 3.1.7工具栏
移动UI设计 课程标准(教学大纲)及 教案 (人邮微课版)
移动UI设计课程标准（教学大纲）及教案全套（人邮微课版）第一章：移动UI设计概述1.1 移动UI设计的定义与重要性1.2 移动UI设计与UX设计的区别1.3 移动UI设计的发展趋势1.4 移动UI设计的原则与要素第二章：移动UI设计的基本界面布局2.1 界面布局的分类与特点2.2 界面布局的基本原则2.3 常用的界面布局方式2.4 界面布局的实践案例第三章：移动UI设计的色彩与字体3.1 色彩在移动UI设计中的应用3.2 色彩搭配的原则与技巧3.3 字体在移动UI设计中的应用3.4 字体搭配的原则与技巧第四章：移动UI设计的图标与插画4.1 图标在移动UI设计中的应用4.2 图标的分类与设计原则4.3 插画在移动UI设计中的应用4.4 插画的设计技巧与实践案例第五章：移动UI设计的交互与动画5.1 交互在移动UI设计中的作用5.2 交互设计的原则与技巧5.3 动画在移动UI设计中的应用5.4 动画设计的原则与技巧第六章：移动UI设计的导航与菜单6.1 导航在移动UI设计中的重要性6.2 移动UI导航的类型与设计原则6.3 菜单设计的方法与技巧6.4 导航与菜单设计的实践案例第七章：移动UI设计的按钮与操作反馈7.1 按钮在移动UI设计中的应用7.2 按钮设计的注意事项7.3 操作反馈的设计原则与方法7.4 按钮与操作反馈设计的实践案例第八章：移动UI设计的表格与列表8.1 表格在移动UI设计中的应用8.2 表格设计的原则与技巧8.3 列表在移动UI设计中的应用8.4 列表设计的原则与技巧第九章：移动UI设计的数据输入与展示9.1 数据输入界面设计的原则与方法9.2 数据展示界面设计的原则与方法9.3 输入与展示界面的实践案例9.4 输入与展示界面的优化技巧第十章：移动UI设计的项目实践10.1 项目实践的意义与目的10.2 项目实践的流程与步骤10.3 项目实践的评估与反馈10.4 项目实践的案例分析与总结第十一章：移动UI设计的适配与响应式布局11.1 移动设备屏幕尺寸与分辨率11.2 适配方法与技巧11.3 响应式布局的原则与实践11.4 适配与响应式布局的案例分析第十二章：移动UI设计的动效与过渡12.1 动效在移动UI设计中的作用12.2 动效设计的原则与技巧12.3 过渡效果的设计与实现12.4 动效与过渡设计的实践案例第十三章：移动UI设计的兼容性与优化13.1 移动浏览器兼容性问题13.2 兼容性设计的方法与技巧13.3 移动UI性能优化策略13.4 兼容性与优化实践案例第十四章：移动UI设计的国际化与本地化14.1 国际化设计的重要性14.2 语言、文字及符号的适配14.3 文化差异与设计调整14.4 国际化与本地化实践案例第十五章：移动UI设计的趋势与创新15.1 移动UI设计的最新趋势15.2 创新设计的方法与技巧15.3 跨界合作与设计启发15.4 趋势与创新实践案例重点和难点解析本文教案主要涵盖了移动UI设计的基本概念、设计原则、实践案例以及最新趋势等方面。
《移动UI设计案例教程》第一章
1.3 移动UI 设计色彩搭配
1.3.2 色彩的象征意义
◔ 蓝色：蓝色是 UI 设计中应用最多的色彩之一，它能让人联想到天空、海洋、宇宙等事物，给人静
谧、深邃、理智、信赖、科技等心理感觉。常被用于社交、生活服务等多个领域，如左下图所示。
◔ 紫色：紫色是极佳的刺激色，象征神秘、高贵、优雅、浪漫、妖艳，在设计中，红色与深紫色搭配
04 移动UI设计中文字运用
1.4 移动UI 设计中文字的运用
1.4.1 衬线体与非衬线体
1．衬线体 衬线体在笔画的始末位置有额外的装饰，且粗细会因笔画的不同而有所区别，
强调笔画的走势及前后联系，这使得前后文有更好的连续性，更适合作为正文字体。
01 宋体
字形方正、横细竖粗、撇如 刀、捺如扫、点如瓜子等特点， 它是通用的印刷体。
注意：在西方，黑色也有邪恶和死亡的意味，因此涉及医疗
健康的APP 中要尽量避免使用黑色。
◔ 白色：白色象征纯洁、神圣、干净、高雅、婚礼，在一
些文艺范、高雅范的APP 中，常使用白色作为界面的主色。
注意：避免界面中白色面积过大会给人疏离、冷漠的感觉。
把握好留白的面积，凸显界面的格调，如左图。
1.3 移动UI 设计色彩搭配
都具备可逆选项或危险提示。当用户做 出删除、调整、不恰当或错误操作时， 应当有危险提示介入。
1.1 UI 设计概述
1.1.4 移动UI设计原则
快速加载
05
1）优化图片 在不影响功能和美观的前提下，能用代码实现的效果就尽量不用图片。 在保证质量的前提下尽量压缩图片，以确保用户浏览顺畅，缩短加载时间。
效果统一、清新、含蓄，如下图 所示。
1.3 移动UI 设计色彩搭配
《UI设计基础》教学大纲
《UI设计基础》教学大纲一、课程定位1.课程性质本课程是面向动漫技术、设计、计算机应用技术等专业的一门专业课程，属于必修课。
《UI设计基础》以移动端的UI设计为主线，将实例操作与职业素养相结合，技巧和理念相融合、文化修养和文化传承的工匠精神，同时对当下流行的设计风格进行整合。
让学生学习UI设计流程、设计原则、设计规范、移动设备尺寸标准、图标、页面组合应用等知识，掌握UI设计方法与技巧、能够独立完成不同主题的APP界面设计与制作，提升专业技能和职业素养。
2.课程作用本课程“以学生为中心”的教学理念、围绕“立德树人”目标，注重“课政融合”，运用、采用“以教引学”、“以教助学”、“为学而教”的教学方式，培养应用型技术人才，具有“融合+创新”能力、良好的职业道德和职业素养、竞争意识和合作精神。
（三）前导、后续课程前导课程：图像处理技术、网页设计后续课程：JavaScript网页设计与制作、PHP高级项目开发、电子商务网站设计与开发等课程二、课程设计思路基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（任务）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（任务）实现为载体、理论学习与实践操作相结合”。
三、课程目标（一）本课程学习应具备的专业能力本课程的教学目标是：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
通过本课程的学习，学生应掌握:1.掌握APP设计要素，能够把控界面风格，进行整体布局。
2.掌握三原色搭配原则、UI设计的配色技巧。
3.掌握图标设计的基本设计原则，掌握线性图标、扁平化图标、MBE风格图标、线性渐变图标四种设计风格的特点，能够独立完成不同风格的图标的设计和制作。
UI设计-教学教案
《Photoshop CC 移动UI设计案例教程（全彩慕课版）》配套教学教案第1讲3.2.14 文字视图3.2.15 网络视图3.3 控件3.3.1 课堂案例——制作旅游类APP酒店列表页3.3.2 按钮3.3.3 编辑菜单3.3.4 标签3.3.5 页面控件3.3.6 选择器3.3.7 进度指示器3.3.8 刷新3.3.9 分段控件3.3.10 课堂案例——制作旅游类APP美食筛选页3.3.11 滑块3.3.12 步进器3.3.13 开关3.3.14 文本框3.4 课堂练习——制作旅游类APP酒店详情页3.5 课后习题——制作旅游类APP预约美食页小结1、了解并熟练掌握栏、视图和控件的概念。
2、了解并熟练掌握栏、视图和控件的分类。
3、了解并熟练掌握栏、视图和控件的设计规范。
4、熟练掌握iOS系统界面设计的方法和规范。
作业3.4 课堂练习——制作旅游类APP酒店详情页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、圆角矩形工具、直线工具绘制基本形状。
3.5 课后习题——制作旅游类APP预约美食页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、直线工具绘制基本形状。
第4讲4.2.18 菜单4.2.19 抽屉式导航4.2.20 状态指引4.2.21 课堂案例——制作医疗类APP医生筛选页4.2.22 选择控件4.2.23 底部面板4.2.24 侧面板4.2.25 滑块4.2.26 底部提示栏4.2.27 课堂案例——制作医疗类APP预约页4.2.28 选项卡4.2.29 文字框4.2.30 提示4.3 课堂练习——制作医疗类APP输入信息页4.4 课后习题——制作医疗类APP帮助支持页小结1、了解并熟练掌握栏和组件的概念。
2、了解并熟练掌握栏和组件的分类。
3、了解并熟练掌握栏和组件的设计规范。
4、熟练掌握Android系统界面设计的方法和规范。
作业4.3 课堂练习——制作医疗类APP输入信息页使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具和钢笔工具绘制基本形状，使用横排文字工具输入文字。
20移动UI交互设计 UI 设计概述
1.1 UI 设计的概念
从事UI设计工作的人称为UI设计师，主要负责以下工作。
软件界面的美术设计、创意和制作工作。 根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计。 对页面进行优化，使用户操作更趋于人性化。 维护现有的应用产品。 收集和分析用户对于GUI的需求。
1.3.1 用户控制原则
13
UI 设计的一个重要原则是永远以用户体 验为中心。
（1）操作上要让用户扮演主动角色，在 需要自动执行任务时，要以允许用户进行选 择或控制它的方式来实现该自动任务。
（2）要提供用户自定义设置。每个用户 的需求和喜好不一样，要使产品满足不同用 户的个性需求，就要为用户提供类似于颜色、 字体或其他选项的设置。
手势：在手机或Pad 程序中，通常会用手势进行操作，如放大/ 缩小、 快进/ 快退、音量等手势控制应保持一致，从而带给用户好的使用体验。
命令：要使用同样的命令来执行对于用户来说相似的功能。
1.3.2 一致性原则
15
如右图所示的3个界面 就很好地体现了一致性原 则，其主要的颜色、分割 的线条、使用的字体等视 觉元素都是一致的。
1.2.3 方案修改阶段
9
设计方案提交给客户后，需要与客户进行沟通，根据客户的需求来修改设计。我们在尽量满 足客户要求的基础上，也要考虑其要求的功能或技术是否可行。例如，有些客户的修改意见，在 方案规定时间内是难以完成的。可能完成时间需要3 个月，但是最后客户却要求在2 个月内交稿， 这时这些功能就可以待产品下次改版或升级时再实现。
1.2.4 测试改进阶段
10
在设计方案通过并交付以后，就可以将产品推向市场了。但是设计并没有结束，我们还需要 跟踪了解用户的测试与反馈。好的设计师应该在产品上市以后主动接近市场，在第一线零距离接 触最终用户，了解用户实际使用时的感想，为以后升级版本积累经验。
《UI设计》实训指导书
（UI设计）实训指导书编制部门艺术传媒学院课程类型B类适用专业广告设计与制作执笔人胡敏部门审核人杨书婷编制日期2017年9月25日（UI设计）实训指导书一、实习（训）项目名称：android系统界面二、适用专业：广告设计与制作三、实习（训）课时：18四、实习（训）意义和目的：目前UI即用户界面设计行业刚刚在全球软件业兴起，属于高新技术设计产业，与国外在同步发展水平。
其次国内众多大型IT企业（例如：百度，腾讯，YAHOO，中国移动，NOKIA，联想，网易，微软，盛大，淘宝等众多企业）均已成立专业的UI设计部门，但专业人才稀缺；人才资源争夺激烈，但目前全国UI设计专业的系统教学极其稀少，UI设计师的待遇和地位也逐渐上升。
1、知识目标：使学生能熟悉UI设计的流程和设计方法，并能使用制作有创意的，充满视觉冲击力的UI设计作品。
2、技能目标：使学生学会系统规划和全局思维，能够完成一整套UI 系统的设计。
3、素养目标：使学生具备能从事UI系统的开发与设计能力，培养学生团队合作，及独立思考能力。
五、实习（训）内容：1、教学情境及学时分配⑴学习领域：android系统界面⑵学习情境设计学习情境1 android系统的前期策划学习情境2 android系统的创意设计学习情境3 android系统的制作执行2、考核实施(项目考核)六、实习（训）操作要点1、教学方法案例分析法、引导文法、分组讨论法、成果展示法。
2、教学建议组织学生进行会展参观教学，多看多学多思考。
七、实习（训）注意事项实习（训）条件：（包括设备、软件与耗材的名称、规格型号等）1、软硬件条件⑴为配合一体化教学，需要为教师配置教师机及大屏幕。
⑵需要为每位学生配置1台计算机，计算机软件环境要求：1）操作系统：Windows XP/ Windows 2003。
2）浏览器：IE5.0或以上版本。
3）Word 2003、Excel 2003。
⑶需要准备的安装软件如下：1）Photoshop八、考核评价本课程评价采用项目考核评价、平时成绩评价相结合的方式。
Photoshop移动UI设计教程案列-iOS系统界面设计
3.3.2 按钮
2.详细信息按钮 详细信息按钮（Detail Disclosure Buttons）的触发可打开一 个视图 （通常是模态视图）包含附加信息或本屏内相关选项的特 定功能。
详细信息按钮
3.3.2 按钮
3.信息按钮 信息按钮（ Info Buttons ）的触发可在视图翻转后，显示有关 应用程序的配置详细信息，信息有时会显示在当前视图的背面。信 息按钮有浅色和深色两种风格。
信息按钮
3.3.2 按钮
4.添加联系人按钮 用户可以点击添加联系人按钮（Add Contact Buttons）来浏 览现有联系人列表，并选择一个用于插入文本字段或其他视图，例 如，在邮件中，可以点击邮件收件人字段中的添加联系人按钮，从 联系人列表中选择收件人。
添加联系人按钮
3.3.3 编辑菜单
3.3.7 进度指示器
1.活动指示器 活动指示器（ Activity Indicators ）随着无法量化的任务旋 转，如随着加载或同步复杂的数据进行。任务完成时它就会消失。 活动指示器不具备交互。
活动指示器
3.3.7 进度指示器
2.进度条 活动指示器（ Progress Bars ）通过从左到右填充轨迹显示 任务已持续时间。进度条是虽然可以伴有用于取消相应操作的按 钮，但本身也不具备交互。
第3章 iOS系统界面设计
本章介绍：
iOS系统界面是移动UI设计中最重要的 部分之一，它直接影响着用户使用App的体 验。本章对iOS系统界面设计中的栏、视图 以及控件进行系统讲解与演练。通过本章的 学习，读者可以对iOS系统界面设计有一个 基本的认识，并快速掌握绘制iOS系统界面 的规范和方法。
学习目标
操作列表
3.2.3 活动视图
移动UI设计(微课版) 教案
移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 课程目标了解移动UI设计的概念与重要性掌握移动UI设计的基本原则与流程1.2 教学内容移动UI设计的定义与意义移动UI设计与用户体验的关系移动UI设计的基本原则移动UI设计的流程与步骤1.3 教学方法讲授与案例分析相结合互动讨论与学生展示1.4 课后作业第二章：移动UI设计的色彩与布局2.1 课程目标掌握移动UI设计中色彩的应用原则学习布局设计的方法与技巧2.2 教学内容移动UI设计中色彩的应用原则色彩搭配的技巧与实例分析布局设计的方法与技巧布局设计的实例分析2.3 教学方法理论知识讲解与实例分析相结合学生实践操作与讨论2.4 课后作业学生根据所学知识，设计一款移动应用的界面布局与色彩搭配第三章：移动UI设计的图标与字体3.1 课程目标学习图标设计的方法与技巧掌握字体设计的原则与方法3.2 教学内容图标设计的方法与技巧图标设计的实例分析字体设计的原则与方法字体设计的实例分析3.3 教学方法理论知识讲解与实例分析相结合学生实践操作与讨论3.4 课后作业学生根据所学知识，设计一款移动应用的图标与字体第四章：移动UI设计的交互与动效4.1 课程目标了解交互设计的基本概念掌握动效设计的原理与技巧4.2 教学内容交互设计的基本概念与原则交互设计的实例分析动效设计的原理与技巧动效设计的实例分析4.3 教学方法理论知识讲解与实例分析相结合学生实践操作与讨论4.4 课后作业学生根据所学知识，设计一款移动应用的交互与动效第五章：移动UI设计的实战项目5.1 课程目标学习移动UI设计的实战项目流程掌握项目沟通与团队协作的技巧5.2 教学内容实战项目的流程与步骤项目沟通与团队协作的技巧项目案例分析与讨论5.3 教学方法实战项目操作与讲解相结合学生实践操作与讨论5.4 课后作业学生根据所学知识，参与一个移动UI设计的实战项目第六章：移动UI设计的趋势与创新6.1 课程目标了解当前移动UI设计的趋势学习创新设计的方法与思维6.2 教学内容当前移动UI设计的趋势分析创新设计的方法与思维创新设计的实例分析6.3 教学方法市场调研与分析创新设计练习与讨论6.4 课后作业第七章：移动UI设计的用户测试与反馈7.1 课程目标掌握用户测试的方法与技巧学习如何收集和分析用户反馈7.2 教学内容用户测试的方法与技巧用户测试的实例分析用户反馈的收集与分析方法7.3 教学方法理论知识讲解与实例分析相结合学生实践操作与讨论7.4 课后作业学生设计一个简单的UI界面，并进行用户测试，记录测试过程和用户反馈。
UI设计必修课：Sketch移动界面设计教程
伍
2.7.5 Sketch价格能 不能优惠？
2.7 Sketch的常见问题
Chapter02 初识 Sketch
2.8 专家支招
01
2.8.1 Sketch怎 么兼容低版本文 件？
02
2.8.2 Sketch是 否有类似Axure 的组件库的功能？
03 Chapter03 从线框原 型开始
Chapter03 从线框原型开始
2.6.2 参 考线
2.6.3 网 格
2.6 Sketch的标尺、参考线和 网格
Chapter02 初识Sketch
壹
2.7.1 Sketch是否支 持Windows系统？
2.7.2 Sketch能否替
贰 代Photoshop？
2.7.3 Sketch是否有
叁 汉化版
肆
2.7.4 Sketch如何升 级？
6.2.2 圆角和 折角
6.2.4 装饰元 素
6.2.3 标签和 条纹
6.3.1 分 组和取消 分组
6.3.2 编 辑和变换 图形
6.3.3 旋转图 形
6.3.4 蒙版
6.3.5 剪 刀与描边 宽度
Chapter06 使用Sketch设计PC端网站UI
6.3 编辑绘制的图形
Chapter06 使用 Sketch设计PC端 网站UI
Chapter02 初识Sketch
2.1.1 实战——安 装Sketch
A
2.1.2 实战——启 动Sketch
B
2.1 Sketch的安装和启动
2.3.1 菜单栏
2.3.2 工具栏
2.3.4 画布
2.3.5 检查器
Chapter02 初识Sketch
《移动终端UI设计》教学教案04按钮设计
****** 学柠教师教案（学年第学期）课程名称：移动端UI设计授课专业： __________________________ 任课教师： __________________________ 所在系部： __________________________2019年8月4.2色块按钮设计掌握如何利用PS CC 软件绘制该部件的样式。
讲授法、案例分析法多媒体教学、手机客户端。
重点：掌握色块按钮的设计方法难点：透彻色块按钮的设计思路授课内容:4. 2.1设计要求 1 .大色块样式 2 .幽灵式按钮 3 .投影式按钮 4 .渐变色块按钮 5 .执教按钮和圆角按钮 4. 2.2思路剖析在设计按钮的时候，1 .要注意颜色的搭配，功能越强，颜色的突出会对用户更有帮 助，相反比较容易出现错误的操作。
2 .在做色块按钮设计的时候，也要注意层级上的比重，颜色太 鲜明对比，会给人以跳跃的视觉体验，从而会产生一些操作上的困 扰。
3.同一应用功能上，同级别的按钮，风格上，角度上，配色上, 和圆角的弧度，都要做到统一，反而会使页面显得混乱，毫无一致 性。
4,注意按钮的大小，过小会显得没有呼吸感，要注意留白。
5 .一般用户会使用右手，因为大部分人的右手比较灵活，有用 右手操作的习惯，所以在设计的时候，我们要把相对于重要的操作 放置在界面的右侧，这样用户使用更为便捷。
6 .注意不要太过花哨，在扁平化的软件中，讲究的就是操作效 率高，易于表达，如果按钮过于花哨，从而会增加用户的阅读难度。
4. 2. 3实现步骤 （最终效果图）任务名称 教学目的教学方法 教学手段重点难点 教学 内容 设计PS 文件(D 编箱§ E®U) BSS(L)文字①i≈¾S)鹿馍①3D(D) β≡(V)窗口侬科助回171.6% 文档:338.7K/13.4M总结课程内容，重申重点、难点课后作业完善课堂任务总结课程内容，重申重点、难点课后作业完善课堂任务任务名称 4.4水晶按钮设计教学目的 掌握如何利用PS CC 软件绘制该部件的样式。
视觉传达设计在移动UI界面中的运用
王蒙蒙（陕西工业职业技术学院，陕西咸阳712000）摘要：视觉传达设计作为现当代设计者运用特殊的平面视觉符号：插画、文字以及标志等要素，将设计者自身的构思与理念传达给设计者。
而随着现当代科学技术的不断发展，移动设备成为了人类日常生活当中最为常见的载体，其所表现出来的UI界面特点，是凸显设计者独有理念的最佳表现。
因此，本文针对视觉传达设计在移动UI界面中的运用进行分析，希望通过本文的研究更进一步的提升移动UI界面的整体设计水平。
关键词：视觉传达设计；移动UI界面；视觉符号中图分类号：J524文献标识码：A文章编号：1671-1602（2019）07-0070-01作者简介：王蒙蒙（1990.5-），男，河南安阳人，陕西工业职业技术学院，助教，2013级硕士，研究方向：数字媒体技术。
1人类视觉注意及其所具有的特点1.1人类视觉注意的基本概况视觉注意主要指的是：人类在对表象进行观察的时候，大多会对其中自身所感兴趣的地方以及场景当中最吸引人的地方过渡关注，并且会针对这些区域进行非常细致的观察，进而对周卫环境当中的许多视觉特性予以忽视，促使人在繁杂的信息表象当中紧抓住了颜色这一目标，对这些目标边缘所表现出来的信息进行分析，进而不断提升目标以及一些重要事物的观察能力。
1.2视觉注意具有一下许多不同的特点a）视觉注意上一定要具有相应的宽度，在这些人对某一些地方极为关注的时候，视觉宽度就会形成一个较小的区域，并且逐渐缩小相应的表现范围，将有效的资源在人类所关注的区域当中进行重新分配；b）视觉注意之上所表现出来的强度，这主要指的是人类视觉在针对于某一些事物表现出来的高度过渡集中的时候，会忽略一些不想管的事物，进而与视觉注意所表现出来的宽度形成一个反比的特点；c）视觉注意表现出来的选择性特点，由于自身的大脑神经系统对于所见到的资源计算具有一定的有限性，人类在自身大脑当中对信息进行处理的时候必须要有所选择，进而对自身所感兴趣的一些信息进行极为细致的处理，这就是一种选择性的注意，此时对于这当中的环境信息处理，都来自于更为全面的加工和处理。
《Photoshop CC移动UI设计实例教程(微课版)》 教案
《Photoshop CC移动UI设计实例教程（微课版）》教案1.1 课程背景1.1.1 随着移动互联网的快速发展，移动应用界面（UI）设计成为了设计师们关注的焦点。
1.1.2 Photoshop CC作为一款功能强大的图像处理软件，在移动UI设计领域具有广泛的应用。
1.1.3 本教程通过实例讲解Photoshop CC在移动UI设计方面的应用，帮助学员掌握相关技巧。
二、知识点讲解2.1 Photoshop CC基本操作2.1.1 界面布局：介绍Photoshop CC的工作界面及各个功能区的用途。
2.1.2 文件操作：讲解新建、打开、保存和关闭文件的方法。
2.1.3 图像编辑：学习裁剪、缩放、旋转和翻转图像的操作。
三、教学内容3.1 实例1：制作登录界面3.1.1 设计思路：讲解登录界面的设计流程，包括布局、颜色搭配和字体选择等。
3.1.2 制作步骤：使用Photoshop CC绘制登录界面的背景、输入框、按钮等元素。
3.1.3 技巧点拨：介绍如何调整图层顺序、使用图层样式和蒙版等技巧。
四、教学目标4.1 掌握Photoshop CC的基本操作。
4.2 学会使用Photoshop CC制作移动UI设计中的常见元素。
4.3 能够独立设计并制作出符合设计思路的移动应用界面。
五、教学难点与重点5.1 难点：Photoshop CC的高级功能，如图层样式、蒙版和调整图层等在实际操作中的应用。
5.2 重点：实例教学中涉及到的具体制作步骤和技巧，以及如何将设计思路转化为实际操作。
（由于篇幅原因，仅展示了前五个章节的结构，您可以根据这个结构继续编写后续章节。
）教案六、教具与学具准备6.1 教学用具6.1.1 计算机及投影设备6.1.2 Photoshop CC软件6.1.3 教学PPT6.1.4 教学视频（微课）七、教学过程7.1 导入新课7.1.1 展示实例效果，引发学生兴趣7.1.2 介绍本节课的教学内容和目标7.1.3 简要说明实例制作过程7.1.4 提出问题，引导学生思考7.2 知识讲解7.2.1 讲解Photoshop CC基本操作7.2.1.1 界面布局及功能区用途7.2.1.2 文件操作方法7.2.1.3 图像编辑技巧7.2.2 知识点拓展7.2.2.1 介绍图层概念及其用途7.2.2.2 讲解图层样式、蒙版和调整图层的使用方法7.2.2.3 分析实例中应用的知识点7.3 实践操作7.3.1 学生自主尝试制作实例7.3.1.1 按照设计思路绘制界面元素7.3.1.2 调整图层顺序、应用图层样式等技巧7.3.1.3 学生相互交流、讨论遇到的问题和解决方法7.3.2 教师辅导7.3.2.1 针对学生遇到的问题提供指导7.3.2.2 演示制作过程，讲解相关技巧7.3.2.3 鼓励学生提出问题和意见，共同探讨八、板书设计8.1 教学重点板书8.1.1 Photoshop CC基本操作8.1.2 实例制作步骤及技巧8.1.3 设计思路与实际操作的转化方法8.2 教学难点板书8.2.1 图层样式、蒙版和调整图层的使用8.2.2 实例中涉及的高级功能8.2.3 针对性的问题解决方法九、作业设计9.1 课后练习9.1.1 制作一个简单的移动应用界面9.1.2 要求运用所学知识和技巧，体现个人设计风格9.1.3 提交作业时附上设计思路说明9.2 拓展作业9.2.1 分析并模仿一个喜欢的移动应用界面9.2.2 学会从实际应用中吸取经验，提高设计水平9.2.3 撰写课后心得体会，分享学习经验十、课后反思及拓展延伸10.1 教学效果反思10.1.1 学生对知识的掌握程度10.1.2 教学过程中存在的问题10.1.3 针对性地调整教学方法，提高教学效果10.2 学生学习反馈10.2.1 收集学生作业，评估学习成果10.2.2 听取学生意见，了解学习需求10.2.3 鼓励学生积极参与课堂讨论，提高课堂氛围10.3 拓展延伸10.3.1 介绍相关书籍、教程、在线课程等学习资源10.3.2 推荐参加设计比赛、研讨会等活动，拓宽视野10.3.3 鼓励学生自主探究，培养创新意识重点和难点解析一、重点环节1.1 知识点讲解在教学过程中，Photoshop CC基本操作的讲解是重点环节。
《移动终端UI设计》教学课件01移动终端UI设计概述
1.5.1 iOS系统
42
详情页标题文字与详情文字间距为 8的倍数。例如，24像素、32像素、40像素等。 设定行间距与字号比例为 1.5倍。对齐原则为段落文字采用“两端对齐左对齐”，避 头尾为“严格”，首行严禁放 5标点。 关于字体大小的问题，顶部操作栏文字大小为 34～ 38像素，标题文字大小为 28～ 34像素，正文文字大小为 26～ 30像素，辅助性文字大小为 0～ 24像素。
1.2.6 可穿戴设备
24
越来越多的科技公司开始大力开发智能 眼镜、智能手表、智能手环、智能戒指 等可穿戴设备产品。智能终端开始与时 尚挂钩，人们的需求不再局限于可携带， 更追求可穿戴，人们的手表、戒指、眼 镜都有可能成为智能终端。
1.3.1 APP的概念
26
APP即 application （应用程序）的缩写， 指运行在智能手机、平 板电脑等移动终端设备 上的第三方应用程序。
生活服务类 生活服务类 APP 有很多， 而且类型广泛
新闻资讯类 2019 年新闻资讯类 APP 排行榜如图 1-14 所示。
1.3.2 APP的分类
28
1.3.2 APP的分类
29
1.3.3 APP界面的构成元素
30
按钮
进度条
列表框
1
2
3
4
5
6
图标
7
开关
搜索栏
标签栏
1.3.4 APP的设计流程
提示：生活中常见的智能终端包括移动智能终端、 车载智能终端、智能电视、可穿戴设备等。
1.2.1 移动终端的概念
17
移动终端特别是移动智能终端，具有如下特性。
54 3 2 1
1 移动性和实时性。 2 通话功能、上网功能和多媒体功能。 3 硬件与软件的可靠性。 4 基于操作系统的多任务性。 5 应用程序安装使用的广泛性与易用性。
移动UI设计 课程标准(教学大纲)
《移动UI设计（微课版）》课程标准XXXX学校二。
二二年月一.课程基本信息移动UI 设计（微课版）数字媒体与艺术设计专业第X 学期 专业基础课/专业核心课/专业拓展课等二.课程性质与任务课程性质：《移动UI 设计（微课版）》是数字媒体与艺术设计专业的一门核 心专业课程，依据职业能力的要求，主要对移动UI 设计、iOS 和Android 系统 移动设备界面的结构及设计规范等相关知识进行梳理和讲解，主要介绍了移动 UI 设计基础知识、移动UI 的筹划与原型设计方法、移动UI 的色彩搭配方法、 移动图标的设计方法、移动App 的UI 设计方法、移动App 的交互设计、适配与 输出移动UI 设计的方法和设计与制作移动App 工程的相关知识等八局部内容。
随着科技的开展，手机与人们生活的联系日益密切。
手机中的软件系统是 用户直接操作的对象，它以精美的视觉效果和便捷的操作为用户所青睐，进而 促进了移动UI 设计行业的兴盛。
本课程使学生进一步了解移动UI 设计的相关知识，在工程的实践过程中激 发学生的创新意识，促使学生加深掌握移动UT 设计的基本知识，使学生实现从 学校到社会的平滑过渡。
课程任务：通过学习移动UI 设计等相关理论知识，不仅促使学生具备移动 UI 设计相关的理论知识和行业素养，同时也有助于培养学生发现问题、分析问 题、解决问题的能力，使学生能够具有相对良好的沟通、交流和协调能力，培 养良好的职业道德和行为素养，为后续的课程学习和职业开展打下坚实的基础。
三、职业岗位标准1 .典型职业活动移动UI 设计师等。
2 .典型职业岗位标准（或工作内容、职责）、技术等级标准【课程名称】 【适用专业】3.主要职业能力1）培养学生严谨认真的工作态度和终身学习的习惯；2）培养学生在实际工作中遵守相关规范和要求；3）丰富学生的知识结构，提升专业技能；4）培养良好的人际沟通能力和团队互助的精神；5）培养学生自我学习、勇于创新、积极承担不同角色的能力。