当前位置：文档之家 › UI-第2章移动UI设计规范课件

UI-第2章移动UI设计规范课件

  • 格式：pptx
  • 大小：3.80 MB
  • 文档页数：49

下载文档原格式

  / 49

合集下载

移动端APPUI设计与交互基础教程 第2章 UI图标设计

移动端APPUI设计与交互基础教程 第2章 UI图标设计

2.1.1 px、pt和ppi等相关概念 1．px 2．pt 3．分辨率 （1）物理分辨率 （2）逻辑分辨率 4．缩放倍率 5．ppi 6．dpi
2.1 初识移动设备尺寸及其相关概念
2.1.2 iPhone机型屏幕尺寸规格
2.2 UI图标设计
2.2.1 图标的分类 1．系统图标（按属性分类） 系统图标指的是系统功能或APP应用程序的启动图标。 2．功能图标（按属性分类） 功能图标指的是承担着某种功能的图标。
2.6.1 知识点概述 1．拟物 拟物指的是通过叠加高光、纹理、材质、阴影等效果对实物进行再现，其 设计元素均来自于真实生活接触的物件。 2．拟物与扁平 拟物与扁平是相互对立的设计理念，作为设计师应该多关注信息本身的含 义，而对于元素承载信息量的多少则要根据产品的用户角色来综合考量。
图2-60 质感细节明显的拟物图标
2.6 拟物类图标的制作
2.6.2 拟物化图标制作（木纹质感翻页日历）
图2-61 拟物化图标效果分析
2.6 拟物类图标的制作
2.6.3 课堂巩固练习（拟物齿轮）
图2-83 齿轮拟物图标
图2-84 快速绘制齿轮
谢谢观看！
设计与交互基础教程
MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE
移 动 端
APP UI
02
UI图标设计
本章依托UI设计中常见图标的制作方法与质感表现，在介绍图标制作 规范的基础上，巩固和加强Photoshop软件在UI设计中的核心操作。
2.1 初识移动设备尺寸及其相关概念
图2-4 扁平化图标设计
2.2 UI图标设计
2.2.1 图标的分类 5．拟物化图标（按设计风格分类） 拟物化图标指的是模拟现实物品的造型和质感的图标。
《移动UI设计案例教程》单元2 UI设计元素

《移动UI设计案例教程》单元2 UI设计元素


2.2.1 色彩的构成
1．色相 色相即色彩的面貌，是色彩的首要特征，我们通常借助色彩的 名称标识区分色相，如红色、橙色、绿色。色相是区分各种不同 色彩最准确的标准之一。 2．明度 明度又叫作亮度，是指色彩的明暗、深浅程度，是人的眼睛对 物体表面的明暗程度的感知的体现。 3．纯度 纯度是指颜色的鲜艳和纯净程度，又叫饱和度或彩度，不同的 色彩不仅明度不同，纯度也不同。
2.2.2 色彩的混合
所谓色彩的混合，是指将某一种色彩混入另一种色彩，形成 第三种与原来的色彩不同的新色彩，
色彩混合主要有两种方式：加色混合法和减色混合法。 1．加色混合法 加色混合法即色光的混合，是指将不同颜色的色光混合到一 起，产生新的色光。其特点是混合的色光越多，得到的新色光明 度越高。 2．减色混合法 减色混合法是色料的混合，是指将不同的色料混合到一起， 得到新的颜色，即颜料的混合。其特点是混合的颜色越多，颜色 纯度越低。
2.3 本单元小结
本单元主要介绍了UI设计布局和色彩的相关知识。通过对本单 元的学习，读者可以深入了解UI设计布局和色彩的搭配原则，了解 色彩的使用方法和技巧，能够针对不同产品选择合适的布局和色彩 进行UI设计。
2.4 课后练习题
1．常见的UI布局有哪些？在布局时需要注意哪些方面？ 2．谈谈不同的色彩搭配给人们带来的视觉差异有哪些。
素质目标： 鼓励学生探求美的来源，树立正确的审美意识，理解色彩联想对
心理影响的重要意义。 知识目标：
1．了解常见的 UI 界面布局方式； 2．掌握色彩的使用方法。 技能目标： 1．能够根据 App 主题进行界面布局； 2．能够熟练运用色彩相关知识进行色彩搭配。
2.1 UI 设计布局
2.1.1 宫格布局 2.1.2 列表布局 2.1.3 卡片布局 2.1.4 瀑布流式布局 2.1.5 多面板布局
移动UI界面设计iOS系统UI设计规范介绍课件

移动UI界面设计iOS系统UI设计规范介绍课件


注重用户体验： 界面设计应注 重用户体验， 提高用户满意 度。
适应不同设备： 界面设计应适 应不同设备的 屏幕尺寸和分 辨率。
设计元素
色彩：选择合适的色彩搭配， 提高用户的视觉体验
字体：选择易于阅读的字体， 提高用户的阅读体验
图标：使用简洁明了的图标， 提高用户的操作体验
布局：合理布局界面元素，提 高用户的使用效率
1
规范概述 iOS系统UI设计
2
原则 iOS系统UI设计 3 元素
课件形式
幻灯片演示：使用 PPT进行演示，图文 并茂，易于理解
视频讲解：录制视 频，结合实际操作， 直观展示
互动问答：设置问 答环节，提高参与 度，加深理解
案例分析：通过实际 案例，分析iOS系统 UI设计规范在实际 应用中的优缺点
移动UI界面设计iOS系统UI设 计规范介绍课件
演讲人
目录
01. 移动UI界面设计 02. iOS系统UI设计规范 03. 介绍课件
移动UI界面设计
设计原则
STEP1
STEP2
STEP3
STEP4
简洁明了：界 面设计应简洁 明了，易于理 解和使用。
保持一致性： 界面元素和操 作流程应保持 一致，避免用 户混淆。
交互：设计易于使用的交互方 式，提高用户的操作体验
反馈：提供及时的反馈信息， 提高用户的使用体验
设计流程
1 需求分析：了解用户需求，确定设计目标和功能 2 原型设计：绘制草图，设计界面布局和交互流程 3 视觉设计：设计界面风格、配色、图标等视觉元素 4 交互设计：设计界面交互方式，包括点击、滑动、拖拽等 5 开发实现：将设计稿转化为代码，实现界面功能 6 测试优化：对界面进行测试，优化设计，提高用户体验
移动端APPUI设计与交互基础教程 第2章 UI图标设计

移动端APPUI设计与交互基础教程 第2章 UI图标设计


2.2 UI图标设计
2.2.2 常见存储格式与图标尺寸 （2）Android系统
2.2 UI图标设计
2.2.3 APP启动图标的常见创意设计方法 1．使用产品名字的首字母或一个字
2．使用品牌名字全称
2.2 UI图标设计
2.2.3 APP启动图标的常见创意设计方法 3．使用产品核心功能的图形
4．使用产品形象
2.6.1 知识点概述 1．拟物 拟物指的是通过叠加高光、纹理、材质、阴影等效果对实物进行再现，其 设计元素均来自于真实生活接触的物件。 2．拟物与扁平 拟物与扁平是相互对立的设计理念，作为设计师应该多关注信息本身的含 义，而对于元素承载信息量的多少则要根据产品的用户角色来综合考量。
图2-60 质感细节明显的拟物图标
2.6 拟物类图标的制作
2.6.2 拟物化图标制作（木纹质感翻页日历）
图2-61 拟物化图标效果分析
2.6 拟物类图标的制作
2.6.3 课堂巩固练习（拟物齿轮）
图2-83 齿轮拟物图标
图2-84 快速绘制齿轮
谢谢观看！
2.1.1 px、pt和ppi等相关概念 1．px 2．pt 3．分辨率 （1）物理分辨率 （2）逻辑分辨率 4．缩放倍率 5．ppi 6．dpi
2.1 初识移动设备尺寸及其相关概念
2.1.2 iPhone机型屏幕尺寸规格
2.2 UI图标设计
2.2.1 图标的分类 1．系统图标（按属性分类） 系统图标指的是系统功能或APP应用程序的启动图标。 2．功能图标（按属性分类） 功能图标指的是承担着某种功能的图标。
2.3 线性图标
2.3.1 线性图标概述 线性图标也可以称为功能性图标，这是因为线性图标大多数用于APP应用 的某些具体功能展示方面。
《移动UI交互设计》第二章

《移动UI交互设计》第二章

从图中可以看出，当图标的精细度 为零时，图标几乎没有可用性，随着精 细度的逐渐增大，图标的可用性也会逐 渐增强；而精细度过大时，反倒会影响 图标的可用性。
2.1.2 图标设计原则
13
4.风格统一
所谓图标的风格，表现为对图标题材选择的一贯性和独特性、对图标主题思想的挖掘，也 表现为对创作手法的运用、塑造形象的方式、对艺术语言的驾驭等方面的独创性。对于一套图 标来说，如果图标的视觉设计协调统一、选用元素的出处统一，我们就说这套图标具有自己的 风格。
2.2.1 确定ቤተ መጻሕፍቲ ባይዱ标风格
19
MBE 风格图标的统一性表现在设计手法上，可以尝试在图标的外形上寻求统一。如图所示的 两套图标，每套图标的外形都是一致的，在统一的外形中再添加元素对图标进行区分。在设计这 种类型的图标时，要注意图标的差异性原则，要能够很容易地辨识出每个图标所代表的含义。
2.2.1 确定图标风格
苹果用户体验设计师Mike Stern对于UI和应用图标的 重要性这样解释：“用户并不会根据你使用了多少技术， 或是整合了多少API（Application Program Interface， 应用程序接口），或是你使用的代码有多厉害而去对应用 做出评价。他们在意的是你的应用能用来做什么，会给他 们带来什么感受。用户期待你的应用能为他们带来直观、 美妙甚至不可思议的体验。“
2.2 图标设计流程
步骤一 确定图标风格
步骤二 图标草图绘制
步骤三 图标电脑制作
步骤四 主题界面制作
图标设计流程
2.2.1 确定图标风格
17
图标设计的风格没有固定的形式，也没有所谓的对错，甚至流行的设计趋势会反复，有时流 行复古风格，过一段时间又流行现代风格。现在我们使用的手机、Pad 中，图标的扁平化设计成 为流行趋势，强调图标的简洁性、寓意性，去除冗余、厚重和繁杂的装饰效果，让图标所表述的 功能本身作为核心被凸显出来，如图所示的一套小米手机图标就是典型的扁平化设计风格。
移动UI设计(微课版) 教案

