許多設(shè)計師可以擁有創(chuàng)造性的直覺和銳利的眼光:他們將未來網(wǎng)站或應(yīng)用程序的布局增加了更多的激情和感覺作為理性思考和測量
許多設(shè)計師可以擁有創(chuàng)造性的直覺和銳利的眼光:他們將未來網(wǎng)站或應(yīng)用程序的布局增加了更多的激情和感覺作為理性思考和測量。在很多情況下,這不是吹牛,而是將所有細(xì)節(jié)整合在一起的真正技能,感受用戶流程的可能陷阱,找到原始解決方案不會破壞可用性。然而,這種方式?jīng)]有任何魔法:這種技能不僅基于人才,而且還基于實踐經(jīng)驗,堅持不懈地研究與技術(shù)和設(shè)備一起快速變化的理論,標(biāo)準(zhǔn)和指導(dǎo)原則。即使創(chuàng)造性的實驗也是基于互動機(jī)制和影響因素的知識:打破規(guī)則,你必須認(rèn)識他們。
Web和移動界面中的視覺層次結(jié)構(gòu)屬于領(lǐng)域,知道哪些設(shè)計者加強(qiáng)了他們的創(chuàng)造潛力。探索人們?nèi)绾慰创畔⒉⑵溆糜诮⒘己玫膶?dǎo)航,可消化的副本和有效的顏色選擇的方式對產(chǎn)品的可用性(可掃描性)作為其重要部分有很大的影響。所以,今天我們將回到基礎(chǔ):讓我們開始修改Gestalt分組原理如何積極地影響用戶界面。
什么是格式塔理論?
基本上,格式塔是來自德語Gestalt [ɡtalt]意思是“形狀,形式”的術(shù)語。它主要用于認(rèn)知心理學(xué)領(lǐng)域,探索人們不斷從世界獲得的數(shù)據(jù),這些數(shù)據(jù)似乎主要是混亂的。這個運動背后的基本想法可以通過格萊塔克心理學(xué)家?guī)鞝柼亍た品蚩ǎ↘urt Koffka)的著名短語來捕捉:“ 整體不是部分的總和”。當(dāng)人們看到由許多元素組成的復(fù)雜對象時,它們將有意識的或潛意識的方法應(yīng)用到整個有組織的系統(tǒng)中,而不僅僅是一組簡單的對象。它在不同層次的感知上起作用,但視覺部分似乎是設(shè)計者創(chuàng)建界面最有趣的部分。
為什么設(shè)計師可以對這個問題感興趣?因為它有助于更好地了解應(yīng)用程序或網(wǎng)站用戶的心理學(xué)。當(dāng)您了解影響視覺感知的因素時,它使得UX設(shè)計的過程更加精通,提高了成功互動的速度,并降低了用戶可以通過這種方式獲得的誤解。在這種方法的各個層次中,分組的原則(或法律)可能是設(shè)計師考慮最重要的。這些原則是基于人們將他們所看到的一些模式組織成五個全球類別的概念:鄰近,相似性,連續(xù)性,關(guān)閉和連接。這是“垂直度量”博客提供的圖表之一,可視化一些原則的核心描述。
在用戶界面中,分組應(yīng)用原則周到地使布局元素的感知更快更容易,并在不同層次的交互中建立優(yōu)先級。今天我們將考慮廣泛應(yīng)用于設(shè)計實踐中的分組的相似原理。
相似原則
相似性的原則是基于共享視覺特征的東西,如形狀,大小,顏色,紋理,價值或方向的東西將被視為屬于一起。這意味著,如果一個人感知到這些元素,他或她傾向于將具有一個或幾個特征的那些組合作為相關(guān)項目。因此,給予不同的布局元素相同或相似的視覺特征,設(shè)計人員刺激用戶設(shè)置適當(dāng)?shù)倪B接并更快地了解整個方案。
相似性可以基于各種視覺參數(shù),如顏色,形狀,大小和方向。我們來看一些Tubik團(tuán)隊設(shè)計的界面的實例。
顏色
以下是在簡單日歷應(yīng)用程序中應(yīng)用顏色相似度的常見示例。在日歷屏幕上標(biāo)記星期幾的字母可視地分組為與日歷網(wǎng)格中的數(shù)字所使用的顏色不同的一種顏色。因此,快速瀏覽足以分離這些類型的符號 - 顏色簡化了第一次掃描的過程。顏色相似度的下一個級別發(fā)生在數(shù)字領(lǐng)域:用戶選擇的星期幾中的日期看起來更亮,而其他日期看起來更加褪色。關(guān)鍵的互動區(qū)域明亮地呈現(xiàn),呈現(xiàn)出立即引人注意的不可錯過的視覺口音。因此,顏色使設(shè)計人員能夠通過分組原理為具有有效視覺分層結(jié)構(gòu)的用戶創(chuàng)建簡單的導(dǎo)航路徑。
這里還有一個例子顯示了如何通過顏色分組可以有效地應(yīng)用于圖形界面中的副本。您可以看到待處理應(yīng)用程序的屏幕,其中已經(jīng)標(biāo)記為已完成的位置與正在進(jìn)行的任務(wù)相比具有不同的顏色。它使用戶能夠快速掃描列表,并在幾秒鐘內(nèi)對任務(wù)的種類進(jìn)行分組。
通過顏色分組原理的更復(fù)雜的應(yīng)用是標(biāo)記內(nèi)容的類別和塊。它可以在各種各樣的內(nèi)容,如博客,電子商務(wù)或教育資源等組織的各種內(nèi)容的界面上運行得很好。顏色標(biāo)記簡化了導(dǎo)航并保持了設(shè)計的一致性,使用戶能夠記住顏色提示并找到他們想要的內(nèi)容很容易。上面的示例顯示了應(yīng)用此原則的博客應(yīng)用程序:各種帖子圍繞全局類別進(jìn)行組織,并以顏色標(biāo)記,您可以在圖標(biāo)上看到顏色,帖子上的彩色標(biāo)簽和用戶個人資料中帖子的快速統(tǒng)計信息。相同的原則適用于以下所示的Moneywise App。
這是專門用于經(jīng)濟(jì)學(xué)的教育應(yīng)用:內(nèi)容分為四大類。用于標(biāo)記該類別的顏色也用作所有屬于它的卡的背景顏色。所以,在互動的過程中,它可以幫助用戶快速地獲得領(lǐng)先地位。
當(dāng)然,這種顏色分組的方式更進(jìn)一步,因為它不僅組織在一個屏幕上的元素,而且在所有數(shù)字產(chǎn)品中組織不同的屏幕或頁面。然而,它也對應(yīng)于格式塔原則:這種方法允許設(shè)計者創(chuàng)建外觀和感覺一致的界面,并支持從屏幕到屏幕的視覺感知的一般完整性,從一個交互到另一個交互。
尺寸
通過大小對元素進(jìn)行相似性分類的原則是創(chuàng)建直觀和用戶友好界面的另一個基石,因為它建立了支持用戶的強(qiáng)視覺層次的基礎(chǔ)。這種方法有助于確定優(yōu)先級,并使最重要的內(nèi)容可見。按照這個原則對類似的內(nèi)容元素進(jìn)行分組排列它們之間的連接,通常比用戶可以讀取副本或查看所有細(xì)節(jié)更快。
提出這一原則的好方法是檢查復(fù)制內(nèi)容的組織。
該示例展示了一家建筑公司的企業(yè)網(wǎng)站。通過關(guān)鍵詞同時應(yīng)用兩個分組原則來支持呈現(xiàn)公司利益和方法的復(fù)制塊:它們使用不同的大小和不同的文本方向。在相互作用的過程中,它們被明顯地看作是相關(guān)元素。此外,擴(kuò)展菜單頁面還顯示了按照大小分類復(fù)制元素的排版層次結(jié)構(gòu):關(guān)鍵字,類別和子類別。
這是另一個按大小和顏色進(jìn)行分組的例子。我們可以看到標(biāo)簽欄的概念,其中相同重要性的交互元素以相同的大小和褪色的陰影給出,而核心的交互元素加按鈕通過明亮的顏色和更大的尺寸而突出。此外,嘗試通過此按鈕添加內(nèi)容,為用戶提供三種不同類型內(nèi)容的選項。再次,使用與父按鈕相同顏色的出現(xiàn)的三個按鈕進(jìn)行分組,但尺寸較小,該界面使用戶能夠基于認(rèn)知感知的典型操作輕松設(shè)置導(dǎo)航元素的連接和層次。
形狀
在網(wǎng)頁或屏幕上分組元素的另一種方法是通過形狀來標(biāo)記它們。
該示例顯示了使用相同形狀的卡來模擬與物理對象(數(shù)據(jù)卡的基礎(chǔ))的交互的應(yīng)用程序。該方法允許用戶將該組內(nèi)容塊視為相關(guān)的。
如上所示的Homey應(yīng)用程序的界面還提供了從一個屏幕到另一個屏幕的形狀分組的示例:標(biāo)記房間的按鈕使用四舍五入形狀,而特定房間屏幕內(nèi)各種指示器的按鈕使用圓形。它設(shè)置相關(guān)布局元素之間的明確連接以及應(yīng)用程序中的全局導(dǎo)航。
雖然我們剛剛開始修改格式塔在設(shè)計中的理論使用,但已經(jīng)明白的是,知道這些簡單而有效的原則可以為用戶節(jié)省大量的精力,并且可以根據(jù)人的認(rèn)知能力和心理模式來支持用戶界面。按照更新檢查其他分組原則的說明和示例:接近度,對稱性,延續(xù)性等。
0
喜歡他,就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計網(wǎng)(CNDESIGN)會員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計網(wǎng)