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

Sketch组件库

组件库物语 - 通用性与易用性的权衡 »

周日晚间,“猎户星座”,全家便利店的美式咖啡,酝酿着困倦与新一周的未知,初冬的天气却毫不冷静。“有时你乘起风,有时你沉没,有时午夜有彩虹”。

一周前上架了新的 Sketch 组件库,也就是聚焦于社交类产品设计需求的 WireframeKit “Social”,同时也开始以这样的形式进行总结,包括思路、原则、工作方法、细节技巧等等;复盘于己,分享于人。

组件库物语 - 定义目标,以小为始 »

Hello 各位周五好,一周又要过去了;眼看着一年也只剩下最后一个月了。

本周上架了 WireframeKit for Sketch 系列的第三款组件库,“Social”。库如其名,聚焦于主流的社交类设计模式;和之前的系统库或概念库不同,这次完全基于市面上的真实产品,提炼了大量典型元素打造而成。

全新“Social”组件库上架,附赠《设计体系》全书译文 »

Hello 大家,WireframeKit for Sketch 系列的第三款组件库“Social”正式发布上架。

不同于系统原生风格的“iOS”库,以及概念设计风格的“Impart”库,这次的“Social”完全基于真实产品打造,聚焦于主流的社交类设计模式,提炼了超过180种界面组件,110余个常用图标,13个典型页面范例及详细的组件替换清单,以期快速满足实战需求,减免改造的负担,并提升参考学习价值。

WireframeKit for Sketch 免费升级至V1.1 »

WireframeKit for Sketch 线框稿组件库已升级至V1.1,在样式方面进行了较大的更新:

  • 将所有字体由 SF Pro 更新为 PingFang SC,更适于中文界面设计。
  • 优化了所有文字风格与样式定义的命名方式,更便于理解和调用。

升级同时涵盖到 iOS 11 与 Impart 两个库,当然也包括“iOS 11+Impart 套装”。

老用户依然免费升级,直接使用购买时收到的下载链接与密码即可获取。

还没有使用过 WireframeKit for Sketch 的朋友来了解下嘛。

全新组件库 WireframeKit for Sketch - Impart 上架 »

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

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

怎样使WireframeKit组件库变得更好? »

各位新年好。虽然不是正日子,氛围却已如此了,拜早年先。

发了半年多的WireframeKit for Sketch近来也更新到iOS 11版本了(老用户免费升级),接下来一年的上新计划也一点点制定了起来,希望新的产出可以更加丰富、实用,更加产品模式化,突破以元模式为主的系统原生层面。

与现实中的产品设计流程类似,在迭代开始之前,还需经由必要的调研才能进入更细化的目标定位与需求分析阶段。因此希望向各位购买过WireframeKit for Sketch的朋友们进行了解:大家平时是怎样使用这套组件库的?

WireframeKit for Sketch 现已升级至 iOS 11 »

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

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

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

使用Sketch Libraries构建组件库/设计体系 »

昨天降了温,一下子从不温不火的暖湿秋天变成了冬日的样子。

眼看着一年距离结束已不遥远,偶尔翻看年初立下的一些目标,多数已有完成,略感慰藉。这种所谓慰藉之后不久,通常会买些什么大件的东西来犒劳自己一类。多巴胺无时无刻不在寻找着机会为宿主制造一些对于奖励的渴望罢了。

会播放John Coltrane的咖啡店都是好咖啡店。我若开一间自己的咖啡店,怕是会终日放着JC不停歇;与村上春树的原则完全相反。我想我可能付不起足够的薪水去请有名的乐队来表演;不如请一些老伙计过来吧,只要为他们提供足够的啤酒。

本期是一篇很长的译文,Using Sketch Libraries to build better design systems,从理论方法到实践演示,一应俱全;耗掉了两个周末的时间终于完成,期间原文还有过一次更新。其中的流程思路和我在做WireframeKit For iOS(线框稿风格Sketch组件库)以及现在团队内部的组件库时所用的大致相同,个人比较推荐。

我在制作 Sketch 组件库时学到了一些东西 »

日常工作当中,每完成一轮迭代,或多或少都会做一些设计小结,譬如回顾一些典型方案背后的思路、权衡与决策的过程等等,同时也可以作为备忘与学习笔记。

工作是这样,个人项目亦应如此。最近在 Beforweb Store 上架的线框稿风格 Sketch 组件库(WireframeKit for Sketch),从开工到完成,似乎也有将近两个月的样子了,期间零零散散的利用日常工作之外的时间一点点的制作和打磨,回头看来也是一件让自己很有成就感的事。在制作过程中,不止一次想到在完工之后要记录些什么,因为感到真的有在过去的基础上学到了一些新的、重要的东西。

那么现在就来做这件事情。在本文中,我将向各位介绍我在制作 WireframeKit for Sketch 的过程中所学到的一些东西,包括制作和维护组件库的意义,组件库的组织方式,色彩、样式及文字风格的定义策略,全局化命名规则的制定,以及相关插件的使用。

Pages