阅读更多

1顶
2踩

Web前端

转载新闻 Web设计师应忘记桌面,以移动设备为主

2012-08-23 15:48 by 副主编 MnouW 评论(1) 有3980人浏览
美国网络杂志Slate今天发表署名法哈德•曼约奥(Farhad Manjoo)的文章称,随着平板电脑的使用量逐渐增加,web开发者都应当对这类设备加以重视,甚至在开发网站时,应当首先考虑移动设备的体验,再将这种简洁的设计移植到桌面中。

以下为文章全文:

亲身体验

每天早晨,只要我起得早,都会拿起iPad浏览一下早间的科技头条。这似乎很平常,但我经常浏览的网站却很不给力。拿TechCrunch来说,这家科技博客就经常导致我的平板电脑抓狂。

首先,加载速度慢。整个页面元素的加载顺序一点都不合理——首先显示正文,然后是顶部和右侧导航栏,再艰难地等待几秒钟后,标题才会出现。到这时,我已经郁闷至极了。但毕竟文章出来了,所以,我还是平复了一下心情,开始阅读。但是,等到页面加载完成后,过了大概半秒钟,文章的正文和标题突然消失了。什么?!为什么会先出现再消失?

如果你足够幸运,这种情况只会持续一秒,便会恢复正常。于是,你认为可能是系统有漏洞,便原谅了TechCrunch的设计师——毕竟,他们开发网站时,针对的是传统PC,而你使用的却是古怪的平板电脑。

但有些时候,你就没有这么幸运了。文本会反复闪烁,然后,整个网站都不见了,只剩下TechCrunch iPad应用的广告。为了阅读文章,你不得不点击一个小得可怜的链接来关闭广告。到这时,为了读这篇文章,你已经等待了将近10秒钟,整个人都要气炸了,恨不能永远不看TechCrunch。

但你不能。如果因为某个网站在iPad上的显示效果不佳而抛弃它,那你恐怕要抛弃半个互联网。TechCrunch的移动体验的确不好,但还算不上糟糕透顶。从《纽约时报》到《纽约客》,从谷歌新闻到Salon,甚至包括Slate,很多新闻网站在平板电脑上的显示效果都很糟糕。事实上,不只是新闻网站,就连亚马逊等大牌互联网企业在iPad上的显示效果同样不好。

调整思维

问题在于,很多网站的内容太过拥挤,不适合平板电脑的显示屏。当你在iPad上加载一个网站时,经常会看到文本、图片和视频掺杂在一起。这些网站的代码运行速度太慢、漏洞太多,不适合小尺寸设备;上面的按钮和链接太小,不适合手指点击;网站图片在平板电脑的高分屏上显示效果也不怎么样。

关键问题在于,设计师并未针对平板电脑做出太多设计——他们或许针对iPad对页面做出了细微调整,但这通常只是一种补救,主要还是针对笔记本和台式机设计网站。

该换换思维了。iPad已经面市3年,它的崛起似乎不可阻挡。而且,iPad并不孤独——谷歌Nexus 7、亚马逊Kindle Fire、微软Surface很快都将贡献巨大的流量。互联网需要适应这些设备。设计师创建网站时不应仅仅兼容平板电脑,而应以平板电脑为主。事实上,他们甚至应该首先考虑平板电脑——先针对7英寸和9英寸的屏幕设计页面,之后再针对桌面浏览器调整。

为何要以平板电脑为主?不仅是因为iPad及其同类产品正在迅速成为主要的上网设备。(根据多方数据,移动设备已经占到10%以上的互联网流量,这一数字还在继续增长。)还因为平板电脑的种种限制——小尺寸屏幕以及相对较小的带宽和处理能力——可以提升桌面设备中的网站效果。针对移动设备优化的网站通常更快、更漂亮,比桌面设备更容易导航。如果设计师首先为平板电脑设计网站,整个互联网都将变得更好。

统一设计

需要强调的是,我不是呼吁网站在桌面版本之外,再创建一个针对平板电脑或智能手机优化的版本。很多网站都采取这种措施,但由于很多公司都没有足够的资源维护两套不同的设计,他们的平板电脑和智能手机版通常表现糟糕。这些移动版的网站无法提供与桌面版完全相同的功能——例如,Slate的智能手机版就无法加载读者评论——而且当设计师对网站进行升级时,通常只会优先考虑桌面版。

