在設(shè)計(jì)用戶界面時(shí)，會(huì)遇到常見(jiàn)問(wèn)題的重復(fù)解決方案。那么，在界面設(shè)計(jì)中有些什么樣的模式呢？

寫(xiě)在前面

為了理解用戶交互設(shè)計(jì)中的模式是什么，只需與現(xiàn)實(shí)世界的對(duì)象進(jìn)行類比即可。在自然界中重復(fù)模式，裝飾房間和衣服，或人類行為模式（習(xí)慣）具有可預(yù)測(cè)的重復(fù)元素。因此，在設(shè)計(jì)用戶界面時(shí)，會(huì)遇到常見(jiàn)問(wèn)題的重復(fù)解決方案。

只要您了解哪種模式解決了特定問(wèn)題，您就可以通過(guò)高效工作來(lái)節(jié)省時(shí)間。在創(chuàng)造性旅程的早期階段，設(shè)計(jì)師經(jīng)常犯錯(cuò)誤，花費(fèi)大量時(shí)間尋找獨(dú)特的解決方案，而不是尋找合適的解決方案。在這種情況下，獨(dú)特并不總是最好的，許多好的解決方案已經(jīng)被商店的同事使用并且非常成功。

我認(rèn)為沒(méi)有必要羞于從最好的方面學(xué)習(xí)并每次檢查自己，實(shí)施價(jià)值是否超過(guò)實(shí)施成本。更常見(jiàn)的是，設(shè)計(jì)師在不深入理解問(wèn)題的情況下應(yīng)用此技術(shù)。因此，該決定是不恰當(dāng)?shù)?。這導(dǎo)致了在下一個(gè)開(kāi)發(fā)階段難以解決的問(wèn)題的連鎖反應(yīng)。

還有一個(gè)關(guān)于模式重要性的小評(píng)論，還記得你回家打開(kāi)燈的那一刻嗎？

我不是。這個(gè)動(dòng)作已經(jīng)調(diào)試好了，通過(guò)按慣性移動(dòng)開(kāi)關(guān)，手一段時(shí)間后仍然可以到達(dá)通常位置。與您的設(shè)計(jì)相同，沒(méi)有必要使用戶的生活復(fù)雜化。我們都習(xí)慣了模態(tài)窗口右下角的十字架，除非你為自己設(shè)定這樣一個(gè)目標(biāo)，否則不要分散用戶的注意力。但在這種情況下，有必要理解“什么”和“為什么”。

鉆研理論

如果明白為什么要研究模式，我建議仔細(xì)研究用戶界面設(shè)計(jì)模式的要點(diǎn)。

模式可以分為一下3個(gè)模塊

1. 上下文
2. 場(chǎng)景（流程）
3. 實(shí)施

“上下文”，即最高級(jí)別，依賴于資源的總體方向 – 它可以是醫(yī)療保健網(wǎng)站或商業(yè)，它可以刺激購(gòu)買(mǎi)或成為信息資源。目標(biāo)受眾研究提供了對(duì)風(fēng)格相關(guān)性的深入了解。

在中間“場(chǎng)景”級(jí)別，考慮典型的用戶場(chǎng)景和實(shí)現(xiàn)目標(biāo)所需的一系列動(dòng)作。例如 – 導(dǎo)航，注冊(cè)或填寫(xiě)表格。

在“實(shí)施”的較低級(jí)別，解決了與屏幕上元素放置相關(guān)的問(wèn)題，在產(chǎn)品中選擇顏色（紅色 – 危險(xiǎn)，綠色 – 有利）。

常用的圖案

1. 模式導(dǎo)航

允許用戶瀏覽產(chǎn)品，快速找到所需內(nèi)容。示例：菜單、標(biāo)簽、面包屑。

2. 輸入模式

這些模式允許用戶通過(guò)輸入信息和獲得反饋來(lái)與系統(tǒng)交互。示例：文本框、選擇框、復(fù)選框、下拉列表、下載字段等。

3. 內(nèi)容Feed（處理數(shù)據(jù)）

如何為快速查看，搜索和使用內(nèi)容提供內(nèi)容。示例：畫(huà)廊、桌子、卡片。

4. 社交（社交）

用戶如何在線與他人溝通和交流。示例：聊天、積分系統(tǒng)、董事會(huì)、評(píng)論。

那么在實(shí)踐中應(yīng)該怎么辦呢？

你需要檢查模板是否滿足你的需求？

1. 問(wèn)題：使用該模版有什么問(wèn)題，需要我們?cè)趺礃咏鉀Q；
2. 原則：該模式基于一個(gè)或多個(gè)人體工程學(xué)原理；
3. 決定：僅描述問(wèn)題的本質(zhì)，可以通過(guò)不同方式解決；
4. 為什么：為什么可以應(yīng)用此模式來(lái)解決此問(wèn)題以及它將如何影響可用性；
5. 案例：一個(gè)成功應(yīng)用模板的示例。

考慮模式使用模式的7個(gè)組件的示例

有什么問(wèn)題？

用戶在表單中輸入不正確的數(shù)據(jù)，這會(huì)導(dǎo)致錯(cuò)誤并且無(wú)法進(jìn)一步處理信息。

是什么原因造成的？

您正在開(kāi)發(fā)一個(gè)應(yīng)用程序，您需要在其中執(zhí)行數(shù)學(xué)運(yùn)算（僅提供數(shù)值）。數(shù)據(jù)從鍵盤(pán)輸入。由于錯(cuò)誤或無(wú)知，用戶輸入錯(cuò)誤的格式，這會(huì)導(dǎo)致錯(cuò)誤并且缺少所需的結(jié)果。

什么原則適用？

防止錯(cuò)誤（J.尼爾森）

如何解決問(wèn)題？

最大限度地減少可以發(fā)生錯(cuò)誤的條件數(shù)。限制無(wú)效數(shù)據(jù)輸入。提供質(zhì)量錯(cuò)誤消息。

為什么解決這個(gè)問(wèn)題？

消除無(wú)法控制的錯(cuò)誤會(huì)導(dǎo)致對(duì)系統(tǒng)和用戶忠誠(chéng)度的信任感。

已經(jīng)存在哪些解決這個(gè)問(wèn)題的例子？

Google使用工具提示來(lái)減少輸入的錯(cuò)誤數(shù)據(jù)量。

計(jì)算器僅使用數(shù)字字符。

寫(xiě)在最后

事實(shí)上，無(wú)論如何，我們都會(huì)根據(jù)之前的經(jīng)驗(yàn)做出設(shè)計(jì)決策，這是使用模式的典型例子。但通過(guò)學(xué)習(xí)了解您的動(dòng)機(jī)以及這些相同決策的相關(guān)性，您可以定性地更改您正在處理的產(chǎn)品并提高您的專業(yè)水平。它就像一只蜈蚣，在它理解了如何行走之后學(xué)會(huì)了它。

作者：КАТЕРИНА ВИТКОВСКАЯ（作者已授權(quán)）

原文地址：http://telegraf.design/shablony-v-proektyrovanyy-ynterfejsov/

本文由Tzw_n 翻譯發(fā)布于公眾號(hào)「小阿田的設(shè)計(jì)筆記」，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖作者提供