最好的办法来设计移动网页

日期:2011年09月20日

我们听说在2011年被命名为多次的移动网络一年,虽然过去几年这种关联,我们听到了很多次。随着技术的进步,所以没有移动电话,智能电话,我们称之为今天。互联网使用率增加每个月的牌位和智能手机开始被每一个家庭收养。53600000人访问日本从每月手机上网,这几乎是谁只要用户从PC访问互联网了。在美国大约20万用户在使用Facebook每月检查,所以人们谁访问互联网的人数是有点大。根据不同的来源,数量往往会获得每月近100万用户。没有人希望这种事情发生在10年前,但在这里它是。因此,开发人员有更多的工作要做,有这么多适合自己的移动网站,要求公司现在。

在这篇文章中,我们将重点放在了移动网页设计以用户为中心的做法,成为在过去几年流行。随着屏幕上有一个狭窄的,有限的空间,少键智能手机,移动网页设计是完全不同的比较经典的一个,电脑屏幕。

 

点击浏览下一页

在持续的周期

有从一个移动网站,居然有一个想法很多步骤。用户为中心的设计周期有五个不同的移动阶段,我们将在不久看看。这个阶段是:分析形势,了解用户和他们的需求,优先的特点,设计了网站,审查,测试和改进。这个循环是一个长期持续的,永不结束。几个月后,你会发现正式启动的情况下,你需要重新开始自己的过程。由于事实上,这种情况在网页设计以及与重新设计自己的网站/公司的投资组合,往往因分析形势再次,实现东西需要改进。

让我们深入每个阶段显得越来越明白为什么他们每个人是重要的以自己的方式。

第一 分析形势

分析形势开始以下问题:“ 我真的需要一个移动网站吗? “。这听起来愚蠢和你们中的大多数可能不相关,但企业要问自己这个问题。这不仅是一个移动的网站要花费数百美元的狗,但它需要研究,正如我们前面提到的,正在进行的大量工作。如果公司没有一个部门来维护它的设计,移动网站可能成为无用或在数月内失效。你所要做的是找出如果您的网站是由许多移动平台访问。你可以简单地通过检查在谷歌Analytics(分析)跟踪您的或任何其他统计资料的。

点击浏览下一页

图片来源:mobilewebsite.com.sg

这不是一个好主意,看看比赛是在外地做。别忘了你是不是单独在市场上,这些小细节可能会使一些时间点的差异。

当您创建了一个桌面的网站,你心中有一些明确的想法:你要提高认识,增加销售并获得超越你的城市,地区或国家的边界​​您的公司。想想无论是移动网站会为你和你的公司好。否则何苦来设计一个如果你没有得到任何回报?

如果您没有看到任何用于创建一个单独的移动网站,然后的原因,只是优化(如图像的大小)的移动设备的网站或安装一个插件,如果你运行WordPress的。银行和网上商店需要一个移动网站,有没有这方面的疑问,但我怀疑你需要一个移动网站,如果您有自己的服装制造公司。像宜家,汉堡王或奔驰大企业没有移动网站,因为他们认为没有任何一个现在需要的。因此,三思而后行吧,如果这些大公司没有移动网站(而且不是因为他们有钱的问题),人们会为你带来一些好处?

现在,如果你还以为你想要去的这个经过,然后让我们进入第二阶段,更贴近用户和我们应如何取悦他。

第二 了解用户和他们的需求

整个网络设计过程是用户为中心的,因为用户是一个人,我们创建了一个网站。移动网页设计是相同的。为了达到最佳的结果,你必须了解你的用户的需求。这是困难的部分之一,因为一切从这里开始。如果你得到这个错误,整个解决方案将失败。这项研究通过观察可以得出结论(用户如何与您的网页交互时,什么是他感兴趣的主要的东西),面试(测验)和重点人群(研究形式,在采访这是由一组表示)。

点击浏览下一页

图片来源:BBC英国

你需要的答案,主要问题有:

  • 为什么他们(想)从移动电话访问您的网页?
  • 哪些功能,他们主要是利用?
  • 什么是重要的,当他们在旅途中浏览?
  • 什么是他们不喜欢当从移动浏览?
  • 什么设备,他们使用的浏览器或应用程序来访问从移动设备的网站的?

