恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
关于我使用规范和组件库提高效率这件事
7.1°
2024-03-29 原创文章 经验/观点 举报 1477 2 2 0

分享近期在做的几个项目的设计规范与组件库搭建; 

通过一些项目接触了游戏UI的设计过程; 对迭代了一两年的项目做组件库整合; 几个连夜赶工的新项目的处理; 

同样是做组件库,不同的时间采取不同的方案,会有不一样的效果。 整合了几个特例分享给大家

(文章中的图片均为二次加工的简略图,仅用于解释说明,非实际效果图)

搭建一个组件库,前期要花费的时间会比纯完成界面要更多。但后期迭代能适用于非常多通用小需求,能明显地提升设计效率,且有了规范的约束能更好的维持统一性。


例子一

一个需要在3天内完成设计,需要快速开发完的demo; 对质量要求不高,因而可采用现有组件库筛选套用;

最主要定义的是色彩,结构,文字,图形等规范的统一;作为最基础的原子,也是一套设计差异化的最直观因素之一; 规范是一种限制,同时也是一种统一;

根据实际界面,选取适用组件。由于该项目题量不大,因而所涉及到的范围较小,无需用到的组件并不需要处理或待到后续迭代根据需要添加。

(此处仅筛选部分设计规范与组件库做说明用,非全部内容)

小的分子确定后,再根据项目需要,组合成对应的组织 这时可以用到figma的组件组功能;在组件中套用组件,后续调整均可以在设计稿上直接调用。

到这里,该项目的设计组件库基本已经完成了。 此时把内容做出来但它还只是个工具,该如何让其他人认同这个产出,让它发挥出最大的作用呢? 要分享,要推荐身边的人一起使用,让大家亲身体验到组件库带来的效率


一个已经迭代了较长时间的游戏UI项目,由于前设计稿是用ps做的,切图标注的效率特慢,且多人协作不便;目前已知使用xd做界面设计稿,可直接导入到unity中,大量减少工作量。于是有了设计稿搬迁升级的规划。

颜色,文字,图形,风格等已经成型且整理成设计规范;因而本次会把重点都放在组件库的方面。 设计规范照搬输入进软件的组件库里即可。

此处仅筛选部分设计规范与组件库做说明用,非全部内容

初次搭建完成后整理归档,放置于一个xd文件中,且通过adobe的账号分享功能,在adobe云库中共享该组件库给其他成员; 制定每隔一段时间,更新一次组件库

设计稿从ps转到xd后,能有效减轻设计师重复的工作量,能腾出更多的时间处理其他事务。

adobe XD的一些操作,与游戏的平常习惯更贴切,软件过度上会更方便

Powered by Froala Editor

更新:2024-03-29

收藏

2人已收藏

贾尉wake

vv:JW1305178005

  • 14

    作品

  • 18

    粉丝

  • 9

    关注

  • 那些在界面中发光发热的插画(三)
  • 近期的插画项目合集
  • 那些在界面中发光发热的插画(二)
  • 久违了!广东。小Z的旅程

    猜你喜欢

      2024-03-29 原创文章 经验/观点 举报 1477 2 2 0

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

      7.1°

      你确定要举报关于我使用规范和组件库提高效率这件事

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2024年03月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录