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

以下为正文

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

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2017-05-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

字体笔记

昨天,我写了纪录片《Helvetica》的观后感。因为内容与字体有关,我就借这个机会,整理一下关于字体的笔记。

1791
来自专栏星回的实验室

CSS闭合浮动

一眼望上去,满屏的float,页面内容一多了那就是天塌地陷啊。于是按照多年以前实习学会的闭合浮动

1062
来自专栏守候书阁

个人总结(css3新特性)

css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得...

5001
来自专栏练小习的专栏

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

2356
来自专栏前端迷

双十一,教你给你女朋友不一样的表白(程序员版)

https://ru23.com/11?name=front,这样会自动把源码中you换成女朋友的名字

4414
来自专栏程序猿

【C】贪吃蛇小游戏代码

#include <stdio.h> #include <graphics.h> #include <stdlib.h> #include <dos.h> /*...

3848
来自专栏狮乐园

interview record 20160822

问了一些列范围超级广的问题,不过我感觉大部分问题的答案,面试官还是比较满意的,有一些小问题没有答上来,我觉的并不是因为自己没有能力,其实就是所谓的“约书亚树”道...

973
来自专栏前端新视界

如何使用纯 CSS 制作四子连珠游戏

实验是学习新技巧、思考新想法、并突破自身极限的有趣的方式。“纯 CSS”演示很早就有了,但是随着浏览器和CSS的发展,新的挑战又出现了。CSS 和 HTML 预...

1202
来自专栏十月梦想

css3 flex弹性布局总结

本文涉及内容如下: flexbox的基本概念、容器属性学习、项目属性学习、实战演练。 flexbox 堪称布局神器,但属性实在太多让人无从下手,因此将自己所学的...

1193
来自专栏Thinks

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

1622

扫码关注云+社区

领取腾讯云代金券