这完全可以理解:对多数网站而言,桌面贡献了大量流量和广告收入。另外,移动网站仍然较新,而且变数颇多——有很多采用不同技术的智能手机和平板电脑,导致设计师还不习惯为它们开发有吸引力的网站。

除此之外,还要考虑钱的因素。整个网络广告行业都是围绕桌面浏览器建立的,目前最具活力的互动广告还无法在平板电脑上完美地展示。

出于以上原因,网络公司应当集中精力打造统一的体验,兼容所有电子设备。在理想状况下,移动网站不会成为桌面网站的分支——桌面网站将与移动网站一样:简洁、快速,在所有设备上的效果都很好。

践行理念

这个想法并不激进。很多网站设计师都在践行这一理念——詹森•寇特可(Jason Kottke)约翰•克虏伯(John Cruber)的博客都是针对桌面浏览器设计的,但由于加载速度快,而且没有充斥太多杂乱的元素,看起来就像是专为移动设备设计的。

正如BuzzFeed的约翰•赫曼(John Herrman)所说,一些新的创业网站已经开始模仿这些极简主义的风格,包括博客平台Svbtle和Medium、讨论网站Branch和社交网站App.net。这些网站设计之初似乎都是优先考虑iPad,然后再移植到桌面上。不仅如此,这些网站的外观都很漂亮,导航也很方便。这绝非巧合。

当然,对于资金充裕的创业公司而言,很容易以移动网络为主。但对于已经建立业务基础的网站而言,由于十分依赖广告,便很难直接投入移动设备的怀抱。但他们应当一试。今后几个月间,移动浏览器的流量将会飙升,尤其是当苹果推出价格更低、尺寸更小的iPad,而亚马逊也升级Kindle Fire后。

