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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
后台产品设计体系的创建过程回顾三:工具与资源分享(附源文件)
0.0°
2019-12-02 原创文章 经验/观点 举报 808 2 2 0


作者:ZYUN(20190401)
预计阅读时长:09m 18s(6707 字;7 图;11 视频)


摘要:简单地分享我在创建设计系统过程中所用的部分设计工具、技巧,以及设计系统相关的资源。






Sketch 相关插件和使用技巧


此设计系统是在 2018 年年底至 2019 年初期间创建完成的,当时所用的 Sketch 版本还比较旧。到现在为止,Sketch 已经更新了好几个版本,功能和插件都逐渐升级完善了。所以,我当时所用的方法可能已经不再适用了。(小小声说一句,让我们一起拥抱 Figma 吧哈哈!)


因此,下面仅对我使用的工具、小技巧等作简单介绍,不详细展开。



Anima ToolKit

Anima 可用于创建响应式的编组或画板。具体使用方法可在官网 Anima ToolKit 查看。

我在设计组件库的过程中,使用这个插件来创建所有需要支持响应式布局的组件。其中,大致有以下 3 种思路。


1)以 Message 为例。此组件要实现的效果是,Message 的宽度随着其中的文本标签的增长而自动增大,左右间距保持不变,图标尺寸及其距左边缘的间距保持不变。这里用到了 STACK 功能,具体操作如以下视频所示。




2)以按钮为例。此组件要实现的效果是,调用、覆写组件后,更改组件宽度,文本标签可进行自动缩放,并保持左右间距不变。这里用到了 PINS 功能,具体操作如以下视频所示。



以上两种方法的区别是:
Message 一般都是在整个页面中水平居中,所以我们可以为 symbol 设置一个最大宽度,Message 编组在其中居中并自动改变宽度。只要 symbol 在整个页面中居中,则 Message 是居中的。
按钮一般需要放置在页面中,与其他元素对齐或保持一定的间距,所以 symbol 容器的宽度必须与按钮编组的宽度一致,否则就量取不到按钮与其他元素的间距。


3)以 Table Toolbar 为例。此组件要实现的效果是,当我们删除某个按钮,其他按钮和元素会按原来的间距自动重新排列。这里用到了 stack 组的嵌套,具体操作如以下视频所示。




当然,还有其他很多的方法和插件可以完成相同或类似的功能,例如,Sketch 自带的编组缩放功能(Group Resizing)、插件 Relabel Button 等等。



Rename It

Rename It 可按不同的规则对图层、编组、画板等进行批量重命名,例如,加前缀、加后缀、加编号等等,具体使用方法可在官网 Rename It 查看。
这个工具在组件库的清查、整理过程中非常有用,我们可根据需要对 symbol 进行批量命名。




另外,复制模板页面进行数据填充后,或,需要对多个画板进行统一命名处理时,也可以使用这个插件。





Symbol Instance Renamer

Symbol Instance Renamer 可以让同一 symbol 的所有 instance 和它的 master 保持一致的命名,具体使用方法可参考 symbol-instance-renamer




我在 Sketch 中使用这个插件最多的场景是,调用 symbol 后,我经常会对它们进行替换(例如,保持大小位置不变替换成其他类型的 symbol 或同个类型其他状态的 symbol),替换之后,此 instance 还是会保持替换之前的命名,此时,就需要使用这个插件来更新其命名。
但通常,只在所有设计都完成,最后保存文件时进行一次操作即可。





Library 的共享

Sketch Library 的共享方法我在 Sketch Library 文件中已有详细说明。






利用 symbol 设置文档内跳转

这个技巧是在网络上一篇文章中学到的,必须感谢原作者哈哈,可惜找不到原文链接了。我将这个技巧用于文档中的更新日志页面,以便于快速跳转、定位至需求相应的画板。






图标交付

在创建设计系统之前,我通常使用 iconfont 的形式将图标交付给前端开发工程师,在这里顺便简单地分享一下~


Iconfont 其实就是把图标变成矢量字体,开发人员可根据需要灵活地更改字体图标的尺寸、颜色、方向等属性。众所周知,Font Awesome 是一套完全开源的免费字体图标库,我们可以直接将其中的图标应用到我们的项目中。如果是我们自己设计的图标,则可以通过以下方法将其转成字体图标。


阿里的 Iconfont 平台

