手机网站设计尺寸及界面布局.pdf

网站建设 _app 开发 _ 手机网站开发 _ 国互网 手机网站设计尺寸及界面布局 随着各个手机操作系统的应用平台的上线，几乎所有的互联网应用都在往手机上 迁移。但是当前的手机种类繁多，手机屏幕的大小、比例各异，并且手机的屏幕本身 就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性。那么，手机 网站设计尺寸及界面布局是怎么样的呢 ?很多人不是很青菜，下面给大家介绍一下这个 问题。 在客户端的设计过程中，针对不同的屏幕大小，应该如何来设计 ?是否每个大小的 屏幕尺寸都需要一个新的界面布局，等等。下面都会有所介绍： 一、屏幕大小正确理解 说起屏幕大小的时候，会有两种表达方式， 1) 我的屏幕 2.4 吋，你的屏幕 3.5 吋。 2) 这个屏幕分辨率 240*320 ，那个屏幕分辨率为 320*480 。但在设计过程中，屏幕的 分辨率和屏幕的实际尺寸必须同时考虑。 这里首先有几个概念需要再澄清一下： 屏幕物理尺寸：屏幕对角线长的实际尺寸，如 2.4 吋， 3.5 吋等等 ; 屏幕分辨率：屏幕所能显示像素的多少。如， 240*320 等 ; 屏幕密度 (pixel per inch) ：以每英寸的像素数。每英寸的分辨率数，如 160ppi 。 物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数， 屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精 细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上， 界面元素的实际尺寸就会大些，反之亦然。 网站建设 _app 开发 _ 手机网站开发 _ 国互网 网站建设 _app 开发 _ 手机网站开发 _ 国互网 需要注意的是：在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字， 在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最 优值来进行界面的布局及设计。 二、设计过程与屏幕适配思路 1.确定目标的屏幕大小 屏幕大小由宽度和高度两个因素决定，但是在布局手机客户端的过程中，最关心 的是宽度值。宽度确定后，高度可以由滚动或者翻页来显示所有内容 ;文字可以在适当 的位置折行 ; 标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度，图标、文字、 特殊的组件不仅需要考虑宽度，也需要考虑整个屏幕的布局是否与之适配。 由于不可能对所有的客户端进行单独的开发，因此，需要对手机屏幕的大小的归 类。同时，在设计中也不会真的只考虑屏幕大小一个因素，屏幕大小和操作系统、手 机类型等还是存在很大的相关性的。 首先，我们先来定义一下手机的屏幕大小的归类档次： A. 小屏幕：宽度 240 px 以下屏幕或者 2.4 以下屏幕 一般以非智能机为主，归在这个分类中的手机屏幕，一般是以 java 版本的客户端 为主。 B. 中等屏幕：宽度 240~320 px ，或者 2.4~3.0 吋屏幕 智能手机以 Symbian 或 S60 v1,2,3 ，Windows mobile 为主流 ;或者是非智能手机 的客户端以 java 版本为主。 网站建设 _app 开发 _ 手机网站开发 _ 国互网 网站建设 _app 开发 _ 手机网站开发 _ 国互网 同时包括 240*320 的宽屏手机。 C. 大屏幕：宽度 320 px 以上屏幕或者 3.0 吋以上的屏幕 iPhone 手机只有两个版本的适配，屏幕物理尺寸保持一致