2022-10-13 資深UI設(shè)計(jì)者
眾所周知，人機(jī)交互是一門集調(diào)研，構(gòu)思，設(shè)計(jì)和測(cè)試為一體的學(xué)科。作為一門覆蓋多領(lǐng)域的多學(xué)科，包括并不限于心理學(xué)，行為學(xué)，編程，工程，設(shè)計(jì)，調(diào)研，和工商管理，現(xiàn)代人機(jī)交互的核心已經(jīng)不再是從技術(shù)層面去解決問題， 而是側(cè)重于以多個(gè)視角去挖掘問題的本質(zhì)并思考問題背后的價(jià)值。也因此，人機(jī)交互學(xué)術(shù)界一直以來(lái)都試圖尋找一種思考模式，或者理論模型，去將復(fù)雜的思考流程提煉出來(lái)。
近三十年來(lái)，人機(jī)交互領(lǐng)域的方法論可謂百花齊放，盡管許多知名研究機(jī)構(gòu)與院校都發(fā)布了不同的設(shè)計(jì)模型與流程圖，但是其內(nèi)核終究大致相同（尋找問題——定義問題——設(shè)計(jì)——測(cè)試）。
以下是近年來(lái)國(guó)際最主流的七種人機(jī)交互設(shè)計(jì)模型：
1. 尼爾森諾曼集團(tuán)設(shè)計(jì)流程 （Nielsen Norman Group）
2. 斯坦福大學(xué)設(shè)計(jì)學(xué)院設(shè)計(jì)流程（Stanford Design Thinking Process）
3. 《情景化設(shè)計(jì):為生活而設(shè)計(jì)》 中的設(shè)計(jì)流程 （Contextual Design: Design for Life）
4. IBM環(huán)形設(shè)計(jì)模型 （IBM Loop Model）
5. 英國(guó)設(shè)計(jì)協(xié)會(huì)雙鉆石設(shè)計(jì)模型（Design Council Double Diamond）
6. LUMA 學(xué)院設(shè)計(jì)流程（LUMA Institute Design process）
7. Dubberly Design Office 橋型設(shè)計(jì)模型（Analysis-Synthesis Bridge Model）
其中，前6種應(yīng)該都是大家相對(duì)熟悉的，我們?cè)谖哪┮哺缴狭斯俜芥溄庸┐蠹姨剿鳌＝裉爝@篇文章我們將簡(jiǎn)要的帶大家了解列表中最后一個(gè)也是最有特色的一個(gè)人機(jī)交互模型：橋型模型（Analysis-Synthesis Bridge Model）。
橋型模型是美國(guó) Dubberly Design Office發(fā)表的設(shè)計(jì)流程圖（Analysis-Synthesis Bridge Model），對(duì)于不清楚的讀者，此公司的創(chuàng)始人Hugh Dubberly 曾發(fā)布超五十篇人機(jī)交互領(lǐng)域的研究型文章，在多個(gè)知名設(shè)計(jì)協(xié)會(huì)掛名，并被錄入美國(guó) ACM 的 SIGCHI Academy， 成為公認(rèn)對(duì)人機(jī)交互領(lǐng)域做出最杰出貢獻(xiàn)的人之一。Dubberly 也曾在多個(gè)美國(guó)知名大學(xué)任職，因此，此模型也是多數(shù)國(guó)際人機(jī)交互學(xué)科的公認(rèn)理論。
盡管相較于其他的流程圖，這個(gè)流程圖較為抽象，但是其所用的多維度分類卻相對(duì)明了的闡釋了設(shè)計(jì)的本質(zhì)。如圖所示，橋型模型的x軸分為現(xiàn)在和未來(lái)，y軸分為具象和抽象，以此來(lái)定義設(shè)計(jì)的狀態(tài)。同時(shí)也加入了動(dòng)詞“形容”，“分析”，“研究”，“制作”去定義設(shè)計(jì)中的操作。在這個(gè)橋型設(shè)計(jì)流程中，設(shè)計(jì)師從左下角到右下角的過程代表從現(xiàn)象走向抽象再?gòu)某橄笞呦虍a(chǎn)品的過程，與此同時(shí)也代表著從今天走向明天，或者說(shuō)從問題的現(xiàn)在態(tài)走向解決問題后的未來(lái)態(tài)。
起點(diǎn)從左下角開始，（what “is”）代表著問題本身，而左上角的（model of what “is”） 代表問題的抽象模型或者問題的本質(zhì)。這兩個(gè)階段代表著設(shè)計(jì)中的調(diào)研階段（Researching）。此時(shí)的設(shè)計(jì)師應(yīng)該通過“形容具象的現(xiàn)象”（左下角格子 Describe+Concrete）即收集信息來(lái)拓寬對(duì)問題的了解然后再進(jìn)行“分析抽象的模型”（左上角格子Interpret+Abstract）去制作問題模型來(lái)更清晰的看到現(xiàn)象的本質(zhì)和規(guī)律。
在這個(gè)階段，“世界并不清楚他想要什么樣的設(shè)計(jì)”—— Paola Antonelli
在開始階段之所以要抽象出問題模型，是因?yàn)樽鳛樵O(shè)計(jì)師不能單純的聽從人們的訴求。當(dāng)生活中出現(xiàn)一個(gè)問題時(shí)，生活中人們往往不太清楚自己煩惱的本質(zhì)是什么，要么他們只看到了問題的表面，要么他們被太多因素混淆了。因此在這個(gè)階段，設(shè)計(jì)師的責(zé)任就是去分析問題存在的環(huán)境與原因，并且以人為中心的角度去分析表象下人們的真正需求。也是因此，避免以技術(shù)為中心的分析（machine-centered-research）而選擇以人為中心的研究（human-centered-research）才是交互設(shè)計(jì)師應(yīng)有的職責(zé)。
在做以人為中心的研究時(shí)，收集和分析信息時(shí)避免內(nèi)隱偏見（unconcious bias）是非常重要的。這里指由于生長(zhǎng)在固定社會(huì)和文化下的而無(wú)意識(shí)帶有的偏見，比如身體健全的人忘記考慮殘疾人的需求，或者經(jīng)常用電子產(chǎn)品的人下意識(shí)認(rèn)為一些復(fù)雜操作很常規(guī)。在設(shè)計(jì)里，歧視不止包括在搜集用戶信息時(shí)忽略了個(gè)別群體，同時(shí)也包括設(shè)計(jì)師本身所帶的特定視角。一個(gè)成功的設(shè)計(jì)縱然應(yīng)該滿足大多數(shù)人的需求，但是一個(gè)向善的設(shè)計(jì)也不應(yīng)該忽視特殊群體的情況。這里不得不提到，雖然現(xiàn)如今很多設(shè)計(jì)往往依靠大數(shù)據(jù)來(lái)進(jìn)行設(shè)計(jì)，但是大數(shù)據(jù)本身就代表著忽略少部分群體的需求，導(dǎo)致少數(shù)群體的歧視愈發(fā)嚴(yán)重，甚至一度威脅到一些小眾的題材。因此在調(diào)研時(shí)考慮到人種，年齡，經(jīng)濟(jì)情況，教育程度，是否殘疾，和對(duì)科技的熟悉度可以更嚴(yán)謹(jǐn)?shù)姆治霾煌暯窍聠栴}的影響。
左下角常用的用戶研究方法有情景調(diào)查（contextual inquiry），利益相關(guān)者邏輯圖（stakeholder map)，和參與型研究(Participatory Research)等等。左上角常用的分析方式有帶入虛擬人格（persona）和流程圖（journey mapping）等等。
右側(cè)的兩個(gè)階段則代表問題的未來(lái)態(tài)或者設(shè)計(jì)原型態(tài)（prototyping）。右上角的 （model of what "could be")代表問題的未來(lái)的可能性，也就是一般說(shuō)的設(shè)計(jì)和構(gòu)思部分，而右下角的（what “could be”）就是將這些未來(lái)的可能性做出來(lái)，從概念化為產(chǎn)品。
然而如何從右上角的抽象模型到右下角具體設(shè)計(jì)呢？在這里便需要了解一個(gè)大致的設(shè)計(jì)信息層級(jí)。
如圖所示，一個(gè)設(shè)計(jì)的是由多層結(jié)構(gòu)組成的，從抽象到具象分為五個(gè)階段，策略（Strategy），內(nèi)容（Scope），結(jié)構(gòu)（Structure），框架（Skeleton），視覺（Surface）。一個(gè)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)應(yīng)該是從下而上發(fā)展的（從深層的策略到淺層視覺），并且每次在考慮深層的策略時(shí)應(yīng)該避免淺層的干擾。這是因?yàn)闇\層只是策略的表現(xiàn)的方式，而深層策略才是決定產(chǎn)品核心價(jià)值的關(guān)鍵。決定策略（Strategy）時(shí)應(yīng)該直接依據(jù)模型左上角“問題的本質(zhì)”來(lái)決定要設(shè)立什么樣的產(chǎn)品目標(biāo)。只有策略定了，才能確定這個(gè)產(chǎn)品的內(nèi)容與受眾群體。假如目標(biāo)是讓盲人點(diǎn)餐，那么內(nèi)容有可能就是在這個(gè)頁(yè)面提供特殊的菜單形式和電話快捷鍵。而假如目標(biāo)是讓人聽音樂，那么內(nèi)容可能就是提供音樂推薦與保存。而在結(jié)構(gòu)方面，確立內(nèi)容后只需要一個(gè)完善的邏輯，比如用戶的具體使用流程是什么，就可以快速具現(xiàn)這個(gè)產(chǎn)品的結(jié)構(gòu)。最后，框架和視覺階段則更多只是一種表現(xiàn)手法的選擇。無(wú)論最終選擇如何設(shè)計(jì)，只要保證框架和視覺元素在整個(gè)產(chǎn)品中保持一致并且符合產(chǎn)品定位即可。
從策略到視覺的過程也就是模型中從右上角到右下角的過程。每個(gè)設(shè)計(jì)師的目標(biāo)都應(yīng)該是以具象的產(chǎn)品實(shí)現(xiàn)相對(duì)抽象的策略。而要想讓視覺和策略緊密聯(lián)系，就應(yīng)該盡可能在每一步的過度時(shí)都考慮到前后步驟的銜接是否邏輯通順，避免層與層之間脫節(jié)的現(xiàn)象發(fā)生。盡管在現(xiàn)實(shí)中，層與層之間的分隔往往沒有這么清楚，但是這種分層的設(shè)計(jì)邏輯可以作為一個(gè)有用的構(gòu)思框架，讓設(shè)計(jì)師在發(fā)散思維的時(shí)候不偏離目標(biāo)。
而最后即便到了右下角的產(chǎn)品產(chǎn)出，一個(gè)完整的設(shè)計(jì)流程也不算結(jié)束。一個(gè)成功的設(shè)計(jì)總是需要多個(gè)設(shè)計(jì)迭代的。盡管在每一個(gè)一個(gè)迭代中，右下角可能是最終產(chǎn)出，但是在一個(gè)完整設(shè)計(jì)流程里，右下角還應(yīng)該連接左下角，將已經(jīng)完成的設(shè)計(jì)再一次進(jìn)行分析和測(cè)試并總結(jié)出優(yōu)缺點(diǎn)，再進(jìn)行下一輪的設(shè)計(jì)。
在右上角的設(shè)計(jì)部分中經(jīng)常使用的方法有故事模版（story boarding），紙質(zhì)低保真模版（paper prototyping），和以人為中心設(shè)計(jì)（human centered design）等等。
總而言之，橋型模型作為國(guó)際人機(jī)交互院校最常用的模型，從多個(gè)角度描述了從一個(gè)問題從研究到解決的過程。我們可以看得出，設(shè)計(jì)從來(lái)都不是一個(gè)隨性而為的過程。從左側(cè)的無(wú)偏見而系統(tǒng)的分析問題到右側(cè)的遵循結(jié)構(gòu)進(jìn)行設(shè)計(jì)，設(shè)計(jì)師都應(yīng)該在一個(gè)嚴(yán)謹(jǐn)?shù)目蚣芟逻M(jìn)行思考和設(shè)計(jì)，這樣才能做到有針對(duì)性的解決問題。在這里也希望大家能多多關(guān)注各類人機(jī)交互設(shè)計(jì)理念并從中獲取靈感亦或找到適合自己的設(shè)計(jì)流程。
下面是六種其他主流國(guó)際人機(jī)交互模型和官方鏈接供大家探索：
1. 尼爾森諾曼集團(tuán)設(shè)計(jì)流程 （Nielsen Norman Group）
研究問題領(lǐng)域（discover），探索不同可能（explore），測(cè)試設(shè)計(jì)（test)，和傾聽反饋(listen)
官網(wǎng)鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
2. 斯坦福大學(xué)設(shè)計(jì)學(xué)院設(shè)計(jì)流程（Stanford Design Thinking Process）
抽離問題(empathize)，定義問題(define)，尋找靈感(ideate)，制作原型(prototype)，測(cè)試成品(test)。
官網(wǎng)鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
3. 《情景化設(shè)計(jì):為生活而設(shè)計(jì)》 中的設(shè)計(jì)流程 （Contextual Design: Design for Life）
理解問題(understand)，發(fā)明未來(lái)(invent)，情景話設(shè)計(jì)(design)，制作原型(validate)，和開發(fā)產(chǎn)品(develop)。
書本鏈接：https://www.goodreads.com/book/show/33805307-contextual-design
4. IBM環(huán)形設(shè)計(jì)模型 （IBM Loop Model）
觀察(observe)，反思反饋(reflect)，和制作（make）。
官網(wǎng)鏈接： https://www.ibm.com/design/thinking/page/framework/loop
5. 英國(guó)設(shè)計(jì)協(xié)會(huì)雙鉆石設(shè)計(jì)模型（Design Council Double Diamond Model）
發(fā)現(xiàn)(discover)，定義(define)，制作(develop)，傳遞(deliver)。
6. LUMA 學(xué)院設(shè)計(jì)流程（LUMA Institute Design process）
看(looking)，理解(understanding)，制作(making)。
官網(wǎng)鏈接： https://www.luma-institute.com/about-luma/luma-system/
以上就是本篇的全部?jī)?nèi)容了，希望大家讀完后能對(duì)國(guó)際主流人機(jī)交互領(lǐng)域多了一些了解或者從中獲取一些啟發(fā)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com