如何为平板打造完美的网站页面?

标签: Web前端 | 发表时间:2012-05-22 08:00 | 作者:Administrator
出处:http://www.scriptlover.com

据调研公司Gartner预测,平板的销量每周都在增加,到2016年,全世界平板的销量将达到6.65亿台。随着以苹果iPad为代表的平板电脑风暴越演越烈,相信移动设备取代个人电脑的霸主地位,成为接入网络的首选设备只是时间问题。

Adobe最近发布的数字营销报告显示, 使用平板电脑浏览网站的用户比普通PC访客的每笔交易金额高出20%。这些数据意味着对于电子商务企业来说,设计对平板电脑友好的网站非常重要。

iPad的横空出世让原本死寂沉沉的平板市场重新焕发生机,可整整两年时间过去了,很多网站还是没有专门针对平板电脑进行优化,甚至很多新建的网站在平板电脑上无法正常使用。而且这当中不只是那些不起眼的小网站,就连大名鼎鼎的Google Docs的用户体验也是相当糟糕,不信的话就在iPad上面试试Google Docs,你会发现除了浏览什么都不能干,尤其是当你需要编辑文档的时候。

问题出在了哪里

诸如细节是魔鬼、细节决定成败等等的话我们都耳熟能详。其实导致上面的问题也很简单:有些网站的链接和可点击的图片实在是有点小。Web可用性方面的世界顶尖专家Jakob Nielsen一针见血的指出了问题的症结所在,这些问题在Kindle Fire一样的中等大小的平板上面尤为凸显。为15寸笔记本电脑或者22寸显示器设计的网站并不适合iPad的10寸屏幕,整个屏幕会显得过于拥挤而无处下手,用户需要经常通过双击放大,这绝对不是个愉快的体验。

平板与笔记本、台式机的五大重要差异

大体上说来,设计适合平板的网站与适合台式机/笔记本的网站存在如下五大差异:

1. 尺寸

相对于笔记本和台式机而言,平板电脑的尺寸一般较小。

2. 屏幕分辨率

平板电脑屏幕分辨率可谓是千差万别(从Kindle Fire的600×1024到新一代iPadd的2048 ×1536),而且因为平板电脑的屏幕方向可以旋转,所以平板电脑的网站需要在水平和垂直方向都能正常浏览。

3. 兼容性

使用过平板的人都知道,Abobe Flash与平板的兼容性是个大问题。但是像Silverlight这样的插件,以及一些计算任务较重的JavaScript Web程序也会导致麻烦。

4. 触摸界面

这是个大问题。触摸界面是平板电脑和传统PC最大的区别,为了方便用户操作,就需要更大的可点击元素和更少的导航元素。

5. 内存和CPU限制

我们都知道平板板电脑已经进入四核时代,所以平板的性能缺陷往往很容易被忽略。事实上平板电脑的内存和CPU性能依然远远落后于传统PC,所以多媒体元素过多的网站对于平板电脑来说依然是个不小的挑战。

理解用户体验

网站机构Domain7的创始人Shawn Neumann说, 设计网站最重要的一点就是要理解用户体验,并制定策略来满足用户的需求。台式机是用来搞研究的和完成任务的,智能手机是用来临时打发时间的,平板则是用来在家里好好享受时间的。

有时候采取响应的办法是最为有效的”,Neumann建议道。响应式的网站是流动的,可以根据不同的屏幕尺寸和显示分辨率进行调整。所以理论上来说,同一个网站可以同时在大屏幕和小屏幕的设备上浏览,但实际的结果往往是差强人意。如何克服分辨率变化这一问题,难度也是不小,专门为大显示器设计的网站在小屏幕上的显示效果往往并不怎么好,所以,一个网站并不是放之四海而皆准的。

究竟如何解决这一问题,大家众说纷纭,有建议说创建一个移动友好型的网站,也有说根据用户使用的设备来进行自定义。设计移动友好型的网站难度不小,特别是是要运行不同的内容管理体系,此外同时维护两个网站难度也不小而且代价很高,而且用户在平板上不能使用网站的完整版本也会令他们相当搓火。总之不管最终选择哪种方案,都会增加额外的开发工作和额外的费用。

使用工具软件

当然有时候也可以走捷径:使用像Pressly或者OnSwipe一类的软件。使用这一类软件,标准的网站页面就像是被施了魔法一样,适合平板浏览的页面立刻就会完美地呈现在用户面前。

以上这种方案是OnSwipe的CEO兼联合创始人Jason Baptiste希望看到的,他说:

引用
人们将逐步从“点击时代”进入“触屏/扫屏”时代,平板的网站界面将更加集中,而且要求的是不同的设计方式。有些人认为只要设计一次网站页面然后到处使用,就可以一劳永逸了,我认为这根本站不住脚。在平板上我们要注重的是触感,所以设计的时候也应当以触感为重点。

适合平板的网站页面

那么什么样的网站页面才是适合平板电脑的?我认为需要做到以下几点:

  • 简洁干净的用户界面;
  • 大而显眼的导航和控制元素,空间排布合理,尽量减少互动性插件的使用;
  • 创建灵活的、能适应多种屏幕尺寸的框架;
  • 考虑使用第三方服务,针对平板或者其他类似的设备自动对网站页面进行转换。

其实平板电脑网站的设计者可以多学习Flipboard和 Pulse等个性化的内容聚合服务,它们设计的网站页面在小型设备上的展示效果相当不错,所以可以对它们加以研究并借鉴它们的设计方法与风格。

