首页

创建设计系统前,6 件必须知道的事情

雪涛

编者按:资深产品设计师 Taras Savytskyi 将自己在初创团队中的设计经验浓缩成为今天的这篇文章,如果你也是设计团队中唯一或者主要的设计负责人,需要考虑到设计系统的问题,那么这篇文章的6个总结,应该能够给你不少帮助:

创建设计系统前,6 件必须知道的事情

成为公司当中唯一负责产品设计的设计师,其实并不是一件容易的事情。你可能会非常忙碌,因为你需要处理很多事情。你需要考虑产品的设计,交付物料,和研发人员协作,在沟通会上做QA,做用户访谈等等。

此外,你可能还需要保持你的设计技能持续精进。比如 Figma 或者 Sketch 更新了新的功能,推出了新的插件,你可能需要持续关注。我们通常会使用 Figma 来作为主要的设计和协同工具,所有的设计、探索、头脑风暴都在其中完成。

我加入 Statflo 之后不久,作为公司唯一的设计师,我需要设计一个全新的 APP,在这个过程中我需要设计一个全新的设计系统,帮我足够快速地创建后续的原型。

1、无需犹豫,直接基于现有的开源设计系统

创建设计系统前,6 件必须知道的事情

刚开始的时候,你不需要太多的素材。你可以直接调用绝大多数的原子组件,比如按钮、下拉菜单、表单、字体、配色,等等。默认初始状态的样式无关紧要,因为后续点击几下就能够快速调整样式。

但是这也意味着,你需要在第三方设计系统当中,找到重要的、足够灵活的、合适的组件来套用。你可以从下面几个设计系统开始着手:

免费: Ant Design Open Source, Lexicon DSL

付费:Tetrisly , Venus Design System73px

2、主要关注基础组件、颜色和排版

创建设计系统前,6 件必须知道的事情

在此之后,你如果要继续推进你的设计系统,你需要首先关注几件简单的事情:配色、排版和基础组件。

完成这几个部分能够帮你更快地完成整个体系的搭建。比如你预设了不同状态的配色,那么当你完成某个UI组件的默认状态的设计之后,可以快速添加其他状态的样式。

又比如,如果你不确定在输入字段当中使用什么图标,那么你只需要创建一个 16×16 的正方形,使用灰色填充,作为占位符,等后续图标素材确定之后,再填充进去就好了。

3、总是从一个组件开始设计

创建设计系统前,6 件必须知道的事情

当你是初创团队中唯一的设计师的时候,你有很大概率需要自己构建一套设计系统。如果你想在这件事情上节省时间,那么最好的方法,就从你当前正在做的这一个 UI 组件开始,将其中所有的元素转化为固定的组件,逐步拓展出设计系统。

以这种方式来执行,可以节省大量的时间,并且这种方式能够帮你更快明确哪些元素在一开始可能就是重要的。

在理想情况下,你的设计流程是绘制小元素,然后逐步组件成为你所需要的组件,这样的处理机制让你无需花费时间来反复更新组件的设计。

4、使用 Figma 当中的「Master」插件

创建设计系统前,6 件必须知道的事情

不过,以这种方式来创建设计系统的时候,你可能会碰到一个问题:你可能会忙于设计,而忘记将创建特定的组件,相反可能会复制一堆完全相同的画板。这个时候,手动撤销操作可能是一件极度麻烦和无聊的事情。这个时候,你就需要一个专门解决这种问题,这个插件名为 Master,创建者是 Gleb Sabirzyanov,它可以帮你将这些重复的画板转化成为一个固定的组件。

但是这还不够。如果你执行的操作足够多,这些你所复制的元素可能已经应用多个画板和页面当中,这个时候,你需要借助名为 The Similayer 的插件,来帮你搞定相似组件的识别问题:它可以一键识别出分散在各处相同的元素,然后你可以将他们转化成你所指定的 UI 组件了。

创建设计系统前,6 件必须知道的事情

5、利用项目间歇来完善设计系统

有时候项目和项目之间是有间隔时间的,这个时间段就特别适合你去覆盘之前设计的组件,将其逐步改进融合成为一个系统。相信我,你在这件事情上所花费的时间,将会在你下一次创建新的功能和组件或者原型的时候,得到回报。

