交互细节分析,本地存储和内容按需加载的思路
分类:互联网

原文作者对维姆莱的主张存在一些误解,相信看过视频的同学都能有所体会。感谢果壳网友“猪了个去”做出了澄清,有兴趣了解更多的同学可以阅读他的文章:

误解粉碎机:翻页浏览和滚动条 被虚构的恩怨情仇

•   可提供批量翻页(如,下10页);

用 textareas 取代 contenteditable

iPhone和iPad浏览器不支持contenteditable元素。

点评:本文将着重介绍HTML5本地存储和内容按需加载的思路和方法,以及HTML5视频技术的效果。LOL官网采用的减少加载量的方法,在首页上为用户节省了至少600K的下载量,同时大大减轻了服务器的负载。

“页码跳转”的浏览方式在平板电脑表现不错,但是想要在普通电脑上有所突破还有很多问题,至少首先要解决一个路径依赖的问题。作为用户,你更倾向于哪种浏览方式?

二、 信息滚动翻页

CSS3媒体查询

对于CSS3的媒体(media)查询,iPhone和iPad是不同的。通过这个技术,可以对设备不同的握持方向应用不同的样式,增强功能和体验。

iPhone是通过屏幕最大宽度来侦测的。是这样:

<link rel="stylesheet" media="screen and (max-width: 320px)" href="portrait.css" />  <link rel="stylesheet" media="screen and (min-width: 321px)" href="landscape.css" />

而iPad有点不同,它直接使用了媒体查询中的orientation属性。是这样:

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css" />  <link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css" />  <!--注意:如果两种样式表有显著地区别的话,这会分散用户注意力,所以这并不是必须要的组件。-->

之后只要将不同的样式分别定义出来就可以了。

> CSS选择符

我们在编写CSS时,会有很多的选择符,但不同的写法,页面在渲染时的效率是不一样的。根据匹配规则,浏览器会从右至左匹配对应的元素。比如.header li a{},在渲染时,浏览器会先遍历页面内所有的a标签,再遍历这些a标签谁在li标签内,然后再去找他们谁在.header下,这样效率其实很低,而且开销很大。其实我们可以对这些a标签直接写个类名.header_lnk{},这样浏览器渲染时一下子就可以找到,避免再去翻箱倒柜。另外.header .header_lnk{}也是没有必要的,直接写.header_lnk{}效率更高,我们为什么还要浏览器多过滤一次呢?

 

不过可能上面的问题并不是真的问题,因为维姆莱的方法仅仅改变的是网页排版,网页内容依然是个整体。把网页浏览改为翻页的形式实际上只是将纵向滚动变成了横向滚动。

•   新浪微博信息列表翻页用户心智模型:

iPad开发的局限性

  1. 在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现这样做并不方便,给用户带来的感受并不十分好。
  2. 不支持Flash在没有越狱的iPad Safari中,网站的Flash都是无法显示的,但可以通过第三方软件或插件或者浏览器来解决,不过,即使不能显示Flash,你一样能够用HTML5和CSS3实现同样的效果。
  3. 没有鼠标光标这意味着鼠标属性,例如鼠标悬停属性是不可能有的。你或许可以为这个找到一些变通的办法,但是到你的用户那里这些该如何工作将会是困难的事。
  4. 滚动条不能按照预期那样起作用滚动条不能显示包含了充满过多分区的内容。框架也存在高度和宽度的问题。另外,滚动过程中需要两个手指的手势。(我们将在下文中进行充分的讨论)
  5. 不支持CSS固定布局HTML 元素 position:fixed CSS属性不能正确显示,常常会使得页面停留在第一屏,无法向下翻页、放大缩小。

> 更快的数据解析方式

我们通常使用json或者XML的方式来存储大量数据。《高性能Javascript》一书中介绍了一种自定义格式,并测试出自定义格式是解析最快的。其方法是使用符号来间隔数据,比如var test=”1,2,3,4”,然后使用split(“,”)来方法来获取各个数据。LOL官网就是用这种方式在本地存储的数据。

 

Google尝试将浏览器的网址栏取消,苹果公司在OS X Lion系统中默认隐藏进度条,CSS(层叠样式表)的创始人维姆莱(Håkon Wium Lie)甚至希望完全取消滚动条,大家这是怎么了?

