2014年9月份设计圈干货大合集分享

九月一过,国庆、双11、双12、圣诞、新年,设计师一直要战到12306抽风瘫痪的春节才能喘口气有木有!这不,在大战开启之前,我们又准备了一波设计圈干货,助战奋斗在一线的设计师和前端同学。同之前的干货大合集一样,这次搜集的干货也囊括了最新的Web应用,框架,软件,图标合集,CMS系统,JavaScript资源,纹理合集以及字体等各种资源。

最值得收藏的UI设计干货!今天这篇从概念、灵感,方法及工具3个方面帮同学们理清UI设计规范,同时有一大波神器推荐。

其中绝大部分是免费的,还有一些是值得推荐的优质收费资源。还是那句老话,仔细看看,总有一款适合你!

作者追波:

Scribbleton

概念,灵感,方法和工具。

图片 1

概念:

Scribbleton
是一款个人Wiki应用,它会帮你整理你的想法,将可触及到的信息整合到一起。

设计互联网产品,Style Guide / Pattern Library 和纯粹的 Specification
各具不同功能和作用,却都含设计规范的概念。

Free Survey Creator

  1. Style Guide / Pattern Library:

图片 2

  • 偏重视觉概念,一般以文档或图像格式呈现(不限定)。
  • 内容:对设计作品中的字体(Typeface)、字型(Font)、色板、品牌标识规范(Brand
    Guideline)、Icon 等要素作出展示和说明。
  • 主要作用于设计团队或设计师之间,展示产品的视觉设计风格。便于风格复用,规范第三方的品牌塑造(Branding)和接入。

这是一款非常方便的调查问卷生成工具,短短几分钟帮你生成问卷及其代码,方便嵌入到网站中,它会自动回收用户反馈。

实例参考(更多参考下文中灵感):

Design Meltdown

Brand Assets| KickstarterLogos & branding| Dropbox(翻墙)

图片 3

图片 4

Design Meltdown
近期刚刚完成了产品的重新设计,它比以前更加实用了。你可以根据标签进行浏览,也可以在侧边栏中去体验最新的500种新特性。

图片 5

Devicons

  1. Style Guide / Pattern Library:

图片 6

  • 偏重(Web 前端)开发概念,基本都以网页文档形式呈现。
  • 内容:对界面元素(UI
    Elements)的样式风格及实现其效果所对应的代码片段(HTML,
    CSS)作出说明解释,包含交互和动效设计(以 JavaScript
    为主)。例如:常见的基础布局(Grid
    System)、字体排版(Typography)、按钮、菜单、列表、对话框(Dialog)、Tooltip
    等等。
  • 用于团队 Web
    设计和开发协作,统一产品风格。复用时提升工作效率,同时也保证用户体验质量。

Devicons
是一组编程类的图标,只需一行简单的代码你就可以使用它们。Devicons可以用于GitHub,安卓系统,Linux系统,PHP、Sass、Ember等。

实例参考(更多参考下文中灵感):

Refills

Pattern Library| MailChimp(翻墙)Mapbox styleguide| Mapbox

图片 7

图片 8

Refills 是一组预先封装好的基于Bourbon、Bitters和Neat的组件和样式。

图片 9

Semplice

概念 1 和 2 结合的实例(更多参考下文中灵感):

图片 10

Product Style Guide, Visual guidelines| SalesforceStyle Guide| Lonely
Planet

Semplice是一款基于Wordpress的高度品牌化、定制化案例分析系统,可以赋予设计师和创意工作者更大的可能性。购买单独的授权需要69美元,而允许10个用户的授权需要299美元。

图片 11

Yeo+Lab

图片 12

图片 13

  1. Specification (Spec):

Yeo+Lab是一款为Pattern Lab所生的Yeoman生成器。

  • 介于设计与开发之间,由设计师直接在视觉稿(Mockup)中创建。
  • 内容:主要由 Annotation(注释,国内俗称标注)和
    Measurement(量度)构成。Annotation
    既注释设计稿中界面元素所使用的字体字型、色值等,Measurement
    则注明各元素的尺寸及它们的边距,留白等。
  • 用于设计师与开发人员之间沟通和工作交接,保证开发出地产品界面和视觉稿高度统一。

Breach

图片 14

图片 15

灵感:

