UI设计原则：对齐的艺术-CSDN博客

重点 (Top highlight)

There are several principles of User Interface Design which construct each and every design composition. These principles include Balance, Hierarchy, Alignment, White Space, Contrast, Movement and Proportion. In this article, I intend to use Medium as a prime example of how to successfully employ the best use of the alignment principle.

Ť这里有用户界面设计的几个原则其构造每一个设计组合物。这些原则包括平衡，层次结构，对齐，空白，对比度，运动和比例。在本文中，我打算使用Medium作为如何成功利用对齐原则的最佳用法的主要示例。

对齐方式介绍 (Introducing Alignment)

Alignment is the design theory which builds order, organisation, and as a by-product from successful implementation, improves readability. Composition alignment is often a subtle art and one which requires close attention to small detail, yet if delivered accurately, the distinction between a polished and non-polished interface is clear to see.

对齐是一种设计理论，可以建立顺序，组织起来，并作为成功实施的副产品来提高可读性。构图对齐通常是一种微妙的技巧，需要密切关注小细节，但是如果准确交付，则可以清楚地看到抛光界面和未抛光界面之间的区别。

Alignment is often easily omitted as it’s one of the few design principles which is in fact invisible. Alignment is a hidden background process which is used to manipulate and position foreground active elements in a simple yet powerful way.

对齐通常很容易被忽略，因为它是实际上不可见的少数设计原则之一。对齐是一个隐藏的后台过程，用于以简单但功能强大的方式操纵和定位前景活动元素。

Alignment is especially important amongst publication sites and news platforms. If delivered successfully, alignment vastly improves the customer reading experience. I therefore intend to demonstrate how Medium have understood the intricacies of alignment within their user interface design in order to create structure and order throughout their site.

对齐在发布站点和新闻平台之间尤其重要。如果交付成功，对齐将大大改善客户阅读体验。因此，我打算展示Medium如何理解其用户界面设计中的对齐方式的复杂性，以便在整个网站上创建结构和顺序。

垂直对齐 (Vertical Alignment)

It’s quite easy to confuse vertical and horizontal alignment as each refer to the opposite axis when thinking of the visual positioning of elements. Vertical alignment is when the placement of the top, centre and bottom elements align together on the same horizontal plane.

当考虑元素的视觉定位时，很容易混淆垂直和水平对齐，因为它们都指向相反的轴。垂直对齐是指顶部，中心和底部元素的位置在同一水平面上对齐。

Image for post — Vertical alignment on opposing columns

As you can see from above, the opposing left and right columns on Medium’s homepage use vertical alignment to align the top and bottom of each article image while each article title is also aligned on the same horizontal plane.

从上方可以看到，Medium主页上相对的左右两列使用垂直对齐方式来对齐每个文章图像的顶部和底部，而每个文章标题也都在同一水平面上对齐。

Although the opposing columns are connected via the use of vertical alignment, more affordance and importance is provided to the left column by increasing the width of the article image and the font-size of the article title. Vertically aligning the opposing titles is a clever use of the alignment principle as when font-sizes are indifferent in size, they can often align on an uneven axis. Here, Medium have ensured that a fixed height is given to the left and right article image which ensures that the subsequent titles are evenly aligned to each other.

尽管相对的列通过使用垂直对齐方式进行连接，但是通过增加文章图像的宽度和文章标题的字体大小，可以为左列提供更多的便利和重要性。垂直对齐相对的标题是对齐原则的明智用法，因为当字体大小无差异时，它们通常可以在不均匀的轴上对齐。在此，Medium已确保为左右文章图像赋予固定的高度，以确保后续标题彼此均匀对齐。

A more obvious example of vertical alignment can be found on Medium’s publication pages.

在Medium的出版物页面上可以找到一个更明显的垂直对齐示例。

The layout which constructs the Latest Story segment is composed of a grid structure spanning three equally sized columns. Within this grid structure, each image, title and subtitle sit on the same horizontal axis. This alignment creates balance and equal weight is afforded to each article.

构成“ 最新故事”段的布局由一个网格结构组成，该结构跨越了三个相等大小的列。在此网格结构中，每个图像，标题和字幕位于同一水平轴上。这种对准产生平衡，并且为每个物品提供相等的重量。

水平对齐 (Horizontal Alignment)

Horizontal alignment is the alignment of the left, centre and right edges of components.

水平对齐是组件左，中和右边缘的对齐。

Articles that are recommended in the Based On Your Reading History segment, use horizontal alignment to align all content elements of each article to the outer left edge. Horizontal alignment is also used on each article image. The horizontal positioning of the Reading List and Dismiss icons also ensures that all icons sit consistently on the same vertical axis.

在“ 根据您的阅读历史记录”部分中推荐的文章，请使用水平对齐方式将每篇文章的所有内容元素与左外侧对齐。水平对齐也用于每个商品图像。 “阅读列表”和“关闭”图标的水平位置还可以确保所有图标始终位于同一垂直轴上。

