交互设计实例:触摸屏手机信息连接和翻页的设计

文章描述:触屏手机网站-炫版交互设计.

触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为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版

时间: 2024-08-30 07:39:47

交互设计实例:触摸屏手机信息连接和翻页的设计的相关文章

移动交互设计实例:触摸屏手机输入交互设计

文章描述:触摸屏输入的交互设计. 触摸屏手机输入时会在界面绘制虚拟键盘,用于输入字符,可以使用在所有应用程序中.特别是在短信和邮箱等需要频繁输入文字时,其输入速度直接影响用户操作效率. 缺点 但是同样全键盘输入,触摸屏没有物理按键效率高,原因在于: 1.输入法需要定位手指的位置,比如双手操作电脑键盘时,左手食指中指定位在F键,右手中指定位在J键,而触摸屏无法像按键的凸点或者输入感觉定位,难以形成高效的盲打. 2.触摸屏本身点击没有物理按键精准,触摸屏点击目标区域没有真正点击到目标区域,偏向目标正

用户体验设计:为访问不同分页提供翻页控制

网页制作Webjx文章简介:搜索翻页(Search Pagination)_Yahoo_Pattern(翻译). 原文地址: http://developer.yahoo.com/ypatterns/navigation/pagination/search.html 当搜索返回的结果太多,无法显示在一页上时,将信息拆分进一系列的页中. 用单行链接的方式来实现翻页控制,可以让用户浏览更多的结果,而不是将结果都显示在一页中. 解决什么问题? 用户需要查看按相关度排序但是又无法简单的放在一页当中的搜索

交互设计实例:sohu的widget开放平台的气球设计

曾经在sohu的开放平台上做过一些小的widget,其实这些widget已经是很久以前的事了,只是最近在看站点访问量时,还是想应该把这段记录下来.故事虽然很小,甚至都不算是产品,但是过程也许多少还能给人一些启发吧. 当时,对产品设计很多的思考来自于观察普通用户的行为,但苦于不能验证这些用户的感觉是否到位.sohu的widget开放平台已经建立了一段时间,于是萌生了业余时间做个小的widget,一来测试一下平台的传播性,另一方面可以通过数据更好地提高自己对用户的理解. 一. 飘扬的汽球 背景: 当

.net/c#的DataGrid控件根据条件筛选信息过后的翻页问题

问题描述 我的一个页面的查询条件是查询"径赛"类的赛事,但是只有第一页才是符合条件的径赛类赛事,点第二页的时候就成田赛和径赛都有的页面了,设置是一页显示5条,但是径赛类信息多余5条.不能显示全部.代码是pButton1_Click(objectsender,System.EventArgse){stringstrConnection="Provider=Microsoft.Jet.OLEDB.4.0;";strConnection+=@"DataSourc

《数字逻辑设计与计算机组成》一 2.8 设计实例

2.8 设计实例 在第1章中讨论过,一个数据通路包括许多电路模块.本节我们将讨论一些常见的但是比较小型的组合电路模块.在第1章中图1-1中所示的"选择器"模块也被叫作多路转换器.其他将讨论的实例包括简单的加法器.译码器和编码器模块.1位加法器,也叫作全加器(FA),产生两个1位输入的和,并输出一个0或1的传位进位.译码模块将数字A(0.1.2等)转换成对应的输出信号(例如,f0.f1.f2等).任何时候都只有一个输出f0.f1等是有效的.另一方面,编码器所做的工作是译码器的逆向工作,将

交互设计实例:手机界面中常用的导航方式

文章描述:手机界面常用导航设计分析. 所谓的交互设计,其实设计的就是人如何向机器发送指令,机器如何向人传达信息,一来一往是为交互.当要传达的信息量很少时,好办,就像Google的搜索框那样,往白底上一放就行了.但当等到信息是海量的.在一屏上难以全部呈现时,就需要有效地组织信息,将部分信息先隐藏起来,待到用户需要时再将用户引导到那里.在界面设计中,广义地来讲,从一组信息向另一组信息转移的的过程,就称之为导航. 明确了定义,我们就该知道,一个好的导航设计应该让用户明白: 现在在哪儿 以前去过哪儿 将

手机网站交互设计中的信息设计

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

手机客户端交互设计原则及信息展现方式

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

产品交互设计实例:首都机场的点烟器

文章描述:产品交互设计实例:首都机场的点烟器. 首都机场的吸烟室里并不像其他机场那样放几个固定的打火机,而是点烟器,和车载点烟器基本是一样的:先按下加热,加热好后,它会自动弹起,拔出来,里面的电阻丝已经是红红的了,就可以点烟了.上图为车载点烟器,与首都机场的点烟器一样,加热过程中只是被按下去了,未显示进度,也未能形象的表现出"正在加热"的含义. 我走到点烟器的近前,按下,让它加热,然后等待,等了一会儿还不见动静,不知是仍在加热还是出了故障.吸烟室里很多人,感觉自己被别人看着,不会用这玩