BeFor Web
为网而生 - 关注移动互联网及AR/VR产品的用户体验设计

WireframeKit for Sketch 现已升级至 iOS 11

WireframeKit for Sketch 现已升级至 iOS 11

去年在 Beforweb 微店上架了 WireframeKit for Sketch (iOS) 线框稿组件库,半年多以来不断有朋友惠顾,好评率100%,也是非常感谢大家的支持了。

近两个月来断断续续地在抽空进行版本升级 (iOS 11),如今终于完成。字体、系统组件、图标、范例界面均升级扩充,完美适配iPhone X,可以上架了,老用户就免费更新吧。

不怎么说闲话,我们直接进入主题,本文包含以下部分:

  • 更新要点记录
  • 组件库简介
  • 使用方法
  • 获取方式(免费更新、付费购买)
  • 组件库结构清单

更新要点记录

  • 所有文字风格新增34号字定义
  • 所有字体更新为San Francisco Pro
  • 新增了大字号导航栏样式(x2)
  • 新增了用于iPhone X的Status Bar(x1)
  • 新增了用于iPhone X的Home Indicator(x1)
  • 新增了用于iPhone X的Tool Bar样式(x5)
  • 新增了用于iPhone X的Tab Bar样式(x4)
  • 新增了用于iPhone X的键盘样式(x6)
  • 新增了iOS 11实心风格图标(x39)
  • 新增了线型风格图标(x6)
  • 新增了iPhone X规格的典型界面范例(x8)

简介

WireframeKit for Sketch (iOS 11),线框稿风格 Sketch 组件库,面向移动端产品/交互设计工作而精心打造。

该组件库共提供12种颜色定义(Colors),52种样式定义(Shared Styles),504种文字风格定义(Text Styles),22类共计107个典型元件模板(Symbols),103个常用图标(Icons),针对两款设备规格共计16个完整界面范例(Screens)。

完备的风格样式及元件模板定义

所有组件即拖即用,适于快速创建中/高保真线框原型。元件模板可配置项丰富,具备良好的灵活性与扩展性,便于根据特定的设计需求进行改造复用,并能自适应各类常见的设备规格。

丰富的可配置项

全面、灵活、扩展性强的Table View样式定义

常用控件组合

常用图标,可在Navigation Bar、Tool Bar等组件当中直接调用,无需手动粘贴和调整

典型系统界面范例

使用方法

使用前,请将 Sketch 升级至最新版本,并确保系统安装有 San Francisco Pro 字体

建议通过 Sketch Libraries 功能统一调用和维护 WireframeKit for Sketch (iOS 11)。

或者,你可以将该组件库保存为模板(“Save as Template”),并基于该模板来创建你的新项目(“New From Template”)。

你还可以将 WireframeKit for Sketch (iOS 11) 中的样式库(Styles)单独复制到你的现有项目当中作为风格定义,或是以任何你喜欢的方式来使用、覆写或改造元件模板(Symbols)。

获取方式

WireframeKit for Sketch (iOS 11) 是付费组件库,目前仅在 Beforweb 微店进行售卖。

  • 免费更新:已经购买过 iOS 10 版本的用户无需再次付费。你可以将当时的微店订单号发送至邮箱 beforweb@qq.com 来获取新版本的下载链接及密码。
  • 付费购买:初次购买的用户,请通过以下二维码访问微店,付费时记得留下联系方式,你将收到下载链接及密码。

附:组件库结构清单

WireframeKit Sketch 文件由9个页面(Pages)构成,包括“Styles”、“Components”、“Screens”、“Symbols”等等。

Styles(样式)

  • Colors:提供12种颜色定义,从黑色到白色全透明,供不同类型的文本及填充、描边样式使用。颜色名称全局统一。
  • Shared Styles:提供52种样式定义,包括实色填充(命名规则:Fill-颜色名称)、空心描边(命名规则:Border-颜色名称)、实色及多方向描边等 (命名规则:Fill-颜色名称-Border-颜色名称)。
  • Text Styles:基于3种对齐方式、2种字体重量、6种字色、14种字号,提供504种文字风格定义 (命名规则:对齐方式-字体重量-颜色名称-字号)。

命名合理、架构清晰的样式库是所有组件定义的基石。如需根据特定的需求对样式库进行变更或扩展,建议保持命名规则与架构的一致性。

Components(组件)

Bars(栏)

  • Status Bar(x2)
  • Home Indicator(x1)
  • Navigation Bar(x7)
  • Tool Bar(x10)
  • Tab Bar(x4)
  • Search Bar(x4)

Table Views(列表视图)

  • Cell(x20)
  • Section Header(x1)
  • Section Footer(x1)
  • Sticky Section Header(x1)
  • Section Index(x1)

Views(视图)

  • Alert(x6)
  • Action Sheet(x5)
  • Activity View(x1)
  • Notification(x4)

Controls(控件)

  • Segmented Control(x3)
  • Slider(x2)
  • Progress Indicator(x2)
  • Pagination Dots(x5)
  • Switch(x2)
  • Stepper(x1)
  • Edit Menu(x7)
  • Keyboard(x13)

Icons(图标)

  • Outlined(x46)
  • Solid(x39)
  • Navigation Bar(x1)
  • Table View(x3)
  • Misc(x8)
  • Image Holder(x6)

Screens(典型界面范例)

  • Settings(x4)
  • Settings - Sounds & Haptics(x2)
  • Mail - Inbox(x4)
  • Messages(x4)
  • Contacts(x2)

License(版本信息及使用条款)

Symbols(所有组件的原始Symbols)

长按或扫描二维码,进入 Beforweb Store 微店获取 WireframeKit for Sketch (iOS 11)。