移动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 布局与排版2.5 交互设计第三章：移动UI设计的风格与主题3.1 设计风格的选择与应用3.2 主题色的搭配与调整3.3 typography的应用3.4 个性化与定制化设计3.5 设计规范与系统风格第四章：移动UI设计的交互与动画4.1 交互设计的基本原理4.2 手势与滑动操作4.3 动画的类型与效果4.4 动效的实现与优化4.5 交互与动画的设计原则第五章：移动UI设计的实战案例解析5.1 案例一：单页面应用UI设计5.2 案例二：社交平台UI设计5.3 案例三：电子商务UI设计5.4 案例四：音乐APP UI设计5.5 案例五：新闻阅读器UI设计第六章：设计工具与技能6.1 Sketch vs. Figma：选择最佳设计工具6.2 使用Sketch进行UI设计的基本操作6.3 Figma的协作功能与界面布局6.4 矢量图设计工具Adobe XD的基本操作6.5 原型设计与交互：Axure RP的使用第七章：用户画像与需求分析7.1 用户研究的意义与方法7.2 创建用户画像：年龄、性别、兴趣等7.3 需求分析：用户访谈、问卷调查等7.4 竞品分析：分析竞争对手的UI设计7.5 用户故事与场景分析第八章：原型设计与框架构建8.1 原型设计的基本概念与工具8.2 低保真原型与高保真原型的区别8.3 使用线框图、低保真原型工具进行设计8.4 高保真原型设计与制作8.5 框架构建：设计系统的概念与实践第九章：移动UI设计的视觉元素9.1 视觉元素在移动UI设计中的作用9.2 图片与图标的设计规范9.3 色彩搭配与视觉层次9.4 栅格系统与响应式设计9.5 设计规范：Material Design与Apple's Human Interface Guidelines第十章：设计稿的评审与迭代10.1 设计稿评审的标准与方法10.2 获取反馈：用户测试与设计师评审10.3 设计修改与迭代流程10.4 设计规范文档的编写与应用10.5 准备上线：的调整与优化第十一章：交互设计与动画效果11.1 交互设计的基本概念11.2 交互设计的实现方法11.3 动画效果的类型与实现11.4 动效在UI设计中的作用11.5 交互设计与动画效果的最佳实践第十二章：响应式移动UI设计12.1 响应式设计的概念与重要性12.2 响应式设计的实现方法12.3 移动端与Web端的差异12.4 设计工具的选择与应用12.5 响应式设计的实战案例分析第十三章：品牌与个性化的移动UI设计13.1 品牌在移动UI设计中的重要性13.2 品牌元素的应用与设计13.3 个性化设计的概念与实现13.4 设计风格的一致性与变化性13.5 品牌与个性化设计的实战案例分析第十四章：移动UI设计的趋势与创新14.1 移动UI设计的最新趋势14.2 创新设计的方法与技巧14.3 设计创新的实现与评价14.4 设计创新案例分析14.5 面对未来：移动UI设计的挑战与机遇第十五章：移动UI设计的项目管理与团队协作15.1 项目管理在移动UI设计中的作用15.2 项目计划的制定与执行15.3 团队协作的工具与方法15.4 沟通与协调的重要性15.5 移动UI设计项目的实战案例分析重点和难点解析重点：1. 移动UI设计的基本概念与重要性2. 设计工具的使用：Sketch, Figma, Adobe XD, Axure RP等3. 用户研究的方法：用户画像、需求分析、竞品分析、用户故事与场景分析4. 原型设计与框架构建：线框图、低保真原型、高保真原型5. 视觉元素的设计：图片、图标、色彩、栅格系统、响应式设计6. 交互设计与动画效果的实现7. 响应式移动UI设计的原则与实践8. 品牌与个性化的移动UI设计策略9. 移动UI设计的最新趋势与创新方法10. 项目管理与团队协作的工具与方法难点：1. 用户研究的深度与准确性，包括用户访谈、问卷调查等方法的运用2. 原型设计与框架构建的技术细节，如交互、动画效果的实现3. 视觉元素设计的审美与规范，包括色彩搭配、排版等4. 交互设计与动画效果的创意实现，以及动效的优化5. 响应式移动UI设计在不同设备上的实现与调整6. 品牌与个性化的移动UI设计在保持一致性下的创新7. 面对设计趋势与创新时的判断与选择8. 项目管理与团队协作中沟通与协调的能力培养。

移动端UI界面设计介绍课件

移动端UI界面设计介绍课件


