Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

为诺基亚平板手机优化应用

From Wiki
Jump to: navigation, search
WP Metro Icon UI.png
WP Metro Icon WP8.png
Article Metadata
Compatibility
Platform(s):
Windows Phone 8
Article
Created: ()
Last edited: Xinx Gong (03 Jan 2014)

声明:本文内容主要翻译自诺基亚开发者资源库,为方便国内开发者阅读,特翻译成中文。译者水平有限,难免出错,如阅读过程中有任何问题,建议参考英文原文或微博联系@陈啸天天向上

Contents

前言

Windows Phone 8 Update 3(GDR3)添加了对1080p分辨率达到支持,与此同时GDR3带来的多项改进使诺基亚推出了大屏系列手机。 现有的Windows Phone应用程序不用做任何修改就可以运行在诺基亚的GDR3新设备上。这里所介绍的一些技巧可以帮助你优化应用程序以更好的支持1080p、16:9屏幕长宽比和大屏幕显示尺寸,从而带来更好的用户体验。如果你实在不愿意做任何优化,至少更新一些高分辨率的图片资源。

BANDIT phablets.png

设计考虑章节将帮助你决定如何优化应用程序UI并获得用户体验的提升,如果你决定改变UI,它将给你更多的细节说明高分辨率对应用程序的影响以及如何优化应用以适应1080p和大屏幕。进一步的,我们还将说明如何灵活的设计使应用支持多分辨率以及不同屏幕尺寸的Lumia设备。请注意如何使用样式动态优化应用布局。

新的分辨率,屏幕长宽比和显示尺寸

最新发布的诺基亚Lumia设备支持了16:9屏幕长宽比,包括了1080*1920的Nokia Lumia 1520和720*1280的Nokia Lumia 1320,他们都是6英寸屏幕。

关于分辨率和显示尺寸的新属性

Windows Phone8 Update 3(GDR3)中, DeviceExtendedProperties API新增了三个属性,可用于查询设备分辨率相关的信息。

ScreenResolution.jpg

需要注意,上述三个属性在GDR3之前的设备上是无效的,调用它们将引发System.ArgumentOutOfRangeException异常。使用DeviceExtendedProperties不断的获取不存在的属性值将导致性能问题,所以强烈建议对所有用到的属性值只请求一次,然后缓存起来供之后使用。稍后会有一个例子展示如何操作。

对现有应用程序的影响

Windows Phone 8应用程序 720p可向上等比例缩放致1080p,所以应用程序必须在manifest文件(WMAppManifest.xml)中声明对720p的支持,使应用程序可以部署到屏幕长宽比为16:9的设备上。注意目前没有专门为1080p分辨率声明的值。

// Windows Phone 8应用程序可用的屏幕分辨率
...
<ScreenResolutions>
<ScreenResolution Name="ID_RESOLUTION_WVGA"/>
<ScreenResolution Name="ID_RESOLUTION_WXGA"/>
<ScreenResolution Name="ID_RESOLUTION_HD720P"/>
</ScreenResolutions>
...

除了新增的分辨率,在API层面没有大的改变,所以新设备可以兼容现有应用程序。应用程序只需要声明支持720p(ID_RESOLUTION_HD720P),应用商店将会让这些应用在1080p的设备上被用户发现。

Windows Phone 7应用程序

Windows Phone 8 update 3仍然支持Windows Phone 7的应用程序,它们可以安装在16:9的设备上。但由于Windows Phone 7的应用程序是按15:9设计的,所以它们不能完美的在16:9设备上缩放,用户会看到一个“黑边”,如下图所示:

图1:WP7应用在1080p设备上运行效果 图2:图1中的程序移植到WP8并且支持了720p

如果你觉得应用程序在720p设备上的“黑边”很影响美观,那么强烈建议你升级更新你的应用到WP8,并支持720p,因为“黑边”在1080p大屏幕设备上将会更加明显。Nokia Lumia开发者知识库的WP7 and WP8 co-development and porting guide详细介绍了如何从WP7移植到WP8.

SDK与模拟器支持

