• 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

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

为什么要做设计规范?(why)

如果说工作两年我养成了什么习惯的话,那一定是在做任何需求之前,都先问问自己“为什么要做这件事”。整理规范也是一样,做之前先要想清楚为什么要做规范?清楚的了解做一件事的价值有助于我们产生心理认同,从而更好的实施。

1. 保证平台统一性

统一性是交互设计的一个基本原则,在一个长期迭代多人合作的项目中,不同的设计师会负责不同的模块,每个人都有各自的思路,就有可能会对相同的元素做出了不同的方案,对于用户来说容易造成困惑,对品牌整体形象的建设也没有好处。所以对于较大型的产品,最好有设计规范来定义基本的元素,帮助众多设计师一起做出有统一性的产品。

2. 提升团队工作效率

对于同一个基本元素,如果没有设计规范,交互设计师需要设计一次交互方式,视觉设计师需要设计一次外形,UI开发同学需要开发一次,每个不同的设计师遇到这个元素时都可能重新设计一遍。但如果有了设计规范,只需设计一次,团队中任何一个设计师需要用的时候直接拿来用就可以了,也不需要再进行视觉和开发,极大的提升了效率。

3. 打磨细节体验

在整理每个元素的规范时,设计师都需要对其场景、状态考虑清楚。在整理的过程中,经常会发现一些以前没注意到的问题,并进行优化。把一个小元素单独拎出来仔细考量,写成一篇完整规范的过程,其实就是在打磨细节的过程。

什么时候做设计规范?(when)

虽说最理想的情况是在做设计前把设计准则、风格、规范都定义清楚,但在实际项目中很少能有条件这样做。项目初期总是小步快跑、先上再说,产品在不断试错的同时设计也是在不断试错,在一开始就能定义一个完全“正确”的规范其实是不太现实的。

通常情况下,在产品发展日趋平稳,产品定位和品牌形象都比较确定的时候;参与设计的人越来越多,统一性和效率的问题渐渐显现出来的时候,就是需要定义和整理设计规范的时候。

什么样的规范是好规范?(what)

规范是给人阅读的,写好一篇规范就像是设计好一个界面,我们也应该确定目标用户、用户目标、设计目标后,再进行设计执行。

一. 用户目标

设计规范的目标用户有可能只是一个团队内的设计师,有可能是第三方的工作人员,有可能是公开给所有人都可以查看的。不管是哪种类型的用户,都会有一个基本一致的目标,那就是“快速的在规范中找到有效信息并获得指导”。在这个一致的目标下又有所不同之处。

1. 团队内设计师——准确使用

团队内的设计师通常情况下需要尽可能的依据规范做出“准确”的设计,保证元素使用在正确的场景下,保证整个平台的一致性。所以给团队内的设计师看的规范相对来说会详细很多,以腾讯云内部设计规范为例,需要包含实际的交互场景举例及说明帮助交互设计师理解和判断,需要包含视觉标注帮助视觉设计师和UI工程师查阅等。

2. 第三方团队——快速上手

给第三方工作人员的设计规范又有所不同,他们的目标更侧重在合作时快速上手,直接将团队内部详细的长篇大论拿给他们看很难保证他们有耐心阅读,因此很难保证他们遵循规范。针对这种情况,更适合整理出典型页面,UI Kit,加之简单易懂的说明给他们,让他们快速了解页面应该怎么布局,可以用现成的元素进行快速拼接就可以了。

3. 公开大众——寻求参考

公开给大众的设计规范有非常详细的,也有比较简单直接的,主要还是要根据公开的目的来确定。通常情况下只是起到参考作用的公开指南,内容会比团队内部的设计规范精炼的多,大都只是展示定义描述、样式,再配以正确和错误示范帮助理解。而某些公开规范同时起到给合作方使用的功能时,就会包含更多详细的内容,详细的描述、视觉标注、代码等等。

二. 设计目标

确定用户目标之后,设计目标就很清晰了,一个好的规范应该是高效的、简单易懂的,以内部设计规范为例,具体执行时,我们应该确保分类合理、规范本身保持一致、布局排版易读,来提升设计师查阅的效率;确保定义清晰、描述准确、场景完备,来帮助设计师理解和使用。

1. 分类合理

一整套规范的内容通常都很多,为了能让用户快速查找,合理的分类必不可少。

2. 保持一致

每篇规范包含的内容保持一致、格式保持一致可以给用户构建心理预期,让他们看一篇规范就知道每篇都包含哪些部分,可以找到哪些信息。

3. 排版易读