我们可以在阿里的 Iconfont 平台上创建项目,在项目成员中添加相关开发人员,然后将 svg 图标上传至项目中,开发人员即可将相应的图标代码应用在页面中。具体使用方法可在帮助中心 Iconfont-阿里巴巴矢量图标库 中查看。
这种方法适用于长期、持续更新的项目。





IcoMoon

我们也可以将 svg 图标上传至 IcoMoon 平台,选择 Generate Font,然后将生成的文件交付给开发人员。这个方法非常便捷,但比较适合于短期、临时项目,因为我们上传的图标仅保存在我们个人的电脑浏览器中,一旦浏览器缓存被清除,所有内容都将被清空。






文档编写


Gitbook

我一开始打算在 GitBook 上编写我们设计系统的记录文档,因为 Gitbook 文档的菜单导航非常清晰,并且支持直接搜索内容关键词(只能定位到一级标题)。但由于 Gitbook 团队版需要付费使用,考虑到我们无法在 Gitbook 上进行团队协作,最后还是放弃了 Gitbook 哈哈哈。





语雀

语雀在团队协作方面则非常出色。我们可在语雀上创建设计系统的知识库,并将其分享给相关同事,或者邀请他们进行知识库协作,共同编写、维护设计系统内容。另外,还有团队、团队讨论区等功能。以下图片是我在语雀上的记录文档。





资源推荐


站点

Design Systems Repo 由 Jad Limcaco 创建,其中包含了设计系统相关的案例、文章、工具、演讲等内容,资源非常多非常全面。(超级棒!)


Design Systems 是 Figma 官方创建的网站,发布了很多设计系统相关的文章,包含设计、开发方法等等。


DesignSystem.cc 是我们国内的产品设计师 Jun 设计开发的网站,收集了设计系统相关的教程、文章、书籍和案例等内容。



工具

zeroheight 可用于记录设计系统,包括创建在线 styleguide、管理组件代码、存放设计资源等等,而且可被设计师和开发者编辑和扩展。具体操作如以下视频所示。





书籍、文章

Brad Frost:《Atomic Design》,由 Brad Frost 提出的原子化设计理念,已经成为构建设计系统的核心指导理论。


Alla Kholmatova:《Design Systems》,作者 Alla Kholmatova 向我们介绍了设计体系的基础构成和创建方法等等。


C7210:设计体系相关文章是 UX 设计师 C7210 发布的一系列文章,包含设计体系、Sketch Library 功能等方面的内容。


其他更多资源可在《设计导航:设计体系 / 设计规范 / 组件库》中查看。




源文件下载

除了 Sketch UI 组件库、后台产品设计 Sketch 模板、交互自查表,文件夹中还包含了一份文案基础规范和一份 UI 元素状态的使用表,前者整理自 Ant Design,后者翻译、整理自 SAP Fiori Design






写在最后

非常感谢以上提及的所有内容、资源的原作者和团队~感谢互联网儿~感谢 Google 搜索~
特别感谢 C7210 老师制作的 WireframeKit 组件库 和分享的一系列文章,我是在购买了这份组件库之后才开始了解、学习到使用 Sketch 创建组件库的方法的。(当时就是一种醍醐灌顶的感觉哈哈!比起可以直接拿来用的组件库,更开心的是能学到一种设计思路和方法。)
特别感谢 Ant DesignANTD 团队ElementElementEF,刚开始设计后台产品时,我对控件、布局等等规范都还不太熟悉,甚至犯了一些很基础的错误,后来通过边参考这些设计体系的内容边实践,才慢慢进步起来。(Respect!)




小彩蛋

寻思着,都整到这份儿上了,顺手给这个不正经的设计系统起个名字儿吧,于是,就叫它 Singularity Design System,未经任何专业严肃认证的名字儿,一听就不是什么正经设计系统哈哈。
Singularity 就是奇点嘛,物理学里头那个奇点,宇宙大爆炸那个奇点,同时也是 “起点”(谐音梗要扣钱的啊喂),所以,起这个名字儿的理由是……我~喜~欢~
最后,感谢我的同事儿 傑少_JiKi 给我整了一个像模像样的 logo 哈哈~










Powered by Froala Editor

更新:2019-12-02

下载
收藏

2人已收藏

  • 1

    作品

  • 1

    粉丝

  • 7

    关注

相关标签

    猜你喜欢

      2019-12-02 原创文章 经验/观点 举报 808 2 2 0

      后台产品设计体系的创建过程回顾三:工具与资源分享(附源文件)

      0.0°

      你确定要举报后台产品设计体系的创建过程回顾三:工具与资源分享(附源文件)

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年11月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      2
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录