我一直试图在自己每周的日程表当中,腾出几个小时的时间专门来做这件事情,帮我完成我的设计系统的增量更新和迭代。

创建设计系统前,6 件必须知道的事情

6、一开始不要纠结于正确命名

在创建设计系统的过程中,尤其是当你在不同的项目过程中,各种组件总是没法正确的命名。根据我的经验,在设计的时候,怎么命名方便怎么来其实是很合理的,一开始一定不要纠结,留着在后面的阶段再行解决都好,之后单独梳理命名、路径、结构、嵌套等等关系,比起你一开始做某个小组件的时候就纠结这些事情要更加合理,也更加方便。


文章来源:优设 作者:VMIC UED

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





「设计系统」的完整框架

雪涛

很多年前刚听到这个概念的时候,一直觉得设计系统是个非常高大上和牛逼哄哄的事情,当时 Material Design 刚刚出来没多久,苹果的人机设计指南在设计圈称王称霸,虽然自己主要做的都是安卓系统,还是认真拜读了 IOS 的 Human Interface Guidelines。

然后,其实也没有什么然后了……

你怎么看待设计系统这件事呢?

关于设计系统,有的人会觉得类似于一种玄学,有的人认为它好是好,但容易被束之高阁,放着落灰,有的人认为它对于设计师是一种束缚……另外,还有很多和它相关的概念也经常被混淆:设计语言、设计原则、设计规范、设计风格、设计组件……

从3个方面,帮你快速掌握「设计系统」的完整框架

图 1: 设计系统词云图

为了理清设计系统到底是什么,我把上面的这些和设计系统经常出现的词语进行了分类。我认为,它们指出的,应该是基于不同角度对设计系统的解释。在这些词语里,有的解释了设计系统存在的原因:追求效率,保持一致性、避免重复劳动,有助于数字产品形成整体性等。有的解释了它的组成或者相关联的内容:设计规范、设计语言、设计原则、设计规范、设计风格、设计组件等。有的解释了设计系统容易出现的问题:玄学、束缚、高大上,理想化等。

存在原因

存在原因,也就是建设设计系统的目的,正是由于设计系统是为了帮助我们的工作工作更加有效率的一个整体工具,也就注定了设计系统的样式、组成和运作方式不会一层不变,每个公司都需要自己找出适合自己团队设计与开发之间最顺畅的那个系统。

要知道,虽然设计系统听起来很酷,但创建一个好的设计系统其实是非常消耗精力的。所以,设计系统的目的一定要清晰并且符合现状需要。

为什么还要去创建设计系统呢?

我认为,只有对于下面这几条,你或团队有强烈的需求,才是生成一个设计系统的好时机。

  • 以往的设计内容总是需要被快速重复使用
  • 需要释放设计资源,让人力更专注于更加复杂和有价值的问题。
  • 需要在多个团队或多个产品之间保持一致性
  • 需要帮助初级设计师的产出迅速达到更高级的要求

没有被需要的设计系统,就是未来束之高阁,等着落灰的一套“玄学”。

组成内容

系统这个词,是指由相互联系的要素构成的有特定结构和功能的有机整体。设计系统,自然也是一个整体性的有机集合。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 2:设计系统的组成内容

1. 设计原则

设计原则是引导设计系统建设的指导思想和战略方向,基于大量实际经验提炼的高度理论化概括。

设计原则这个概念并不是为了设计系统才出现的,从完形心理学流派运用过来的格式塔理论所包括的临近性、相似性、封闭性、连续性等设计原则,还有以“如非必要,勿增实体”为核心的简约设计原则,来自唐纳德诺曼的概念模式、反馈、限制范围、可感知的预设用途四条设计原则等等。

为了对抽象的设计原则有更具像化的体会,我们再来看看几个比较有名的设计系统的原则。

  • 苹果公司:美学整体,一致性,直接的操作性,反馈,隐喻,用户可控
  • 微软公司:自然而然的,符合直觉和有力的,引人入胜且沉浸
  • 谷歌公司:材料是一种隐喻,明显、图形化和有目的性的,有意义的动效

从3个方面,帮你快速掌握「设计系统」的完整框架

