UI设计系统拆解设计

这是一篇关于UI设计系统拆解设计的思维导图。

系统拆解设计

• 网页
  • 色彩
    • 色彩是设计 的三大构成之一
  • 排版
    • 排版是视觉组织内容的方式，是引导用户阅读信息的手段
  • 空间
    • 空间是内容与设计的空间，是页面呼吸感很重要的要素
  • 品牌
    • 品牌是网站页面的眼睛，品牌演绎成页面中的元素，成为组织内容的核心
• 图标
  • 造型线条
    • 造型和线条是图标的气质传递，不同的造型和线条影响整个图标的调性
  • 空间透视
    • 空间透视是一个图标体感很重点的点，平面和三维的图标感官是完全不一样的
  • 质感肌理
    • 质感肌理是图标的细节表现，图标风格有很多种，什么样产品用什么样图标风格
  • 精艳细节
    • 细节是60分到80分的点
• 界面
  • 信息布局
    • 信息布局是体现信息优先级，也是设计最优先考虑的
  • 色彩关系
    • 色彩是用户第一直觉反馈，不同色彩代表不同的情感
  • 控件造型
    • 控件和造型是图形的一部分，自定义的控件和系统控件成本是不一样的
  • 质感肌理
    • 质感肌理是产品精致与细节的表达
  • 交互关系
    • 交互形式？操作如何？上下连接？是否熟悉？
• LOGO
  • 图形寓意
    • LOGO的行业和特点、创意
  • 延展性
    • 放到实际环境中效果和识别度如何
  • 字体
    • 重要的元素
• 形色字构质
  • 形
    • icon
      • 风格
        • 线性
        • MBE
        • 面
        • 线面结合
        • 轻拟物
      • 一致性
        • 统一描边
        • 统一边角
        • 统一风格
  • 色
    • 克制用色
    • 文字可以带点色相的灰
    • 减少视觉干扰，便于用户认知
    • 突出品牌色
  • 字
    • 统一衬线/非衬线字体
    • 字体不超过2种
    • 标题和正文内容的视觉层级
  • 构
    • 留白/呼吸感
  • 质
    • 风格
      • 扁平风格
    • 弥散投影
    • 光效渐变等
    • 毛玻璃
    • 界面质感小技巧
      • 1.强化结构层次
        • 文字层级区分（大小、字重、颜色）
        • 图标轻重区分
          • 基于风格区分
          • 基于色彩区分
      • 2.无边有界的视觉美感
        • 用增减间距来区分模块
        • 用背景色区分相邻元素
      • 3.牢记设计原理
        • 格式塔原理
        • 奥卡姆剃刀
        • 希克定律
        • 菲茨定律
      • 4.打破常规 设计“破局”
      • 5.适当运用毛玻璃效果
        • 优缺点
          • 优点
            • 拉开信息层级
            • 提升通透感
            • 增强视觉效果
          • 缺点
            • 不宜大面积使用
            • 容易使画面显脏
            • 手机性能受限
      • 6.动效加成
        • 附属动作
          • 如：点赞、关注
        • “招牌”动作
          • 通过特定动作加深用户印象，形成专属符合
          • 使用场景
            • 下拉刷新
            • loading
      • 7.有趣的缺省页
        • 大胆的缺省页设计
  • 动
    • 专属动效
    • 趣味性
• UI设计标准
  • 1.标准的网格系统
    • PC
      • 12列较多
      • 6/3列(较少)
    • 移动
      • 一般采用6列
  • 2.合理的比例关系
    • 黄金比例
    • 比例关系
      • 16：9
      • 3：2
      • 4：3
      • 1：1
      • 3：4
      • 2：3
  • 3.文字的易读性
    • 对齐方式
    • 文字层级区分
      • 文字大小
      • 灰度对比
      • 字重对比
  • 4.色彩情感
    • 整体和谐型及色调
    • 可通过印象坐标
  • 5.图片使用
    • 与产品调性相符的图片
    • 通过图片来表达产品
  • 6.图标准则
    • 通过图标传递情感
      • 圆角大小
      • 描边粗细
      • 断口
      • 叠加色彩
    • 可识别性
    • 风格
    • 统一性
  • 7.按钮准则
    • 按钮使用场景和含义
      • 一般主行动按钮用品牌色
      • 辅助操作用白色填充
      • 警告类按钮用红色
      • 无效按钮用灰色
  • 8.视觉层次准则
    • 强化结构层次
      • 无边有界的视觉美感
        • 增加间距来区分模块
        • 用背景色区分相邻元素
    • 设计原理应用
      • 格式塔原理
      • 奥卡姆剃刀
      • 其他
        • 希克定律
        • 菲茨定律
    • 弥散投影及颜色
    • 打破常规 设计“破局”
    • 图标轻重区分
      • 基于风格区分
      • 基于色彩区分
  • 9.视觉对齐准则
    • 圆形图标比方形图标大一些
    • 粗细一起使用的字体，粗体可以少1~2PX
    • 中英文组合时，英文数字适当放大
  • 10.视觉引导