关于手机网站设计的探究

手机网站设计可以从设备、体系、欣赏器、网络、四个方向来共同探究：

一、设备

·分辨率与屏幕尺寸·触屏机的交互特点·性能

1. 分辨率是设计师做网站时首要考虑的问题，iphone/ipod touch目前有2种分辨率：480*320、960*640,屏幕的物理尺寸都是3.5英寸，Android因为是开源体系，生产商诸多，导致分辨率，屏幕尺寸特别很是多，但目前主流的分辨率为：480*320、800*480，根据以上情况保举以480*320为标准设计，（客户端则保举以大分辨率来设计，）同时考虑横屏情况下的响应。

2. 触屏手机的特点是直接通过手指操尴尬刁难象，因此必须要为网站设定一个理想的行高来知足手指的触摸点击。

来自ccxcncom 的一份关于触屏点击尺寸数据：食辅导击的间距约为7*7 mm，1mm间距。

拇辅导击的间距约为8*8 mm，2mm间距, 当前保举值为9mm，最小应不小于7mm。

列表选项之间距离最小应不小于5mm。

在设计过程中必须要将毫米换算成像素，不同尺寸的屏幕分辨率换算的效果也不一样，换算方式详见（DPI和像素、厘米、英寸之间的关系和换算及CSS中的长度单位） 笔者认为：可按5mm为最低标准设计，使用率较高的可根据测试情况加大。

触屏手机的特点是直接通过手指操尴尬刁难象

3. 手机的硬件和网络环境与PC相比还有较大差距，因此手机网站必须要高度优化页面性能：

尽量控制页面文件大小，避免使用过多图片，规范html和css  css压缩工具，尽量削减服务器请求，使用css spirit 某些特定css 可直接写在页面文件里…. 关于页面性能的详细优化并非三言二句能讲述清楚，这里只做抛砖引玉，迎接增补。

二、体系

·UI style ·flash

1. iOS和Android OS在设计风格和交互上有较大差异，假如考虑一套UI同时适用多个平台，（网站可跨平台使用，跟APP相比削减了开发和维护成本）在设计时要避免过大的风格误差和交互上的冲突及误导。

2. iOS不支撑flash，JAVA，SVG，Android OS 支撑flash10.1以上版本，建议使用gif动画.

三、欣赏器

·功能条·缓存·HTML & CSS·javascript

1. iphone欣赏器自带有功能条，填补了硬件上的功能缺陷。

这里分外介绍下iOS的一个特点，可将网站添加到桌面，并生成一个APP图标：

icon.png图片为方形，尺寸57px*57px，iphone4 114*114。

欣赏器 

2. 这里将缓存分为组件缓存和页面缓存，组建缓存是指网站元素：图片、CSS、javascript等，页面缓存是整个页面作为单独实体来存储，在页面设计开发时要注重组件和页面不超过欣赏器的缓存大小：



3.在PC端上显得遥遥无期的html5 和css3在移动终端率先登场，下面介绍几个实用的css3

渐变：webkitgradient(linear, left top, left bottom, color-stop(0.3, rgb(255,255,255)), color-stop(0.75, rgb(239,242,252)));

圆角：-webkit-border-top-right-radius: 4px;

高级选择器：.list > p:last-child a{} background-image:

避免重力感合时笔墨随分辨率增大而增大：-webkit-text-size-adjust: none;

屏蔽输入框默认圆角和阴影：-webkit-border-radius:0;-webkit-appearance:none

去除下拉框默认样式：-webkit-border-radius: 0; -webkit-appearance: none;

Safari官方：html css

4. javascript

隐蔽欣赏器地址栏：window.addEventListener(‘load’, function(){setTimeout(function(){window.scrollTo(0, 1);}, 100);});

手机识别：var isAndroid = navigator.appVersion.toLowerCase().indexOf(‘android’) >

= 0,isIphone = navigator.appVersion.toLowerCase().indexOf(‘iphon’) >= 0;if (isAndroid){window.location.href = ”XXX.html”;}

Iphone全屏表现：

四、网络

·GPRS·3G·WIFI

1.从速度和资费来看，GPRS是最慢最贵的移动上网方法，该网络环境下页面瘦身无疑是最睿智的选择，建议页面文件大小不超过25K （GZIP后）详细测试数据不做赘述。

2.3G卡速度接近甚至有的超过WIFI上网速度，但同样存在资费问题。

3.WIFI我们可以理解是移动终端通过无线路由连接固定宽带的一种上网方法，资费和速度等同于用PC访问网站的成本。