我一直認(rèn)為心理學(xué)和設(shè)計(jì)是包含用戶體驗(yàn)的募强。每當(dāng)我們的目標(biāo)是解決需求的時候灼舍，我們的專業(yè)就需要有同理心。隨著我繼續(xù)深入研究心理學(xué)進(jìn)入設(shè)計(jì)領(lǐng)域時一屋，我偶然發(fā)現(xiàn)了格式塔原則窘疮。
那么树肃，什么是格式塔原則舰始？
格式塔心理學(xué)是一種將人的思想和行為視為一個整體的思維學(xué)派。當(dāng)試圖理解我們周圍的世界時末捣，格式塔心理學(xué)建議我們不要只關(guān)注每一個小部分诽嘉。
相反蔚出，我們的頭腦傾向于將對象視為更大整體的一部分，并將其視為更復(fù)雜的系統(tǒng)元素含懊。這個心理學(xué)院在人類感覺和感知研究的現(xiàn)代發(fā)展中發(fā)揮了重要的作用身冬。
這次發(fā)現(xiàn)格式塔原理的旅程讓我充分理解如何將這些原理融入到我的設(shè)計(jì)中。因此岔乔，在本文中酥筝，我將與您分享如何將這些原則作為我設(shè)計(jì)解決方案并應(yīng)用于我的網(wǎng)站和應(yīng)用程序中：
1.接近
當(dāng)物體彼此靠近放置時，這些物體被視為一個整體而不是單獨(dú)的個體雏门。
以下是我們?nèi)绾卧谠O(shè)計(jì)中使用接近法則解決問題的一個例子：
正如我們所看到的嘿歌，類別標(biāo)題（在線預(yù)訂和郵輪）和鏈接（了解更多）彼此分開，這使得它們看起來像浮動元素茁影。如果我們將創(chuàng)建一個線框宙帝，它會看起來像這樣：
整個組件脫離了上下文，因?yàn)闆]有將圖像募闲，標(biāo)題和鏈接關(guān)聯(lián)在一起步脓。因此接近法則是我們的解決方案。把三個單獨(dú)漂浮在外層空間的元素浩螺，作為一個整體組件靴患。
在我們使用接近原則的設(shè)計(jì)解決方案中，我通過使用中心對齊來縮小標(biāo)題和鏈接之間的距離要出。通過這種方式鸳君，我們能夠?qū)?個元素（圖像，標(biāo)題患蹂，鏈接）結(jié)合在一起或颊，這有助于我們解決缺失的上下文問題砸紊。
2.相似性
當(dāng)對象彼此相似時會出現(xiàn)相似性。人們通常將它們視為一個群體或模式囱挑。資料來源：graphicdesign.spokanefalls.edu
在下面的設(shè)計(jì)問題A中醉顽，我指出了藍(lán)色的文字顏色。原因在于看铆，在用戶交互中徽鼎，Heavy Data User?和?Flexible Maximizer?是相似的 - 它們在界面中實(shí)際上都是標(biāo)簽盛末。
那么弹惦，是什么讓這兩個元素彼此無關(guān)呢？
答案很多悄但。但是更簡單的說明棠隐，沒有任何東西將這兩個元素綁定在一起，這使得它們看起來很分散檐嚣。正如我們所看到的那樣助泽，很明顯，界面的品牌顏色是綠色的嚎京，但突然間一個藍(lán)色的文字顏色從無處跳出嗡贺。因此，相似法則的規(guī)律在于：
作為我們的解決方案鞍帝，我通過將文本顏色設(shè)置為綠色并調(diào)整按鈕的左右填充來創(chuàng)建相似性诫睬，以便它更接近另一個按鈕?Flexible Maximizer.。
這個設(shè)計(jì)問題A可以通過重新設(shè)計(jì)來進(jìn)一步改進(jìn)（這實(shí)際上需要重新設(shè)計(jì)）帕涌，這樣可以更加簡化用戶的體驗(yàn)摄凡。但現(xiàn)在，讓它在制作中改動一小步來到達(dá)相似性原則?- 方法2：
現(xiàn)在在方法2中蚓曼，我們來觀察它的基本部分 - 類型系統(tǒng)亲澡，它們是：
標(biāo)題：?40px Regular
正文：?20px Regular
文字鏈接：?20px Regular
乍一看，我們可能會認(rèn)為這只是一個我們可以忽略的普通類型系統(tǒng)纫版。但是當(dāng)我們看得更近時床绪，問題發(fā)生在正文文本和文本鏈接之間，它們都共享相同的文字系統(tǒng)（20px Regular）其弊，這可能導(dǎo)致用戶混淆并且缺乏用戶信任癞己。當(dāng)他們?yōu)g覽網(wǎng)站時，他們可能會猶豫瑞凑，他們正在交互的是正文文本還是文本鏈接末秃，那么就需要進(jìn)行反復(fù)試驗(yàn)。
好的籽御，那么我們?nèi)绾谓鉀Q這個問題呢练慕？
作為我們的相似性解決方案惰匙，我們需要稍微調(diào)整Type系統(tǒng)：
標(biāo)題：?40px Regular
正文：?20px Regular
文字圖標(biāo)鏈接：?20px粗體
我們通過使文本鏈接加粗，并且添加了一個圖標(biāo)铃将，這樣就增加了對比度项鬼。通過進(jìn)行這些更改，我們在整個文本鏈接中創(chuàng)建了相似度劲阎，并加快了用戶的認(rèn)知加載速度绘盟。
超出主題的快速提示：在創(chuàng)建一個Type系統(tǒng)時，請選擇具有各種權(quán)重的字體（細(xì)悯仙，輕龄毡，常規(guī)，粗體等）锡垄。我們的目標(biāo)不應(yīng)該是具有較少權(quán)重的各種字體大小以獲得更好的對比度沦零，而是要具有幾種不同權(quán)重的字體大小。
3.焦點(diǎn)
焦點(diǎn)是關(guān)注領(lǐng)域货岭，強(qiáng)調(diào)或找到構(gòu)圖中的差異路操，以捕捉并保持觀看者的注意力。
在焦點(diǎn)問題上千贯，我們將展示兩個設(shè)計(jì)問題：
在上面的例子中屯仗，元素的布局實(shí)際上沒有問題。但是我們擁有的信息層次結(jié)構(gòu) - 主要操作和次要操作共享相同的按鈕系統(tǒng)搔谴。
我們可以看到魁袜，這個界面的目標(biāo)是讓用戶下載應(yīng)用程序，并且FAQ是一個支持文檔己沛，讓用戶更好地理解他們的應(yīng)用程序慌核。
因此，我們的解決方案是：
利用焦點(diǎn)原則申尼，我將View FAQs按鈕界面更改為邊框按鈕垮卓，為下載應(yīng)用程序按鈕提供所需的聚集用戶視線的效果。我還交換了他們的位置师幕，主要行動在右邊和次要在左邊粟按。其原因在于古騰堡圖表（Gutenberg Diagram）。他說：
基于這個定理霹粥，右邊的兩個點(diǎn)（在“Z”的第一個點(diǎn)及其最后點(diǎn)）是用戶期望采取行動的地方灭将。因此，在這里后控，您的號召性用語正確的做法應(yīng)該在左側(cè)庙曙，在這里確實(shí)沒有問題。它應(yīng)該始終朝向屏幕的右側(cè)浩淘。
我們通嘲破樱可以看到的常見的按鈕設(shè)計(jì)問題也僅僅是為了增加主題外的一些東西吴攒，為不同功能創(chuàng)建一種按鈕界面（填寫注冊按鈕，取消砂蔽，加載更多內(nèi)容洼怔，閱讀更多內(nèi)容等）。
難道創(chuàng)造一致性不好嗎左驾？
是的镣隶，我們都知道一致性在UX設(shè)計(jì)中扮演著重要角色，但我們稱之為功能一致性诡右。如果我們將創(chuàng)建相同類型的按鈕設(shè)計(jì)來滿足不同的功能安岂，則會導(dǎo)致用戶不一致的體驗(yàn)，并且可能會影響我們客戶的業(yè)務(wù)目標(biāo)稻爬。
脫離主題快速提示：按鈕設(shè)計(jì)一致性=按鈕功能嗜闻。
現(xiàn)在轉(zhuǎn)向Approach 2應(yīng)用程序：
這種設(shè)計(jì)也會出現(xiàn)同樣的問題∥Τ“確定”和“取消”按鈕共享相同的設(shè)計(jì)風(fēng)格，這要求他們徹底閱讀按鈕標(biāo)簽样眠，以便他們能夠知道提交和取消的內(nèi)容友瘤。
使用焦點(diǎn)，我們減少了閱讀標(biāo)簽的時間檐束，這導(dǎo)致我們設(shè)計(jì)解決方案B：
我們互換了按鈕并將按鈕副本從OK更名為Submit辫秧，以使其更加上下文，并通知我們的用戶被丧，一旦他點(diǎn)擊按鈕盟戏，就會發(fā)生一個動作。
4.共同區(qū)域
共同區(qū)域的原則與鄰近度高度相關(guān)甥桂。它指出柿究，當(dāng)物體位于同一封閉區(qū)域內(nèi)時，我們認(rèn)為它們被分組在一起黄选。來源：用戶測試
Spotify蝇摸，迪士尼，Netflix等功能不會與其類別一起分組办陷，并且似乎是浮動元素貌夕。為了使它更簡單，創(chuàng)建一個線框?qū)⒖雌饋硐襁@樣：
從上面的線框中可以看出民镜，它比4個整體組件更可能是單個元素啡专。因此，作為解決方案制圈，共同區(qū)域原則：
在線框中们童，我們使用框邊將所有特征包含到它們各自的類別中辱揭，以便將它們視為一個而不是單個元素。以下是實(shí)施：
除了邊界框之外病附，我們用Plan Net 999替換了* Free Netflix六個月问窃，并在Netflix元素的右上角用一個信息圖標(biāo)（彩色黃色圖標(biāo)）替代了功能列表的空間，一旦點(diǎn)擊完沪，會出現(xiàn)一個工具提示域庇。
總結(jié)，這是4格式塔原則覆积，可以節(jié)省您的設(shè)計(jì)時間听皿。還有更多的格式塔原理可以用作您的解決方案。
希望你也受用
祝開心
本文翻譯來自Medium感謝Psychology + design: Gestalt principles you can use as design solutions
