小程序显示细线_精心设计：高密度显示器上的细线

最新推荐文章于 2023-04-12 17:36:45 发布

weixin_26732881

最新推荐文章于 2023-04-12 17:36:45 发布

阅读量211

点赞数

文章标签： java python 小程序 c++ ViewUI

原文链接：https://uxdesign.cc/design-with-care-thin-lines-on-high-density-displays-4694f8a95c9f

版权

小程序显示细线

Despite the many benefits of Retina displays, there is one clear drawback that must be considered when designing for high-density screens:

尽管Retina显示器具有许多优点，但在设计高密度屏幕时仍必须考虑一个明显的缺点：

必须避免细线。 (Thin lines must be avoided.)

You might be more familiar with this problem as a font-rendering issue: very thin weights at small sizes tend to render poorly, since they are expressed through a variety of different rendering engines (some with anti-aliasing effects applied, which may cause unexpected distortions).

您可能将这个问题作为字体渲染问题更为熟悉：小尺寸的粗细权重字体往往表现不佳，因为它们是通过多种不同的渲染引擎来表达的(有些应用了抗锯齿效果，这可能会导致意外的扭曲)。

But, this can also present in other high-contrast elements, such as element borders.

但是，这也可能出现在其他高对比度元素中，例如元素边界。

Here is an example of a button with a 1px border, which does not render well because it is too thin:

这是一个带有1px边框的按钮的示例，该边框太细，因此无法很好地呈现：

原创设计 (Original Design)

This video presents the original design

该视频介绍了原始设计

设计调整1：移除边框 (Design Tweak 1: Remove Border)

The first approach to solving this issue is to remove the border entirely: it isn’t required. The element does have contrast issues with the background, but only the play icon needs to be recognizable (and it is, with a near 100% contrast ratio).

解决此问题的第一种方法是完全消除边界：这不是必需的。该元素的背景确实存在对比度问题，但仅需要识别播放图标(对比度约为100％)。

This video removes the border on the button element

该视频删除了按钮元素上的边框

设计调整2：使边框变厚 (Design Tweak 2: Make Border Thicker)

Another approach would be to make the border thicker. This solves most sub-pixel rendering issues. However, there are no other elements with similar border emphasis:

另一种方法是使边界更厚。这解决了大多数子像素渲染问题。但是，没有其他元素具有类似的边框重点：

This video adds thickness to the border of the button element

该视频为按钮元素的边框增加了粗细