UI知识,教你建立一套UI设计规范

2023-07-02 11:56:27 来源/作者: / 己有:2人学习过

UI知识,教你建立一套UI设计规范

Web Starter Kit(HTML, CSS, JS) | Google Web Fundamentals 提供的 Web 生产样板,支持创建“Pattern Library”形式的文档。(翻墙)

Style Guide Boilerplate(PHP) | “Pattern Library”样板,类似 Pattern Lab。

更多方法类文章和工具列表可参考:

Website Style Guide Resources
50 Style Guide Tools, Articles, Books and Resources | Tuts+

3. Specification (Spec):

“Spec”应以尽量降低设计师精力消耗,并能让开发人员清晰理解为标准。提高效率并保证质量的基础,是选择合适的工具。

在绘制设计稿所用的图形编辑软件中启用扩展和插件,直接生产“Spec”,高效直击主题:

specKing | Photoshop($19,推荐,正在使用)
Specctr | Photoshop, Illustrator($49 ,PS 和 AI 单独出售)
Markly App | Photoshop, Sketch($39.99,PS 和 Sketch 单独出售)
Sketch Measure | Sketch(自由)

一些其他插件也提供制作“Spec”功能,比如:

PNG EXPRESS | Automated Design Delivery for Photoshop($29)
Ink | A Photoshop documentor plugin(免费)

团队协作平台和其他工具:

Avocode | 简化设计师与开发人员之间的协作流程(Web 产品),提供 Slice(切图)、Spec、图层转 CSS 等功能。

Zeplin | 同样是一款有质量的设计协作软件。目前仅支持 Sketch 设计稿,PS 支持仍在开发中。产品处于邀请内侧阶段。

UI知识,教你建立一套UI设计规范

Frontify | 上文“Style Guide 工具”提到过,属协作平台,支持对设计稿“Spec”。

UI知识,教你建立一套UI设计规范

Assistor PS | 可独立在系统中运行的 PS 协助软件,但需借用 PS 载入设计文档。提供 Slice,Spec 等功能。