小程序 顯示細線

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該視頻為按鈕元素的邊框增加了粗細

您更喜歡哪種方法？ (Which approach do you prefer?)

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/design-with-care-thin-lines-on-high-density-displays-4694f8a95c9f

小程序 顯示細線

總結

以上是生活随笔為你收集整理的小程序 显示细线_精心设计：高密度显示器上的细线的全部內容，希望文章能夠幫你解決所遇到的問題。

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