设计师会编程、程序员懂艺术之设计规范

以下为正文

UI&UX类的设计规范，不像建筑设计、工业设计那样，有比较成熟权威的设计规范。大多是各家发布的设计规范，用于自家产品、品牌的设计复用。

本文从

设计规范是什么？

设计规范一般包括哪些内容？

自己动手开发一个从网页自动生成设计规范的功能；

三个角度进行经验分享。

1、设计规范，指的是什么？

本文所提的“设计规范”，包括设计语言、风格指引、设计指南、设计资源、web前端框架等，对UI、VISUAL、BRAND、APP、WEB等进行样式的规范。

1.1

DESIGN LANGUAGE 语言

STYLE GUIDE 指引

DESIGN MANUAL 指南

这三个概念比较相近，比如下面这些，著名公司的设计规范：

FLUENT DESIGN

IBM DESIGN LANGUAGE

MATERIAL DESIGN

OS X HUMAN INTERFACE

UBER

MAPBOX

BBC

STARBUCKS

UBUNTU

YAHOO

MOZILLA

BEST BUY

GITHUB

MARVEL

读者可以自行搜索，查阅各家的设计规范。

1.2

WEB / BRAND ASSETS 资源

一些psd、sketch的模版文件资源，也包括icon。

1.3

FRAMEWORK 框架

主要是前端工程师非常熟悉的web框架，如BOOTSTRAP，FOUNDATION。

1.4

VISUAL／Graphics Standards 视觉

Brand Guidelines品牌指南

这两个东西有点类似，我们可以统一称为称为VI（Visual Identity）系统，包括：

A 基本要素系统：

如企业名称、企业标志、企业造型、标准字、标准色、象征图案、宣传口号等。

B 应用系统：

产品造型、办公用品、企业环境、交通工具、服装服饰、广告媒体、招牌、包装系统、公务礼品、陈列展示以及印刷出版物等。

有2个例子：

NASA的Graphics Standards（1976 年）就对NASA标示在各种应用场景的使用规范做了说明。

纳粹的Brand Guidelines（1937 年）

2、设计规范一般包括哪些内容？

可以先试试这2个工具，

输入url直接从网页里直接生成style Guide：

http://stylifyme.com/

http://cssstats.com/

2个工具都是生成下面这些内容：

背景颜色

字体颜色

字体大小

字体名称

图片尺寸

其实，设计规范包括的内容不止这些。

2.1 设计规范包含的内容

一般来说，设计规范包含以下内容：

总体部分

设计原则 Discipline

颜色 Color

字体 Font

图标 Icon

布局 Layout

动画 Animation

组件部分

输入组件 Inputs

选择器&下拉框 Selectors & dropdowns

等级 Ratings

标签&指针 Tags&pointers

按钮&开关 Buttons&switchers

滑动条 Sliders

提醒 Info&alert

上文提到的那2个工具，也仅仅是生成了设计规范里的总体部分中的颜色、字体的内容。

2.2 设计原则

写一些听起来很美好，感觉又“很虚”的东西。比如，人性化原则，在移动端，要考虑手指的大小，关系到按钮的点击区域的大小设置。

阅读区域的范围

手指操作区域的范围

信息架构的考虑

如何高效组织信息，关系到整个产品的用户体验

2.2 标注单位px与pt

Designer喜欢用pt，developer喜欢用px。

是这样吗？

网页

一般都使用px作为单位，设计规范里一般也采用px作为单位。如果碰到em、%、pt单位，他们的换算关系如下：

16px =1em = 100%= 12pt

移动端

第一次推出iPhone时，这两个单位都是一样：1pt等于1px。然后当视网膜屏到来，1pt成为2px。

因此正确算法是iPhone4,5,6=@2x, iPhone6Plus=@3x

iPhone主要的分辨率：

320x480pt（4）

320x568pt（5）

375x667pt（6）

414x736pt（6P）

布局不是整体缩放，而是扩大的基础上的分辨率。

例如，导航栏只调整宽度，但保持相同的高度，它里面的元素保持不变。

关于标注单位是用px还是dp/pt，

如果用750*1334的设计，那么你要用pt/dp标注直接像素除以2即是，

用720*1280设计也是一样，不用分安卓／ios，都是像素值除以2。

如果是用1242x2208尺寸设计，那么就得除以3。

px：

pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；

pt：

point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；

em：

即％，在CSS中，1em＝100％，是一个比率，结合CSS继承关系使用，具有灵活性。

PPI（DPI）：

pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了“清晰度”，“精度”；

电子设备的DPI，一般为96

