智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司,宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务,优惠的价格,深的客户信赖。相信有你的加入我们的明天会更有动力!期待与你合作!
  • 宁波智软设计工作室,打造宁波网站制作工作室顶级品牌
  • 智软拥有专业的设计团队
  • 多年网站建设团队为你服务
  • 智软期待与你合作
  • 我们的技能
  • 我们掌握的技能有:dreamweaver,flash,photoshop
  • 宁波高端网站建设服务公司
    2014已经悄然到来,在新的一年我们恭贺所有客户事业蒸蒸日上,同事庆祝智软设计工作室成立5周年,在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务!期待与你合作
  • 企业网站制作建设原因与服务介绍

    智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格,最优质的质量,最突出的设计!得到了客户的一致认可,我们的服务包括:宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!

  • 点击链接网站优化推广介绍

    点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解

  • 2014开幕,宁波网站设计服务全面优惠.

    2014开幕,宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格

  • 链接到网站案例展示平台
    智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新,让新老客户更好的看到我们做的案例,点击查看我们做的网站案例吧!
  • 我们宁波网络公司提供网站一站式解决方案
    智软(宁波网络公司)帮你轻松解决网络问题,网站一站式解决方案
你当前的位置:智软工作室 > 营销与网络 >

实践之移动网页设计与制作的报告

2011-01-24 17:29

速度和成本(对用户而言)

无论你采用哪种语言,接下来要考虑的首要因素就是速度和用户成本。

移动互联网运营限制流量,进而使带宽成了一个有限而宝贵的资源,而且漫游收费还很贵!

考虑到流量、成本和速度,所以必须保证markup(编程语言)尽可能的简洁、小且标准。

得记住一点,移动网络运营商收取的漫游费是很多的!

由于新技术更新和采用速度很快,未来肯定是HTML5和CSS3的天下,所以要考虑适当地升级你的代码。

像Apple等都提供固件升级,这样很多老设备也可以支持新标准了。但是也许会发生类似的情况:IE6用户拒绝升级到IE8,因此在决策之前,都要做好研究,测试、测试、再测试!

布局要素

移动网页布局会很麻烦:

移动设备形状尺寸不一;

移动设备质量和解决方案不一;

移动设备或许支持放大滚动,但也可能不支持;

屏幕小,所以页面滚动会更加困难。

移动页面设计布局的终极目的就是:尽可能地让用户快速地找到所寻找的东西,减少这一过程的用户负担。

布局对你的移动网站成功与否起着本质性的作用。

由于空间少,single column designs(单栏设计)是必须的!

简洁

有效的移动网页布局的理念之一就是简洁。内容越繁杂,读起来越困难,需要滚动的地方越多!

空间小致使多栏设计并不适用,内容布局不能超越屏幕,除非是被动放大等。

因此,单栏设计显得更加实用。

避免滚动

iPhone和iPad等移动设备可根据设备中心来调整页面,这些也减少了滚动需求,不过并不是所有移动设备都有这功能。

在手机上需要滚动的内容页面不具有良好的体验。

横向滚动也不是个好主意,特别iPad上,滚动条只有在用户尝试滚动的时候才会出现,所以多数情况下,移动网页设计都要避免滚动。

一个好的移动网页设计具有清晰地布局以及简洁的导航选项。

导航和按钮的大小

另外一个关键成分就是导航和按钮了!这也是触摸移动设备的一个重要问题。

我不确定你的手有多大,我想你肯定遇到过要点下那么小的按钮,更该死的他还没有放大功能。

所以说,一个好的体验要有什么?一个大小恰当,按起来爽的链接和按钮!!!

减少点击次数也是个好主意,在移动网页设计中这也是重要的一点!!

内容设计

内容是网站的核心,不过也要考虑到流量等成本问题,如何减少过大的图片、文本和多媒体也是门学问,50KB和2MB有着相当大的区别!

移动设备更强调“少”,更少的内容意味着更具可读性!

文本内容

一个网站里,最多的就是文本内容了!

但是尽管内容依旧是手持设备上的网站,但是诸如滚动、小文件、快速阅读以及带宽限制等因素,这些都意味着我们必须调整文本以确保其可用性!

