作為設(shè)計師，我們首先是用戶的擁護(hù)者。

在用戶遇到我們的設(shè)計之前，我們需要了解他們想要什么和需要什么。一旦他們遇到它，他們必須首先感到安全和舒適。這有時與我們對創(chuàng)新的渴望形成反差——這就是為什么我們必須將這種渴望與用戶目標(biāo)結(jié)合起來。

要做到這一點(diǎn)，我們需要了解用戶的大腦是如何工作的——他們創(chuàng)建的幫助他們?yōu)g覽網(wǎng)絡(luò)的心智模型。這種理解為我們提供了一個平臺來進(jìn)行創(chuàng)作，這個過程被稱為神經(jīng)設(shè)計(neurodesign, 2012年推出)。

通過仔細(xì)的研究和可用性測試，我們可以更好地了解當(dāng)用戶或客戶面對一個好的(或壞的)體驗(yàn)時，他們的大腦是如何運(yùn)作的。我們可以利用這些知識來創(chuàng)造更好的體驗(yàn)。

在這篇文章中，我將解釋如何利用模式進(jìn)行更好的Web設(shè)計，以及何時打破這些模式才能給用戶留下持久的印象。

模式識別是一個認(rèn)知過程，在這個過程中，我們看到一個刺激物，并試圖將它與我們已知的相匹配。

這是我們用來解決問題的一種啟發(fā)式或捷徑。啟發(fā)法構(gòu)成了Gerd Gigerenzer最初所說的“適應(yīng)性工具箱”——在時間、資源或信息有限的情況下，我們用來做出決策的一組規(guī)則。

圖片來源:Vinoth Chandar。知識共享。

如果一種情況對我們來說是新的，我們會打開adaptive toolbox看看我們以前是否遇到過類似的情況。

作為用戶和設(shè)計師，我們通過與網(wǎng)絡(luò)的交互學(xué)習(xí)各種模式。因此，當(dāng)我們與網(wǎng)絡(luò)互動時，我們試圖將我們所看到的與我們已知的相匹配——例如，如果我們在一家商店中尋找特定的商品，之前的經(jīng)驗(yàn)告訴我們，我們可以(也應(yīng)該)能夠以一種非常特定的方式搜索它。

這種認(rèn)知和學(xué)習(xí)使我們能夠使用啟發(fā)式快速有效地瀏覽網(wǎng)絡(luò)，而不是每次都從頭開始思考交互。我們尋找過去通過最小化時間和最大化回報而成功的互動模式。如果我們找不到這些模式，我們通常會尋找另一頁可以提供熟悉和方便的內(nèi)容。

這些捷徑有時確實(shí)會讓我們誤入歧途，但它們往往奏效。正如Web UI最佳實(shí)踐中所解釋的，如果您希望您的網(wǎng)站成功，您必須非常熟悉這些模式和期望。

設(shè)計模式是一種記錄設(shè)計問題的通用解決方案的方法。

這里有許多優(yōu)秀的模式庫——ui模式，Yahoo的模式庫，和PatternTap等等，但這里有一些常見的設(shè)計和用戶界面模式的例子，以及它們解決的問題:

漢堡菜單:這段時間備受爭議，人們開始質(zhì)疑這到底是一種設(shè)計模式，還是一種糟糕的設(shè)計。無論如何，它無處不在，允許移動設(shè)備上有更多的空間。

在Web UI模式中可以找到更多的UI模式示例，其中包括63種以問題/解決方案格式描述的有用模式。

這就是我們可以開始使用這些神經(jīng)科學(xué)基礎(chǔ)知識使我們的工作更容易(或更復(fù)雜，取決于你怎么看它)的地方。我們還必須記住，用戶對網(wǎng)絡(luò)的感知與創(chuàng)建網(wǎng)絡(luò)的人是不同的。

當(dāng)我們?yōu)閃eb構(gòu)建時，我們會在發(fā)現(xiàn)各種設(shè)計問題的過程中使用設(shè)計模式。我們經(jīng)常從下到上進(jìn)行這樣的旅行:我們從我們面前的問題和它的各種元素開始，然后嘗試創(chuàng)造一個有凝聚力的體驗(yàn)。當(dāng)我們將接口分解為原子組件時，我們將自己沉浸在子問題、目標(biāo)、任務(wù)以及信息架構(gòu)和流中。

這就是為什么過了一段時間，我們就會對設(shè)計中的問題視而不見——我們不能把它看作一個整體。

但正如我在“使用模式設(shè)計更好的用戶體驗(yàn)”一文中所描述的，用戶不會以這種方式與界面交互。他們是自上而下的。

用戶看到的不是部分，而是它們的總和，并使用對規(guī)則的先驗(yàn)知識來指導(dǎo)他們的交互。他們在我們所建立的模式中尋找與過去類似產(chǎn)品或網(wǎng)站的經(jīng)驗(yàn)相匹配的模式(稱為外部一致性)，以幫助他們?yōu)g覽得更快。這種處理方法是快速的，但有時是錯誤的-特別是當(dāng)接口在某種程度上偏離了現(xiàn)狀。

因此，我們應(yīng)該確保網(wǎng)站的界面符合用戶的期望，也符合網(wǎng)站本身。例如，如果您選擇一個cards UI模式，由于該模式非常流行，大多數(shù)用戶知道如何導(dǎo)航內(nèi)容。為了防止混淆，您還必須在整個站點(diǎn)中一致地實(shí)現(xiàn)該模式。

我們的工作是引導(dǎo)用戶，使這個過程盡可能簡單和令人滿意，并確保他們在我們的界面中識別出足夠的模式，讓他們感到舒適。外部一致性(與競爭對手或其他網(wǎng)站相似)并不總是必要的，但是內(nèi)部一致性——產(chǎn)品內(nèi)部的一致性——是最重要的。

您將建立用戶的信心、信任和安全。

用戶對每次交互都有一個期望，不管交互是多么平常。

每一次眼睛對內(nèi)容的輕彈，每一次鼠標(biāo)的點(diǎn)擊，每一次按鍵的按下——所有這些都是由以前的經(jīng)驗(yàn)和交互指導(dǎo)的，用戶將期望從每一次操作中得到一定的結(jié)果。我們喜歡圖案——它們讓我們感到安全和快樂。

這種快樂發(fā)生在神經(jīng)化學(xué)水平上。每次我們成功地識別出一種模式，我們就會得到一股多巴胺——一種與快樂和獎勵有關(guān)的神經(jīng)化學(xué)物質(zhì)。然后，當(dāng)相互作用成功時，我們又得到一次顛簸。

當(dāng)某些東西是“直覺的”時，這本質(zhì)上意味著一個模式已經(jīng)被遵循，并且用戶的期望已經(jīng)被滿足——當(dāng)他們看到一個模式時，他們會很高興，當(dāng)模式按照預(yù)期運(yùn)行時，他們也會很高興。然而，如果這種模式被打破，多巴胺就不會出現(xiàn)，我們就會感到不滿足。當(dāng)然，用戶會將這種不滿與站點(diǎn)或產(chǎn)品聯(lián)系起來。

除了模式，我們還需要了解與之相關(guān)的期望，以便最大化多巴胺和最小化不滿。我們想給人們他們想要和期待的東西。

但我們也想成為創(chuàng)新者和創(chuàng)造者——畢竟，很少有客戶來找我們要求一個“符合期望”的網(wǎng)站，或者看起來像他們的競爭對手。這是一個艱難的平衡，但我們并沒有失去一切——我們只是需要更深入地挖掘。

在我們對創(chuàng)新的渴望中，我們希望開發(fā)新的、新穎的做事方式。然而，我們的嘗試也會疏遠(yuǎn)用戶。

例如，在我的博客中，我提到了Ello的設(shè)計，這是一個旨在最小化和創(chuàng)新的社交網(wǎng)絡(luò)，但卻打破了太多的模式。

例如，一個按鈕應(yīng)該看起來是可點(diǎn)擊的。如果他們沒有，最好有一個很好的理由(以及讓用戶學(xué)習(xí)的方法)。每次我們打破一種模式時，我們都想確保我們在問自己幾個困難的問題:

這些都不是容易回答的問題，所以在決定打破一種既定的模式之前要好好想想——這樣做值得嗎?

當(dāng)然，我們不應(yīng)該放棄所有的創(chuàng)新，只堅持我們所知道的——設(shè)計模式并不是一切。它們只是你自己創(chuàng)造力分層的基線。人們有能力學(xué)習(xí)和識別新的模式，特別是當(dāng)這些模式帶來回報的時候。

例如，考慮一下我們剛剛討論的多巴胺獎勵系統(tǒng)。我們提到，如果用戶期望得到獎勵并得到了獎勵，這就滿足了期望。如果他們期望得到回報卻沒有得到，這就會滋生不滿。

圖片來源:交互設(shè)計最佳實(shí)踐

但是，如果他們不期待獎勵呢?更好的是，如果他們不期待獎勵，但我們給了他們獎勵呢?

是的，我們打破了一種模式，但我們可以在用戶不需要的地方這樣做，我們可以贏得他們。我們可以通過在用戶不期望的情況下給予獎勵來強(qiáng)化新的模式，從而強(qiáng)化新的互動方式。在我們看來，這快樂的一刻是創(chuàng)新的關(guān)鍵，是成功打破常規(guī)和現(xiàn)狀的關(guān)鍵。

圖片來源:MailChimp的

當(dāng)然，在用戶沒有預(yù)料到的情況下，我們很難找到讓他們高興的機(jī)會——畢竟，如果用戶還沒有意識到，我們怎么能知道他們什么時候會特別高興呢?這就是測試的用武之地。

我們能找到何時打破哪種模式的唯一方法就是去嘗試，去實(shí)驗(yàn)，看看結(jié)果。

這些實(shí)驗(yàn)都是以經(jīng)過深思熟慮、構(gòu)思良好的用戶測試的形式進(jìn)行的。我們需要意識到我們試圖打破的模式，以及用戶如何看待它，為什么我們試圖打破它，以及如何打破它。有了原型，我們可以嚴(yán)格地控制和測試模式本身，即使用戶沒有意識到這種控制。

圖片來源:快速原型通過UXPin

例如，在UXPin中，我們可以使用現(xiàn)有的UI庫創(chuàng)建一個快速原型。然后，我們可以通過啟動遠(yuǎn)程可用性測試會話來驗(yàn)證這些模式(以及總體設(shè)計功能)的有效性。寫下核心任務(wù)，邀請用戶，然后開始體驗(yàn)真實(shí)時刻。

原型設(shè)計(和測試)之所以如此有用，是因?yàn)槿藗兂３o法清楚地表達(dá)自己的需求。用戶測試允許他們向我們展示。用戶行為正常，而我們觀察和傾聽他們的反應(yīng)。

下面是一個改進(jìn)現(xiàn)有web模式的示例流程:

沒有必要太過努力——當(dāng)用戶期望得到獎勵時，我們應(yīng)該給他們一個獎勵(或者至少提供一個不這樣做的絕佳理由)。然而，我們當(dāng)然可以探索打破模式的機(jī)會，創(chuàng)造新的令人愉快的互動方式。

當(dāng)談到改進(jìn)舊模式時;研究潛在的問題，問問為什么這種模式如此有用。正如世界著名設(shè)計師杰弗里·澤爾德曼曾經(jīng)說過的那樣，考慮打敗了模式。以前成功的設(shè)計模式，如果不加以考慮，只會損害你的網(wǎng)站。

亨利·福特曾說過一句可能被過度使用到陳詞濫調(diào)的名言:“如果我問我的客戶他們想要什么，他們會說是一匹更快的馬。”

說到網(wǎng)頁設(shè)計，我們可以也應(yīng)該以一種經(jīng)過深思熟慮的方式遵循模式。因?yàn)楦鞣N各樣的理由，它非常好，而且經(jīng)常是人們的首選。畢竟，我們接受這種模式是有原因的。

但當(dāng)我們不努力創(chuàng)新，只堅持模式時，我們只是在打造更快的馬。

免費(fèi)的電子書Web UI設(shè)計最佳實(shí)踐包括更多關(guān)于模式和其他技術(shù)的建議。這本109頁的電子書包括了一些實(shí)踐技巧，這些技巧是基于對30多家公司案例的分析。

標(biāo)簽： 成功網(wǎng)頁設(shè)計