全新组件库 WireframeKit for Sketch - Impart 上架全新线框稿组件库WireframeKit for Ske

.bizsvr_0 {margin-left: 8px;margin-right: 8px;} .bizsvr_1 {font-size: 15px;letter-spacing: 0.5px;} .bizsvr_3 {letter-spacing: 0.5px;font-size: 14px;color: rgb(178, 178, 178);} .bizsvr_5 {margin-left: 8px;margin-right: 8px;text-align: center;} .bizsvr_6 {letter-spacing: 0.5px;font-size: 12px;} .bizsvr_12 {letter-spacing: 0.5px;font-size: 24px;} .bizsvr_32 {margin-left: 8px;margin-right: 8px;margin-bottom: 5px;} .bizsvr_34 {letter-spacing: 0.5px;font-size: 14px;} .bizsvr_35 {letter-spacing: 0.5px;font-size: 14px;color: rgb(255, 104, 39);} .bizsvr_64 {letter-spacing: 0.5px;font-size: 20px;}

不久前与鹅厂老同事合作了一个关于艺术画作与创意灵感的App概念设计项目，“Impart - iOS App Design Concept”，涵盖视觉设计、交互动效、Logo设计等多方面要素，特别是卡片/画廊形式的界面元素尝试

案例展示详见：http://www.behance.net/gallery/62633599/Impart

Impart - iOS App Design Concept

在项目中，我基于之前的系统级组件库 WireframeKit for Sketch (iOS 11) 制作了相关线框原型，并进一步优化整理成这套全新的应用级线框稿组件库，WireframeKit for Sketch - Impart。

该 Sketch 组件库面向移动端产品/交互设计，适用于内容/社交/电商等类型产品的线框原型制作。

简介

WireframeKit for Sketch - Impart 线框稿组件库与 Impart 概念设计原型同步制作，提供12种颜色定义（Colors），52种样式定义（Shared Styles），504种文字风格定义（Text Styles），16类共计22个典型元件模板（Symbols），16个常用图标（Icons），13个完整界面范例（Screens）。

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

全部由可订制组件搭建而成的界面范例，与Impart视觉原型保持一致

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

WireframeKit for Sketch - Impart 基于 WireframeKit for Sketch (iOS 11) 打造，两者的颜色、样式及文字风格定义完全通用，且组件命名各自独立，你可以在项目中同时调用这两套 Libraries 配合使用。

获取方式

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

价格

WireframeKit for Sketch - Impart (

69元

)

WireframeKit for Sketch - iOS 11 (

99元

)

WireframeKit for Sketch - iOS 11+ Impart 套装 (

仅售139元

)

扫码访问WireframeKit for Sketch - Impart

扫码访问WireframeKit for Sketch - iOS 11+ Impart 套装

使用方法

使用前，请将 Sketch 升级至最新版本，并确保系统安装有 San Francisco Pro 字体（http://developer.apple.com/fonts/）。

建议通过 Sketch Libraries 功能统一调用和维护 WireframeKit for Sketch - Impart。

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

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

组件库结构清单

WireframeKit for Sketch - Impart 的 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（x1）

Navigation Bar（x4）

Tool Bar（x2）

Tab Bar（x2）

Search Bar（x1）

Cards（卡片）

Basic（x1）

Calendar（x1）

Primary（x1）

Sharing（x1）

Collection Views（集合视图）

Card（x1）

Image（x1）

Profile - Default（x1）

Profile - Tile（x1）

Tag（x2）

Profiles（简介）

Default（x1）

Reverse（x1）

Icons（图标）

Button（x6）

Image Holder (x4)

Common（x6）

Screens（典型界面范例）

Daily（x2）

Calendar（x2）

Painting Detail（x1）

Share（x1）

Artist Detail（x2）

Artists（x2）

Mine（x3）

长按或扫描二维码，进入 Beforweb Store 微店获取 WireframeKit for Sketch - Impart 或 WireframeKit for Sketch (iOS 11 + Impart) 套装。