几何

辽宁35选7风采开奖公告:组件化和??榛惺裁辞??

几何 设计原则 921浏览

辽宁35选7开奖哪个台 www.duulp.com 相信很多人和我一样看过很多组件化和??榛杓频奈恼?,但依然没有搞清楚这两个的区别,在写这篇文章之前,我一直以为组件化和??榛且桓龈拍?,在阅文无数后,决定做个总结,加上案例讲解,来帮助理解这两者的概念。

本文概要:
  1. 什么是组件和???/section>
  2. 组件和??榈那?/section>
  3. 为什么要使用组件化和??榛?/section>
  4. 组件的创建和嵌套方法

组件化和??榛从谌砑?,现在越来越被更多地应用于UI设计当中。下面是我为了便于理解做了个示意图。

 

1.什么是组件和????

1.1 组件

把重复的代码提取出来合并成为一个个组件,组件最重要的就是重用(复用),位于框架最底层,其他功能都依赖于组件,可供不同功能使用,独立性强。

 

1.2 ???/strong>

分属同一功能/业务的代码进行隔离(分装)成独立的???,可以独立运行,以页面、功能或其他不同粒度划分程度不同的???,位于业务框架层,??榧渫ü涌诘饔?,目的是降低??榧涞鸟詈?,由之前的主应用与??轳詈?,变为主应用与接口耦合,接口与??轳詈?。

??榫拖裼卸喔鯱SB插口的充电宝,可以和多部手机充电,接口可以随意插拔。复用性很强,可以独立管理。

 

2.组件和??榈那?/span>??

2.1 组件

就像一个个小的单位,多个组件可以组合成组件库,方便调用和复用,组件间也可以嵌套,小组件组合成大组件。

 

2.2 ???/strong>

就像是独立的功能和项目(如淘宝:注册、登录、购物、直播…),可以调用组件来组成???,多个??榭梢宰楹铣梢滴窨蚣?。

 

3.为什么要使用组件化和??榛??

3.1 开发和调试效率高

随着功能越来越多,代码结构会越发复杂,要修改某一个小功能,可能要重新翻阅整个项目的代码,把所有相同的地方都修改一遍,重复劳动浪费时间和人力,效率低;使用组件化,每个相同的功能结构都调用同一个组件,只需要修改这个组件,即可全局修改。

 

3.2 可维护性强

便于后期代码查找和维护。

 

3.3 避免阻断

??榛强梢远懒⒃诵械?,如果一个??椴薭ug,不会影响其他??榈牡饔?。便于后期代码查找和维护。

 

3.4 版本管理更容易

如果由多人协作开发,可以避免代码覆盖和冲突。

组件化和??榛话闱榭鍪且黄鸪鱿值?,他们就像好兄弟,虽然可以分离但最好一起有个照应。

如图:“我的淘宝”页调用了会员???、物流???、充值??楹驮硕??,而且可以发现他们调用了同一个组件在“我的淘宝”来展示各自的 ???。

 

4.组件的创建和嵌套方法?

了解了程序逻辑,那么在我们设计中如何运用呢,我用sketch简单演示一下组件的创建和嵌套。(PS中的智能对象也能达到相应的目的)

4.1 组件的创建:

选中要创建的组件的元素,点击创建组件,在组件中就可以看到该组件,修改组件样式,会发现所有使用该组件的样式都发生了改变。

 

4.2 组件的嵌套:

选中要创建的组件的元素,点击创建组件,在组件中就可以看到该组件,修改组件样式,会发现所有使用该组件的样式都发生了改变。

 

下面来总结一下本文内容

组件

把重复的代码提取出来合并成为一个个组件,组件最重要的就是重用(复用)

 

???/strong>

分属同一功能/业务的代码进行隔离(分装)成独立的???,可以独立运行,独立管理,每个??橛泻芏嘟涌?,可供调用

 

组件化??榛诺?/strong>

开发调试效率高、可维护性强、避免阻断、版本管理更容易

 

原文地址:UI设计进阶(公众号)

作者:阿倩

转载请注明:辽宁35选7开奖哪个台 » 组件化和??榛惺裁辞??

登录收藏
 
你可能喜欢的:
测试产品可用性的关键技巧——启发式评估测试产品可用性的关键技巧——启发式评估
三招教你学会优化信息层级三招教你学会优化信息层级
十种让UI界面个性化的方法十种让UI界面个性化的方法
为什么它总是能让你的界面变得不精致为什么它总是能让你的界面变得不精致
设计译文 | 设计色彩对用户行为的影响设计译文 | 设计色彩对用户行为的影响
后台数据可视化界面设计的10条经验法则后台数据可视化界面设计的10条经验法则
「少就是多」原则的应用「少就是多」原则的应用
为什么要进行竞品分析以及关键准则为什么要进行竞品分析以及关键准则
从截屏这个小细节,读懂用户行为(上)从截屏这个小细节,读懂用户行为(上)
按钮设计,看这篇文章就够了按钮设计,看这篇文章就够了
?