這里有一個(gè)我在使用的Windows Phone應(yīng)用的設(shè)計(jì)過(guò)程。其中許多設(shè)計(jì)過(guò)程階段是傳統(tǒng)的，我嘗試從Windows Phone應(yīng)用特別的視角來(lái)闡釋。

這篇文章是關(guān)于end-to-end的過(guò)程，所以會(huì)保持其高視角，并在下面的文章里詳細(xì)的探索每一個(gè)步驟。比如，下周我們會(huì)從理念與概念開(kāi)始，關(guān)于講故事（storytelling）、草圖（Sketching）、故事板（storyboard）與低保真原型(low fidelity prototype)。這篇文章會(huì)是系列內(nèi)容的軸線。但是并不確定會(huì)不會(huì)基于反饋重新定義（refine）某些階段，以及增加更多的示例。

圖表自下向上讀……

Windows Phone設(shè)計(jì)過(guò)程與其它的網(wǎng)站、移動(dòng)app或任何設(shè)計(jì)沒(méi)有本質(zhì)不同。所有的設(shè)計(jì)師重視設(shè)計(jì)過(guò)程，用他們自有的方式調(diào)整、完善設(shè)計(jì)，并改變適用于每一個(gè)項(xiàng)目。沒(méi)有項(xiàng)目是相同的，因此非常重要的是以指南（guidelines）理解設(shè)計(jì)過(guò)程而不是規(guī)則（rules）。保持靈活性（flexible）。

理解“設(shè)計(jì)”，設(shè)計(jì)不是按快門(mén)（one-shot）這類(lèi)活動(dòng)。你不能憑借一次嘗試既確定設(shè)計(jì)，而是像創(chuàng)作雕塑作品，有一個(gè)迭代過(guò)程。藝術(shù)家拿到一組大理石，他們不會(huì)從細(xì)節(jié)開(kāi)始，如眉毛、指甲或者頭發(fā)。而是第一步先塑造整體的感覺(jué)，主要的體感與大塊。接著第二步定義更多的特性區(qū)塊，如手臂、胸、頭與腿。隨后有第三步、第四部與第五步。達(dá)到刻畫(huà)小細(xì)節(jié)的程度需要經(jīng)過(guò)許多步驟。用戶體驗(yàn)設(shè)計(jì)同理。你不能從細(xì)節(jié)開(kāi)始，最終會(huì)讓你自食其果。應(yīng)用程序流程（Application Flow）需要在視覺(jué)設(shè)計(jì)（Visual Design）前定義。我看到過(guò)許多類(lèi)似事情的發(fā)生，他們嘗試跳過(guò)一些步驟走捷徑，而缺乏設(shè)計(jì)探索（design exploration）最終得到的是隨后項(xiàng)目中的暴怒。

應(yīng)用主題（App Theme）

我們從應(yīng)用主題開(kāi)始。這個(gè)是第一個(gè)可能產(chǎn)生分歧的點(diǎn)。我只是知道應(yīng)用主題對(duì)于創(chuàng)建接下來(lái)的階段非常重要。我注意到當(dāng)開(kāi)始app設(shè)計(jì)過(guò)程我們通常有兩個(gè)選擇。1，已經(jīng)有一個(gè)我們想做的、非常清晰的idea；2，我們有一個(gè)目標(biāo)，基于現(xiàn)有的API與Web Service。但兩個(gè)途徑在我看來(lái)都是錯(cuò)的。如果你有一個(gè)清晰的idea，你知道你決定了自己與團(tuán)隊(duì)的解決方案，但還沒(méi)有通過(guò)探索驗(yàn)證。如果你決定創(chuàng)建一個(gè)app基于現(xiàn)有的API或者Web Service，你會(huì)最變成另外一個(gè)Twitter、Yelp！或者Foursquare 客戶端或者另一個(gè)從Yahoo獲取數(shù)據(jù)的股票軟件！金融或者另外一個(gè)從CNN獲得內(nèi)的RSS聚合器……從Marketplace上搜索CNN你就知道我正在說(shuō)什么。即使這些app有好的體驗(yàn)。相信我，他們無(wú)法突圍或者為用戶做出貢獻(xiàn)。不要想APIs或者RSS Feeds。想想用戶體驗(yàn)。所以替代的思路是”哇哦……CNN的RSS Feed是可用利用的“ ”我們?nèi)绾螢橛脩粼讷@得最新與關(guān)聯(lián)且重要的新聞的體驗(yàn)做出貢獻(xiàn)？”盡快思考這些，越早為自己與團(tuán)隊(duì)打開(kāi)一個(gè)新世界的探索。不再是RSS閱讀器，現(xiàn)在你有一個(gè)更高的目標(biāo)，史詩(shī)般的任務(wù)來(lái)幫助用戶獲得更多關(guān)聯(lián)且重要的新聞。因?yàn)閷?duì)象是寬廣的，解決方案是不具體的，這才是想要的點(diǎn)。你保持開(kāi)放，所以你會(huì)探索并擁有革新的idea。替代基于APIs的思考，而基于體驗(yàn)思考，如跑步體驗(yàn)、進(jìn)餐體驗(yàn)、航行體驗(yàn)，詢問(wèn)自己與團(tuán)隊(duì)，你如何為你的用戶做出貢獻(xiàn)提升體驗(yàn)。注意這并不是必要地意味著解決全部的體驗(yàn)……它意味著只是解決X或Y部分的體驗(yàn)，用戶趨向難以發(fā)現(xiàn)的地方或者你看到一個(gè)機(jī)會(huì)可以幫助用戶發(fā)揮全部潛能。在隨后的開(kāi)發(fā)過(guò)程中，你會(huì)選擇你會(huì)選擇API或RSS Feed從任何源，但是起點(diǎn)一定不是技術(shù)解決方案。最流行的Twitter或Foursquare客戶端都是成功的因?yàn)樗鼈儗Ⅲw驗(yàn)放在第一位——而不是API。

