触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,团购门户也分别推出适应触屏手机的高端版本。 左图触屏版 右图非触屏版(按钮控件) 下面我们从设计的角度进行分析:
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。
在设计过程中需要将毫米换算成像素,不同尺寸的屏幕分辨率换算的结果也不一样,换算方法详见(DPI和像素、厘米、英寸之间的关系和换算及CSS中的长度单位) 领团网(互联网)设计师认为:可按5mm为最低标准设计,使用率较高的可根据测试情况加大。
|