导向滤波 导向图
An example like the image below has already been widely shared on the internet, the engineering behind the trick is basically information hierarchy. The ordering of visual elements according to their importance level.
如下图所示的示例已经在Internet上广泛共享，该技巧背后的工程原理基本上是信息层次结构。 视觉元素根据其重要性级别排序。
To create the layout of an interface, one should go through the tasks of deciding emphases; determining the order of importance of content and interactions; and defining frequent and relevant information; always based on the needs and expectations of users, collected from tests and research. These activities are intended to determine what must be interpreted first by the user, and which reading segment during browsing.
要创建界面的布局，应该完成确定重点的任务； 确定内容和交互的重要性顺序； 并定义频繁和相关的信息； 始终基于通过测试和研究收集的用户需求和期望。 这些活动旨在确定用户必须首先解释的内容以及浏览过程中的哪个阅读片段。
In visual terms, in the example above only the modification of text size is explored to generate hierarchy, but the same applies to other graphic characteristics such as: weight, color, transparency, and so on. And of course, this behavior extends to all components such as buttons, menus, forms, etc.
用视觉的方式，在上面的示例中，仅探讨了文本大小的修改以生成层次结构，但同样适用于其他图形特征，例如：重量，颜色，透明度等。 当然，此行为扩展到所有组件，例如按钮，菜单，窗体等。
Visual elements are basically grouped by proximity and separated by distance, this basic premise — one of the Gestalt’s laws — is fundamental when visually structuring a digital interface considering the Atomic Design¹ methodology. That’s because the elements receive visual order mainly through their positioning. The positioning of elements and components is a task that aims to facilitate the actions the users can do, and in some cases it leads to what they are expected to do. In any case, it is the user who controls the order in which the information is viewed.
视觉元素基本上按接近程度分组，并按距离分开，这是基本的前提- 格式塔定律之一 —在考虑原子设计 ¹方法的视觉上构建数字界面时，这是至关重要的。 这是因为元素主要通过其位置获得视觉顺序。 元素和组件的定位是一项旨在促进用户可以执行的操作的任务，在某些情况下，它可以指导用户预期的操作。 在任何情况下，都是由用户来控制查看信息的顺序。
According to NNG²:
根据NNG² ：
“on the web, people don’t read every word on a page; instead, they scan. They naturally attempt to be efficient and put in the least possible work for achieving their goal.”
“在网络上，人们不会阅读页面上的每个单词； 而是扫描。 他们自然会尝试提高效率，并付出最少的努力来实现他们的目标。”
This means that in an interface with multiple functionalities, the user will scan to find what he is looking for, therefore, much of the visible information will be filtered.
这意味着，在具有多种功能的界面中，用户将进行扫描以查找自己正在寻找的内容，因此，许多可见信息将被过滤。
Continuing,
继续，
How people read on the web is highly contingent upon:
人们在网络上的阅读方式高度取决于：
* Their task* Their assumptions from previous experiences(…)* The page layout* The type of page content
*他们的任务*他们对先前经验的假设(...)*页面布局*页面内容的类型
It is clear that the last two factors can be controlled by designers, and considering that web design improves every time, the ideal is to use knowledge and technology to facilitate the user’s actions and not to hamper their experience with a digital product; for that reason, I have a simple line of thought when building a layout.
显然，最后两个因素可以由设计师控制，并且考虑到网页设计每次都在改进，所以理想的方法是使用知识和技术来促进用户的操作，而不是妨碍他们使用数字产品的体验。 因此，在构建布局时我有一条简单的思路。
各级用户 (Users by levels)
Some argue that if there is a need to use a label next to an icon, then the icon is irrelevant, because it would become secondary and just another load in the recognition sequence. But it is known that icons have the role of helping towards a quick recognition, regardless of the experience people have with the interface itself, since iconography systems are generally based on the same logical principles.
有人认为，如果需要在图标旁边使用标签，则该图标是无关紧要的，因为它会成为次要的，并且只是识别序列中的另一个负担。 但是众所周知，无论人们有什么经验，图标都具有帮助快速识别的作用。 与界面 本身，因为图像系统 通常基于 在相同的逻辑原理上。
In the image above, it is observed that the icon in the menu is accompanied by title of the page to be accessed, according to the function expected by the user. In a second moment, the icon will guide him more easily, since it will facilitate his scan until the time when he no longer needs to read everything to find what he is looking for.
在上图中，根据用户期望的功能，可以看到菜单中的图标带有要访问页面的标题。 稍后，该图标将更轻松地引导他，因为这将有助于他进行扫描，直到不再需要阅读所有内容以查找所需内容为止。
When creating an interface, it is known that it will be accessed by different people with different reading and browsing skills. To facilitate understanding, I will separate them into three groups and classify them as: the virgin user; the average user, and the experienced user.
众所周知，创建界面时，将由具有不同阅读和浏览技能的不同人员访问。 为了便于理解，我将它们分为三类并将其分类为：原始用户； 普通用户和有经验的用户。
The virgin user, as you might imagine, is the person who is having the first contact with a given interface. If this interface is part of a system, it means that it will still have a first contact with the other pages at some point. The tendency is that people at this level scan the page more slowly than the average, and devote more time to understand the statements until they find what they are looking for.
您可能会想到， 原始用户是首次与给定界面联系的人。 如果此界面是系统的一部分，则意味着它在某些时候仍将与其他页面保持首次联系。 趋势是，此级别的人员扫描页面的速度比平均水平要慢，并且会花更多的时间来理解语句，直到找到所需的内容为止。
The average user is in the middle of the platform’s learning curve, or may simply have more use experience in a digital environment, but has not yet mastered the interface itself.
普通用户处于平台学习曲线的中间，或者可能只是在数字环境中拥有更多使用经验，但尚未掌握界面本身。
The experienced user has been using the platform for some time, so its scan is faster and does not have the need to read most of the available content, as it knows how the content is positioned in the layout and recognizes the visual patterns of the elements, sections and interactions. And perhaps these are precisely the factors that contribute to many users being resistant to sudden changes in the interfaces of different products.
有经验的用户使用该平台已有一段时间，因此它的扫描速度更快，并且不需要读取大多数可用内容，因为它知道内容在布局中的位置并可以识别元素的可视模式，版块和互动。 也许正是这些因素促使许多用户抵制不同产品界面的突然变化。
Now, consider the layout below as a report that is sent weekly by email to a user from an investment app. Will he read everything on the card? Every time his opens? Or just what is important to him?
现在，将以下布局视为报告，该报告每周从投资应用通过电子邮件发送给用户。 他会读卡上的所有内容吗？ 每次他打开？ 还是对他来说重要的是什么？
Looking at the example, what was your reading order? I can get an idea from the visual hierarchy logic attributed by the treatment of positioning, weight, and size of the elements. Knowing that some points suffer visual competition, due to the lack of a more defined hierarchy, for the day to day work it is necessary to conduct some tests with the public to be sure and decide on the necessary changes (tools such as heat map (Hotjar; Crazy Egg) would be sufficient to collect the data).
查看示例，您的阅读顺序是什么？ 通过对元素的位置，重量和大小的处理，我可以从视觉层次结构逻辑中得到一个想法。 知道由于缺乏更明确的层次结构而导致某些点遭受视觉竞争，因此在日常工作中，有必要与公众进行一些测试，以确保并确定必要的更改(例如热图( Hotjar； Crazy Egg)就足以收集数据了。
Note that in the content, the only dynamic information is the one weighted 4, which are the most important together with the 3's. Weighted 2 information is constant and becomes repetitive with each report of this type, while weighted 1 information will become repetitive in all types of emails sent by the app, as they are part of its identification.
请注意，在内容中，唯一的动态信息是加权的4。 与3一起。 加权2信息是恒定的，并且对于这种类型的每个报告都是重复的，而加权1信息将在应用发送的所有类型的电子邮件中重复，因为它们是其标识的一部分。
In a first access the user needs to understand what it is reading about, so it is important that all the information is there, but not necessarily in a prominent position. Considering this, reducing the visual weight (fading the color, changing font size, etc.) of the fixed information is an option to not cause distraction in reading for a more experienced user.
首次访问时，用户需要了解它正在阅读的内容，因此重要的是，所有信息都应存在，但不必位于显眼位置。 考虑到这一点，减少固定信息的视觉重量(淡化颜色，更改字体大小等)是一种选择，它不会对有经验的用户造成阅读干扰。
In the image above, simple changes in content placement highlight the most important subjects, and they demonstrate the influence that attributes have on the hierarchy. The message identifying the content of the email is replaced by one with a more personal, empathetic approach. The header and footer are incorporated into the main body, and lose a possible highlight due to segregation. Finally, the primary button is changed to a secondary version(depending on the click rate, the primary button may be the best option).
在上图中，内容放置的简单变化突出显示了最重要的主题，它们展示了属性对层次结构的影响。 标识电子邮件内容的消息被一种更具个性化，富有同情心的方法所取代。 页眉和页脚已合并到主体中，并且由于隔离而失去了可能的突出显示。 最后，将主要按钮更改为次要版本(取决于点击率，主要按钮可能是最佳选择)。
In business software context, more precisely within its popular tables, is very common that column titles has more highlight than the content of each row. Since titles are a fixed information — and the user probably have almost daily contact — why not transfer the importance degree to the principal and variable content to the user?
在商业软件环境中，更确切地说，在其流行的表中，列标题比每行的内容更突出是很常见的。 由于标题是固定信息，并且用户可能几乎每天都与他们联系，所以为什么不将重要性程度转移到用户的主要内容和可变内容上呢？
Acknowledging the complexity of costs and practice when creating an interface, following this line of thinking can help making decisions about how to prioritize elements and set up the hierarchy that promotes an excellent usability contemplating the different audiences. And since integration is something essential for new users, the set is complete if combined with a great on-boarding process, with tutorials, tool-tips, and instant feedback on the key points of each product. This way, an efficient and user-friendly experience is built, which ultimately contributes to engagement and retention.
认识到创建界面时成本和实践的复杂性，遵循这一思路可以帮助您做出有关如何确定元素优先级和建立层次结构的决策，从而提高考虑不同受众的可用性。 由于集成对于新用户来说是必不可少的，因此 如果结合出色的入门流程，教程，工具提示以及对每个产品关键点的即时反馈相结合，就可以完成。 这样，便建立了高效且用户友好的体验，最终有助于参与和保留。
If you found the procedure presented here useful, use it, test it with the users of your product, draw your own conclusions and then return the results as a form of knowledge to the design community.
如果您发现此处介绍的过程有用，请使用它，并与产品的用户进行测试，得出自己的结论，然后将结果作为一种知识形式返回给设计社区。
This is my first article written in English, I wrote it as a way to practice writing. If you find any grammatical error please let me know, that way I can correct it and learn. I sincerely hope that this content will help you in some way at your work, if you have any questions or just want to discuss about design send me an email viniciusnda@gmail.com.
这是我的第一篇用英文写的文章，是我练习写作的一种方式。 如果您发现任何语法错误，请让我知道，这样我就可以纠正和学习。 我衷心希望，如果您有任何疑问或只是想讨论有关设计的内容，此内容将以某种方式对您有所帮助。给我发送电子邮件viniciusnda@gmail.com 。
翻译自: https://uxdesign.cc/visual-hierarchy-oriented-by-users-levels-5adc621c42b3
导向滤波 导向图
6266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