Windows Phone 8 update 3带来的新特性不需要特殊的SDK更新,开发者可以继续使用当前的开发工具和SDK开发应用程序。如果你需要使用1080P的模拟器进行调试,可以安装更新Windows Phone SDK 8.0 Update 3 Emulators。 除了等待1080p模拟器发布,你目前可以使用现有模拟器测试应用程序在不同分辨率、不同屏幕长宽比下的布局和外观是否正常。举个例子,你想测试2种不同的布局,一种15:9,一种16:9,调用 Microsoft.Devices.Environment.DeviceTypeApp.Current.Host.Content.ActualWidth,使你的应用程序可以针对WXGA和720p动态的设置布局。如何在运行时检测大屏幕章节对此有更详细的介绍。 开发者还可以通过Nokia RDA (remote device access)服务在多种不同的真实设备上测试应用程序。1080p的设备也将很快的加入Nokia RDA中。

设计考虑

为1080*1920像素分辨率的设备设计新应用或者移植某个应用到该设备上时,检查本章节列出的内容可以优化应用程序的用户体验。这些修改和优化内容也同样适用于720p的设备。 请注意,这里不会介绍任何新的布局,我们需要做的就是考虑如何用有意义的内容填充额外的屏幕空间。

480*800像素 4.3寸屏幕 768*1280像素 4.5寸屏幕 1080*1920像素 6寸屏幕

活动瓷帖(Live tiles)

在低分辨率设备上,开始屏幕具有2列网格;在高分辨率设备上将多出一列。应用程序为WXGA分辨率准备的瓷帖图标无需修改就可以在高分辨率设备上正常工作,操作系统会自动对它们进行缩放。但你最好还是检查一下图标在高分辨率机器上的外观。

6寸屏幕,1080*1920像素屏幕的瓷帖尺寸 6寸屏幕,1080*1920像素屏幕的瓷帖尺寸

列表布局

一般来说,随着屏幕尺寸的增大,额外的空间应该用于扩展应用程序的内容区域;例如列表就可以显示更多的条目。如下图所示:

4.2寸屏幕 6寸屏幕

下面的图示展示了在高分辨率设备上的列表中增加了一行预览信息。如果你确定这样做可以为布局效果加分并且增强用户体验,那就做吧。

4.5寸屏幕 6寸屏幕

网格布局

低分辨率使用两列,高分辨率可容纳三列。

4.2寸屏幕 6寸屏幕 6寸屏幕

所有分辨率都支持4列显示:

6寸屏幕上的4列布局 6寸屏幕上的4列布局

字体大小

系统字体的自动缩放比例是2.25。例如,瓷帖(tile)上的字体(PhoneFontFamilySemiBold, PhoneFontSizeMedium)在480p分辨率的设备上是22.667像素,在1080p的设备上会自动变为51像素(22.667*2.25)。同样的,对于pivot的标题(PhoneFontFamilySemiLight, PhoneFontSizeExtraExtraLarge)会自动由72像素变为162像素(72*2.25)。 对于其他字体(如:PhoneFontFamilyNormal, PhoneFontSizeMediumLarge)缩放比例是2.25的80%,所以这些字体将由25.333像素缩放为46像素(25.333*2.25*0.8),而不是57像素(25.333*2.25)。 自定义字体样式需要由应用程序自己调整。

Fontsize.png

图片资源

强烈建议创建支持高分辨率的高清图片资源,这些资源在分辨率较低的设备上会自动缩放为正确的尺寸并且正常显示,但如果图片的分辨率不够,从低分辨率转到高分辨率时,用户就会看到模糊的程序界面。 768*1280像素的分辨率按比例放大时,你可以使用1.5作为缩放比例,application bar的图片同样可以使用这个比例。

为大屏幕优化布局

我们所说的“平板手机”一般是指屏幕物理尺寸大于5寸的设备,此章节主要讨论为大屏幕设备优化应用,并描述如何在运行时检测并控制应用程序布局且动态的使用样式。 同样重要的是,开发人员需要提供分辨率足够大的图片资源,我们应该避免使用低分辨率的图片放大:在高分辨率的设备上,你会很容易看到低分辨率图片带来的问题。分辨率注意事项章节将提供关于如何提供高分辨率图像的详细讨论。 在6寸设备上,应用程序不仅仅要优化UI的观感,更重要的是有效利用屏幕空间展示更多的信息给用户。应用程序的设计者还需要考虑用户如何操作设备,因为对大屏幕设备来说,不是每个区域都很容易用单手触摸到。例如在横屏模式下玩游戏。

如何在运行时检测“大屏幕”

下面这个类展示了应用程序如何在运行时判断当前设备是不是“大屏幕”:

...
 