現(xiàn)在如果你已經(jīng)有客戶端的app服務(wù)于特定的產(chǎn)品服務(wù)，或你正在移植iPhone或Android app到Windows Phone，請(qǐng)做好準(zhǔn)備，針對(duì)主題進(jìn)行重新定義（refine）。在許多的情況下，受制于預(yù)算或委托人，你需要直接跳到信息架構(gòu)（Information architecture）階段。然而真誠(chéng)地說(shuō)，即便由委托人雇傭你移植一個(gè)iPhone/Android app到Windows Phone，請(qǐng)依然做好主題、理念與信息架構(gòu)的重定義準(zhǔn)備。事實(shí)上這不是一個(gè)壞消息，一旦你進(jìn)入了信息架構(gòu)與交互設(shè)計(jì)（Interation Design）階段，會(huì)得到最好的Metro設(shè)計(jì)語(yǔ)言：Pivots、Panoramas、App Bar、List View、Typography、布局與動(dòng)畫(huà)。當(dāng)從其它平臺(tái)移植app，你的工作會(huì)變成：1，理解這些平臺(tái)上的當(dāng)前信息架構(gòu)，并用Metro翻譯它們到正確的屏幕、內(nèi)容視圖與導(dǎo)航?；镜氖虑槭抢斫猱?dāng)從iPhone與Android遷移時(shí)，你不能遷移UI。你遷移的信息架構(gòu)。通過(guò)思考與實(shí)踐，你會(huì)預(yù)防錯(cuò)誤的轉(zhuǎn)化過(guò)程……如當(dāng)人們嘗試從iPhone遷移返回按鈕（通常是屏幕左上角的按鈕）到Windows Phone……你在Windows Phone上不需要一個(gè)屏幕上的返回按鈕，因?yàn)槲覀冇幸粋€(gè)硬件的返回按鈕。所以，遵循思考“遷移IA”比“遷移UI”要更合適。#p#

理念與概念（Ideation & Concept）

現(xiàn)在你有一個(gè)主題或者任務(wù)，到了為其產(chǎn)生idea的時(shí)間~理念與概念階段非常有趣！——就像是在玩游戲。頭腦風(fēng)暴（Brain storming）的游戲，草圖游戲講與講故事的游戲。在這個(gè)部分有三個(gè)關(guān)鍵階段：1，頭腦風(fēng)暴；2，探索；3，合并（Consolidation）。概況來(lái)說(shuō)，在頭腦風(fēng)暴階段你產(chǎn)生了大量的idea，在探索階段你詳細(xì)分析與研究許多idea（但不是全部），在合并階段你決定哪些idea會(huì)繼續(xù)向前變成app一部分。只有少數(shù)的idea會(huì)存活。

完全自由的頭腦風(fēng)暴

