$30 off During Our Annual Pro Sale. View Details »

Okudagrams.js - Automatic UI Generator

penk
August 04, 2013

Okudagrams.js - Automatic UI Generator

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

penk

August 04, 2013
Tweet

More Decks by penk

Other Decks in Technology

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