手机网站界面设计如何布局
2022-11-15点击量:166
手机网站界面设计如何布局手机网站界面设计如何布局一、屏幕大小正确理解说起屏幕大小的时候,会有两种表达方式,1)我的屏幕2.4吋,你的屏幕3.5吋。2)这个屏幕分辨率240*320,那个屏幕分辨率为320*480。但在设计过程中,屏幕的分辨率和屏幕的实际尺寸必须同时考虑。这里首先有几个概念需要再澄清一下:屏幕物理尺寸:屏幕对角线长的实际尺寸,如2.4吋,3.5吋等等;屏幕分辨率:屏幕所能显示像素的多少。如,240*320等;屏幕密度(pixelperinch):以每英寸的像素数。每英寸的分辨率数,如160ppi。物理尺寸决定了屏幕的实际尺寸,而分辨率可以表示屏幕上可以呈现的像素点数,屏幕密度决定了屏幕的精细程度。相同的屏幕大小,如果分辨率高,则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关,屏幕密度较小的屏上,界面元素的实际尺寸就会大些,反之亦然。需要注意的是:在不同屏幕中,不同的图标点阵或者不同的字体及大小的汉字,在人的主观感知上,会有一个最优的结果值。在设计的过程中,我们需要根据这个最优值来进行界面的布局及手机版面设计。手机网站界面设计如何布局二、设计过程与屏幕适配思路1、确定目标的屏幕大小屏幕大小由宽度和高度两个因素决定,但是在布局手机客户端的过程中,最关心的是宽度值。宽度确定后,高度可以由滚动或者翻页来显示所有内容;文字可以在适当的位置折行;标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度,图标、文字、特殊的组件不仅需要考虑宽度,也需要考虑整个屏幕的布局是否与之适配。由于不可能对所有的客户端进行单独的开发,因此,需要对手机屏幕的大小的归类。同时,在设计中也不会真的只考虑屏幕大小一个因素,屏幕大小和操作系统、手机类型等还是存在很大的相关性的。首先,我们先来定义一下手机的屏幕大小的归类档次:A.小屏幕:宽度240px以下屏幕或者2.4以下屏幕一般以非智能机为主,归在这个分类中的手机屏幕,一般是以java版本的客户端为主。B.中等屏幕:宽度240~320px,或者2.4~3.0吋屏幕智能手机以Symbian或S60v1,2,3,Windowsmobile为主流;或者是非智能手机的客户端以java版本为主。同时包括240*320的宽屏手机。C.大屏幕:宽度320px以上屏幕或者3.0吋以上的屏幕iPhone手机只有两个版本的适配,屏幕物理尺寸保持一致;Android系统手机及衍生平台手机;Winphone7系统手机;NokiaS60v5,symbian3等2、适配原则1)客户端的logo,在各个手机上都应该清晰地显示2)标题或者底部栏必须100%的与手机宽度适配3)文字内容如果显示不下的话,可以自动适配宽度进行折行4)图片可以根据宽度进行自动缩放,屏幕宽度超过图片本身时,显示图片本身的大小5)适配过程中,界面的元素的宽高最小值应该符合用户的主观舒适范围值6)不能完全使用分辨率的绝对比例来对界面布局进行缩放3、适配思路分析,根据我们前面的分析:C类大屏幕大小主要以Android、iPhone、winphone7和NokiaV5等手机为主,它们都是触屏手机,在适配上可以划为一个档次。B类中等屏幕大小智能机主要以Symbian和Windowsmobile为主,因此在适配这两个平台时,主要集中在B类屏幕间的适配。B类中等屏幕大小还有一块是非智能手机,使用Java客户端,同时,A类小屏幕大小主要使用Java客户端,因此,Java类客户端需要适配的范围更广,至少应包括B类和A类的屏幕大小。...