UI界面从上至下的组件可划分为：
不同的APP虽然有不同的行业属性，但均可拆分组件化。
UI组件星辰大海，要认真了解的组件各部分内容，并思考组件化思维在工作中的重要性。
组件化的作用：
（1）提高设计效率
（2）提高UI设计理解能力
（3）利于开发适配
思考组件的多状态形式，eg:购物车列表的不同样式
同组件不同状态下实现快速复用
三个层面： （1）文字 （2）间距 （3）配图
（1）文字
* 多行文本行间距 1.2倍（小字号）~1.5倍（大字号）
* 字体层次不小于4px ,配合使用颜色，粗细拉开层次
（2）间距
* 底部间距大于顶部间距，多个卡面拉开层次关系
* 采用等分/五分原则，减少沟通成本
形成统一数值复用的概念，数值的选用要有最小公倍数的意识
（3）配图
常规配图的比例有： 16:9 9:6 9:8 1:1
电商购物车列表图 eg: 162*162px
小结：
商品主图比例1:1
干净简洁，凸显细节，图片品质感高（不要盲目的选择一些高逼格，但无法上线，无意义的配图）
(好的配图：产品精修+设计细节)
UI 基础组件三大设计要素
（1）、文字层级： 字号 字重 颜色
（2）、间距留白： 5分原则 / 等分原则
（3）、配图要求： 干净简洁，凸显细节，图片品质高
给组件添加标签
作用提炼卖点——基础卡片——标签
形状构成上可梳理来的更加有细节点，eg: 斜标签（底板形状） + 文字后方局部高光（高斯模糊，微渐变） + 文字
功能标签（传统式造型）左右间距 > 上下间距（好的呼吸感）eg:左右8px 上下4px
内容标签（可做更精细化设计）注意字体变形时，字体重心是否在同一水平线上
小结：组件化思维——学会拆分，梳理不同场景
互不影响时组件化的一个明显的优势：
（1）体现在产品功能迭代过程中的增删改，优化迭代的仅仅只是一个组件
（2）彼此独立，但也可以组成一个更大的系统
