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

客户端交互设计适配之——屏幕大小 随着各个手机操作系统的应用平台的上线 几乎所有的互联网应用都在往手机上迁移。然而手机 与PC 不一样 PC经过了多年的发展 在设计上形成了很多不成文的规则 如网页的宽度都 在960px左右 【当然 由于整体的电脑屏幕往大尺寸及高分辨发展 除了背景宽屏自适应外 不少 网页也正朝着更宽的方向上发展】。当前的手机种类繁多 手机屏幕的大小、比例各异 并且手机 的屏幕本身就小 因此既要考虑应用在不同屏幕大小上的适配 又要保持其一致性 同时还要提高 每个手机屏幕的使用效率 这就存在着很多的矛盾点。 在客户端的设计过程中 针对不同的屏幕大小 应该如何来设计 ？是否每个大小的屏幕尺寸都需要 一个新的界面布局 还是所有的屏幕尺寸都使用相同的界面布局 ？我们将在下面的内容中来探讨这 些内容。 一、当前热门手机的屏幕大小 下图中 我抽取了国内某个网络电器城某周的10大畅销手机排名 ： 虽然只是2010年中的某一周的手机销售量排名 由此可以看出 当前使用中的手机屏幕差异很大 各种屏幕大小和分辨率都有。如果为了适配更多的用户群体 则需要考虑的手机屏幕大小和分辨率 更多。 【不过 根据当前的手机发展趋势 及手机客户端的使用行为可以看出 最主要需要用户关 注的手机屏幕是2.4 吋以上 24 0*320以上的手机屏幕 因为这样的手机使用客户端的频率和用户量 都会更多。个人建议更多地是考虑320*4 80及以上的屏幕。】 二、屏幕大小正确理解 说起屏幕大小的时候 会有两种表达方式 1 ） “我的屏幕2.4 吋 你的屏幕3.5吋。” 2 ）“这个屏幕分 辨率 24 0*320 那个屏幕分辨率为320*4 80。”但在设计过程中 屏幕的分辨率和屏幕的实际尺寸必 须同时考虑。 这里首先有几个概念需要再澄清一下 ： 屏幕物理尺寸 ：屏幕对角线长的实际尺寸 如2.4 吋 3.5吋等等 屏幕分辨率 ：屏幕所能显示像素的多少。如 24 0*320等。 屏幕密度 （pixel per inch ）：以每英寸的像素数。每英寸的分辨率数 如160ppi。 物理尺寸决定了屏幕的实际尺寸 而分辨率可以表示屏幕上可以呈现的像素点数 屏幕密度决定了 屏幕的精细程度。相同的屏幕大小 如果分辨率高 则屏幕元素更精细。一个界面元素在屏幕里的 实际尺寸却是与屏幕密度相关 屏幕密度较小的屏上 界面元素的实际尺寸就会大些 反之亦然。 在进行手机界面布局中 除了元素的像素值外 考虑元素的实际尺寸也非常重要 甚至更为重要 （ 人眼是要靠物体成像在视网膜上的视角大小来进行识别感知 视角是与物体实际大小和距离有关 ） 。 在不同屏幕中 不同的图标点阵或者不同的字体及大小的汉字 在人的主观感知上 会有一个最优 的结果值。在设计的过程中 我们需要根据这个最优值来进行界面的布局及设计。 也可以看出 这个用户感知最优的取值也与使用手机的人群有关 （如年龄大的用户需要物理尺寸更 大的界面元素 ）。 在不同屏幕中 不同的图标点阵或者不同的字体及大小的汉字 在人的主观感知上 会有一个最优 的结果值。在设计的过程中 我们需要根据这个最优值来进行界面的布局及设计。 也可以看出 这个用户感知最优的取值也与使用手机的人群有关 （如年龄大的用户需要物理尺寸更 大的界面元素 ）。 三、设计过程 屏幕适配思路 1 ．确定目标的屏幕大小 屏幕大小由宽度和高度两个因素决定 但是在布局手机客户端的过程中 最关心的是 宽度值。宽度 确定后 高度可以由滚动或者翻页来显示所有内容 ；文字可以在适当的位置折行 ；标题栏可以伸缩 适配屏幕宽度等等。但并不是不考虑高度 图标、文字、特殊的组件不仅需要考虑宽度 也需要考 虑整个屏幕的布局是否与之适配。 由于不可能对所有的客户端进行单独的开发 因此 需要对手机屏幕的大小的归类。同时 在设计 中也不会真的只考虑屏幕大小一个因素 屏幕大小和操作系统、手机类型等还是存在很大的相关 性的。 首先 我们先来定义一下手机的屏幕大小的归类档次 ： A . 小屏幕 ：宽度24 0 px 以下屏幕或者2.4 以下屏幕 一般以非智能机为主 归在这个分类中的手机屏幕 一般是以java版本的客户端为主。 B. 中等屏幕 ：宽度24 0 320 px 或者2.4 3.0吋屏幕 智能手机以Symbian或S60 v 1,2,3 W indows mo bile为主流 ；或者是非智能手机的客户端以java 版本为主。 同时包括24 0*320的宽屏手机。 C. 大屏幕 ：宽度