class ScreenSizeHelper
{
static private double _screenSize = -1.0f;
static private double _screenDpiX = 0.0f;
static private double _screenDpiY = 0.0f;
static private Size _resolution;
 
static public bool IsBigScreen
{
get
{
// Use 720p emulator to simulate big screen.
if (Microsoft.Devices.Environment.DeviceType == Microsoft.Devices.DeviceType.Emulator)
{
_screenSize = (App.Current.Host.Content.ScaleFactor == 150) ? 6.0f : 0.0f;
}
 
if (_screenSize == -1.0f)
{
try
{
_screenDpiX = (double)DeviceExtendedProperties.GetValue("RawDpiX");
_screenDpiY = (double)DeviceExtendedProperties.GetValue("RawDpiY");
_resolution = (Size)DeviceExtendedProperties.GetValue("PhysicalScreenResolution");
 
// Calculate screen diagonal in inches.
_screenSize =
Math.Sqrt(Math.Pow(_resolution.Width / _screenDpiX, 2) +
Math.Pow(_resolution.Height / _screenDpiY, 2));
}
catch (Exception e)
{
// We're on older software with lower screen size, carry on.
Debug.WriteLine("IsBigScreen error: " + e.Message);
_screenSize = 0;
}
}
 
// Returns true if screen size is bigger than 5 inches - you may edit the value based on your app's needs.
return (_screenSize > 5.0f);
}
}
}

“大屏幕”的说法是相对的,完全取决于你的应用程序的状态,比如你可能希望为5寸屏幕做优化,或者只支持6寸以上屏幕的设备。上面的代码在屏幕尺寸大于5寸时返回true,但你可以随意修改它以满足你的需求。

一个页面适应更多内容——动态布局使用样式

大多数情况下,现有应用程序可以通过简单的重写样式适配大屏幕设备。解决方案在诺基亚开发者网站上的动态布局范例。 该例子加载了文字和图片对象列表。列表项的布局定义在SampleDataItemTemplate.xaml。

...
<DataTemplate x:Key="SampleDataItemTemplate">
<Grid Margin="12,6,12,6" Style="{StaticResource GridItem}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
 
<Image Grid.Row="0" Source="{Binding DataImage}" Style="{StaticResource GridImage}" />
 
<TextBlock Grid.Row="1"
Margin="0"
Style="{StaticResource LargeBoldText}"
Text="{Binding DataTitle}" />
</Grid>
</DataTemplate>
...

每个元素的感官由定义在SampleDataItemStyleDefault.xaml的样式决定。

...
<!-- Text -->
<Style x:Key="NormalText"
BasedOn="{StaticResource PhoneTextNormalStyle}"
TargetType="TextBlock" />
 
<Style x:Key="LargeBoldText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe WP Semibold" />
<Setter Property="FontSize" Value="32" />
</Style>
 
<!-- Layout -->
<Style x:Key="GridImage" TargetType="Image">
<Setter Property="Width" Value="204" />
<Setter Property="Height" Value="204" />
</Style>
 
<Style x:Key="GridItem" TargetType="Grid">
<Setter Property="Width" Value="204" />
</Style>
...

应用程序通过合并一个包含了优化版本的新的资源字典重写相关的样式定义,就可以在大屏幕设备工作了。在我们的示例中,这些样式被重新定义在 SampleDataItemStyle1080p.xaml文件中。

...
<!-- Large Screen Overrides -->
 
<!-- Text -->
<Style x:Key="LargeBoldText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe WP Semibold" />
<Setter Property="FontSize" Value="22" />
</Style>
 
<!-- Layout -->
<Style x:Key="GridImage" TargetType="Image">
<Setter Property="Width" Value="128 />
<Setter Property="
Height" Value="128" />
</Style>
<Style x:Key="
GridItem" TargetType="Grid">
<Setter Property="
Width" Value="128" />
</Style>

使用StyleSelector加载新的样式:

...
class StyleSelector
{
static public void SetStyle()
{
if(ScreenSizeHelper.IsBigScreen)
{
var appTheme = new ResourceDictionary {
Source = new Uri("/DynamicScreenStyle;component/Themes/SampleDataItemStyle1080p.xaml", UriKind.Relative)
};
 
Application.Current.Resources.MergedDictionaries.Add(appTheme);
}
}
}
...

在App的构造函数中:

public partial class App : Application
{
...
 
public App()
{
// Global handler for uncaught exceptions.
UnhandledException += Application_UnhandledException;
 
// Standard XAML initialization
InitializeComponent();
 
// Load 1080p style if needed
StyleSelector.SetStyle();
 
...
}
...
}

