ux設計中的各種地圖_UX設計中的格式塔原理

ux設計中的各種地圖

Gestalt Theory is the theory of visual perception and how our brain pieces together reality. The theory sheds light on how cognition factors into the way viewers read a piece of design. In the German language “Gestalt” means form or shape. According to Gestalt Theory, an organized whole is not the same as the sum of its parts.

格式塔理論是一種視覺感知理論,也是我們的大腦如何將現實拼湊在一起的理論。 該理論揭示了認知因素如何影響觀看者閱讀設計的方式。 在德語中,“格式塔”是指形狀或形狀。 根據格式塔理論,一個有組織的整體與其部分的總和并不相同。

Elements of Gestalt Theory: Proximity, Similarity, Continuity, Closure, Figure/ Ground, and Pr?gnanz.

格式塔理論的要素:接近性,相似性,連續性,閉合性,圖形/地面和Pr?gnanz。

Image for post
Law of Proximity
鄰近法則
Image for post
Example of Proximity
鄰近示例

Proximity: Objects are grouped together according to their distance from one another.

接近度:對象根據彼此之間的距離分組在一起。

In this example items that are close together appear to be more related than items that are spaced apart.

在此示例中,靠近的項目似乎比隔開的項目更相關。

Image for post
Law of Similarity
相似定律
Image for post
Example of Similarity
相似的例子

Similarity: Objects, perceived by the user to be similar, group together.

相似性:用戶感知為相似的對象組合在一起。

In this example visual nomenclature helps the user identify items that are similar or different.

在此示例中,視覺術語有助于用戶識別相似或不同的項目。

Image for post
Law of Continuity
連續法則
Example of Continuity
Example of Continuity
連續性的例子

Continuity: Visual perception groups continuous forms.

連續性:視覺感知將連續形式分組。

In this example continuity occurs when the user is guided to move from one object to another.

在該示例中,當引導用戶從一個對象移動到另一對象時,發生連續性。

Image for post
Law of Closure
封閉法
Position of the Spots Appear to be a Dalmatian Dog
Example of Closure
關閉范例

Closure: Visual perception unconsciously completes incomplete objects.

封閉:視覺感知會無意識地完成不完整的對象。

Closure is at the heart of Gestalt psychology: our minds create something coherent from parts that are objectively incoherent. My favorite example, the moving dots look like a dog.

封閉是格式塔心理學的核心:我們的思想從客觀上不連貫的部分中創造出連貫的東西。 我最喜歡的示例是,移動的點看起來像狗。

Image for post
Example of Figue/Ground
菲格/地面的例子

Figure/ground: The separation between figure (foreground) and ground (background).

圖形/地面:圖形(前景)與地面(背景)之間的分隔。

Things get interesting when designers create compositions that cause our brains to flip back and forth between the figure and ground. In this example the figure is a vase and the ground contains two faces.

當設計師創造出使我們的大腦在圖形和地面之間來回翻轉的構圖時,事情就會變得很有趣。 在此示例中,該圖是一個花瓶,地面上有兩個面。

Image for post
Example of Pr?gnanz
Pr?gnanz的例子

Pr?gnanz: We tend to reduce reality to its simplest form.

Pr?gnanz:我們傾向于將現實簡化為最簡單的形式。

When we see complex shapes in a design, the eye simplifies these by transforming them into a single, unified shape (by removing detail from these shapes).

當我們在設計中看到復雜的形狀時,眼睛會通過將它們轉換為單個統一的形狀(通過從這些形狀中刪除細節)來簡化它們。

We can use Pr?gnanz to when wireframing a website. Our eyes assemble the extraneous details of content blocks into a single webpage.

在對網站進行線框構建時,我們可以使用Pr?gnanz。 我們的目光將內容塊的多余細節組合到一個網頁中。

翻譯自: https://uxplanet.org/gestalt-principles-in-ux-design-2e0f423bfcb5

ux設計中的各種地圖

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274516.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274516.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274516.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【ASP】簡單Url編碼和Url解碼實例

