导航抽屉标题的背景图像尺寸

Basically I liked the background used by Mr. Jonathan Lee for Navigation Drawer header back ground in google official link http://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-content

基本上我喜欢Jonathan Lee先生在谷歌官方链接http://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-content中使用导航抽屉头部背景所使用的背景

So I wanted to reproduce something similar inspired by that. I believe that I need to make a similar design in photoshop and set it as the background image. But the question is, what should be the dimensions and pixels so that it matches different kind of devices?

所以我想要重现类似的东西。我相信我需要在photoshop中制作类似的设计并将其设置为背景图像。但问题是,尺寸和像素应该是多少才能匹配不同类型的设备?

The above link has guidelines for icons and margins, but I haven't seen any dimensions mentioned for that background.

上面的链接有图标和边距的指南,但我没有看到为该背景提到的任何尺寸。

Does anybody have any idea or link that can help?

有没有人有任何想法或链接可以帮助?

3 个解决方案

#1

Width is:

Mobile:

Width = Screen width − 56 dp

宽度=屏幕宽度 - 56 dp

Maximum width: 320dp

最大宽度:320dp

Maximum width applies only when using a side nav on the left. When using a panel on the right, the panel can cover the full width of the screen.

最大宽度仅适用于左侧使用侧导航的情况。使用右侧面板时,面板可以覆盖屏幕的整个宽度。

http://www.google.com/design/spec/layout/structure.html#structure-side-nav

Height is determined by the aspect ratio of the image you want:

高度取决于所需图像的纵横比:

http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-ratio-keylines

Probably 16:9

#2

Unzipped an APK and this is what I have found out-

解压缩APK,这是我发现的 -

mdpi-
    width=384 pixels
    height=216 pixels
hdpi-
    width=576 pixels
    height=324 pixels
xhdpi-
    width=768 pixels
    height=432 pixels
xxhdpi-
    width=1152 pixels
    height=648 pixels

Image source= Google's Newsstand Application, Tool=Adobe photoshop 7.0

图片来源= Google的报亭应用,工具= Adobe photoshop 7.0

#3

I would recommend using adobe illustrator as it works great with ui design. Most mobile devices/tablets have a width ranging from 320px - up to 1080px and still increasing as new phones/tablets are released. Scalable vector graphics works great with prototyping ui layouts.

我建议使用adobe illustrator,因为它适用于ui设计。大多数移动设备/平板电脑的宽度范围从320px到1080px,并且随着新手机/平板电脑的发布而不断增加。可缩放矢量图形适用于原型ui布局。

check out: http://www.uxbooth.com/articles/considerations-for-mobile-design-part-2-dimensions/

退房:http://www.uxbooth.com/articles/considerations-for-mobile-design-part-2-dimensions/

#1