首页 > 教程 > 关键词 > H5页面设计最新资讯 > 正文

移动端H5页面的设计稿尺寸大小规范

2015-11-03 14:10 · 稿源:25学堂
文章目录

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的。如果是app设计师,就不会那么纠结啦。

那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。

请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含

<meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />

<meta content=”telephone=no” name=”format-detection” />

根据目前市场流行的手机移动终端,统计他们的设备独立像素。

在这里,25学堂也跟大家分享一个罗列了当前最流行的手机的所有尺寸大小规范: http://screensiz.es/phone     值得大家好好细看的智能手机尺寸图表。

也只有iPhone6+采用了分辨率降频处理。

具体看下图:

有兴趣的小伙伴可以去尝试不同的尺寸,比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。 既满足了显示需求,又能降低用户加载图片需要的带宽。

可以用各种分辨率的移动智能手机查看我们设计的H5页面时,当然,也会出现如下的情况,内容显示不全,甚至一些重要内容和按钮都会被遮挡。

第一:背景图片必须采用background-size:cover;来实现。

第二:我们在进行H5页面内容规划布局设计的时候,不能把重要内容放在太偏下的位置或者偏上,否则前端布局时可能出现内容显示不全的情况。

通过对比可得:

除去将浏览器全屏显示的情况,几乎所有情况均会有顶部的状态栏和导航栏。

iPhone的设计标准,状态栏和导航栏的独立像素高度分别为40px和88px。

由于Android系统可以更改状态栏和导航栏的高度,这里可以取默认值为48px和100px(这些尺寸网上均可查)。

那么就会把网页内容往下挤,进入盲区(根据不同的布局方式可能挤出视口,即可视区域之下,)。取这两个系统者的最大值为148(48+100),如下图5,设计稿要尽量保证单页下面没有重要内容。

图5

那么在所有屏幕大小上把重要内容显示完全,就要注意市面上存在的小尺寸手机屏幕,现在绝大部分智能手机分辨率都在640x960px(iPhone4分辨率)之上,所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812(960-148=812)。

在此总结,一般情况下,以现有市场上流行的移动智能手机,单页翻转(非延伸向下的长页面)设计稿尺寸为640×1136,在高度为812处设置一条安全线(参考线),将重要的内容布局在这条安全线之上。

移动端H5页面的设计稿尺寸大小规范内容如下:

1、像素是没有宽高的(不要被Photoshop中的像素格欺骗),它只代表一个采样的色值。

2、任何图片作为数据信息被保存在存储盘中时,只有宽高像素数是有意义的,此时的ppi对于图片来说时没有任何意义,也并不能描述这个图片有多少英寸的宽度或者高度,而只有在被打印出来后才有ppi的意义,被打印出来才可以描述这张图片有多高多宽。

3、平时制作H5页面时设计原型时,产品经理出的原型稿建议屏宽为320px,用这个尺寸一是为了浏览方便(现在很多手机的屏宽达到1440px,用这个尺寸去模拟显然不现实),

二是以iPhone5s为标准的手机屏宽较小,进行内容排版布局时屏宽应该向下兼容。

4、制作设计稿时,设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时,按照现在流行的做法,可以直接使用原型稿上的尺寸,也就是设计稿上的1/2。

5、一般情况下,H5页面设计稿做成640x1136px是最为稳妥的尺寸,在812px高度处增加一条安全线,重要内容在此线之上(网上有些文章说安全线是960px处,个人认为不太准确)。既保证了在移动设备上显示清晰,也保证了素材的最小尺寸。

最后在这里,25学堂给H5工程师推荐2个不错的图片压缩的工具。