3) 没有规定横向的一定是翻页,纵向的一定是滚动条,可以发散开来:横向为滚动条,纵向翻页,但此种方式似乎不便于操作。

模拟:hover伪类

因为iPhone并没有鼠标指针,所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件,onTouchStart 类似 onMouseOver,onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript:

var myLinks = document.getElementsByTagName('a');  for(var i = 0; i < myLinks.length; i  ){     myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);     myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);  }

然后用CSS增加hover效果:

a:hover, a.hover { /* 你的hover效果 */ }

这样设计一个链接,感觉可以更像按钮。并且,这个模拟可以用在任何元素上。

> 谷歌平台

对于Android系统的手机和平板电脑,并不需要做任何多余的事情,只要你的页面符合标准,因为Android手机本身就支持Flash,经过我的测试,LOL官网在HTC Desire下的浏览完全正常。

 

图片 1

•   页面过长时须提供“回到顶部”按钮;

阻止旋转屏幕时自动调整字体大小

-webkit-text-size-adjust是webkit的私有css:

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

 

信息及图片来源: dvice

通常情况下用户按“下一页”的情况最多,那么上页样式可以更简单些;

侦测设备旋转方向

iPhone可以在横屏状态下浏览网页,有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转,并且替换css:

window.onload = function initialLoad() {updateOrientation();}  function updateOrientation(){   var contentType = "show_";   switch(window.orientation){    case 0:     contentType  = "normal";     break;    case -90:     contentType  = "right";     break;    case 90:     contentType  = "left";     break;    case 180:     contentType  = "flipped";     break;   }   document.getElementById("page_wrapper").setAttribute("class", contentType);  }

HTML5自打出生就注定要开始它不平凡的一生,各大科技公司都对其寄予厚望,并纷纷进行尝试。苹果、谷歌、微软陆续推出HTML5展示页面,各大视频网站也相继宣布支持HTML5视频技术,HTML5地理定位技术更如雨后春笋,在国外社交网站得到应用。

有人可能觉得维姆莱想要取消滚动条一定是疯了,毕竟改变用户操作网页的习惯是相当有挑战性的。维姆莱之所以支持此行为,有两个原因:网页内容无法恰好适合浏览器的窗口,顶部或底部的图片可能会被浏览器截断脖子;而且,打印网页会比较麻烦。维姆莱试图用CSS生成的分页媒体内容,也就是用页码翻页来取代滚动条。类似于苹果的iBooks应用的呈现方式、或者PPT幻灯片的动画切换,他们将内容完整的呈现在整个页面上,就像一本翻开的书,相比滚动条而言更加吸引人。

但最多提供20个页码;

iPad网络应用程序

    * 新兴的编码标准:HTML5,CSS3,JavaScript正在为网络带来令人惊奇的客户端功能;特别是本地/离线存储功能。      * 站点可以对任何浏览器进行定制:根据你的用户所操作的设备或浏览器切换样式表或重定向网页都。它可以使您的应用程序具有通用性。      * 开发简单:使用HTML,CSS和JavaScript创建iPad网络应用程序代替学习新语言。这些技能你应该已经具备了。      * 史蒂夫 乔布斯不能审查你的网络程序:网络是一个开放平台–意味着你皆在自己的掌控之中,不需要等待苹果商店的批准通过。      * 小众的市场,没有足够的支持:网络应用程序需要众多的力量,不仅需要吸引用户也需要开发者参与。

> HTML5本地存储

简单的说,本地存储就是为网页通过客户端网页浏览器在本地存储键值对的一个方法。就像Cookie,就算你离开了网站,关闭了浏览器标签,退出浏览器等等,数据也会一直存在。与Cookie不同的是,数据绝不会向遥远的网络服务器传送(除非你使用其他方法来手动传输)。不同于提供长期本地存储的上述所有尝试,它在网页浏览器内以原生的方式执行,因此在第三方浏览器插件失效的情况下它也能有效执行。

我们对于支持HTML5的浏览器(Firefox、Chrome、Safari、Opera等),使用HTML5的localStorage提供的方法;对于IE浏览器,使用IE提供的userData方法;对于其他浏览器使用常规方法加载内容。

图片 2

IE的本地存储数据

userData是IE提供的一个本地存储方法,他将需要存储的内容放置在本地的一个XML文件中,并在页面的一个元素中设置一个调用的锚点。具体使用方法为:使用getElementById获取页面内的一个元素,使用addBehavior(“#default#userData”)对其添加本地存储的行为;使用setAttribute将需要存储的内容对其进行赋值,并用save(“XXX”)方法将内容存储在名为XXX的XML文件中;使用load(“XXX”)方法加载本地的XXX.xml文件,并用getAttribute获取已经存储的内容。

图片 3

Chrome的本地存储数据

关于HTML5本地存储localStorage的详细方法,请参见HTML5 Web存储。我的一个翻译文档《网络应用程序本地存储的前世今生》也会稍后在博客放出。

 

对于具体实现上,我的做法是:先判断本地是否存在已存储的内容,如果没有数据或者版本已过期(版本其实是我设置的一个变量,当修改这个变量时即为版本过期),加载相应的JS数据,通过一个函数将数据处理为需要的格式,然后存储在本地;如果有且版本没过期,直接从本地获取数据。接着将数据通过函数进行进一步的处理,插入相对应的结构中。

官网中,导航、合作媒体、健康游戏公告、脚部声明、免费英雄均采用本地存储,将数据存储在用户的电脑中。

其中导航、荣誉墙、合作媒体、健康游戏公告、脚部声明这5个静态板块的本地存储应用一共节省了10多K(IE的本地存储文件实际有30K,是因为IE对内容中的字符进行了转义,以符合XML的规则)的下载量。

免费英雄板块属于动态板块,里面的数据是通过游戏提供的一个json文件来获取的(包含游戏里所有英雄的数据,每周的免费英雄都会不同),将其本地存储后,节省了500K的下载量。只是在每周一免费英雄修改时,会重新下载一次。

 

用翻页取代滚动条的方法可能存在一些问题。首先,用户无法快速浏览整体内容,滚动条可以让用户快速浏览网页内容筛选有效信息,浏览纸质书本是件很容易的事,但用翻页的方法浏览电子书就不那么容易了。另外,用户更希望在一个连续的流动的文本界面上看到自己搜索的全部内容。

滚动翻页与翻页的结合使用;

缩小图片

网站的大图通常宽度都超过480像素,如果用前面的代码限制了缩放,这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够,我们可以用CSS让iPhone自动将大图片缩小显示。

@media screen and (max-device-width: 480px){     img{max-width:100%;height:auto;}  }

注意如果原图片非常大,或一个页面非常多图,最好还是在服务器端缩放到480像素宽,iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。

> 轮播广告按需加载

以往轮播广告的加载模式是一次性全部加载,虽然采用延迟加载,但用户可能不会浏览到所有的轮播广告。当用户在首页只停留5秒时(LOL官网首页轮播广告设置的是5秒切换一次),第二张广告图片以后的图片加载就没有必要了。

LOL官网首页采用的方式是,第一次加载第一张广告图片,当5秒后,判断第二张图片是否加载过,如果没有,加载第二张图片,以此类推。这样,如果用户在首页停留时长只有14秒,那么就节省了第4、5张广告图片的下载量,大约有100K左右。

 

关于维姆莱的主张可以参考这个视频:

用iScroll控制你的触摸滚动

这是一个简单且最有用的源码,能够帮助你控制你的网络应用程序。由Matteo Spinelli创作,iScorll是一个开发项目,因为网络浏览器引擎Webkit工具套件(用于iPhone,iPod,iPad,Android 以及Palm上)不提供本地方式去滚动文章内部一个固定的高度/宽度元素。

这种不幸的情况防止任何Web应用程序有一个头和/或页脚的 position:absolute CSS属性,并滚动中心区域的内容。

iScroll代码非常易于使用。如果你喜欢iScroll,你需要这些类似的jQuery插件:jQuery Swipe和JQTouch。

> 一些小技巧

 

iPhone/iPad才识别的CSS

如果不想设备侦测,可以用CSS媒体查询来专为iPhone/iPod定义样式。

@media screen and (max-device-width: 480px) {}

> 苹果平台

图片 4

iPad下的引导页

对于iPad和iPhone,主要问题是其不支持Flash。LOL官网有两处,一是引导页的视频,二是首页的下载按钮。实现起来很简单,使用JS判断浏览器信息(navigator.userAgent),如果是iPad和iPhone,使用HTML5视频技术替换引导页的Flash播放器,屏蔽首页的Flash下载按钮的插入,保持其为一个a标签的链接。具体方法请参见我在御龙在天官网改版时的文档《御龙在天的iPad之路》。

 

•    “上一页”“下一页”位置固定;

默认隐藏工具栏

iPhone的浏览器工具栏会在页面最顶端,卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间,特别是横向屏幕时。我们可以让它自动卷动上去。

<script type="application/x-javascript">     addEventListener("load", function()     {        setTimeout(hideAddressbar, 0);     }, false);     function hideAddressbar()     {        window.scrollTo(0, 1);     }  </script>

> 页卡内容按需加载

对于新闻页卡,以往的方式是使用include载入,并将看不到的页卡隐藏掉。但如果用户并没有切换到其他页卡,那么直接加载这些页卡的内容就是不必要的。

图片 5

触发加载页卡内容

LOL官网首页页卡采用的方式是,只加载第一个可见页卡的内容。当用户点击切换页卡时,再加载对应页卡的内容。包括导航和荣誉墙这两个部分,虽然是从本地加载数据,但也是用户触发后才插入到相应结构的。这样不仅减少了一定的下载量,也减少了一部分浏览器的渲染工作。

 

•   是否会查看已翻过的翻页?

触摸式交互

外接硬件键盘仅是作为iPad的选件,触屏式键盘才是iPad主要的交互工具。用户点击文本框的时候,软键盘会自动弹出,例如用户点击<input type=”text”>或<textarea>等的时候。

iPhone、iPad用户主要是通过手指与网页进行交互。这种交互方式的缺陷是无法处理类似鼠标停留的事件,所以,在网页中的鼠标事件:mousemove、mouseover、mouseout或CSS代码的:hover达不到PC机浏览器中的表现效果.

单手指触摸事件(Touch Events):在iPhone、iPad浏览器中可处理的单手指DOM触摸事件:touchstart、touchmove、touchend、 touchcancel(when the system cancels the touch) 。在输入框按住一会会弹出剪切/复制/粘贴窗口, 可在网页通过 -webkit-user-select: none代码禁用该功能.

双手指协同事件(Gestures), 即是指两只手指接触屏幕的时候缩放或者旋转的效果,对于侦听gestures,iPhone/iPad也有三个事件:gesturestart,gestureend,gesturechange。
同时事件参数event有两个属性:scale,rotation。Scale的中间值是1,大于1表示放大,小于1表示缩小。

> 图片随页面滚动加载

其实这是很多大型网站都使用了的方法,比如淘宝、拍拍等等。这次在游戏官网里做一个尝试,效果不错,初期为首页节省了几十K的下载量,因为不同显示器分辨率不同,所以第一屏高度不一样,这个数据有所浮动。

图片 6

滚动时,当前屏正在加载的图片

首先,将图片的路径存储在img标签的一个非src属性中,LOL首页是存储在rel属性中的,此举是避免页面直接加载图片。然后使用JS的监听方法(IE是attachEvent,其他浏览器是addEventListener),监听页面的scroll事件。一旦页面滚动,就会执行一个编写的函数,来判断图片是否处于浏览器的当前一屏内,如果是,将rel属性内的地址赋值给src属性,如果不是,继续监听。当板块内的所有图片都被加载后,取消监听。LOL官网首页的活动板块和媒体合作板块均使用了这种技术,大大减少了页面的加载量。

•    链接的可点击区域尽量大,方便用户点击,页码间距足够避免用户误点击;

iPad用户侦测:User Agent(用户代理)

随着移动设备上网的普及,很多网站都会进行客户端浏览器类型侦测,主要是靠User Agent来进行识别,如果侦测到是手机浏览则可能重定向,让用户浏览移动设备专用版本。以往我们所指的移动设备,主要是手机等终端,现在,iPad也加 入到移动终端设备的行列中来,但它拥有9.7″大屏幕,iPad的Safari浏览器带来接近PC电脑的浏览感受。所以对应iPad的网站页面必须不同于 其他移动设备,区别iPad访问主要也要依靠其浏览器的User Agent来进行。

iPhone OS 3.2 SDK beta 3中描述的iPad Safari浏览器User Agent代码:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

iPad Safari的User Agent代码包含单词:”Mobile”、”iPad”,不包含单词:”iPhone”。这点必须要留意,如果网站以前的版本对移动设备的访问并未区分,那么现在需要修改下,以防止对相应设备返回错误的版本。

模拟iPad浏览器访问的方式

如果你无法通过iPad或iPhone模拟器测试网页情况,你还是能够通过一下方式进行测试:

  1. 通过Mac OS X 或 Windows版本的Safari浏览器充当模拟器Safari菜单->偏好设置->高级->选中 在菜单栏显示”开发菜单”,这是在菜单栏就会出现”开发”这个菜单项菜单”开发”->用户代理->其他,在弹出的对话框中粘贴上述User Agent代码,点击确定以后,就可以用Safari验证页面是否适合iPad显示了。
  2. 用谷歌浏览器充当模拟器命令行下输入:

    chrome.exe --user-agent="Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"
    
  3. Javascript侦测iPad的User Agent,然后转向到对应版本的URL。

    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i))) {     if (document.cookie.indexOf("iphone_redirect=false") == -1) {        window.location = "http://ipad.www.opensoce.com";     }  }
    
  4. PHP脚本侦测User Agent

    if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) {  header('Location: http://ipad.www.opensoce.com');  exit();  }
    
  5. Apache侦测转向

    RewriteCond %{HTTP_USER_AGENT} ^iPad    RewriteRule ^index..*$ ipad.html [L]    RewriteCond %{HTTP_USER_AGENT} ^iPhone    RewriteRule ^index..*$ iphone.html [L]
    
  6. Nginx侦测转向

    if ($http_user_agent ~*iPad ) {     proxy_pass  http://ipad.www.opensoce.com;  }  if ($http_user_agent ~*iPhone ) {     proxy_pass  http://iphone.www.opensoce.com;  }
    

> 减少页面加载量

 

减少页面加载量最主要的目的是减少资源消耗,加快页面的呈现速度。虽然延迟加载可以在一定程度上优化页面的性能,但不是所有的内容都需要第一时间加载给用户看或者重复加载的。比如用户在浏览页面第一屏的内容,那么页面在打开时就加载第一屏以下的一些内容就不是很有必要。再或者,官网页面中一些相同的部分,如导航、脚部声明等部分,这些修改率极低的内容每次都从服务器请求,在一定程度上增加了页面加载的负荷。

减少页面加载量的方法有很多,这次LOL官网改版主要用到了以下方法:

采用HTML5本地存储技术,在用户电脑里存储页面的一些内容,如导航,合作媒体,脚部声明等。这样用户在加载页面时,浏览器直接从本地获取这些内容,在一定程度上减少了资源的消耗。

图片随滚动条滚动加载,使用户在浏览页面时,动态按需加载图片。比如,用户在浏览第一屏内容时,第一屏以后的图片是没有加载的,当用户滚动页面时,呈现在浏览器中的部分会动态加载图片。

优化轮播广告的加载方式,页面打开时只加载第一张图片,在轮播到第二张图片时,才请求加载第二张图片,以此类推。

按需加载页卡的内容,官网首页右上角的新闻板块,加载时只请求第一个页卡的内容,当用户点击其他页卡时,再加载页卡的内容。

 

•   不需要“上一页”“下一页”时就不显示,如后者比前者使用更频繁,前者可简化成符号>;

(本文转自:)

 

> CSS Sprites

为了减少请求,LOL官网将每个页面的小图片都整合到其各自的一张大图片中,首页更是BT,整合图片有90K。

图片 7

首页的整合图片

 

上页与下页放在一起更便于点击;

设置viewpoint

viewpoint,可以理解为:视窗、可视区域,相对于iPad硬件限定的窗口来定义的。iPad窗口大小不可改变,但viewpoint视窗大小可以设置调整。

如果在iPhone开发中指定了视窗标签设置, 在iPad开发中必须进行必要的校正。例如:

在iPhone中,我们会用下述代码的方式指定屏幕宽度

<meta name="viewport" content="width=320" /><!--不适应iPad-->

而在iPad中,则必须用device-width替代具体的宽度像素数。

<meta name="viewport" content="width=device-width" /><!--适应iPad-->

我们在设置宽度的同时可以设置可缩放的比例范围

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

> 官网优化情况

 

为了配合LOL不删档测试,并改善用户浏览时的体验,官网在今年1月份开始了改版。官网尝试采用全新的内容布局思路,对用户做更好的引导。本次改版,官网主要有以下四个方面的调整:大量去除上一版影响浏览的Flash动画,只保留首页下载按钮的Flash效果,加快了页面的加载速度;引导页对用户进行分流,获取游戏资讯的用户进入官网,了解游戏玩法攻略的进入战争学院;首页增强了游戏活动和赛事的展示,采用了不同以往的大型轮播广告和占据页面近三分之一空间的列表;增加了免费英雄展示和游戏荣誉墙的部分。

另外针对现状,官网通过采用HTML5本地存储,内容按需加载,延迟加载,文件压缩,CSS Sprites等技术,使页面性能得到了大幅度提升。另外采用HTML5视频技术,使官网在苹果移动平台上有很好的表现。

本文将着重介绍HTML5本地存储和内容按需加载的思路和方法,以及HTML5视频技术的效果。LOL官网采用的减少加载量的方法,在首页上为用户节省了至少600K的下载量,同时大大减轻了服务器的负载。

图片 8

首页GTmetrix得分

图片 9

整体健康度(其中首页1秒健康度70%以上,2秒健康度80%以上,3秒健康度90%以上)

 

iPad图标

iPad开发完成后,会体现图标的地方主要有:

  1. iPad桌面,不大于72×72的png格式图标;iPhone桌面,不大于57×57的png格式图标,在Xcode中的资源部分添加,并在 xxxInfo.plist中设置Icon file属性为添加的图片资源名称。图标文件不需要做圆角和反光,iPad/iPhone自己会完成。
  2. App Store中软件简介中显示的缩略图,在打包生成zip文件的根目录放置的文件名为iTunesArtwork的jpg图片,大小要求在512×512以下
  3. 如果你的用户将你的网站添加到home screen,iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标,这样当然更好。图片是57×57大小,png格式。不需要自己做圆角和反光,系统会自动完成这些工作。然后将下面这条加入head中:

    <rel="apple-touch-icon" href="images/youricon.png"/>
    

另一方面,在移动设备平台,iPhone的出货量已经超过1亿部,而iPad的销量也超过了1500万台,iPad2也在首周销量了近100万台,销售额达到95亿,占整个平板市场份额的90%。我们知道,这俩不支持Flash,这个普及程度提醒我们,提高多平台的兼容性势在必行。

四、 总结

使用W3C标准网站技术

iPad和iPhone的Safari浏览器不支持插件以及Flash。

使用插件技术(控件)的菜单、导航等在iPad或iPhone的浏览器下将不会显示。

使用插件植入的音频、视频也不会播放, 可以 HTML5的&lt;audio>和<video>标签发布音频视频内容。详细可参考Safari DOM中的HTMLMediaElement、HTMLVideoElement、HTMLAudioElement开发信息.

以往,你可能需要插件去表现动画内容,而在iPad和iPhone浏览器下可以直接采用Javascript CSS3的特性去制作动画。CSS3 开始朝着模块化的方向发展,比如盒子模型、列表模块、背景和边框等等。利用CSS3,你可以直接做出圆角表格,之前可是只能用图片或者VML技术才能实 现。

关于HTML5和CSS3,目前在国内比较早和成功的应用是网易三大邮箱((mail.163.com; mail.126.com ;www.yeah.net),你在iPad上输入上述地址的时候,会被转向到iPad适应版本,用户感受很好。HTML5在规范性和速度上拥有诸多优 势,据网易提供的数据显示,这个版本的使用中收信写信的速度提升50%。此外,还有一个优势在于,代码量减少大大提高邮箱服务器的处理运行效率,为日后的 功能扩展提供一个更强有力的平台。

HTML5/CSS3的未来和目标是为了改善每个人的网络体验。HTML5/CSS3的一点简介:

    * 使用CSS3渐变,字体阴影,圆盒以边界–这些对菜单栏和简单的网站设计师特别实用的。      * 如果你想显示视频,使用HTML5 视频播放器代替Flash(显然它就不能工作)。      * 使用HTML5创建离线程序并且脱机存储数据。      * 各种实用的教程到处都有,当在开发我的iPad网络程序时我就已经利用了它们。Google他们,得到创意。

利用普通电脑的Safari测试无插件支持情况,在偏好设置->安全->,取消启用插件的选择框,

> 多平台兼容

 

平台兼容问题其实说到底,还是浏览器的兼容问题。在PC平台,我们要兼容N多浏览器,在移动平台同样如此。更恐怖的是,移动平台的浏览器种类和复杂度远远大于PC平台。
所以LOL官网的多平台兼容也只针对移动平台中的现代浏览器。

 

iPad本机应用程序

    * 本机应用程序运行更快:使用更多的iPad的资源和性能。      * 不需要在网络上搜索:在苹果商店上一站式购买。      * 用户感觉更加舒适:他们知道程序是为他们设备特别制作的,不适合用HTML5/CSS3。      * 更容易打开和关闭:程序在打开和关闭的时候没有任何中断且不会丢失数据。      * 更难于开发:要求Objective-C 和Apple SDK的知识。      * 封闭的平台:很难为其他设备进行修改比如Android平台。

> 结束语

 

当然,减少HTTP请求,使用延迟加载等等这些方法也是必不可少的,具体请参见《DNF官网整容手册》。官网的优化永无止尽,其实这次改版后的页面还有很多地方可以优化。比如减少页面的初期渲染量,优化JS以进一步减小CPU占用率,兼容更多的移动平台等等。希望此文档能在今后各个产品的官网改版上帮助到各位同学。

> MP4文件大小控制

针对苹果移动平台设备输出的MP4文件需要控制大小,文件太大会造成浏览时很卡的感觉。毕竟移动平台设备的CPU还是不能和PC相比的。LOL引导页的MP4文件就从最开始的10M压缩到了6M。

 

翻页与滚动条的相辅相成,都是页面过长,为分段呈现内容的方法;

> 函数执行

LOL官网使用了大量的JS,尤其是首页。如果一次性执行大量函数,会造成CPU暂用率很高,页面很卡的情况。因此,LOL官网使用了一个函数来间隔执行这些函数。在页面加载完成时,先一次性执行必须马上使用的几个函数,然后以100毫秒为间隔,根据重要程度挨个执行剩下的函数,以减轻CPU的负载。经过对比,采用这种方式后,LOL官网首页虽然JS使用比DNF官网首页多很多,但加载时的CPU占用率比DNF还低5%左右。

 

•   页码过多时,允许跳转翻页;

同时,在关注网站性能优化的同时,我们应该注意到减少用户加载页面时的加载量也是一个极其重要的方面。可以想象,一个日浏览量1000w次的网站,节省10K的下载量会有多好的效果,这对用户的访问速度和服务器的负载都有极大的好处。

设计猜想:瞄准页码点击较困难,可以减少用户瞄准位置的次数。但没有做完美,用户每刷新一个页面,还是要滚动浏览器条到下方瞄准页码位置。这个微小的友好交互可以运用到轮播图设计中,减少鼠标瞄准操作。

•   查看最多的是哪些页面?

点击任何一页码继续浏览,发现后续提供的页码是:当前页 9;

设计猜想:但考虑到网页宽度还是不能继续无限制增加页码个数,于是设定最多一次提供20个页码。

•   Google翻页

设计猜想:不需拖动鼠标,移动端上手动点击是最方便常用的操作;

•   分页的内容是什么类型?

2) 使用情景

设计猜想:当用户往下点击页码时,google开发者认为前10页内容不能满足用户,于是将搜索范围放大。

•   是否会不按顺序翻页,为什么?

1) 滚动条与横向分页优先级