设计工具
Sketch：矢量图 形设计工具，适用 于iOS和Android 平台
Adobe XD：矢量 图形设计工具，适 用于iOS和 Android平台
Figma：矢量图形 设计工具，适用于 iOS和Android平 台
InVision Studio： 矢量图形设计工具， 适用于iOS和 Android平台
03
提高开发效率：合理的UI设计可以降低开发 成本和维护成本
04
适应多种设备：移动端UI设计需要适应各种 屏幕尺寸和分辨率，满足不同设备的需求
移动端UI设计的基本原则
01
简洁明了：界面设计应简 洁明了，让用户能够快速 找到所需功能。
02
易于操作：界面设计应易
于操作，让用户能够轻松
完成各种任务。
03
响应迅速：界面设计应响 应迅速，让用户能够快速 得到反馈。
04
保持一致性：界面设计应
保持一致性，让用户能够
快速熟悉并适应界面。
移动端UI设计的发展趋势
1 扁平化设计：简洁明了，易于理解 2 响应式设计：适应各种屏幕尺寸和设备 3 手势操作：更直观、自然的交互方式 4 动态效果：增强用户体验，提高用户参与度 5 人工智能与机器学习：提高个性化和智能化水平 6 隐私与安全：保护用户隐私和数据安全，提高用户信任度
- 设计要点：个性 化推荐算法、用户 界面设计、交互设
计
- 设计要点：导航设 计、搜索功能、商品
展示
案例四：美团外卖界 面设计
案例三：网易云音乐 界面设计
- 特点：个性化推荐， 注重用户体验
- 特点：快速下单， 方便快捷
- 设计要点：菜单设计、 下单流程、支付方式设计移动端UI来自面设 计优化用户体验优化
移动UI设计规范

移动UI设计规范

一个10px×10px的标准分辨率（@1x）图像，该图像的@ 2x版本为 20px×20px，@ 3x版本为30px×30px
2.1.1 iOS界面设计尺寸
•逻辑像素和物理像素： 逻辑像素，英文全称“Logic Point”，单位 “点”，即“pt”， 是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但 由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个 像素，因此iPhone 4的物理像素是960x640px。iOS开发工程师和使 用Sketch软件设计界面的UI设计师使用的单位都是pt。
标签栏图标尺寸
2.1.4 iOS图标规范
•系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、 工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配。
iOS系统中不同设备系统图标的尺寸
2.1.5 iOS文字规范
1.系统字体： iOS 英 文 使 用 的 是 San Francisco (SF) 字 体 ， 其 中 SF 字 体 有 SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。 中文使用的是苹方，共有6个字重。
• 应 用 图 标 的 设 计 ： 创 建 应 用 图 标 时 ， 应 以 320dpi 分 辨 率 中 的 48dp尺寸为基准。MaterialDesign提供了四种不同形状的应用图标 尺寸供UI设计师参考，以保持一致的视觉平衡。
不同形状的应用图标尺寸
2.2.4 Android图标规范
•应用图标的适配：应用图标的尺寸应根据不同设备的分辨率进行 适配。当应用图标应用于Google Play中，其尺寸是512x512px。
《UI设计教程》课件

《UI设计教程》课件


UX Design的目标是创造一种无缝、 直观、愉悦的用户体验，使产品更 加易于使用和满足用户需求。
UX Design包括多个领域，如交互设 计、信息架构、视觉设计、可用性测 试等。
用户体验设计可以帮助企业更 好地了解用户需求，提高市场 竞争力
用户体验设计可以提高产品 的易用性和用户满意度
用户体验设计可以降低产品 的开发成本，提高开发效率
色彩搭配：选择合适的色彩搭配， 使界面更加美观
字体选择：选择易读、美观的字体， 提高阅读体验
添加标题
添加标题
添加标题
添加标题
图标设计：设计简洁、易识别的图 标，提高用户体验
布局规划：合理规划界面元素，使 界面更加整洁、有序
色彩搭配：选择合 适的色彩搭配，使 界面更加美观、易 读
字体选择：选择合 适的字体，使界面 更加易读、美观
反馈/评论栏：用于用 户提供反馈或评论信息
通知栏：用于显示提醒信 息，如新邮件、新消息等
购物车/订单栏：用于显 示用户购买的商品或服务
导航栏：用于引导用户 浏览网站或应用程序
状态栏：用于显示系统状 态，如网络连接、电池电
量等
菜单栏：用于显示应用 程序或网站的功能选项
登录/注册栏：用于用 户登录或注册账户
简洁明了：按钮设 计应简洁明了，易 于用户理解
易于识别：按钮设 计应易于识别，让 用户一眼就能看出 其功能
易于操作：按钮设 计应易于操作，让 用户轻松点击
符合用户习惯：按 钮设计应符合用户 习惯，让用户易于 接受和使用
工具栏：用于执行特定操 作，如保存、打印、复制
等
搜索栏：用于输入关键 词进行搜索
提升用户体验：良好的UI设计可以提高用户满意度和忠诚度 提高产品竞争力：优秀的UI设计可以提高产品的市场竞争力 提高品牌价值：良好的UI设计可以提高品牌形象和品牌价值 提高开发效率：良好的UI设计可以提高开发效率和降低开发成本
移动UI设计(微课版) 教案全套

移动UI设计(微课版) 教案全套

移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 移动UI设计的定义与重要性1.2 移动UI设计的原则与要素1.3 移动UI设计的流程与步骤1.4 移动UI设计的发展趋势与挑战第二章：移动UI设计的基本界面布局2.1 界面布局的基本概念与原则2.2 常见的界面布局类型与示例2.3 界面布局的实战技巧与方法2.4 优秀界面布局案例分析与借鉴第三章：移动UI设计的色彩与图标3.1 色彩在移动UI设计中的应用与重要性3.2 色彩搭配的基本原则与技巧3.3 图标设计的基本概念与原则3.4 图标设计的实战技巧与方法第四章：移动UI设计的字体与排版4.1 字体在移动UI设计中的应用与重要性4.2 字体的选择与搭配技巧4.3 排版的基本概念与原则4.4 排版设计的实战技巧与方法第五章：移动UI设计的交互与动画5.1 交互在移动UI设计中的应用与重要性5.2 交互设计的基本概念与原则5.3 动画设计的基本概念与原则5.4 交互与动画设计的实战技巧与方法第六章：移动UI设计的导航设计6.1 导航在移动UI设计中的应用与重要性6.2 导航设计的类型与实战技巧6.3 导航设计的常见问题与解决方案6.4 优秀导航设计案例分析与借鉴第七章：移动UI设计的适配与响应式设计7.1 适配与响应式设计在移动UI设计中的应用与重要性7.2 屏幕尺寸与分辨率的概念与实战技巧7.3 媒体查询与CSS Grid的应用技巧7.4 优秀适配与响应式设计案例分析与借鉴第八章：设计工具的使用8.1 Sketch在移动UI设计中的应用与实战技巧8.2 Adobe XD在移动UI设计中的应用与实战技巧8.3 Figma在移动UI设计中的应用与实战技巧8.4 其他设计工具的选择与应用技巧第九章：移动UI设计的项目管理与团队协作9.1 项目管理在移动UI设计中的应用与重要性9.2 项目计划的制定与执行技巧9.3 团队协作的基本概念与实战技巧9.4 优秀团队协作与项目管理案例分析与借鉴第十章：移动UI设计的案例解析与实战训练10.1 案例解析一：某电商APP的UI设计10.2 案例解析二：某社交平台的UI设计10.3 案例解析三：某新闻阅读APP的UI设计10.4 实战训练：设计一个属于自己的移动UI项目第十一章：移动UI设计的规范与标准11.1 设计规范的概念与重要性11.2 常见的设计规范与标准解读11.3 设计规范的实战应用与技巧11.4 优秀设计规范案例分析与借鉴第十二章：用户体验与用户测试12.1 用户体验在移动UI设计中的应用与重要性12.2 用户测试的基本概念与方法12.3 用户体验设计的实战技巧与方法12.4 优秀用户体验案例分析与借鉴第十三章：移动UI设计的优化与提升13.1 性能优化在移动UI设计中的应用与重要性13.2 图像优化与加载速度的提升技巧13.3 代码优化与执行效率的提升技巧13.4 优秀性能优化案例分析与借鉴第十四章：移动UI设计的趋势与创新14.1 设计趋势在移动UI设计中的应用与重要性14.2 最新设计趋势解读与实战技巧14.3 创新设计思维的培养与实践14.4 优秀创新设计案例分析与借鉴第十五章：移动UI设计的职业规划与发展15.1 移动UI设计师的职业角色与责任15.2 职业规划的基本概念与方法15.3 行业趋势与技能提升的方向15.4 优秀设计师的成长经验分享与借鉴重点和难点解析本文教案全面介绍了移动UI设计的基本概念、设计原则、实战技巧以及优秀案例分析等内容。

移动UI设计(微课版) 教案

移动UI设计(微课版) 教案

移动UI设计（微课版）教案全套第一章：移动UI设计概述1.1 移动UI设计的概念与重要性1.2 移动UI设计的原则与目标1.3 移动UI设计的流程与步骤1.4 移动UI设计的发展趋势与挑战第二章：移动UI设计的基本元素2.1 图标设计2.1.1 图标的分类与特点2.1.2 图标的创作技巧与规范2.1.3 图标设计的案例分析2.2 文字设计2.2.1 文字的排版与字体选择2.2.2 文字的可读性与排印规范2.2.3 文字设计的案例分析2.3 色彩设计2.3.1 色彩的心理学与情感表达2.3.2 色彩的搭配与渐变技巧2.3.3 色彩设计的案例分析2.4 布局与界面结构2.4.1 布局的分类与原则2.4.2 界面结构的层次与导航设计2.4.3 布局与界面结构的案例分析第三章：移动UI设计的交互与动效3.1 交互设计的基本原理3.1.1 交互设计的概念与目标3.1.2 交互设计的原则与方法3.1.3 交互设计的案例分析3.2 动效设计3.2.1 动效的概念与作用3.2.2 动效的创作技巧与类型3.2.3 动效设计的案例分析第四章：移动UI设计的用户体验与研究4.1 用户体验的基本概念与要素4.1.1 用户体验的五个层次4.1.2 用户体验的设计方法与流程4.1.3 用户体验的案例分析4.2 用户研究4.2.1 用户研究的类型与方法4.2.2 用户研究的流程与技巧4.2.3 用户研究的案例分析第五章：移动UI设计的实战项目与案例分析5.1 项目一：社交媒体APP的UI设计5.1.1 项目需求与分析5.1.2 UI设计的流程与方法5.1.3 项目成果与评价5.2 项目二：在线购物APP的UI设计5.2.1 项目需求与分析5.2.2 UI设计的流程与方法5.2.3 项目成果与评价5.3 项目三：音乐播放APP的UI设计5.3.1 项目需求与分析5.3.2 UI设计的流程与方法5.3.3 项目成果与评价第六章：移动UI设计的色彩心理学与应用6.1 色彩对用户体验的影响6.2 移动UI色彩搭配技巧6.3 色彩应用于不同功能区域的策略6.4 色彩心理学的案例分析第七章：移动UI设计的图标系统与风格统一7.1 图标系统的构建与重要性7.2 图标的设计风格与分类7.3 图标系统在不同平台中的应用差异7.4 风格统一案例分析第八章：移动UI设计的字体与排版8.1 字体的选择与搭配8.2 排版原则与层次感营造8.3 文本的可读性与交互设计8.4 字体与排版案例分析第九章：移动UI设计的动效与动画9.1 动效在移动UI中的应用9.2 动画原理与类型9.3 动效设计的实现技术与工具9.4 动效与动画案例分析第十章：移动UI设计的项目管理与团队协作10.1 项目管理在UI设计中的作用10.2 UI设计项目的流程与阶段10.3 团队协作技巧与沟通策略10.4 项目管理及团队协作案例分析重点和难点解析重点一：移动UI设计的基本元素图标设计：学生需要掌握如何创作具有辨识度和美观度的图标，以及如何遵循设计规范。