图 3: 三大设计系统的原则

突然发现就苹果公司没给自己的设计系统专门取一个名字啊~

可以发现,虽然三家公司的设计原则各有不同,但几乎都是从通用的设计原则中提炼优化的。

建设一个设计系统一定需要设定自己的设计原则吗?

我认为它不是必须的。

虽然设计原则很重要,但在设计系统初期的时候,遵循现有基础和通用的设计原则来指导建设整个系统也是可以的。总好过随随便便从基础通用的设计原则中拿出一些词语润色一下,简单的堆砌一些高大上的词语,空泛的放在那里,等着它们逐渐变成别人口中的“玄学”吧?

正因为原则是设计系统高度抽象化的结晶,所以它需要基于大量实际设计经验再去生成,不然,很难起到指导设计系统达到增加效率的目的。

2. 设计风格和规范

设计风格,是这个设计系统给人形成的一种代表性的图形印象。设计规范,是用于协调统一性的规则和范式。在 60 年代的《美孚品牌手册》和 70 年代的 《NASA 图形使用规范》中,就已经包含“颜色、字体、图形、用法和示例”等内容。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 4: 设计规范

有了设计风格和设计规范并不一定就能让使用这个设计系统的产品建立统一的品牌调性,只有当设计系统具有了一定辨识性的设计风格,并在设计规范指导下进行长期的设计产出后,才能够让使用这个设计系统的产品形成统一的品牌调性。

3. 设计组件和模式

对于设计系统里,我们最熟悉和常用的应该就是设计组件了,也就是 UI kits,包括输入框、按钮、文字、链接、下拉菜单等等。是组成界面的最小元素和这些元素的常用集合体。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 5: UI kits

设计模式,比元素更复杂一些,是完成任务所使用的一些基础的、常用的交互方式,是可以解决问题的小型设计方案。比如 Material design 里的 Confirmation and acknowledgement,它提供的就是为机器在执行操作之前向用户确认的一系列设计方案。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 6: 设计模式

简单点来说,设计组件就是一些元素,主要给设计师用的,设计模式就是一些交互方式,主要给研发工程师看的。由于两者很相似,如今更多的会把两者合起来看。

2013 年,前端工程师 Brad Forst 将原子理论运用在界面设计中,形成一套设计系统后,设计组件得到进一步扩展,可以形成比原来最初出现设计模式这个概念时更高层次的集合体,例如,大到几个完整的页面及其包含的交互方式,也可以成为某个设计系统的其中一个组件。

当然,由于各个产品的需求、场景和定位等不同,越大的合成组件将会越复杂。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 7: 原子设计理论

4. 内容资产

在某些设计系统的定义里,可能会把内容资产作为设计规范的一部分,但我这里想强调的是其作为资源的一部分。

由于设计系统是一个有机的整体,在它不断的服务于各产品线的同时,也一定会需要不断填充不同的内容,比如应用里使用的图标、字体、插画、模型等等,这些内容积累下来,也应该成为这个设计系统的一部分,如果有其他的应用或产品需要,就可以直接取用,从而提高整体的工作效率。

内容资产比较常见的有图标库、字体库和音效库,分别提供了多种图标、多种字体和多种音效可以给不同的产品或应用使用。随着插画风格、三维风格的留下,未来必然还会出现隶属于某个设计系统的插画库、模型库,以及在产品里经常使用的文案集合。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 8: 内容资产

5. 工具、流程

这两块主要是针对设计系统适用的具体环境,在协同性要求下我认为需要纳入设计系统的内容。简单的举例来说,就是如果使用蓝湖做自动化标注,就团队统一使用蓝湖,而不是有的人使用蓝湖,有的人使用摹客。

6. 设计语言和设计方针(guidelines)

还有两个经常提到,但我刚才画的设计系统图示里没有提到的概念。

设计语言:语言,是一个能够达到相互交流的符号系统。人类学家索绪尔认为,语言能反映出多变言语活动背后的稳定规律。所以,我认为这里的设计语言,应该等同于设计规范,是设计规范另一种表述。

设计指导方针(Design Guidelines):按照中文翻译理解,我认为它是说明、介绍设计系的文档,没有包含在设计系统内。

