MENU 服务 案例
网站建设-网站设计-北京网站建设-高端网站制作公司-尚品中国
我们通过拥抱变化创造
360°的品牌价值__
简体
简体中文 English

尚品中国携手倍升互联,共谱网站建设新篇章

类型:尚品动态 了解更多

Web与App实践用户体验篇之如何针对多种屏幕尺寸设计合理的移动应用

来源:尚品中国| 类型:网站百科| 时间:2012-02-03
身为一个移动web网站的设计师,除非你只是针对某种特定的设备设计,否则你应该会常常碰到这样的问题:如何清楚地了解网站运行设备的屏幕尺寸大小?这个问题一直困扰着移动设备上的设计师。

例如:

iPhone的高度是480个像素,宽320像素。

许多Nokia N系列设备的宽度为240像素,高度为320像素。

许多更新款的设备支持宽度和高度颠倒的视图。

旧款的Nokia(目前仍然比较流行)设备屏幕的尺寸从176×208到352×416不等。

Blackberry屏幕的分辨率也是从160×160到324×352各种尺寸都有。

本文意在说明如何针对丰富的移动设备和屏幕尺寸,合理地设计应用视图。首先提出两个小屏幕设计中的关键问题——屏幕和像素大小的多样性。

处理多样性

现在你可能会问自己“我的设计真的需要满足所有这些不同的屏幕尺寸吗?”,或者是“我是否应该为每种不同的设备专门设计一个版本?”这完全取决于你的项目的商业要求,有的设计可能只需要满足一种屏幕尺寸——或者说是一种设备就足够了。但如果项目要求你的设计必须支持大多数的主流设备,那么你就必须找到一种处理多种屏幕尺寸的有效方法了。

不用慌张,事情没有那么可怕。在设计移动web时,你完全可以假设页面是可以上下滚动的——就像桌面浏览器中的应用一样。这样就不用考虑屏幕的高度问题了,你可以将主要的精力集中在处理设备屏幕的宽度上了。幸运的是,DeviceAtlas Explorer已经提供了大量已有设备的屏幕宽度统计信息了。

正如图表所示,大多数的屏幕宽度主要集中在128,240和176像素这几种类型中——而剩余的集中类型:120,130,160,208和220像素——和最多的三种类型值也相差不大。还有一小部分的屏幕尺寸宽度为96,101,320或是大于320像素。屏幕宽度低于128像素的设备只占了很小的比例,总共有469个设备。

还有一点,不到5%的设备宽度大于320个像素。但这一数字可能会在未来有所提升,目前已经可以看到,小屏幕(128,176等)设备正逐渐被大屏幕(240+)设备所代替。下面的图表给出了相关的分析。

屏幕的分辨率的确很重要,但还有一点同样也必须考虑——屏幕的物理尺寸。

‘像素问题’

这些年来,设计师主要是针对大型的桌面设备设计视图。尽管显示器的物理尺寸可能不尽相同,但屏幕的尺寸基本都为1024×768像素;常见的像素密度为85 ppi(pixels-per-inch)。但是最近,显示的视图开始发生了一些变化:

Asus Eee PC 900上网本的分辨率为1024×600像素,像素密度约为133ppi。

Apple iPhone的分辨率为320×480像素,其中像素密度为160ppi。

Nokia的E60屏幕的分辨率为416×352,而像素密度是240ppi。

为了支持多种设备,像素密度的不同将带来新的问题;像素的大小也将影响整个设计的效果。

下图显示了在像素密度为72,144和240ppi的设备上,100×100像素的图像的显示效果。随着图片越来越小,图像的形状和一些细节都有所变形。

幸运的是,追求高像素密度的风潮似乎已经过去了,目前超过200 ppi的设备还并不多见了。这意味着,你并不是真的需要支持上图中列出的所有的像素密度。但是,在设计的时候,你需要记住,不能想当然地认为所有的设备的像素都是相等的。需要做到以下几点:

确定你需要支持的像素密度的范围。

在真实设备上检测你的设计,以防某些极端的情况被你忽略了。

使用相对单位设计和定义布局元素,比如ems或是百分百。这将提供一个更真实的布局元素尺寸和位置信息。

由于制造商想要提升操作系统的灵活性,因此‘像素问题’将受到越来越多的关注。事实上,Google的Android系统已经实现了一个“>potentially interesting solution”方案来解决像素的问题。Android操作系统采用了一个抽象的‘dp’(独立像素密度)单位,它是基于160 ppi屏幕尺寸的。这样一来,设计人员就能使用相对大小定义字体以及其他界面元素了,从而根据设备的真是尺寸自动调节视图了。

来源声明:本文章系尚品中国编辑原创或采编整理,如需转载请注明来自尚品中国。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系(010-60259772)。
TAG标签:

如果您的网站可以增加转化次数并提高客户满意度,该怎么办?

预约专业咨询顾问沟通!

*尚品专业顾问将尽快与您联系

免责声明

非常感谢您访问我们的网站。在您使用本网站之前,请您仔细阅读本声明的所有条款。

1、本站部分内容来源自网络,涉及到的部分文章和图片版权属于原作者,本站转载仅供大家学习和交流,切勿用于任何商业活动。

2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。

3、本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。

4、如果侵害了您的合法权益,请您及时与我们,我们会在第一时间删除相关内容!

联系方式:010-60259772
电子邮件:394588593@qq.com

现在就与专业咨询顾问沟通!

  • 全国服务热线

    400-700-4979

  • 北京服务热线

    010-60259772

信息保护中请放心填写
在线咨询

免责声明

非常感谢您访问我们的网站。在您使用本网站之前,请您仔细阅读本声明的所有条款。

1、本站部分内容来源自网络,涉及到的部分文章和图片版权属于原作者,本站转载仅供大家学习和交流,切勿用于任何商业活动。

2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。

3、本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。

4、如果侵害了您的合法权益,请您及时与我们,我们会在第一时间删除相关内容!

联系方式:010-60259772
电子邮件:394588593@qq.com