适用于小型Android屏幕的最佳UI和UX设计实践是什么？

I have a background image with many icons. I've implemented it usually match parents for height and width.

我有一个带有许多图标的背景图片。我已经实现了它通常匹配父母的身高和宽度。

The original size is 562 (width) x 964 (height) = equivalent to an iPhone screen size.

原始尺寸为562(宽度)x 964(高度)=相当于iPhone屏幕尺寸。

I tested on a smaller device that has 480 (width) x 800 (height) screen size. The background image is distorted.

我在一个尺寸为480(宽)×800(高)屏幕的小型设备上进行了测试。背景图像失真。

In best practices, what is the good approach to designing design on this? Scale from smaller devices to higher devices or the opposite which I am doing?

在最佳实践中,设计此类设计的好方法是什么?从较小的设备扩展到更高的设备或与我正在做的相反?

If I'm correct large vectored image I designed to prevent low/poor quality issues on smaller devices, which perfectly has no problems. But, its stretched.

如果我是正确的大矢量图像,我设计的目的是防止较小设备上的低质量/低质量问题,这完全没有问题。但是,它拉长了。

2 个解决方案

#1

You should start with smaller screens and scale up from there. This way you can add extra content when the screen is big enough. Use sw (smallest width) qualifiers to check when to apply different layouts, such as sw600 which is a popular one.

你应该从较小的屏幕开始,然后从那里放大。这样,当屏幕足够大时,您可以添加额外的内容。使用sw(最小宽度)限定符来检查何时应用不同的布局,例如sw600,这是一种流行的布局。

Then if you need to do different things in your code, you can set a boolean resource in say a "booleans.xml" file such as:

然后,如果您需要在代码中执行不同的操作,可以在“booleans.xml”文件中设置布尔资源,例如:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <bool name="large_layout">false</bool>
</resources>

Also do this using the sw600 qualifier (for example) and then you can check this in the code to determine what layout to apply or whether to do something else only for large screens. It will only return true if the value in the sw qualifier version is true.

也可以使用sw600限定符(例如)执行此操作,然后您可以在代码中进行检查以确定要应用的布局或是否仅对大屏幕执行其他操作。只有sw限定符版本中的值为true时,它才会返回true。

If you are using a vector drawable then the image will scale to any size without distortion. But it must be in xml for this to work (You can't export vector drawables to some other format like png) and then have it still stretch. It should look something like this: https://developer.android.com/training/material/drawables.html.

如果您使用矢量drawable,那么图像将缩放到任何大小而不会失真。但它必须在xml中才能工作(你不能将矢量drawable导出到某些其他格式,如png),然后让它仍然伸展。它看起来应该是这样的:https://developer.android.com/training/material/drawables.html。

Use multiple sizes of images for non vector formats.

将多种尺寸的图像用于非矢量格式。

Some more guidance can be found here: https://developer.android.com/guide/practices/screens_support.html

可以在此处找到更多指导:https://developer.android.com/guide/practices/screens_support.html

And here for the recommended breakpoints: https://material.io/guidelines/layout/responsive-ui.html

这里是建议的断点:https://material.io/guidelines/layout/responsive-ui.html

Although those break points are a guide. The actual content should determine the breakpoints. So you should set the breakpoints where the content literally breaks. But for a lot of apps the standard breakpoints should suffice.

虽然这些突破点是一个指南。实际内容应确定断点。因此,您应该设置内容字面上断开的断点。但对于很多应用程序来说,标准断点应该足够了。

#2

(Posted on behalf of the OP).

(代表OP发布)。

Problem solved! (Currently working on it)

问题解决了! (目前正在努力)

I need to start small to big, re-save this in a vector format like .svg and somehow do designs for normal-layout, xl and so on.

我需要从小到大,从像.svg这样的矢量格式重新保存,并以某种方式为普通布局,xl等设计。

#1