UI界面设计PPT教学课件(2024)


利用缓动函数实现元素运动的平滑过渡，增强视觉效果。
缓动函数应用
通过定义关键帧实现复杂的动画效果，提高界面活力。
关键帧动画
利用CSS3的动画与变形属性实现丰富的动效表现，提升用户体验。
CSS3动画与变形
借助JavaScript实现更高级别的动效控制，如交互反馈、实时渲染等。
JavaScript动态效果
输入框（Input B…
允许用户输入文本信息，如搜索框、表单填写等。
下拉菜单（Dropdo…
提供一系列选项供用户选择，节省页面空间。
滑块（Slider）
用于调节数值或选择范围，如音量调节、色彩选择等。
弹窗（Modal）
用于展示重要信息或引导用户进行特定操作，如登录框、确认框等。
03
04
05
22
2024/1/29
UI界面定义
优秀的UI设计能够提升用户体验，增强产品吸引力，提高用户满意度和忠诚度。
重要性
4
2024/1/29
简洁明了、一致性、反馈及时、美观大方、易用性等。
视觉设计、交互设计、信息架构、可用性、可访问性等。
用户体验要素
设计原则
5
2024/1/29
个性化设计、情感化设计、智能化设计、跨平台设计、响应式设计等。
根据设计需求，合理运用图片大小、位置和层次等排版技巧。
03
02
01
15
2024/示优秀UI界面中图标、图片和文字的综合运用案例。
案例分析
学员动手实践，运用所学知识设计UI界面，并互相点评交流。
设计实践
邀请资深设计师分享UI界面设计经验及技巧。
经验分享
17
2024/1/29

移动UI界面设计 02 移动UI图标设计规范


焦点区域尺寸
24x24dp 18x18px 24x24px 36x36px 48x48px 72x72px
20/31
Android系统图标设计规范
Android系统小图标及规范
21/31
Android系统图标设计规范
Android系统小图标及规范
设计尺寸 焦点区域尺寸 12x12dp 9*9px 12*12px 18*18px 24*24px 36*36px
高分辨率的iPhone4主屏幕 主屏幕，为了兼容iPad Spotling和设置App Spotling,为了兼容iPad 高分辨率的iPhone4的Spotling和设置App 在App Store商场显示
512*512 57*57
114*114 72*72 29*29 50*50 58*58 1024*1024
18/31
Android系统图标设计规范
Android系统图标栏图标及规范
19/31
Android系统图标设计规范
Android系统图标栏图标及规范
设计尺寸
Android系统手机操作栏图标 ldpi mdpi hdpi xhdpi xxhdpi 32x32dp 24x24px 32x32px 48x48px 64x64px 96x96px
课堂练习
24/31
目录
iOS系统图标设计规范 Android系统图标设计规范 双系统下启动图标的设计

使用形状工具、钢笔工具通过波尔运算绘制高山白日
形状
演示案例

使用图层样式设置内阴影以增加浅色高光效果
23/31
课堂练习：Android系统启动图标设计
需求描述

移动UI交互设计与动效制作 第2章 UI元素交互设计


UI交互元素——文字
UI中的字体应用
在移动UI的设计中，通常都会使用智能手机操作 系统默认的字体进行设计，尤其是界面中的中文字体 很少去改动。但是一些产品为了营造特殊的产品格调 会在App中嵌入字体，由于数字字体包占用内存较小， 所以嵌入数字字体的情况比较常见。
UI交互元素——文字
UI中的字体应用
UI交互元素——文字
体现文字层次感
界面设计需要让用户一眼看到界面所需要传递的 重点，如果当前界面中的文字层级过多，通过字号大 小以及加粗处理都无法很好的处理文字信息层级时， 再考虑色彩明度的调整，因为过多的明度变化会让界 面显得不够干净，而倾斜字体在界面设计中很少使用， 除非一些特殊的标题通过字体的倾斜增加趣味感。
在新闻类App界面中，默认 的新闻标题文字都采用深灰色的 文字颜色，而点击访问过后的新 闻标题文字显示为浅灰色，通过 文字的颜色反馈，用户很容易区 分哪些内容已经看过，哪些内容 没有看。
UI交互元素——文字
关于文字交互
移动UI中文字的交互反馈可以是字体大小、颜色 发生改变，也可能是一些动态效果。
说到界面文字颜色的变化，这里分享3个关于界面 文字颜色的小规范。
UI交互元素——图标
图标的表现形式及适用场景
3．线面结合图标 线面结合图标比纯线性或者面性图标更多了一些 设计细节，视觉层级也比较高，通常用于界面中的功 能入口、标签栏等。需要注意的是，线面结合图标比 较突出年轻、文艺，所以属性比较稳重的产品不太适 合。
UI交互元素——图标
实战——设计相机应用图标 本节将带领读者完成一个相机应用图标的绘制， 该相机应用图标主要采用简约的扁平化设计风格进行 表现，在绘制过程中主要是使用Photoshop中的各种 形状工具来绘制组成相机图标的各部分关键图形，整 个相机应用图标的视频表现效果简洁、大方，易于识 别。

