触屏手机3G网站设计
随着智能手机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. 触屏手机的特点是直接通过手指操作对象,因此需要为网站设定一个理想的行高来满足手指的触摸点击。
来自lukew.com 的一份关于触屏点击尺寸数据:
食指点击的间距约为7*7 mm,1mm间距。
拇指点击的间距约为8*8 mm,2mm间距, 当前推荐值为9mm,最小应不小于7mm。
列表选项之间距离最小应不小于5mm。
在设计过程中需要将毫米换算成像素,不同尺寸的屏幕分辨率换算的结果也不一样,换算方法详见(DPI和像素、厘米、英寸之间的关系和换算及CSS中的长度单位) 笔者认为:可按5mm为最低标准设计,使用率较高的可根据测试情况加大。
手机输入xuan.3g.cn体验 3G门户炫版
3. 手机的硬件和网络环境与PC相比还有较大差距,因此手机网站需要高度优化页面性能:
尽量控制页面文件大小,避免使用过多图片,规范html和css css压缩工具
尽量减少服务器请求,使用css spirit 某些特定css 可直接写在页面文件里….
关于页面性能的具体优化并非三言二句能讲述清楚,这里只做抛砖引玉,欢迎补充。
二、系统
·UI style
·flash
1. iOS和Android OS在设计风格和交互上有较大差异,如果考虑一套UI同时适用多个平台,(网站可跨平台使用,跟APP相比减少了开发和维护成本)在设计时要避免过大的风格偏差和交互上的冲突及误导。Guidelines详见:
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;
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(‘iphone’) >= 0;
if (isAndroid)
{
window.location.href = ”XXX.html”;
}
<meta name=”apple-mobile-web-app-capable” content=”yes” />
四、网络
·GPRS
·3G
·WIFI
1.从速度和资费来看,GPRS是最慢最贵的移动上网方式,该网络环境下页面瘦身无疑是最睿智的选择,建议页面文件大小不超过25K (GZIP后)具体测试数据不做赘述。
2.3G卡速度接近甚至有的超过WIFI上网速度,但同样存在资费问题。
3.WIFI我们可以理解是移动终端通过无线路由连接固定宽带的一种上网方式,资费和速度等同于用PC访问网站的成本。
根据以上3种网络我们可以做一些适配为用户提供最适合的体验:
转载请注明:触屏手机3G网站设计 - 编程知识库
上一篇:banner广告设计要素
您可能还会对这些文章感兴趣
2016-12-21 804次箭头符号:一个最常见却不容忽视的图标
箭头符号可能是人类图形史上最伟大的创造。是的,这只是一个箭头,一个最常见不过的图标,但如何把它放在合适的位置,如何不过度的滥用这个符号,却是我们每一位设计师不得不每天面对的问题。 足够简单的图形承载着丰富而又抽象的概念。如果追溯起来,箭头符号的现...
2016-03-23 5,395次移动手机段前端开发资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format...
2016-01-08 21,855次移动端前端框架UI库(Frozen UI、WeUI、SUI Mobile)
Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架。 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https://github.com/frozenui/frozenui Demo:http://frozenui.github.io/frozenui/demo/index.html WeUI 自述:WeUI是一套同微...
2015-01-14 21,634次iPhone6和iPhone6 plus的iOS8设计尺寸规范
不管怎样,我们要相信土豪还是多的,iPhone6和plus出来后,道长就苦苦追寻iOS8在i6和plus下面的设计尺寸,百度是找不到的,问过好几个开发群,也没有收获,幸好认识一位加州的伙伴,他给了我两个连接,简单粗暴,让我突然觉得幸福就这么简单,哈哈哈。为了不让伙伴们...
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback