手机客户端交互设计适配之-屏幕大小

《手机客户端交互设计适配之-屏幕大小》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、客户端交互设计适配之——屏幕大小2011年03月04日随着各个手机操作系统的应用平台的上线，几乎所有的互联网应用都在往手机上迁移。然而手机与PC不一样，PC经过了多年的发展，在设计上形成了很多不成文的规则，如网页的宽度都在960px左右【当然，由于整体的电脑屏幕往大尺寸及高分辨发展，除了背景宽屏自适应外，不少网页也正朝着更宽的方向上发展】。当前的手机种类繁多，手机屏幕的大小、比例各异，并且手机的屏幕本身就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性，同时还要提高每个手机屏幕的使用效率，这就存在着很多的矛盾点。在客户端的设计过

2、程中，针对不同的屏幕大小，应该如何来设计？是否每个大小的屏幕尺寸都需要一个新的界面布局，还是所有的屏幕尺寸都使用相同的界面布局？我们将在下面的内容中来探讨这些内容。一、当前热门手机的屏幕大小 下图中，我抽取了国内某个网络电器城某周的10大畅销手机排名：虽然只是2010年中的某一周的手机销售量排名，由此可以看出，当前使用中的手机屏幕差异很大，各种屏幕大小和分辨率都有。如果为了适配更多的用户群体，则需要考虑的手机屏幕大小和分辨率更多。【不过，根据当前的手机发展趋势，及手机客户端的使用行为可以看出，最主要需要用户关注的手机屏幕是2.4吋以上，24

3、0*320以上的手机屏幕，因为这样的手机使用客户端的频率和用户量都会更多。个人建议更多地是考虑320*480及以上的屏幕。】二、屏幕大小正确理解说起屏幕大小的时候，会有两种表达方式，1）“我的屏幕2.4吋，你的屏幕3.5吋。”2）“这个屏幕分辨率240*320，那个屏幕分辨率为320*480。”但在设计过程中，屏幕的分辨率和屏幕的实际尺寸必须同时考虑。这里首先有几个概念需要再澄清一下：·屏幕物理尺寸：屏幕对角线长的实际尺寸，如2.4吋，3.5吋等等·屏幕分辨率：屏幕所能显示像素的多少。如，240*320等。·屏幕密度（pixelperinc

4、h）：以每英寸的像素数。每英寸的分辨率数，如160ppi。物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。 在进行手机界面布局中，除了元素的像素值外，考虑元素的实际尺寸也非常重要，甚至更为重要（人眼是要靠物体成像在视网膜上的视角大小来进行识别感知，视角是与物体实际大小和距离有关）。          在不同屏幕中，不同的图标点阵或者不

5、同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。也可以看出，这个用户感知最优的取值也与使用手机的人群有关（如年龄大的用户需要物理尺寸更大的界面元素）。在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。也可以看出，这个用户感知最优的取值也与使用手机的人群有关（如年龄大的用户需要物理尺寸更大的界面元素）。三、设计过程与屏幕适配思路1．确定目标的屏幕大小屏幕大小由宽

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

7、下屏幕·一般以非智能机为主，归在这个分类中的手机屏幕，一般是以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等D.平板

8、屏幕：7吋及以上的屏幕【可以不包含在手机中，^_^】·由于当前的平板电脑上的应用的开发都是基于手机应用的功能，但是，平板的屏幕物理尺寸大增，使用情景也和手机不一致，在设计上有很多