触屏手机网站和非触屏手机网站的区别

2016-02-17 03:11 10 1 收藏

图老师小编精心整理的触屏手机网站和非触屏手机网站的区别希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - 平面设计 】

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

触屏手机网站和非触屏手机网站的区别,PS教程,图老师教程网

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

竖屏状态:

触屏手机网站和非触屏手机网站的区别,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

(图1)

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

横屏状态:

触屏手机网站和非触屏手机网站的区别,PS教程,图老师教程网

(图2)

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

触屏手机网站和非触屏手机网站的区别,PS教程,图老师教程网

(图3)

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

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

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

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

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

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

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

触屏手机网站和非触屏手机网站的区别,PS教程,图老师教程网

(图4)

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

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

来源:http://www.tulaoshi.com/n/20160217/1577948.html

延伸阅读
标签: 手机 智能手机
解决触屏失灵方法一 1、关闭手机,取出电池,手机静置五分钟左右; 2、找一根USB数据线,连接手机; 3、洗手,或者把手弄湿; 4、湿手状态下同一只手的拇指接触USB线另一端的金属部分,食指按到地上两秒左右; 5、拆开后盖我们可以看到一个小小的金属块在电池仓隔壁,这就是手机震动的发生器,俗称震子。由于它也是直接连...
标签: 手机 健康常识
现在的智能手机几乎成为人们的终身伴侣,而且亲密无间,5分钟都不能分离,如果5分钟找不到手机,比丢了媳妇还着急,人们对手机已经到了非常依赖的程度,而且手机也已经深入到生活的各个领域,连打的士、做公交刷卡、吃饭点餐、唱卡拉OK等等都要用手机,因为它是在是太方便了,只要动动手指,一切尽在掌握之中。 触屏手机到底有多脏...
标签: iphone
【iPhone手机触控屏没有反应如何解决】 1、首先同时按下“睡眠/唤醒”(Sleep/Wake)和Home按键,直至看到屏幕显示苹果标识,重启iPhone 6。 2、部分用户通过依次选择“设置”(Settings)->“一般”(General)->“重置”(Reset)->“重置所有设 置”(Reset All Settings)解决了问题。 3、用户需要重新输入密码、...
触屏手机优势凸显 另类绘图软件推荐 现在的触屏移动设备都拥有着一块反应灵敏的屏幕,所以在触屏设备上也会出现很多不错的图片编辑或者绘图软件。还记得以前在Symbian OS机型上弄绘图软件吗?五维导航键控制方向,然后按下去做笔迹。不说麻烦不麻烦,一张图弄下来估计手机导航键也快报废了,所以那样的手机根本就不能拿来作图。不过随着触...
当你第一次打开一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响到后续的产品使用体验。因此各个公司都在努力将这几个页面设计好,从一开始就引人入胜。那接下来我跟大家一起来探讨关于引导页的设计。 一、 目的区分根据引导页的目的、出发点不同,可以将...

经验教程

442

收藏

85
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部