后,对这些问题的答案,你仍然需要做的就是研究市场。现在你有你的用户很好地理解,但你需要知道如何设计,以保持在流行趋势的解决方案。歌剧院的国家的移动网络,comScore的,福斯特,eMarketer的和其他的好地方做你的研究。

第三 优先功能

调研结束后,你可能发现了什么功能是你的用户访问最。这和其他的答案给你一个什么样的是你要的功能在您的移动解决方案的见解。你之所以无法不只是插入所有从发射功能,是因为你可能能够处理维护他们。不要忘记,这一切需要努力,金钱和时间。尽量不要从一开始就建立的一切,坚持最重要的特征,然后如果一切运作良好总是有更多的地方在网络上为你的想法休息。

点击浏览下一页

图片来源:paperthin.com

虽然我们有这个搞明白了,让我们继续前进的最有趣的部分。

第四 设计网站

这也算是NextPhase快速导览移动网页设计。当你设计一个桌面网站,您使用一些你已经学会当您第一次来到这个企业的基本规则。那么,它是完全一样的手机网站,只存在一些其他规则。有很多手机设计的考虑你需要考虑地段,我们采取在最重要的一看现在。

其中最重要的区别之一是上下文的用户访问一个网站的。当他使用的桌面版,用户最有可能坐在他家的椅子,也许是一杯咖啡,听音乐,并在同一时间聊天。这是安慰。当用户从手机浏览,上下文是不同的。他可能是在公共汽车或火车,甚至在一个工作会议或在他们的午休时间,可能是想多任务同时观看上一个小装置,有一个用小字体缩小屏幕上您的网站。现在这是一个很大的区别。

在使用不同的考虑,我们可以拿出主要有三个原因,为什么人们用智能手机浏览:微任务(Twitter的,脸谱,LinkedIn),无聊(玩游戏,听收音机)和相关的社会,脱机生命活动(寻找商店或附近的餐馆,检查评价)。除了这些,需要考虑到基本的东西,有以下几种:

设计更小的屏幕

请记住,移动互联网的屏幕设计是一个很大的设计。这是绝对不容易,当一切完美的像这样的工作。有这么多的屏幕尺寸在那里的电脑,但也有手机,甚至更多。几乎每一个智能手机制造商都有自己的首选屏幕尺寸或决议。即使是iPhone 4,用大屏幕的智能手机之一,画面中一个微小的桌面为1024 × 768的默认设置进行比较。此外,一些手机能够改变方向和站点上有一些相应的改变。没有计算机的屏幕变化的方向,所以这实际上是为开发新的东西。

点击浏览下一页
图片来源:techwench.com

最好的解决办法是选择灵活的布局,将适应更小和更大的屏幕。这样做的最简单的方法是有一个百分比,在给定的大小包装,而不是像素。此外,每一个在HTML的小细节,应给予百分比而不是像素灵活,以确保布局。这样,网站的外观在150像素或200像素宽屏幕宽度相同。因此,根据不同的移动平台,也有他们的浏览器有不同的用户组进行排序。它可以是Safari浏览器,Opera Mini的,诺基亚WebKit的(仅适用于欧洲),或黑莓的Andr​​oid WebKit的WebKit的。所有这些浏览器都有自己的问题,不支持不同类型的语言,虽然他们都支持CSS 2和CSS 3一声好。

简化导航

有没有电话鼠标,因此开发人员把重点放在导航多一点。当小屏幕,让用户浏览依靠触摸,轨迹球和键盘点击,所以经验是非常不同的相比,在PC上之一。信息和主要特点是通常出现在几个线(因为你可以看到这篇文章的结尾),由于手机屏幕最有较大的宽度比高度,因此它也是更多的垂直空间来处理。最重要的特点通常是第一位的,因为用户可能需要向下滚动才能看到最后的。该类别的数量,以及在左侧导航水平要尽可能减少。

虽然不是很多网站做到这一点,提供(0-9)快捷键来访问不同的链接可能是非常有用的。CNN没有这一段时间来,尽管我们不知道它如何工作的。因为人们通过触摸导航的大部分时间,确保高度和宽度的按钮是正确的。如果你有三个在一个宽度和高度15px排按钮,可能很难挖掘在中间的一个。不要使用像素,但百分比!之间存在着一个有30px宽屏幕上的250像素宽度按钮,并与在相同的宽度为150px宽屏幕一个很大的不同。

您的手机网站需要作出即时的影响,因此尽量使左尽可能可见(见哥伦比亚广播公司新闻“网站)。始终提供一个全尺寸的网页链接,因为如果用户在无线连接是他应该能够访问的主要网站,如果他想要的。我通常使用这个链接的页脚。由于导航不深和困难,就没有必要使用面包屑空间

点击浏览下一页
CBS新闻手机网站

优化信息

因为没有太多的空间,你必须要简洁,只在重要的信息类型。你的背后有链接到主网页的原因是用户谁是寻找更多关于您和您公司的信息感兴趣。我们没有理由让你填入无用的信息段,因为移动网页上的介绍只。你不卖,从那里,背后的主要原因是为了吸引更多的客户。你给了他们一个“传情”为寻找更多(全尺寸网页)的机会,现在是他们的举动。

最大限度地减少用户输入

因为用户并不在他的键盘前面,所以它是一个好主意,帮他一点。保持URL的其他人没有(或mobile.site.com m.site.com)。如果用户需要注册,狭窄的领域尽可能多。而不是城市和国家要求,要求压缩和你去那里,少了一个字段类型!因此,利用地理定位功能,如果你能使用它。使用诸如记忆的最新数据输入智能功能。与交通有关的应用程序通常记住用户输入的最后一个站。它是一个有点不同的网站,但尝试。此外,提供的可能性留登录。

保持低使用率

即使今天我们有3G的速度和无线连接,在某些国家的用户悄悄地支付他们使用的每个数据位。所以,不要插入过(或至少不高品质的)许多图像,保持页面小,削减不必要的代码,注释和可选的标记。

此外,您可以使用脚本来检测,如果用户通过移动设备访问您的主页。如果是这样的情况下,简单地重定向到移动网站。闪存,JavaScript的,饼干,不HTML5,框架和弹出窗口的工作做在手机上还,所以不要依赖它们。您可能需要使用户滚动,但只有做到这一点的一种方法。大多数网站垂直滚动,不要让用户在两种方式滚动。

第五 审查,测试和改进

当你与这四个阶段完成后,你仍然有一个,直到正式启动小步:你需要测试您的解决方案。这并不需要太多的时间,但它是另一个重要的一步,因为有缺陷的产品发布可能会使你失去在我们的案例客户或访客。仔细检查代码(这将是一个好主意,由W3C的标准,它),并尝试使用智能手机的移动网站,因为移动电话模拟器都不错,但不完全准确。问问你的朋友为您提供短10分钟考验他们的智能手机,并确保一切就绪。否则回到第4期及完善的网站,直到它完美地工作。

改进

如前所述,这是一个持续的周期,所以你必须作出改善所有的时间。它们可以被更新,新功能或一个整体,从头开始,重新设计,但总是试图提供一些新的东西给用户。尝试跟踪您的移动​​网站的访问者,并观察他们的行为。如果他们在网站上花费太多时间的方式,很可能是因为它太沉重,它加载缓慢。如果他们花旁边没有时间,那是因为你不能吸引他们的注意力立即。追踪您的用户和网站DetermineApplicationTrust的长处和短处和完善它们。

结论和范例

有这么多的事情谈论这个话题,但我们要停止在这里。我想我们已经讨论够一天,并在所有的基本信息已经给出了,我相信现在你知道如何处理了移动网站的设计过程。在这里你可以看到一个非常聪明的设计几个移动网站展示和特色的方式,他们应该的。

第一 黄页

点击浏览下一页

黄页

第二 沃尔玛

点击浏览下一页

沃尔玛

第三 VIMEO

点击浏览下一页

VIMEO

第四 到到网

点击浏览下一页

到到网

第五 的Flickr

点击浏览下一页

的Flickr

6 DIGG

点击浏览下一页

DIGG

第七 DeviantART

点击浏览下一页

DeviantART

8 CW电视台

点击浏览下一页

CW电视台

9 亚马逊

点击浏览下一页
Tags:体验设计 企业网站建设 移动设计
上一篇文章:一个简单的指南,以提高Web版式
下一篇文章:一些开发者和设计者在线生成器