全国服务热线:18980020603 成都热线:028-86633922
新闻中心网站专题联系我们
行业新闻 建站经验 网站建设资讯 手机网站资讯 微信网站建设资讯 APP开发资讯 商城网站资讯

手机网站建设:手机网站设计尺寸及界面布局

发布人:桔子科技    发布时间:2016-11-25 08:33:03    分享到:
随着手机网民的巨曾以及各个手机应用平台的上线,几乎所有的互联网应用都纷纷往手机平台上迁移。但是当前的手机种类繁多,手机屏幕的大小、分辨率各异,因此既要考虑应用在不同屏幕大小上的兼容,又要保持其一致性。那么,手机网站设计尺寸及界面布局是怎么样满足这一要求的呢?很多人不是很青菜,下面成都桔子科技移动平台给大家介绍一下。
  在客户端的设计过程中,针对不同的屏幕大小,应该如何来设计?是否每个大小的屏幕尺寸都需要一个新的界面布局,等等。下面展开讨论:
  一、屏幕大小正确理解
  说起屏幕大小的时候,会有两种表达方式,1) 我的屏幕2.4吋,你的屏幕3.5吋。 2)这个屏幕分辨率 240*320,那个屏幕分辨率为320*480。但在设计过程中,屏幕的分辨率和屏幕的实际尺寸必须同时考虑。
  这里首先有几个概念需要再澄清一下:
  屏幕物理尺寸:屏幕对角线长的实际尺寸,如2.4吋,3.5吋等等;
  屏幕分辨率:屏幕所能显示像素的多少。如,240*320等;
  屏幕密度(pixel per inch):以每英寸的像素数。每英寸的分辨率数,如160ppi。
  物理尺寸决定了屏幕的实际尺寸,而分辨率可以表示屏幕上可以呈现的像素点数,屏幕密度决定了屏幕的精细程度。相同的屏幕大小,如果分辨率高,则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关,屏幕密度较小的屏上,界面元素的实际尺寸就会大些,反之亦然。
  需要注意的是:在不同屏幕中,不同的图标点阵或者不同的字体及大小的汉字,在人的主观感知上,会有一个最优的结果值。在设计的过程中,我们需要根据这个最优值来进行界面的布局及设计。
  二、设计过程与屏幕适配思路
  1.确定目标的屏幕大小
  屏幕大小由宽度和高度两个因素决定,但是在布局手机客户端的过程中,最关心的是宽度值。宽度确定后,高度可以由滚动或者翻页来显示所有内容;文字可以在适当的位置折行;标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度,图标、文字、特殊的组件不仅需要考虑宽度,也需要考虑整个屏幕的布局是否与之适配。
  由于不可能对所有的客户端进行单独的开发,因此,需要对手机屏幕的大小的归类。同时,在设计中也不会真的只考虑屏幕大小一个因素,屏幕大小和操作系统、手机类型等还是存在很大的相关性的。
  首先,我们先来定义一下手机的屏幕大小的归类档次:
  A. 小屏幕:宽度240 px 以下屏幕或者2.4 以下屏幕
  一般以非智能机为主,归在这个分类中的手机屏幕,一般是以java版本的客户端为主。
  B. 中等屏幕:宽度240~320 px,或者2.4~3.0吋屏幕
  智能手机以Symbian或S60 v1,2,3,Windows mobile为主流;或者是非智能手机的客户端以java版本为主。
  同时包括240*320的宽屏手机。
  C. 大屏幕:宽度320 px以上屏幕或者 3.0吋以上的屏幕
  iPhone 手机只有两个版本的适配,屏幕物理尺寸保持一致;
  Android 系统手机及衍生平台手机
  Win phone 7 系统手机
  Nokia S60 v5,symbian 3等
  2.适配原则
  1) 客户端的logo,在各个手机上都应该清晰地显示
  2) 标题或者底部栏必须100%的与手机宽度适配
  3) 文字内容如果显示不下的话,可以自动适配宽度进行折行
  4) 图片可以根据宽度进行自动缩放,屏幕宽度超过图片本身时,显示图片本身的大小
  5) 适配过程中,界面的元素的宽高最小值应该符合用户的主观舒适范围值。
  6) 不能完全使用分辨率的绝对比例来对界面布局进行缩放;
  3. 适配思路分析,根据我们前面的分析:
  C类大屏幕大小主要以Android、iPhone、win phone 7 和Nokia V5等手机为主,它们都是触屏手机,在适配上可以划为一个档次。
  B类中等屏幕大小智能机主要以Symbian 和Windows mobile为主,因此在适配这两个平台时,主要集中在B类屏幕间的适配。
  B类中等屏幕大小还有一块是非智能手机,使用Java客户端,同时,A类小屏幕大小主要使用Java客户端,因此,Java类客户端需要适配的范围更广,至少应包括B类和A类的屏幕大小。
  由于手机系统各异,手机的屏幕尺寸五花八门,屏幕的性能也呈现多样性,还有触摸屏和非触屏的区分,这四个变量结合起来,会有无数种不同的情况,如何能使你的应用完美地展现给用户,适配固然很重要。但是,更重要的是你要在适配之前,确定应用的目标群体也很重要啦,一定要选择适合自己的。
                                      
本文是成都网站建设公司、成都网站设计制作公司与成都APP开发公司-桔子科技公司为您整理!
成都网站建设,成都网站设计,成都网站制作,成都网页设计,成都网站建设公司 ,成都网站设计公司,成都网站制作公司,成都网页设计公司,网站建设网站制作网站设计网页设计成都手机网站建设,手机网站建设,成都APP开发,APP开发,成都建网站,成都做网站,成都商城网站建设,集团网站建设,网站建设,高端网站建设,品牌网站建设,成都平台网站建设,成都响应式网站建设,成都微信网站建设,成都微商城网站建设,成都微信营销,成都网站优化,成都网络公司。

下一篇:手机网站建设:手机网站开发必知的十大要点上一篇:手机网站设计规则:网页中的基础条件

最新案例
手机/微网站
  1. [成都]微信网站建设:微信分销系统能为商铺带来哪些特色服务
  2. [成都]微信网站建设:如何通过微信公众号来推广产品
  3. [成都]微信网站建设:微信开发都有些什么功能
  4. [成都]手机网站:手机网站设计需要达到什么效果
  5. [成都]手机网站:手机网站响应式网站解决方案
  6. [成都]手机网站:手机网站响应式网站解决方案
网络营销
  1. APP开发: APP网页评分功能设计
  2. APP开发:手机APP开发前这4点必须要了解
  3. APP开发:为什么企业要做手机APP
  4. APP开发:你可以更好的留住APP用户
  5. APP开发:开发时间的长短主要由哪些因素决定
  6. APP开发:电子商务类APP开发的4点建议
img

7x24小时售后服务

img

5倍故障时长赔付

img

15天无理由退款

img

N对一管家服务

让我们的顾问联系您

  • 电话:4006-028-024 028-86633922

    邮箱:Service@orangeapp.cn

    成都市成华区崔家店路789号上城国际1-24-9号

qq sina