新样式被加载后,新的资源将被添加到资源字典列表的最后,因此将在样式定义顺序中第一个被搜索到。新字典中定义的样式将覆盖之前的定义,因此布局可以被正确使用。如果没有新的样式被加载,应用程序继续使用基于定义在SampleDataItemStyleDefault.xam中的样式渲染UI。 为了让UI Designer或者Blend可以操作修改布局,需将布局添加到App.xaml的资源字典:

...
<!--Application Resources-->
<Application.Resources>
<ResourceDictionary>
<local:LocalizedStrings x:Key="LocalizedStrings"/>
<local:SampleModel x:Key="SampleModel" />
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SampleDataTemplate.xaml" />
<ResourceDictionary Source="Themes/SampleDataItemStyleDefault.xaml" />
<!-- Enable the line below to see the 1080p layout overrides in designer. -->
<!-- Comment it out for final build as the 1080p style overrides are to -->
<!-- be activated on device by StyleSelector. -->
<ResourceDictionary Source="Themes/SampleDataItemStyle1080p.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
...

效果:

2列,默认布局 3列,高分辨率设备

分辨率注意事项

Windows Phone 8 多分辨率(MSDN)介绍了如何在运行时检测屏幕分辨率并确保应用程序界面能在所有Windows Phone 8 设备上正确缩放。本节内容特别针对1080p提供更多的详细信息帮助优化应用程序,包括:如何检测应用程序是否运行在1080p的设备上,如何充分利用1080p屏幕以及在高分辨率设备上处理更多内容可能带来的内存问题。

分辨率检测代码更新

下面的代码片段是Windows Phone 8 多分辨率中ResolutionHelper.cs的升级版,添加了1080p的支持。

public enum Resolutions { WVGA, WXGA, HD720p, HD1080p };
 
public static class ResolutionHelper
{
static private Size _size;
 
private static bool IsWvga
{
get
{
return App.Current.Host.Content.ScaleFactor == 100;
}
}
 
private static bool IsWxga
{
get
{
return App.Current.Host.Content.ScaleFactor == 160;
}
}
 
private static bool Is720p
{
get
{
return (App.Current.Host.Content.ScaleFactor == 150 && !Is1080p);
}
}
 
private static bool Is1080p
{
get
{
if(_size.Width == 0)
{
try
{
_size = (Size)DeviceExtendedProperties.GetValue("PhysicalScreenResolution");
}
catch (Exception)
{
_size.Width = 0;
}
}
return _size.Width == 1080;
}
}
 
public static Resolutions CurrentResolution
{
get
{
if (IsWvga) return Resolutions.WVGA;
else if (IsWxga) return Resolutions.WXGA;
else if (Is720p) return Resolutions.HD720p;
else if (Is1080p) return Resolutions.HD1080p;
else throw new InvalidOperationException("Unknown resolution");
}
}
}

注意:不要使用App.Current.Host.Content.ScaleFactor 或者 Application.Current.Host.Content.ActualHeight区分720p和1080p,因为在这两种设备上,这两个值都返回150和853。

高分辨率图像

为了使应用程序在不同的分辨率和不同的设备上看起来尽可能的美观,建议简单地使用为1080p分辨率设计的图片,让Windows Phone OS根据当前分辨率自动按需缩放。这些资源包括应用程序图片资源,闪屏图片,锁屏图片和动态瓷帖等。 为1080p准备的图片资源在720p上显示时,Windows Phone系统会自动将他们缩放以适应720p分辨率,强烈建议使用一个xap包支持所有屏幕尺寸和分辨率,这个xap包只需提供一套高分辨率的图片资源,操作系统会处理其他事情,无需开发者做额外工作。 然而,如果你的应用需要同时支持16:9和15:9的设备,为了处理屏幕长宽比注意事项你需要提供两套高分辨率图片资源并且在运行时决定使用哪一套:

public class MultiResImageChooserUri
{
public Uri BestResolutionImage
{
get
{
switch (ResolutionHelper.CurrentResolution)
{
case Resolutions.HD1080p:
case Resolutions.HD720p:
//return 16:9 aspect ratio asset, high res
return new Uri("Assets/MyImage.screen-1080p.jpg", UriKind.Relative);
case Resolutions.WXGA:
case Resolutions.WVGA:
// return 15:9 aspect ratio asset, high res
return new Uri("Assets/MyImage.screen-wxga.jpg", UriKind.Relative);
default:
throw new InvalidOperationException("Unknown resolution type");
}
}
}
}

