Okudagrams.js - Automatic UI Generator

為了一勞永逸地處理嵌入式裝置及網頁中的響應式 (responsive) 和流動式 (fluid) 介面設計問題，苦情的工程師參考切割工業的排料演算法 (placement algorithm) 設計了一套圖形介面產生引擎；將重複的工作抽象成了 Okudagrams.js —— 定義單元權重、輸入元件清單，即自動產生介面。本專案嘗試探討的問題：自動產生的介面是否能兼顧設計品味及優使性 (usability)?

Transcript

1. Okudagrams.js
   ࣗಈհ໘㗞ੜҾ№
   

   View Slide

2. OUTLINE
   •Motivation
   •Problem
   •Design
   •Demo
   •Future Plans
   

   View Slide

3. MOTIVATION
   •ઃܭଟݸईੇతհ໘૬ᙛྦྷਓ
   •໛൛࿨ᯩଶท໘㗞ੜث໵኷ຑ൥
   •ҝॄኄෆަڅԋࢉ๏ိܾఆ?
   

   View Slide

4. PROBLEM
   •ᑍ㐫ଯੵ (Strip packing) ໰୊
   •ఆٛྵ݅छྨܾఆ࣍ং (permutation)
   •ࠜᎦྵ݅ᒟॏܾఆഉஔ (placement)
   

   View Slide

5. DESIGN
   •ఆٛᄸݩᒟॏɼ༌ೖਗ਼ᄸɼ㗞ग़հ໘
   •ሡᦊນ੾ׂҝეմ (container)
   •ሡྵ݅ (items) ์ೖეմ
   

   View Slide

6. DESIGN (CONT.)
   

   View Slide

7. DEMO
   Live Coding @ ֌ಓ
   

   View Slide

8. github.com/penk/OkudagramsJS
   

   View Slide

9. FUTURE PLANS
   •վਐᦊນ੾ׂԋࢉ๏
   •࢖༻ Flexbox Ҡ২౸ HTML5
   •Markdown ղੳɺFSM
   

   View Slide

10. Thank You! :-)
    http://static.fjcdn.com/large/pictures/9b/40/9b4025_3065870.jpg
    

    View Slide