視覺感知

The role of the UX designer has evolved immensely over time, but at its core, it remains the same-

UX設計人員的角色隨著時間的流逝而發生了巨大的變化，但從本質上講，它保持不變-

to deliver information to users in an effective manner. If we truly want to empathize with users, it’s essential to understand how humans receive information.有效地向用戶傳遞信息 。 如果我們真的想同情用戶，那么必須了解人類如何接收信息。

Visual perception is the complete process from light hitting our retina, to our brains processing and organizing what we’re looking at. However, our focus is limited to a small area in any given instance. This means it’s important to remove all visual clutter from our design. Minimalistic design is better design.

視覺感知是一個完整的過程，從光線照射到我們的視網膜，到大腦處理和組織我們所看的東西。 但是，在任何給定的情況下，我們的重點都限于一小塊區域。 這意味著從我們的設計中消除所有視覺混亂非常重要。 簡約設計是更好的設計。

Design is not just what it looks like and feels like. Design is how it works.

設計不僅是外觀和感覺。 設計是它的工作方式。

If our focal vision is so limited, how do people scan an entire screen?

如果我們的視力如此有限，人們如何掃描整個屏幕？

Well, the answer is simple. They don’t.

好吧，答案很簡單。 他們沒有。

The mechanism of peripheral vision works by detecting contrasts between light and dark. We can’t pick up any detailed information in our peripheral vision. This is why our eyes rapidly jump around a page to pick up information, and this series of eye fixations is called saccades.

外圍視覺的機制通過檢測明暗之間的對比來起作用。 我們無法從外圍視覺中獲取任何詳細信息。 這就是為什么我們的眼睛在頁面上快速跳動以獲取信息的原因，而這一系列的眼動注視稱為掃視運動 。

It’s nearly impossible for users to analyze the whole screen. According to a study done by Jakob Nielsen, people follow an ‘F’ shaped reading pattern for webpages and phone screens.

用戶幾乎不可能分析整個屏幕。 根據雅各布·尼爾森(Jakob Nielsen)進行的一項研究，人們會在網頁和電話屏幕上采用“ F”形閱讀模式。

Source: Eye fixations for web pages資料來源：網頁的注視眼

People tend to scan the first two rows, but after that, they scan down the left-hand side of the page for important info. We can leverage this information by placing the most important content in the top-left most red zone to ensure it’s processed by our user. From there we should format the rest of the content by following the natural ‘F’ shaped flow that our users will take.

人們傾向于掃描前兩行，但是此后，他們會在頁面的左側向下掃描以獲取重要信息。 我們可以通過將最重要的內容放在最左上角的紅色區域中來確保這些信息由我們的用戶處理。 從那里開始，我們應該遵循用戶將采取的自然的“ F”形流程來格式化其余內容。

格式塔的模式識別原理 (Gestalt’s Principles of Pattern Recognition)

According to the Gestalt School of Psychologist, we identify visuals in a 3 step process.

根據格式塔心理學家學院，我們通過3個步驟確定視覺效果。

1.識別功能集 (1. Identifying sets of features)

Our eyes break things down into sets of features. Firstly, we recognize colors (shades from light to dark), motion, textures, and angles. Many ads have moving parts for this reason.

我們的眼睛將事物分解為一系列特征。 首先，我們識別顏色(從淺到深的陰影)，運動，紋理和角度。 因此，許多廣告都有移動的部分。

Primitive features pop out to users before anything else on a page. By using them in design, we can ensure our users notice important information. They’re especially useful when we want to guide the user in a certain direction, i.e draw attention to features that are less commonly used.

原始功能會在頁面上的其他任何內容之前彈出給用戶。 通過在設計中使用它們，我們可以確保我們的用戶注意到重要信息。 當我們想引導用戶朝某個方向(例如，將注意力吸引到不太常用的功能)時，它們特別有用。

Source: amazon.com資料來源：amazon.com

Amazon knows a majority of its user base will interact directly with the menu bar at the top of the page because users generally visit the site to purchase something specific. Therefore, they draw more attention to their ad for Prime Video in hopes that the user may subscribe, even though that wasn’t the user’s initial intention. The banner has color, images with texture and angles, and it is the first thing we see. Amazon can upsell us on a movie even if we only intended to order shoes.

亞馬遜知道其大部分用戶群將直接與頁面頂部的菜單欄進行交互，因為用戶通常會訪問該站點以購買特定商品。 因此，他們吸引了更多關注他們Prime廣告的廣告，希望用戶可以訂閱，即使這并不是用戶的初衷。 橫幅具有顏色，帶有紋理和角度的圖像，這是我們看到的第一件事。 即使我們只打算訂購鞋子，亞馬遜也可以通過電影向我們加價銷售。

2.模式識別 (2. Pattern identification)

From there, our brain uses techniques to create patterns based on the identified features.

從那里，我們的大腦使用技術根據所識別的特征創建模式。

Proximity- Objects that are closer in proximity on a page are more likely to be associated. Proximity is a great technique for associating similar items and organizing pages in general.

接近度 -頁面上距離更近的對象更有可能關聯。 接近度是一種將相似的項目關聯在一起并組織頁面的重要技術。

Source: sephora.com資料來源：sephora.com

The fact that Sephora has such a vast product line on its site warrants a grouping element for its items. Sephora does a great job utilizing white space to employ proximity. Even if the texts “Top-Rated by the Community” and “Value Sets” were removed in the photo above, we would still be able to distinguish that there are two product types being represented.