A good tip for remembering the difference between vertical and horizontal alignment is to consider the movement of objects. For example, moving the Reading List or Dismiss icon left or right is repositioning the icon on its horizontal axis and is therefore using horizontal alignment.

记住垂直和水平对齐方式之间差异的一个好技巧是考虑对象的移动。例如，向左或向右移动“阅读列表”或“关闭”图标会将图标重新定位在其水平轴上，因此使用水平对齐方式。

I believe that the positioning of the icon objects is a deliberate decision made by Medium’s design team in order to improve readability and to separate the distinction of elements within the group. The two icon objects could have easily followed the star icon which is currently positioned to the right of the article ‘time to read’ reference, yet I believe a deliberate decision was made to purposely anchor the icons to the right side.

我认为，图标对象的位置是Medium设计团队的故意决定，目的是提高可读性并分离组内元素的区别。这两个图标对象可以很容易地跟随当前位于“ 阅读时间”参考文章右侧的星形图标，但我相信已做出有意的决定，有意将这些图标锚定在右侧。

对象对齐 (Object Alignment)

The aforementioned icons bring me onto discussing object alignment. UI objects can include images, graphics or icons — all of which are typically inconsistent in their width and their height. As such, aligning objects can prove to be quite tricky and often misalignment occurs.

前面提到的图标使我开始讨论对象对齐。 UI对象可以包括图像，图形或图标-它们通常在宽度和高度上不一致。因此，对齐对象可能会非常棘手，并且经常会发生对齐错误。

The above image demonstrates misalignment that can appear if objects are placed using a left alignment layout (left). Aligning objects centrally creates a more ordered and balanced layout of objects (right). A good tip when combining objects with content is to align objects centrally and to align content left.

上图显示了如果使用左对齐布局(左)放置对象，则会出现未对齐的情况。集中对齐对象可创建更加有序和平衡的对象布局(右)。将对象与内容组合时的一个很好的技巧是将对象居中对齐并向左对齐内容。

The New from your Network segment illustrates how Medium correctly adopt central and left object alignment. The user profile images are aligned centrally while the article title and subsequent information are all aligned left. Medium also employ the use of truncating writer and the publication detail via the use of ellipsis to ensure this information remains on a single line.

来自“网络 ”的“ 新建”部分说明了“中型”如何正确采用中心和左对象对齐。用户个人资料图像在中心对齐，而文章标题和后续信息都在左侧对齐。媒介还通过使用省略号来使用截断的作者和出版物的详细信息，以确保该信息保持在一行上。

中心对准 (Central Alignment)

The final alignment that Medium adopt is central alignment. This is less common throughout their site as central alignment is typically a good practise to employ if the intention is to concentrate user focus toward a specific location and away from other interface elements.

中号采用的最终对齐方式是中心对齐方式。在整个站点中这种情况不太常见，因为如果打算将用户的注意力集中到特定位置并远离其他界面元素，则通常采用中央对齐。

I believe that Medium are aware of this and therefore call on other design principles such as contrast and proportion to reduce the consequence of shifting user focus.

我相信Medium意识到这一点，因此呼吁其他设计原则(例如对比度和比例)来减少转移用户注意力的后果。

Image captions are those elements that utilise central alignment. Centrally aligning items, especially those in use within articles typically employing a left to right, unjustified reading pattern, draw focus toward them. By reducing the caption font-size and contrast, these image captions do demand focus, however the focus is minor in comparison. Without reducing font-size and contrast, Medium’s image captions would break the user reading experience as reading flow and speed would be abruptly interrupted.

图像标题是那些利用中心对齐的元素。集中对齐的项目(尤其是那些通常在使用从左到右，不合理的阅读模式的商品中使用的项目)会吸引他们的注意力。通过减小字幕的字体大小和对比度，这些图像字幕确实需要聚焦，但是相比之下聚焦较小。在不减小字体大小和对比度的情况下，Medium的图像标题会破坏用户的阅读体验，因为阅读流程和速度会突然中断。

Not only does alignment help to make a design composition appear professional, clean and polished, it also creates order, structure and assists the reading experience.

对齐不仅有助于使设计作品显得专业，整洁和优美，还可以创造秩序，结构并有助于阅读体验。

Project requirements and project scope may define or dictate the appropriate alignment to adopt, however, with numerous layout tools available (Bootstrap grid system, CSS Grids and Flex Box), there is little reason why successful alignment cannot be introduced into your layout today.

项目要求和项目范围可能会定义或指示要采用的适当对齐方式，但是，由于有许多可用的布局工具(Bootstrap网格系统，CSS网格和Flex Box)，今天几乎没有理由无法将成功的对齐方式引入您的布局中。