视觉结构– Web UI设计者的权威指南

Creativity works wonders when it comes to designing the UI(user interface) for a website or web application. Right from changing the composition, color and size to everything else that forms a crucial component of a web design UI; you can perform all this and much more by revealing the creative side of your personality. Visual hierarchy is something that can give the much needed push to your web UI designing initiative. By including the right type of visual elements into your web design, you can easily grab the attention of targeted audience within a very small period of time. Keep on reading this blog to find more about creating a visual structure of your web UI(user interface).

当设计网站或Web应用程序的UI(用户界面)时，创造力会产生奇迹。 从更改组成，颜色和大小到构成Web设计UI关键组成部分的其他所有功能； 您可以通过展现个性的创造力来执行所有这一切，甚至更多。 视觉层次结构可以为您的Web UI设计计划提供急需的推动力。 通过在Web设计中包含正确类型的视觉元素，您可以在很短的时间内轻松吸引目标受众的注意力。 继续阅读此博客，以查找有关创建Web UI(用户界面)视觉结构的更多信息。

是什么使视觉组织成为Web UI设计人员的主要考虑因素？ (What makes visual organization a key consideration for web UI designers?)

Just like the regular artists, even the web UI designers pay special attention to following the best Web UI practices for enriching their website/web app with contemporary artforms. By adding a tint of visual excellence into your web UI, you can conveniently enhance the acceptance of your site/app. Visual assets allow you to mix the science of aesthetics with the principles of business, thereby enabling you to design an extraordinary user interface that can be used and interpreted well by the targeted users.

就像常规艺术家一样，甚至Web UI设计师也要特别注意遵循最佳Web UI做法，以用当代艺术形式丰富其网站/ Web应用程序。 通过在Web UI中添加出色的视觉效果，您可以方便地增强对网站/应用程序的接受度。 视觉资产使您能够将美学科学与商业原则相结合，从而使您能够设计出非凡的用户界面，目标用户可以很好地使用和解释该界面。

设计全部与视觉传达有关 (Design is all about Visual Communication)

In order to create a site/app that can stand out from the crowd, it is absolutely essential for you to communicate your ideas to viewers in a crisp and clear manner. You need not include massive blocks of information within the web/app pages, instead just opt for including pictures with some brief text. The reason for this is that people aren’t data processors but visual thinkers.

为了创建一个可以在人群中脱颖而出的网站/应用，对您以清晰明了的方式向观众传达自己的想法绝对至关重要。 您无需在网络/应用程序页面中包含大量信息，而只需选择包含带有简短文本的图片即可。 原因是人们不是数据处理器，而是视觉思想家。

仔细研究在Web UI设计器工具箱中占据空间的工具 (A closer look at the tools that occupy a space within web UI designers’ tool-kit)

• Size

  尺寸

You can use size as a remarkable visual hierarchal tool for guiding a viewer to see a particular portion of the website’s/app’s page. Since size is one of the most vital concerns of a web designer, it’s essential to correlate the size with its specific significance in the respective web design. Ensure to keep the biggest elements as the importance ones and the smallest ones as the least important ones.

您可以将大小用作引人注目的视觉层次结构工具，以引导查看者查看网站/应用页面的特定部分。 由于大小是Web设计师最关注的问题之一，因此必须将大小与其在各个Web设计中的特定意义相关联。 确保将最大元素保留为重要元素，将最小元素保留为最不重要元素。

• Color

  颜色

Color is yet another incredible tool that can be used for grabbing the attention of users. With the perfect use of bold, contrasting colors on your website/app, you can easily add an emotional appeal into your pages. It is interesting to note that color can easily affect everything from a website’s brand to specific symbolism. You can opt for use of advanced colors for classifying certain information placed within the visual hierarchy.

颜色是另一个不可思议的工具，可用于吸引用户的注意力。 通过在您的网站/应用程序中完美使用粗体，对比鲜明的色彩，您可以轻松地在网页中添加一种情感吸引力。 有趣的是，颜色很容易影响从网站品牌到特定象征意义的一切。 您可以选择使用高级颜色来对放置在视觉层次结构中的某些信息进行分类。

• Contrast

  对比

With using the perfect level of contrast, you can introduce dramatic shifts within the text size, thereby informing the users that there’s something different on the website which requires their immediate attention. If you’re inclined on separating the core web page content from the footer, you can opt for changing the background color from a lighter shade to a darker one.

通过使用最佳的对比度，您可以在文本大小中引入巨大的变化，从而告知用户网站上有些不同之处需要他们立即关注。 如果您倾向于将核心网页内容与页脚分开，则可以选择将背景颜色从较浅的阴影更改为较暗的阴影。

• Repetition

  重复

If you need to assign a specific meaning to web page elements, then repetition is the tool that will assist you with the same. For example, by keeping a “paragraph” text as grey colored, the user will automatically assume that all the grey colored text belongs to the basic paragraph. Thus, each time the user encounters a red link or a blue title, he’ll assume that the paragraph is different from the grey colored text.

如果您需要为网页元素分配特定的含义，那么重复是可以帮助您实现此目的的工具。 例如，通过将“段落”文本保持为灰色，用户将自动假定所有灰色文本都属于基本段落。 因此，每次用户遇到红色链接或蓝色标题时，他都会假定该段落不同于灰色文本。

• Density and Whitespaces

  密度和空白

As a designer who’s working on creating a site/app using visual hierarchy, you need to pack all the elements along with proper whitespaces. Doing this will make it convenient for the users to recognize the elements in addition to understanding the way in which they are and aren’t related with each other.

作为致力于使用视觉层次结构创建网站/应用程序的设计师，您需要将所有元素与适当的空格一起打包。 这样做不仅使用户易于理解元素，而且还可以了解彼此之间的关联方式。

图像-它在吸引访问者访问网站方面发挥的作用 (Imagery- The role it plays in attracting visitors towards a website)

People are usually attracted towards images and graphics the very first time they land up on the screen. Although the placement of images basically depends on the design of the entire page, you need to understand that a suitably-sized image must be placed towards the top of the visual hierarchy.

通常，人们第一次进入屏幕时就会被图像和图形所吸引。 尽管图像的放置基本上取决于整个页面的设计，但您需要了解必须将适当大小的图像放置在视觉层次结构的顶部。

排版-Web UI设计师不能忽略的另一个重要问题 (Typography- Another vital concern that can’t be skipped by web UI designers)

One of the best techniques of creating an eye-appealing site is establishing a visual hierarchy via typography. Particularly suited for online reference websites, you need to organize the visual hierarchy by considering elements such as size, style, color and weight. In addition to this, you may even opt for adding animation or motion within the web page. Here, you need not animate the movement but instead can express the same via shape and line.

创建引人注目的站点的最佳技术之一是通过印刷术建立视觉层次。 特别适合在线参考网站，您需要通过考虑大小，样式，颜色和重量等元素来组织视觉层次结构。 除此之外，您甚至可以选择在网页中添加动画或动作。 在这里，您无需为运动设置动画，而是可以通过形状和线条表示相同的内容。

结语 (Wrapping Up)

Although Visual hierarchy might sound a bit technical, in reality it is a pretty much simple concept. By making some minor tweaks, you can easily add a sense of visual significance into your pages.

尽管视觉层次结构听起来可能有点技术性，但实际上它是一个非常简单的概念。 通过进行一些细微的调整，您可以轻松地在页面中添加视觉上的意义。

翻译自: https://www.script-tutorials.com/visual-structure-a-definitive-guide-for-web-ui-designers/