AUO Design System

資源下載 設計套件與開發資源下載，加速設計和開發流程。

設計系統Figma下載

Vue頁面範本下載

React頁面範本下載

UX工具

設計系統

  1. Component Gallery

UX知識

  1. UX四神湯
  2. Conversation Lab
  3. HPX悠勢
  4. 設計大舌頭
  5. AAPD
  6. pmtone

Guideline

  1. ARVR Guideline
  2. Google Material Design
  3. Apple HIG

問卷

  1. 問題範例
  2. SurveyMonkey問卷工具

UI工具

工具

  1. Logo Lab（Logo重複性檢查）
  2. 設計轉檔工具(etc. XD, Sketch, Figma)
  3. APP icon
  4. E-mail 尺寸範本

無障礙色彩對比

  1. 顏色對比檢查 Figma Plugin

配色

  1. coolors配色工具
  2. 色環調色配色工具
  3. 在線查Pantone色號
  4. 品牌配色辭典

靈感辭典

  1. 資訊視覺化
  2. 網站設計系統的大匯總辭典
  3. UI 設計案例辭典
  4. 好看的日本設計網站
  5. ui8模板

icon

  1. thenounproject
  2. icon finder
  3. TW icon Fonts
  4. iconify

圖庫

  1. Shutterstock
  2. 123RF
  3. Fotolia
  4. iStock

前端開發工具

代碼速查檢核

  1. CANIUSE
  2. CDNJS
  3. google 代碼託管
  4. TabNine
  5. HTML/CSS/JS查詢
  6. 瀏覽器尺寸表

動態效果

  1. CSS Animation
  2. Wow.js
  3. SVG動畫
  4. 文字動畫套件
  5. aos動畫套件
  6. 線性SVG繪圖動畫
  7. Loading.io
  8. 視差滾動外掛

產生器

  1. CSS3產生器
  2. CSS3三角形產生器
  3. Box-shadow產生器
  4. SASS 顏色代碼+參數
  5. https://sassme.jim-nielsen.com/
  6. CSS3 Animation 代碼產生器
  7. 漸層代碼產生器
  8. 漸層產生器Blend

圖表

  1. amcharts圖表
  2. flourish資訊視覺化/圖表
  3. echarts 圖表
  4. Chart.js 圖表
  5. AntV 圖表

套件

  1. Lazyload延遲載入
  2. Lazysizes
  3. Masony瀑布流排版
  4. lightbox燈箱
  5. Sticky SideBar
  6. Swiper輪播

圖片處理

  1. TinyPNG
  2. iloveimg圖片壓縮工具
  3. Placeholder佔位圖片

無障礙色彩對比

  1. siegemedia顏色對比查詢
  2. marijohannessen顏色對比查詢
  3. reurl無障礙顏色交叉對比
回頁首