注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

创新改变世界

you changed the world

 
 
 

日志

 
 

不同屏幕縮放指導(Windows Store apps)  

2012-10-16 15:57:31|  分类: win8 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
MSDN鏈接:http://msdn.microsoft.com/en-us/library/windows/apps/Hh780612.aspx

翻譯人:Roy

内容:
這個主題描述了如何設計和建立最好的Windows Store apps佈局縮放以適應Win8下不同分辨率的屏幕。

Windows8運行在不同大小屏幕上;從很小屏幕的平板電腦,到中等屏幕的筆記本電腦,再到更大屏幕的臺式機亦或是再大的屏幕。Windows Store apps可以運行在Windows8支持的任何屏幕上。一般來講,屏幕越大分辨率就越大。這個結果就是大的屏幕能提供更多的可用區域為你的apps。

這篇文章包括以下幾項:
(1)Screen Size 屏幕大小
描述:顯示器的物理大小,以英寸為單位,一般測量對角綫。
(2)Screen resolution 屏幕分辨率
描述:屏幕所支持的水平和豎直發方向像素點數。例如1366*768。
(3)Aspect ratio 寬高比
描述:屏幕的寬高比。例如:16:9.

屏幕大小
對Windows Store apps影響最大的莫過於屏幕分辨率。在更大的屏幕上,就會有更高的屏幕分辨率,同時也就有更多的可用空間給應用程序。在大屏幕上,用戶期望看到更多的内容和更多的功能。

管理這些屏幕真正的可用區域是開發者和設計者需要考慮的事情。在設計和開發階段,app在大屏幕上看起來是什麽樣子就應該被提前定義下來。

平臺、控件和模版統統都要定義以滿足不同的屏幕分辨率。你app的很多佈局都需要一些額外的工作或者代碼來完成,頂層佈局,内容區域,app引導和命令能確保他們在更大屏幕上準確替換,是前期需要考慮的事情。

在大屏幕上沒有建立自適應佈局的情況下,下面的圖片導致的大部分的空白區域。
Large empty region caused by an inflexible layout

最小屏幕的分辨率
下面有兩個主要的屏幕分辨率是你的apps需要支持的:
[1] Windows Store apps所能運行的最小分辨率是1024*768;
[2] 支持Windows8所有特性的最小屏幕分辨率是1366*768(包括用Snap多任務)。想獲取更多的Snap信息,請看 Guidelines for snapped and fill views

下面圖片表示windows8所能支持的所有屏幕分辨率。豎直列代表了Windows8 apps在這些分辨率中所佔的比例:
Screen resolutions that are supported on Windows 8
下面表格代表了主要分辨率下實踐所得的建議:
[1] 1024*768
描述:確保你的apps毫無裁剪的支持此分辨率。
[2] 1366*768
描述:確保你的apps毫無空白的支持此分辨率。

為更大分辨率設計
當為大屏幕設計apps時,你一定要考慮你apps佈局、美觀、比例和控件被應用到大畫布上是怎麽樣子的。另外,你的apps可以存在任意數量不同複雜度的佈局。每一個佈局都要考慮為個別的大屏幕設計。

下面表格中所列出的是實踐的建議:
[1] Fill the screen
[2] 判斷你的佈局是否應該被固定或是自適應

固定佈局
固定佈局經常在由位圖組成的遊戲或游戲類apps當中見到。最常見的,那些佈局都有固定的内容(例如,遊戲的board),在那裏展示更多内容或添加更多内容是不可能的。那些用固定佈局設計的軟件不可能適應不同分辨率。
Fixed layout on different screen sizes

固定佈局:縮放適應
如果你把你的app做成了固定佈局不能適應多分辨率時,你可以用縮放的方式讓固定佈局充滿全屏在不同分辨率屏幕上,如下面:
Scale to fit for fixed layout
下面的表格中顯示了縮放填充的方式。
(1)以最基本的分辨率開始
描述:黨設計一個固定佈局時,以1024*768和1366*768作為基綫來設計。這樣的佈局將能縮放到大屏幕。
ViewBox控件縮放固定佈局佈滿屏幕。
(2)把固定的内容放在ViewBox控件内
描述:把ViewBox寬度和高度設置成100%;
  定義ViewBox的屬性到指定的像素大小(例如,1366*768)。
(3)避免把自適應的控件放在ViewBox内(如AppBar)
描述:那些控件會自動適應到不同分辨率的屏幕。
(4)定義信箱的樣式和顔色
(5)提供矢量圖或者更高像素的圖片

自適應佈局
自適應佈局常常在内容展示、管理和添加等的apps中。這些佈局通常由一些按比例的控件依據頂部基綫來佈局。例如,一個閲讀的app就有一個頂部,底部和中間内容部組成。這些佈局自動適應不同的分辨率和帶來更多的内容,以及自動填充佈局。
Adaptive layout on different screen sizes

測試你的app佈局
在不同顯示器大小的機器上測試你的app是非常重要的。我們意識到大部分人都不會有如此多的設備來測試,因此我們提供了在不同分辨率下測試app的工具Windows Simulator。如下圖:
Windows Simulator in Visual Studio 11

聲明:本身水平所限,如大家覺得翻譯的不好,請見諒~
  评论这张
 
阅读(280)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017