Web与App实践用户体验篇之如何针对多种屏幕尺寸设计合理的移动应用
例如:
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屏幕尺寸的。这样一来,设计人员就能使用相对大小定义字体以及其他界面元素了,从而根据设备的真是尺寸自动调节视图了。
推荐新闻
更多行业-
现在网站设计重要的排版方式有哪些?
近十年来,互联网已经发生了翻天覆地的变化,然而它其实一点也没变。如果看...
2015-11-28 -
网站标准色彩的设计
网站设计当中的标准色彩是指能体现网站形象和延伸内涵的色彩。网站的标准色...
2015-01-07 -
数据库营销的优势
通过网络化实现与消费者的零距离沟通,消费者和企业之间形成了一个实时反应...
2014-08-04 -
网站测试评价
为了保证网页的正确性,当网站设计人员制作完成所有网页后,需要对所设计的...
2014-08-01 -
河北石家庄的网站建设好后服务器应该放在哪里合适
网站建设完成之后如何选择合适的服务器呢?这个问题对于很多客户来说都是非...
2019-08-27 -
在网站设计怎样可以有效改善用户体验?
网站设计趋势来来去去,但优秀的设计总是容易识别的。吸引你眼球的印刷品和...
2020-03-30
预约专业咨询顾问沟通!
免责声明
非常感谢您访问我们的网站。在您使用本网站之前,请您仔细阅读本声明的所有条款。
1、本站部分内容来源自网络,涉及到的部分文章和图片版权属于原作者,本站转载仅供大家学习和交流,切勿用于任何商业活动。
2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。
3、本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。
4、如果侵害了您的合法权益,请您及时与我们,我们会在第一时间删除相关内容!
联系方式:010-60259772
电子邮件:394588593@qq.com