Okudagrams.js - Automatic UI Generator

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

Transcript

1. Okudagrams.js ࣗಈհ໘㗞ੜҾ№
2. OUTLINE •Motivation •Problem •Design •Demo •Future Plans
3. MOTIVATION •ઃܭଟݸईੇతհ໘૬ᙛྦྷਓ •໛൛࿨ᯩଶท໘㗞ੜث໵኷ຑ൥ •ҝॄኄෆަڅԋࢉ๏ိܾఆ?
4. PROBLEM •ᑍ㐫ଯੵ (Strip packing) ໰୊ •ఆٛྵ݅छྨܾఆ࣍ং (permutation) •ࠜᎦྵ݅ᒟॏܾఆഉஔ (placement)
5. DESIGN •ఆٛᄸݩᒟॏɼ༌ೖਗ਼ᄸɼ㗞ग़հ໘ •ሡᦊນ੾ׂҝეմ (container) •ሡྵ݅ (items) ์ೖეմ
6. DESIGN (CONT.)
7. DEMO Live Coding @ ֌ಓ
8. github.com/penk/OkudagramsJS
9. FUTURE PLANS •վਐᦊນ੾ׂԋࢉ๏ •࢖༻ Flexbox Ҡ২౸ HTML5 •Markdown ղੳɺFSM
10. Thank You! :-) http://static.fjcdn.com/large/pictures/9b/40/9b4025_3065870.jpg