当我在智能手机上做一个应用程序时,我定义(例如)一个 20px*20px 的图标。这个图标在我的手机屏幕上看起来很棒,但在大屏幕平板电脑(如 ipad pro)上却不是。在这种情况下,图标看起来很小。
如果我随屏幕按比例增加图标的大小,那么图标最终看起来会太大。例如:
- 在我的手机屏幕 360*640 上,图标大小是 20x20px
- 在我的平板电脑屏幕 1024x1366 上,图标大小约为 60px*60px => 太大
有人知道设置图标/字体/等大小的好规则吗?根据屏幕的大小?我在 delphi (firemonkey) 下
最佳答案
在为不同的设备设计时,无论操作系统如何,都需要考虑两件事:首先是屏幕密度,其次是物理屏幕尺寸。
要能够对设备进行分类,仅知道屏幕像素大小是不够的。例如,10"平板电脑和 24"桌面显示器上的 1920x1080 像素显示存在差异。为了描述我们拥有的实际屏幕空间,有术语“设备独立像素 - dp 或dip”。这是描述指定操作系统 100% 比例的单个像素的基线大小。
不同的操作系统有不同的基线密度。 Windows 为 96 dpi,Android 为 160 dpi,iOS 为 163 dpi。此外,这些密度因设备而异,因此实际硬件屏幕密度通常与逻辑密度不同。想象一下 1920x1080 像素的 22"和 24"显示器之间的区别。两者都具有相同的声明操作系统(Windows 密度为 96dpi),但实际硬件密度和物理尺寸不同。
每个操作系统都有一些图标和字体大小的设计指南,你应该在基线密度下使用,然后你应该将它们放大以用于更高密度的屏幕。
字体有额外的尺寸定义为用户定义的字体比例。这意味着用户可以选择增加或减少基线字体比例 - 在 Android 上称为 Scale-independent Pixels (sp),在 iOS 上称为 Dynamic Type Size 强>。最好在声明字体大小时考虑用户定义的字体首选项,但在某些情况下,当您在图像上书写文本或进行其他一些更精确的设计时,您可以忽略用户大小并使用默认基线大小来制作确保您的设计不会因非默认字体比例设置而分崩离析。
实际上,当您的图标大小为 20x20dp 时,您将在所有设备上使用相同的大小。您可以在大屏幕设备(平板电脑)上使用稍大的图标,但仅将图像缩放 3 倍并不好看。此外,对于这些图标必须有多大也没有明确的规定。这完全取决于您的应用程序。如果您正在制作文本编辑器或图像编辑器,您将希望让图标保持较小,以便在较大的设备上提供更多有用的空间。另一方面,对于某些游戏,无论大小如何,您都可以将整个内容放大以适合屏幕。这完全取决于您。
最常见的比例和屏幕尺寸(dpi 密度仅供引用,实际设备密度可能会有所不同):
安卓
small screen - at least 426dp x 320dp
normal screen - at least 470dp x 320dp
large screen - at least 640dp x 480dp
xlarge screen - at least 960dp x 720dp
0.75x ldpi ~120dpi
1.0x mdpi ~160dpi
1.5x hdpi ~240dpi
2.0x xhdpi ~320dpi
3.0x xxxhdpi ~480dpi
4.0x xxxhdpi ~640dpi
iOS
1.0x @1x ~163dpi
2.0x @2x ~326dpi
3.0x @3x ~401dpi
window
1.0x ~96dpi
1.25x ~120dpi
1.5x ~144dpi
2.0x ~192dpi
进一步阅读:
Material design - Layout – Units and measurements
Android Supporting Multiple Screens
What is the difference between “px”, “dp”, “dip” and “sp” on Android?
关于android - 他们是否根据屏幕大小设置图标/字体/等大小的任何规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40907952/