BeFor Web
为网而生 - 原创译文博客 - 关注移动、VR及互联网产品的用户体验设计

自制组件库 WireframeKit for Sketch (iOS) 已上架

自制组件库 WireframeKit for Sketch (iOS) 已上架

感谢各位的关注,一直以来念叨的自制 WireframeKit for Sketch (iOS) 终于上架。

说起来其实已上架将近两天,因为信息最初发布于公众号微博。这48小时内,新老朋友们的信任与支持扑面而来。看到一些评价,譬如“终于得到神器啦”、“好东东,终于等到了”、“做交互稿很方便,挺好用的”、“画原型方便好多”、“高质量,良心价”,C感觉备受鼓励,大致可以确认自己做了一次还算不坏的尝试,接下来再接再厉好了。

这次开设了 Beforweb Store 微店,同样是第一次尝试;接下来,订制版《触类旁通:多终端时代的触屏界面设计》以及 Beforweb 书签等等也会陆续上架,届时C会在第一时间邀请各位来逛。

下面就对WireframeKit for Sketch (iOS)进行简要的介绍,包括获取方式组件清单也会给到。

简介

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

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

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

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

丰富的可配置项

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

常用视图组合

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

典型系统界面范例

你可以将该组件库保存为模板(“Save as Template”),并基于该模板来创建你的新项目(“New From Template”),也可以将其中的样式库(Styles)单独复制到你的现有项目当中作为风格定义,或是以任何你喜欢的方式来使用、覆写或改造元件模板(Symbols)。

获取方式

WireframeKit for Sketch (iOS) 是付费组件库,目前仅在 Beforweb Store 微店进行售卖,请通过以下二维码访问付费后,你将得到下载链接及密码具体发货方式请参见商品页面的详细说明

使用前,请将 Sketch 升级至最新版本,并确保系统安装有 San Francisco Fonts 字体(https://developer.apple.com/fonts/)。

附:组件库结构清单

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

Styles(样式)

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

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

Components(组件)

Bars(栏)

  • Status Bar(x1)
  • Navigation Bar(x5)
  • Tool Bar(x5)
  • 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(x7)

Icons(图标)

  • Common(x40)
  • Navigation Bar(x1)
  • Table View(x3)
  • Misc(x8)
  • Image Holder(x6)

Screens(典型界面范例)

  • Settings(x2)
  • Settings - Sounds(x2)
  • Settings - General - VPN - Add Configuration(x2)
  • Mail - Inbox(x2)
  • Messages(x2)
  • Contacts(x2)

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

Symbols(所有组件的原始Symbols)

感谢支持

扫描二维码,进入 Beforweb Store 微店获取 WireframeKit for Sketch (iOS),会好用:)

评论 (2)
后期会出pc端的吗?
前排观看,前排购买有优惠么 ?后续更新会怎么发放 ?
发表评论