聊聊線框圖——為線框圖多留點(diǎn)時(shí)間
注:heidi寫(xiě)這系列的專業(yè)文章,并不說(shuō)明目前heidi做得有多好,相反,每當(dāng)我發(fā)現(xiàn)自己做得不夠好時(shí)或者遇到問(wèn)題時(shí),都喜歡反思并總結(jié),可是由于以前養(yǎng)成的不良習(xí)慣,導(dǎo)致我最終寫(xiě)出來(lái)的東西總是像專業(yè)教程,這也導(dǎo)致會(huì)有一些小朋友誤認(rèn)為我是專業(yè)人士,其實(shí)真的不是這樣,我寫(xiě)出來(lái)未必是專業(yè)文章(有時(shí)只不過(guò)表現(xiàn)如此),我只是覺(jué)得這個(gè)話題值得探討,值得分享,也值得自己繼續(xù)努力而已。所以,也請(qǐng)不要四處轉(zhuǎn)載。
-—————————————————————低調(diào)的分割線——————————————————
線框圖是交互設(shè)計(jì)師必不可少的產(chǎn)出物,它在交互設(shè)計(jì)師的工作中扮演了如此重要的角色,以至于交互設(shè)計(jì)師經(jīng)常被認(rèn)為是個(gè)畫(huà)線框圖的,但是無(wú)論是設(shè)計(jì)師本人還是項(xiàng)目組成員,對(duì)于線框圖存在的意義未必有足夠的認(rèn)識(shí)。
- 項(xiàng)目為何需要線框圖?
- 為什么不縮短周期,直接跳轉(zhuǎn)到視覺(jué)設(shè)計(jì)呢?
對(duì)于設(shè)計(jì)師而言,疑問(wèn)一樣存在:
- 線框圖給我們帶來(lái)什么價(jià)值?
- 在我們想進(jìn)行線框圖培訓(xùn)時(shí),疑問(wèn)有:
- 不就是畫(huà)個(gè)草圖嗎?還需要學(xué)習(xí)?
如果大家都把線框圖理解成“草圖”,那么按照正常邏輯,草圖的產(chǎn)出一定是比視覺(jué)稿更快而不是更慢才對(duì),但是在很多項(xiàng)目里,為何線框圖的時(shí)間反而花費(fèi)得更多?
這往往會(huì)引起不解,因?yàn)樵诙鄶?shù)人看來(lái),線框圖也就是個(gè)沒(méi)有任何視覺(jué)加工過(guò)的簡(jiǎn)單簡(jiǎn)陋粗暴不美觀的草稿,加上我一再聲稱做線框圖的工具是10分鐘就可以上手搭建線框圖的超白癡工具,而線框圖本身就完全無(wú)需精雕細(xì)琢刻意加工,那么,為何會(huì)在線框圖階段停留那么久?其他人都在干嘛?時(shí)間都花在哪里?
在我自己回顧過(guò)去的項(xiàng)目或者看手里的項(xiàng)目時(shí),我也發(fā)現(xiàn),為何過(guò)去的線框圖階段都比較長(zhǎng)?而目前在做的項(xiàng)目,由于資源靠自己去安排,自己預(yù)安排的資源,比如只有3天,實(shí)施過(guò)程中發(fā)現(xiàn)太緊張,遠(yuǎn)遠(yuǎn)不夠?
再細(xì)想一下,發(fā)現(xiàn)也許這三天,我用了1天半就搭建了一個(gè)滿足基本需求的線框圖(從商業(yè)需求來(lái)講,這是大家能夠預(yù)計(jì)到的主要的頁(yè)面),但是在1天半后,我開(kāi)始進(jìn)行多種方案的探索與創(chuàng)建,然后發(fā)現(xiàn)更多分支流程與異常處理頁(yè)面,之后,我完全沒(méi)有為線框圖的討論與確認(rèn)留下充分的時(shí)間!
而,線框圖如果做出來(lái)不是讓大家來(lái)爭(zhēng)論和確認(rèn)的,而是僅僅做出來(lái)給大家過(guò)目一下就移交了,基本上,線框圖已經(jīng)失去了原本存在的價(jià)值。
時(shí)間都花到了哪里?
并非所有的項(xiàng)目都需要線框圖,但是如果需要線框圖,那么線框圖就需要多留一些時(shí)間,不要單純從最終的線框圖產(chǎn)出物的“樣子”去評(píng)估需要多少資源。
用頁(yè)面的個(gè)數(shù)去評(píng)估工作量,在視覺(jué)設(shè)計(jì)師也許是適用的——建立在產(chǎn)品視覺(jué)風(fēng)格確定的前提下。
(視覺(jué)設(shè)計(jì)師的資源也需要?jiǎng)澐殖蓛啥?,一段用?lái)做探索,確定產(chǎn)品風(fēng)格,比如主題色,質(zhì)感,圖文比例與用圖風(fēng)格等,這個(gè)階段也有比較大范圍的評(píng)審與確認(rèn),所以時(shí)間上反而會(huì)比具體的頁(yè)面視覺(jué)設(shè)計(jì)來(lái)得更長(zhǎng)),前端工程師也可以用頁(yè)面?zhèn)€個(gè)數(shù)與復(fù)雜程度去預(yù)估需要多少天,但是對(duì)于交互設(shè)計(jì)師,這比較是個(gè)難題。只有交互設(shè)計(jì)師將需求討論清楚,自己將頁(yè)面流程圖畫(huà)好,將各種分支情況考慮清楚,腦子里才會(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)
是的,線框圖的作用之一是用來(lái)吵架的承載物,交互設(shè)計(jì)師為線框圖確認(rèn)需要召開(kāi)很多次評(píng)審會(huì)(視項(xiàng)目不同而不同),直至大家對(duì)線框圖達(dá)成共識(shí),然后在有的公司,還需要對(duì)線框圖本身進(jìn)行可用性測(cè)試以發(fā)掘更多問(wèn)題。
80%和20%
交互設(shè)計(jì)師可能會(huì)有20%的精力真正花在線框圖本身的制作上,而且他也認(rèn)為這也許是沒(méi)有什么技術(shù)含量的。剩下的80%的精力,用在:
——需求的了解與討論,“我認(rèn)為這個(gè)標(biāo)記出現(xiàn)在搜索結(jié)果頁(yè),也許并不是合理的場(chǎng)景……”“為什么只針對(duì)××?xí)T類型開(kāi)放這個(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),或者故事板等等工具,來(lái)幫助自己和項(xiàng)目組了解產(chǎn)品需求。
有時(shí),工作量絕對(duì)不想看起來(lái)那么少,產(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)行過(guò)程中,還一定會(huì)被開(kāi)發(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ì)來(lái)看,設(shè)計(jì)本身就意味著方案的篩選與確認(rèn):也許最后設(shè)計(jì)師在確認(rèn)會(huì)上只給出了一到兩種方案,但是大多數(shù)設(shè)計(jì)師在自己的電腦里或者大腦里嘗試過(guò)很多方案。
設(shè)計(jì)本身是一種在期望和限制下進(jìn)行的探索,并且將探索后的成果實(shí)施。交互設(shè)計(jì)師需要不斷圍繞需求與期望,進(jìn)行探索并在逐步的限制中,縮小設(shè)計(jì)范圍。他做的是他應(yīng)該做的,他不應(yīng)該將過(guò)多的問(wèn)號(hào)傳遞給視覺(jué)設(shè)計(jì)師,視覺(jué)設(shè)計(jì)師本身也需要進(jìn)行探索與限制,但是我們更加期望他們的天賦應(yīng)用到品牌感、質(zhì)量感、專業(yè)感、情感化設(shè)計(jì)的探索上,而不是分散精力到產(chǎn)品邏輯的思考中去。
——設(shè)計(jì)方案的評(píng)審與確認(rèn),正如上圖所示,設(shè)計(jì)師需要分出不少精力,在設(shè)計(jì)的評(píng)審與確認(rèn)上。他首先從自己的頭腦風(fēng)暴里解脫出來(lái),從若干個(gè)方案中篩選一二,然后召集需求方、涉眾、其他設(shè)計(jì)師,進(jìn)行方案的需求。有時(shí),這樣的確認(rèn)會(huì)會(huì)召開(kāi)至少三輪:
- 第一輪,線框圖初審,線框圖基本完整后,與需求方以及技術(shù)方代表就線框圖展開(kāi)討論,這是不是商業(yè)方也即需求方想要的東西,線框圖滿足商業(yè)期望,確認(rèn)整體結(jié)構(gòu)、頁(yè)面上對(duì)于內(nèi)容塊的定義,技術(shù)方的參與能夠就可行性方面給出意見(jiàn),并且能夠根據(jù)線框圖進(jìn)行初步的開(kāi)發(fā)資源評(píng)估。
- 第二輪,線框圖設(shè)計(jì)專業(yè)評(píng)審,讓更多的設(shè)計(jì)師參與討論,從交互設(shè)計(jì)層面給予更多意見(jiàn)。這個(gè)評(píng)審是第一輪評(píng)審的補(bǔ)充,在既定的商業(yè)需求上就設(shè)計(jì)本身展開(kāi)討論,篩選最佳的方案。
- 第三輪,線框圖終審,設(shè)計(jì)師在前兩輪意見(jiàn)中進(jìn)行評(píng)估,對(duì)線框圖做一些調(diào)整,發(fā)起第三輪確認(rèn)會(huì),商業(yè)方代表與設(shè)計(jì)師代表,技術(shù)方代表,以及相關(guān)的涉眾(比如客服、銷售代表)等面前再次宣講設(shè)計(jì)方案,告訴大家本次是終審,終審確認(rèn)后,將會(huì)進(jìn)入視覺(jué)設(shè)計(jì)階段,到時(shí)候?qū)⒉辉僮鲚p易的結(jié)構(gòu)與內(nèi)容塊定義的調(diào)整,讓大家足夠重視并對(duì)線框圖達(dá)成一致。
在這三輪評(píng)審中,需要穿插多次小范圍的討論,比如可行性的評(píng)估,資源的評(píng)估,以及和產(chǎn)品經(jīng)理反復(fù)去討論需求和需求背后的意義??梢哉f(shuō),線框圖的作用之一,就是為了討論、確認(rèn),吵架,然后在一次次迭代與確認(rèn)中,最終塵埃落定,推動(dòng)項(xiàng)目進(jìn)入下一環(huán)節(jié)。
交互設(shè)計(jì)師的挑戰(zhàn)
挑戰(zhàn)絕非在于線框圖本身如何專業(yè),或者把線框圖做得如何快,而是在于對(duì)于需求的把握、挖掘與快速呈現(xiàn),在于全程中對(duì)于各種想法的吸收與管理,在于能不能讓大家都快速明白了解設(shè)計(jì)的原因和背景,并對(duì)方案達(dá)成一致。
不要讓爭(zhēng)議、問(wèn)題帶入到真正的實(shí)施環(huán)節(jié),比如視覺(jué)設(shè)計(jì),比如開(kāi)發(fā)。
因?yàn)閺耐度氘a(chǎn)出比來(lái)看,把架吵到線框圖階段,是最高效最合適的。
不等于商業(yè)需求討論環(huán)節(jié),有很多有創(chuàng)造力的人,卻不善于空想,對(duì)著商業(yè)需求文檔,無(wú)法讓創(chuàng)造力的腦細(xì)胞活躍起來(lái),大家都只能對(duì)著產(chǎn)品經(jīng)理的商業(yè)方案點(diǎn)頭稱是,但是到了線框圖階段,具體的產(chǎn)品原型會(huì)激發(fā)更多的想法,因此這個(gè)階段,最適合進(jìn)行產(chǎn)品開(kāi)發(fā)過(guò)程中的第二次頭腦風(fēng)暴。
不等于視覺(jué)設(shè)計(jì)與開(kāi)發(fā)環(huán)節(jié),線框修改起來(lái)是非常容易高效的。而且它故意做得如此簡(jiǎn)陋難看,就是想把最核心的需求呈現(xiàn)給大家,這個(gè)產(chǎn)品是這樣的,而不是這個(gè)產(chǎn)品看起來(lái)是這樣的。
因?yàn)?,“看”,“感覺(jué)”不可避免會(huì)帶入很多主觀的因素。同樣是紅色,有人覺(jué)得太鮮艷刺眼有人覺(jué)得熱情澎湃,而恰恰在產(chǎn)品規(guī)劃初期,我們是不希望過(guò)早去關(guān)注這些細(xì)節(jié),我們需要先解決最核心的問(wèn)題。視覺(jué)稿容易一開(kāi)始就讓大家陷入到各方向的討論中,有人還在思考產(chǎn)品是不是需要再增加一個(gè)功能,或者在爭(zhēng)論一個(gè)功能是否有足夠的價(jià)值時(shí),已經(jīng)有人開(kāi)始為“黃色”還是“紅色”爭(zhēng)論得不可開(kāi)交。
另外,我們必須得承認(rèn),在視覺(jué)設(shè)計(jì)階段,修改的成本非常高,視覺(jué)設(shè)計(jì)師是對(duì)每一個(gè)像素精雕細(xì)琢,產(chǎn)品定位的改變,也許對(duì)于他們是“滅頂之災(zāi)”,這可能會(huì)意味著很多個(gè)頁(yè)面要重新開(kāi)始設(shè)計(jì),當(dāng)視覺(jué)設(shè)計(jì)已經(jīng)到了一定的地步時(shí),視覺(jué)設(shè)計(jì)師對(duì)“修改”慢慢會(huì)變得有點(diǎn)抗拒,誰(shuí)不喜歡自己生出來(lái)的孩子?如果一個(gè)視覺(jué)設(shè)計(jì)師不喜歡他生出來(lái)的孩子,那他可能不是一個(gè)合格的視覺(jué)設(shè)計(jì)師。但是交互設(shè)計(jì)師是很樂(lè)意在線框圖上進(jìn)行任何的可能性的探索,他會(huì)更加包容這個(gè)階段涌入的任何想法,因?yàn)樗靼走@個(gè)是中間產(chǎn)物,而且看起來(lái)就不像“完美”到可以當(dāng)成自己的孩子。
總結(jié)幾句:
1. 線框圖能夠幫我們將需求具體化,從而引入更多的想法,完善產(chǎn)品;
2. 線框圖能夠幫助我們理清思路,怎么做,如何做有了更加系統(tǒng)化的認(rèn)識(shí);
3. 線框圖制作起來(lái)非常容易,因此能夠幫助我們?cè)诟鞣N方案里評(píng)估和篩選;
4. 線框圖是用來(lái)吵架的,交互設(shè)計(jì)師需要?dú)g迎吵架包容各種想法,更重要的是對(duì)吵架進(jìn)行管理。
5. 80%的時(shí)間并非在做線框圖,而是花在需求的了解與討論、多種設(shè)計(jì)方案的頭腦風(fēng)暴與嘗試,設(shè)計(jì)的評(píng)審與確認(rèn)上,但是這80%的時(shí)間投入讓剩下的20%更加高效。
6. 作為交互設(shè)計(jì)師,在那80%里提升的空間會(huì)更大,很多時(shí)候,剩下的20%是自然而然的結(jié)果。
關(guān)于線框圖還有很多問(wèn)題值得討論的,比如:什么階段下開(kāi)始做線框圖,線框圖制作工具與方法,幾種不同的線框圖的作用等等,就不過(guò)多討論了。以上的部分也歡迎繼續(xù)探討。
來(lái)源:http://heidixie.blog.sohu.com/151623325.html
- 目前還沒(méi)評(píng)論,等你發(fā)揮!