【问题标题】:How to design Metro UIs with fonts that look good on any resolution?如何使用在任何分辨率下看起来都不错的字体设计 Metro UI?
【发布时间】:2013-02-26 13:15:20
【问题描述】:

当我们查看Guidelines for fonts 时,我们会看到字体以磅为单位。一个点是 1/72 英寸,因此它是一个绝对度量:一个 10 点字符应该在任何分辨率的任何显示器上以完全相同的绝对大小显示。这对我来说很有意义,因为我希望能够以相同的大小阅读文本,无论是在 10 英寸的平板电脑还是 23 英寸的显示器上。换句话说,我希望我的文本可以在平板电脑上阅读,但我不希望它在显示器上太大。

另一方面,我可以理解某些 UI 元素可以以像素为单位指定,如 Page layout guidelines

但是,在 XAML 中,字体大小以像素为单位指定,这取决于设备(据我所知)。因此,字体大小在分辨率更高的显示器上看起来会很小!有关更多详细信息,请参阅此post。该帖子中的答案是“这样,您将获得一致的字体大小”。当分辨率改变时,我看不到我如何获得一致的尺寸?!?

我应该根据设备的分辨率以编程方式加载不同的字体大小吗? 我看到here Windows 会根据 DPI 进行一些缩放调整。这种调整是否足以让我的用户在平板电脑和 20 英寸显示器上获得出色的体验(或者我应该根据设备分辨率以编程方式更改字体大小)?

额外问题:为什么在软件工具不使用点的情况下使用点编写字体指南(例如,他们在想什么)?

【问题讨论】:

  • 传统的屏幕分辨率概念与屏幕空间有关,即“查看更多”。但有些人更愿意将分辨率视为“看得更清楚”。这就是与 DPI/像素混淆的根源,而且确实非常令人困惑。

标签: windows-8 fonts winrt-xaml


【解决方案1】:

“他们在想什么”在this blog post 中有广泛的介绍。

您还将看到如何自动缩放像素密度:

对于购买这些像素密度更高的屏幕的用户,我们希望确保他们的应用、文本和图像在这些设备上看起来既美观又实用。早期,我们探索了对像素密度的连续缩放,这将保持对象的大小(以英寸为单位),但我们发现大多数应用程序使用位图图像,当放大或缩小到不可预测的大小时可能看起来模糊。相反,Windows 8 使用可预测的比例百分比来确保 Windows 在这些设备上看起来很棒。在 Windows 8 中有三个比例百分比:

100% when no scaling is applied
140% for HD tablets
180% for quad-XGA tablets

这些百分比针对生态系统中的真实设备进行了优化。 140% 和 180% 可能看起来像是奇怪的比例百分比选择,但当您考虑这将如何在真实硬件上工作时,它们是有意义的。

例如,140% 比例针对 1920x1080 高清平板电脑进行了优化,它具有 1366x768 的基准平板电脑分辨率的 140%。这些优化的比例因子使基准平板电脑和高清平板电脑之间的布局保持一致,因为这两种设备的有效分辨率相同。选择每个比例百分比是为了确保为 100% 1366x768 平板电脑设计的布局在 140% HD 平板电脑或 180% Quad-XGA 平板电脑上具有相同的物理尺寸和布局。

【讨论】:

  • 非常感谢。我错过了那个帖子。
  • 呵呵。我心情不好。既然我阅读了您引用的整个长篇文章(以及所有 cmets),我对其中的字体了解不多!我的额外问题“为什么在软件工具不使用点的情况下使用点编写字体指南?”在我看来,特别是关于字体。不过感谢您提供的链接,非常棒的阅读。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-02-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-04-18
  • 2020-03-16
  • 1970-01-01
相关资源
最近更新 更多