触屏手机网站-炫版交互设计

标签: 触屏 手机 网站 | 发表时间:2011-05-23 10:57 | 作者:bill Qing
出处:http://ucdchina.com/rss/all

触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别。

手机网站常用交互功能之“信息连接”:

竖屏状态:(图1)

(图1)可见 3G门户高端炫版的信息链接响应高度约等于其它门户的3倍,物理响应高度约为5.56mm,这个值接近手指点击区域,而且信息之间增加了线间隔,提升点击体验。可能有些人会问为什么响应区域不可以再大一些,因为手机屏幕虽然增大,但内容和PC网站相比还是少很多,为了一屏展示更多的内容给用户,减少用户操作成本,我们经过可用性测试后这个值相对误点率较低,而且保证了一屏充足的内容显示。

——————————————————————————————————————————–

横屏状态:(图2)

为了适应不同的屏幕大小和增加阅读体验,各门户会设置重力感应效果(既是手机横放状态)(图2)我们看到在重力感应状态下,sina无自适应手机屏幕,网易和搜狐会有局部的适应,这样在单手操作时,左右区域会形成手指点击盲区,而3G门户炫版可以在响应的平行区域任意点击,更符合单手操作体验。

——————————————————————————————————————————–

手机网站常用交互功能之“翻页”:

(图3)

(图3)各门户高端版的翻页模块还是沿用非触屏手机的模式,有“下一页” “余下全文” “页码”,如果当页码超过一定数量时,会换成“跳转到第几页”,不知道大家用触屏手机点击这个区域会不会需要更加细心一些,因为担心误点。

我们来看看3G门户炫版,在做翻页模块之前我们访谈了30位触屏手机用户(反应用户行为这个量是足够的)结果如下:

1、  有26位用户表明看新闻内容的时候没有跳跃性的浏览(即没有选择页码的习惯)

2、  有2位用户表明偶然会使用,

3、  有2位用户表明有跳跃性浏览的习惯

4、  全部用户都会使用的是下一页和余下全文

所以从访谈结果分析后我们去除了页码(特殊产品除外),减少下一页和余下全文的点击干扰,把下一页放置在右边,因为使用非触屏手机的时候是从左开始选取所以放左边比较方便用户,但触屏手机不受这个限制离右手拇指最近的是右边。触屏手机屏幕增大页面显示的内容相当等于非触屏网站的2-3倍,页码作用也相应减少。

(图4)

(图4)3G门户炫版在首页增加“显示更多资讯”的翻页交互功能,让有需要看更多信息的用户可以在原页面直接下拉显示。

当然3G门户炫版还有很多不足的地方,我们也一直为达到更好的触屏体验而努力,如果对炫版感兴趣的同学请用以下方式浏览

为了达到完美效果请用手机自带浏览器登录 xuan.3g.cn

PC电脑登录http://pc.3g.cn/ 浏览PC版

相关话题:移动设备的交互和设计 源地址:http://ued.3g.cn/?p=205

相关 [触屏 手机 网站] 推荐:

触屏手机网站设计

- Ray ma - 互联网的那点事...
随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website. 触屏手机网站在中国还属于起步阶段,从行业的现状来看,其体验参差不齐,笔者将从设备、系统、浏览器、网络、四个维度来与大家共同探讨触屏手机的网站设计:.

触屏手机网站-炫版交互设计

- Qing - 所有文章 - UCD大社区
触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别.

【新闻】搜狐微博推出全新手机HTML5触屏版

- - HTML5研究小组
近日,搜狐微博全力推出手机微博触屏版(w.sohu.com/m),该版采用最新HTML5技术,全新的视觉设计,让你在网页上享受超越客户端的用户体验. HTML5是一种技术标准,被业界视为未来移动应用的重要趋势,HTML5从根本上改变了开发商开发web应用的方式,从桌面浏览器到移动应用. 这种语言正在影响并将继续影响着各种操作平台.

触屏手机点击区域的小秘密

- - 博客园_新闻
做触屏手机产品设计,要注意所有的可点击元素都有足够的点击区域,但是这并不是说你要把所有的按钮图标链接都设计的足够大,手机上的视觉焦点和操作焦点是不一样的,操作焦点是可被放大或移动的点击区域. 这里分享几个点击区域的小秘密,帮你解决操作准确率的问题. iPhone 自带的控件 NavigationBar 上的 Button、TabBar 上的 Item、ToolBar 上的 ButtonItem,实际的点触区域都是被放大了的.

[来自iPc.me] 诺基亚发布给力新机皇N9手机,全触屏无按键MeeGo系统!欲借其重新崛起?

- shubeta - iPc.me
在刚刚的新加坡Nokia Connection大会上,诺基亚发布了诺基亚N9,首款纯触摸屏智能手机,让一切变得更简单. 诺基亚N9的设计围绕人们最重要的事情:应用程序、动态更新、多任务间的切换. UI的操作由一个简单的手势代替……. [ 请大家更新订阅地址 http://feed.ipc.me ].

智能手机的又一电池杀手:网站代码

- - 爱范儿 · Beats of Bits
如果你经常泡智能手机论坛,你会发现几乎每个手机论坛都会有一个类似的经典帖子,帖子标题通常是《如何让你的 ××× 待机超过两天》《××× 省电大法》等等……再看看这类帖子的发帖时间,你会发现它们历史都比较久远,并且回复量大、经久不衰是它们的一致特点. 而这些帖子的内容都大同小异:必有的是关闭 3G,关闭蜂窝数据,关闭定位服务,调低屏幕亮度,稍稍高级点的就是删进程,关后台等等.

极佳的手机网站设计案例

- - ITeye博客
 如果你是一个网站所有者自己,你应该想想 你的网站有一个 移动版本,这应该是下一步的行动,在我看来你未来的计划的人使用他们的手机访问互联网的人数与日俱增.     建立 一个网站的移动版本这并不复杂,你只需要一些技巧,这些可以很容易地在互联网上找到,但你应该挑其设计的想法. 如果你没有什么灵感,这一篇可以帮助你一点.

移动端手机网站优化的11个注意事项

- - 互联网分析
从事网络营销的人员不会否认,移动互联网营销是一个大的趋势, 但是怎么样去做恐怕还都一筹莫展. 由PC端的网络营销的经验和常识来看,首要的是要做好移动端手机网站的优化工作. 据小生的观察以及众多互联网的数据分析 来看,目前国内的大多数并没有做好手机网站的优化,有的只是由PC端网站copy成简单的移动版本的wap网站,基本没有做优化.

手机网站开发及手机中图片加速显示img的Canvas方法

- - CSDN博客Web前端推荐文章
    随着手机开发越来越流行,手机开发的很多框架也应运而生,比较好用的手机网站开发框架推荐如下:.     1、zeptojs,里面封装了很多手机特有方法,例如touch.js等等. 和jquery用法差不多,很好上手. API地址:http://zeptojs.com/#$.extend.     2、jquerymobile   演示地址:http://jquerymobile.com/.

推荐手机程序的网站,对下载量有帮助吗?

- sylvia - 爱范儿 · Beats of Bits
手机应用程序的推荐网站正如雨后春笋般地涌现了. 这类网站的作用,就是从几十万款手机应用程序中,推荐出最好的程序给用户. 虽然 iTunes App Store 和 Android Market 都有自己的推荐功能,但这类网站是独立于商店之外的. 现在 iTunes App Store 拥有 225,000 款程序,Android Market 也拥有近 100,000 款.