常见问题

最后,设计系统的词云图里出现的玄学、理论化、落灰、空中楼阁……这些都是创建设计系统时很容易遇到的一些问题,尤其是实用性最高的设计组件,更是首当其冲。之前我组织我们团队的设计师做复盘性质的workshop,单就设计系统的设计组件部分,大家就提出了20多条问题。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 9: 设计组件复盘 workshop

综合来说,设计系统常见的问题有三类:

1. 定义性问题

设计系统从大的框架性定义到具体设计组件的定义都不是件一蹴而就的事情,它从 0 开始,每一次的更新和迭代,对于当前的团队来说都需要是既关键又有效的。关键是指设计系统当前定义下来的内容是后面的产品线经常性使用的,有效是指这些定义确定下来的内容是可以使用现有的资源去完成的,即以现有团队的能力、时间和设备是可以完成并达成其效果的。

2. 使用性问题

目录不清晰,文档说明不全,包含资源不完整,这些都是使用时的问题。如果把设计系统看作一个产品,让用户(设计师或研发人员)觉得好用,才是它不会被束之高阁的解决方法。

3. 协作性问题

不知道有更新,收不到反馈,不了解使用者的情况……协作性的问题催生了市面上诸如蓝湖、摹客、墨刀、Codesign以及很多设计软件的云服务功能等。

虽然现在市面上有非常多优秀的设计系统可以参考,但正如在存在原因中提到的,由于它是为了帮助我们自己所在的团队更有效率的工作,终究还是需要靠自己基于实际情况去做变化。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设   作者:林影落 



分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



深度解析设计系统

雪涛

你觉得设计系统重要吗?那目前手里的设计系统是在灵活运用?还是落灰、摆设?你对设计系统理解有多深?它在你的设计中有多大的用处?节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范?那怎么避免设计系统带来了统一和便利,但同时失去了变化和新鲜感?





设计系统是今年来热门的话题之一,想要带来良好的用户体验,设计系统就是其中重要的一环,那它和设计规范、设计模式、设计语言、设计原则有什么关系?


设计系统

设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档,在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色,文案,字体等等),所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的,是需要维护与改进的。


设计模式

设计模式是一种经常性,可重复使用的解决方案,可用于解决设计问题,我们经常会说解决整个方案我们要运用什么样的设计模式。


设计语言

设计语言是把设计作为一种“沟通的方式”,用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。


设计原则

设计原则可以理解为设计语言中的语法,是构建设计语言系统的起点,用于传达品牌主张或设计理念,它将指引业务设计执行的方向。


比如Airbnb的设计原则可以简单归纳为几点:

设计规范

设计规范对于设计师来说并不陌生,日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准,针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率,同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。


那是不是只要制作一套设计系统,在团队进行扩散就可以了?那平台的统一性就解决了?


我曾经加入一个设计团队,看到平台风格不统一,当时很自豪很坚定的制定了一套平台设计规范,从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系,还有交互方面。当时一心想着有这个规范宝典在手,平台统一性指日可待,没想到这个规范就成了我自己的规范,仅仅是我在自嗨。

为什么已经建立设计规范了,还是没能解决平台统一的问题?这里延伸出另一个问题,为什么其他设计成员不用?协作不起来?是它不够好?我严格按照标准来,为什么推不起来?


那要追溯到设计体系的目的是什么?它的意义何在?

1-建立统一的设计文化体系

2-保证多团队成员共同参与的项目视觉一致性

3-提升品牌调性

4-节省与研发人员的沟通成本

5-将元素组件化,提升设计师和程序员的工作效率

6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。

7-在用户层方面,对某产品的体验一致性得到落实

8-减少设计出错率

……


整体可以归纳为

1-对内统一,对外区分

2-管理与协作变得方便

3-建立设计文化体系,建立品牌感

4-减少、优化错误出现


对内统一,对外区分

规范定义的基础是围绕某种风格或者设计文化。对内统一,一个品牌的设计风格,是要有别于同类竞品的,比如阿里云、腾讯云,他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分,一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站,各个页面的设计差异明显,像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。


undefined



管理与协作变得方便


for Designer:

多个设计成员协同一个产品,迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队,如果没有统一设计规范,那网站会变成什么样子。


for Developer:

在UI还原中,设计需要经常与前端进行沟通“这里这里这样做,那里那里这样做”,对于每一块的设计,前端都会询问你,这样大大增加了沟通的成本,把时间花在了无效的事情上。

设计规范统一后,减少了无效沟通,可以更专注创新方向,比如:要改变预先设定的一个辅助色,无论是设计还是开发,修改组件的颜色,全局使用到这个组件的地方都会改动,大大节省了设计时间。


建立设计文化体系,突出品牌感

做品牌的时候需要制定一整套VI规范手册,那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式,更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐,看到界面都可以立马识别出这是哪个app。



undefined


你能分出哪个是网易云播放界面,哪个是QQ音乐播放界面吗?


减少、优化错误出现

设计经常碰到设计完后需要修改一个点,然后就要找出设计稿中所有相同的地方进行修改,这样很容易漏,统一规范后只需要修改组件即可。尽可能的避免错误的出现。


设计规范的意义这么强大,对网站及品牌有至关重要的作用,那为什么还会出现没有应用起来的情况呢?

很多设计师会说:“设计不就应该是变化多端的吗?就是要表现创新力呀?制定了设计规范是不是就失去了变化和新鲜感?那设计还有什么意义?开发都可以做设计的事情了。”


这里就要看设计规范理解的深度—设计规范是分层次的平台规范归根结底是为了确保产品的易用性,是为了减少用户的学习成本


对无法拆分的底层基础元素做严格规定

底层基础元素也可以说是全局样式,比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素,给用户一种统一的视觉形象,在跨界面、跨端、跨系统间有熟悉感,从而潜移默化地进行品牌的渗透。



增强界面设计的灵活性和可维护性

对组合自由度较低的基础组件做精简的样式变化限定,对组合自由度较高的复合组件减少过于局限的限定条件,考虑各种拓展的可能性。组件在制定过程中要考虑多种状态,多种可能。



设计规范随着业务的发展或技术的变革终究是会过时的,是需要迭代的。

设计规范是需要迭代的,而不是我只要制作出来就放那了,就像女生买衣服,去年的衣服已经配不上今年的我,嘻嘻

~~希望我每天都有新衣服穿,做梦中~


对设计体系的误解

设计体系最大的重要性毋庸置疑就是规范节省人力,设计师可以更多的时间去发挥创造性。


误解1-设计系统限制了设计师的创造力

很多设计师觉得统一了规范,那我的创造性从哪发挥,界面都长的差不多。在设计中,设计目的是解决商业或用户的问题,并不仅仅是为了有创意而引入新的样式或交互方式。


有了设计体系,统一了整体品牌风格,不用把精力花费在比如调整间距、对齐元素等琐碎的事情上,更多的回去关注更全局的设计策略。


误解2-设计系统只关乎设计,可由设计师独立完成

它仅仅是设计软件上可复用的组件,所以可由设计师独立完成,这种想法是错误的,是需要来自不同角色支持和参与的,这里包括前端、品牌、动态设计、 用户研究等。


误解3-设计系统是一劳永逸的

有时候会想只要完成了规范就大功告成了,其实不然,对待设计规范就像对待产品一样,是需要维护和改进的,包括两个方面:一种是对内部使用的开发以及同事,一种是对用户的,应该定期收集用户以及同事的反馈,确保及时更新迭代。


误解4-设计系统的重要性

1-提高设计开发效率,最显而易见的好处就是,组件库的可复用性。

比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。

2-确保设计一致性,为用户提供连贯一致的用户体验,设计的一致性让用户能缩短的学习使用产品的周期,让他们能够预见他们的操作所带来的改变。

网站统一的视觉规范、交互体验,会让用户产生一种掌控感。

3-设计系统促进了公司内部的合作和交流,一个成功的设计系统是需要跨功能团队参与,设计系统因此促进了公司内部不同职位的合作和交流,这种文化的建立也会帮助公司更有效地推出新的产品或服务。


那我们要如何去执行呢?

已经了解了规范的目的/意义,那该怎么去着手呢?


  • 对于设计规范的意义要同步给设计人员,提高认知,这是一件提率的规范,规范必须落地。

