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