还有一个思路是:从服务器上加载图片资源,这样既能为高分辨率设备提供分辨率最合适的图片资源,又能在低分辨率设备上有效减少数据传输的流量以及加载时间。Music Explorer范例展示了这种做法,根据当前机器的分辨率来决定从服务器端加载什么样的图片资源,320*320的图片仅用在1080p的设备上,200*200的图片用在低分辨率的设备上。

...
 
public class ArtistModel : INotifyPropertyChanged
{
...
 
/// <summary>
/// Artist's ThumbUri property.
/// This property is used in the UI to display the image in Uri using a Binding.
/// </summary>
public Uri ThumbUri
{
get
{
if (_thumb320Uri != null && ResolutionHelper.CurrentResolution == Resolutions.HD1080p)
{
return _thumb320Uri;
}
else if (_thumb200Uri != null)
{
return _thumb200Uri;
}
else if (_thumb100Uri != null)
{
return _thumb100Uri;
}
else
{
return new Uri("/Assets/thumb_100_placeholder.png",
UriKind.Relative);
}
}
}
...
}

200*200,低分辨率 320*320,高分辨率

加载大图片时,应用程序内存消耗可以优化:

...
var bmp = new BitmapImage();
 
// no matter the actual size, this bitmap is decoded to 480 pixels width
// (aspect ratio preserved) and only takes up the memory needed for this size
bmp.DecodePixelWidth = 480;
 
bmp.UriSource = new Uri(@"Assets\Demo.png", UriKind.Relative);
ImageControl.Source = bmp;
...

关于多分辨率支持,可以查看 Windows Phone 8: XAML Application Development (video, from 08:20 onwards)注意:对于XNA和DirectX应用,位图(bitmaps)由硬件缩放,开发者不能为1080p提供高分辨率图片资源。

闪屏(Splash screen)指导

如果应用会显示一个全屏的闪屏界面,为720p/1080p准备一张720*1280像素的闪屏图片SplashScreenImage.Screen-720p.jpg是可以正常工作的,图片在1080p的设备上会被自动放大。但我们仍然建议为720p和1080p的设备提供一张1080*1920分辨率的闪屏图片,它会在720p的设备上自动缩放显示,在1080p的设备上按原始分辨率展示。 注意:尽管当前微软对于闪屏界面的指导鼓励使用单个的768*1280像素的图片SplashScreenImage.jpg作为闪屏图片,但这样的图片在1080p的设备上将不能全屏显示,它会在屏幕顶部留下一个空白区域。

镜头选取器(Lense tile)图标

Windows Phone 镜头设计准则详细介绍了如何设计镜头选取器图标,在1080p设备上可以使用HD720p的镜头选取器图标的变体,修改Lens.Screen-720p.png,使其尺寸是之前的1.5倍,这样在1080p设备上会更加美观。

瓷帖(Tiles)

1080p的设备上采用3列布局,每个瓷帖看起来会稍小一点。瓷帖由平台自动缩放排列,开发者不需要额外修改代码。关于瓷帖的详细信息,请参考设计考虑的活动瓷帖章节。

缩放比例注意事项

控件

在768p(WXGA)设备上,如果一个控件的逻辑尺寸为100像素,它将以1.6倍的缩放比例显示在屏幕上,所以控件的实际尺寸是160像素。 在1080p的设备上,告知我们的缩放比例是1.5,但实际的缩放比例是2.25,所以一个100像素的空间在屏幕上的实际尺寸是225像素。 这意味着如果要使一个控件在768p和1080p的设备上具有相同的物理尺寸,那么这个控件在1080p设备上的逻辑尺寸应该按1.6/2.25 = 0.7111 比例缩小。 我们这里使用Music Explorer作为例子,实际效果如下图所示:

public class MainViewModel : INotifyPropertyChanged
{
...
 
public void LoadData()
{
...
 
foreach (ArtistModel m in App.ViewModel.LocalAudio)
{
if (m.Name.Contains("TitlePlaceholder")) continue;
m.ItemHeight = "205";
m.ItemWidth = "205";
 
if (IsBigScreen)
{
m.ItemHeight = "146"; // ~= 205*0.7111
m.ItemWidth = "146"; // ~= 205*0.7111
}
}
...
}
...
}

