WikimediaUI 风格指南教程

WikimediaUI 风格指南教程

1. 项目介绍

WikimediaUI 风格指南是由 Wikimedia 基金会设计团队维护的一个开源项目，旨在为 Wikimedia 产品提供一致的外观和交互行为。该风格指南涵盖了设计原则、视觉风格、颜色、排版、图标、图像、插图、组件等多个方面，旨在帮助设计师和开发者在 Wikimedia 项目中保持一致性。

项目地址：WikimediaUI-Style-Guide

2. 项目快速启动

2.1 克隆项目

首先，你需要将项目克隆到本地：

git clone https://github.com/wikimedia/WikimediaUI-Style-Guide.git

2.2 安装依赖

进入项目目录并安装必要的依赖：

cd WikimediaUI-Style-Guide
npm install

2.3 启动项目

启动项目以查看风格指南：

npm start

项目启动后，你可以在浏览器中访问 http://localhost:3000 查看风格指南。

3. 应用案例和最佳实践

3.1 应用案例

WikimediaUI 风格指南广泛应用于 Wikimedia 基金会旗下的多个项目，如 Wikipedia、Wikimedia Commons、Wikidata 等。这些项目通过遵循风格指南，确保了用户界面的一致性和用户体验的连贯性。

3.2 最佳实践

• 一致性：在设计新功能或界面时，始终参考风格指南，确保与现有界面保持一致。
• 可访问性：风格指南特别强调可访问性，确保所有用户都能无障碍地使用产品。
• 国际化和本地化：风格指南支持多语言和多文化环境，确保产品在全球范围内的一致性。

4. 典型生态项目

4.1 Codex

Codex 是 WikimediaUI 风格指南的改进和增强版本，提供了更丰富的组件和更详细的指南。Codex 旨在进一步统一 Wikimedia 产品的视觉和交互风格。

项目地址：Codex

4.2 MediaWiki

MediaWiki 是一个开源的 wiki 软件，广泛应用于 Wikimedia 基金会旗下的多个项目。MediaWiki 通过遵循 WikimediaUI 风格指南，确保了用户界面的一致性和用户体验的连贯性。

项目地址：MediaWiki