新印象——解构UI界面设计课件.pptx

《新印象——解构UI界面设计课件.pptx》由会员分享，可在线阅读，更多相关《新印象——解构UI界面设计课件.pptx（78页珍藏版）》请在三一办公上搜索。

1、新印象解构UI界面设计,演讲人,2025-11-11,新印象解构UI界面设计演讲人2025-11-11,推荐,01,推荐01,推荐,推荐,1 界面类型,02,1 界面类型02,1 界面类型,1.1 闪屏页,A,1.2 引导页,B,1.3 浮层引导页,C,1.4 空白页,D,1.5 首页,E,1.6 个人中心页,F,1 界面类型1.1 闪屏页A1.2 引导页B1.3 浮层引导,1 界面类型,01,1.7 列表页,02,1.8 播放页面,03,1.9 详情页,04,1.10 可输入页面,05,1.11 实战：两步打造炫酷界面,1 界面类型011.7 列表页021.8 播放页面031.9,1 界面类

2、型,1.1 闪屏页,1.1.1 品牌宣传型,1.1.2 节假关怀型,1.1.3 活动推广型,1 界面类型1.1 闪屏页1.1.1 品牌宣传型1.1.2,1.2 引导页,1 界面类型,1.2.2 情感带入型（中级型）,1.2.1 功能介绍型（基础型）,1.2.3 搞笑型（高级型）,1.2 引导页1 界面类型1.2.2 情感带入型（中级型）1,1 界面类型,1.4 空白页,1.4.1 首次进入型,1,1.4.2 错误提示型,2,1 界面类型1.4 空白页1.4.1 首次进入型11.4.2,1 界面类型,1.5 首页,1.5.1 列表型,01,1.5.2 图标型,02,1.5.3 卡片型,03,1.

3、5.4 综合型,04,1 界面类型1.5 首页1.5.1 列表型011.5.2 图,M.94275.CN,1 界面类型,1.7 列表页,1.7.1 单行列表,1.7.2 双行列表,1.7.4 图库列表,1.7.3 时间轴,LOGOM.94275.CN1 界面类型1.7 列表页1.7,1 界面类型,1.11 实战：两步打造炫酷界面,A,1.11.1 绘制基础图形,1.11.2 添加颜色与细节,B,1 界面类型1.11 实战：两步打造炫酷界面A1.11.1,2 界面构图,03,2 界面构图03,2 界面构图,2.2 圆心放射构图,2.4 S形构图,2.6 实战：用多种构图方式制作运动App,2.1

4、 九宫格构图,2.3 三角形构图,2.5 F形构图,2 界面构图2.2 圆心放射构图2.4 S形构图2.6 实战,2 界面构图,2.1 九宫格构图,案例分析,2 界面构图2.1 九宫格构图案例分析,2 界面构图,2.2 圆心放射构图,案例分析,2 界面构图2.2 圆心放射构图案例分析,2 界面构图,2.3 三角形构图,案例分析,2 界面构图2.3 三角形构图案例分析,2 界面构图,2.4 S形构图,案例分析,2 界面构图2.4 S形构图案例分析,2 界面构图,2.5 F形构图,案例分析,2 界面构图2.5 F形构图案例分析,2 界面构图,2.6 实战：用多种构图方式制作运动App,2.6.2

5、用倒三角形构图设计地图页面,贰,2.6.1 用放射构图设计运动页面,壹,2.6.3 用三角形构图设计个人页面,叁,2 界面构图2.6 实战：用多种构图方式制作运动App2.6,3 版面布局,04,3 版面布局04,3 版面布局,3.1 界面版率,01,3.4 局部提取,04,3.2 抠图法,02,3.5 对齐原则,05,3.3 破界法,03,3.6 间距使用,06,3 版面布局3.1 界面版率013.4 局部提取043.2,3 版面布局,3.8 实战：设计智能空气净化器界面,3.7 视觉层次,3 版面布局3.8 实战：设计智能空气净化器界面3.7 视觉,3 版面布局,3.1 界面版率,3.1.

6、4 关键词图形化,3.1.5 放大文字,3.1.1 单色块填充,3.1.2 多色块组合,3.1.3 穿插填充,3 版面布局3.1 界面版率3.1.4 关键词图形化3.1.,3 版面布局,3.2 抠图法,案例分析,3 版面布局3.2 抠图法案例分析,3 版面布局,3.3 破界法,案例分析,3 版面布局3.3 破界法案例分析,3 版面布局,3.4 局部提取,案例分析,3 版面布局3.4 局部提取案例分析,3.5 对齐原则,3 版面布局,C,B,A,3.5.1 界面中常用的对齐方式,3.5.2 小米的登录页,3.5.3 苹果的登录页,3.5 对齐原则3 版面布局CBA3.5.1 界面中常用的对,3