在制定规范前期,不应该是一个人规定这个规范,设计团队的成员应积极参与,前期先把规范的基调定好,人人都参与进来了,规范也就能更好的运营,当时我就是一个人定了规范,只是单纯把规范发给其他设计人员,他们没有参与,自然不会使用规范,对里面的设计元素没有加深理解。


主导人

这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力,这样能把纰漏降到。

undefined


  • 应用规范里的界面、交互规范必须得遵循

大家一般说的设计规范是界面的视觉规范,从UI的定义,User Interface—用户界面,用户与界面之间的交互关系,可以归纳规范其实可以包含两大类,一类是视觉规范,一类是交互规范。


视觉规范可以给用户传达统一的品牌形象,确保视觉一致性。后期的设计元素须复合规范的原则。


交互规范可以减少用户的学习成本,让用户有归属感。交互规范在制定的过程中,需要写好交互规则与条件,不然后期维护会混乱。像盖房子一样,地基都没打稳的话,整个楼都是偏的。


那在使用规范时,一定要遵循规范里的要求进行应用,否则会乱套,不仅起不到统一的品牌风格,反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。



设计规范的节点

节点和公司的进度搭边,看当前的产品是应该先独立风格还是先统一基础规范。


1-固定的设计风格规范,比如:google的“扁平”,微软的“磁贴”,可以全局使用,并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队,定好基调,不会走偏。


2-不断优化的设计规范,根据公司的节奏,有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后,进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。



建立规范


·制作原理—利用粒子构成的原理与三维解构

利用粒子构成的原理与三维解构,一个组件被科学的三维解析后由粒子再构成,理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变,高度灵活


·具体过程

建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。


·元素是工具库的必要部分

并不是每个时刻都能够直接使用完整的组件,元素是我们工具库必不可少的部分,它可以更大的方便你修改组件,再造组件以及特殊的排版,方便拖拉拽。


·组件的命名规范化

规范组件命名,方便查找、方便协作。


协作

一键导出/同步组件到Sketch模板。

标注方面,目前我们团队使用的是蓝湖私有化。



那是不是所有的公司都需要创建设计系统?

一般情况下,公司有不同的产品线,且都需要长期的开发与迭代。

公司中,越来越多的设计师加入,设计风格需要统一。


那建立一套设计体系会面临什么挑战?

设计体系里面包含了设计语言、设计规范,需要与前端、品牌、动态设计、 用户研究等沟通,还是需要迭代优化的,这是非常繁琐耗时的项目,初期会非常的艰难,当设计师开始做组件时,也是非常耗时的工作,需要考虑不同场景下的使用情况以及设计的延展性,都需要投入大量的设计人力。


聊了这么多,大家对设计系统有了一定了解,建立好设计系统可以事半功倍,以此提升效率才能提升UED价值。


文章来源:站酷   作者:玛丽的设计笔记

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




深度解析设计系统

雪涛

你觉得设计系统重要吗?你了解设计系统吗?让我们一起来深度解析下设计系统,预计阅读时间为15分钟

你觉得设计系统重要吗?那目前手里的设计系统是在灵活运用?还是落灰、摆设?你对设计系统理解有多深?它在你的设计中有多大的用处?节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范?那怎么避免设计系统带来了统一和便利,但同时失去了变化和新鲜感?


设计系统是今年来热门的话题之一,想要带来良好的用户体验,设计系统就是其中重要的一环,那它和设计规范、设计模式、设计语言、设计原则有什么关系?


设计系统

设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档,在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色,文案,字体等等),所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的,是需要维护与改进的。


设计模式

设计模式是一种经常性,可重复使用的解决方案,可用于解决设计问题,我们经常会说解决整个方案我们要运用什么样的设计模式。


设计语言

设计语言是把设计作为一种“沟通的方式”,用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。


设计原则

设计原则可以理解为设计语言中的语法,是构建设计语言系统的起点,用于传达品牌主张或设计理念,它将指引业务设计执行的方向。


比如Airbnb的设计原则可以简单归纳为几点:

设计规范

设计规范对于设计师来说并不陌生,日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准,针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率,同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。


