01-UI界面组件化进阶思维

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）彼此独立，但也可以组成一个更大的系统