如今,用平板电脑上网冲浪,随时都会碰到缓慢而充满漏洞的网站。但很快,读者就不会继续忍受这种情况。如果你的页面要花很长时间加载,如果你的图片不够清晰,如果你的链接不容易点击,如果你不断抛出iPad应用的广告,我就会用平板电脑访问其他网站——访问那些能真正重视它的网站。
来自: 新浪科技
1
2
评论 共 1 条 请登录后发表评论
1 楼 呼叫的石头 2012-08-29 08:56
双方(网站和Apple)的义务。IPad生产设计厂商也有义务把IPAD的网页浏览功能做得更好。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 参数缺省和函数重载讲解

    缺省参数指在定义函数时为形参指定缺省值(默认值)。 这样的函数在调用时,对于缺省参数,可以给出实参值,也可以不给出参数值。如果给出实参,将实参传递给形参进行调用,如果不给出实参,则按缺省值进行调用。 ...

  • Python学习笔记(四)——自定义函数、多值参数、缺省参数、函数递归、元组和字典的拆包

    1 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段。 函数能提高应用的模块性,和代码的重复利用率。 定义一个函数的格式: def 函数名(): 函数体 ()中用于存放...

  • 关于C++带有缺省参数的构造函数

    任何函数都可使用缺省参数,构造函数也不例外。 应该指出:对象的初始化不可能在类中实现而只能在建立对象时在每个对象中单独实现,以便通过各对象的非静态数据成员的不同数值来体现不同对象之间的差异性。 但个别...

  • 【Python】函数的定义、参数、返回值

    函数函数的定义函数的调用为函数提供说明文档位置参数关键字参数默认参数可变参数(*args,**kwargs)逆向参数收集None(空值)及用法返回值 return 函数的定义 定义函数,也就是创建一个函数,可以理解为创建一个...

  • python 函数的调用的时候参数的传递_Python—函数的参数传递

    形参和实参形参即形式参数,函数完成其工作时所需的信息。形参不占用内存空间,只有在被调用时才会占用内存空间,调用完了即被释放。实参即实际参数,调用函数时传给函数的信息。#-*- coding: utf-8 -*-def main...

  • 【C++】缺省参数、函数重载、引用

    1.1 什么是缺省参数 1.2 缺省参数的分类a. 全缺省参数b. 半缺省参数(部分缺省参数)注意事项 二、函数重载-什么是函数重载,用法注意事项 , const 形参 三、引用-什么是引用、特性、常引用、引用与指针的区别

  • 函数参数详解

    一,什么是函数 如果在开发程序时 ,需要某块代码块多次执行。 为了提高编写的效率以及更好去维护代码,需要把具有独立功能的代码组织成一个小模块,这个就是函数 函数的格式 def 函数名字(): 运行代码 定义...

  • PostGreSQL数据库有的为啥找不到数据类型(比如Double)

    要使用 serial 字段插入序列的下一个数值到表中, 主要是要注意 serial 应该赋予缺省值。 我们可以通过在 INSERT 语句中把该字段排除在字段列表之外来实现, 也可以通过使用 DEFAULT 关键字来实现。 类型名 ...

  • matlab list函数参数,Matlab 函数参数汇总

    Matlab 函数参数汇总Saturday, October 27, 2007 12:49:05 AMMATLAB函数参考附录1.1 管理用命令函数名 功能描述 函数名 功能描述addpath 增加一条搜索路径 rmpath 删除一条搜索路径demo 运行Matlab演示程序 type 列...

  • 达梦数据库学习之存储过程、存储函数、函数

    存储过程,函数,触发器

  • 【C++入门】命名空间、缺省参数、函数重载和引用

    定义命名空间,需要使用到namespace关键字,后面加命名空间的名字,然后接一对 {} 即可,{} 中即为命名空间的成员。

  • python的函数——打包与*拆包和**拆包、不定长参数、缺省参数

    3. 函数参数的打包与拆包 ----函数返回值的打包 def 函数名(参数列表): 函数体执行内容 return 返回值1,返回值2,返回值3,... 此时调用函数时,变量 = 函数名(传参),变量得到的是一个打包后返回值的...

  • C语言 const 修饰函数参数 - C语言零基础入门教程

    二.const 修饰函数参数 1.值传递 2.址传递 3.const 修饰函数参数 三.猜你喜欢 零基础 C/C++ 学习路线推荐 : C/C++ 学习目录 >> C 语言基础入门 一.const 简介 const 是 constant 的缩写,“恒定不变”的...

  • Python函数的参数详解

    Python函数的参数详解。python提供了极为灵活的参数处理机制。 形参 (parameters)是指出现在函数定义中的名称,定义了一...而 实参(参数arguments) 则是在调用函数 (function ,也称为 method )时实际传入的值。

  • c语言程序中函数调用本身叫什么,在C语言中函数调用方式有什么区别

    在使用VC进行函数定义时,通常会指定该函数调用方式,那么在C语言中函数调用方式有什么区别呢?下面小编找到了一下教程,分享给大家,希望可以帮助到大家。通常在使用VC进行函数定义时会指定该函数调用方式,诸如:...

  • mysql自定义函数获取表中多个值的方法

    1,使用存储临时表 2,使用一个字符串来存储 ...说明: 本文中使用的例子均在下面的数据库表tt2下执行: 一、concat()函数 ...返回结果为连接参数产生的字符串,如果有任何一个参数为null,则返回值为nu...

  • Python函数知识点(详解)

    本篇总结了Python函数相关的基础知识点,代码案例超详细,欢迎阅读,交流!

  • C++入门上(关键字、命名空间、输入输出、缺省参数、函数重载)

    缺省参数是声明或定义函数时为函数的参数指定一个缺省值。在调用该函数时,如果没有指定实参则采用该 形参的缺省值,否则使用指定的实参。 #include using namespace std; void Func(int a = 0) { cout ; } int ...

  • 函数参数的压栈过程

    1 _cdecl 按从右至左的顺序压参数入栈,由调用者把...对于不属于一个类的“C++”全局函数,修饰名是?test@@ZAXXZ。   这是MFC缺省调用约定。由于是调用者负责把参数弹出栈,所以可以给函数定义个数不定的参数,如

  • C++ 仿函数

    仿函数(Functor)又称为函数对象(Function...如果编程者要将某种“操作”当做算法的参数,一般有两种方法:(1)一个办法就是先将该“操作”设计为一个函数,再将函数指针当做算法的一个参数。上面的实例就是该做法;

Global site tag (gtag.js) - Google Analytics