保障任務(wù)流暢的IA設(shè)計方法-頁面簡圖法

0 評論 2050 瀏覽 2 收藏 8 分鐘

關(guān)于“為任務(wù)而設(shè)計”和“為結(jié)構(gòu)而設(shè)計”的問題,之前曾經(jīng)反復(fù)闡述過,如果你沒印象了,可以先看下:《設(shè)計原則VS實(shí)際情況》和《為產(chǎn)品結(jié)構(gòu)的設(shè)計,為用戶任務(wù)的設(shè)計》。

“設(shè)計時,既應(yīng)該關(guān)注讓任務(wù)流暢,又需要讓結(jié)構(gòu)清晰?!?br /> 如果你認(rèn)同了這個觀點(diǎn),那么,接下來的問題就是:應(yīng)該怎么做呢?

下面介紹一個設(shè)計方法,這是一個用于兼顧“為流程”與“為結(jié)構(gòu)”的信息架構(gòu)(IA)的設(shè)計方法。是2010年底,我和seven共同分析總結(jié)出來的。在廣州的“2010年首屆中國交互設(shè)計體驗(yàn)日”中的工作坊上,我倆曾現(xiàn)場介紹過這個方法:

通常我們會在設(shè)計開始階段分析出主要的用戶任務(wù),然后逐一任務(wù)畫流程圖。然后呢…直接開始畫信息架構(gòu)圖(IA圖)了,IA圖怎么畫呢?設(shè)計者憑空想象著畫,靠經(jīng)驗(yàn),靠見識。IA樹狀圖標(biāo)明了主要頁面的組織形式,然后再逐一頁面的細(xì)致設(shè)計。之前畫的流程圖呢?似乎沒用到。

流程圖是保證最終的產(chǎn)品能任務(wù)流暢的,如果能在IA的設(shè)計過程中切實(shí)用上流程圖,“為任務(wù)流暢”就能保障了。

這里要介紹的就是一個將流程圖有效融合到IA設(shè)計過程中的設(shè)計方法—頁面簡圖法:

第一步:畫流程圖
結(jié)合一個實(shí)例來看:這是一個基于QQ秀商城的網(wǎng)站產(chǎn)品。起個名字叫:搭配秀。用戶A上傳一張真實(shí)人物圖片,展示在這個網(wǎng)站中。用戶B看到這張圖片后,照此搭配出一套QQ秀形象,與之匹配。搭配好的一對作品也會展示在網(wǎng)站中。
我們先畫流程圖,首先總結(jié)了這樣幾個用戶任務(wù):提交待完成的真實(shí)人物照片;完成作品;隨便看看。三個任務(wù)的流程圖如下:

為什么流程圖沒有作用到IA設(shè)計過程中?
最終的產(chǎn)品是一個個頁面的集合,IA是這些頁面的組織形式,IA圖上的每一個節(jié)點(diǎn)就是一個頁面。流程圖的研究對象不是一個個頁面,而是一個個行為,所以,在IA的設(shè)計中不知該如何使用流程圖。
有時候整個IA設(shè)計完成后,設(shè)計者們還能想起來當(dāng)初畫過流程圖,可能會翻出流程圖來,校驗(yàn)一下設(shè)計出來的方案,看方案是否能讓這些任務(wù)順利。設(shè)計過程中并沒為流程而設(shè)計,事后的校驗(yàn)要想有好結(jié)果,恐怕要靠好運(yùn)氣了。
腫么辦?
因?yàn)榱鞒虉D的研究對象是行為而不是頁面,所以,在最終的基于頁面的產(chǎn)品設(shè)計方案中難以應(yīng)用,那么,我們想辦法把流程圖的研究對象轉(zhuǎn)化成頁面就成了唄~

第二步:將流程圖轉(zhuǎn)換為頁面簡圖

轉(zhuǎn)換時,只要粗略想好每個頁面大致的設(shè)計就好了,比如:這是一個列表頁;這是一個登錄頁…
這些比頁面原型更為簡略的圖是為了后面搭建IA用的,所以異常簡略,你甚至可以只是給每個頁面一個名字就夠了,此時無需過多考慮每個頁面內(nèi)的具體設(shè)計。給這些超簡略的圖起個名字:頁面簡圖。

上面這些頁面簡圖就是這個產(chǎn)品要包含的主要頁面了,把它們組織起來,使其有序,這就是
第三步:設(shè)計信息架構(gòu)

在第三步中需要說明的幾個問題:
? 有些頁面是重復(fù)的,只保留一個就好;
? 保留頁面間跳轉(zhuǎn)的那些鏈接、按鈕,它們是任務(wù)流暢的保障;
? IA的設(shè)計更側(cè)重于關(guān)注合內(nèi)容邏輯,易學(xué)習(xí)性。

通過這三步的設(shè)計方法,產(chǎn)品的架構(gòu)就搭建好了。頁面簡圖中已經(jīng)對每個頁面有了大致的設(shè)計,現(xiàn)在完成了IA,接下來就可以去細(xì)致的設(shè)計每個頁面了。

總結(jié)
頁面簡圖法是一個信息架構(gòu)的設(shè)計方法。這個方法通過頁面簡圖將流程圖翻譯為頁面和頁面間的跳轉(zhuǎn)關(guān)系,再組織這些頁面,形成信息架構(gòu)(IA)。

產(chǎn)品的最終包含的頁面是來自于第一步的一個個流程,并且在第二步、第三步中都一直保留著頁面間的跳轉(zhuǎn),這些都保證了“為流程而設(shè)計”。
第三步是專門的設(shè)計IA,待組織的這些頁面是根據(jù)任務(wù)流程一串串的,類似“選圖片”與“寫描述”一定是得歸在一堆兒的。IA的設(shè)計也會更有依據(jù)了?!盀榻Y(jié)構(gòu)而設(shè)計”也能做的更好了。

頁面簡圖法的三個步驟,每一步都是在設(shè)計,流程該怎么設(shè)計?怎么翻譯成頁面簡圖?信息架構(gòu)如何組織?不同的設(shè)計者會給出不同的結(jié)果。
設(shè)計方法只是給設(shè)計者提供一個更為靠譜兒的思路、框架,并不能代替設(shè)計者的頭腦。

如果你嘗試著應(yīng)用這個方法,可能會發(fā)現(xiàn),在有些時候,這個方法顯得沒啥價值,比如,要設(shè)計一個圖形工具類的產(chǎn)品,靠經(jīng)驗(yàn)就能判斷出顯然只有一個主界面,各種流程都是圍繞著這個主界面展開的,第二步翻譯出來的頁面簡圖會都比較接近,而第三步更是沒啥干的,而即使不用這個方法,之前就已經(jīng)能判斷出總共只有一個主界面。
針對特殊的產(chǎn)品,還應(yīng)該有更多的更有針對性的設(shè)計方法,我之后應(yīng)該還會總結(jié)出一些。與那些未來將誕生的設(shè)計方法相比,這里的這個方法應(yīng)該說是更為通用、普適的。

來源:http://www.chouyu.com.cn/?p=342

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!