這個(gè)階段的目標(biāo)是產(chǎn)生關(guān)聯(lián)任務(wù)的大量idea，如“貢獻(xiàn)酒店預(yù)訂的體驗(yàn)”。想象力（Imagination）、妄想（delusion）與古怪（craziness）是在這個(gè)點(diǎn)上都是好的技巧。讓自己有玩的心態(tài)，思路跳出思維框架。有需多具體的頭腦風(fēng)暴練習(xí)如Subject+Verbs+Objects與擴(kuò)展思路的Alternate Worlds、Impossible Scenarios與In Other‘s Shoes。我們會(huì)在下一篇文章討論所提到的技術(shù)。這些游戲你可以與團(tuán)隊(duì)一起參與，如果你是獨(dú)立開(kāi)發(fā)者你可以跟朋友一起參與。這個(gè)階段的目標(biāo)不是強(qiáng)迫你疑慮“你如何build或編寫(xiě)這個(gè)或那個(gè)”。也不是關(guān)于這些東東長(zhǎng)什么樣。它是關(guān)于產(chǎn)生idea的。在接下來(lái)的幾個(gè)階段，這些idea會(huì)落地執(zhí)行。后面，就像我們知道的，有百萬(wàn)個(gè)非常好的idea，但是只有一個(gè)或者兩個(gè)會(huì)被恰當(dāng)執(zhí)行，并且成功。#p#

探索分析/審查/測(cè)試 Exploration Dissect/Inspect/Test Ideas

在探索階段你會(huì)得到頭腦風(fēng)暴中脫穎而出的idea，并需要了解更多關(guān)于這些idea的內(nèi)容。你可以通過(guò)分析、審查與測(cè)試來(lái)達(dá)到目的。這個(gè)點(diǎn)idea剛剛出生，它們就是孩子，沒(méi)有完全的發(fā)展或成熟。然而這些idea只是頭腦風(fēng)暴的一部分，也許許多瘋狂的idea在頭腦風(fēng)暴過(guò)程中已經(jīng)滅了——但是有一些依然存在。你可以肯定會(huì)發(fā)現(xiàn)你或團(tuán)隊(duì)中其它人會(huì)堅(jiān)信、接受并深深?lèi)?ài)上這些idea——他們的孩子。我冒險(xiǎn)地說(shuō)這不是好事情，但同時(shí)，你需要愛(ài)上已經(jīng)確定的idea，這樣你就可以把其它idea推得遠(yuǎn)遠(yuǎn)兒的。有些時(shí)候idea需要發(fā)展來(lái)完全的證明。如果你太快地放棄了一個(gè)idea，也許你會(huì)失去一個(gè)好的機(jī)會(huì)。幸運(yùn)的是這個(gè)階段我們有4個(gè)非常有用的工具，允許我們探索我們的idea并發(fā)現(xiàn)優(yōu)秀的種子：草圖、故事板、簡(jiǎn)易原型與講故事。這些工具幫助開(kāi)發(fā)人員與設(shè)計(jì)人員針對(duì)idea進(jìn)行測(cè)試。

擁有草圖能力可以幫助你維持更多的抽象概念。故事板可以幫助你像接近皮克斯或夢(mèng)工廠動(dòng)畫(huà)師一樣講故事。你使用手繪與故事板展現(xiàn)idea的用戶體驗(yàn)情景，如何通過(guò)app來(lái)提供幫助與做出貢獻(xiàn)。這是一個(gè)可視化的方式。原型是一個(gè)全新世界可以探索，當(dāng)前重心在簡(jiǎn)易原型。這里有幾種方式：一個(gè)是通過(guò)紙張、便條、卡片與膠帶建立模擬原型。你可以通過(guò)手動(dòng)粘貼到畫(huà)布上測(cè)試情景（scenarios） 來(lái)傳達(dá)交互。這類(lèi)簡(jiǎn)易模型需要一個(gè)向?qū)c測(cè)試用戶。這聽(tīng)起來(lái)像是落伍的活動(dòng)。但是它真的不是……它是非常嚴(yán)肅的。你會(huì)驚訝，你能在一張簡(jiǎn)易原型上用15~60分鐘而不需要花一分錢(qián)，就可以收到許多反饋。在進(jìn)一級(jí)的設(shè)計(jì)過(guò)程階段不會(huì)使用簡(jiǎn)易原型，但在這個(gè)點(diǎn)，這是最佳選擇。另外一個(gè)做簡(jiǎn)易原型的方式是使用Expression Blend（或者是Powerpoint或者其它的交互工具）。這個(gè)是Design Studio的Jared Potter第一次向我展示的復(fù)合數(shù)模技術(shù)。簡(jiǎn)單的說(shuō)，你在紙上畫(huà)草圖、拍照、載入圖像到Expression Blend，在頭部的可點(diǎn)擊區(qū)域增加透明按鈕并關(guān)聯(lián)導(dǎo)航欄。Done！他稱(chēng)這個(gè)是15分鐘簡(jiǎn)易原型技術(shù)，我們會(huì)在下一篇文章中講得更多。

[[56305]]

整合產(chǎn)生決策 Consolidation Make Decisions

