当前位置:首页 > 经验学习 > 交互设计

客户端交互设计适配之——屏幕大小

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

随着各个手机操作系统的应用平台的上线,几乎所有的互联网应用都在往手机上迁移。然而手机与PC 不一样,PC经过了多年的发展,在设计上形成了很多不成文的规则,如网页的宽度都在960px左右【当然,由于整体De(的)电脑屏幕往大尺寸及高分辨发展,除了背景宽屏自适应外,不少网页也正朝着更宽的方向上发展】。当前的手机种类繁多,手机屏幕的大小、比例各异,并且手机的屏幕本身就小,因此既要考虑应用在不同屏幕大小shang(上)的适配,又要保持其一致性,同时还要提高每个手机屏幕的使用效率,这就Cun(存)在着很多的矛盾点。
在客户端的设计过程中,针对不同的屏幕大小,应该如何来设计?是否每个大xiao(小)的屏幕尺寸都需要一个新的界面布局,还是所有的屏幕尺寸都使用相同的界面布局?我们将在下面的内容中来探讨这些内容。
一、当前热门手机的屏幕大小
下图中,我抽取了国内某个网络电器城某周的10大畅销shou(手)机排名:

虽然只是2010年中的mou(某)一周的手机销售量排名,由此可以看出,当前使用中的手机屏幕差异很大,各种屏幕大小和分辨率都有。如果为了适配更多的用户群体,则需要考虑的手机屏幕大小和分辨率更多。【不过,根据当前的手机发展趋势,及手机客户端的使用行为可以看出,最主要需要用户关注的手机屏幕是2.4吋以shang(上),240*320以上的手机屏幕,因为这样的手机使用客户端De(的)pin(频)率和用户量都会更多。个人建议更多地是考虑320*480及以上的屏幕。】
二、屏幕大小正确理解
说起屏幕大小的时候,会有两种表达方式,1) “我的屏幕2.4吋,你的屏幕3.5吋。” 2)“这个屏幕分辨率 240*320,那个屏幕分辨率为320*480。”但在设计过程中,屏幕的分辨率和屏幕的实际尺寸必须同时考虑。
这里首先有几个概念需要再澄清一下:
屏幕物理尺寸:屏幕对角线长的实际尺寸,如2.4吋,3.5吋等等
屏幕分辨率:屏幕所能显示像素的多少。如,240*320等。
屏幕密度(pixel per inch):以每英寸的像素数。每ying(英)寸的分辨率数,如160ppi。
物理尺寸决定了屏幕的实际尺寸,而分辨率可以表示屏幕上可以呈现的像素点数,屏幕密度决定了屏幕的精细程度。相同的屏幕da(大)小,Ru(如)果分辨率高,则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关,屏幕密du(度)较小的屏上,界面元素的实际尺寸就会大些,反之亦然。
在进行手机界面布局中,除了元素的像素值外,考虑元素的实际尺寸也非常重要,甚至更为重要(人眼是要靠物体成像在视网膜上的视角大小来进行识别感知,shi(视)角是与物体实际da(大)小和距离有关)。

在不同屏幕中,不同的图标点阵Huo(或)者不同的字体及大小的汉字,在ren(人)的主观感知上,会有一个最优的结果值。在设计的过程中,我们需要根据这个最优值来进行界面的布局及设计。
也可以看出,这个用户感知最优的取值也与使用手机的人群有关(如年龄大的用户需要物理尺寸更大的界面元素)。
在不同屏幕中,不同的图标点阵或者不同的字体及大小的汉字,在人的主观感知shang(上),会有一个最优的结果值。在设计的过程中,我们需要根据这ge(个)zui(最)优值来进行界面的布局及设计。
也可以看出,这个用户感知最优的取值也与使用手机的人群有关(如年龄大的用户需要物理尺寸更大的界面元素)。
三、设计过程与屏幕适配思路
1.确定目标的屏幕大小
屏幕大小由宽度和高度两个因素决定,但是在布局手机客户端De(的)guo(过)程中,最关心的是宽度值。宽度确定后,高度可以由滚动或者翻页来显示所有内容;文字可以在适当的位置折行;标题栏可以伸缩shi(适)配屏幕宽度等等。但并不是不考虑高度,图标、文字、特殊的组件不仅需要考虑宽度,也需要考虑整个屏幕的布局是否与之适配。
由于不可能对所有的客户端进行单独的开发,因此,需要对手机屏幕的大小的归类。同时,在设计中也不会真的只考虑屏幕大小一个因素,屏幕大小和操作系统、手机类型等还是Cun(存)在很大的相关性的。
首先,我们先来定义一下手机的屏幕大小的归类档次:

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: