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

推荐阅读更多精彩内容