交互設(shè)計(jì)師怎樣理解信息架構(gòu)?
這篇適合交互設(shè)計(jì)或者對交互設(shè)計(jì)感興趣的小伙伴們看。所以我就不解釋信息架構(gòu)是什么了。今天寫一下產(chǎn)品信息架構(gòu)的思考。
任何產(chǎn)品都有信息架構(gòu),或繁雜或簡單。在文中討論的時(shí)候,我大致把信息架構(gòu)分為兩種來例證。一種是比較簡單的信息架構(gòu),例如大多ToC產(chǎn)品,微信、QQ音樂、騰訊視頻等;一種是比較復(fù)雜的信息架構(gòu),例如大多ToB產(chǎn)品,運(yùn)維類產(chǎn)品、客戶關(guān)系管理系統(tǒng)、業(yè)務(wù)支撐系統(tǒng)等。我把第一種稱為“輕架構(gòu)”產(chǎn)品,第二種稱為“重架構(gòu)”產(chǎn)品。
輕架構(gòu)產(chǎn)品,需要提供給用戶一個(gè)簡單明了的信息架構(gòu),讓用戶使用方便、體驗(yàn)流暢。輕架構(gòu)產(chǎn)品不能讓用戶迷路,不能帶來太多的學(xué)習(xí)成本,面對海量普通用戶要做到可用且效率高。輕架構(gòu)產(chǎn)品可以通過做減法來聚焦。
重架構(gòu)產(chǎn)品,需要提供功能完備、結(jié)構(gòu)嚴(yán)謹(jǐn)?shù)男畔⒓軜?gòu),讓用戶能通過操作流程以使用各個(gè)功能。這樣的架構(gòu)會帶來一定的學(xué)習(xí)成本,有些重架構(gòu)產(chǎn)品甚至需要對使用人員進(jìn)行培訓(xùn)。重架構(gòu)產(chǎn)品的用戶群體一般比較聚焦。重架構(gòu)產(chǎn)品很難通過做減法來聚焦,而是需要對海量功能進(jìn)行合理整合、靈活布局來聚焦核心用戶場景。所以對重架構(gòu)產(chǎn)品,信息框架更難,且更重要。
我在華為的設(shè)計(jì)工作包括輕架構(gòu)產(chǎn)品和重架構(gòu)產(chǎn)品。
設(shè)計(jì)輕架構(gòu)產(chǎn)品的好處是輕松、愉快,用戶一般容易共感感知,甚至用戶就是你自己。難點(diǎn)在于突破和創(chuàng)新。
設(shè)計(jì)重架構(gòu)產(chǎn)品的好處是對交互設(shè)計(jì)師是一次磨練交互技能的好機(jī)會,信息架構(gòu)越復(fù)雜,對交互設(shè)計(jì)的要求就越高,鍛煉效果越好。難點(diǎn)在于,重架構(gòu)產(chǎn)品需要對業(yè)務(wù)的理解透徹,業(yè)務(wù)理解門檻高,海量功能不能做精簡,用戶是陌生群體, 需要用戶研究的支持才能理解用戶,信息結(jié)構(gòu)復(fù)雜導(dǎo)致交互設(shè)計(jì)難度高、錯(cuò)誤率高、費(fèi)力。設(shè)計(jì)重架構(gòu)產(chǎn)品對全局觀的要求非常高。
下面我會根據(jù)Jesse James Garrett在“用戶體驗(yàn)要素:以用戶為中心的產(chǎn)品設(shè)計(jì)”書中關(guān)于信息結(jié)構(gòu)的分類為維度,講述一下這些結(jié)構(gòu)在用戶體驗(yàn)設(shè)計(jì)的信息架構(gòu)設(shè)計(jì)中的作用,并會舉一些真實(shí)案例來討論如何使用這些結(jié)構(gòu)以幫助思考。
一、層級結(jié)構(gòu)(hierarchical structure)
“在層級結(jié)構(gòu)中,節(jié)點(diǎn)與其他相關(guān)節(jié)點(diǎn)之間存在父級/子級的關(guān)系。子節(jié)點(diǎn)代表著更狹義的概念,從屬于代表著更廣義類別的父節(jié)點(diǎn)。不是每個(gè)節(jié)點(diǎn)都有子節(jié)點(diǎn),但是每個(gè)節(jié)點(diǎn)都有一個(gè)父節(jié)點(diǎn),一直往上直到整個(gè)結(jié)構(gòu)的父節(jié)點(diǎn)。層級關(guān)系的概念對于用戶來說非常容易理解,同時(shí)軟件也是傾向于層級的工作方式,因此這種類型的結(jié)構(gòu)是最常見的。”
這是最常見的一種方式,樹狀圖、家族圖譜等,都是這個(gè)路線。這個(gè)路線蠻符合大自然的。這個(gè)結(jié)構(gòu)相信大部分設(shè)計(jì)師都使用過,所以普通場景不做過多討論。這里我想重點(diǎn)講的是層級結(jié)構(gòu)的一種平衡式使用方式。
什么是平衡式使用方式呢?
這個(gè)也是我最近想出來……首先我們知道,層級結(jié)構(gòu)可以帶來兩種設(shè)計(jì)思路。
第一種,從上到下。從產(chǎn)品主要愿景,一步一步細(xì)分到每個(gè)功能特性。
第二種,從下到上。從對用戶有價(jià)值的功能特性開始,一步一步往上倒推到產(chǎn)品靈魂。
如果你讀了我上一篇關(guān)于設(shè)計(jì)流程的思考,這兩種方式就是戰(zhàn)略層、范圍層雙向的方式。
第一種很容易理解,戰(zhàn)略定了一個(gè)大方向,管理層傳達(dá)并指導(dǎo),執(zhí)行層輸出,一步一步分解任務(wù)直到任務(wù)量清晰、執(zhí)行后得到產(chǎn)品結(jié)果。
第二種在重架構(gòu)產(chǎn)品中使用的不少,例如一個(gè)給中國電信客服做的ToB產(chǎn)品,得先了解客服人員每天工作的任務(wù)流、操作流、所需模塊集合,然后倒推規(guī)整為一個(gè)一個(gè)功能模塊,再倒推形成一個(gè)系統(tǒng)。
最近我做重架構(gòu)產(chǎn)品,第二種方法用的蠻多。是有點(diǎn)費(fèi)腦子,但是嘿嘿,我研究生博弈論這門課是A+呢不怕不怕。lol
這兩種方式都有缺陷。
我舉一個(gè)近期的設(shè)計(jì)例子,是一個(gè)重架構(gòu)產(chǎn)品,首先,產(chǎn)品的戰(zhàn)略層已經(jīng)確認(rèn),換言之,從上到下是合理的思路;但是,產(chǎn)品過于復(fù)雜且功能特性多、合作部門跨度大,這時(shí)看上去從下到上才是正解。
問題就出現(xiàn)了。如果從上到下分解,到了底層功能特性太多且不合使用邏輯,就紊亂了。如果從下到上倒推,功能特性有組合邏輯,但是到了頂層,產(chǎn)品靈魂又很難對上最開始戰(zhàn)略層制定的方向。
怎么辦呢?再看一下這個(gè)圖:
我把戰(zhàn)略層的第一點(diǎn),最高父節(jié)點(diǎn),稱為大將;把底層眾多的功能特性稱為小兵?,F(xiàn)在的問題是,大將下達(dá)指令,小兵凌亂;小兵自行組合,大將不能接受結(jié)果。所以我想,應(yīng)該使用最高父節(jié)點(diǎn)和底層節(jié)點(diǎn)中間的那些點(diǎn),我稱為隊(duì)長。隊(duì)長整理小兵,形成合力的隊(duì)伍,隊(duì)長對大將負(fù)責(zé),在隊(duì)長層合力融合,最終完成軍隊(duì)的戰(zhàn)斗力合成。
這就是我對平衡式使用方式的思考過程。從上到下不行,從下到上也不行,就從中間動手。我們把海量的功能特性與系統(tǒng)架構(gòu)師確認(rèn)好,然后通過用戶訪談對我們針對的目標(biāo)用戶進(jìn)行測試,讓他們對海量功能特性進(jìn)行認(rèn)知并分組。這時(shí)候,一個(gè)經(jīng)過系統(tǒng)架構(gòu)師和目標(biāo)用戶驗(yàn)證的中層結(jié)構(gòu)就定好了。這時(shí)候“隊(duì)長”已經(jīng)產(chǎn)生。此時(shí),再思考戰(zhàn)略層對產(chǎn)品特質(zhì)、靈魂的定位,順推合理的中層結(jié)構(gòu),這時(shí),另一群“隊(duì)長”也產(chǎn)生了,他們是能實(shí)現(xiàn)戰(zhàn)略層(父節(jié)點(diǎn))要求的。然后兩組“隊(duì)長”開始融合,從中間出發(fā),對上對下各做調(diào)整和妥協(xié),最后得到一個(gè)統(tǒng)一信息架構(gòu)。這個(gè)結(jié)果的重點(diǎn)是中層結(jié)構(gòu)“隊(duì)長”。這個(gè)中層結(jié)構(gòu)向上能滿足戰(zhàn)略層的要求,向下能滿足底層海量特性功能的實(shí)現(xiàn)。
問題解決了。
交互設(shè)計(jì)需要精進(jìn)的一個(gè)點(diǎn),就是解決復(fù)雜信息結(jié)構(gòu)。解決復(fù)雜信息結(jié)構(gòu)的過程和結(jié)果,會直接影響交互設(shè)計(jì)師的設(shè)計(jì)執(zhí)行力和設(shè)計(jì)影響力。
二、自然結(jié)構(gòu)(organic structures)
“自然結(jié)構(gòu)不會遵循任何一致的模式。節(jié)點(diǎn)是逐一被連接起來的,同時(shí)這種結(jié)構(gòu)沒有太強(qiáng)烈的分類概念。自然結(jié)構(gòu)對于探索一系列關(guān)系不明確或一直在演變的主題是很合適的。但是自然結(jié)構(gòu)沒有給用戶提供一個(gè)清晰的指示,從而讓用戶能感覺他們在結(jié)構(gòu)中的哪個(gè)部分。如果你想要鼓勵(lì)自由探險(xiǎn)的感覺,比如某些娛樂或教育網(wǎng)站,那自然結(jié)構(gòu)可能會是個(gè)好的選擇;但是,如果你的用戶下次還需要依靠同樣的路徑,去找到同樣的內(nèi)容,那么這種結(jié)構(gòu)就可能會把用戶的經(jīng)歷變成一次挑戰(zhàn)。”
這樣的模式在現(xiàn)在的ToC產(chǎn)品越來越多(特別是游戲娛樂產(chǎn)品)。它符合輕架構(gòu)產(chǎn)品的瀏覽式形態(tài)。
有一種經(jīng)典的區(qū)分用戶場景的維度是:任務(wù)式、瀏覽式。
任務(wù)式的特點(diǎn):完成任務(wù)、快、準(zhǔn)確、效率,例如查詢某個(gè)航班到達(dá)的時(shí)間。
瀏覽式的特點(diǎn):碎片、時(shí)間充裕、逛、發(fā)散、不聚焦、注意力吸引式,例如漫無目的地刷微博、看知乎。
自然結(jié)構(gòu)很適合輕架構(gòu)產(chǎn)品的瀏覽式形式。因?yàn)榈谝?,重架?gòu)產(chǎn)品,ToB產(chǎn)品,如果用戶需要靠瀏覽靠猜來使用產(chǎn)品特性完成任務(wù),那肯定結(jié)果是不好的,用戶會崩潰;第二,ToC產(chǎn)品一般就有兩種形態(tài),如果不是任務(wù)式,那很有可能就是用戶在無聊,需要進(jìn)入瀏覽式。
當(dāng)然,完全自然結(jié)構(gòu)的設(shè)計(jì)方式很少(不知道最近很火的秘密算不算)。
大部分ToC產(chǎn)品應(yīng)該是任務(wù)式和瀏覽式并行的。所以自然結(jié)構(gòu),應(yīng)該是綁定其他信息結(jié)構(gòu)來思考。
例如騰訊視頻。自然結(jié)構(gòu)肯定是應(yīng)該考慮綁定層級結(jié)構(gòu)來思考。用戶進(jìn)入視頻產(chǎn)品,可能的一種使用方式是,用戶心里已經(jīng)有一個(gè)明確的思路,找2014年美國電影看,所以用戶進(jìn)入種類選擇,選擇電影,選擇美國電影,選擇2014年,然后進(jìn)行瀏覽。這個(gè)可以算是先層級結(jié)構(gòu)思考、后自然結(jié)構(gòu)思考。
如果用戶是在家里喝茶,想看看視頻,但是沒有任何目的,打開了視頻產(chǎn)品,那他們就是進(jìn)行瀏覽式操作,這個(gè)時(shí)候自然架構(gòu)就產(chǎn)生價(jià)值。用戶在首頁進(jìn)行無邏輯瀏覽,從首頁某個(gè)電視劇點(diǎn)入,看看詳情,不感興趣,從該電視劇的推薦點(diǎn)擊到下一個(gè)電視劇,然后不感興趣,然后從這個(gè)電視劇的主演想到他正在演出的一個(gè)電視真人秀,又跑去綜藝?yán)餅g覽。
每個(gè)產(chǎn)品對層級結(jié)構(gòu)和自然結(jié)構(gòu)的偏重是不同的。例如電商類產(chǎn)品,大部分人去天貓是有明確購買目的的,這個(gè)時(shí)候任務(wù)類操作會更重要;但是有沒有完全沒有購買目的,就是想去天貓花點(diǎn)錢或者找點(diǎn)折扣產(chǎn)品呢?肯定有,但是可能不如第一種用戶多。
所以在信息架構(gòu)設(shè)計(jì)中,我認(rèn)為自然結(jié)構(gòu)會是一個(gè)重要思考點(diǎn),因?yàn)槲覀冊O(shè)計(jì)師要時(shí)刻記得,用戶不是理性的,他們很多時(shí)候的操作和想法會呈現(xiàn)隨機(jī)狀態(tài)。但是自然結(jié)構(gòu)不是唯一的,必須有層級結(jié)構(gòu)、線性結(jié)構(gòu)、矩陣結(jié)構(gòu)等其他信息框架來配合和約束,才能讓這個(gè)產(chǎn)品的整體信息架構(gòu)完整、可用、有效。
三、線性結(jié)構(gòu)(sequential structures)
“線性結(jié)構(gòu)來自于你最熟悉的線下媒體。連貫的語言流程是最基本的信息結(jié)構(gòu)類型,而且處理它的裝置早已被深深地植入我們的大腦中了。書、文章、音像和錄像全部都被設(shè)計(jì)成一種線性的體驗(yàn)。在互聯(lián)網(wǎng)中線性結(jié)構(gòu)經(jīng)常被用于小規(guī)模的結(jié)構(gòu),例如單篇的文章或單個(gè)專題;大規(guī)模的線性結(jié)構(gòu)則被用于限制那些需要呈現(xiàn)的內(nèi)容順序?qū)τ诜嫌脩粜枨蠓浅jP(guān)鍵的應(yīng)用程序,比如教學(xué)資料。”
線性結(jié)構(gòu)比較容易理解。更多呈現(xiàn)在幫助文檔、產(chǎn)品故事講述等場景。就不多描述了。
這里我想重點(diǎn)提一下就是線性結(jié)構(gòu)是另外一種練習(xí)交互設(shè)計(jì)邏輯的方法。一個(gè)極端是復(fù)雜信息架構(gòu)(層級、自然、矩陣等),另一個(gè)極端就是線性結(jié)構(gòu)。如何用連貫的語言方式講述一個(gè)故事,但是不能進(jìn)行跳轉(zhuǎn)和穿插,要一條線把思路講清楚,反而不是一件簡單的事情。
所以交互設(shè)計(jì)需要鍛煉兩個(gè)極端的信息架構(gòu)描述方式。一個(gè)是復(fù)雜信息架構(gòu),充滿了層級、跳轉(zhuǎn)、補(bǔ)充、交叉;一種是極簡的線性架構(gòu),一根主線講清楚一個(gè)故事,甚至是復(fù)雜的故事。
四、矩陣結(jié)構(gòu)(matrix structure)
“矩陣結(jié)構(gòu)允許用戶在節(jié)點(diǎn)與節(jié)點(diǎn)之間沿著兩個(gè)或更多的“維度”移動。由于每一個(gè)用戶的需求都可以和矩陣中的一個(gè)“軸”聯(lián)系在一起,因此矩陣結(jié)構(gòu)通常能幫助那些“帶著不同需求而來”的用戶,使他們能在相同內(nèi)容中尋找各自想要的東西。舉個(gè)例子來說,如果你的某些用戶確實(shí)很想通過顏色來瀏覽產(chǎn)品,而其他人偏偏希望能通過產(chǎn)品的尺寸來瀏覽,那么矩陣結(jié)構(gòu)就可以同時(shí)容納這兩種不同的用戶。然而,如果你期望用戶把這個(gè)當(dāng)成主要的導(dǎo)航工具,那么超過三個(gè)維度的矩陣可能就會出現(xiàn)問題。在四個(gè)或更多維度的空間下,人腦基本上不可能很好地可視化這些移動。”
這個(gè)結(jié)構(gòu)非常好理解。這里想講的是,現(xiàn)在大部分設(shè)計(jì)團(tuán)隊(duì)的KPI評估方式,就是矩陣結(jié)構(gòu)。一方面,向業(yè)務(wù)線負(fù)責(zé),以設(shè)計(jì)支撐產(chǎn)品商業(yè)成功;一方面,向設(shè)計(jì)線負(fù)責(zé),以設(shè)計(jì)專業(yè)經(jīng)驗(yàn)支撐團(tuán)隊(duì)專業(yè)影響力建設(shè)和技能成長建設(shè)。
設(shè)計(jì)師如何平衡這個(gè)矩陣結(jié)構(gòu)管理方式,是設(shè)計(jì)師成長的關(guān)鍵點(diǎn)之一。
設(shè)計(jì)師做完一個(gè)產(chǎn)品,一定要回頭從信息架構(gòu)層開始往下想,這個(gè)產(chǎn)品信息架構(gòu)你做了什么樣的創(chuàng)新、調(diào)整,產(chǎn)生了什么價(jià)值。不要僅僅拘泥于做界面元素的規(guī)范、設(shè)計(jì)細(xì)節(jié)問題解決沉淀等。因?yàn)樾畔⒓軜?gòu),是交互設(shè)計(jì)大局觀的最好錘煉基石。
謝謝閱讀!
thanks,yoyo :)
本文地址:http://m.pkvc.cn/tutorial/id2316.html
您可能還喜歡
- 關(guān)于第三方注冊和本地注冊的選擇
- 8大網(wǎng)頁前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁設(shè)計(jì)中引人入勝的引導(dǎo)頁設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開始