絲芙蘭在其網站上擁有如此龐大的產品線這一事實保證了其商品的分組元素。 絲芙蘭(Sephora)在利用空白來應用鄰近方面做得很好。 即使在上面的照片中刪除了“社區最受好評”和“價值集”這兩個文字，我們仍然能夠區分所代表的兩種產品類型。

Closure- Our brain will automatically “close” objects that we recognize without needing the full picture. In other words, if we leave out implicit information or visual context, our brain will automatically fill in missing pieces as if it’s completing a puzzle.

關閉 -我們的大腦將自動“關閉”我們識別的對象，而無需全貌。 換句話說，如果我們遺漏了隱含的信息或視覺環境，我們的大腦將自動填充缺失的部分，就像完成一個謎一樣。

Continuation- When our eyes start to follow something, they will continue to travel in that direction until they encounter another object or obstruction.

繼續-當我們的眼睛開始跟隨某物時，它們將繼續朝該方向行進，直到遇到另一個物體或障礙物為止。

Closure and continuation allow our perception to fill in the gaps. They allow for our users to use passive perception, which requires less brainpower while also leading to great design.

封閉和延續使我們的認知填補了空白。 它們允許我們的用戶使用被動感知，這需要更少的腦力，同時還可以帶來出色的設計。

Most companies nowadays use these principles in their logos and custom images to modernize and build their brand. Logos and custom images are often overlooked but key factors in product branding!

如今，大多數公司在徽標和自定義圖片中使用這些原則來現代化和建立自己的品牌。 徽標和自定義圖像通常被忽略，但是產品品牌塑造的關鍵因素！

Similarity- Grouping visuals with similar features together not only improves the overall page aesthetic but also helps users find relevant information and skip over things that aren’t relevant to them.

相似性 -將具有相似功能的視覺效果分組在一起，不僅可以提高整體頁面的美觀度，還可以幫助用戶查找相關信息并跳過與它們無關的內容。

3.物體識別 (3. Object Recognition)

Finally, our brain uses the features and patterns it picked up to recognize objects on the page.

最終，我們的大腦使用它所拾取的特征和模式來識別頁面上的對象。

召回識別 (Recognition Over Recall)

Users prefer to interact with things that are familiar to them. Consistency and standards are widely leveraged across different products with similar functions in UX design.

用戶喜歡與他們熟悉的事物進行交互。 UX設計中具有相似功能的不同產品之間廣泛使用一致性和標準。

Take Google Docs as an example.

以Google文檔為例。

They modeled their menu bar based off of Microsoft Word’s- and with good reason.

他們基于Microsoft Word并有充分的理由對菜單欄進行建模。

Word is a competing product that dominated the market. Creating a menu bar consistent with that of an already successful product will remove the uncertainty that comes with learning a new product.

Word是主導市場的競爭產品。 創建與已經成功的產品一致的菜單欄將消除學習新產品帶來的不確定性。

Another powerful strategy to reduce the learning curve of our interfaces is to use metaphors. Common metaphors include recycling bins for deletion and shopping carts for item list views. When we see these symbols on a page, we instantly know what to expect by clicking them.

減少界面學習曲線的另一種有效策略是使用隱喻。 常見的隱喻包括用于刪除的回收箱和用于項目列表視圖的購物車。 當我們在頁面上看到這些符號時，我們可以通過單擊它們立即知道預期的結果。

架起執行與評估之灣 (Bridging the Gulfs of Execution and Evaluation)

Give visual cues to the user to help them discover what is and isn’t possible. The goal is to never leave the user confused about the system status.

向用戶提供視覺提示，以幫助他們發現可能和不可能的事情。 目標是永遠不要讓用戶對系統狀態感到困惑。

Affordances:

客流量：

• Outline- Highlight buttons and cards with shadows to give them spatial context and indicate that they can be interacted with.

  輪廓線-用陰影突出顯示按鈕和卡片，以使它們具有空間背景并指示它們可以進行交互。

• Progress bar and feedback- Progress bars, modals, error messages, and help links can help the user evaluate the current state of the system.

  進度條和反饋 - 進度條， 模式 ，錯誤消息和幫助鏈接可以幫助用戶評估系統的當前狀態。

Source: https://www.tutorialrepublic.com/資料來源： https : //www.tutorialrepublic.com/

The modal above not only acknowledges that the user successfully created an account, but also makes clear what the user should do next to properly use the application.

上面的模態不僅確認用戶成功創建了一個帳戶，還明確了用戶下一步應如何正確使用該應用程序。

Constraints- Grey out features or text that aren’t available or simply leave them out. Allow the user to focus on one element at a time. One simple use case of this principle can be to grey out the “sign up” button until both the username and password fields have been populated during a signup flow.

約束 -將無法使用的功能或文本灰顯或將其忽略。 允許用戶一次專注于一個元素。 此原理的一個簡單用例是將“注冊”按鈕顯示為灰色，直到在注冊流程中同時填寫了用戶名和密碼字段為止。

Using Gestalt’s principles can help in building a conceptual model for the user. Less is more when it comes to design, so avoid visual clutter and give the user familiar cues. By bridging principles of psychology and visual perception, we can create better user experiences.

使用格式塔的原理可以幫助為用戶建立概念模型。 在設計時，少即是多，因此請避免視覺混亂，并為用戶提供熟悉的提示。 通過將心理學和視覺感知的原則相結合，我們可以創造更好的用戶體驗。

翻譯自: https://uxdesign.cc/visual-perception-in-product-design-c7352a92baed

視覺感知

總結

以上是生活随笔為你收集整理的视觉感知_产品设计中的视觉感知的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。