为平板打造完美的网站页面的重要性已经一目了然:要么将网站设计得更“平板化”,要不就等着流失用户、收益损失的情况出现吧。将网站转换成平板电脑友好的环境宜早不宜迟,动作慢了,你就会和竞争对手形成差距。如果你想利用平板电脑风暴所带来的好处,并且创建一个对平板电脑友好的网站,赶紧行动吧!网站设计者们!

来自: 博客园-momi

相关 [平板 完美 网站] 推荐:

如何为平板打造完美的网站页面

- - 互联网的那点事
据调研公司 Gartner预测,平板的销量每周都在增加,到2016年,全世界平板的销量将达到6.65亿台. 随着以苹果iPad为代表的平板电脑风暴越演越烈,相信移动设备取代个人电脑的霸主地位,成为接入网络的首选设备只是时间问题. Adobe最近发布的数字营销报告显示,使用平板电脑浏览网站的用户比普通PC访客的每笔交易金额高出20%.

如何为平板打造完美的网站页面?

- - 脚本爱好者
据调研公司Gartner预测,平板的销量每周都在增加,到2016年,全世界平板的销量将达到6.65亿台. 随着以苹果iPad为代表的平板电脑风暴越演越烈,相信移动设备取代个人电脑的霸主地位,成为接入网络的首选设备只是时间问题. Adobe最近发布的数字营销报告显示, 使用平板电脑浏览网站的用户比普通PC访客的每笔交易金额高出20%.

[多图]最完美的高仿iPad2平板电脑

- 洞箫 - cnBeta.COM
感谢乌漆嘛黑的黑得看不见手了的投递. 虽然说国产平板电脑中已经出现过iPad2外观的 产品了,但所采用的威盛8650处理器定位太低,可玩性较差,下面要介绍的这款iPad2外观的平板电脑则是从里到外一样的彪悍,来自格莱富(Grefu)国际发展有限公司,型号M97.

【CDC翻客】追寻点击愉悦感—提升网站平板体验的6个技巧

- - 腾讯CDC
  译者注:随着平板电脑市场的迅猛增长,你可曾考虑到网站在平板上的用户体验. 本文给出了6个提升网站平板体验的简易技巧,让你花小气力,出大成果,可谓事半功倍.   原文链接: http://uxmag.com/articles/the-pursuit-of-tappiness.   在这篇文章发布时,仅在 美国就有近70万的平板电脑用户,这比前一年的数据增加了一倍.

平板

- box7 - apple4us
译注:Paul Graham 的新文. 最近我一直在想:居然没有一个笼统的词来描述诸如 iPhone, iPad 以及所有运行 Android 系统的设备,这多不方便啊. 最接近的词貌似是「移动设备」,但是它包含了所有手机,却又不能准确的表述如 iPad 的特别之处. 最后我得出的结论是他们应该叫「平板」.

完美的 Chromebook

- Alex - 爱范儿 · Beats of Bits
女性内衣恐怕是这个世界上最拧巴的产品之一:越快被脱掉,才说明它做的越成功. 和它里面更加实质的东西比较,它只是个又薄,又短暂,平时又缺乏曝光的中间过程. Roy Raymond 就抓住这种短暂的闷骚,创造了著名的奢侈品品牌:维多利亚的秘密. 是的,虽然理工男们难以理解,但是有时中间过程就是如此重要.

完美解码 20110601v2

- BugerFly - cnBeta.COM
完美者解码是一款能实现各种流行视频、HDTV回放及编码的全能型影音解码包,自带 Media Player Classic、KMPlayer、PotPlayer 三款流行播放器,支持简、英语言平台下安装,能播放AVI、VCD、DVD、MPG、MP4、RMVB、TS、TP、EVO、M2TS、MKV、OGM、MOV、SCM、CSF、FLV等众多种格式的影音文件.

完美解码 2011.10.20

- Jack - cnBeta.COM
完美者解码是一款能实现各种流行视频、HDTV播放及编码的全能型影音解码包,自带 Media Player Classic、KMPlayer、PotPlayer 三款流行播放器,支持简、英语言平台下安装,能播放AVI、VCD、DVD、MPG、MP4、RMVB、TS、TP、EVO、M2TS、MKV、OGM、MOV、SCM、CSF、FLV等众多种格式的影音文件.

Metro UI 平板概念图

- 冉波 - 爱范儿 · Beats of Bits
在 《从应用启动器的设计来谈谈 Metro UI 的不足》 中,我曾抱怨过 Metro UI ,主要是针对它的主屏幕,因为在手机那样的小屏幕上,主屏似乎更适合摆放图标,而不是动态格窗. 但是如果我们将 Metro UI 放到平板上,情况就会完全不同. iOS 在 iPhone 上表现虽然很好,但是将同样的 UI 放到 iPad 上,总感觉不够大气.

平板进 E-ink 退

- Wang Yan - 爱范儿 · Beats of Bits
E-ink 作为纸张的替代品,其目标是代替传统纸张实现电子阅读. 在 Amazon 为首的数字出版商的努力下终于小有成就,2010年销量据说达到了700-800万台之巨. 但就战略上来说,E-ink 失去了一些原本属于它们的阵地. Amazon 于 2009 年在 6 所美国高校尝试以 Kindle 代替传统课本,数月后由于使用不便终告放弃.