• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 互联网产品设计中,如何制作一套设计规范?

互联网产品设计中,如何制作一套设计规范?

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含产品设计规范,经验分享,设计规范等相关知识,希望在学习及工作中可以帮助到您

products-design-rule-1

@锦妖_BCJ2嘤?:我最近对设计规范(Design Guidelines)很有兴趣,收集了不少有用的资料,包括什么是设计规范,做设计规范的最佳时机,如何制作设计规范等,全是精选干货,在此分享给大家。

什么是设计规范?

首先是几家公司的案例,有些网址可能在墙外,麻烦大家自己翻一翻了。

Salesforce – Lightning Design System(规范地址)

IBM – Design Language(规范地址)

Google – Material Design(规范地址)

Facebook – Brand Guidelines(规范地址)

MailChimp – Patterns(规范地址)

GitHub – Primer(规范地址)

Yelp – Styleguide(规范地址)

这些设计规范不尽相同。

有的非常概括,比如IBM的Design Language;有的非常细致,比如Salesforce的Lightning;有的侧重于企业内部复用元素,减少工作时的摩擦,例如MailChimp的Patterns;有的侧重于对接外部的设计,比如Google的Material Design;有的侧重于外观和模版资源,例如Facebook的Brand Guidelines;有的侧重于代码,例如GitHub的Primer;有的形式是一个网站,例如苹果的HIG;有的形式是一个app,例如Airbnb的DLS(仅内部可见,不确定,感觉是)。

-app-20170202-1

IBM讲了很多high level的设计原则

-app-20170202-2

Salesforce的设计规范比Material Design还仔细。

-app-20170202-3

MailChimp的规范写明了栅格系统,字体字号等各种元素。

-app-20170202-4

Google的Material Design和苹果的HIG可能是大家最熟悉的设计规范。

-app-20170202-5

Facebook对外可见的规范主要是品牌规范,也有assets可以下载。

-app-20170202-6

GitHub的规范基本上是一份代码文档。

什么时候应该做设计规范?

做一份设计规范可能会花不少时间和精力,什么时候应该做设计规范,又怎样促使管理层同意这个提议呢?

先说什么时候还不需要设计规范:

在产品初始阶段,通常一份Sketch文件就包括了所有设计,只要把Symbol和Styled Text利用好,就可以保证设计的整洁有序了。

在人力不足的时候,建立和维护一份设计规范是很奢侈的。我自己在小团队中做创新产品的时候,就选择把Sketch文件存在Dropbox,频繁沟通,确保团队成员了解版本的变更和对他们工作的影响。

什么时候应该考虑制作设计规范:

在一些产品做出一次大的设计变更之后,通常会产生出一份崭新的全面的设计稿。在这个稿子的基础上,发展设计规范更容易。

-app-20170202-7

旧版的Asana。

-app-20170202-8

Asana经历了一个大改版,很可能会维持这个样子好几年,所以适合制作一个规范。

除了大改版,有时设计师也会做facelift(意为只改外观,不改逻辑),如果有规范,就可以依据规范一点一点地改,而不担心会遗漏了。AOL新旧版交替的时候,404页面就拖了很久,一是优先级不高,二是存在感太低很容易被遗忘在角落。

如果旗下有一个以上产品,又想保持品牌的一致性,有设计规范作参考会容易很多。比如Facebook的F8大会上,设计师曾经提到过他们在设计新功能的时候,从设计规范中把小头像的缩略图直接拖到新设计上,复用了这个元素,既节约时间,也避免了用户体验的割裂。

对内的规范应该设置为所有员工都可以浏览,部分员工有权更改,每一次更改都需要记录。在规范里标明品牌个性,设计原则,各种可复用的元素等等,可以减少设计和开发之间的摩擦。

平台型产品可以做一份对外的设计规范,以统一相关产品的样式,扩大影响力。唯有统一,才能有区分度。如果不统一,产品形象会混乱模糊。

与全球的设计师分享制作设计规范的经验,以及它如何影响了设计流程和团队协作。一方面为设计师社群做贡献,另一方面塑造了重视设计的公司形象,对PR和人才招募有利。

制作设计规范需要什么?

一个计划:

首先要确定这个项目的scope,明确设计规范的类别,预估所需要的人力,规划项目时间和项目结束后的安排。

对于设计规范的类别,如果你的产品是一个复杂的网站,你可能更想做一个动态的,不断更新的代码库,而不是一个画满标注的PDF。确定类别后,可以考虑有哪些内容应该加入进去,比如styles,components,patterns等等。

对于人力,依据团队的大小有所区别,有些大公司会有人全职负责设计规范,小一点的可能有人在主业之余负责维护这个规范。

对于项目时间和结束后的安排,建议用一段时间集中建设设计规范,然后长期地维护它。

额外加分项是,给这个设计规范起个好名字吧,像Spotify的GLUE(Global Language for a Unified Experience)就很不错。

一些经验:

WeWork – Plasma Design System??(文章)

Airbnb – Design Language System(文章)

Spotify – Scaling Design at Spotify(文章)

这是三家知名公司分享的设计经验,WeWork的最新也最详细。除了参考文章,也可以参考下面的其他公司的设计规范。

更多设计规范

设计师Andrew Couldwell找到的设计规范列表

一个收集设计规范的小站 The Way Products Are Built

「如何看懂iOS 10 的设计规范指南」

  1. 看趋势变化丨《从IOS 10设计指南变化看设计的新趋势》
  2. 看交互启示丨《从IOS 10 的交互设计中学到的3个设计启示》
  3. 看使用方法丨《一份超详细的「IOS 10 UI KIT」使用手册(附源文件)》

原文地址:zhihu

优设大课堂

您可能想查找下面的文章:

  • 内部教程!超详细的支付宝设计规范之版式篇
  • 腾讯实战经验!如何搭建有效的设计规范?
  • 内部教程!超详细的支付宝设计规范之线下字体篇
  • 内部教程!超详细的支付宝设计规范之线上字体篇
  • 内部教程!超详细的支付宝设计规范之配色篇
  • 互联网产品设计中,如何制作一套设计规范?

相关文章

  • 2017-08-06web网页开发面试笔试必备小知识(必看)
  • 2017-08-0625条div+css编程提醒及小技巧整理
  • 2018-08-23动效在UI设计中有哪三个关键用途
  • 2017-08-06不是中国才有的特色:文化差异下的网页开发
  • 2017-08-06Bootstrap之所以广泛流传的11大原因
  • 2018-08-23如何巧用线条,让你的Banner 更有设计感?
  • 2017-08-06Facebook互联网所有服务近乎完美改版过程
  • 2017-08-06网页制作常用英文字体
  • 2017-08-06ipad上借助firebug工具来进行页面调试
  • 2018-08-23回过头看,我很感恩自己做出了这样的选择:石墨文档产品总监罗颖

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 搜索引擎免费收录网站入口小集
    • 实战案例!一个简单好用的创意设计流程总结
    • 设计一个有趣的网站的方法与技巧(图)
    • 表单经典原则是错的?来看这5个表单设计新规则
    • 超实用!UX团队如何给设计原则做优先级排序?
    • 设计师作品集网站中,常见的5个误区和解决方案
    • 解决checkbox复选框选中传值,不选中不传值的方案
    • JS跨域取XML--借助AS的URLLoader
    • 如何学习Low Poly Style?来看这篇超全面的总结!
    • 功能大于形式!揭秘UI设计中“性冷淡”风格的真相

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有