手机网站页面设计尺寸

萌萌哒的小狐狸欢迎你的观看嘻嘻!

不管是我们是在做手机网站、手机APP页面,甚至微信公众号运营的时候,移动端设备的字体、图片显示是否清晰、精致,是否给手机端用户带来良好体验,都是我们值得深思的问题。

而移动端的用户体验跟移动端设备的屏幕分辨率密切不可分,移动终端设备的屏幕分辨率很多都不一样,手机就分很多种大小的,然后还有一些平板电脑等等,大小很难统一,浏览器也各式各样。小狐狸seo在这里总结了一些关于手机端网页设计行之有效的要点。

一、倍率与逻辑像素

移动端设备屏幕尺寸非常多,碎片化严重,尤其是Android ,你会听到很多种分辨率:480x800,480x854,540x960 ,720x1280 , 1080x1920,而且还有传说中的2 K屏,近年来iPhone的碎片化也加剧了:640x960,640x1136 , 750x1334,1242x2208。

Android把各种设备的像素密度划成了好几个范围区问,给不同范围的设备定义了不同的倍率,来保证显示效果相近,像素密度概念虽然重要,但用不看我们自己算,iOS与Android都帮我们算好了。

像素密度在120左右的屏蟇归为Idpi, 16左右的归为mdpi,以此类推,这样,所有的Android屏幕都找到了自己的位置,并赋予了相应的倍率:

  Idpi [0,75倍]

  mdpi [1 倍]

  hdpi [1.5倍]

  xhdpi [2倍]

  xxhdpi [3倍]

  xxxhdpi [4倍]

各型号iPhone的倍率比较简单,我们后面会讲到,那么Android手机那么多,具体怎么分?哪些手机是几倍的倍率呢?我们先看一张素,这是2014年10月到2015年03月的数据:

  3倍:lpt=ldp = 3px ( xxhdpi、iPhone 6 )

  4倍:lpt=ldp=4px ( xxxhdpi)

单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时,有的设计师喜欢把画布设为1080x1920,有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。而在xxhdpi设备上,则是144x144px。

二、移动端设备的屏幕尺寸及分辨率

1、Iphone

  

 

尺寸以及分辨率

主流分辨率640*1136,750x1334,1242x2208, 网页和移动的UI用72px

界面基本组成元素

iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。因为宽度是固定的,所以设计开发起来很方便。下面我们说说这些“栏”的尺寸吧:

  状态栏:高度 40px

  导航栏:高度 88px

  主菜单栏:高度 98px;

  内容区域:高度为:734px

  如果640*1136是910px

  iPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。

3.字体

窗体顶端

32~36px 32px,注释等提示文本28px。

2、Android

  

 

尺寸以及分辨率

Android界面比较主流的分辨率:854*480、720*1280、1080*1920。

界面基本组成元素

与ios的一样,还是有状态栏、导航栏和主菜单栏,以720*1280的尺寸,状态栏的高度应为50px,导航栏的高度96px,主菜单栏的高度96px。内容区域高度为:1038px(1280-50-96-96=1038) 窗体底端

Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)

字体:android原生的字体,与微软雅黑很像。字体大小范围为16px-32px

随着移动手机的发展,高分辨率如1080x1920手机逐渐普及,我们在考虑网页设计时候,可以结合目前的主流移动设备的分辨率相匹配,这样有利于提高大部分的移动端用户体验。同时,有必要结合不同的主流手机浏览器如:百度浏览器、QQ浏览器等,保证每个浏览器能够有良好的浏览效果。

知识共享是最大的快乐,转载请备注来源"小狐狸SEO"成都seo|成都网络推广|百度竞价|新媒体运营—小狐狸seo的文章!