最新消息:文章中包含代码时,请遵守代码高亮规范!

提高工作效率的组件化设计思路

原创文章 user 154浏览 0评论

上篇文章中,和大家介绍了在网页设计中的模块结构化的设计思路,可以快速的搭建起来一个页面,并且建立统一的风格设计规范,使其在子页的设计中也能保持风格一致性。

这次,为大家介绍一种提高工作效率的组件化设计思路;

在多次的项目经历中,会发现,部分界面模块在之前的项目中有可能设计过,比如订单模块,购物车模块,地址选择模块等等,而我当前的项目又正需要这些,那么你会怎么做呢?一开始,我采用的方法比较笨,在进行到可以重复利用组件的页面是,打开之前项目中的组件页面,复制粘贴,再根据当前的项目进行风格的调整,这种设计方式没有问题,但是这是一种浪费时间的重复操作,同时,如果你复制的模块同时来自几个不同的项目,在修改时,保持风格的一致性也不是个简单的事情。

所以,我们可以在页面进入具体的设计之前,就提前根据原型图中的页面结构,筛选出大量复用的组件,根据风格效果图,进行提前的复用组件的设计。

1.jpg

上图为一组文章,详细讲解了在APP设计中常见的一些组件的设计:点击查看

例如90%的app中都会存在的导航栏,我们利用组件化搭建的思路,即可以这样提前设计:

1555661095793021.jpg

因为运用了原子化的组件管理方式,所以基本上每一个前端展示的最终组件都会含有嵌套组件模块,所以我们在命名上也要遵循合理的规范:

1555661297604613.jpg

在实际应用中,即如下图展示:

1555661392925825.jpg

通过提前进行组件化的建立,可以在页面的大量搭建时,在组件重复的页面就可以重复利用,大大加快页面设计的速度。同时也可以提前和开发进行对接,建立单一项目的开发组件库样式,也可以在开发时大大缩减时间。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/25353.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情