編輯導(dǎo)語(yǔ)：本文介紹了一種能夠幫助保持 UI 的可擴(kuò)展性和一致性的思路，通過五個(gè)方面展示了一種新的方法，即：圍繞內(nèi)容元素構(gòu)建用戶體驗(yàn)的“面向?qū)ο蟆钡囊谎墼O(shè)計(jì)方法，感興趣的小伙伴一起來品讀吧。

基于任務(wù)的用戶流是 UX 設(shè)計(jì)的黃金標(biāo)準(zhǔn)。首先，檢查用戶的目標(biāo)。接下來，確定實(shí)現(xiàn)這些目標(biāo)所要完成的任務(wù)。最后，將這些任務(wù)放入一個(gè)邏輯序列中，這樣就是一個(gè)基于用戶的流程。這種方法是 UX 設(shè)計(jì)的主要內(nèi)容之一，它是經(jīng)過測(cè)試和證明的。

然而，本文介紹了一種不同的方法——圍繞內(nèi)容元素構(gòu)建用戶體驗(yàn)的“面向?qū)ο蟆钡囊谎墼O(shè)計(jì)方法。這是一種能夠幫助你保持 UI 的可擴(kuò)展性和一致性的思路。

為什么面向?qū)ο蟮挠脩趔w驗(yàn)設(shè)計(jì)方法有助于構(gòu)建可擴(kuò)展和一致的系統(tǒng)呢？

“隱喻”一旦被發(fā)現(xiàn)，就是一個(gè)完全確定的東西：對(duì)象的集合、對(duì)象上的動(dòng)作以及對(duì)象之間的關(guān)系?！?Dave Collins，設(shè)計(jì)面向?qū)ο蟮挠脩艚缑?/cite>(1995)

本人從事應(yīng)用程序和網(wǎng)站設(shè)計(jì) 20 多年。作為一名設(shè)計(jì)師，我總是稱自己為系統(tǒng)設(shè)計(jì)師。這是因?yàn)槲覍?yīng)用程序視為一個(gè)個(gè)內(nèi)容塊的編排，每個(gè)內(nèi)容塊都具有不同的屬性和功能，它們共同組合創(chuàng)造了用戶體驗(yàn)。過去，這種思路幫助我建立了更連貫的用戶體驗(yàn)，可以隨著業(yè)務(wù)需求的增長(zhǎng)而增長(zhǎng)。

一、基于任務(wù)的思維方式所存在的問題

我仍會(huì)使用設(shè)計(jì)流程，但我認(rèn)為它是一種驗(yàn)證系統(tǒng)的方法，而不是我的思維過程。逐例處理的方法將迫使你不斷整合需求，并更新相關(guān)組件。這將花費(fèi)時(shí)間，但如果不這樣做，會(huì)導(dǎo)致許多組件和系統(tǒng)難以維護(hù)。

最終，隨著更多流程分叉，設(shè)計(jì)系統(tǒng)將達(dá)到臨界點(diǎn)。此時(shí)，你要么重新設(shè)計(jì)重要的部分，要么弱化設(shè)計(jì)系統(tǒng)。如果開發(fā)還沒有開始，重新設(shè)計(jì)還是有可能的，但需要大量的設(shè)計(jì)工作。如果開發(fā)已經(jīng)開始，事情就會(huì)變得更加棘手。因?yàn)樵O(shè)計(jì)變更不僅需要額外的設(shè)計(jì)工作，還涉及額外的開發(fā)工作。

我們一定都經(jīng)歷過這種情況。你是怎么做的呢？長(zhǎng)遠(yuǎn)來看，這對(duì)你的用戶界面有什么影響？一兩次例外并不是最糟糕的，但是每次更新，你都將有更多的組件和異常情況需要考慮。對(duì)于用戶、設(shè)計(jì)師和開發(fā)人員來說，保持系統(tǒng)清晰簡(jiǎn)潔將變得更加困難。

二、面向?qū)ο蟮乃季S方式介紹