用户浏览的信息是关注的信息,会像读报纸一样逐页的浏览下去,因此“上一页”“下一页”用的次数最多;其次是跳转翻页,为体现轻量微博的概念,将传统翻页的中间页码部分简化成下拉菜单,既能标识当前页位置又能翻页切换跳转;

•    避免花哨交互,精简;

当网页内容较多、不能在限定区域内显示完全时;

•    连续翻过很多页后,当再无内容可以展示时,自动出现关联信息按钮“查看更多信息”,引导用户去浏览其他相关信息;

始终有第”1“页,中间用”…“表示未显示的页码;

•   尽量使用首页和末页链接,且放在普通页码区外的固定位置;

一、 先来看常规翻页

1) 组成结构

为了方便用户在多个页面间跳转和快速定位(尤其是按顺序翻页),通过翻页设计提供多个页面间的导航。

•   以Taobao搜索结果列表页为例:

GOOGLE图片

用户输入关键词进行模糊搜索,然后出现相关结果列表,用户需要逐页翻看查找,此时“上一页”“下一页”使用最多,因此要设计的便于点击切换;或间隔两三页查看,因此样式上要区分查看过的页码和未查看过的;前几页浏览的几率最大,当翻到后面相关内容越来越少,用户会想要返回第一页,因此最好一直显示首页;页码数量不宜过长,不要导致用户视觉辨识困难;也不宜过短,以免给用户造成网站信息较少的错觉。

