2012年6月厌丑，我在CNN.com工作時璧坟，接到了為“選舉之夜”進(jìn)行用戶體驗設(shè)計的任務(wù)磁携。接下來的5個月我為那1個晚上貢獻(xiàn)了全部精力——但我的成功對選舉的勝利方?jīng)]啥影響枢赔。我所關(guān)注的是頁面的可讀性，數(shù)據(jù)的可視化斗遏，可變形的畫布，以及在iPhone上怎么實現(xiàn)該死的鼠標(biāo)懸停彈窗效果鞋邑。在當(dāng)時诵次，CNN.com首次上線了響應(yīng)式體驗站點，同時枚碗，我也第一次面臨響應(yīng)式體驗設(shè)計逾一。
這是一場豪賭。選舉之夜對于CNN.com來說就像周日超級碗那樣重要肮雨。如果完成的出色遵堵，這將是我4年來收入最高的一個晚上。此外的壓力就是苛刻的完成時間，截止日期毫無商量余地陌宿，要么11月6日上線锡足，要么就玩完。
接下來我了解到第一個開發(fā)沖刺任務(wù)將在4天后拉開序幕壳坪。4天舶得？！我的項目經(jīng)理冷靜地告訴我：“別擔(dān)心弥虐，開發(fā)人員僅需要一個第一版的原型扩灯，在他們做第一版原型時，你可以接著做下一版霜瘪≈椴澹”
啥？我怎么可能在還沒對機(jī)器進(jìn)行粗略設(shè)計的前提下就開始設(shè)計機(jī)器的齒輪颖对？
當(dāng)我們在固定屏幕大小的情況下進(jìn)行頁面設(shè)計時可以考慮不周全捻撑；最終可以通過把獨立設(shè)計的頁面縫合在一起來達(dá)到目標(biāo)。我對于響應(yīng)式設(shè)計毫無頭緒缤底，但我知道我們需要清晰且簡單的體系顾患，而不是把頁面（簡單地）串在一起。正如所有的工程師和設(shè)計師所知个唧，在一個系統(tǒng)中江解，可移動的元素越多，就越可能造成災(zāi)難徙歼。
所以犁河，在最初的4天設(shè)計中，我并沒有繪制互不關(guān)聯(lián)的線框圖魄梯，相對的桨螺，我畫了一份具有可重用、可互相替換組件的完整體系圖酿秸。如下圖所示：
我在會議室里向那些本希望看到單一“已完成”原型的相關(guān)人員展示這張圖灭翔。我表示，相比我們的2008個設(shè)計方案辣苏，我已減少了組件和原型模板的數(shù)量肝箱，并且新的體系圖非常簡單，僅需一張8.5 × 11的紙就可以展示了考润！值得慶幸的是狭园，一名核心人員在房間中看到了我所展示的草圖的價值：用更少的素材來構(gòu)建產(chǎn)品。
我在2012年制作的草圖遠(yuǎn)達(dá)不到完美糊治，更多時候都是在嘗試多做快做唱矛。我倉促地開工，禁止彈窗和條形圖，始終考慮桌面優(yōu)先绎谦，擔(dān)心位置偏移而不是優(yōu)先級夠不夠管闷。我采用設(shè)計封面頁的經(jīng)驗（這經(jīng)驗應(yīng)該用在設(shè)計的最后階段），包裝出了一款不成熟的主頁窃肠。我花了過多精力在固定頂層導(dǎo)航上包个，而不是首先關(guān)注內(nèi)容模塊。
盡管不完美冤留，這張草圖的設(shè)計理念碧囊，以及背后的思路方法，與我產(chǎn)生了共鳴纤怒。它不是站點地圖糯而，因為它沒有層級；它也不是故事版泊窘，因為它沒有任務(wù)流熄驼。相對的，這張圖展示了一種系統(tǒng)級思維烘豹，它改變了我做用戶體驗設(shè)計的思路瓜贾。
如果我掌握了現(xiàn)在的知識，這就是我將會創(chuàng)造出的携悯，剝離開交互祭芦、持久導(dǎo)航、網(wǎng)頁和布局的草圖憔鬼，它展示了3個對象的體系：州实束、競選，以及州-競選結(jié)果逊彭。
這種方法可行：我們的響應(yīng)式“選舉之夜”被認(rèn)為是周日超級碗的CNN高管的希望。但我們真的是九死一生构订，為了確保設(shè)計效果在無數(shù)設(shè)備上都展示得當(dāng)侮叮，我們沒日沒夜地工作。我不確定我們是否能采用更復(fù)雜的設(shè)計來完成這一任務(wù)悼瘾。
今天囊榜，我已把這一艱難的考驗轉(zhuǎn)化成一種可被證明的、結(jié)構(gòu)化的亥宿、基于對象的流程卸勺。在這篇文章中，我將介紹面向?qū)ο蟮挠脩趔w驗設(shè)計烫扼，分享我進(jìn)行對象關(guān)系映射的過程曙求，并幫助你開始自己動手實現(xiàn)它。
未完待續(xù)……