7、版面布局,3.6 间距使用,案例分析,3 版面布局3.6 间距使用案例分析,3 版面布局,3.7 视觉层次,案例分析,3 版面布局3.7 视觉层次案例分析,3 版面布局,3.8 实战：设计智能空气净化器界面,3.8.2 设计“较差”页面,贰,3.8.1 对页面进行整体布局,壹,3.8.3 设计“良好”页面,叁,3 版面布局3.8 实战：设计智能空气净化器界面3.8.2,4 元素之道,05,4 元素之道05,4 元素之道,4.1 点线面,4.4 形象灵魂化,4.2 极简至上,4.5 运动赋予生命,4.6 菜单设定,4.3 品牌灵魂,4 元素之道4.1 点线面4.4 形象灵魂化4.2 极简至上,4

8、 元素之道,4.7 实战：快速制作晶格化界面,4 元素之道4.7 实战：快速制作晶格化界面,4 元素之道,4.1 点线面,案例分析,4 元素之道4.1 点线面案例分析,4 元素之道,4.2 极简至上,案例分析,4 元素之道4.2 极简至上案例分析,4 元素之道,4.3 品牌灵魂,案例分析,4 元素之道4.3 品牌灵魂案例分析,4 元素之道,4.4 形象灵魂化,案例分析,4 元素之道4.4 形象灵魂化案例分析,4 元素之道,4.5 运动赋予生命,案例分析,4 元素之道4.5 运动赋予生命案例分析,4 元素之道,4.6 菜单设定,案例分析,4 元素之道4.6 菜单设定案例分析,4 元素之道,4.7

9、 实战：快速制作晶格化界面,C,B,A,4.7.1 制作圆形头像,4.7.2 制作晶格背景,4.7.3 制作界面细节,4 元素之道4.7 实战：快速制作晶格化界面CBA4.7.1,5 色诱用户,06,5 色诱用户06,5 色诱用户,5.2 色不过三,5.4 如何配色,5.1 感知色彩,5.3 主色、辅助色及点睛色,5.5 实战：设计一款色彩统一的界面,5 色诱用户5.2 色不过三5.4 如何配色5.1 感知,5.1 感知色彩,5 色诱用户,5.1.1 红色,5.1.2 橙色,5.1.3 黄色,5.1.4 绿色,5.1.5 蓝色,5.1.6 粉色,5.1 感知色彩5 色诱用户5.1.1 红色5.

10、1.2,5 色诱用户,5.1 感知色彩,5.1.7 黑色,5 色诱用户5.1 感知色彩5.1.7 黑色,5 色诱用户,5.2 色不过三,案例分析,5 色诱用户5.2 色不过三案例分析,5 色诱用户,5.3 主色、辅助色及点睛色,01,5.3.1 主色,5.3.2 辅助色,02,5.3.3 点睛色,03,5 色诱用户5.3 主色、辅助色及点睛色015.3.1,5 色诱用户,5.4 如何配色,5.4.1 互补色搭配,1,5.4.2 冷暖对比搭配,2,5 色诱用户5.4 如何配色5.4.1 互补色搭配15.,5 色诱用户,5.5 实战：设计一款色彩统一的界面,C,B,A,5.5.1 设计页面图标,5

11、.5.2 设计个人中心页,5.5.3 设计聊天页面,5 色诱用户5.5 实战：设计一款色彩统一的界面CBA5,6 设计原则及规范,07,6 设计原则及规范07,6 设计原则及规范,6.2 iOS界面尺寸及控件设计规范,6.4 常用字体规范,6.6 实战：打造毛笔字风格的登录页,6.1 iOS的五大设计原则,6.3 Android设计原则及规范,6.5 建立一套设计规范,6 设计原则及规范6.2 iOS界面尺寸及控件设计规范6.4,6.1 iOS的五大设计原则,6 设计原则及规范,D,6.1.4 层级性原则,E,6.1.5 易操作性原则,A,6.1.1 凸显内容原则,B,6.1.2 统一化原则,

12、C,6.1.3 适应化原则,6.1 iOS的五大设计原则6 设计原则及规范D6.1.4,6 设计原则及规范,6.2 iOS界面尺寸及控件设计规范,6.2.1 界面尺寸,1,6.2.2 控件规范,2,6 设计原则及规范6.2 iOS界面尺寸及控件设计规范6.2,6 设计原则及规范,6.3 Android设计原则及规范,C,B,A,6.3.1 Android的设计原则,6.3.2 Android的控件设计规范,6.3.3 Android的设计尺寸及单位,6 设计原则及规范6.3 Android设计原则及规范CBA,6.4 常用字体规范,6 设计原则及规范,6.4.1 成也字，败也字,6.4.2 字

13、不过三,案例分析,案例分析,6.4.4 字体与气氛要匹配,6.4.3 字与背景要分明,6.4 常用字体规范6 设计原则及规范6.4.1 成也字，败,6 设计原则及规范,6.4 常用字体规范,C,B,A,6.4.5 常用字体类型,6.4.6 界面字体规范,6.4.7 字体常用颜色,6 设计原则及规范6.4 常用字体规范CBA6.4.5 常用,6 设计原则及规范,6.5 建立一套设计规范,6.5.1 色彩控件规范,6.5.2 按钮控件规范,6.5.3 分割线规范,6.5.4 头像规范,6.5.5 提示框规范,6.5.6 文字规范,6 设计原则及规范6.5 建立一套设计规范6.5.1 色彩控,6 设

