馆陶做网站:跨平台产品设计系统的构建

2019.06.11 馆陶做网站

183

主要目的是建立一个设计系统是一个高质量和及时发布的产品,任何改变都需要尽可能少的时间.设计应促进业务兴趣,并具有足够的灵活性,以允许剧烈的变化。然而,有几个问题,可以降低工作效率的产品。

馆陶做网站设计师通常不是技术专家,这意味着他们的过程构建方法往往更有艺术性。这导致结构不良的项目、随机层命名等不便之处。在这样的项目中,第一次打开它的人很快就会迷路(这种情况在团队工作时经常发生)。

这个问题的根源是什么?这可能是因为在创作过程中,我们忘记了结构。此外,看看AdobeIlluStrator-它在最后一分钟就会显示层(更不用说对象和组的名称了)。其他软件也是如此。最后,我们通常会得到这样的东西:

馆陶做网站
不是很有帮助,是吗?

设计系统真的有必要吗?

设计系统是一种更加技术性和结构化的产品开发方法。想象一下,开发一个产品,在最后阶段只看到它的架构。糟透了,不是吗?没有可伸缩性,复杂的支持和不断的错误校正。在这样一个项目中,唯一不感到困惑的人就是开发它的人。这使得团队合作几乎不可能。

仅仅用语言或例子来解释这个项目是不够的,因为这是一次性的帮助。设计人员要真正构建产品,不仅要绘制应用程序,还必须具备某种技术背景。然后,他们将能够在他们的项目工作中使用这些知识。你可能会认为我正试图把一个专注的专家变成一个多元化的工具。然而,情况并非如此。

问题是,知道编码和自己编码是另一回事。即使你不需要自己去做,你也应该知道。对于设计人员来说,编程语言和技术的基本知识不应该是可选的。采用一种更技术性的方法来处理您的项目会带来以下几个优点:

  • 对过程有深刻的理解。

    了解您正在实现的系统有助于做出快速和正确的决策。因此,在解决任务时,您有几个选项可供选择,可以预测实现这样一个功能需要多长时间,以及在所述系统的框架内实现该功能有多困难。你可以提高你的部门的性能和产品的开发速度;
  • 加速团队合作。

    一个统一的设计系统是团队合作的必要条件。这包括所有项目的标准可读结构和修订后的自动布局更新;
  • 与开发人员共同使用的语言。

    “这是不可能的,”他们说。现在你可以明白一切都是可能的,这只是时间和可行性的问题。当然,除非这涉及到我们设计者在实施之前已经知道的系统的局限性;
  • 独立。

    如果你愿意,你可以自给自足。这是一个必要的问题,但事实上,它是可能的,从零开始,由你自己的手,可以相当激励;
  • 职业奖金。

    更深入地理解你的职业,从而在你的职业生涯中迈出新的进化一步。这给了你竞争优势,增加了你的薪水。

如何根据您的产品规模创建一个设计系统?

馆陶做网站设计是一个动态的环境。从一开始就设置必要的样式和对象集有助于保持必要的一致性。因此,定义了设计的概念,并且已经有了特定的布局,将其转化为结构化的形式。不要忘记故意给所有元素命名,这样从名称本身就可以立即清楚它是什么类型的元素,以及在什么条件下。

是的,长的名字看起来很可怕,但是这会让你的同事们理解它们。

馆陶做网站
A代表建筑

请注意,有些元素可以在项目后面重用。让我们仔细看看他们。

经常复制一组元素是否有意义?扣子反对?特别是考虑到这个元素可能有不同的状态?或者队友可能用这个按钮和另一个影子?

PS:如果您在一个团队中工作,建议创建一个共享符号库文件。这样,团队将始终使用最新的元素集。你可以在草图应用程序虽然其他选项也提供共享库符号。

因此,通过对所有元素进行排序并指定将在项目中重复使用的元素,我们得到了这个迷你符号库:

馆陶做网站
项目中经常使用的元素列表。

为了举例说明,我们将使用我们的跨平台电子签名应用程序。KeepSolid符号..它可用于5个平台,因此,如扣子, 输入等必须保持在操作系统样式内。但是,也有一些元素不属于任何特定的系统,必须在任何地方都是相同的,例如注释的外观。这些元素在所有平台上都应该是相同的,因此它们被放置在一个单独的全局库中。

Universal look of annotations for all platforms
所有平台注释的通用外观

在一开始投入了一些时间之后,你可以想出一个风格指南(见下文)。从现在开始,您只需遵循它,而不必考虑是否对象应用了正确的属性。

Primary Style Guides for KeepSolid Sign Windows version
KeepSolid标志Windows版本的主样式指南

一旦我们完成了KeepSolid标志的Windows版本,我们就可以开始为不同的平台(如Web浏览器)实现设计。应用程序的用户流应该是相同的,因此我们可以现有的元素库为基础,通过在新平台框架内进行小的重新设计,足够快地为Web版本准备布局。

馆陶做网站
KeepSolid签名Windows版本

KeepSolid Sign Web version
KeepSolid签名Web版本

如您所见,应用程序在不同的平台上看起来几乎相同,适合每个平台的样式。唯一的例外是平台的系统元素。

因此,馆陶做网站通过在开发初期构建这样一个设计系统,我们快速开发了Web平台KeepSolid应用程序的设计,保持了熟悉的用户流程。

接下来呢?使用这种方法,我们为MacOS上的应用程序创建了一个新的外观,在该应用程序中,用户行为与其他平台相同。如果用户改变了平台,我们就不需要再教育他们如何使用这个应用程序了。

唯一的问题是,我想强调的是,在iOS或Android等移动平台上,用户的行为完全不同。对于面向触摸的界面和相对较小的屏幕,应该简化(可能的话,加速)用户流,但同时提供应用程序的所有可能性。但这是一个完全不同的故事:)

一个设计系统带来了哪些工作流程优势?

  • 任何更改都可以在尽可能短的时间内进行。设计变得非常灵活,并迅速响应业务需求;
  • 布局更新是自动的,您只需检查结果;
  • 所有的样式指南都可以在一个单独的文件中找到。开发者肯定会感激的;
  • 实现新平台应用程序的速度要快得多;
  • 使用Git的版本控制(可选);
  • 在工作中自律。

这一切都归功于正确地组织了这个项目!

馆陶做网站在我们的例子中提到的方面只是一个大型设计系统的一部分。还有更重要的元素也应该在产品中进行描述,而不是专注于特定的操作系统或平台。一个完善的设计系统还必须容纳品牌,颜色,字体,使用场景,元素和组件库.这样,在团队中开发产品时,您可以快速向同事解释产品应该如何工作以及他们应该遵守哪些规则。

创建、实现和扩展这样的设计系统并不是一件容易的事情。但是,如果您在一开始就完成了这一阶段的工作,那么以后扩展应用程序的功能将更容易、更快。该产品的设计将能够更快地满足企业和市场的要求,团队合作将变得更加有效!在产品的初始阶段预先构建的体系结构是实现设计系统的主要目标。

我希望这个过程构建的方法会对你有帮助,你也会欣然接受它。毕竟,在初始阶段花更多的时间并为项目的开发奠定基础要比事后再做大量工作要好得多。


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP