注：heidi寫這系列的專業(yè)文章，并不說明目前heidi做得有多好，相反，每當(dāng)我發(fā)現(xiàn)自己做得不夠好時(shí)或者遇到問題時(shí)，都喜歡反思并總結(jié)，可是由于以前養(yǎng)成的不良習(xí)慣，導(dǎo)致我最終寫出來的東西總是像專業(yè)教程，這也導(dǎo)致會(huì)有一些小朋友誤認(rèn)為我是專業(yè)人士，其實(shí)真的不是這樣，我寫出來未必是專業(yè)文章（有時(shí)只不過表現(xiàn)如此），我只是覺得這個(gè)話題值得探討，值得分享，也值得自己繼續(xù)努力而已。所以，也請(qǐng)不要四處轉(zhuǎn)載。

—————————————————————低調(diào)的分割線——————————————————

線框圖是交互設(shè)計(jì)師必不可少的產(chǎn)出物，它在交互設(shè)計(jì)師的工作中扮演了如此重要的角色，以至于交互設(shè)計(jì)師經(jīng)常被認(rèn)為是個(gè)畫線框圖的，但是無論是設(shè)計(jì)師本人還是項(xiàng)目組成員，對(duì)于線框圖存在的意義未必有足夠的認(rèn)識(shí)。

項(xiàng)目為何需要線框圖？

為什么不縮短周期，直接跳轉(zhuǎn)到視覺設(shè)計(jì)呢？

對(duì)于設(shè)計(jì)師而言，疑問一樣存在：

線框圖給我們帶來什么價(jià)值？

在我們想進(jìn)行線框圖培訓(xùn)時(shí)，疑問有：

不就是畫個(gè)草圖嗎？還需要學(xué)習(xí)？

如果大家都把線框圖理解成“草圖”，那么按照正常邏輯，草圖的產(chǎn)出一定是比視覺稿更快而不是更慢才對(duì)，但是在很多項(xiàng)目里，為何線框圖的時(shí)間反而花費(fèi)得更多？

這往往會(huì)引起不解，因?yàn)樵诙鄶?shù)人看來，線框圖也就是個(gè)沒有任何視覺加工過的簡(jiǎn)單簡(jiǎn)陋粗暴不美觀的草稿，加上我一再聲稱做線框圖的工具是10分鐘就可以上手搭建線框圖的超白癡工具，而線框圖本身就完全無需精雕細(xì)琢刻意加工，那么，為何會(huì)在線框圖階段停留那么久？其他人都在干嘛？時(shí)間都花在哪里？

在我自己回顧過去的項(xiàng)目或者看手里的項(xiàng)目時(shí)，我也發(fā)現(xiàn)，為何過去的線框圖階段都比較長(zhǎng)？而目前在做的項(xiàng)目，由于資源靠自己去安排，自己預(yù)安排的資源，比如只有3天，實(shí)施過程中發(fā)現(xiàn)太緊張，遠(yuǎn)遠(yuǎn)不夠？

再細(xì)想一下，發(fā)現(xiàn)也許這三天，我用了1天半就搭建了一個(gè)滿足基本需求的線框圖（從商業(yè)需求來講，這是大家能夠預(yù)計(jì)到的主要的頁(yè)面），但是在1天半后，我開始進(jìn)行多種方案的探索與創(chuàng)建，然后發(fā)現(xiàn)更多分支流程與異常處理頁(yè)面，之后，我完全沒有為線框圖的討論與確認(rèn)留下充分的時(shí)間！

而，線框圖如果做出來不是讓大家來爭(zhēng)論和確認(rèn)的，而是僅僅做出來給大家過目一下就移交了，基本上，線框圖已經(jīng)失去了原本存在的價(jià)值。

時(shí)間都花到了哪里？

并非所有的項(xiàng)目都需要線框圖，但是如果需要線框圖，那么線框圖就需要多留一些時(shí)間，不要單純從最終的線框圖產(chǎn)出物的“樣子”去評(píng)估需要多少資源。

用頁(yè)面的個(gè)數(shù)去評(píng)估工作量，在視覺設(shè)計(jì)師也許是適用的——建立在產(chǎn)品視覺風(fēng)格確定的前提下。

