首页 > 交互 > 关键词 > WebApp最新资讯 > 正文

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

2012-01-19 13:26 · 稿源:webapptrend.com

身为一个移动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屏幕尺寸的。这样一来,设计人员就能使用相对大小定义字体以及其他界面元素了,从而根据设备的真是尺寸自动调节视图了。

  • 相关推荐
  • 大家在看
  • 三星Note20入网:屏幕尺寸、电池容量揭晓

    三星Note20定于8月5日发布,日前SM-981B的这款设备在美国FCC(联邦通信委员会)入网。入网资料显示,该机屏幕尺寸6.53英寸,屏幕长宽161mm x 75.2mm,电视容量4000mAH。也就是说,相较于No

  • 通付盾移动应用剪切板防护:App用户隐私的反监听守护者

    隐私保护,对App“越界”说不!早在今年2月份,抖音海外版TikTok就因为发生高频率读取剪贴板内容的问题饱受指责,TikTok方面解释称这是他们的反垃圾策略,为了应对目前机器人水军大量通过脚本来实现复制粘贴批量输出垃圾内容的现状。但不可否认的是,这一策略很容易伤及无辜,给人一种TikTok在监控自己聊天内容的感觉。以致TikTok近日不得不提交新版本,删除该反垃圾邮件功能,以消除任何潜在的误解。类似的情况还出现在全球职场社

  • AppsFlyer 重磅发布 2020 版《移动应用营销作弊现状》

    2020 年,作弊依然是移动营销行业不可回避的问题。好消息是,随着应用生态的安全意识增强、反作弊技术不断成熟,安装作弊率呈现总体下滑的趋势。 AppsFlyer 估算,2020 年上半年全球暴露于安装作弊风险的营销预算约为 16 亿美元,比去年同期减少率 30%。但坏消息是,在作弊与反作弊这场“猫鼠游戏”中,作弊者依然紧盯营销中的薄弱环节,应用内作弊激增。 移动应用营销作弊现状呈现出怎样的趋势?有哪些重要“隐秘角落”是不能被?

  • 松下高管:计划五年内将特斯拉电池能量密度提高20%

    7月31日消息,据国外媒体报道,松下美国电动汽车电池业务负责人表示,松下计划在五年内将供应给特斯拉的2170电池能量密度提高20%。此外,松下还计划在2-3年内实现无钴电池的商业化。目前,该公司已经将特斯拉电池中的钴含量降低到5%以下。钴在电动汽车电池中是一个至关重要的元素,将钴从电池中去除将提高制造过程的成本效益,并将降低特斯拉汽车的成本。特斯拉的主要目标之一是逐步弃用钴电池。该公司首席执行官(CEO

  • LOL灵魂羁绊探索攻略 灵魂莲华活动提升好感亲密度攻略

    英雄联盟的官方在7月24日这天发布了关于灵魂羁绊的探索攻略,其实就是灵魂莲华活动其中关于英雄好感亲密度的攻略,下面就来为大家详细的介绍一下吧。

  • 台积电宣布3nm工艺2021年风险量产 晶体管密度提升70%

    台积电两年前量产了7nm工艺,今年要量产5nm工艺了,已经被华为、苹果抢先预定了大部分产能,现在3nm工艺也定了,官方宣布2021年风险量产,2020年下半年正式量产。此外,台积电还透露了3nm工艺

  • 曝小米新机潜望式镜头尺寸很“刺激” 官方:默默看你们吹

    近日网上关于小米10“超大杯”的消息越来越多,这款手机即将亮相几乎是实锤了。 7 月 31 日,数码博主@i冰宇宙 爆料称,小米某机那个潜望镜头尺寸“真刺激”,被Redmi产品总监王腾在线“打假”称,“默默地看着你们吹”。根据最近的消息来看,@i冰宇宙 所说的“小米某机”应该指的就是小米10“超大杯”。

  • iPhone 12系列尺寸大对比:手感最好的应该是这款

    【TechWeb】根据此前多方透露的消息,不出意外的话苹果将继续在今年9月推出全新的iPhone 12年度旗舰,依旧提供iPhone 12、iPhone 12Max和iPhone 12 Pro、iPhone 12 Pro Max两个版本共四款机型。随着发布时间的日益临近,关于该机的外观和配置细节都得到了非常丰富的爆料。现在有最新消息,近日有外媒展示出了iPhone 12系列不同版本在大小上的直观差距。根据外媒MacRumors最新放出的对比图显示,与此前曝光的消息基本一致,全新的iP

  • 首个库宝双深位项目落地香港,助力跨境电商仓库实现超高密度存储

    香港作为自由贸易港口城市,拥有全球性物流网络,许多跨境电商在香港租用仓库进行货物中转,实现全球贸易。在有“寸土寸金”之称的香港,仓库所需耗费的仓租、人力、物力成本更为高昂,如何降本增效成为仓库运营的主要挑战。 2019 年 3 月,库宝A42 于香港某仓库上线 早在 2018 年海柔团队就意识到:随着仓租上升,存储密度对物流仓库的重要性将不断提升。正是这种着眼于客户的理念和意识,促使海柔团队开始了双深位箱式仓储机器?

  • iPhone为何像素数量不激进?李楠释疑

    众所周知,iPhone在像素数量上一直不够激进,目前iPhone 11采用的是1200万主摄,同期安卓阵营甚至超过了一亿像素。那么问题来了,像素数量代表画面质量?7月27日消息,李楠表示,很多人以为

  • LOL灵魂莲华活动事件刷亲密度阵容推荐 灵魂莲华阵容搭配

    英雄联盟在最近开启了灵魂莲华的活动,在这个活动中其实是有一个提升亲密度的任务的,使用指定的英雄提升亲密度,下面就来为大家分享一下什么阵容比较好刷亲密度。

  • 马斯克:特斯拉可能为欧洲市场打造一款尺寸较小的Cybertruck

    8月6日消息,据国外媒体报道,电动汽车制造商特斯拉的首席执行官(CEO)埃隆·马斯克表示,该公司很可能为欧洲市场打造一款尺寸较小的电动皮卡Cybertruck。特斯拉是在去年11月份发布其电动皮卡Cybertruck的,这款皮卡配有6个座椅,最大续航里程为500英里(约合805公里),起价为3.99万美元(约合28万元)。据悉,这款电动皮卡外观霸气,车身尺寸与以往的皮卡相比也更大。根据当时在发布会上披露的数据显示,这款皮卡的

  • 余承东:一亿像素听起来参数高、实际拍照不如大底CMOS

    尽管三星、小米等均上马了高达一亿像素的摄像头,可从DxOmark的榜单成绩来看,这些手机在影像方面依然小输华为,而后者坚持的是大底、大单像素尺寸的CMOS方案。对此,华为消费者业务CEO余承东

  • Sensor Tower:7月抖音及TikTok再次蝉联全球移动应用收入冠军

    2020 年 7 月抖音及海外版TikTok在全球App Store和Google Play吸金超过1. 02 亿美元,是去年 7 月的8. 6 倍,再次蝉联全球移动应用(非游戏)收入榜冠军。其中,大约89%的收入来自中国版本抖音;美国市场排名第二,贡献了6%的收入。

  • 曝小米10超大杯可手动调节GPU频率 也保留了一亿像素

    近日网上关于小米10超大杯的信息越来越多了,很多消息称小米 10 超大杯将于 8 月 11 日发布。 7 月 30 日,数码博主@i冰宇宙 爆料了一条关于小米 10 超大杯的信息。

  • Polymaker全新超大尺寸3D打印粒料 亮相2020 TCT Asia展会

    7月8日,专注3D打印材料的高科技企业Polymaker亮相上海新国际博览中心,参加2020 TCT Asia展会。TCT Asia是亚洲最大的专业增材制造技术展览会,是每年最新3D打印技术的分享盛会。今年在部分企业由于疫情原因取消参展的情况下,展商数量依旧超过220家。足以看出该展会的影响力和各家企业对其重视程度。Polymaker是一家专注3D打印材料的高科技企业,始终致力于用领先的技术、高质量的产品和细致深入的服务,推动3D打印技术的发展。此

  • 微软与谷歌合作,为Android设备开发更多Web应用

    微软正在与谷歌合作,通过谷歌应用商店为Android设备提供更多更好的Web应用程序。据悉,开发人员使用微软PWABuilder工具构建的应用程序将能够利用谷歌Bubblewrap实用工具和库的新特性,其中包括新的Web快捷方式标准、“更深入”的推送通知和可视化界面定制。

  • Linux发行版遭像素级美化:Win10老用户有如“回家”

    对于Windows系统,恐怕“深恶痛绝”的人不在少数。但是转平台除了要面对软件资源匮乏的问题,还得适应新的UI、新的操作逻辑等。可能是尽可能减少用户的不适感,名为Linuxfx的发行版

  • 先临三维下属子公司易加三维完美成型大尺寸高温零部件

    近日,先临三维下属子公司易加三维的EP-M650四激光设备成功通过IN718材质某高温零部件的成型测试,该金属零件外形尺寸为620x620x150mm3;打印过程采用50μm层厚成型工艺,耗时255h。打印零件之前,按客户要求首先在基板上进行全成型幅面的打印测试,整版无球化、打印状态均匀一致。(EP-M650 四激光大尺寸金属增材制造系统) 零件打印过程中无需在线调整拼接精度,过滤系统支持滤芯在线反吹,可实现长时间无间断打印。在4个拼接区?

  • 屏幕录制软件哪个好用?简单、快捷的都在这

    说到屏幕录制,相信大家都不会陌生,因为在日常生活、学习和工作当中,经常会有类似的需求。例如:生活中,屏幕录制追剧视频、直播视频等。学习中,录制课程视频、演示视频等。工作中,屏幕录制会议视频、教学视频等等。而想要实现上述屏幕录制的需求,就需要借助几款好用的屏幕录制软件。那么,屏幕录制软件哪个好用呢?接下来将为大家分享五款屏幕录制软件合集精选,简单、快捷的都在这。一、嗨格式录屏大师嗨格式录屏大师是一款

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签