描述:在數據傳輸或讀取時,有些敏感數據不宜顯示傳輸,特別涉及機密或財務信息,因此使用編碼技術尤為重要。 簡單實例: URL編碼代碼: protected void Button1_Click(object sender, EventArgs e) { …

JetBrains下一代IDE:Fleet 公共預覽版發布

大家好,我是若川。持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系…

善用工具_如何善用色彩心理學

善用工具There’s a problem with my movement. Most of us in the profession of trying to change the world have little skills or training in the actual craft of influencing human beings to do stuff — especially stuff that is new to them such as composting, p…

看源碼的第一步,我猜很多人搞錯了~

大家好,我是若川。今天在江西人的前端群里,有個小伙伴問,vueuse 的 vitepress (也就是官方文檔倉庫)怎么搭建的,怎么都沒有 index.json(引用的一個文件)。本文簡單記錄下流程&#x…

序列化說明(轉)

序列化是用來通信的,服務端把數據序列化,發送到客戶端,客戶端把接收到的數據反序列化后對數據進行操作,完成后再序列化發送到服務端,服務端再反序列化數據后對數據進行操作。說白了,數據需要序列化以后才能…

1.1編寫目的_1.目的

1.1編寫目的A friend of mine recently founded Secta Leagues. A company that organises sports leagues for working professionals, where companies play sports against one another in the same industry. The vision is to provide an app that allows interested comp…

Web 應用架構的下一個轉變

Web 技術大概 25 年前開始萌芽,HTTP、HTML、CSS 和 JS 都是在九十年代中期首次被標準化的。直到如今,Web 演變成一個無處不在的應用平臺。隨著 Web 的發展,Web 應用程序的開發架構也在不斷發展。現在有許多用于構建 Web 應用程序的核心架構&a…

生命在于運動?

我有兩個朋友,一個喜歡運動,經常打球騎單車,一個就喜歡宅在家里,最多大家玩的時候去旁觀。兩人常常爭執,一個說:生命在于運動,你看我多健康!一個說:生命在于靜止&#xf…

C++ 學習筆記----類篇

(一)基本概念: 1、類與對象: 1 //聲明類 2 class Human { 3 4 //... Data members and methods go here 5 6 }; 7 8 //定義對象 9 Human human; 2、通常用class聲明類,struct也可以,只不過在信…

ux和ui_設計社交餐廳策展應用程序— UX / UI案例研究

ux和uiSabor, which translates from “taste” or “flavor” in Spanish, is a concept for an iOS app designed to provide users with honest, reliable and relatable restaurant recommendations from friends and family. It is a social restaurant curation applicat…

你不知道的 script 標簽的 defer 與 async 屬性

我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外:目前建…

我是怎么調試 Element UI 源碼的

我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外:目前建…

java對象的理解

1、看生成幾個對象,就看new了幾次, Stu s1new Stu(“張三”); Stu s2s1;-這里也是生成了一個對象,只不過s1和s2指向了同一個對象 2、Stu s1new Stu(“張三”); Stu s2 new Stu(“李四”); s1s2;這里生成了兩個對象,但是…

模板緩沖_模板緩沖以及如何使用它可視化體積相交

模板緩沖介紹 (Introduction) The trendy thing in real-time rendering these days is ray-tracing. However, traditional rasterization hasn’t disappeared, and it won’t in the near future. I recommend this blog post on the subject: A hybrid rendering pipeline …

重磅!哈啰 Quark Design 正式開源,下一代跨技術棧前端組件庫

大家好,我是若川。我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

對lua協程的一點理解

讀《Programming In Lua》協程那一章,比較困惑的還是procuer-consumer那個例子: function consumer(prod)while true dolocal x receive(prod)print(x)end endfunction receive(prod)local status, value coroutine.resume(prod)return value endfunct…

b端 ux 設計思維_借助系統思維從視覺設計過渡到UX

b端 ux 設計思維“How can I switch to UX?” This is a common question from visual designers because there’s a lot of overlap on the surface. But it can also be a difficult transition since UX encompasses much more below the surface.“如何切換到UX&#xff…

三面面試官:運行 npm run xxx 的時候發生了什么?

大家好,我是若川。近期發現好些小伙伴工作有2-3年了,基本不會寫腳手架,或者說沒學過腳手架。對腳手架大致是如何執行的基本不太知道。其實這類學習資料真的挺多的。而且我們基本天天 npm run dev,應該學習內部實現。不知道的小伙伴…

figma下載_Figma的自動版式實用

figma下載Figma’s Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how …

Qt通過ODBC讀取excel文件

之前替學校考試科用C Builder做過一個小的數據庫工具,處理excel表格用的,現在想轉換到Qt平臺下來,在網上搜了搜有一些利用OBDC讀取xls文件的教程: http://hi.baidu.com/kxw102/item/770c496d5736470ca0cf0f1d http://blog.sina.co…