掌握UI設(shè)計(jì)模式更聰明

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

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

來(lái)源Web UI工具包

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

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

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

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

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

來(lái)源Dribbble。

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

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

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

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

不同的UI模式類別

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

數(shù)據(jù)交互此型艾滋病贈(zèng)送和接收數(shù)據(jù)，并使更深的相互作用。這不僅包括用戶如何將數(shù)據(jù)發(fā)送到網(wǎng)站，而且網(wǎng)站如何回應(yīng)反饋。
簡(jiǎn)化這些模式提供了典型問(wèn)題的捷徑，以減少摩擦和認(rèn)知負(fù)荷。在本質(zhì)上，他們簡(jiǎn)化整個(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)這些模式建立的視覺(jué)層次，讓用戶明白，哪些元素是比其他人更重要。例如，你的部分你的網(wǎng)站或奠定一切與同一平面卡片布局？
社會(huì)媒體這些模式不僅方便用戶從你的網(wǎng)站上分享的內(nèi)容，但也提供了一種信任的感覺(jué)。
這六個(gè)選項(xiàng)都只是一些組織模式的許多方面。下面，我們將解釋一個(gè)分類系統(tǒng)，適用于每一類。

不同層次的界面模式

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

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

1。實(shí)施

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

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

來(lái)源貓頭鷹的旋轉(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)略。

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

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

3。語(yǔ)境

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

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

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

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

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

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

UI模式選擇過(guò)程

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

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

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

1。隔離問(wèn)題。

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

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

你訪問(wèn)網(wǎng)站，類似于你自己，看看他們是如何解決這個(gè)問(wèn)題。你去網(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)，相對(duì)于懸?？刂?。然而，你的選擇是簡(jiǎn)單而有趣的，所以你決定代表他們的圖標(biāo)，而不是標(biāo)簽。

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

當(dāng)前標(biāo)題：掌握UI設(shè)計(jì)模式更聰明
分享網(wǎng)址：http://www.bm7419.com/news/20094.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、移動(dòng)網(wǎng)站建設(shè)、面包屑導(dǎo)航、搜索引擎優(yōu)化、App開(kāi)發(fā)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)