任何UI設(shè)計(jì)的討論總是會(huì)回到界面模式。

在免費(fèi)電子圖書描述人眼的網(wǎng)頁設(shè)計(jì)，UI模式起源于共同的可用性問題的解決方案，其有效性直接相關(guān)的流行和收養(yǎng)。這意味著更多的一種特定的方式被使用，它就變得……這意味著更多的網(wǎng)站將開始使用它更強(qiáng)大。

來源Web UI工具包

在這篇文章中，我們將深入探討界面模式的解剖和如何選擇它們作為快捷方式來滿足用戶的解釋。

啟示與能指：UI模式的基礎(chǔ)

啟示是什么產(chǎn)品可以做。符號是視覺提示，告訴用戶能做什么。在原子水平上，所有UI模式組成的能指在界面提示的啟示。

舉個(gè)簡單的例子，比方說，一個(gè)網(wǎng)頁可以保存到收藏夾Dribbble。

該頁提供了被收藏。然而，如果沒有能指，用戶將不知道。現(xiàn)在，如果網(wǎng)頁沒有在這種情況下，一個(gè)能指–，心臟圖標(biāo)–然后用戶直觀地了解網(wǎng)頁可以收藏。感知的一致性，因此，基于用戶解釋什么是指。當(dāng)然，一個(gè)認(rèn)知功能可見性應(yīng)該總是與實(shí)際一致性同步。

來源Dribbble。

對于能指和啟示的過程通常是相同的方式。用戶將看到一個(gè)能指（心臟圖標(biāo)），得到一個(gè)印象是什么網(wǎng)站可以做，感知的啟示（“我最喜愛的人民在Dribbble”）。

用得好，能節(jié)省時(shí)間在解釋功能發(fā)揮用戶的已有知識(shí)。他們給網(wǎng)站一個(gè)直觀的和熟悉的感覺，因?yàn)槿绻脩粢呀?jīng)使用過–因?yàn)樗麄冇校蛑辽偎囊恍?/p>

關(guān)于我們想照亮這里的能指的是<的重要利益堅(jiān)持使用能指從其他網(wǎng)站和應(yīng)用程序會(huì)降低你自己的解釋。使用能指是一致的其他網(wǎng)站將簡化自己的設(shè)計(jì)。

了解更多關(guān)于啟示和能指的范疇，我們建議這篇文章在雜志社作為我們讀過的最全面的碎片。

不同的UI模式類別

成千上萬的圖案可供選擇，選擇合適的人可以成為壓倒性的。一個(gè)很好的第一步是將他們分為不同的組，根據(jù)他們的功能。模式都有一個(gè)設(shè)計(jì)的影響不同，所以分為幾組（基于使用的分類界面模式，一個(gè)網(wǎng)絡(luò)上最好的資源）可以讓你知道哪些可以幫助，哪些可以忽略。

數(shù)據(jù)交互此型艾滋病贈(zèng)送和接收數(shù)據(jù)，并使更深的相互作用。這不僅包括用戶如何將數(shù)據(jù)發(fā)送到網(wǎng)站，而且網(wǎng)站如何回應(yīng)反饋。
簡化這些模式提供了典型問題的捷徑，以減少摩擦和認(rèn)知負(fù)荷。在本質(zhì)上，他們簡化整個(gè)UX。
導(dǎo)航如果每個(gè)人都得到了一個(gè)網(wǎng)站是不好的，這些模式幫助用戶定位自己，找到自己的目的地。
獎(jiǎng)勵(lì)有時(shí)你需要一點(diǎn)推動(dòng)具有一定特色的互動(dòng)。這些模式激勵(lì)用戶執(zhí)行某些操作（或至少不放棄），有時(shí)用一個(gè)小的獎(jiǎng)勵(lì)制度，探索大腦的習(xí)慣回路。
層次結(jié)構(gòu)這些模式建立的視覺層次，讓用戶明白，哪些元素是比其他人更重要。例如，你的部分你的網(wǎng)站或奠定一切與同一平面卡片布局？
社會(huì)媒體這些模式不僅方便用戶從你的網(wǎng)站上分享的內(nèi)容，但也提供了一種信任的感覺。
這六個(gè)選項(xiàng)都只是一些組織模式的許多方面。下面，我們將解釋一個(gè)分類系統(tǒng)，適用于每一類。

不同層次的界面模式

安德斯toxboe，詳盡深入的創(chuàng)始人UI patterns.com，說明模式可以在不同層面，以不同的方式。超越基于分類他們做了什么，模式可以進(jìn)一步分為他們是如何使用的。例如，一些模式是靈活的，在不同的網(wǎng)站類型，而另一些人則停滯不前，不管他們在哪里出現(xiàn)。

我們將描述這些模式的基礎(chǔ)上toxboe的UI模式金字塔。

1。實(shí)施

模式的實(shí)施而言，純粹在你的頁面的一致性。

例如，你可能會(huì)得到你如何設(shè)計(jì)網(wǎng)站上的圖片輪播一點(diǎn)創(chuàng)意，實(shí)現(xiàn)模式保證治療在每一頁都是一致的。

來源貓頭鷹的旋轉(zhuǎn)木馬。