如果你的设计只是在现有网站布局上进行简单的调整(也就是第一个办法NO1:采用支持移动设备的网页设计),你需要对一些不必要的文本、图片或者多媒体进行删减(就算是提供下载,也会增加可读性)。而独立的手机网站设计的好处就是可以清除多余的内容。

图片

屏幕小决定着CSS格式的图片或者大容量的infographics会有问题。虽然有些手持设备屏幕大,问题不会明显。IPhone等设备的放大缩小功能仍旧有限,所以一些视觉美化功能肯定需要剔除!

50KB和500KB的图片在尺寸和解决方案上也有着明显的区别!带宽损耗也不同!

视音频

视音频几乎是必须具备的内容,就算是有宽带限制,尤其是在iPhone和iPod这样的设备。同样的道理,适度的和明智的使用是关键!

如果你提供视音频,最好有一个下载征询!

下面是几个建议:

格式:谨慎使用flash等一些设备上不兼容的格式

视音频文件大小:优化你的文件

不要自动下载视音频:一定要事先征询用户

不要自动播放:这样很让人厌烦

其他需考虑的因素

最要要考虑的因素可能还有scripting、plugins等等

知道该不要什么,该保留什么,这样才能提高用户体验,同事确保你的手机网站能够适用于所有移动设备!

移动设备交互VS个人电脑交互

两者交互方式如此不同在于屏幕不同;另外移动设备中没有鼠标键盘,而是通过手指动作来指定行动和反映。

专属技术和Plugin

比如,Apple就阻止flash在其移动设备上的应用,这真的是个问题!从而不得不依赖于苹果的专有技术!

Apple反对flash也许预兆着移动设备生产商想保住其对第三方的优先权。虽然很多开发商也因此使用苹果平台,不过对这一问题的最好解决办法就是适度地对自己的手机网站进行降级!

有着良好网络连接的网络服务

由于现在的移动设备网络环境,网络连接仍旧是许多web app最头疼的一个问题!甚至还有一些手机没信号的“死亡区”,这些都影响着用户交互,用户在做某一件事,不过网络却突然中断了,体验自然很糟糕!所以在设计app时需要考虑到离线和在线两种情况。(推荐阅读this offline HTML5 iPhone app tutorial)。

移动网站测试

你只要到手机店逛一逛,就会发现屏幕等等都是有很多不同的!

目前有很多网站测试模拟器。

考虑到现在几个大公司都只想保住自己的竞争优势,所以标准化似乎不太可能发生!

所以网站测试的范围要尽可能广!

移动设备模拟器测试

毋庸置疑,你需要在尽可能多的平台上对自己的网站进行测试,下面我们提供了一些模拟器:

Android emulator

Blackberry emulator

Dot Mobi emulator

Firefox Mobile emulator

iPhone / iPad / iPod Touch emulator

Klondike WML emulator

LG emulator

Microsoft Devices emulator

Motorola emulator

Mozilla Fennec emulator

NetFront emulator

Nokia emulator

OpenWave emulator (archive)

Opera Mini emulator

Opera Mobile emulator

Palm emulator

Palm Pre / iPhone emulator

Samsung Java emulator

Samsung Platform emulator

Windows Mobile emulator

总结:3S:Simple,Small,Speedy

虽然本文提供的都是一些概要性的建议,不过仍旧有着基本的原则。

速度(speedy)仍旧是目前首要解决的问题,我们可以利用监视器来限制解决方案和颜色。许多ISPs仍旧限制宽带,有时还会发生断网,这些情况对于老一代开发人员来说似乎并不陌生!

所以在网络等基础设施未改善之前,simple,small,speedy就是我们要遵守的3个主要原则了!

更多

【责任编辑:小戴工程师】

  • 共2页:
  • 上一页
  • 1
  • 2
  • 下一页
  • 上一篇:2010年度经典MSN签名TOP10-真的是很经典 下一篇:常见的锚文本的类型-锚文本有哪些?

    最新文章

    2011-01-24 17:29

    相关文章

    2011-01-24 17:29
    网站制作咨询:
    QQ:277728291
    电话:18668277799
    邮箱:277728291@qq.com
    期待你来电咨询
    回顶部
    Copyright 2010 智软工作室 版权所有    智软为宁波公司提供最优惠的网络服务【宁波网站建设,宁波网站制作公司,宁波做网站公司,宁波外贸网站建设公司】我们竭诚为你服务!