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

1、新印象解构UI界面设计演讲人2025-11-11推荐01推荐 1 界面类型021 界面类型1.1 闪屏页A1.2 引导页B1.3 浮层引导页C1.4 空白页D1.5 首页E1.6 个人中心页F1 界面类型011.7 列表页021.8 播放页面031.9 详情页041.10 可输入页面051.11 实战：两步打造炫酷界面1 界面类型1.1 闪屏页1.1.1 品牌宣传型1.1.2 节假关怀型1.1.3 活动推广型1.2 引导页1 界面类型1.2.2 情感带入型（中级型）1.2.1 功能介绍型（基础型）1.2.3 搞笑型（高级型）1 界面类型1.4 空白页1.4.1 首次进入型11.4.2 错误提示

2、型21 界面类型1.5 首页1.5.1 列表型011.5.2 图标型021.5.3 卡片型031.5.4 综合型04LOGOM.94275.CN1 界面类型1.7 列表页1.7.1 单行列表1.7.2 双行列表1.7.4 图库列表1.7.3 时间轴1 界面类型1.11 实战：两步打造炫酷界面A1.11.1 绘制基础图形1.11.2 添加颜色与细节B2 界面构图032 界面构图2.2 圆心放射构图2.4 S形构图2.6 实战：用多种构图方式制作运动App2.1 九宫格构图2.3 三角形构图2.5 F形构图2 界面构图2.1 九宫格构图案例分析2 界面构图2.2 圆心放射构图案例分析2 界面构图2

3、.3 三角形构图案例分析2 界面构图2.4 S形构图案例分析2 界面构图2.5 F形构图案例分析2 界面构图2.6 实战：用多种构图方式制作运动App2.6.2 用倒三角形构图设计地图页面贰2.6.1 用放射构图设计运动页面壹2.6.3 用三角形构图设计个人页面叁3 版面布局043 版面布局3.1 界面版率013.4 局部提取043.2 抠图法023.5 对齐原则053.3 破界法033.6 间距使用063 版面布局3.8 实战：设计智能空气净化器界面3.7 视觉层次3 版面布局3.1 界面版率3.1.4 关键词图形化3.1.5 放大文字3.1.1 单色块填充3.1.2 多色块组合3.1.3

4、穿插填充3 版面布局3.2 抠图法案例分析3 版面布局3.3 破界法案例分析3 版面布局3.4 局部提取案例分析3.5 对齐原则3 版面布局CBA3.5.1 界面中常用的对齐方式3.5.2 小米的登录页3.5.3 苹果的登录页3 版面布局3.6 间距使用案例分析3 版面布局3.7 视觉层次案例分析3 版面布局3.8 实战：设计智能空气净化器界面3.8.2 设计“较差”页面贰3.8.1 对页面进行整体布局壹3.8.3 设计“良好”页面叁4 元素之道054 元素之道4.1 点线面4.4 形象灵魂化4.2 极简至上4.5 运动赋予生命4.6 菜单设定4.3 品牌灵魂4 元素之道4.7 实战：快速制作

5、晶格化界面4 元素之道4.1 点线面案例分析4 元素之道4.2 极简至上案例分析4 元素之道4.3 品牌灵魂案例分析4 元素之道4.4 形象灵魂化案例分析4 元素之道4.5 运动赋予生命案例分析4 元素之道4.6 菜单设定案例分析4 元素之道4.7 实战：快速制作晶格化界面CBA4.7.1 制作圆形头像4.7.2 制作晶格背景4.7.3 制作界面细节5 色诱用户065 色诱用户5.2 色不过三5.4 如何配色5.1 感知色彩5.3 主色、辅助色及点睛色5.5 实战：设计一款色彩统一的界面5.1 感知色彩5 色诱用户5.1.1 红色5.1.2 橙色5.1.3 黄色5.1.4 绿色5.1.5 蓝色