值得注意的是，有–定制點(diǎn)的位置變化的一些房間，有時(shí)外面的圖片，有時(shí)加在他們。

正如我們所描述的免費(fèi)電子書在UI設(shè)計(jì)的一致性首先，你要設(shè)計(jì)在某種程度上是基于他們現(xiàn)有的知識(shí)的用戶熟悉的用戶界面模式（外部性）。當(dāng)談到時(shí)間，然后建立這些模式在您的網(wǎng)站上，實(shí)現(xiàn)模式則有助于確保內(nèi)部一致性。

2。流

如果實(shí)施模式的戰(zhàn)術(shù)，然后流動(dòng)模式是戰(zhàn)略。

顧名思義，這些模式幫助用戶通過你的網(wǎng)站。例如，側(cè)邊欄和爭議的漢堡菜單是流–他們幫助用戶瀏覽一個(gè)網(wǎng)站的模式不同。

除了不同的流動(dòng)模式之間的選擇，你也能找到相同的模式不同的方法。

3。語境

去年僅適用于特定類型的網(wǎng)站模式。這些只適合某些情況，所以適合窄緣上方的金字塔。進(jìn)一步，在他們的應(yīng)用是非常精確的，其功能往往是廣泛的–想一步一步的測試模式，這是只適用于電子商務(wù)網(wǎng)站，但是是開放的范圍廣泛的變化。

為此，上下文模式往往選擇在設(shè)計(jì)過程的早期階段，因?yàn)樗秋@而易見的，電子商務(wù)網(wǎng)站需要校驗(yàn)?zāi)Ｊ胶徒M合的網(wǎng)站需要一個(gè)畫廊模式。

4。全部放在一起：建筑格局的金字塔

toxboe模式金字塔不僅僅是一個(gè)創(chuàng)造性的選擇。它真實(shí)地反映了模式選擇的過程。

你開始在頂部，選擇只有幾個(gè)上下文模式取決于你的網(wǎng)站。通常這些形態(tài)布局和/或信息架構(gòu)。

例如，如果你正在建設(shè)一個(gè)網(wǎng)站，你知道你需要為你的工作樣本頁面，這將影響整個(gè)網(wǎng)站的導(dǎo)航。這就是為什么選擇這些早期，一般在使用階段（你可以了解更多關(guān)于我們的免費(fèi)進(jìn)行結(jié)構(gòu)設(shè)計(jì)決策引導(dǎo)線框圖）。

UI模式選擇過程

現(xiàn)在你知道水，是時(shí)候開始了。一個(gè)模式的有效性取決于網(wǎng)站–一完美的模式可能會(huì)在另一個(gè)弊大于利。

我們的模式選擇優(yōu)選的方法包括四個(gè)不同的步驟來幫助你識(shí)別的模式將是最好的，以及如何實(shí)現(xiàn)它們：

1。隔離問題。
2。研究的模式來解決問題的其他網(wǎng)站。
3。分析了這些網(wǎng)站使用模式。
4。定制的方式很適合你。
讓我們解釋這個(gè)過程是如何工作的一個(gè)例子：現(xiàn)場測試表明，用戶發(fā)現(xiàn)你的界面過于雜亂。

1。隔離問題。

你要在你的界面，關(guān)鍵看明白，是的，它太雜亂。通過定性和定量的用戶反饋，實(shí)現(xiàn)你的控制問題。有太多的選擇，但同時(shí)，用戶價(jià)值和使用這些選項(xiàng)在不同的時(shí)間（所以不可擴(kuò)展）。你的問題很清楚：你怎么節(jié)省屏幕空間在不犧牲用戶的選擇嗎？

2。檢查其他網(wǎng)站解決問題。

你訪問網(wǎng)站，類似于你自己，看看他們是如何解決這個(gè)問題。你去網(wǎng)站如Pinterest、Quora。

3。分析了這些網(wǎng)站使用模式。

在每一個(gè)好好照顧，你實(shí)現(xiàn)的主要差異。首先，Pinterest控制出現(xiàn)的徘徊，而Quora需要點(diǎn)擊。第二，Pinterest的控件圖標(biāo)，而Quora控制字。

4。定制你的網(wǎng)站模式。

你決定混搭元素得到最好的兩個(gè)世界。因?yàn)樗麄冎皇且恍┯嘘P(guān)卡每屏，你決定點(diǎn)擊圖標(biāo)顯示更多選項(xiàng)，相對于懸停控制。然而，你的選擇是簡單而有趣的，所以你決定代表他們的圖標(biāo)，而不是標(biāo)簽。

這個(gè)過程給你一個(gè)熟悉的模式，不需要解釋，當(dāng)你的用戶看到它，但仍然是個(gè)性化不夠，感覺獨(dú)一無二的你。

• 牧羊人相關(guān)文章推薦：
• 網(wǎng)頁設(shè)計(jì)師可以使圖像打破一個(gè)項(xiàng)目
• 網(wǎng)頁設(shè)計(jì)中的“啟示”
• 網(wǎng)頁設(shè)計(jì)css按鈕樣式教程
• 網(wǎng)頁設(shè)計(jì)之客戶的報(bào)價(jià)問題