前者是横向翻页方式,后两者是纵向的信息翻页。分页作为很小的一个组件,大多数网站都不会花费什么精力去设计,设计也大同小异,用户已经使用习惯学习成本为0,但如果能够在细节上做的更细致贴心一些,用户的使用体验会有所提升。

当同时使用滚动条和翻页时,该如何设计。

•   区分访问过/未访问过的页码样式,能更好的帮助用户记忆,不重复浏览;

在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。

设计猜想:滚动条到最底部方出现翻页。大概出自浏览器,滚动条内放页面翻页;

设计猜想:用户翻到后面页码也找不到想要的内容时,会返回第一页重新查找,此时第“1”页是home的作用。

•   页面数量有多少?

•    手动全部翻一遍的几率

•   有翻页也滚动条,滚动内容不宜过长(PC端产品)

2) 同方向分页的Tab与翻页很少同时使用,滚动翻页与滚动条也是如此。但横向与纵向的组件可以交叉配合使用,比如滚动条与翻页。

搜索结果首次只提供10个页码;

•   页码数量不宜过长(一下呈现过多导致视觉混乱,用户翻看页码困难)或过短(特别是搜索结果,会造成网站信息较少的印象);

•   页面过长时,增加“返回顶部”;

•    “无限滚动翻页”,当用户浏览到页面底部,自动刷新页面展示新的信息;

