【手机建站】浅谈手机网站设计尺寸规范与界面布局技巧

随着各个手机操作系统的应用平台的上线,几乎所有的互联网应用都在往手机上迁移。但是当前的手机种类繁多,手机屏幕的大小、比例各异,并且手机的屏幕本身就小,因此既要考虑应用在不同屏幕大小上的适配,又要保持其一致性...

随着各个手机操作系统的应用平台的上线,几乎所有的互联网应用都在往手机上迁移。但是当前的手机种类繁多,手机屏幕的大小、比例各异,并且手机的屏幕本身就小,因此在进行手机网站设计时既要考虑应用在不同屏幕大小上的适配,又要保持其一致性。那么,手机网站设计尺寸规范与界面布局是怎么样的呢?建站行为大家介绍一下这方面的知识。众所周知,在手机网站设计过程中,针对不同的屏幕大小,应该如何来设计?是否每个大小的屏幕尺寸都需要一个新的界面布局等等。

手机网站设计

一、手机屏幕大小正确理解

说起屏幕大小的时候,会有两种表达方式,1) 我的屏幕2.4吋,你的屏幕3.5吋。 2)这个屏幕分辨率 240*320,那个屏幕分辨率为320*480。但在进行手机网站设计过程中,屏幕的分辨率和屏幕的实际尺寸必须同时考虑;

物理尺寸决定了屏幕的实际尺寸,而分辨率可以表示屏幕上可以呈现的像素点数,屏幕密度决定了屏幕的精细程度。相同的屏幕大小,如果分辨率高,则屏幕元素更精细。一个手机网站页面元素在屏幕里的实际尺寸却是与屏幕密度相关,屏幕密度较小的屏上,界面元素的实际尺寸就会大些,反之亦然。需要注意的是:在不同屏幕中,不同的图标点阵或者不同的字体及大小的汉字,在人的主观感知上,会有一个最优的结果值。在手机网站设计的过程中,我们需要根据这个最优值来进行页面的布局及设计;

二、手机网站设计的过程与屏幕适配思路

1. 确定目标的屏幕大小

屏幕大小由宽度和高度两个因素决定,但是在布局手机客户端的过程中,最关心的是宽度值。宽度确定后,高度可以由滚动或者翻页来显示所有内容;文字可以在适当的位置换行,标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度,图标、文字、特殊的组件不仅需要考虑宽度,也需要考虑整个屏幕的布局是否与之适配。由于不可能对所有的客户端尺寸进行单独的开发,因此,需要对手机屏幕的大小的归类。同时,在手机网站设计中也不会真的只考虑屏幕大小一个因素,屏幕大小和操作系统、手机类型等还是存在很大的相关性的;

我们先来定义一下手机的屏幕大小的归类档次:

A. 小屏幕:宽度240 px 以下屏幕或者2.4 以下屏幕,一般以非智能机为主,归在这个分类中的手机屏幕,一般是以java版本的客户端为主,不过现在已经很少用了,除非特殊要求,否则在手机网站设计时可以不予考虑;

B. 中等屏幕:宽度240~320 px,或者2.4~3.0吋屏幕,这也是比较老款的智能手机,是否在手机网站设计的考虑之列,由手机网站开发方来确定;

C. 大屏幕:宽度320 px以上屏幕或者 3.0吋以上的屏幕。iPhone 手机只有两个版本的适配,屏幕物理尺寸保持一致,Android 系统手机及衍生平台手机,Win phone 7 系统手机等。这类移动终端是手机网站设计的受众主体,也是重点考虑之列的。

2. 手机网站设计适配原则

1) 客户端的logo,在各个手机上都应该清晰地显示;

2) 标题或者底部栏必须100%的与手机宽度适配;

3) 文字内容如果显示不下的话,可以自动适配宽度进行折行;

4) 图片可以根据宽度进行自动缩放,屏幕宽度超过图片本身时,显示图片本身的大小;

5) 适配过程中,界面的元素的宽高最小值应该符合用户的主观舒适范围值;

6) 不能完全使用分辨率的绝对比例来对界面布局进行缩放。

3. 手机网站设计适配思路

C类大屏幕大小主要以Android、iPhone、win phone 7等手机为主,它们都是触屏手机,在手机网站设计的适配上可以划为一个档次;

B类中等屏幕大小还有一块是非智能手机,使用Java客户端,同时,A类小屏幕大小主要使用Java客户端,因此,Java类客户端需要适配的范围更广,至于是否考虑在手机网站适配之列,根据具体的需求而定。

由于手机系统各异、手机的屏幕尺寸各有不同,屏幕的性能也呈现多样性,这几个变量结合起来,会有无数种不同的情况,如何能使你的手机网站完美地展现给用户,适配固然很重要。建站行提醒你在适配之前,要确定应用的目标群体也很重要啦,一定要选择适合自己的!

以上说明了手机网站设计中尺寸的规范和布局、适配的一些注意事项,如果您还有这方面的疑问,可以随时联系建站行,我们有专业的手机网站设计、建设团队,同时,开发手机APP也是建站行的强项,总之,针对移动客户端的开发,建站行可以为您提供完整的设计、开发方案和流程、执行过程管理,相信一定可以让您满意!建站行服务热线:010-56257625,欢迎随时拨打!

相关阅读:【北京建站公司】手机网站设计制作服务