网站建设,网站设计,网站制作,网站开发
|
首页
手机网站版面设计技巧分享
时间:02-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类的屏幕大小。

  手机网站版面设计技巧分享蒙特人随送一个经验小总结:由于手机系统各异,手机的屏幕尺寸五花八门,屏幕的性能也呈现多样性,还有触摸屏和非触屏的区分,这四个变量结合起来,会有无数种不同的情况,如何能使你的应用完美地展现给用户,适配固然很重要。但是,更重要的是你要在适配之前,确定应用的目标群体也很重要啦,一定要选择适合自己的手机网站版面设计方好。杭州网站设计公司蒙特人愿意为大家的手机网站设计出谋划策,相信我们15年的手机网站设计经验能打动到你的内心深处...

  

  蒙特,英文:Mountor,全称:杭州蒙特信息技术有限公司。蒙特是专注于互联网移动互联网技术研发、销售、服务于一体的高新技术企业。我们秉着客户第一的理念,真诚地为各行业、各平台每一位客户提供最专业最贴心的高品质服务,同时提供免费的专业平台规划建议。您的企业利用互联网、移动互联网持续蓬勃发展、蒸蒸日上,是蒙特人最大的成功!

  蒙特成立于2000年7月6日,自成立以来,蒙特不断创新研发,已成长磨砺了18年,拥有11个软件项目著作权,服务于政府、国企、上市公司、中高端企业等上万家客户。其中10年以上的客户有5000多家,蒙特服务过的众多客户,对蒙特皆留下了深刻的印象和良好的建站口碑。

  作为高端品牌专业网建行业的领导者,主要提供电商网站建设手机网站建设微网站建设微信公众平台开发APP开发、微信公众号托管代运营、OA办公系统等互联网专业性服务。蒙特积极吸纳杭州地区的高校人才资源优势,不断充实自身设计与技术力量,以求为客户带来最满意的视觉体验与最安全的网站保障。蒙特现有团队151人,均为本科以上学历,其中有27名党员和16名预备党员。

  蒙特旗下子公司——杭州汉博专注于为客户提供因特网接入(全省21家接入商之一)、网站报修、网站安全检测、网站安全加固、网站推广、网站运营、域名注册、网站备案等网站服务,汉博有望成为全省第三家为经营性网站提供安全检测和加固的服务商,为您的企业平台健康发展保驾护航!

©2000-2015 杭州蒙特信息技术有限公司版权所有
Mountor、蒙特是Mountor Corp.的注册商标。
经营许可证编号:浙B2-20090322 
浙公网安备 33010602000489号
技术支持:
更新时间:2019年08月13日
法律声明 | 网站地图
咨询热线:0571-88230881 15158184365