6、5.1.6 粉色5 色诱用户5.1 感知色彩5.1.7 黑色5 色诱用户5.2 色不过三案例分析5 色诱用户5.3 主色、辅助色及点睛色015.3.1 主色5.3.2 辅助色025.3.3 点睛色035 色诱用户5.4 如何配色5.4.1 互补色搭配15.4.2 冷暖对比搭配25 色诱用户5.5 实战：设计一款色彩统一的界面CBA5.5.1 设计页面图标5.5.2 设计个人中心页5.5.3 设计聊天页面6 设计原则及规范076 设计原则及规范6.2 iOS界面尺寸及控件设计规范6.4 常用字体规范6.6 实战：打造毛笔字风格的登录页6.1 iOS的五大设计原则6.3 Android设计原则及规

7、范6.5 建立一套设计规范6.1 iOS的五大设计原则6 设计原则及规范D6.1.4 层级性原则E6.1.5 易操作性原则A6.1.1 凸显内容原则B6.1.2 统一化原则C6.1.3 适应化原则6 设计原则及规范6.2 iOS界面尺寸及控件设计规范6.2.1 界面尺寸16.2.2 控件规范26 设计原则及规范6.3 Android设计原则及规范CBA6.3.1 Android的设计原则6.3.2 Android的控件设计规范6.3.3 Android的设计尺寸及单位6.4 常用字体规范6 设计原则及规范6.4.1 成也字，败也字6.4.2 字不过三案例分析案例分析6.4.4 字体与气氛要匹配

8、6.4.3 字与背景要分明6 设计原则及规范6.4 常用字体规范CBA6.4.5 常用字体类型6.4.6 界面字体规范6.4.7 字体常用颜色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.7 间距规范16.5.8 图标规范26 设计原则及规范6.6 实战：打造毛笔字风格的登录页A6.6.1 制作基础字体6.6.2 用笔刷设计细节B7 切图与标注087 切图与标注7.1 高效切图7.2 界面标注7.3 实战：为一款首页界

9、面切图7.1 高效切图7 切图与标注ADBC7.1.2 Android的常用单位7.1.3 通用切图法7.1.4 Android“点九”切图法7.1.1 iPhone屏幕与Android手机屏幕的关系7 切图与标注7.2 界面标注7.2.1 标注软件17.2.2 标注规范27 切图与标注7.3 实战：为一款首页界面切图CBA7.3.1 切图分析7.3.2 iOS切图7.3.3 Android切图8 图标设计098 图标设计8.2 图标类型8.4 实战：制作立体图标8.1 图标创意8.3 实战：绘制功能图标8.5 实战：快速制作线条流畅的Logo8.1 图标创意8 图标设计8.1.1 卡通形象化

10、A8.1.2 关键词图形化B8.1.3 字体直观化C案例分析D8 图标设计8.2 图标类型01038.2.1 像素图标案例分析8.2.2 拟物化图标020405068.2.3 扁平化图标案例分析8.2.4 线性图标8.2 图标类型8 图标设计8.2.5 立体图标02案例分析03案例分析018 图标设计8.3 实战：绘制功能图标A8.3.1 功能图标设计规范8.3.2 功能图标绘制过程B8 图标设计8.4 实战：制作立体图标8.4.1 制作透视网格8.4.2 制作立体字8.4.4 制作光晕8.4.3 制作灯泡8 图标设计8.5 实战：快速制作线条流畅的Logo8.5.2 生成Logo路径形状贰8

11、.5.1 制作Logo形状的辅助线壹8.5.3 将辅助线设置为虚线叁9 高端艺术二维码109 高端艺术二维码9.1 原理结构9.2 动态二维码的表现9.3 实战：制作宝马春节艺术二维码9.4 实战：快速制作界面动态展示图DCAB9 高端艺术二维码9.2 动态二维码的表现9.2.1 MICU二维码航行019.2.2 MICU二维码音乐节029.2.3 MICU二维码清凉夏日039.2.4 MICU二维码UI疫苗站049.2.5 MICU二维码设计乐园05案例分析06LOGOM.94275.CN9 高端艺术二维码9.3 实战：制作宝马春节艺术二维码9.3.1 制作原码019.3.3 制作动效039.3.2 设计二维码029 高端艺术二维码9.4 实战：快速制作界面动态展示图9.4.1 导入GIF并转为智能对象9.4.2 制作透视展示图感谢聆听2020