深圳网站优化推广公司 版权所有

粤ICP备15021922号 XML地图

深圳布吉网站推广公司

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

编辑:深圳网站优化公司 | 日期:2021-06-12 21:32 | 人气:

身为一个移动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屏幕尺寸的。这样一来,设计人员就能使用相对大小定义字体以及其他界面元素了,从而根据设备的真是尺寸自动调节视图了。
深圳市圣玺网络技术有限公司擅长提供布吉区域网站建设、网页设计制作、网站优化推广、SEO按天按效果付费、万词霸屏包年推广、抖音获客霸屏、百度爱采购等关键词SEO排名广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:http://www.amerbiz.com/wzjs/8694.html
X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信