Piman

為無障礙網頁而生的 UI 框架
無障礙,讓你我被世界善待

Accessibility, Design System and
UI Framework

近年來「以使用者為中心」的概念已深植人心, 而這股力量也開始擴散至無障礙網頁設計領域, 藉由不斷改善網頁的親和力, 期望能達成通用設計的核心概念:Design for All。

Piman 正是為此而生, 從人們日常生活常頻繁接觸的網頁開始著手改善, 所以首要任務便是推廣開發者使用 Piman 開發政府機關網站, 進而應用在產品、官網等地方,如此企業可善盡社會責任,也可與國際趨勢接軌。

design tips

Design Tips

提供設計師無障礙網頁設計的重點,避免重複踩到前人踩過的地雷。

Vue Logo 示意圖

Vue Components

提供多樣常見的元件,
站在巨人的肩膀上開發!

figma template

Figma Template

完善的 Design System,
快速、方便執行無障礙網頁設計。

nuxt template

Nuxt Template

快速開啟無障礙網頁前端專案,省下環境設定的時間。

為什麼要使用無障礙網頁 UI 框架?

在窗邊的一個透明玻璃杯裝滿零錢,裡頭種著一株小植物。

快速創造出友善的網頁

降低無障礙網頁開發成本

一隻手每個手指都套上藍芽感應裝置

讓更多用戶使用

WTO 統計全球已有超過 10% 以上的人有一定程度的身心障礙,這些人的需求在都應該要被重視,落實 Design for All 精神

一台螢幕上有程式碼的筆記型電腦

符合無障礙網頁設計規範的 UI 框架套件不多

為了符合無障礙而修改原始碼容易造成版本鎖死、維護不易

accessible keyboard

較容易取得無障礙標章

未來每個網站都會注重無障礙網頁設計,已經成為世紀趨勢,尤其是 UX 意識提升的現在

一隻手拿著很多袋子,另一隻手也很忙碌

更多的情境下擁有更好的使用體驗

透過無障礙網頁設計,讓使用者在各種複雜環境下也可輕易的使用

桌上放著很多有色彩的展示的本子

良好的管理設計樣式

完善的 Design System,提升維護與開發效率

前端工程

基於 Vue 2 開發的 UI 框架(Vue 3 版開發中)

Vue.js

Vue 2

我們希望盡可能讓更多人使用 Piman,而對無障礙學習者與切版新手來說, Vue 在技術面上成熟且相對其他框架好上手。

無障礙網頁設計要注意許多技術、結構規範,複製/貼上 html 等方式可能會遺漏細節或誤用,因此我們決定使用 Vue 來製作元件,希望降低錯誤發生機率。

同時為考慮 IE11 的良好支援 ,選擇了 Vue 2 來進行開發。

另外 Vue3 版也在開發中,但只支援現代最新瀏覽器。

Piman codesandbox

讓我們保持聯繫吧!

歡迎訂閱,我們會將各種有關無障礙網頁設計的資訊分享給您。