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

天宇w0

天宇w0

2016-02-17 03:11

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

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

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

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

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

竖屏状态:

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

(图1)

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

横屏状态:

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

(图2)

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

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

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

(图3)

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

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

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

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

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

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

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

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

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

(图4)

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

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

展开更多 50%)
分享

猜你喜欢

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

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
触屏手机网站和非触屏手机网站的区别

手机网站与普通网站的10个区别

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
手机网站与普通网站的10个区别

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

触屏手机危害大

养生
触屏手机危害大

手机网站的UI设计概述

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
手机网站的UI设计概述

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

手机网站中的架构和流程设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
手机网站中的架构和流程设计

手机网站上信息的有效传达

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
手机网站上信息的有效传达

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

网站用户注册的动机与目的

网站用户注册的动机与目的

分析淘宝首页焦点图中的用户体验数据

分析淘宝首页焦点图中的用户体验数据
下拉加载更多内容 ↓