讓我用一個(gè)類比來說明這種思維方式。想象一下，你正試圖探索一個(gè)黑暗的地下室。你可以打著手電筒在里面穿梭。你也可以打開頂燈，從高處看。使用手電筒能夠幫助你獲得特定路線的更多細(xì)節(jié)，但你可能會(huì)錯(cuò)過場(chǎng)景的整體畫面。同樣，頂燈能夠?yàn)槟闾峁┱w概況，但你可能會(huì)錯(cuò)過一些細(xì)節(jié)。但是詳細(xì)描述一個(gè)系統(tǒng)要比改變它更容易。

面向?qū)ο蟮乃季S方式超越了個(gè)人用戶目標(biāo)（手電筒），它從整體的角度（頂光）來考慮界面。面向?qū)ο蟮姆椒ㄊ紫炔榭此械膬?nèi)容和數(shù)據(jù)（地下室的盒子），然后試圖創(chuàng)建一個(gè)高級(jí)地圖、一個(gè)定位系統(tǒng)、一個(gè)可擴(kuò)展的心智模型，最后才開始詳細(xì)說明它的細(xì)節(jié)（打開盒子）。

面向?qū)ο蟮乃季S方式并不新鮮，這在許多編程語(yǔ)言中都很常見。很多人可能已經(jīng)在某處應(yīng)用了面向?qū)ο蟮乃季S。但就在 2016 年，索菲亞·沃切霍夫斯基·普拉特（Sophia Voychehovski Prater ）第一次創(chuàng)造了這種面向?qū)ο蟮?UX（OOUX，Object-Oriented UX ）方法。

OOUX 從內(nèi)容出發(fā)，而不是界面或流程。面向?qū)ο蟮姆椒ɑ谡鎸?shí)的對(duì)象對(duì)應(yīng)用程序進(jìn)行建模。這些對(duì)象不一定是物理對(duì)象，而是用戶可以聯(lián)想到的東西。舉個(gè)例子：在購(gòu)物體驗(yàn)中，這些對(duì)象將是商品、貨架、購(gòu)物車和收銀臺(tái)。OOUX 的目標(biāo)是識(shí)別所有涉及的對(duì)象，其核心內(nèi)容元素、元數(shù)據(jù)、嵌套對(duì)象和用戶操作。

面向?qū)ο蟮捏w驗(yàn)設(shè)計(jì)（OOUX）方法如下：

1. 從用戶目標(biāo)出發(fā)，確定實(shí)現(xiàn)這些目標(biāo)所需的所有對(duì)象，并確保這些對(duì)象對(duì)用戶有意義；
2. 確定對(duì)象之間的關(guān)系。在處理用例時(shí)確定他們之間的關(guān)系；
3. 接下來，確定每個(gè)對(duì)象所需的操作。將用戶需要完成的事情與對(duì)象相映射，從而實(shí)現(xiàn)他們的目標(biāo)；
4. 最后，你需要確認(rèn)實(shí)際的內(nèi)容元素：核心內(nèi)容和對(duì)象元數(shù)據(jù)（也稱為屬性）。

請(qǐng)記住，這個(gè)過程可能不是線性的。你可能偶爾需要回滾，直到整個(gè)系統(tǒng)是穩(wěn)定的。一旦所有內(nèi)容有了索引，這些元素就會(huì)被優(yōu)先排序。因此，無(wú)論對(duì)象在何時(shí)何處顯示在用戶界面中，它都遵循一致的內(nèi)容層次結(jié)構(gòu)。

我不會(huì)深入討論實(shí)際過程。有很多優(yōu)秀的文章從各種角度涵蓋了這一點(diǎn)。如果你想了解更多，可以查看 Lindsay Eryn Sutton 的《An introduction to object-oriented UX and how to do it》。我將帶你了解面向?qū)ο蟮乃季S方法的兩個(gè)關(guān)鍵概念，幫助你在整個(gè)過程中做出更好的決定。

三、以面向?qū)ο蟮捏w驗(yàn)設(shè)計(jì)思維進(jìn)行設(shè)計(jì)

“抽象”是面向?qū)ο蟪绦蛟O(shè)計(jì)背后的核心概念之一。其方法是將對(duì)象簡(jiǎn)化為相關(guān)信息。從體驗(yàn)設(shè)計(jì)的角度來看，我將擴(kuò)展這個(gè)概念。利用抽象概念很重要，它能夠幫助你確定某些信息應(yīng)該組合成一個(gè)對(duì)象還是拆分成多個(gè)對(duì)象。

將你的應(yīng)用程序想象成賣水果這件事。水果是一個(gè)對(duì)象，如果用戶界面對(duì)所有水果的處理都相同，這個(gè)抽象程度就很棒。如果某些水果需要不同的內(nèi)容元素，你可能會(huì)將它們拆分開來，那么你將會(huì)有多個(gè)對(duì)象，例如蘋果、香蕉等，而不是一個(gè)叫做“水果”的對(duì)象。

利用抽象級(jí)別能夠幫助你控制系統(tǒng)的復(fù)雜性。對(duì)象越多，越復(fù)雜。了解哪個(gè)級(jí)別最適合你的應(yīng)用程序可能需要時(shí)間。你可能需要?jiǎng)?chuàng)建不同的抽象模型并進(jìn)行一些迭代。不要著急。內(nèi)容對(duì)象決定了基準(zhǔn)線。對(duì)象連同對(duì)象之間的關(guān)系，將共同決定架構(gòu)和心智模型。

對(duì)象及其關(guān)系創(chuàng)造了連貫一致的構(gòu)建模塊，形成了可識(shí)別和可關(guān)聯(lián)的心智模型。

此外，這些對(duì)象可以幫助你確定和設(shè)計(jì)各個(gè)組件。在大多數(shù)情況下，內(nèi)容對(duì)象會(huì)在整個(gè)用戶體驗(yàn)的不同位置被使用。若要了解它們的實(shí)例化位置及其出現(xiàn)的變體數(shù)量，可以檢查它們的嵌套位置。內(nèi)容對(duì)象的組件的優(yōu)先級(jí)將幫助你知道在哪個(gè)時(shí)刻需要哪些組件。這種方法可確保整個(gè)應(yīng)用程序或網(wǎng)站的外觀一致。

對(duì)象及其關(guān)系可以讓你很好地理解接口的需求。盡管它確實(shí)需要一些前期的理論工作，但它將創(chuàng)建一個(gè)更加一致的系統(tǒng)。此外，從長(zhǎng)遠(yuǎn)來看，這將節(jié)省你的時(shí)間和精力。那么可擴(kuò)展性呢？

四、擴(kuò)展面向?qū)ο蟮南到y(tǒng)

封裝是面向?qū)ο笏季S的另一個(gè)關(guān)鍵概念。對(duì)象應(yīng)該獨(dú)立工作，很少受到或不受到外部影響。只有嵌套的對(duì)象才應(yīng)該有某種程度的依賴關(guān)系。從用戶界面的角度來看，這對(duì)于創(chuàng)建更獨(dú)立工作的用戶界面組件很有用。

從用戶界面的角度來看，每個(gè)對(duì)象都應(yīng)該通過它自己的組件來呈現(xiàn)。大多數(shù)對(duì)象將有多個(gè)實(shí)例，但是這些實(shí)例化的層次結(jié)構(gòu)應(yīng)該是獨(dú)立的。它們應(yīng)該受到保護(hù)，免受外界影響。

讓我們回到上文提到的水果的例子，想象一個(gè)應(yīng)用程序中的水果對(duì)象。不管對(duì)象在結(jié)賬時(shí)顯示在網(wǎng)格、詳細(xì)信息頁(yè)還是購(gòu)物籃中，每個(gè)組件應(yīng)該獨(dú)立于顯示的位置。位置可能會(huì)影響可見操作，但是內(nèi)容和渲染方式應(yīng)該保持不變。這個(gè)概念將有助于設(shè)計(jì)更多封閉的交互和獨(dú)立的用戶界面組件。

封裝對(duì)象能夠創(chuàng)建更多獨(dú)立擴(kuò)展的封閉獨(dú)立的 UI 組件。

之前我談到了在基于流程設(shè)計(jì)時(shí)面臨重大設(shè)計(jì)變更的情況。如果做得徹底，這就是面向?qū)ο蠓椒ǖ拈W光點(diǎn)。最初規(guī)劃系統(tǒng)及其內(nèi)容時(shí)所做的努力應(yīng)該會(huì)讓你考慮到所有會(huì)改變規(guī)則的對(duì)象。在系統(tǒng)建模上所花費(fèi)的額外時(shí)間應(yīng)該為設(shè)計(jì)的可擴(kuò)展性打下基礎(chǔ)。此外，由于內(nèi)容對(duì)象的封裝性質(zhì)，今后在UI層面只需很少的整合工作。即使出現(xiàn)新的需求，對(duì)整個(gè)系統(tǒng)的影響也比較小，只是一兩個(gè)對(duì)象的補(bǔ)充。因此，需求的變化主要是一個(gè)進(jìn)化過程，而不是更廣泛的重新設(shè)計(jì)。

五、為什么流程仍然重要

正如我在開始提到的，我仍然會(huì)使用基于流程的設(shè)計(jì)方法，它在我的設(shè)計(jì)過程中仍然起著至關(guān)重要的作用。一旦系統(tǒng)就位，基于流程的思考能夠幫助我捕捉更多的上下文細(xì)節(jié)。此外，面向?qū)ο蟮姆椒ㄊ窍鄬?duì)抽象的，它與開發(fā)人員的心智模型一致。然而，對(duì)于產(chǎn)品團(tuán)隊(duì)或其他非技術(shù)利益相關(guān)者來說，面向?qū)ο蟮母拍羁赡芎茈y理解，而流程有助于演示整體系統(tǒng)并使其具象化。

總結(jié)

面向?qū)ο蟮捏w驗(yàn)設(shè)計(jì)（OOUX）提出了一種不同的思維方式來設(shè)計(jì)應(yīng)用程序。它從整體的角度處理用戶界面，把內(nèi)容放在第一位，幫助設(shè)計(jì)師建立一個(gè)以對(duì)象及其元素、屬性、動(dòng)作和關(guān)系為中心的系統(tǒng)。

玩轉(zhuǎn)系統(tǒng)的抽象層次，能幫助設(shè)計(jì)者控制系統(tǒng)復(fù)雜性。面向?qū)ο蟮脑O(shè)計(jì)思維有助于創(chuàng)建連貫一致的構(gòu)成要素，共同形成一個(gè)可識(shí)別和可關(guān)聯(lián)的心智模型。對(duì)象的元素優(yōu)先級(jí)驅(qū)動(dòng)各個(gè)內(nèi)容層次結(jié)構(gòu)，它確保整個(gè)應(yīng)用程序的UI組件一致。封裝的概念有助于設(shè)計(jì)獨(dú)立擴(kuò)展的封閉 UI 組件。因此，該方法支持應(yīng)用程序的自然增長(zhǎng)。它減少了重新設(shè)計(jì)和重新開發(fā)重要部件的需要。

最終，如果這篇文章啟發(fā)你深入研究面向?qū)ο蟮?UX，也許你甚至可以在你的下一個(gè)項(xiàng)目中嘗試一下。

原文標(biāo)題：Stop thinking about flows, start thinking about objects；作者：Matthias Dittrich

原文鏈接：https://uxdesign.cc/stop-thinking-about-flows-start-thinking-about-objects-16143c1b8b1f

翻譯：劉倩茹；授權(quán)獲?。簞①蝗悖晃恼聦徍耍和豸嵝瘢ㄒ孢_(dá)）；編輯：章欣怡

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 pixabay，基于 CC0 協(xié)議