在Photoshop中，设置一个图片中的某个艺术效果的字体是72pt大小，然后分别将这张图片设为300DPI和72DPI，再打印出来，就可以看出，这2个字体大小完全一样，只是“清晰度”不同，300DPI更清晰。

PX和PT转换的公式：

px = pt * DPI / 72

2.3 颜色

一般使用十六进制，

一般规定：

背景色

字体颜色，一个深的、一个浅的

链接字体颜色

主色，

辅色

颜色的深浅变化也可以做一些规定，比如下图

颜色的选取可以借助色环来进行，比如IBM的设计规范里提到的

颜色可以考虑2种主题，light-theme及dark-theme，俗称日间模式及夜间模式。

2.4 字体

一般包括从H1、H2、H3、H4、H5、p六种字体样式的设定。

规定字体的大小、行高、颜色。

字体行高绝对值为『字号 x 1.5倍』，例如：12 号字体的行高为 18px，14 号字体的行高为 21px。

字体家族font-family:

-apple-system,

BlinkMacSystemFont,

Segoe UI,

Roboto,

Helvetica Neue,

Helvetica,

PingFang SC,

Hiragino Sans GB,

Microsoft YaHei,

SimSun, sans-serif;

优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性

关于字体大小，IBM给了一个原则，就是把16px(1em)作为基准，选取一个比例，比如

1.618：Golden Ratio

5/4 ：Major Third

4/3：Perfect Fourth

这里选择了1.618黄金比例，

大一号：

16 × 1.618 = 25.888 ≈ 26

再大一号：

25.888 × 1.618 = 41.887 ≈ 42

小一号：

16 ÷ 1.618 = 9.889 ≈ 10

其他字体属性也是可以设定的，比如letter-spacing

2.5 布局

规定页面的模版

采用网格系统布局，网格间距、列数、高度、宽度等。

2.6 图标

包括系统图标及业务图标。

系统图标，通常用来表示常用的操作，比如：删除、保存、编辑。也可以用来表示一个文件或者状态。

业务图标不同于系统图标，本身不带有功能性的操作，而是辅助配合文案的一个抽象化图形。

2.7 动画

也叫动效设计，主要起到过渡、增强示意、改善感知、加强层级空间的作用。

3、自己动手开发一个从网页自动生成设计规范的功能

上文提到的2个网页，实现的并不完美。

了解完设计规范应该包括哪些内容，我们似乎可以自己实现一个从网页自动生成设计规范的功能了！

实现思路：

从网页生成设计规范，总体思路是遍历所有element的css样式，把font-size、font-family、font-weight、color、background-color等要用到的样式提取出来，再做归类，呈现成一份完整的设计规范。

首先，我们先要了解下如何可以获取元素的最终使用的css属性值。

3.1 CSS的样式分类

css样式在html中有三种存在形态：

内联样式：

<div style="display: none"></div>

内部样式:

<style></style>

外联样式：

<link href="" />

如果解析style、link标签，只能获取内部样式和外联样式；

如果使用document.querySelector(‘body’).style的方式，只能获取内联样式；

幸好，window有一个方法，可以获取当前元素所有最终使用的CSS属性值。

getComputedStyle，返回的是一个CSS样式对象。

只要从中提取我们需要的css属性值就可以达到提取css样式的目的啦。

3.2 遍历所有element元素

接下来，需要实现遍历所有的标签，以免遗漏。

直接上代码。

//获取根元素

var root = document.documentElement;

//遍历所有的节点

allNodes(root);

function allNodes(node){

/*

判断是否是元素节点

nodeType 属性返回以数字值返回指定节点的节点类型。

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

*/

if(node.nodeType == 1){

//进行css提取，并作其他处理

display(node);

//判断该元素节点是否有子节点

if(node.hasChildNodes){

//得到所有的子节点

var childNodes = node.childNodes;

//遍历所哟的子节点

for (var i = 0; i < childNodes.length; i++) {

//得到具体的某个子节点

var childNode = childNodes.item(i);

//递归遍历

allNodes(childNode);

};

};

};

};

3.2生成设计规范

解决了以上2个技术点，呈现部分只是做一些div及css样式的处理，有兴趣可以自行实现下。

Ps：

我正在开发一个

「JS Playground for designer 」

的桌面应用。

到时候把 「 自动生成设计规范」 作为其中的一个使用范例，一并更新哈。

资料来源

https://saijogeorge.com/brand-style-guide-examples/

http://stylifyme.com/

http://cssstats.com/

http://lstore.graphics/resource/elements/

https://www.nasa.gov/sites/default/files/atoms/files/nasa_graphics_manual_nhb_1430-2_jan_1976.pdf

http://www.slideshare.net/amdraci/the-nazi-brand-guide

http://designguidelines.co/

https://ant.design