通过合适的字体字号、间距留白减少用户阅读的疲劳感,图片与说明清晰的结合,正确和错误示例要能明显区分,使用表格来组织信息。

4. 定义清晰、描述准确、场景完备

用简单易懂的语句进行定义和描述,帮助用户了解是什么、怎么用、哪些场景可用。(规范不可能包含所有场景,但应该包含大多数常见场景。)

如何系统的整理规范?(how)

一. 制定一个计划

整理设计规范是一个涉及广周期长的项目,所以有一个清晰的计划可以帮助这个项目更好的推进。制定计划的流程如下图所示:

1. 整理规范内容及分类

做之前先明确我们需要整理哪些内容,这些内容的分类是怎样的,下图是我们整理腾讯云规范时列的内容及分类,初始时列举的内容可能不全,但没有关系,先把最基础的分类和内容定义好,后续发现有遗漏的内容再添加进去即可。

2. 确定优先级与分工

由上图可以看出,一整套规范包含的内容非常的多,所以内容和分类整理好后,还需要确定每块内容的优先级和分工。从大的模块上说,首先应当确定整体的设计风格和框架,整体确定后才好确定细节的风格;其次的优先级最好是控件、组件、场景,因为控件组成组件,控件和组件组成场景,所以先确定小的控件后,组件和场景更容易确定。至于分工,规范的制定是整个团队的事情,最好团队中的设计师都能够参与,互相分担工作量以提高规范整理的效率,也能够确保规范是在大家的讨论下制定而成,每个人都参与过并赞同结论。

3. 确定规范展示形式及推进流程

其实确定规范展示形式也是确定规范目标用户,要确定规范是给谁看的,展示在网站上还是直接用文档承载,网站是否对公众开放等问题。确定了这些问题后就可以确定规范的详细程度、大体的展示形式。

推进流程指的是整个项目要怎么跑,涉及到每个设计师接到分工后如何输出,何时讨论,怎么输出,交接给谁等等问题。例如我们的推进流程是每周固定时间开规范讨论会,每次确定几个要讨论的内容,负责的设计师整理问题,在会议上和大家一起讨论敲定结果,经过两周讨论后输出最终版本,交给下一个负责人。

4. 制定规范的规范

规范本身要遵循什么规则,也是需要事先确定的,我认为包括两个部分,一是设计原则,二是输出物规范。

根据整个产品的目标用户、用户及产品目标可以确定我们的设计原则,所有的规范梳理都要遵循最基础的设计原则,以满足用户及产品需求,提升整体的体验。

之前有提到过规范自身保持一致性是提高规范阅读效率的一部分,而且为了提升设计师输出的效率,事先制定好规范输出物的规范可以帮助设计师按照一个既定的格式进行输出,同时又能保持一致性。我们的输出物规范中包括:

规范包含的内容,需要有描述、类型及场景、使用说明、视觉规范、补充说明、相关下载、负责设计师。

规范插图的尺寸、背景色、板式、字体及用色、正确及错误示例图样式等。

二. 单个规范的整理流程

整体计划制定好之后,就需要开始一个个整理规范内容了。整理单个规范的内容也是有流程可寻的,如下图所示。下面以整理“对话框”规范为例,讲解一下单个规范整理的

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

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23平面作品太单调?三招提升设计层次感!
  • 2018-08-23如何做好表单设计?这儿有3个通用的注意要点
  • 2017-08-06需要让用户"知其所以然"
  • 2018-08-23新产品即将上线,那么预告页面要怎么设计?
  • 2018-08-23如何绘制功能性图标?来看资深设计师的全面总结!
  • 2018-08-232018年​Behance 上最值得关注的20个设计趋势
  • 2017-08-06交互设计中关于是选择分页还是加载的问题讲解
  • 2018-08-23交互进阶!如何扫除交互设计路上的3大障碍?
  • 2018-08-23专业科班系列!如何快速提高你的版式设计水平?
  • 2017-08-06关于div+css及Web标准网页的好处

文章分类

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

最近更新的内容

    • css元素隐藏原理及display:none和visibility:hidden
    • 超全面的导航设计基础知识总结(一)
    • 设计师该不该跳槽到区块链公司?来看入职的人怎么说
    • 最短JS判断是否为IE6(IE的写法)
    • js、css、html判断浏览器的各种版本
    • 经常被忽略的动效,对于用户体验设计是如此重要
    • Google对话式交互规范指南(九):对话中不存在“错误”
    • 2017年德国IF设计大奖金奖出炉了,都有哪些精彩的设计?
    • 网易资深设计师:如何建立可信赖的品牌形象?
    • 使用Hexo+GitHub搭建个人博客

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

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