逻辑尺寸205像素的图片在低分辨率显示 1080p上显示同样的效果需要按0.7111比例缩放

字体

关于字体缩放的详细信息,请参考设计考虑的字体大小章节。

1080p设备的高清视频

Windows Phone将继续用所支持的最高分辨率显示视频流,这一点没有变化。开发者可以使用PhysicalScreenResolution属性来自行决定使用什么品质的视频流。如果开发者想按照屏幕物理尺寸来选择合适的视频流,屏幕尺寸计算方法在如何在运行时检测“大屏幕”。 微软的“流畅流媒体技术(Microso’s Smooth Streaming technology)”允许可变比特率视频流以平衡硬件能力(设备分辨率,硬件支持的编码格式)、网络条件和电源的使用。在撰写此文章时,PlayerFramework组件还不支持1080p的设备,但很容易在Phone.SL.Adaptive/ResolutionHelper.cs中修改它的实现来添加1080p分辨率的检测,然后在Phone.SL.Adaptive/AdaptiveStreamingManager.cs中正确的设置MaxPixels值。渐进式下载最大可支持1080p的分辨率,最大30fps。 关于硬件支持的音视频编解码的详细信息,请参考Windows Phone 支持的媒体编解码器


内存注意事项

在大屏幕、高分辨率设备上运行应用程序,耗费的内存大于其在小屏幕、低分辨率设备上运行时耗费的内存。应用程序可以在manifest文件中使用ID_FUNCCAP_EXTEND_MEM请求更多的内存,详细信息参考:Windows Phone 8的应用内存限制。 使用ID_FUNCCAP_EXTEND_MEM可以为应用程序申请更多的内存,它根据不同的设备类型,强制提高应用程序最大内存使用限制:在低内存设备上最大可使用180MB,在1GB或更多内存的设备上最大可使用380MB,在2GB内存设备上最大可使用570MB。 这里需要特别注意使用了5个或以上PanoramaItems的,包含复杂图形的水平全景控件,Windows Phone Toolkit的导航效果有一个已知的内存问题:当导航致一个包含panorama的页面时会耗费大量内存。


屏幕长宽比注意事项

一个按15:9设计的应用程序要支持720p,最低的要求是该程序不能硬编码控件的大小,控件最好可以自动调整大小。下面列出了一个为15:9设计的应用程序在支持720p(16:9)时遇到的一些常见问题: 屏幕长宽比注意事项.jpg

下面的例子中,控件和图片的位置在720p的设备上不能正确显示,解决办法是分别为15:9和16:9提供不同的背景图片资源,在应用程序页面被创建时动态设置背景画刷(background brush)。

控件和图片显示不正确,背景图片扭曲

控件和图片显示不正确,背景图片扭曲

背景图片扭曲

背景图片扭曲

控件、所有图片资源均正常

控件、所有图片资源均正常

从上面的例子可以看出,为一个固定的长宽比设计图片很可能在另一种长宽比上出现扭曲,例如上面展示的“Stop”和“FILES”按钮。 下面这个应用程序提供了一个通用的闪屏图片,最初在1080p的设备上无法全屏显示。添加一个720 p的特定启动画面后,显示正常了。

通用闪屏图片,无法填充整个屏幕 720p特定启动画面,全屏显示

案例学习——Music Explorer

灵感来自1080p设备上的“3列”开始屏幕,一个新的布局加入到了Music Explorer示例程序。下图1所示的最初基于列表的方法显示了Nokia Music服务中可见的艺术家信息,它没有为1080p的设备做优化,比如没有通过Nokia Music API在多种分辨率上使用非常酷的图片。 一个基于瓷帖的方法呈现艺术家信息很适合这个示例应用程序的功能。下图2展示的一个三列的结合全景控件和一些附加文本信息的版本也不错,但是看起来有些拥挤,即使在1080p的大屏设备上也略显拥挤。针对不同的屏幕尺寸应该使用不同的样式,如一个页面适应更多内容——动态布局使用样式所示。最后一张图3,展示了3种设计中最好的一个,它部署了一个新的设计,更加适合所有屏幕尺寸、分辨率、外观的Lumia设备,当然也包括诺基亚平板手机。最重要的是最后一种设计充分利用了1080p。

Music Explorer: 1列布局 Music Explorer: 3列布局 Music Explorer: 2列布局

This page was last modified on 3 January 2014, at 18:27.
178 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×