從頭腦風(fēng)暴開(kāi)始得到許多idea，經(jīng)歷自己與團(tuán)隊(duì)的探索……在這里需要整合，非常好的idea會(huì)脫穎而出。這是一個(gè)決定哪一個(gè)idea會(huì)進(jìn)入app的過(guò)程。有不同的練習(xí)會(huì)幫助你的團(tuán)隊(duì)縮減列表與基于優(yōu)先級(jí)排序列表。這里的目標(biāo)是移除盡可能多的不明確信息。這時(shí)，idea比起概念階段進(jìn)一步進(jìn)化，并引發(fā)更多的用戶情景（user scenarios）或者信息情景（information scenarios）。你需要帶到下一個(gè)階段的是一個(gè)基于優(yōu)先級(jí)的情景列表。

信息架構(gòu) Information Architecture

信息架構(gòu)階段的目標(biāo)是定義信息、任務(wù)與彼此之間的關(guān)系。用戶所擁有的數(shù)字體驗(yàn)：信息與信息利用的潛力——使用信息來(lái)幫助決策、獲得關(guān)于某些事情的知識(shí)、產(chǎn)生信息。

信息架構(gòu)是一個(gè)完整的學(xué)科。信息架構(gòu)的目標(biāo)是制定信息規(guī)則。

在理念與概念階段產(chǎn)生的用戶情景包括不定型的信息，如名字、日期、價(jià)格、圖像、溫度范圍-在信息架構(gòu)階段你會(huì)帶著不定型的信息并傳遞為結(jié)構(gòu)化的信息。一次嘗試是不可能完成的，它需要經(jīng)歷多個(gè)過(guò)程。

我們有兩個(gè)非常有用的工具可以幫助我們定義信息框架：應(yīng)用程序流程表單（Application Flow charts）與低保真原型（Low Fidelity Prototyping）。

所以在信息架構(gòu)進(jìn)行第一次嘗試，并通過(guò)創(chuàng)建Flow charts進(jìn)行測(cè)試。這里有不同成熟度等級(jí)，主要是從任務(wù)流程到具體屏幕+內(nèi)容視圖+導(dǎo)航表單。記得經(jīng)典軟件工程的Flow charts嗎？這就是app flow charts，它只是一個(gè)可視化術(shù)語(yǔ)，我們專(zhuān)注在用戶流程（user flow）、體驗(yàn)（experience）與交互設(shè)計(jì)（Interaction design）。一旦你拿到一個(gè)flow chart，你就可以嘗試講述用戶情景（user scenarios）的故事。你會(huì)獲得反饋與idea，用來(lái)重定義信息架構(gòu)，并返回完善AI文檔。這時(shí)你可以反復(fù)通過(guò)創(chuàng)建較高仿真的flow chart進(jìn)行測(cè)試。flow charts漸漸地變得詳細(xì)，從簡(jiǎn)單的任務(wù)flow到屏幕展示內(nèi)容視圖、導(dǎo)航。我不稱(chēng)之為高端的flow charts線框圖（wireframes），確切的說(shuō)是低保真框架。

另外一個(gè)工具是低保真原型（low fidelity prototypes）。在這個(gè)點(diǎn)紙質(zhì)原型依然有用，因?yàn)榈统杀?。無(wú)論如何，flow charts會(huì)漸漸地更高保真。你需要打印這些app flow chart并把類(lèi)似的放在一起（不再是草稿、而是打印材料）或使用Jared在Expression Blend的原型技術(shù)，用拍攝的原型圖像替代，把a(bǔ)pp flow程序呈現(xiàn)在屏幕上。

在最后你會(huì)有一個(gè)獨(dú)立的IA文檔，包括組織化的信息、可靠的成組flow charts與基于app flow的低保真原型。

我注意到的一件事情是，創(chuàng)建Windows Phone Design Process chart后，它在IA文檔接近35%的高度，占有同樣高度的是Interaction Design（下一階段）。這些chart不代表在項(xiàng)目中占有同樣的時(shí)間，但是我要說(shuō)它著實(shí)正確的思考了IA應(yīng)有的時(shí)間。如果你明確IA，會(huì)更加游刃有余。

最近的幾個(gè)星期，我們有一篇特別的文章會(huì)關(guān)于Windows Phone apps的信息框架。#p#

交互設(shè)計(jì) Interaction Design

我們已經(jīng)定義了信息架構(gòu)，也就是說(shuō)目標(biāo)用戶可以使用這些信息?，F(xiàn)在我們開(kāi)始針對(duì)性制作用戶界面。

