為了一勞永逸地處理嵌入式裝置及網頁中的響應式 (responsive) 和流動式 (fluid) 介面設計問題,苦情的工程師參考切割工業的排料演算法 (placement algorithm) 設計了一套圖形介面產生引擎;將重複的工作抽象成了 Okudagrams.js —— 定義單元權重、輸入元件清單,即自動產生介面。本專案嘗試探討的問題:自動產生的介面是否能兼顧設計品味及優使性 (usability)?
Okudagrams.jsࣗಈհ໘㗞ੜҾ№
View Slide
OUTLINE•Motivation•Problem•Design•Demo•Future Plans
MOTIVATION•ઃܭଟݸईੇతհ໘૬ᙛྦྷਓ•൛ᯩଶท໘㗞ੜثຑ•ҝॄኄෆަڅԋࢉ๏ိܾఆ?
PROBLEM•ᑍ㐫ଯੵ (Strip packing) •ఆٛྵ݅छྨܾఆ࣍ং (permutation)•ࠜᎦྵ݅ᒟॏܾఆഉஔ (placement)
DESIGN•ఆٛᄸݩᒟॏɼ༌ೖਗ਼ᄸɼ㗞ग़հ໘•ሡᦊນׂҝეմ (container)•ሡྵ݅ (items) ์ೖეմ
DESIGN (CONT.)
DEMOLive Coding @ ಓ
github.com/penk/OkudagramsJS
FUTURE PLANS•վਐᦊນׂԋࢉ๏•༻ Flexbox Ҡ২౸ HTML5•Markdown ղੳɺFSM
Thank You! :-)http://static.fjcdn.com/large/pictures/9b/40/9b4025_3065870.jpg