•   “最后一页”是否一定要有?

选中页码和mouseover页码样式始终在一个位置不变,不需移动鼠标就可点击下一页,而后页码自动替换状态;

更多贴近用户心智模型,方便阅读浏览。缺点是当一段信息不能及时刷新出来时,无法跳跃浏览其下面的信息。

•   翻页是否在列表顶部和底部都出现?

•  支持键盘操作;

设计前考虑完以上问题,针对情况进行取舍设计。

设计猜想:google开发者认为一般用户在这10页内就能找到想要的内容。

•   Sina微博小分页

•    或需要点击一下才可翻页;

三、 滚动条

Vonnie | 2012-02-04 |交互设计

•   列表顶部什么情况下有翻页?

•   除放第一页外,可选择放前面三页的页码,视觉上稳定些;

优点是条理清晰,便于分段查找信息,后台请求压力小;

说说目前常用的三种分类显示信息方法:

缺点是会打断用户阅读,影响用户关注的主要内容。

• 上页 页码 下页

所有组件的灵魂是用户操作方式。

交互细节交互设计分页

相关标签

•   清晰标识当前页位置,一般处于页码中部;

设计猜想:滚动条需要拖动滑块浏览,如果滑块过短便更不容易操作;统计过IE、FF、Office等常用软件,一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时,滚动条的拖动体验就相当的差。

