我应该为 iOS 应用准备多大的基本图像?
How base image size should I prepare for iOS app?
我是一名 iOS 开发人员,通常使用 Swift。最近我想知道我应该为 iOS 中的应用程序使用多少基本图像大小。
现在我为所有应用程序准备基于 640x1156(iPhone SE 大小)的图像(例如,我使用 640x1156 的背景图像)。但有人说我应该使用 750x1334(iPhone 6,7,8 尺寸),因为如果使用 iPhone SE 尺寸的图像,这些质量看起来有点低。此外,只有少数人使用 iPhone SE。
我应该使用哪种尺寸的图片?
更新
我使用背景图像和其他对象(6 个方块),它看起来不同取决于设备,当使用 iPhone 6s 和 iPhone X 时。
class Constants {
//width of base design size
static let guiPartsWidthOnDesign = CGFloat(750.0)
//ratio for layout
static var guiPartsMultiplier: CGFloat = UIScreen.main.bounds.width / (Constants.guiPartsWidthOnDesign / 2.0)
//detect safe area
static let safeArea = UIApplication.shared.delegate?.window??.safeAreaInsets.bottom
}
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.frame = CGRect(x: 0,
y: 0,
width: self.view.frame.size.width,
height: self.view.frame.size.height)
//backgrond
let background = UIImageView.init(frame: UIScreen.main.bounds)
background.center.x = self.view.frame.size.width/2
background.image = UIImage(named:"BG")
background.contentMode = UIViewContentMode.scaleAspectFill
self.view.insertSubview(background, at: 0)
//downleft blue button
let blueButton = UIImageView.init(frame: CGRect(
x: 64/2*Constants.guiPartsMultiplier,
y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
width: 60/2*Constants.guiPartsMultiplier,
height: 52/2*Constants.guiPartsMultiplier))
self.view.addSubview(blueButton)
blueButton.backgroundColor = UIColor.blue
//green button
let greenButton = UIImageView.init(frame: CGRect(
x: (60/2+64/2+128/2)*Constants.guiPartsMultiplier,
y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
width: 60/2*Constants.guiPartsMultiplier,
height: 52/2*Constants.guiPartsMultiplier))
self.view.addSubview(greenButton)
greenButton.backgroundColor = UIColor.green
//cyan button
let cyanButton = UIImageView.init(frame: CGRect(
x: (64/2+(60/2)*2+(128/2*2))*Constants.guiPartsMultiplier,
y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
width: 60/2*Constants.guiPartsMultiplier,
height: 52/2*Constants.guiPartsMultiplier))
self.view.addSubview(cyanButton)
cyanButton.backgroundColor = UIColor.cyan
//4 blue buttons
for i in 1..<5 {
let subBlueButton = UIImageView.init(frame: CGRect(
x: 64/2*Constants.guiPartsMultiplier,
y: self.view.frame.size.height-((43.0+CGFloat(50*i))*Constants.guiPartsMultiplier)-Constants.safeArea!,
width: 60/2*Constants.guiPartsMultiplier,
height: 52/2*Constants.guiPartsMultiplier))
self.view.addSubview(subBlueButton)
subBlueButton.alpha = 1.0
subBlueButton.backgroundColor = UIColor.blue
}
//down bar
let bar = UIImageView.init(frame: CGRect(
x:0,
y: self.view.frame.size.height-50,
width: self.view.frame.size.width,
height: 50))
bar.alpha = 0.3
bar.backgroundColor = UIColor.blue
self.view.addSubview(bar)
}
更新2
我的资产是:
更新3
关心安全区域,它在 iPhone X 上看起来像这样,它与 iPhone 6s 上的完全不同....
在 Xcode select 您的资产文件夹中 --> 在底部单击 + 符号 --> select 新图像集 --> 为其设置名称 --> 现在拖动并删除 1x、2x 和 3x 大小的图像。此处查看此图像尺寸说明 What should image sizes be at @1x, @2x and @3x in Xcode?(对于所有设备图像尺寸,您应遵循此 link)
iPhone X,iPhone 8 加,iPhone 7 加,iPhone 6s 加 @3x
所有其他高分辨率 iOS 设备 @2x
我的屏幕截图
在此屏幕截图中 select 新图像集
这里需要设置图片名称和拖放图片
您可以查看苹果开发者网站 link:https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/
来自另一个:https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/
也许它会对你有所帮助。
我是一名 iOS 开发人员,通常使用 Swift。最近我想知道我应该为 iOS 中的应用程序使用多少基本图像大小。
现在我为所有应用程序准备基于 640x1156(iPhone SE 大小)的图像(例如,我使用 640x1156 的背景图像)。但有人说我应该使用 750x1334(iPhone 6,7,8 尺寸),因为如果使用 iPhone SE 尺寸的图像,这些质量看起来有点低。此外,只有少数人使用 iPhone SE。
我应该使用哪种尺寸的图片?
更新
我使用背景图像和其他对象(6 个方块),它看起来不同取决于设备,当使用 iPhone 6s 和 iPhone X 时。
class Constants {
//width of base design size
static let guiPartsWidthOnDesign = CGFloat(750.0)
//ratio for layout
static var guiPartsMultiplier: CGFloat = UIScreen.main.bounds.width / (Constants.guiPartsWidthOnDesign / 2.0)
//detect safe area
static let safeArea = UIApplication.shared.delegate?.window??.safeAreaInsets.bottom
}
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.frame = CGRect(x: 0,
y: 0,
width: self.view.frame.size.width,
height: self.view.frame.size.height)
//backgrond
let background = UIImageView.init(frame: UIScreen.main.bounds)
background.center.x = self.view.frame.size.width/2
background.image = UIImage(named:"BG")
background.contentMode = UIViewContentMode.scaleAspectFill
self.view.insertSubview(background, at: 0)
//downleft blue button
let blueButton = UIImageView.init(frame: CGRect(
x: 64/2*Constants.guiPartsMultiplier,
y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
width: 60/2*Constants.guiPartsMultiplier,
height: 52/2*Constants.guiPartsMultiplier))
self.view.addSubview(blueButton)
blueButton.backgroundColor = UIColor.blue
//green button
let greenButton = UIImageView.init(frame: CGRect(
x: (60/2+64/2+128/2)*Constants.guiPartsMultiplier,
y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
width: 60/2*Constants.guiPartsMultiplier,
height: 52/2*Constants.guiPartsMultiplier))
self.view.addSubview(greenButton)
greenButton.backgroundColor = UIColor.green
//cyan button
let cyanButton = UIImageView.init(frame: CGRect(
x: (64/2+(60/2)*2+(128/2*2))*Constants.guiPartsMultiplier,
y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
width: 60/2*Constants.guiPartsMultiplier,
height: 52/2*Constants.guiPartsMultiplier))
self.view.addSubview(cyanButton)
cyanButton.backgroundColor = UIColor.cyan
//4 blue buttons
for i in 1..<5 {
let subBlueButton = UIImageView.init(frame: CGRect(
x: 64/2*Constants.guiPartsMultiplier,
y: self.view.frame.size.height-((43.0+CGFloat(50*i))*Constants.guiPartsMultiplier)-Constants.safeArea!,
width: 60/2*Constants.guiPartsMultiplier,
height: 52/2*Constants.guiPartsMultiplier))
self.view.addSubview(subBlueButton)
subBlueButton.alpha = 1.0
subBlueButton.backgroundColor = UIColor.blue
}
//down bar
let bar = UIImageView.init(frame: CGRect(
x:0,
y: self.view.frame.size.height-50,
width: self.view.frame.size.width,
height: 50))
bar.alpha = 0.3
bar.backgroundColor = UIColor.blue
self.view.addSubview(bar)
}
更新2
我的资产是:
更新3 关心安全区域,它在 iPhone X 上看起来像这样,它与 iPhone 6s 上的完全不同....
在 Xcode select 您的资产文件夹中 --> 在底部单击 + 符号 --> select 新图像集 --> 为其设置名称 --> 现在拖动并删除 1x、2x 和 3x 大小的图像。此处查看此图像尺寸说明 What should image sizes be at @1x, @2x and @3x in Xcode?(对于所有设备图像尺寸,您应遵循此 link)
iPhone X,iPhone 8 加,iPhone 7 加,iPhone 6s 加 @3x
所有其他高分辨率 iOS 设备 @2x
我的屏幕截图
在此屏幕截图中 select 新图像集
这里需要设置图片名称和拖放图片
您可以查看苹果开发者网站 link:https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/
来自另一个:https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/
也许它会对你有所帮助。