在设计移动应用界面时,我们有时会根据自己的主观感受进行创作,而不完全了解所有界面尺寸的规范。
确实,移动设备的屏幕尺寸五花八门,尤其是Android设备,分辨率众多,如480×800, 480×854, 540×960等等。而近年来,iPhone的屏幕尺寸和分辨率也日趋多样化,如640×960, 750×1334等。
为了确保设计的一致性和用户体验,我们整理了一系列UI设计尺寸规范。遵循这些规范,有助于我们创建出用户都能理解并易于使用的设计产品。
一、尺寸
设计图尺寸
在UI组件布局方面,有严格的要求。
状态栏和导航栏:在如iPhone 6/7/8这样的设计中,状态栏的高度定为20pt(即40px)。而导航栏的高度则为44pt(88px)。对于iPhone X的设计,其状态栏和导航栏的高度均为44pt(或132px)。
标签栏:在iPhone 6/7/8设计中,标签栏的高度是49pt(98px)。在iPhone X中,其高度调整为83pt(249px)。通常,我们会在Tab栏图标的下方添加10pt(或20px/30px)的注释文字,其中包含34pt(102px)的安全区域。
实际作图时,以iPhone X为例,常用尺寸为2750×1624(@1倍)或375×812(@2倍)。
对于状态栏、导航栏和标签栏的具体像素值,如状态栏为88PX,导航栏和标签栏分别为98PX。
二、字体
在IOS设计环境中,我们应选择PingFang SC作为中文字体和SF UI Text及SF UI Display作为英文字体。其中SF UI Text适用于小于19pt的文字,而SF UI Display则适用于大于20pt的文字。
而在安卓设计中,中文字体通常选用思源黑体或Noto,英文字体则使用Roboto。
三、启动图标
作为设计师,我们需要为应用设计一个1024x1024px的启动图标。随后,根据程序员的指示,切割出不同尺寸的图标。例如,在@3x情况下桌面图标的尺寸为180x180px,而在@2x情况下为120x120px。
设计规范虽然严格,但它们是确保设计质量、保持产品一致性的关键。我们应严格遵循这些规范,以保证我们的设计能够经得起考验。
(注:如果文中有任何错误或遗漏之处,请随时指正。)