QQ邮箱

•  跳转到__页/第__页”;

•   显示总页数(当不显示总数时,翻到最后一页就不能再翻页了);

常规翻页          信息滚动翻页         滚动条

按照用户心理模型,浏览邮箱内容时是反复浏览型,且页面较长,此时需要在顶部添加翻页,但电商网站搜索结果页和新浪微博的用户是在浏览到页面底部时才会有翻页动作,因此不必在顶部放翻页。

•  确认”按钮;

与别的组件一样,分页不是单独存在的也要结合使用环境来交互设计。

•   移动端产品则貌似无限制

1) 从信息的结构来看,传统翻页是横向信息分段显示,而“无限滚动翻页”属于纵向信息递增显示(随滚动页面信息增长)。

有上下翻页同时能快速拖动浏览不同页的信息,适用于内容能够粗略浏览的页面;

2) 分页不一定是click跳转的

5) 总结

•   翻页在滚动条内部

•   是否可以mouseover就显示页面内容?什么时候可以?

•   Baidu翻页

4) 用户心智模型分析

但也最多提供20个页码;

3) 交互分析

例如浏览器,是因为软件与其内容的嵌套关系;

本文由澳门新葡8455最新网站发布于互联网,转载请注明出处:交互细节分析,本地存储和内容按需加载的思路

上一篇:婚恋网站的匹配系统没用,通过网络匹配的方式 下一篇:没有了
猜你喜欢
热门排行
精彩图文