如何使用在任何分辨率下看起来都不错的字体设计 Metro UI?如何使用、都不错、分辨率、字体

由网友(师太啵一个)分享简介:查看字体指南,我们看到字体是用磅来指定的.一个点是 1/72 英寸,因此它是一个绝对度量:一个 10 点字符应该在任何分辨率的任何显示器上以完全相同的绝对大小显示.这对我来说很有意义,因为我希望能够以相同的大小阅读文本,无论是在 10 英寸的平板电脑还是 23 英寸的显示器上.换句话说,我希望我的文本可以在平板电脑上阅...

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

另一方面,我可以理解某些 UI 元素可以以像素为单位指定,如 页面布局指南.

卓意设计 ui设计有哪些就业方向,广泛吗

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

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

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

解决方案

他们在想什么"在 这篇博文.

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

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

100% 未应用缩放时高清平板电脑 140%Quad-XGA 平板电脑为 180%

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

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

When one looks at the Guidelines for fonts, we see that fonts are specified in points. A point is 1/72 of an inch so it is an absolute measure: a 10 points character should show at the exact same absolute size on any monitor at any resolution. That would make sense to me as I want to be able to read text -at the same size- whether on a 10 in tablet or a 23 in monitor. In other words, I want my text to be readable on a tablet, but I do not want it to be too big on a monitor.

On the other hand, I can understand that some UI elements could be specified in pixels, as in the Page layout guidelines.

However, in XAML font size is specified in pixels which is device dependent (to my understanding). Hence the fonts size will look tiny on a monitor with a higher resolution! See this post for more details. The answer in that post says "this way, you are getting a consistent font size". I can't see how I am getting a consistent size when it changes when the resolution changes?!?

Should I load different font size programmatically depending on the resolution of the device? I see here that Windows does some scaling adjustment depending on the DPI. Will this adjustment be enough for my users to have a great experience on a tablet and on, say, a 20 inch monitor (or should I programmatically change the font size depending on the device resolution)?

Bonus question: WHY are the Font Guidelines written using points when the software tools do not use points (like, what were they thinking)?

解决方案

"What were they thinking" is extensively covered in this blog post.

You'll also see described how scaling for pixel density is automatic:

For those who buy these higher pixel-density screens, we want to ensure that their apps, text, and images will look both beautiful and usable on these devices. Early on, we explored continuous scaling to the pixel density, which would maintain the size of an object in inches, but we found that most apps use bitmap images, which could look blurry when scaled up or down to an unpredictable size. Instead, Windows 8 uses predictable scale percentages to ensure that Windows will look great on these devices. There are three scale percentages in Windows 8:

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

The percentages are optimized for real devices in the ecosystem. 140% and 180% may seem like odd scale percentage choices, but they make sense when you think about how this will work on real hardware.

For example, the 140% scale is optimized for 1920x1080 HD tablets, which has 140% of the baseline tablet resolution of 1366x768. These optimized scale factors maintain consistent layouts between the baseline tablet and the HD tablet, because the effective resolution is the same on the two devices. Each scale percentage was chosen to ensure that a layout that was designed for 100% 1366x768 tablets has content that is the same physical size and the same layout on 140% HD tablets or 180% quad-XGA tablets.

阅读全文

相关推荐

最新文章