交互設(shè)計(jì)是什么：創(chuàng)建一組用戶界面與用戶體驗(yàn)元素，用來(lái)驗(yàn)證良好的信息架構(gòu)與用戶完成信息關(guān)聯(lián)的任務(wù)。我們希望在這個(gè)階段達(dá)到的效果是傳遞信息與任務(wù)最大化的潛力發(fā)生。即使IA可能是剛剛完善，如果交互設(shè)計(jì)不能完全執(zhí)行，這時(shí)信息中發(fā)生的事情就不會(huì)完全正確地在app中體現(xiàn)、用戶也不能完成他們想要的任務(wù)。

依照我的觀點(diǎn)，交互設(shè)計(jì)默認(rèn)是信息與任務(wù)的過(guò)濾器（filter）。它定義的不是信息也不是任務(wù)，而是一個(gè)工具。交互設(shè)計(jì)（或用戶界面）是在用戶與信息之間的中間人。用其它的方式描述，用戶界面（交互設(shè)計(jì)的最終形式）應(yīng)該是從有罪直到證明無(wú)罪，我想這個(gè)概念關(guān)聯(lián)了許多Metro法則要點(diǎn)：信息是展示的核心，不是用戶界面。它是決定一個(gè)好（壞）設(shè)計(jì)定義的重要因素，無(wú)關(guān)用戶界面層是薄、無(wú)形或者笨重。我們不談?wù)撘曈X(jué)設(shè)計(jì)，只是交互設(shè)計(jì)：用戶基于現(xiàn)在發(fā)生的關(guān)系如何面對(duì)信息與任務(wù)交互。

如果我們沒(méi)有一個(gè)Windows Phone Metro設(shè)計(jì)語(yǔ)言可用，這時(shí)我們需要從零開(kāi)始弄明白交互隱喻。在未來(lái)的文章里我會(huì)談?wù)撊绾瓮苿?dòng)Metro，并給出一些idea與如何基于Metro革新，這篇文章里會(huì)重點(diǎn)定義交互設(shè)計(jì)與開(kāi)箱即用（out-of-box）的Windows Phone Metro設(shè)計(jì)語(yǔ)言。

設(shè)計(jì)模式（Design Patterns），可靠的幫助翻譯信息架構(gòu)到Metro控件。信息架構(gòu)與任務(wù)會(huì)賦予Pivots、Pages與Panoramas以生命。信息層與架構(gòu)會(huì)賦予內(nèi)容視圖（Content Views）以生命。信息與信息、任務(wù)與任務(wù)、信息與任務(wù)的關(guān)系會(huì)賦予導(dǎo)航欄（Navigation）以生命。IA文檔的所有內(nèi)容會(huì)翻譯到明確的Windows Phone控件中。最后不會(huì)出現(xiàn)歧義。

讓我們回顧，基于IA文檔，選擇Windows Phone已有的設(shè)計(jì)模式，例如：search、maps、email、playlists或people hub的Contact cards。這時(shí)，如你沒(méi)有找到一個(gè)完整的設(shè)計(jì)模式，或者根本不能滿足你的IA需求。那么你可以定制一個(gè)接近或者創(chuàng)建全新的設(shè)計(jì)模式。當(dāng)定制或創(chuàng)建自有設(shè)計(jì)模式，你有三個(gè)好的工具：1，Windows Phone設(shè)計(jì)網(wǎng)格；2，不同尺寸標(biāo)準(zhǔn)的Typography來(lái)傳達(dá)結(jié)構(gòu)化信息；3，Metro控件。當(dāng)然，這三個(gè)不是所有你可以可用的武器，但它們是最基本的。相信Windows Phone用戶體驗(yàn)指導(dǎo)（UX Guidelines）會(huì)cover到你的安排。

我提議通過(guò)設(shè)計(jì)模式來(lái)設(shè)計(jì)Windows Phone app。這不是唯一的設(shè)計(jì)Windows Phone Metro app的方式。像我們前面提到的，我們會(huì)在隨后的文章里談?wù)撽P(guān)于推動(dòng)Metro的設(shè)計(jì)模式，但在這篇文章重心在Windows Phone Metro語(yǔ)言設(shè)計(jì)。如果我們明確，從我的觀點(diǎn)，我們可以創(chuàng)建自有的設(shè)計(jì)模式，可能一點(diǎn)都不像Metro控件庫(kù)只是隱喻接近（但仍然基于Metro設(shè)計(jì)法則）。

你可以在Photoshop format（ListView_PSD.psd）找到許多列表視圖設(shè)計(jì)模式，全景板圖（Panorama_PSD.psd）以及其它控件。我們會(huì)延伸更多的內(nèi)容。