Breach是一组开放、模块化、易于被浏览器解析的Javascript源代码。整个界面基于JS和HTML5来建立,包含Chromium的API和Node.js作为支撑。

一些常用的项目和文档都有采用上述的概念,比如采用了概念 1 的:

Please.js

iOS Human Interface GuidelinesMaterial Guidelines(翻墙)

图片 16

采用概念 2 的:

Please.js 是一款更加优秀的随机颜色生成器,漂亮,美观,有范儿。

SkeletonPureBootstrap

Human Interface Guidelines

而概念 3 往往仅在公司或团队内部使用(详见下文工具)。

图片 17

灵感和实例资源:

Human Interface Guidelines
是一个Tumblr博客,博主以问答的形式呈现了世界各地的设计师对于UI设计的问题的答案。

Website Style Guide Resources|
收录大量案例,该项目同时也收录了相关文章、工具、书籍、播客等。Find
Guidelines| 一个直观的 Guideline 官方链接收集列表。Brand Style Guide
Examples| 同上All The Style Guides| 同上,托管在 Tumblr
,以博客形式呈现。

Indicative

方法和工具:1. Style Guide / Pattern Library:

图片 18

方法不限,以能够准确展现视觉设计风格和品牌识别(Identity)的规范为标准。正因其偏视觉化,编写文档不是必须的,可直接用图形编辑软件产出。例如:

Indicative 是一套针对初创企业的可视化的业务分析工具。

Airbnb UI Toolkit WebSalesforce1 UI KitHousing UI Style Guide

Frame

图片 19

图片 20

也可借助工具:

如果你想获得超赞的产品图片的话,那么你需要Frame 。

Style Inventory for Sketch| Sketch 插件,基于视觉稿生成 Style Guide。

Startup Stock Photos

Style Tiles| 用于快速制作Style Guide的 PSD 模版,

图片 21

Frontify Style Guide| Frontify 是一个面向设计团队的协作平台,提供Style
Guide生成和Spec工具。

Startup Stock Photos
也是一个Tumblr博客,它提供了超多的初创公司的完美照片。

CSS Stats| 解析 URl 对应网站的 Style(主要依靠分析 CSS
文件),展示相关信息,比如字体尺寸(font-size)、色板、浮动(float)采用数量等。

Objecticons

Stylify Me| 填入网站 URL,自动生成对应页面的Style Guide。提供 PDF
文件保存。

图片 22

  1. Style Guide / Pattern Library:

Objecticons 是一组图标合集,图标内容是关于日常生活中的各种物品。

因要制作出网页文档,且其中含有大量的 Web
组件(代码片段)和元素(视觉),可借助前端框架高效产出,比如相对大众的Bootstrap,Semantic
UI。在大量的自由和开源前端框架项目中,选择有维护支持,自身喜欢或熟悉的即可。

FontFace Ninja

可用工具:

图片 23

设计师 Brad Frost 有一套叫做原子设计(Atomic Design)的 Web
设计理论,在该领域有一定影响,其核心概念就是复用Pattern
Library,高率生产 Web 页面:

FontFace Ninja
是一款浏览器拓展,包含了Safari和Chrome的版本,可以让你找到你所浏览的网站的字体,它还允许你隐藏网站上的图片和广告,让你更加专注于字体。

Atomic Design| Brad Frost(翻墙)他为该理论创建了一个开源项目,基于
PHP:Pattern Lab| Build Atomic Design Systems

Pagekit

图片 24

图片 25

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

Pagekit
是一款全新的内容管理系统,方便创建和共享内容,更重要的是,它拥有响应式设计,Markdown编辑器,小插件,完整的权限管理系统,多媒体管理器等。

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

Chevereto

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

图片 26

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

Chevereto
是一个图片托管脚本,可以帮你在服务器上轻松创建一个图片托管网站。

  1. Specification (Spec):

Planleaf

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

图片 27

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

Planleaf 是一款基于电子邮件的任务管理系统,可以方便用户管理待办事项。

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

5iler

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

图片 28

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

5iler
是一个记事本程序,由5个简单而多功能的文件组成,它们可以按照色彩、标签在短短30秒内完成整理工作。

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

LegalSifter

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

图片 29

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

LegalSifter
可以让你深入了解合同而无需向律师进行资讯,并且提高你书写合同的技巧。

图片 30

Wunderlist 3

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