Design system .italia

Design System .italia 之旅：面向数字公共服务的开放设计

三代指南、工具和流程，旨在提升意大利公共部门的无障碍性、可用性和质量……
首页 » 博客 » Design System .italia 之旅：面向数字公共服务的开放设计

三代指南、工具和流程，旨在提升意大利公共管理部门数字服务和网站的无障碍性、可用性和质量。

简介

在这个数字化转型的时代，简单且高质量的用户体验是所有用户的权利。意大利公共管理部门 (PA) 的网站和数字服务必须以无障碍性为核心构建。这意味着确保每个人都可以使用它们，无论其背景、技术知识或残疾（无论是暂时的还是永久的）。

Design System .italia 的创建旨在帮助意大利公共管理部门 (PA) 及其 IT 供应商实现这一目标。它直接回应了 2022 年“公共管理部门网站和数字服务设计指南”的要求 4.5。该要求规定了在风格和用户体验上保持一致的界面，并优先使用通过 Designers Italia 项目网站 提供的组件。

Design System .italia 是意大利国家的开源设计系统，旨在为创建高质量的公共数字界面和体验提供指导和工具。

Design System .italia 是如何诞生的？

设计系统世代：为设计师 […] 和/或开发者 […] 提供稳定且充足的核心资源库，包括资产、文档、工具和实践 (Curtis, 2024) (Curtis, 2024)

以“设计系统世代”的定义作为参考——为设计师和开发者发布一个稳定且充足的资源库，包括文档、工具和实践——意大利的设计格局从 2015 年至今经历了三个不同的阶段。

目录

  • 设计系统黎明：Alpha 版本 (2015–2017)
  • 巩固与发展：第二代 (2017–2021)
  • .italia 的创新：第三代 (2021–至今)
  • 未来展望

    资源
  • Design System .italia 资源时间表
  • Design System .italia 历史资料来源

设计系统黎明：Alpha 版本 (2015–2017)

建立一致性：Alpha 版本还不是一个完整的设计系统，但它标志着首次尝试统一数千个意大利公共管理部门网站的视觉形象、可用性和用户体验。这一阶段强调了对公共服务数字设计的负责任和整体方法，这在当时是一个至关重要的转变。

作为意大利政府发起并由 AGID (Agenzia per l’Italia Digitale – 意大利数字机构) 策划的“Italia Login”倡议的一部分，第一个“公共管理部门网站设计指南” (2015) 由一个大型专家指导委员会起草。Alpha 版本在 design.italia.it 上发布，引入了数字意大利精简视觉形象的第一个构建模块。这些核心元素至今仍在使用，包括机构颜色 Blu Italia (#0066cc)、Bootstrap 网格系统和开源字体 Titillium Web。此外，其起草过程的开放性和参与性标志着意大利公共管理部门开始在 GitHub 平台上使用存储库进行讨论和协作。

For a design of public administration services. The site of the first Design Guidelines.
设计指南 Alpha 版本 (2015)

“由于技术系统将近 16 年未更新，从数字角度来看，这已经是一个地质年代，因此立即明确的是，像过去那样仅在界面层面更新网站是不可能继续下去的。” (Sinni-Ruggeri, 2022) (Sinni-Ruggeri, 2022)

2015 年，政府采取大胆举措，重新设计 governo.it 网站，使其成为该倡议的第一个试点项目。这不仅仅是界面刷新，而是对过时的 彻底回应，引发了意大利中央和地方政府网站的一系列类似转型。

2016 年，该项目的治理权移交给了数字转型团队，该团队是当时意大利数字议程实施特别专员的下属机构。

巩固与发展：第二代 (2017–2021)

在 AGID 的支持下，数字转型团队将 Designers Italia 和 Developers Italia 建立为充满活力的社区和项目。2017 年，随着公共管理部门网站设计指南的第一个稳定版本的发布，取得了重大进展。这不仅仅是一个小更新；它标志着一次全面的修订，将指南扩展到涵盖整个数字服务设计流程。从 2018.1 版本开始，还整合了用于可用性测试的“eGlu”协议。Designers Italia 的指南和工具巩固了其作为意大利公共管理部门官方“设计系统”的角色。

The design of the interface. The 2020.1 version of the Design Guidelines.
设计指南 v2020.1

数字技术既不分左右，也不是皇家马德里或巴塞罗那：好的数字技术是透明、高效、包容、反腐败、更好的医疗保健和教育、就业，最重要的是未来。(Attias, 2018) (Attias, 2018)

定义了许多新的工具（例如，用于托管指南的 Docs Italia）和流程，例如在 Forum Italia 上进行公众咨询以发布新的技术指南。其中， “公共管理部门软件采购和重用指南” （公共管理部门软件采购和重用指南）至今仍是支持《数字管理法典》(CAD) 第 68 条和第 69 条的基本参考，该法典强制要求意大利公共管理部门以开放许可发布他们开发或委托开发的软件。

在此期间，designers.italia.it 网站（意大利语）进行了信息架构升级。designers.italia.it 网站升级将其转变为一个强大的平台，用于展示支持设计指南的理想五阶段设计流程。网站升级还得到了新工具发布的进一步支持：用于简化原型设计和设计的 UI Kit，以及用于高效界面开发的框架 Bootstrap Italia。这一代还见证了意大利学校和地方政府的第一个完整的、可重用的网站模板的发布。这些模板涵盖了从用户研究到服务设计、内容规划、使用场景和界面开发的整个设计流程。每个步骤都利用并扩展了 Designers Italia 工具集，从而在意大利公共机构中推广了一致且高效的设计实践。社区也开始指导其他开放工具的生产，例如 React 开发工具包。

We design digital public services to solve citizens' problems and restore good humour. The Designers Italia website, circa 2020.
2020 年底的 designers.italia.it 网站
UI Kit v2 preview, buttons and mockups.
UI Kit v2，预览

所有意大利数字服务的统一访问点的概念，即使在第一代中也已存在，随着 IO 应用程序 (2020) 的发布开始具体化，该应用程序由 PagoPA 领导，并在随后的几年中荣获第 17 届 Compasso d’Oro 奖 (2022)。

2019 年，政府成立了 数字转型部，该部门继承了 Designers Italia 项目的治理权。

.italia 的创新：第三代 (2021–至今)

2021 年，意大利数字转型部改造了 innovazione.gov.it，他们的数字家园，重点关注可用性、无障碍性和隐私。这标志着现代化政府数字基础设施并使其更易于访问的新一轮努力的开始。该项目超越了技术范畴；它还关乎为意大利国家设计系统建立清晰的愿景和管理系统，确保无障碍性融入他们创建的一切事物中。

为了指导这个雄心勃勃的项目，2022 年发布了两项关键资源：概述数字公共服务质量标准的指南和 AGID 的 “公共管理部门网站和数字服务设计指南”。法律规定，所有政府机构 (PA) 都必须遵守“公共管理部门网站和数字服务设计指南”。Designers Italia 提供工具包和一套规则来支持他们履行这一义务。新版本的 UI Kit Italia、Bootstrap Italia（更新至 Bootstrap 5）和 Design Tokens Italia 与新的 Designers Italia 网站和服务模型的发布完美契合，所有这些都由 PNRR（意大利国家恢复和复原计划）推动，旨在通过名为 M1C1.1.4.1 “公共服务中的公民体验” 的倡议覆盖约 16,000 所意大利学校和地方政府。

Design Guidelines. The standard you have to comply with in any provision of digital sites and services for the public administration. From the standards and references section of the Designers Italia website.
设计指南 (设计指南，2022 年)，根据 CAD 第 53 条发布

2023 年春季，经过代号为 “Prossima” (Next) 的 Beta 测试阶段后，新的 Designers Italia 网站发布，内容和技术堆栈都进行了更新，“使知识和工具可用于创建意大利公共管理部门的数字服务”。该网站仅提供意大利语版本，展示了意大利国家设计系统的应用。该网站通过严格的流程开发——从用户研究到真实世界的验证——是设计系统实际应用的示例。所有相关文档都可以在专门的 /design-system/ 部分找到。

Participate in the digital transformation of PA. The homepage of the Designers Italia website in desktop and mobile formats.
新的 designers.italia.it 网站 (2023)

该项目还采用了 语义版本控制 和详细的变更日志。文档 成为真理之源，整体呈现组件：说明、设计和代码。通过这个开发过程，我们创建了您今天看到的 Design System .italia。这是一个全面的意大利公共设计系统，提供从核心原则和操作指南到 UX 写作基础知识 和用于构建原型和最终产品的组件的所有内容。

Discover and use the Italy's design system. The dedicated section on the Designers Italia website.
Design system .italia：文档
Accordion. An Accordion is a list of headings that can expand to show hidden content, useful for optimising page space and creating links to related content. From the documentation of .italy available from the Designers Italia site.
Design System .italia：组件详情

该项目完全坚持开源原则。这意味着通过透明的流程和积极的社区参与不断改进。一种新的 贡献模式 允许每个人参与。公共项目管理看板 可以清晰地了解报告、优先级和正在进行的工作，从而促进讨论和协作。

Public board with reports and activities from the repositories of the design system .italy
Design System .italia：公共项目管理看板

这一代将意大利数字无障碍性的愿景从合规性转变为机遇，将“设计中的无障碍性” 融入国家设计系统的每个流程和资源中。无障碍性不再是一种理想或仅仅是监管回应；它融入了设计系统的结构中：“数字界面的每个设计决策都是关于谁可以参与的选择。我们的选择——从复杂性到无障碍功能——决定了某人是否可以根据其背景、技能甚至暂时性限制来使用该服务。”

2024 年的前几个月对于 Design System 来说是忙碌的。身份 基础已经巩固，为未来的努力奠定了坚实的基础。新的 Titillium Sans Pro 字体实验阶段，在 排版 基础中详细介绍，目前正在进行中。与社区的合作产生了 Angular 和 React 的新开发工具包，进一步扩展了系统的功能。Designers Italia 更进一步，发布了专门为意大利地方卫生局 (ASL) 和城市博物馆量身定制的设计 模型 和模板。这证明了设计系统的灵活性及其更广泛应用的潜力。

衡量影响

Design System .italia 的第三代经历了爆炸式增长。数字说明了一切

学习资源

  • 三份 “入门指南”，四份 “贡献指南” 迎合了项目经理、设计师和开发人员的需求。
  • 该系统提供 16 个 “基础” 和 54 个 “组件”，外加 一个 设计师工具包和 三个 开发者框架。

社区参与

  • 在过去一年中，Figma 社区中有超过 4,000 人使用了 UI Kit Italia。
  • GitHub 上超过 390 个 开源软件项目将 Bootstrap Italia 列为依赖项。

国家实施 (PNRR)

  • 作为 PNRR 倡议的一部分，84% 的意大利地方政府和 81% 的意大利学校（总共超过 13,000 个管理机构）已加入，以基于 Design System .italia 创建其网站和数字服务。
    • 其中，约 38.5% 已经在其新网站中实施了 Design System .italia。这相当于大约 32% 的所有意大利地方政府和学校。

网站性能

  • 使用 Design System .italia 构建的新 designers.italia.it 网站的访问量显着增长
    • 与 2023 年同期相比，每月访问量增长了 56.5%，超过 10,000 次独立访问。
    • 总访问量增长了 69.4%，超过 16,000 次。
    • 页面浏览量猛增 102.7%，达到 45,000 次。
    • 平均访问时长增长了 220.9%，达到约 3.5 分钟。
    • 跳出率下降了 90%，仅为 4%。

未来展望

着眼于开源项目典型的 持续改进，Design System .italia 已进入一个新的验证阶段，该阶段涉及验证 54 个现有组件的无障碍性和一致性，这将促成文档 1.0.0 版本的发布。

随后，未来几个月将采取研究行动，创造与直接使用这些资源的人员进行讨论的机会，以便与多年来建立的整个 Designers Italia 社区 继续共同塑造 .italia 的未来，迄今为止，该社区已拥有超过 24,000 名成员。

如果没有一个杰出社区的奉献精神和 热情，这个故事是不可能实现的。来自意大利各地的设计师、开发人员、公共部门雇员、行业专业人士、爱好者、项目经理、教育工作者和学生多年来贡献了他们的想法、专业知识和承诺。虽然我们无法一一列举他们的名字，但我们向这支令人难以置信的集体力量表示衷心的感谢。

如何参与

如果您想成为这个开放且不断发展的项目的一份子，请加入 Designers Italia 社区。

Design System .italia 资源时间表

Design System .italia 三代的主要版本和资源概述，包括文档 📚 、设计 📐 和开发 💾 。

当前资源指的是第三代。

文档 📚

第三代 .italia (2021–至今)

  • Design System .italia 位于 Designers Italia 网站的一个版块中。根据 “设计指南” (2022) 的规定，优先用于创建风格和用户体验一致的界面，该指南根据 CAD 第 53 条发布。版本从 1.0.0-alpha.1 (2022) 到 2024 年 3 月 29 日的 1.0.0-beta.2 (文档变更日志)。

第二代 (2017–2021)

  • 设计指南的 “用户界面” 章节，可在 Docs Italia 上找到。已被根据 CAD 第 53 条发布的 “设计指南” (2022) 和 “设计操作手册” 的出版物取代。版本从 2017.1 到 2020.1。

第一代 (2015–2017)

  • “公共管理部门网站设计指南” Alpha 版本 (2015)，当时可在 design.italia.it 网站上找到。

设计 📐

第三代 .italia (2021–至今)

第二代 (2017–2021)

  • UI Kit v2，原生 Sketch，可从 GitHub 存储库 /italia/design-ui-kit/ 获得，并在 Invision 上预览。“2” 版本，当时在没有之前的 “1” 版本的情况下选择，表明意识到发生了重大的代际变化。自 2023 年发布 v3 以来已弃用，可从 “2.x” 分支 和 存档历史原型 存储库中获取以供存档。
  • 学校和市政 v1 模型的高保真布局和原型，原生 Sketch，在 GitHub 上发布，并在 Invision 上预览。它们使用并扩展了 UI Kit v2。现已弃用，可从 存档历史原型 存储库中查阅。

第一代 (2015–2017)

  • 没有专门的工具包，某些组件的设计规范在 Alpha 设计指南中指出。

开发 💾

第三代 .italia (2021–至今)

  • Bootstrap Italia v2 被引入 Bootstrap 5，进行了广泛的组件、代码和技术堆栈重构。这项工作的重点是无障碍性。添加了新组件（例如，新的 Megamenu 和视频播放器）。版本从 2.0.0-rc.1 (2022 年在专用 -next 存储库上) 到 2024 年 5 月 8 日的 v2.8.5 (Bootstrap Italia 变更日志)。
  • 在第三代初期，v1 也进行了更新，包括无障碍性和依赖性修复以及首次演进。版本从 1.5.0 (2022) 到 2022 年 7 月 13 日的 1.6.4，自 2023 年起弃用，转而使用 v2。
  • 用于 学校 v2 模型 (学校模板变更日志) 和 市政 (市政模板变更日志) 的 HTML 模板在 GitHub 上发布，它们使用并扩展了 Bootstrap Italia。
  • React Kit v5 更新到 Bootstrap Italia v2，社区也进行了重要的重构。版本从 5.0.0-7 (2023) 到 2024 年 5 月 2 日的 v5.0.4 (变更日志)。
  • Angular Kit v1 更新到 Bootstrap Italia v2，社区也进行了重要的重构。版本从 1.0.0-0 (2022) 到 2024 年 4 月 8 日的 1.0.2 (变更日志)。

第二代 (2017–2021)

  • Bootstrap Italia v1 发布，基于 Bootstrap 4，并附带专门的文档网站。它立即聚集了庞大的贡献者社区。版本从 0.0.1 (2018) 到 2021 年 5 月 28 日的 1.4.3。
  • 用于学校和市政 v1 模型的 HTML 模板在 GitHub 上发布，它们使用并扩展了 Bootstrap Italia。
  • 与此同时，社区还在追求其他开放项目，其中 React Kit 尤为突出，其文档位于 Storybook 上。版本最高可达 2021 年 12 月 27 日的 4.0.2。此外，在这一代中，Angular Kit 的第一个想法也开始出现，版本最高可达 2018 年 9 月 14 日的 0.13.0。

第一代 (2015–2017)

  • 某些组件的 HTML（和 CSS）代码可从 Alpha 设计指南下载。
  • 在首次应用之后，首次尝试抽象出一个开发工具包 Design web toolkit，并附带专门的文档网站。由一个小型的实践社区维护，它在 2019 年被弃用，转而使用 Bootstrap Italia。版本最高可达 2017 年 5 月 24 日的 1.0.0-alpha。

Design System .italia 历史资料来源（意大利语）

第三代 .italia (2021–至今)

第二代 (2017–2021)

第一代 (2015–2017)

其他有用的参考资料

  • .italia 的预备读物：原则与意图是了解“为什么”的基础；身份和可访问性是最低限度的参考；如何开始助您先人一步，特别是如果您是 PA（公共管理部门）的设计师、开发者和/或项目经理。
  • 人是项目的中心：要创造有用且有效的体验，始终要从研究和人们的需求出发。您可以使用设计资源和 Designers Italia 的“Manuale operativo di design”（设计操作手册）来拓宽视野，涵盖整个设计流程，超越用户体验和界面。
  • Design System .italia 旨在面向两个目标群体：在行政部门及其供应商中创造体验的人员；以及使用体验的人员，即公民和公务员，他们应被视为项目的中心。
  • 数字化的“物质”是代码、像素、内容、语义、最佳实践以及符合标准，需要通过持续改进的方法不断关注。Design System .italia 正是处理这些“物质”，深入到构成界面的组件代码，并可用于多种开发框架。
  • 开放方法是一种领域选择：不仅是 PA（公共管理部门）的义务，开源、开放设计和正确的开放许可也是为了透明度、共享、重用以及对整个社区贡献的开放性而做出的选择。Design System .italia 是一项公共产品。
  • 这个故事与法规和参考标准密不可分，它关系到“Linee guida di design”（设计指南）、“Linee guida di accessibilità”（可访问性指南）、CAD、欧洲可访问性法案（European Accessibility Act）、GDPR、《“Piani triennali”》（三年计划）、欧洲公共服务质量指标以及 EN、UNI、WCAG 参考技术标准或规范的演变。

翻译注释

意大利语原文刊登于 Designers Italia Medium 博客：“Verso Design system .italia: dalle origini al design system aperto della Pubblica Amministrazione”。由 Daniele Tabellini (@fupete) 于 2024 年 5 月 22 日发布。

翻译审阅和编辑：Nicole Martinelli。

与本文一样，原始文章根据知识共享署名 4.0 国际 (CC BY-SA 4.0) 许可协议获得许可。

本翻译旨在使内容能够被更广泛的国际受众所理解。一些意大利语术语以及官方指南和计划的名称保留了其原始形式，并在括号中提供了英文翻译以使其更清晰。

作者

  • Daniele Tabellini

    我在 Designers Italia 负责 Design System .italia。我的工作领域是可用性、可访问性、开源和开放设计。我教授概念设计和创意编码。

    查看所有帖子

您可能也喜欢

如果您喜欢这篇文章，您可能也喜欢这些