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

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

來源Web UI工具包

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

啟示與能指：UI模式的基礎

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

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

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

來源Dribbble。

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

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

關于我們想照亮這里的能指的是<的重要利益堅持使用能指從其他網站和應用程序會降低你自己的解釋。使用能指是一致的其他網站將簡化自己的設計。

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

不同的UI模式類別

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

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

不同層次的界面模式

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

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

1。實施

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

例如，你可能會得到你如何設計網站上的圖片輪播一點創意，實現模式保證治療在每一頁都是一致的。

來源貓頭鷹的旋轉木馬。

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

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

2。流

如果實施模式的戰術，然后流動模式是戰略。

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

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

3。語境

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

為此，上下文模式往往選擇在設計過程的早期階段，因為它是顯而易見的，電子商務網站需要校驗模式和組合的網站需要一個畫廊模式。

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

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

你開始在頂部，選擇只有幾個上下文模式取決于你的網站。通常這些形態布局和/或信息架構。

例如，如果你正在建設一個網站，你知道你需要為你的工作樣本頁面，這將影響整個網站的導航。這就是為什么選擇這些早期，一般在使用階段（你可以了解更多關于我們的免費進行結構設計決策引導線框圖）。

UI模式選擇過程

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

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

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

1。隔離問題。

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

2。檢查其他網站解決問題。

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

3。分析了這些網站使用模式。

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

4。定制你的網站模式。

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

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

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