1、腾讯智图(http://zhitu.isux.us/

智图–图片智能自动优化平台,为你的图片智能选择合适的图片格式,为你压缩图片以便节省带宽优化体验,为你提供WebP图片让你的站点高大上

2、tinypng(手机APP设计必备图片压缩神器-TinyPNG),这里的图片压缩还是相当好用,可以节省用户不少带宽。

以上部分内容来源:zikoman.lofter.com  感谢ZIKO的分享和实践。

网友热搜:

  • 相关推荐
  • 大家在看
  • 西贝莜面村再道歉 只因5元茶水费被投诉

    西贝莜面村曾经在今年的4月份复工之后的涨价成为大家关注的焦点,上一次西贝莜面村同样选择道歉并恢复原价解决了消费者的不安。但在近日西贝莜面村再次成为热搜话题,这次是因为每人一位的5元茶水费引发。

  • 知乎是一面镜子

    ​热榜是内容平台的标配基本工具,头条、B站、微信、微博、知乎都有自己的热榜,各有不同。舆情指向标与内容催化剂是热搜两大属性,反映了一段时间用户关切点,人们可以从中了解时下最热门的话题与内容是什么。

  • PS5售价499欧元?亚马逊回应:页面为假

    按照索尼公布的PS5主机的配置和一大波大作的加持情况,新主机不到4000元的售价,还是很超值的,但很可惜这个消息还有待确认。之前曾有消息称,索尼PS5的售价为499欧元(约合人民币3982元) ,无

  • 虎牙部分频道下线整改 推荐页今起停更

    今日,虎牙APP推荐页显示“认真整改中,自 6 月 23 日起暂停更新”。同时,该页面也仅显示六条“虎牙文化”相关视频内容。此外,“视频”、“陪玩”两个栏目也被下线整改。

  • 为什么说主流平台币OKB,投资基本面是目前最好的?

    今日周一开盘,OKB行情开启快速的拉升,在4.627USDT位置开启上升行情,短时间内快速拉升,最高触达4.918USDT,涨幅高达6.29%。应了那句话,OB一气呵成和迅速反抽的行情之后,市场节奏的转换也将会加快。目前来看,整个数字资产市场,平台币板块的基本面可以说是最好的;而平台币板块中,OKB的基本面的处于领先的状态。这一点在行情上也得到了验证。那么,为什么说OKB的投资基本面目前是最好的呢?首先,投资平台币忽略消息对市场的

  • 探探新增“发现”页 强化短视频和社区属性

    【TechWeb】6月22日消息,社交软件探探的新版本增加了“发现”页,App会基于地理位置推送附近其他人发布的图文、视频等,用户可通过点赞、评论、关注与发布者互动。如图,此次探探对App界面进行了改版:原来在二级页面中才能打开的聊天、朋友圈等功能,被设计成“消息”、“发现”按钮被放置在开屏底栏,在“发现”板块内的“附近”按钮下,目前是以信息流的形式呈现附近的用户发布的图文、视频等内容。与过去只有已匹配朋友才能?

  • 西贝莜面村再道歉 因向消费者收取茶水费

    近日,一位网友在微博表示,一伙人在西贝莜面村就餐, 5 人共计收取 25 元的茶位费。其后,西贝莜面村认证账号在该条微博下道歉称,“很抱歉让您感受不好,请您私信小编联系方式,我们会联系门店为您退还茶水费”。

  • 探探新增“发现”页,现在App会基于地理位置推送附近用户动态

    DoNews 6月22日消息(记者 程梦玲)社交软件探探的新版本增加了“发现”页,与过去只有已匹配朋友才能互看个人动态内容不同,现在App会基于地理位置推送附近其他人发布的图文、视频等,每条动态的底部会显示与发布者地理距离、发布时间,推送不分性别。用户可通过点赞、评论、关注与发布者互动,还可以看到此时此刻身边有哪些人正在使用探探、发布内容,并通过点赞、评论、关注向其表达交流兴趣。如果彼此互相关注,即可直接配对聊

  • 腾讯会议崩了 页面显示“发生异常,请重新加入”

    今日晚间,有大量网友在微博反映称,腾讯会议出现了宕机的情况,页面显示“发生异常,请重新加入”,会议画面一片黑暗。针对此事腾讯方面暂未回应。

  • 如何在抖、快双平台上两面开花?这些账号是这么做的

    作为短视频行业的两大巨头,抖音和快手在平台定位、用户画像、内容消费等多个层面均有着不同的差异和各自的竞争优势。对于当下的短视频创作者来说,通过双平台运营是扩大自身影响力、提高商业价值的一种有效手段。而根据卡思数据统计,仅在 2018 年 7 月到 2019 年 6 月的时间内,在抖音、快手两个平台中昵称完全相同的KOL(粉丝数量>10W)就增长了7. 67 倍,不少创作者都在尝试由单平台运营转向双平台的双管齐下。

  • 高颜值有排面,TCL C8至臻QLED TV使用体验评测

    为了给家里换新电视,早在5月底,我已经开始做“功课”,从品牌、外观、功能、品质等方面进行分析,并去线下卖场挑选比较不同的产品,最终在618期间选择了这款75吋的TCL C8至臻QLED TV。当TCL C8至臻QLED TV安装好摆放在客厅时,真给人一种超乎意料的惊喜。我家的客厅采用了中式的设计,其实这风格蛮难搭配电视的,不过这款TCL C8至臻QLED TV可谓搭配得恰到好处,科技与中国风的组合毫无违和感。TCL C8至臻QLED TV比旧的48吋1080P?

  • 全新索尼X9100H液晶电视全面解析

    在智能电视行业,索尼电视无论是在技术上还是在硬件配置上可谓是做到了世界一流,而每次索尼新品电视的推出也必将带来整个行业的震动,2020 年 6 月 2 日,索尼正式发布了新款4K HDR智能液晶电视——X9100H系列。这是索尼基于中国现代年轻人的需求打造的新一代电视产品,集高颜值与强悍的游戏影音性能于一身,非常符合当下年轻人对颜值、娱乐以及游戏的应用需求。首先在外观上,秉承了索尼一贯以来的极简设计美学,在性能和简约中?

  • Edge扩展商城页面改版:帮用户更容易发现优秀扩展

    ​微软今天宣布,重新设计的 Edge 外接程序网站已经面向所有用户开放,帮助用户发现优秀扩展程序的同时,还大大提高了实用性。首先,该网站的顶部为“编辑推荐”,主要推荐一些热门、实用的扩展程序。

  • 下载:Win10 21H1首个版本官方ISO镜像发布

    出人意料,微软今晨面向Dev Channel(开发通道,原快速通道)的Insider会员推送新预览版,操作系统版本号Build 20150。Build 20150隶属于21H1,按计划会在明年上半年转正交付,也就是说,未来

  • Windows 10 21H1预览版意外泄漏:即将开始测试

    6月份也就是本月,微软就要开始Windows 10 21H1版的小范围内部测试,而官方更是在Windows Linux子系统的2.0公告中意外泄露了它的信息。开发者从上述公告中发现,Windows Linux子系统应用程序更

  • 米家空气净化器Pro H获权威机构消毒能力认证

    6月18日,米家空气净化器ProH拿到了由广州中科检测技术服务有限公司出具的消毒测试检测报告「JKK20040188(R1)」。报告指出,米家空气净化器Pro H(型号:AC-M7-SC)白色葡萄球菌1小时内的杀灭率≥99.9%,符合国家制定的《消毒技术规范2.1.3》要求,能够让用户呼吸的空气更加干净。除了检测中的细菌之外,米家空气净化器Pro H对生活中常见的其他污染物具有明显的净化效果。目前米家空气净化器Pro H正在小米商城、小米有品、京东、天猫、苏宁

  • 微软开始编译Win10 20H2第一个版本:对开始菜单调整

    Windows 105 月更新后,接下来微软要进行的就是Win10 20H2 的工作,其会在今年 10 月份推送,不过相比前者来说,它的更新幅度并不会太大。

  • 百度搜索界面改版 按钮变圆润页面更加整洁

    近日,有网友发现百度搜索首页以及百度搜索结果页出现了改版的情况,相比旧版,新版的百度搜索按钮更加的圆润,同时蓝色色值从#3385ff改成#4e71f2,并且搜索结果页面的区域划分更加明显。

  • Uzi退役牌面十足,不仅接受央视独家专访,还登上BBC头榜

    斗玩网原创:在TES夺得季中杯之后,不少人就曾希望在夏季赛可以看到更多战队豪强竞争的画面,但是在夏季赛开赛之前,LPL一大重磅消息公布。LPL006号选手Uzi宣布退役,这成为了近日整个英雄联盟电竞圈内最火热的话题,甚至盖过了TES夺冠。作为很多人的电竞偶像,Uzi宣布退役之后,很多网友表示“自己的青春结束了”。

  • 我们是不坐班的年轻人:一天写100页文档、靠网文月入10万、走遍大江南北

    几年过去以后,这些“斜杠青年”到底过得如何?可以靠斜杠事业谋生吗?今年新冠疫情肆虐,居家办公和远程办公被大部分人所接纳,也有更多年轻人开始重新考虑是否发展一份“斜杠”事业。

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