LimbDesign

控件库的文件名是 LimbDesign_v1.0.sketch

Limb Design 是什么？

名字没怎么想好，先叫这个吧。出发点是一种 UI 设计的解决方案。在 Limb Design 中，UI 设计的本质是组合和搭配。

我把设计元素结构化，详见下图：

各种 元素 组成了控件，不同控件的组合搭配可以形成新的控件。控件的组合形成页面，页面组成功能，功能构成了我们见到的产品。

举个例子🌰

首先定义颜色、尺寸、形状，这些最基本的元素，然后通过配置不同的基础元素，实现全局控件的配置和统一。然后通过对不同 shapeStyle 的设置，对页面大型控件做配置，比如 tab bar、navigation bar、item 等等。

这玩意可以干嘛？

1. 可能不需要画 icon 了，内置 Material Design icon，和一些可以表达状态和情感的 emoji 表情。
2. 内置可扩展的 symbol ，乐高 + 变形金刚的玩法；
3. 全局换肤（颜色），并且提供了一个换肤的配色方案；
4. 自适应视图，symbol 支持放大缩小和各种拖拽；
5. 标准的元件尺寸，规范。

长啥样？

多变的风格和组合，我试着搭配了一些控件出来，脑洞有多大，样式就有多全。

咋用？

注：GIF 图片有点大，要多等一会。

自定义按钮

怎么做一个控件

更新日志

• 2017-09-12 更新：

  • 更名为 v1.0 ，自己实际使用了 2 个月，工作中画原型，自己的项目中输出 UI。结合实际使用情况，做了一些调整。
  • 增加了配色面板，方便配置颜色；
  • 去掉了一些无意义的 symbol；
  • 统一了部分字体 style；
  • 增加 icon；

• 2017-08-21 更新：

  • 需 sketch 版本 v46.1 或以上；
  • 增加了按钮的默认形状：原型、圆角、矩形；
  • 对部分 symbol 进行了调整，增加易用性；
  • 增加了几个 icon。

• 2017-08-04 更新：

  • 需sketch 版本 v45.1 或以上；
  • 上传预览版本，后续持续更新。