---
title: "Piman 無障礙 UI 框架 - Neil 的作品集"
description: "Piman 是一款聚焦於無障礙網頁設計、基於 Vue 的開源 UI Frameworework。"
canonical_url: "https://neillin.com/products/piman/"
meta:
  author: Neil
  keywords: "無障礙, UI Kit, UI 框架, Vue, Nuxt"
  "og:description": "Piman 是一款聚焦於無障礙網頁設計、基於 Vue 的開源 UI Frameworework。"
  "og:image": "https://neillin.com/images/piman-thumbnail.webp"
  "og:title": "Piman 無障礙 UI 框架 - Neil 的作品集"
---

> Index of every page on this site: [llms.txt](https://neillin.com/llms.txt)

:::

# Piman 無障礙 UI 框架

![Piman 無障礙 UI 框架 簡介](https://neillin.com/images/piman-thumbnail.webp)

*Piman 無障礙 UI 框架 簡介*

## 概要

近年來「以使用者為中心」的概念已深植人心，而這股力量也開始擴散至無障礙網頁設計領域，藉由不斷改善網頁的親和力，期望能達成通用設計的核心概念：Design for All。Piman 正是為此而生，從人們日常生活常頻繁接觸的網頁開始著手改善，所以首要任務便是推廣開發者使用 Piman 開發政府機關網站，進而應用在產品、官網等地方，如此企業可善盡社會責任，也可與國際趨勢接軌。

  

### 目標

- 實現網頁的通用設計
- 開源專案
- 設計系統

### 角色

- 專案管理
- UI
- UX
- 切版

### 工具

- Figma
- Github
- npm
- Notion

## 過程

### 觀察

- IBM Carbon
- Bootstrap 5
- Vital Ui Kit
- Material Design 3

### 學習

- 以前只是為了通過無障礙網頁設計標章，透過此專案專研無障礙網頁知識與技術
- 開源軟體前、後所需要具備的知識
- 如何從無障礙網頁設計技巧擴大到網頁的「通用設計」的觀念

## 產出

- 設計系統
- 設計文件
- 前端開發文件
- Figma
- Nuxt 初始開發範本
- 後台管理系統範本
- Codesandbox

![Piman V3 後台範本](https://neillin.com/images/piman-v3-design-system.webp)

*Piman V3 後台範本*

![Piman V3 按鈕元件](https://neillin.com/images/piman-v3-button.webp)

*Piman V3 按鈕元件*

![Piman V3 設計系統](https://neillin.com/images/piman-v3-backstage-template.webp)

*Piman V3 設計系統*

## 相關連結

### 網站

1. [Piman Github](https://github.com/ya-sai/piman "(另開視窗) 前往  Piman Github")
2. [Piman V3 Github](https://github.com/BPbase/piman "(另開視窗) 前往  Piman V3 Github")
3. [Piman V3 試玩(後台範本與元件)](https://bpbase.github.io/piman/demo/#/ "(另開視窗) 前往  Piman V3 試玩(後台範本與元件)")
4. [Piman 官方網站](https://bpio.gitbook.io/piman "(另開視窗) 前往  Piman 官方網站")
5. [Piman 設計系統 Figma](https://www.figma.com/community/file/1182586164850970870 "(另開視窗) 前往  Piman 設計系統 Figma")
6. [Piman v3 後台系統範本](https://www.figma.com/community/file/1210126707767575165 "(另開視窗) 前往  Piman v3 後台系統範本")
7. [Material Design 3](https://m3.material.io/ "(另開視窗) 前往  Material Design 3")
8. [IBM Carbon](https://carbondesignsystem.com/ "(另開視窗) 前往  IBM Carbon")
9. [Bootstrap 5](https://getbootstrap.com/ "(另開視窗) 前往  Bootstrap 5")
10. [Vital UI Kit](https://vitaluikit.com/ "(另開視窗) 前往  Vital UI Kit")
11. [開源軟體指南](https://opensource.guide/zh-hant/ "(另開視窗) 前往  開源軟體指南")
12. [無障礙網路空間服務網](https://accessibility.moda.gov.tw/ "(另開視窗) 前往  無障礙網路空間服務網")

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://neillin.com/#website","@type":"WebSite","inLanguage":"zh-Hant-TW","name":"Neil 的作品集","url":"https://neillin.com/","workTranslation":{"@id":"https://neillin.com/en/#website"}},{"@id":"https://neillin.com/products/piman/#webpage","@type":"WebPage","description":"Piman 是一款聚焦於無障礙網頁設計、基於 Vue 的開源 UI Frameworework。","name":"Piman 無障礙 UI 框架","url":"https://neillin.com/products/piman/","isPartOf":{"@id":"https://neillin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://neillin.com/products/piman/"]}]},{"@id":"https://neillin.com/#person","@type":"Person","jobTitle":"UI/UX 設計師","name":"Neil Lin","url":"https://neillin.com/","sameAs":["https://github.com/Neil-Lin"]},{"@id":"https://neillin.com/products/piman/#/schema/creative-work/1","@type":"CreativeWork","dateModified":"2025-08-06T00:00:01.000Z","datePublished":2021,"description":"Piman 是一款聚焦於無障礙網頁設計、基於 Vue 的開源 UI Frameworework。","inLanguage":"zh-Hant-TW","keywords":"無障礙, UI Kit, UI 框架, Vue, Nuxt","name":"Piman 無障礙 UI 框架","url":"https://neillin.com/products/piman/","author":{"@type":"Person","name":"Neil Lin"},"image":{"@id":"https://neillin.com/#/schema/image/1"}},{"@id":"https://neillin.com/products/piman/#/schema/breadcrumb-list/1","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"回首頁","item":"https://neillin.com/"},{"@type":"ListItem","position":2,"name":"產品","item":"https://neillin.com/products/"},{"@type":"ListItem","position":3,"name":"Piman 無障礙 UI 框架","item":"https://neillin.com/products/piman/"}]},{"@id":"https://neillin.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://neillin.com/images/piman-thumbnail.webp","inLanguage":"zh-Hant-TW","url":"https://neillin.com/images/piman-thumbnail.webp"}]}
```

## Sitemap

See the full [sitemap](https://neillin.com/sitemap.md) for all pages.