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

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

來源Web UI工具包

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

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

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

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

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

來源Dribbble。

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

用得好，能節(jié)省時間在解釋功能發(fā)揮用戶的已有知識。他們給網(wǎng)站一個直觀的和熟悉的感覺，因為如果用戶已經(jīng)使用過–因為他們有，或至少它的一些。

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

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

不同的UI模式類別

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

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

不同層次的界面模式

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

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

1。實施

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

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

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

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

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

2。流

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

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

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

3。語境

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

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

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

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

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

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

UI模式選擇過程

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

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

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

1。隔離問題。

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

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

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

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

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

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

你決定混搭元素得到最好的兩個世界。因為他們只是一些有關(guān)卡每屏，你決定點擊圖標(biāo)顯示更多選項，相對于懸停控制。然而，你的選擇是簡單而有趣的，所以你決定代表他們的圖標(biāo)，而不是標(biāo)簽。

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

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