經(jīng)過(guò)選擇設(shè)計(jì)模式，定制并創(chuàng)建設(shè)計(jì)模式，你基本上設(shè)計(jì)了app。聽(tīng)起來(lái)很簡(jiǎn)單！其實(shí)不是，事實(shí)上只是選擇了正確的設(shè)計(jì)模式，定制了它們的工作區(qū)塊。我發(fā)現(xiàn)Windows Phone設(shè)計(jì)工作室投入了超過(guò)2年加工與展開(kāi)Windows Phone體驗(yàn)與UI。設(shè)計(jì)模式是非常靈活與廣泛的。經(jīng)過(guò)在Windows Phone Design Day回顧將近200個(gè)app，我相信它們當(dāng)中90%使用已有的設(shè)計(jì)模式與定制設(shè)計(jì)模式。當(dāng)我開(kāi)始我在設(shè)計(jì)工作室的工作，我對(duì)Metro并不熟悉，我的印象是它很漂亮但所有app都看起來(lái)很像?，F(xiàn)在我在這里寫(xiě)給你的是關(guān)于再利用（re-using）已有的設(shè)計(jì)模式設(shè)計(jì)整個(gè)app做出改變？是的！我印象里6個(gè)月前，在Windows Phone中所有的都是Pivot與Panorama時(shí)代。但是我發(fā)現(xiàn)經(jīng)過(guò)6個(gè)月，許多Windows Phone app比僅使用一個(gè)Pivot或Panorama更豐富。所有的事情是相通的。這三種類(lèi)型的屏幕依次主導(dǎo)了app中無(wú)限量布局的可能性。這是app之間區(qū)別的地方。定制Panorama面板的可能性、Pivot頁(yè)面的無(wú)限量。Windows Phone app使用的Metro設(shè)計(jì)語(yǔ)言可以非常豐富與獨(dú)特。像“如果背景不是黑色就不是Metro”的迷信不是真的。請(qǐng)查看Mike K的這篇文章或者Core77的Windows Phone設(shè)計(jì)辯論。

其中一件重要的事情是以不同的格式生產(chǎn)大量設(shè)計(jì)模式：Photoshop、Illustrator、Expression Design與XAML?，F(xiàn)在，市面上沒(méi)有大量的設(shè)計(jì)模式，所以推薦使用手機(jī)當(dāng)前的內(nèi)置，同時(shí)我們這邊也在大量工作更多的格式將會(huì)投入使用。

返回開(kāi)始，設(shè)計(jì)模式的選擇、定制與創(chuàng)造階段會(huì)呈現(xiàn)在線框圖（Wireframes）。線框圖是灰度圖。不是色彩的！沒(méi)有品牌……也沒(méi)有panorama背景！這些線框圖理想情況下是由Expression Design、Visio、Photoshop與Illustrator創(chuàng)建（提醒我們應(yīng)該提供Visio格式的設(shè)計(jì)模式）。

我們已經(jīng)準(zhǔn)備轉(zhuǎn)移到下一個(gè)交互設(shè)計(jì)階段：定義動(dòng)畫(huà)風(fēng)格與UI控件規(guī)格。實(shí)際上，這些概念會(huì)跟隨之前選擇的設(shè)計(jì)模式。最后，設(shè)計(jì)模式在這個(gè)語(yǔ)境（context）是交互設(shè)計(jì)模式，而不只是視覺(jué)設(shè)計(jì)模式。

動(dòng)畫(huà)風(fēng)格會(huì)幫助我們基于線框圖指明，會(huì)有動(dòng)畫(huà)出現(xiàn)在從A到B屏幕的轉(zhuǎn)化過(guò)程（旋轉(zhuǎn)風(fēng)格），何時(shí)顯示列表項(xiàng)目的詳細(xì)內(nèi)容（飛出飛入Continuum）。動(dòng)畫(huà)是Windows Phone app的重要部分，所以我們?cè)O(shè)計(jì)使用的動(dòng)畫(huà)風(fēng)格的要點(diǎn)規(guī)格時(shí)會(huì)非常挑剔。與此同時(shí)，UI控件規(guī)格同樣需要基于線框圖，所以開(kāi)發(fā)人員知道當(dāng)創(chuàng)建一個(gè)app時(shí)，鍵盤(pán)類(lèi)型需要基于輸入的用戶體驗(yàn)。或者當(dāng)有通知（notifications），我們需要顯示內(nèi)容A、B、C通知消息內(nèi)容的規(guī)則，通知在哪里會(huì)帶你進(jìn)入app。對(duì)于Loaders會(huì)發(fā)生同樣的事情……我們需要一個(gè)%的loader還是一個(gè)等待光標(biāo)？

