专栏首页MixLab科技+设计实验室设计师会编程、程序员懂艺术之设计规范

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

以下为正文

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),作者:shadow

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 她用「 明信片 」暗示他

    曾经有人说过,「 明信片 」是世界上最美好的物品,它承载着熟悉或陌生的故事以及他人的心意。 你收到过吗?这是一种承载思想的物品,如今手机app满大街,有没有类似...

    mixlab
  • 网易新闻《娱乐圈画传》H5的动画技巧

    今天看到一个非常喜欢的H5,又是网易出品的!于是,我忍不住去研究了他的实现方式,有3个值得我们学习的地方,分别是逐帧动画,多种变换叠加的css动画,还有最亮的:...

    mixlab
  • 什么是见解、如何实现算法见解?| Mixlab智能可视化系列

    当你在 Excel 中输入这个问题,Excel 将立即“意会”,把“服装”分类下不同产品的销售量数据,以可视化图表的方式呈现在你眼前。

    mixlab
  • WecTeam:撸了这么多代码,你真的了解字体吗?

    这篇文章,我们来讲一讲关于字体的常识。这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要开发同学和产品经理、设计师不断重复沟通的。

    前端劝退师
  • 字体也有性格

    今天是2016年的第一天,很特殊的也很特别的日子,祝大家新年快乐,小魔方会一如既往的每天陪大家一起分享,一起成长。 上一期给大家简单介绍了字体的基础知识,今天就...

    数据小磨坊
  • 撸了这么多代码,你真的了解字体吗?

    这篇文章,我们来讲一讲关于字体的常识。这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要开发同学和产品经理、设计师不断重复沟通的。

    WecTeam
  • 技巧 | 微信文章有那么多种字体?

    这两天我在 md-nice 用户群里看到有人在群里问怎么设置微信推文里的字体,恰好我前阵子刚好看过一篇关于微信推文字体排版的文章,

    灵魂画师牧码
  • 字体的力量:将PPT设计做到极致

    总之,每一种字体都会体现出一定的设计理念。选用恰当的字体,会让整个页面看起来更加和谐,而字体使用不当,则会让页面看起来很奇怪。

    博文视点Broadview
  • Markdown设置字体大小、颜色...,CSDN博客编写设置字体大小、颜色、粗细。字体,文字背景设置。

    小蓝枣
  • AI 字体世界地图:用 AI 和机器学习辨析各种字体的审美特征

    【新智元导读】著名设计机构 IDEO 项目负责人 Kevin Ho 受到李飞飞高徒 Andrej Karpathy 做的“图像地图”的启发,用机器学习算法通过...

    新智元

扫码关注云+社区

领取腾讯云代金券