Okudagrams.js - Automatic UI Generator

6882af2c6c09bab5adfda53818c6d2fa?s=47 penk
August 04, 2013

Okudagrams.js - Automatic UI Generator

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

6882af2c6c09bab5adfda53818c6d2fa?s=128

penk

August 04, 2013
Tweet

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