14、计原则及规范,6.5 建立一套设计规范,6.5.7 间距规范,1,6.5.8 图标规范,2,6 设计原则及规范6.5 建立一套设计规范6.5.7 间距规,6 设计原则及规范,6.6 实战：打造毛笔字风格的登录页,A,6.6.1 制作基础字体,6.6.2 用笔刷设计细节,B,6 设计原则及规范6.6 实战：打造毛笔字风格的登录页A6.,7 切图与标注,08,7 切图与标注08,7 切图与标注,7.1 高效切图,7.2 界面标注,7.3 实战：为一款首页界面切图,7 切图与标注7.1 高效切图7.2 界面标注7.3 实战：,7.1 高效切图,7 切图与标注,A,D,B,C,7.1.2 Androi

15、d的常用单位,7.1.3 通用切图法,7.1.4 Android“点九”切图法,7.1.1 iPhone屏幕与Android手机屏幕的关系,7.1 高效切图7 切图与标注ADBC7.1.2 Andro,7 切图与标注,7.2 界面标注,7.2.1 标注软件,1,7.2.2 标注规范,2,7 切图与标注7.2 界面标注7.2.1 标注软件17.2.,7 切图与标注,7.3 实战：为一款首页界面切图,C,B,A,7.3.1 切图分析,7.3.2 iOS切图,7.3.3 Android切图,7 切图与标注7.3 实战：为一款首页界面切图CBA7.3.,8 图标设计,09,8 图标设计09,8 图标设

16、计,8.2 图标类型,8.4 实战：制作立体图标,8.1 图标创意,8.3 实战：绘制功能图标,8.5 实战：快速制作线条流畅的Logo,8 图标设计8.2 图标类型8.4 实战：制作立体图标8.1,8.1 图标创意,8 图标设计,8.1.1 卡通形象化,A,8.1.2 关键词图形化,B,8.1.3 字体直观化,C,案例分析,D,8.1 图标创意8 图标设计8.1.1 卡通形象化A8.1.,8 图标设计,8.2 图标类型,01,03,8.2.1 像素图标,案例分析,8.2.2 拟物化图标,02,04,05,06,8.2.3 扁平化图标,案例分析,8.2.4 线性图标,8 图标设计8.2 图标类

17、型01038.2.1 像素图标案例,8.2 图标类型,8 图标设计,8.2.5 立体图标,02,案例分析,03,案例分析,01,8.2 图标类型8 图标设计8.2.5 立体图标02案例分析,8 图标设计,8.3 实战：绘制功能图标,A,8.3.1 功能图标设计规范,8.3.2 功能图标绘制过程,B,8 图标设计8.3 实战：绘制功能图标A8.3.1 功能图标,8 图标设计,8.4 实战：制作立体图标,8.4.1 制作透视网格,8.4.2 制作立体字,8.4.4 制作光晕,8.4.3 制作灯泡,8 图标设计8.4 实战：制作立体图标8.4.1 制作透视网,8 图标设计,8.5 实战：快速制作线条

18、流畅的Logo,8.5.2 生成Logo路径形状,贰,8.5.1 制作Logo形状的辅助线,壹,8.5.3 将辅助线设置为虚线,叁,8 图标设计8.5 实战：快速制作线条流畅的Logo8.5.,9 高端艺术二维码,10,9 高端艺术二维码10,9 高端艺术二维码,9.1 原理结构,9.2 动态二维码的表现,9.3 实战：制作宝马春节艺术二维码,9.4 实战：快速制作界面动态展示图,D,C,A,B,9 高端艺术二维码9.1 原理结构9.2 动态二维码的表现9,9 高端艺术二维码,9.2 动态二维码的表现,9.2.1 MICU二维码航行,01,9.2.2 MICU二维码音乐节,02,9.2.3 M

19、ICU二维码清凉夏日,03,9.2.4 MICU二维码UI疫苗站,04,9.2.5 MICU二维码设计乐园,05,案例分析,06,9 高端艺术二维码9.2 动态二维码的表现9.2.1 MIC,M.94275.CN,9 高端艺术二维码,9.3 实战：制作宝马春节艺术二维码,9.3.1 制作原码,01,9.3.3 制作动效,03,9.3.2 设计二维码,02,LOGOM.94275.CN9 高端艺术二维码9.3 实战：,9 高端艺术二维码,9.4 实战：快速制作界面动态展示图,9.4.1 导入GIF并转为智能对象,9.4.2 制作透视展示图,9 高端艺术二维码9.4 实战：快速制作界面动态展示图9.4,感谢聆听,2020,感谢聆听2020,