前端笔记 | 触屏手机网站设计

触屏手机网站设计

发布于 2012-08-24 由 liudy 发布于 UI

随着智能手机 iphone 和 Android 的热潮，衍生出基于 Safari 和 Chrome 浏览器的触屏手机网站 Touch Screen Mobile Website。

触屏手机网站在中国还属于起步阶段，从行业的现状来看，其体验参差不齐，笔者将从设备、系统、浏览器、网络、四个维度来与大家共同探讨触屏手机的网站设计：

一、设备

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

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

2、触屏手机的特点是直接通过手指操作对象，因此需要为网站设定一个理想的行高来满足手指的触摸点击。

来自 的一份关于触屏点击尺寸数据：
食指点击的间距约为 7*7 mm，1mm 间距。
拇指点击的间距约为 8*8 mm，2mm 间距, 当前推荐值为 9mm，最小应不小于 7mm。
列表选项之间距离最小应不小于 5mm。

在设计过程中需要将毫米换算成像素，不同尺寸的屏幕分辨率换算的结果也不一样，笔者认为：可按 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 图标：

1	<link rel="apple-touch-icon" href="icon.png" />

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

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

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

渐变：

1 2 3

.gradient {     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(255,255,255)), color-stop(80%, rgb(212, 212, 212))); }

圆角：

1 2 3

.radius {     -webkit-border-top-right-radius: 5px; }

高级选择器：

1 2 3

.list > p:last-child a {     color: #0085CF; }

避免重力感应时文字随分辨率增大而增大：

1 2 3

.adjust {     -webkit-text-size-adjust: none; }

屏蔽输入框默认圆角和阴影：

1 2 3 4

.input{     -webkit-border-radius: 0;     -webkit-appearance: none; }

去除下拉框默认样式：

1 2 3 4

.select {     -webkit-border-radius: 0;     -webkit-appearance: none; }

4、JavaScript

隐藏浏览器地址栏：

1 2 3 4 5 6 7

window.addEventListener('load', function() {     setTimeout(function() {         window.scrollTo(0, 1);     },     100); });

手机识别：

1 2 3 4 5

var isAndroid = navigator.appVersion.toLowerCase().indexOf('android') >= 0, isIphone = navigator.appVersion.toLowerCase().indexOf('iphone') >= 0; if (isAndroid) {     window.location.href = "XXX.html"; }

Iphone 全屏显示：

1	<meta name="apple-mobile-web-app-capable" content="yes" />

四、网络

• GPRS
• 3G
• WIFI

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

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

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

根据以上 3 种网络我们可以做一些适配为用户提供最适合的体验。

原文：http://ued./