那是不是只要制作一套设计系统,在团队进行扩散就可以了?那平台的统一性就解决了?


我曾经加入一个设计团队,看到平台风格不统一,当时很自豪很坚定的制定了一套平台设计规范,从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系,还有交互方面。当时一心想着有这个规范宝典在手,平台统一性指日可待,没想到这个规范就成了我自己的规范,仅仅是我在自嗨。

为什么已经建立设计规范了,还是没能解决平台统一的问题?这里延伸出另一个问题,为什么其他设计成员不用?协作不起来?是它不够好?我严格按照标准来,为什么推不起来?


那要追溯到设计体系的目的是什么?它的意义何在?

1-建立统一的设计文化体系

2-保证多团队成员共同参与的项目视觉一致性

3-提升品牌调性

4-节省与研发人员的沟通成本

5-将元素组件化,提升设计师和程序员的工作效率

6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。

7-在用户层方面,对某产品的体验一致性得到落实

8-减少设计出错率

……


整体可以归纳为

1-对内统一,对外区分

2-管理与协作变得方便

3-建立设计文化体系,建立品牌感

4-减少、优化错误出现


对内统一,对外区分

规范定义的基础是围绕某种风格或者设计文化。对内统一,一个品牌的设计风格,是要有别于同类竞品的,比如阿里云、腾讯云,他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分,一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站,各个页面的设计差异明显,像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。


undefined



管理与协作变得方便


for Designer:

多个设计成员协同一个产品,迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队,如果没有统一设计规范,那网站会变成什么样子。


for Developer:

在UI还原中,设计需要经常与前端进行沟通“这里这里这样做,那里那里这样做”,对于每一块的设计,前端都会询问你,这样大大增加了沟通的成本,把时间花在了无效的事情上。

设计规范统一后,减少了无效沟通,可以更专注创新方向,比如:要改变预先设定的一个辅助色,无论是设计还是开发,修改组件的颜色,全局使用到这个组件的地方都会改动,大大节省了设计时间。


建立设计文化体系,突出品牌感

做品牌的时候需要制定一整套VI规范手册,那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式,更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐,看到界面都可以立马识别出这是哪个app。



undefined


你能分出哪个是网易云播放界面,哪个是QQ音乐播放界面吗?


减少、优化错误出现

设计经常碰到设计完后需要修改一个点,然后就要找出设计稿中所有相同的地方进行修改,这样很容易漏,统一规范后只需要修改组件即可。尽可能的避免错误的出现。


设计规范的意义这么强大,对网站及品牌有至关重要的作用,那为什么还会出现没有应用起来的情况呢?

很多设计师会说:“设计不就应该是变化多端的吗?就是要表现创新力呀?制定了设计规范是不是就失去了变化和新鲜感?那设计还有什么意义?开发都可以做设计的事情了。”


这里就要看设计规范理解的深度—设计规范是分层次的平台规范归根结底是为了确保产品的易用性,是为了减少用户的学习成本


对无法拆分的底层基础元素做严格规定

底层基础元素也可以说是全局样式,比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素,给用户一种统一的视觉形象,在跨界面、跨端、跨系统间有熟悉感,从而潜移默化地进行品牌的渗透。



增强界面设计的灵活性和可维护性

对组合自由度较低的基础组件做精简的样式变化限定,对组合自由度较高的复合组件减少过于局限的限定条件,考虑各种拓展的可能性。组件在制定过程中要考虑多种状态,多种可能。



设计规范随着业务的发展或技术的变革终究是会过时的,是需要迭代的。

设计规范是需要迭代的,而不是我只要制作出来就放那了,就像女生买衣服,去年的衣服已经配不上今年的我,嘻嘻

~~希望我每天都有新衣服穿,做梦中~


对设计体系的误解

设计体系最大的重要性毋庸置疑就是规范节省人力,设计师可以更多的时间去发挥创造性。


误解1-设计系统限制了设计师的创造力

很多设计师觉得统一了规范,那我的创造性从哪发挥,界面都长的差不多。在设计中,设计目的是解决商业或用户的问题,并不仅仅是为了有创意而引入新的样式或交互方式。


有了设计体系,统一了整体品牌风格,不用把精力花费在比如调整间距、对齐元素等琐碎的事情上,更多的回去关注更全局的设计策略。


