导航抽屉的背景图像尺寸 header

Background image dimension for Navigation Drawer header

基本上我喜欢google官方linkhttp://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-content

中Jonathan Lee先生用于Navigation Drawer的背景header

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

上面 link 有图标和边距的指导方针,但我没有看到任何提到背景的尺寸。

有没有人有任何想法或link可以提供帮助?

我建议使用 adobe illustrator,因为它非常适合 ui 设计。大多数移动 devices/tablets 的宽度从 320px 到 1080px 不等,并且随着新 phones/tablets 的发布仍在增加。可缩放矢量图形非常适合原型制作 ui 布局。

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

宽度为:

Mobile:

Width = Screen width − 56 dp

Maximum width: 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

高度由您想要的图片的纵横比决定:

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

可能16:9

解压一个 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

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