中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

格式塔心理學(xué)是一種將人的思想和行為視為一個(gè)整體的思維學(xué)派，在本文中，我將與你分享，如何將這些原則作為我設(shè)計(jì)解決方案，并應(yīng)用于我的網(wǎng)站和應(yīng)用程序中。

我一直認(rèn)為心理學(xué)和設(shè)計(jì)是包含用戶體驗(yàn)的，每當(dāng)我們的目標(biāo)是解決需求的時(shí)候，我們的專業(yè)就需要有同理心。隨著我繼續(xù)深入研究心理學(xué)進(jìn)入設(shè)計(jì)領(lǐng)域時(shí)，我偶然發(fā)現(xiàn)了格式塔原則。

當(dāng)對(duì)象彼此相似時(shí)會(huì)出現(xiàn)相似性，人們通常將它們視為一個(gè)群體或模式。資料來(lái)源：graphicdesign.spokanefalls.edu

在下面的設(shè)計(jì)問(wèn)題A中，我指出了藍(lán)色的文字顏色。原因在于：在用戶交互中，Heavy Data User?和?Flexible Maximizer?是相似的——它們?cè)诮缑嬷袑?shí)際上都是標(biāo)簽。

設(shè)計(jì)A

那么，是什么讓這兩個(gè)元素彼此無(wú)關(guān)呢？

答案很多。但是更簡(jiǎn)單的說(shuō)明，沒(méi)有任何東西將這兩個(gè)元素綁定在一起，這使得它們看起來(lái)很分散。正如我們所看到的那樣：很明顯，界面的品牌顏色是綠色的，但突然間一個(gè)藍(lán)色的文字顏色從無(wú)處跳出。

因此，相似法則的規(guī)律在于：

作為我們的解決方案，我通過(guò)將文本顏色設(shè)置為綠色并調(diào)整按鈕的左右填充來(lái)創(chuàng)建相似性，以便它更接近另一個(gè)按鈕?Flexible Maximizer。

這個(gè)設(shè)計(jì)問(wèn)題A，可以通過(guò)重新設(shè)計(jì)來(lái)進(jìn)一步改進(jìn)（這實(shí)際上需要重新設(shè)計(jì)），這樣可以更加簡(jiǎn)化用戶的體驗(yàn)。但現(xiàn)在，讓它在制作中改動(dòng)一小步來(lái)到達(dá)相似性原則。

方法2：

設(shè)計(jì)B

現(xiàn)在在方法2中，我們來(lái)觀察它的基本部分——類型系統(tǒng)，它們是：

• 標(biāo)題：?40px Regular
• 正文：?20px Regular
• 文字鏈接：?20px Regular

乍一看，我們可能會(huì)認(rèn)為這只是一個(gè)我們可以忽略的普通類型系統(tǒng)。但是當(dāng)我們看得更近時(shí)，問(wèn)題發(fā)生在正文文本和文本鏈接之間，它們都共享相同的文字系統(tǒng)（20px Regular），這可能導(dǎo)致用戶混淆并且缺乏用戶信任。

當(dāng)他們?yōu)g覽網(wǎng)站時(shí)，他們可能會(huì)猶豫，他們正在交互的是正文文本還是文本鏈接，那么就需要進(jìn)行反復(fù)試驗(yàn)。

好的，那么我們?nèi)绾谓鉀Q這個(gè)問(wèn)題呢？

作為我們的相似性解決方案，我們需要稍微調(diào)整Type系統(tǒng)：

• 標(biāo)題：?40px Regular
• 正文：?20px Regular
• 文字圖標(biāo)鏈接：?20px粗體

我們通過(guò)使文本鏈接加粗，并且添加了一個(gè)圖標(biāo)，這樣就增加了對(duì)比度。通過(guò)進(jìn)行這些更改，我們?cè)谡麄€(gè)文本鏈接中創(chuàng)建了相似度，并加快了用戶的認(rèn)知加載速度。

超出主題的快速提示：在創(chuàng)建一個(gè)Type系統(tǒng)時(shí)，請(qǐng)選擇具有各種權(quán)重的字體（細(xì)，輕，常規(guī)，粗體等）。我們的目標(biāo)不應(yīng)該是具有較少權(quán)重的各種字體大小以獲得更好的對(duì)比度，而是要具有幾種不同權(quán)重的字體大小。

三、焦點(diǎn)

焦點(diǎn)是關(guān)注領(lǐng)域，強(qiáng)調(diào)或找到構(gòu)圖中的差異，以捕捉并保持觀看者的注意力。

在焦點(diǎn)問(wèn)題上，我們將展示兩個(gè)設(shè)計(jì)問(wèn)題：

從電信網(wǎng)站

