关于我使用规范与组件库提高效率这件事

用户头像
深圳/设计爱好者/2年前/1182浏览
关于我使用规范与组件库提高效率这件事
分享近期在做的几个项目的设计规范与组件库搭建; 通过一些项目接触了游戏UI的设计过程; 对迭代了一两年的项目做组件库整合; 几个连夜赶工的新项目的处理; 同样是做组件库,不同的时间采取不同的方案,会有不一样的效果。 整合了几个特例分享给大家(文章中的图片均为二次加工的简略图,仅用于解释说明,非实际效果图)
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4MDQ=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4MDg=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4MTI=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
搭建一个组件库,前期要花费的时间会比纯完成界面要更多。但后期迭代能适用于非常多通用小需求,能明显地提升设计效率,且有了规范的约束能更好的维持统一性。
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4MjA=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
一个需要在3天内完成设计,需要快速开发完的demo; 对质量要求不高,因而可采用现有组件库筛选套用
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4MjQ=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4Mjg=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4MzI=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
最主要定义的是色彩,结构,文字,图形等规范的统一;作为最基础的原子,也是一套设计差异化的最直观因素之一; 规范是一种限制,同时也是一种统一;
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4MzY=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
根据实际界面,选取适用组件。由于该项目题量不大,因而所涉及到的范围较小,无需用到的组件并不需要处理或待到后续迭代根据需要添加。
(此处仅筛选部分设计规范与组件库做说明用,非全部内容)
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4NDA=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4NDQ=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4NDg=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4NTI=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4NTY=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4NjA=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
小的分子确定后,再根据项目需要,组合成对应的组织 这时可以用到figma的组件组功能;在组件中套用组件,后续调整均可以在设计稿上直接调用。
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4NjQ=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4Njg=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
到这里,该项目的设计组件库基本已经完成了。 此时把内容做出来但它还只是个工具,该如何让其他人认同这个产出,让它发挥出最大的作用呢? 要分享,要推荐身边的人一起使用,让大家亲身体验到组件库带来的效率
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4NzI=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4NzY=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4ODA=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4ODQ=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
一个已经迭代了较长时间的游戏UI项目,由于前设计稿是用ps做的,切图标注的效率特慢,且多人协作不便;目前已知使用xd做界面设计稿,可直接导入到unity中,大量减少工作量。于是有了设计稿搬迁升级的规划。
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4ODg=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4OTI=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU4OTY=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
颜色,文字,图形,风格等已经成型且整理成设计规范;因而本次会把重点都放在组件库的方面。 设计规范照搬输入进软件的组件库里即可。
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5MDQ=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
(此处仅筛选部分设计规范与组件库做说明用,非全部内容)
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5MDg=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5MTI=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5MTY=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5MjA=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5MjQ=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
初次搭建完成后整理归档,放置于一个xd文件中,且通过adobe的账号分享功能,在adobe云库中共享该组件库给其他成员; 制定每隔一段时间,更新一次组件库
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5Mjg=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5MzI=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5MzY=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5NDA=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5NDQ=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
设计稿从ps转到xd后,能有效减轻设计师重复的工作量,能腾出更多的时间处理其他事务。
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5NDg=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
adobe XD的一些操作,与游戏的平常习惯更贴切,软件过度上会更方便
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5NTI=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
关于我使用规范与组件库提高效率这件事(图ZMTQ3MjU5NTY=) - 观点 - 站酷设计师贾尉wake原创素材 - 站酷ZCOOL
收藏
14
举报
|
32
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI界面 组件
【新年UI图标】活动icon
手表表盘UI系列
【新年UI图标】积分icon
【新年UI图标】旅行icon
【新年UI图标】相机icon
【新年UI图标】美食icon
高级表盘系列UI源文件
Security Camera UI kit
新拟态风格 UI设计组件库
钱包ui模板
新能源APP应用UIKit
智能家居中心 简约 UI设计组件库
盲盒APP UI设计
高级感金属拟物 UI设计组件库
【新年UI图标】银行卡icon
3D渐变流体抽象矢量UI背景图
【新年UI图标】体育icon
森系3D渐变流体抽象矢量UI背景图
UI通用设计素材1
UI应用平面图标
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】礼物/活动icon
你可能喜欢
相关收藏夹
大家都在看
登录注册