（視覺設(shè)計(jì)師的資源也需要?jiǎng)澐殖蓛啥?，一段用來做探索，確定產(chǎn)品風(fēng)格，比如主題色，質(zhì)感，圖文比例與用圖風(fēng)格等，這個(gè)階段也有比較大范圍的評(píng)審與確認(rèn)，所以時(shí)間上反而會(huì)比具體的頁(yè)面視覺設(shè)計(jì)來得更長(zhǎng)），前端工程師也可以用頁(yè)面?zhèn)€個(gè)數(shù)與復(fù)雜程度去預(yù)估需要多少天，但是對(duì)于交互設(shè)計(jì)師，這比較是個(gè)難題。只有交互設(shè)計(jì)師將需求討論清楚，自己將頁(yè)面流程圖畫好，將各種分支情況考慮清楚，腦子里才會(huì)逐漸對(duì)需要多少個(gè)頁(yè)面形成概念，哪些頁(yè)面需要更高的單頁(yè)面交互設(shè)計(jì)形成概念，而當(dāng)他完成這一步，交互的大部分工作都已經(jīng)做完了，剩下的單純?nèi)ピO(shè)計(jì)各個(gè)頁(yè)面，占據(jù)了線框圖階段的很少的時(shí)間。更多的時(shí)間是花在什么上？

討論——評(píng)審——討論——評(píng)審——確認(rèn)

是的，線框圖的作用之一是用來吵架的承載物，交互設(shè)計(jì)師為線框圖確認(rèn)需要召開很多次評(píng)審會(huì)（視項(xiàng)目不同而不同），直至大家對(duì)線框圖達(dá)成共識(shí)，然后在有的公司，還需要對(duì)線框圖本身進(jìn)行可用性測(cè)試以發(fā)掘更多問題。

80%和20%

交互設(shè)計(jì)師可能會(huì)有20%的精力真正花在線框圖本身的制作上，而且他也認(rèn)為這也許是沒有什么技術(shù)含量的。剩下的80%的精力，用在：

——需求的了解與討論，“我認(rèn)為這個(gè)標(biāo)記出現(xiàn)在搜索結(jié)果頁(yè)，也許并不是合理的場(chǎng)景……”“為什么只針對(duì)××會(huì)員類型開放這個(gè)功能？”在商業(yè)初始需求確認(rèn)后，交互設(shè)計(jì)師與產(chǎn)品經(jīng)理是配合最緊密的兩個(gè)角色，他們需要將商業(yè)需求一步步細(xì)化，落實(shí)到具體的頁(yè)面與功能的實(shí)現(xiàn)上。需求越清楚，以后的階段就會(huì)越高效。這個(gè)階段，交互設(shè)計(jì)師還需要借助site map，頁(yè)面流程圖（page flow），或者故事板等等工具，來幫助自己和項(xiàng)目組了解產(chǎn)品需求。

有時(shí)，工作量絕對(duì)不想看起來那么少，產(chǎn)品經(jīng)理需要把做什么和為什么描述清楚，他們會(huì)在“做什么”時(shí)也會(huì)講一下“如何做”，但是很多產(chǎn)品經(jīng)理并不或者被要求不要深入太多解決方案細(xì)節(jié)，但是交互設(shè)計(jì)師不一樣，必須從宏觀到細(xì)節(jié)，將產(chǎn)品的交互邏輯認(rèn)認(rèn)真真仔仔細(xì)細(xì)思考清楚，細(xì)枝末節(jié)的東西如果不關(guān)心，到了項(xiàng)目進(jìn)行過程中，還一定會(huì)被開發(fā)工程師追著補(bǔ)充各種流程中的頁(yè)面。

——?jiǎng)?chuàng)造性的方案探索與嘗試，“如果我這里換一種交互方式，會(huì)怎么樣？”“還有更好的實(shí)現(xiàn)辦法嗎？”“縮短一步操作會(huì)怎么樣？”“印象中好像曾經(jīng)有個(gè)網(wǎng)站采用了一種更加高效的方法，我想想看？”所有設(shè)計(jì)師都有精益求精的“特質(zhì)”，或者“毛病”，我們需要做這種自我激發(fā)的頭腦風(fēng)暴。

從設(shè)計(jì)來看，設(shè)計(jì)本身就意味著方案的篩選與確認(rèn)：也許最后設(shè)計(jì)師在確認(rèn)會(huì)上只給出了一到兩種方案，但是大多數(shù)設(shè)計(jì)師在自己的電腦里或者大腦里嘗試過很多方案。