误解2-设计系统只关乎设计,可由设计师独立完成

它仅仅是设计软件上可复用的组件,所以可由设计师独立完成,这种想法是错误的,是需要来自不同角色支持和参与的,这里包括前端、品牌、动态设计、 用户研究等。


误解3-设计系统是一劳永逸的

有时候会想只要完成了规范就大功告成了,其实不然,对待设计规范就像对待产品一样,是需要维护和改进的,包括两个方面:一种是对内部使用的开发以及同事,一种是对用户的,应该定期收集用户以及同事的反馈,确保及时更新迭代。


误解4-设计系统的重要性

1-提高设计开发效率,最显而易见的好处就是,组件库的可复用性。

比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。

2-确保设计一致性,为用户提供连贯一致的用户体验,设计的一致性让用户能缩短的学习使用产品的周期,让他们能够预见他们的操作所带来的改变。

网站统一的视觉规范、交互体验,会让用户产生一种掌控感。

3-设计系统促进了公司内部的合作和交流,一个成功的设计系统是需要跨功能团队参与,设计系统因此促进了公司内部不同职位的合作和交流,这种文化的建立也会帮助公司更有效地推出新的产品或服务。


那我们要如何去执行呢?

已经了解了规范的目的/意义,那该怎么去着手呢?


  • 对于设计规范的意义要同步给设计人员,提高认知,这是一件提率的规范,规范必须落地。

在制定规范前期,不应该是一个人规定这个规范,设计团队的成员应积极参与,前期先把规范的基调定好,人人都参与进来了,规范也就能更好的运营,当时我就是一个人定了规范,只是单纯把规范发给其他设计人员,他们没有参与,自然不会使用规范,对里面的设计元素没有加深理解。


主导人

这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力,这样能把纰漏降到。

undefined


  • 应用规范里的界面、交互规范必须得遵循

大家一般说的设计规范是界面的视觉规范,从UI的定义,User Interface—用户界面,用户与界面之间的交互关系,可以归纳规范其实可以包含两大类,一类是视觉规范,一类是交互规范。


视觉规范可以给用户传达统一的品牌形象,确保视觉一致性。后期的设计元素须复合规范的原则。


交互规范可以减少用户的学习成本,让用户有归属感。交互规范在制定的过程中,需要写好交互规则与条件,不然后期维护会混乱。像盖房子一样,地基都没打稳的话,整个楼都是偏的。


那在使用规范时,一定要遵循规范里的要求进行应用,否则会乱套,不仅起不到统一的品牌风格,反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。



设计规范的节点

节点和公司的进度搭边,看当前的产品是应该先独立风格还是先统一基础规范。


1-固定的设计风格规范,比如:google的“扁平”,微软的“磁贴”,可以全局使用,并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队,定好基调,不会走偏。


2-不断优化的设计规范,根据公司的节奏,有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后,进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。



建立规范


·制作原理—利用粒子构成的原理与三维解构

利用粒子构成的原理与三维解构,一个组件被科学的三维解析后由粒子再构成,理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变,高度灵活


·具体过程

建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。


·元素是工具库的必要部分

并不是每个时刻都能够直接使用完整的组件,元素是我们工具库必不可少的部分,它可以更大的方便你修改组件,再造组件以及特殊的排版,方便拖拉拽。


·组件的命名规范化

规范组件命名,方便查找、方便协作。


协作

一键导出/同步组件到Sketch模板。

标注方面,目前我们团队使用的是蓝湖私有化。



那是不是所有的公司都需要创建设计系统?

一般情况下,公司有不同的产品线,且都需要长期的开发与迭代。

公司中,越来越多的设计师加入,设计风格需要统一。


那建立一套设计体系会面临什么挑战?

设计体系里面包含了设计语言、设计规范,需要与前端、品牌、动态设计、 用户研究等沟通,还是需要迭代优化的,这是非常繁琐耗时的项目,初期会非常的艰难,当设计师开始做组件时,也是非常耗时的工作,需要考虑不同场景下的使用情况以及设计的延展性,都需要投入大量的设计人力。


文章来源:站酷   作者:玛丽的设计笔记

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档