photoshop cc 移动ui设计教学课件汇总完整版电子教案

WUI（左）GUI（右）
1.1.2 移动UI设计的概念
移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的交 互操作逻辑、用户情感化体验、界面元素美观的整体设计。移动UI设计 因其设备的独特性，较其他类型的UI设计具有更严格的尺寸要求及手机 系统限制。
从设计范畴来看，移动UI设计主要体现在移动应用界面设计、移动 端网页界面设计、微信小程序设计及H5设计等。
App界面展示
1.1.1 UI设计的相关概念
2.UI与WUI和GUI 在设计领域，UI现在被广泛分为WUI和GUI。WUI全称Web User Interface，即网页界面。在企业中，WUI设计师主要从事PC端网页设计 的工作。GUI全称Graphical User Interface，即图形用户界面。因为移 动端包含大量图形用户界面，因此在企业中，GUI设计师主要从事移动 端App的设计工作。
丰富的交互方式
1.1.3 移动UI设计的特点
3.设计适配 由于现在市场中智能手机、平板电脑型号的碎片化及多样化， 设计师在进行设计时，应充分考虑到文字、图标、图像甚至是界面 布局等适配的问题。拿移动应用来说，设计师通常会选用一款常用 的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸 屏幕的界面进行重新布局，设计师只需针对不同屏幕尺寸进行切图 输出，然后再交由技术端进行适配。
Photoshop工作区界面截图
1.1.5 移动UI设计的常用软件
·Sketch Sketch是基于苹果电脑系统的一款收费型专业制作UI的工具。 相较PS，它是一款可以迅速上手的轻量级矢量设计工具，不仅对UI 设计师，就连产品经理和前端开发都能够迅速掌握，减少了沟通合 作的问题。
Sketch工作区界面截图
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