在上面的例子中，元素的布局實(shí)際上沒(méi)有問(wèn)題。但是我們擁有的信息層次結(jié)構(gòu)——主要操作和次要操作共享相同的按鈕系統(tǒng)。

我們可以看到，這個(gè)界面的目標(biāo)是讓用戶下載應(yīng)用程序，并且FAQ是一個(gè)支持文檔，讓用戶更好地理解他們的應(yīng)用程序。

因此，我們的解決方案是：

設(shè)計(jì)解決方案A

利用焦點(diǎn)原則，我將View FAQs按鈕界面更改為邊框按鈕，為下載應(yīng)用程序按鈕提供所需的聚光燈效果。我還交換了他們的訂單，主要行動(dòng)在右邊和次要在左邊。

其原因在于古騰堡圖（Gutenberg Diagram），它說(shuō)：

基于這個(gè)定理，右邊的兩個(gè)點(diǎn)（在“Z”的第一個(gè)點(diǎn)及其最后點(diǎn)）是游客期望采取行動(dòng)的地方。因此，在這里，您的號(hào)召性用語(yǔ)屬于正確還是左側(cè)，在這里確實(shí)沒(méi)有問(wèn)題，它應(yīng)該始終朝向屏幕的右側(cè)。

我們通常可以看到的常見(jiàn)的按鈕設(shè)計(jì)問(wèn)題，也僅僅是為了增加主題外的一些東西，為不同功能創(chuàng)建一種按鈕界面（填寫(xiě)注冊(cè)按鈕、取消、加載更多內(nèi)容、閱讀更多內(nèi)容等）。

難道創(chuàng)造一致性不好嗎？

是的，我們都知道一致性在UX設(shè)計(jì)中扮演著重要角色，但我們稱之為功能一致性。如果我們將創(chuàng)建相同類型的按鈕設(shè)計(jì)來(lái)滿足不同的功能，則會(huì)導(dǎo)致用戶不一致的體驗(yàn)，并且可能會(huì)影響我們客戶的業(yè)務(wù)目標(biāo)。

脫離主題快速提示：按鈕設(shè)計(jì)一致性=按鈕功能。

現(xiàn)在轉(zhuǎn)向Approach 2應(yīng)用程序：

兩個(gè)按鈕具有相同的視覺(jué)層次結(jié)構(gòu)

這種設(shè)計(jì)也會(huì)出現(xiàn)同樣的問(wèn)題：“確定”和“取消”按鈕共享相同的設(shè)計(jì)風(fēng)格，這要求他們徹底閱讀按鈕標(biāo)簽，以便他們能夠知道提交和取消的內(nèi)容。

使用焦點(diǎn)，我們減少了閱讀標(biāo)簽的時(shí)間，這導(dǎo)致我們?cè)O(shè)計(jì)解決方案B：

我們互換了按鈕并將按鈕副本從OK更名為Submit，以使其更加上下文，并通知我們的用戶，一旦他點(diǎn)擊按鈕，就會(huì)發(fā)生一個(gè)動(dòng)作。

四、共同區(qū)域

共同區(qū)域的原則與鄰近度高度相關(guān)。它指出，當(dāng)物體位于同一封閉區(qū)域內(nèi)時(shí)，我們認(rèn)為它們被分組在一起。來(lái)源：用戶測(cè)試

Spotify、迪士尼、Netflix等功能不會(huì)與其類別一起分組，并且似乎是浮動(dòng)元素。為了使它更簡(jiǎn)單，創(chuàng)建一個(gè)線框?qū)⒖雌饋?lái)像這樣：

從上面的線框中可以看出，它比4個(gè)整體組件更可能是單個(gè)元素。因此，作為解決方案，共同區(qū)域原則：

我們新的線框與共同區(qū)域原則

在線框中，我們使用框邊將所有特征包含到它們各自的類別中，以便將它們視為一個(gè)而不是單個(gè)元素。以下是實(shí)施：

除了邊界框之外，我們用Plan Net 999替換了* Free Netflix六個(gè)月，并在Netflix元素的右上角用一個(gè)信息圖標(biāo)（彩色黃色圖標(biāo)）替代了功能列表的空間，一旦點(diǎn)擊，會(huì)出現(xiàn)一個(gè)工具提示。

總結(jié)，這是4格式塔原則，可以節(jié)省您的設(shè)計(jì)時(shí)間。還有更多的格式塔原理可以用作您的解決方案。

希望你也受用，祝開(kāi)心！

本文翻譯來(lái)自Medium

感謝Psychology + design: Gestalt principles you can use as design solutions

原文作者：Medium

譯文作者：cherri二哈

譯文鏈接：https://www.jianshu.com/p/311939783be5

本文由 @cherri二哈 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels ，基于 CC0 協(xié)議