在這個(gè)階段的最后，針對(duì)完整的app，會(huì)有可靠的一組線框圖，由開(kāi)箱即用的定制與自主創(chuàng)建的設(shè)計(jì)模式驅(qū)動(dòng)。這些線框圖會(huì)包括動(dòng)畫(huà)風(fēng)格與UI控件規(guī)格。準(zhǔn)備下一階段：視覺(jué)設(shè)計(jì)！

視覺(jué)設(shè)計(jì) Visual Design

目前為止，你會(huì)想：什么，到最后才有視覺(jué)設(shè)計(jì)？！。像我之前提到的，設(shè)計(jì)過(guò)程（任何事物）不是線性的。要是像我一樣，我會(huì)開(kāi)啟Expression Design（你可能會(huì)使用Photoshop或Illustrator）我會(huì)把額外的事情丟一邊并開(kāi)始工作，我喜歡這樣，用我喜歡的工具并開(kāi)始app設(shè)計(jì)。沒(méi)有草稿、沒(méi)有線框圖，只是漂亮或純粹的視覺(jué)震撼！——許多視覺(jué)設(shè)計(jì)師想的就是這個(gè)味兒（就像工程師直接跳到Visual Studio開(kāi)始敲代碼！）

我必須承認(rèn)比起一個(gè)交互設(shè)計(jì)師我更是一個(gè)視覺(jué)設(shè)計(jì)師。我肯定會(huì)依靠它看起來(lái)如何引導(dǎo)自己，所以我在項(xiàng)目的初期被視覺(jué)設(shè)計(jì)所吸引，但是我必須控制自己并記住有一個(gè)設(shè)計(jì)過(guò)程如何我跳過(guò)了，我的設(shè)計(jì)最終會(huì)非常漂亮但是不能忠實(shí)地表現(xiàn)app如何工作的信息架構(gòu)與交換設(shè)計(jì)需求。也就是說(shuō)，我們知道看起來(lái)受歡迎與我們都做過(guò)在過(guò)程的早期被客戶詢問(wèn)發(fā)送給他們app的設(shè)計(jì)。明確開(kāi)始的視覺(jué)設(shè)計(jì)是徒勞無(wú)功（雖然有些客戶喜歡說(shuō)要的就是這個(gè)）但是更像是“售賣(mài)設(shè)計(jì)”。

盡管我們喜歡信息架構(gòu)與交互設(shè)計(jì)，為用戶、商業(yè)決策制定者或市場(chǎng)管理者，然而一圖勝于千張AI（an image is worth a 1000 pages of IA）。一組漂亮的Windows Phone app會(huì)幫助人們購(gòu)買(mǎi)這個(gè)app與產(chǎn)生更多購(gòu)買(mǎi)，給團(tuán)隊(duì)boss的進(jìn)度報(bào)告會(huì)看起來(lái)漂亮。其實(shí)就是這樣。所以當(dāng)IA沒(méi)有完全確定或交互設(shè)計(jì)被定義時(shí)，視覺(jué)設(shè)計(jì)引導(dǎo)人們?cè)陧?xiàng)目早期，最好的想象并最終實(shí)現(xiàn)。許多次人們會(huì)想這個(gè)愿景是最終的產(chǎn)品。但事實(shí)不是，這只是試圖展示了我們方向在哪里。問(wèn)題既是團(tuán)隊(duì)或客戶信奉這個(gè)早期的視覺(jué)設(shè)計(jì)做為方向。期望應(yīng)該被規(guī)定，這樣在隨后項(xiàng)目中就不會(huì)失望，因?yàn)樗笥贗A與交互設(shè)計(jì)，你可以完全的認(rèn)識(shí)到視覺(jué)設(shè)計(jì)。

所以，現(xiàn)在我們有IA與交互設(shè)計(jì)明確時(shí)間來(lái)做許多有趣的視覺(jué)設(shè)計(jì)活動(dòng)，像定義調(diào)色板（color palette），設(shè)計(jì)自定義圖標(biāo)、背景、整合品牌到我們的體驗(yàn)與設(shè)計(jì)live tiles。

