设计沉思录|UI设计中的组件化设计与落地

设计沉思录|UI设计中的组件化设计与落地


Sketch作为当前使用率最高的UI设计工具之一,其魅力在于它的每一次更新,都可以解决目前设计过程中的某些痛点,而每次更新的这些功能总会得到设计师们的一致好评。随着产品和思维模式的不断更新,工作模式也会不断的更新,Sketch总是能根据环境的变化适时的加入一些新功能,以迎合不断变化的工作模式,其中Libraries功能的出现使得组件化工作模式有了一个质的提升。本篇文章是关于使用Libraries配合设计组件库的一些思考和心得,望能抛砖引玉。


 组件化设计 

组件化设计思维就是把产品需求场景化、视觉表达模块化,每个组件基于复用为目的,使其具备独立的完整解决方案,通过标准的规范组合方式来构建整个设计方案,从而提升设计效能。设计师可以更加专注在问题的解决上,而不是花了大把时间在基本组件的设计上。同时开发也可以直接利用已经做好的组件进行开发,开发效率直线提高。高复用和一致性最终产生的结果就是设计和开发效率的提升。

那个著名的宜家厨房宣传片很好的诠释了组件化设计思维概念。

 

 IKEA立体主义与五种厨柜的自由组合


 如何落地 

了解前端HTML的同学一定知道CSS样式(层叠样式表),CSS使开发人员能够分离内容和可视元素,以实现更好的页面控制和灵活性 ;CSS文件通常通过HTML文件中的链接附加到HTML文件。具体到我们的UI设计工作中可以把Sketch的Library理解为一个CSS样式,把它链接到您的Sketch软件里。


 制作Library 

Library本质上是一个普通的Sketch文件,其中的Symbols可以被其他Sketch文件调用. 如果你编辑了Library当中的Symbols,那么调用了该Library的其他Sketch文件便会收到更新通知,你可以对变更进行预览、对比和确认,使这些Sketch文件所调用的Symbols自动更新至最新版本. 制作Library的过程中最重要的是要做好元素的Resizing属性,其目的是为了快速适配Android 端,制作Library时注意命名一定要方便后期维护,多用Symbols嵌套。

 使用Library 

1. 打开Sketch,快捷键【command+,】,打开【偏好设置】,选择【Libraries功能】;


设计沉思录|UI设计中的组件化设计与落地


2. 点击左下角添加按钮,如选择【美事1.0组件库】.


设计沉思录|UI设计中的组件化设计与落地


3. 添加组件完成后,就可以调用你的组件元素了.


设计沉思录|UI设计中的组件化设计与落地


4. 当组件库有内容更新时,右上方会出现提示.

 

设计沉思录|UI设计中的组件化设计与落地


5. 可以点击提示,查看更新的内容,对比更新前后的设计样式,选择是否更新.


设计沉思录|UI设计中的组件化设计与落地

 

 Library云协作 

Sketch插件“Craft”是最早推出了Libraries功能的,但是使用起来对国内设计师不是很友好。需要自备梯子,Sketch自身提供的Libraries就完美的解决了这个问题。而且只需要简单的云存储空间,并确保其他同事拥有访问权限。我个人使用的坚果云的同步文件夹。当然你也可以使用iCloud云盘等工具与团队成员共享Library文件。

 

 后记 

从设计到开发的工作流程中会涉及到不同的设计师及不同的开发工程师。如果你想把组件化思维贯穿到你的工作流程中,那么不妨试着使用Libraries功能。相信这个功能将越发有效的帮助我们构建和维护设计体系。


设计沉思录|UI设计中的组件化设计与落地

设计沉思录|UI设计中的组件化设计与落地

本篇文章来源于微信公众号:58UXD

UI/UX

Figma 实践:以为是个青铜结果是个王者

2019-6-14 18:43:25

UI/UX

给参加设计大赛的学生们的10个小建议

2019-6-19 19:17:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索