iOS设计标准尺寸
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS手机端界面结构图
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS手机端界面结构图
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS iPad界面结构图
Android系统中不同设备应用图标的尺寸
2.2.4 Android图标规范
2.系统图标 •系统图标的概念：系统图标即界面中的功能图标，通过简洁现代 的图形表达一些常见功能。MaterialDesign提供了一套完整的系统图 标，同时设计师也可以根据产品的调性进行自定义设计。
MaterialDesign官网提供的完整系统图标
•独立密度像素与独立缩放像素： 独立密度像素,英文全称“Density-independent pixels”，简称 “ dp” ， 是 安 卓 设 备 上 的 基 本 单 位 ， 等 同 于 苹 果 设 备 上 的 pt 。 Android开发工程师使用的单位是dp,所以UI设计师进行标注时应将px 转化成dp,公式为dp*ppi/160 = px。当设备的DPI值是320，通过公 式可得出1dp=2px，如图2-23（类似iPhone6/7/8的高清屏）。
•单元格：Android的最小点击区域是48dp，因此能被整除的偶 数4和8作为Android最小单元格比较合适。
所有组件都与移动设备的8dp网格对齐
移动设备的8dp网格
2.2.3 Android基本布局
图标与4dp网格对齐
•列：列的数量在手机设备上推荐4列，-平板电脑上推荐8列。
iOS官方模版
2.1.4 iOS图标规范
•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、 App Store、Spotlight以及设置场景中，尺寸也应根据不同设备的分 辨率进行适配。
iOS系统中不同设备应用图标的尺寸
2.1.4 iOS图标规范
2.系统图标 •系统图标的概念：系统图标即界面中的功能图标，系统图标主要 应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标， UI设计师可以设计自定义图标。
Android常见的设备尺寸(上) Android设计标准尺寸（下）
2.2.2 Android界面结构
iOS界面主要由状态栏、导航栏、顶部应用栏组成。
Android界面结构
2.2.3 Android基本布局
在iOS中已经剖析了网格系统及其组成元素，因此在Android布 局中不再赘述，直接进行Android中网格的布局。
2.2.4 Android图标规范
•系统图标的设计：创建系统图标时，以320dpi分辨率中的24dp 尺寸为基准。图标应该留出一定的边距，保证不同面积的图标有协调 一致的视觉效果。
系统图标的设计
2.2.4 Android图标规范
边距的宽度
2.2.4 Android图标规范
在Android中，图标规范可以根据Material Design设计语言，从 应用图标和系统图标两个方面进行详尽的剖析。
1.应用图标 •应用图标的概念：应用图标即产品图标，是品牌和产品的视觉表 达，主要出现在主屏幕上。
Android系统中各类应用图标
2.2.4 Android图标规范
第2章 移动UI设计规范
本章介绍：
设计规范在移动UI设计的工作中有着 保证视觉统一性、提升项目工作效率、提升 设计细节等诸多好处。本章对iOS系统以及 Android系统的基础设计规范进行讲解。通 过本章的学习，读者可以对移动UI设计的基 础规范有一个基本的认识，有助于高效便利 地进行移动UI设计工作。
标签栏图标尺寸
2.1.4 iOS图标规范
•系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、 工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配。
iOS系统中不同设备系统图标的尺寸
2.1.5 iOS文字规范
1.系统字体： iOS 英 文 使 用 的 是 San Francisco (SF) 字 体 ， 其 中 SF 字 体 有 SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。 中文使用的是苹方，共有6个字重。
dp与px的转换
2.2.1 Android设计尺寸及单位
独立缩放像素，英文全称“Scale-independent Pixel”，简称 “sp”，是Android设备上的字体单位。Android平台允许用户自定 义文字大小（小、正常、大、超大等等），当文字尺寸是“正常”状 态时，1sp=1dp，如图2-XX。而当文字尺寸是“大”或“超大”时， 1sp>1dp。UI设计师进行Android界面的设计时，标记字体的单位选 用sp。
PPI的计算公式（X、Y分别为横向、纵向的像素数）
2.1.1 iOS设计尺寸及单位
•Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1： 1像素密度（或@1x），其中一个像素等于一个点。高分辨率显示器 具有更高的像素密度，比例因子为2.0或3.0（称为@2x和@3x）。因 此，高分辨率显示器需要具有更多像素的图像。
列的数量，手机设备（左） 平板电脑（右）
2.2.3 Android基本布局
水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推 荐24dp。
手机设备、平板电脑水槽和边距的宽度
2.2.3 Android基本布局
边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。 当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考 iOS布局中边距的宽度。
•列：列的数量有4、6、8、10、12、24这几种情况。其中4列通 常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然 而24列将页面切割太碎，因此实际使用还是以12列和6列为主。
列的使用
2.1.3 iOS基本布局
•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px 为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为 常用。
澳大利亚Prospa产品设计负责人AndrewMcKay创作
2.1.4 iOS图标规范
•系统图标的设计：在导航栏和工具栏上的图标一般是 44px(22pt@2x),在标签栏上的图标一般是50px（25pt@2x）。苹果 官方提供了四种不同形状的标签栏图标尺寸供UI设计师参考。其意义 是让不同外形的图标在同一个标签栏时，保证视觉平衡。
2.1.3 iOS基本布局
1.网格系统 网格系统（Grid Systems），又称为栅格系统，是利用一系列垂 直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这 些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有 秩序。
网格系统
2.1.3 iOS基本布局
2.组成元素 网格系统由列、水槽以及边距3个元素组成。列是内容放置的区 域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕 左右边缘之间的距离。
一个10px×10px的标准分辨率（@1x）图像，该图像的@ 2x版本为 20px×20px，@ 3x版本为30px×30px
2.1.1 iOS设计尺寸及单位
•逻辑像素和物理像素： 逻辑像素，英文全称“Logic Point”，单位 “点”，即“pt”， 是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但 由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个 像素，因此iPhone 4的物理像素是960x640px。iOS开发工程师和使 用Sketch软件设计界面的UI设计师使用的单位都是pt。
• 应 用 图 标 的 设 计 ： 创 建 应 用 图 标 时 ， 应 以 320dpi 分 辨 率 中 的 48dp尺寸为基准。MaterialDesign提供了四种不同形状的应用图标 尺寸供UI设计师参考，以保持一致的视觉平衡。
不同形状的应用图标尺寸
2.2.4 Android图标规范
•应用图标的适配：应用图标的尺寸应根据不同设备的分辨率进行 适配。当应用图标应用于Google Play中，其尺寸是512x512px。
sp等同于dp
2.2.1 Android设计尺寸及单位
2.设计尺寸 Android常见的设备尺寸。在进行界面设计稿时，如果要一 想一稿适配iOS，那就使用Photoshop新建720x1280px尺寸的 画布。如果根据MaterialDesign新规范单独设计Android，那就使用 Photoshop 新 建 1080x1920px 尺 寸 的 画 布 。 无 论 哪 种 需 求 ， 使 用 Sketch只建立360x640dp即可。
学习目标
掌握iOS系统设计规范 掌握Android系统设计规范
2.1 iOS系统设计规范
iOS设计尺寸及单位 iOS界面结构 iOS基本布局 iOS图标规范 iOS文字规范
2.1 iOS系统设计规范
iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图 标规范及字体规范5个方面进行详尽的剖析。
iOS系统字体
2.1.5 iOS文字规范
2.字号大小： iOS设计时要注意字号的大小。一般为了区分标题和正文，字体 大小差异至少保持在4px(2pt@2x),正文的合适行间距在1.5～2倍之间。
iOS系统APP的字体建议
2.2 Android系统设计规范
Android系统基础规范可以通过设计尺寸、界面结构、基本 布局、字体规范及图标规范5个方面进行详尽的剖析。
逻辑像素与物理像素的转换
2.1.1 iOS设计尺寸及单位
2.设计尺寸 iOS常见的设备尺寸。在进行界面设计稿时，为了一稿适配，都 是以iPhone6/6s/7/8为基准。使用Photoshop就建750x1334px尺寸 的画布，如果是使用Sketch就建立375x667pt。