你是否知道有一個(gè)有關(guān)設(shè)計(jì)的經(jīng)典對(duì)話關(guān)于是否開(kāi)發(fā)人員應(yīng)該做設(shè)計(jì)？自始至終，對(duì)于這點(diǎn)我認(rèn)為一個(gè)開(kāi)發(fā)人員即使沒(méi)有正式在設(shè)計(jì)方面訓(xùn)練可以成功的做到。信息架構(gòu)是一個(gè)系統(tǒng)化與結(jié)構(gòu)、邏輯驅(qū)動(dòng)的學(xué)科。我個(gè)人認(rèn)為開(kāi)發(fā)人員有正確的思維模式明確IA。交互設(shè)計(jì)需要更多的體驗(yàn)，這是交互設(shè)計(jì)在過(guò)程中擅長(zhǎng)的地方，但是一個(gè)開(kāi)發(fā)人員沿著設(shè)計(jì)模式，我想他肯定可以做正確。這個(gè)階段的挑戰(zhàn)在于當(dāng)前的設(shè)計(jì)模式缺乏與恰當(dāng)?shù)墓ぞ邅?lái)實(shí)現(xiàn)方法、挑戰(zhàn)，這增加對(duì)沒(méi)有正式設(shè)計(jì)訓(xùn)練的人們的困難程度。最后，視覺(jué)設(shè)計(jì)階段，我想你最好雇傭訓(xùn)練有素的圖形視覺(jué)設(shè)計(jì)師。雖然有相當(dāng)數(shù)量的設(shè)計(jì)教程與有版權(quán)的圖標(biāo)、圖像與其它元素，但它與雇傭一個(gè)訓(xùn)練有素的設(shè)計(jì)師絕不一樣。我希望我們可以在后面的文章，提供給開(kāi)發(fā)人員許多實(shí)用的技巧，將基于素材的視覺(jué)設(shè)計(jì)元素變得更好。#p#

紅線與綠線 Redlines and Greenlines

什么是Redlines？什么又是greenlines？！簡(jiǎn)單的問(wèn)題。他們是交互體驗(yàn)的藍(lán)圖。就像是建筑的藍(lán)圖，你可以在上面看到樓梯平面圖、側(cè)視圖、建筑正面，通過(guò)標(biāo)注尺寸，門(mén)有多大、窗戶有多大、墻的厚度、水管通道經(jīng)過(guò)的地方、電源出口坐標(biāo)、樓梯有多高、樓梯采用的材質(zhì)、涂料顏色等等……在交互設(shè)計(jì)我們同樣有我們的藍(lán)圖稱(chēng)作紅線。我不確定為什么它們是紅色而不是品紅……但是我們想是因?yàn)榧t色是經(jīng)?？吹降念伾?，容易跳出來(lái)，所以UI標(biāo)識(shí)尺寸容易讀。屏幕上的redlines顯示了一個(gè)app不同屏幕，頂部不同成串的測(cè)量。這些數(shù)字定義了外邊距（margin）、內(nèi)邊距（padding）、元素的大小與短暫元素如狀態(tài)欄。為什么我們需要redlines？我通過(guò)Expression Blend就可以解決問(wèn)題！

很久前在設(shè)計(jì)過(guò)程中我們沒(méi)有Expression Blend。我知道這會(huì)引發(fā)一個(gè)很長(zhǎng)的討論，所以我在個(gè)系列保留了對(duì)這個(gè)設(shè)計(jì)工具的細(xì)節(jié)。我會(huì)說(shuō)不管怎樣，對(duì)于設(shè)計(jì)師控制UI到不論誰(shuí)拿到XAML格式的UI，redlines都是最好的表現(xiàn)技巧。這個(gè)人可能叫做整合者，另外一個(gè)用XAML或Blend的設(shè)計(jì)師或開(kāi)發(fā)人員。不論是什么情況，拿到設(shè)計(jì)與設(shè)計(jì)app的人不是同一個(gè)人。團(tuán)隊(duì)仍然可以工作。所以這個(gè)人需要一個(gè)方式用XAML產(chǎn)生UI與redlines幫助實(shí)現(xiàn)。通過(guò)redlines就沒(méi)有歧義，但是如果這個(gè)按鈕是30×150像素，距離屏幕左邊24像素，距離頂部427像素，這時(shí)這些尺寸就是位置。不需要討論。在過(guò)去，沒(méi)有redlines，設(shè)計(jì)師會(huì)設(shè)計(jì)網(wǎng)站并轉(zhuǎn)換JPG素材（不要使用JPG、只用PNG、沒(méi)有壓縮）給其他人產(chǎn)生HTML與CSS。這個(gè)過(guò)程會(huì)破壞設(shè)計(jì)，結(jié)果會(huì)與最初想象不同。Redlines表現(xiàn)了“契約”，一個(gè)當(dāng)事人雙方都同意寫(xiě)好的文檔！我們會(huì)在未來(lái)的文章討論更多的redlines與如何創(chuàng)建。

Greenlines是什么？Windows Phone設(shè)計(jì)工作室定義為觸摸區(qū)域。需要按鈕會(huì)說(shuō)，10像素的直徑，但是它們的點(diǎn)擊區(qū)域會(huì)是20像素（便于用戶點(diǎn)擊）。Greenlines指明這些點(diǎn)擊區(qū)域，不論它們匹配的物體大小。Greenlines與Redlines傳遞不同的信息。