资讯频道 → Web前端
阅读更多

11顶
1踩

Web前端

转载新闻 后移动时代的 Web 设计

2010-07-08 10:40 by 资深编辑 wutao0603 评论(6) 有6543人浏览
Web WAP

还记得 Wap 吗，现在还有多少人使用 Wap？后移动时代，随着浏览器技术的进步，为移动设备设置特殊站点已经不再必要。作为 Web 设计师，如果你能遵循一些基本的设计与布局原则，你的站点将能被多数移动设备更轻松地访问。本文讲述的是后移动时代的 Web 设计原则。

移动浏览技术现状

当今最受欢迎的手机系统包括 Android，BlackBerry 与 iPhone。虽然这些手机系统中的浏览器都支持 HTML + CSS + JavaScript，但它们仍然存在某些局限。

 

Flash

Flash

现阶段，用手机访问 Flash 站点，除了一个黑屏幕，什么都不会显示，而且手机也不会提示说无法加载 Flash，因此，Flash 站点应该通过浏览器探测技术，在不支持 Flash 的客户端上输出替代内容。尽管 Flash 在众多平台上都能输出漂亮的内容，但在手机上运行 Flash 就像在 Mac 上运行 Windows 一样，不过，业界已经出现一些技术来解决这个问题，但不要指望太多。

 

Silverlight

Windows Mobile 7 将支持 Silverlight，那将是唯一一款支持该技术的移动浏览器。不过，既然微软已经向 HTML 5 敞开大门，因此，也不要指望微软在移动平台上会为 Silverlight 做多少努力，因此，底线是，不要在你的移动站点中过于依赖 Silverlight。

 

JavaScript

Javascript

过去5年，移动平台对 JavaScript 的支持势不可挡，其体验已经接近桌面，但不能支撑过于复杂的功能，这里有一个关于这个问题的案例分析。至于那些比较老的手机，虽然也支持 JavaScript，但多数都是默认关闭的。当你需要为移动设备编写 JavaScript 的时候，需要对代码进行验证和检查，以免用户的设备崩溃，另外记住，将 JavaScript 脚本放到页面底部，这样，不至于在页面还没加载前就崩溃。

 

CSS 3

移动平台对 CSS 的支持已经很久了，如今，大量基于 Webkit 开源项目的手机开始支持 CSS 3，CSS3 拥有更好的视觉体验，支持降级使用，还能加速页面加载，你在使用 CSS3 的时候，只需要注意其中的某些属性在旧的手机上可以降级使用。

设计感与易用性之争

流行的 Web 技术并非都是你的最佳选择，你需要对使用的各种技术进行测试，事实证明，在移动浏览领域，诸如 Lightbox，视频，鼠标盘旋一类的技术存在问题，需要避开，我们将在这一节中对各种 Web 设计元素进行讲述。

Design Considerations and Usability Battles

为什么视频不能播放？

前面提过，不同移动平台对 Flash 和 Silverlight 的支持很不一致。目前，像 Vimeo 及 YouTube’s 一类的站点在移动设备上访问还存在各种问题，YouTube 比 Vimeo 略好一些，而内嵌视频支持目前则好像只限于 Google Android 平台。

移动平台的视频，是通过 HTML5 实现的，然而，到目前为止，HTML5 视频的许可问题仍不明朗，不过 Google 一直在这个问题上走在最前面，希望他们能最终使这个问题免于重蹈 DVD 解码器许可的覆辙。

 

文字缩放

希望你的文字最多使用的是相对位置而不是绝对位置，否则，Android 平台的浏览器会将你页面的文字扔到屏幕之外的某个地方。

 

在小屏幕上的显示清晰度问题

在手机的小屏幕上看网页，就像你隔着一个房间看电脑屏幕那样，结果是什么看不清晰，你需要将重要的页面元素加深对比度以便用户能看得清楚点。

 

Lightbox 技术

Lightbox

Lightbox 是最受欢迎的 JavaScript 技术，也是最容易让手机用户抓狂的地方，在很多时候，手机屏幕上的 Lightbox 只显示一个角落，而大部分内容则被扔到屏幕外的某个地方。另外，在某些时候，Lightbox 还让手机的 Web 页面崩溃，导致任何东西都无法点用。这并不意味着你不能使用 Lightbox，诸如登陆框一类的地方还是可以使用（登陆框可以做得比较小一些 - 译者注），但不管怎样，最好同时提供一个传统的登录方式，以免 Lightbox 显示到屏幕之外。

 

浏览器探测

很多年前， Web 开发与设计者需要借助浏览器探测技术，为不同浏览器，或者不同版本的浏览器输出不同内容，随着 Web 标准的深入人心，为不同浏览器输出不同内容已经不可取。浏览器嗅探可以通过诸如 jQuery 一类的 JavaScript 库轻松实现，还有一些可以嗅探 flash 支持情况的库可以使用，然而现实是，除非你有大量 Flash 应用，否则很少会用到这个，事实上，现在的很多移动浏览器在遇到不支持的内容时会悄然掠过，而不会像 IE6 那样弹一堆错误。

 

鼠标盘旋

很多站点的导航使用鼠标盘旋并下拉子菜单的方式，然而移动浏览器没有鼠标盘旋一说，虽然有的手机支持这一操作，但和桌面方式有很大的差异。应该避免将重要的信息放到需要鼠标盘旋才能显示的状态。

 

下拉菜单导航

Sencha

下拉菜单需要鼠标盘旋才能打开，前面说过，在手机上，这无法实现，另外，下拉菜单的尺寸往往超过手机屏幕尺寸，即时用户打开了下拉菜单，也很有可能无法完全访问。你应当始终在侧边栏保留子菜单，不管是针对手机站点还是桌面站点。

 

缓慢的加载速度

手机浏览器加载速度非常慢，你需要压缩自己的数据，甚至使用 CDN 加速网络。在 WordPress 一类的 CMS 中可以启用数据压缩，你可在在这个站点测试你的数据是否经过了压缩，如果你使用静态设计的页面，可以使用 Minify 对你设计的网页代码进行净化。

 

加载进度提示

Loading

你应当使用加载进度图标，告诉用户现在正在加载，对于手机浏览器这种 Internet 连接不很稳定的情形尤其重要，在一些 Ajax 应用场合，如果不显示加载进度，用户会以为你的站点已经失去反应。

 

记忆用户的数据

手机用户打字很不方便，应该尽可能使用 Cookie 记忆用户的数据。

 

侧边栏放在左边还是右边？

应该是右边，因为手机屏幕很小，用户阅读你的网页的时候，如果左边显示侧边栏，他们要看真正的内容，就不得不左右滚动，放在右边，用户就可以直接向下滚动看具体内容，需要看侧边栏的时候再左右滚动。

 

小屏幕

早期的 Web 设计师提起当年的 800x600 屏幕就一肚子怨气，好在现在的桌面屏幕都足够大了，然后移动设备的屏幕比这个更小。你所能做的，尽可能不要把网站的 Header 或 Logo 做得太大。

移动站点适合你吗？

很多公司花费大量金钱部署专门的移动站点，事实上，这并不必要，如果你有个电子商务站点，而手机用户存在访问问题，这种情况，也许才值得专门部署一个移动站点。

单列布局

Single Column

要想让你的站点更好地支持移动浏览器，你或许需要扔掉侧边栏，因为侧边栏对移动用户来说毫无疑义，Facebook 以及 Amazon 一类的站点使用这种方法改善用户体验。

 

图片缩放

很多基于博客系统的站点都包含移动版，实现更简单的导航，问题是，这些站点同时会像文字那样缩放它们页面上的图片，那些被缩小的图很难看清楚，更甚的是，你没有办法改变图片的显示尺寸。应当允许用户点击一个图片以显示其完整尺寸版。

 

简单导航

与其让移动用户像在桌面上那样显示站点中的所有内容，不如只为他们显示最基本的内容，免得到处滚动，YouTube 在这方面做得最好，页首的那些干净，简单的按钮非常好用。

Simple Navigation

广告

去掉侧边栏之后，你的站点中的大部分广告位就没有了，一个不错的方法是将广告放到页尾。

 

页尾的完整站链接

虽然你拥有一个移动版本的站点，但用户可能希望看到完整的站点内容，多数移动站点的做法是在页尾放上完整版站点的链接。

结论

以上讲述了现代移动 Web 站点设计中的各种问题，下面是创建移动 Web 站点的一些资源和工具：

Tools

 

本文作者

Ashton Blue

Ashton (Ash) Blue 是 Ash Blue Web 设计公司的创办者，他的公司网站是  www.ashbluewebdesign.com ，Twitter 账户是 http://twitter.com/ashblueWD

 

本文国际来源：onextrapixel.com Designing For The Modern Day Mobile Market

 

中文翻译来源：锐商企业CMS 网站内容管理系统 官方网站

来自: comsharp
11
顶
1
踩
评论 共 6 条 请登录后发表评论
6 楼 xxwinnie 2010-11-13 23:58
使用静态设计
vickemble 写道
Ashton (Ash) Blue 是 Ash Blue Web 设计公司的创办者？

他是男的，还是女的？
  





cn.shoppingnavigation.com
这个网站已经全面识认手机设计了。


呵呵, 文章讲得不错. 学习了很多. 不过最让我醒目的还是最后那张照片... 我现在思考的已经不是手机Web端如何设计的问题, 而是, 那人.... 究竟是男? 是女?
...
5 楼 vickemble 2010-07-11 11:05
Ashton (Ash) Blue 是 Ash Blue Web 设计公司的创办者？

他是男的，还是女的？
  





cn.shoppingnavigation.com
这个网站已经全面识认手机设计了。
4 楼 windywany 2010-07-09 09:31
天下文章一大抄,真不知道是谁抄谁的.
3 楼 redhacker 2010-07-09 08:27
sykp241095 写道
berlou 写道
不错。
用手机访问Javaeye是一大痛苦， 看着那流量都心疼。。。。

太有钱了！

同意！我访问过很多次，速度不是相当的慢。
2 楼 sykp241095 2010-07-09 07:45
berlou 写道
不错。
用手机访问Javaeye是一大痛苦， 看着那流量都心疼。。。。

太有钱了！
1 楼 berlou 2010-07-08 11:25
不错。
用手机访问Javaeye是一大痛苦， 看着那流量都心疼。。。。

发表评论

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

相关推荐

  • Struts 复选框示例

    下载此Struts复选框示例– Struts-CheckBox-Example.zip 在这个Struts示例中，您将学习如何使用Struts <html：checkbox>标签创建HTML复选框输入字段。 1.文件夹结构 这是Maven创建的最终项目结构。 请创建相应的文件夹。 2.动作课 创建一个Action类，只转发请求。 HtmlCheckB...

  • 复选框和Struts2后台交互

    复选框在web开发中用的非常广泛。 案例：

  • Struts2的checkbox标签

    html中的checkbox标签有一个特殊的地方，如果一个checkbox未被选中，那么它将不会出现在请求参数中。比如如下的例子：submit （补充说明：对于checkbox,如果没有显式地指明value值，那么它会有一个默认值“on”） 当我们同时选中option1和opti

  • SCheckbox_struts2 怎么使用checkbox和checkboxlist

    这里要说明一下,selectTagIds为Action里面的一个数组 ,用来存放当前用户选中的chekbox的key值,这样当编辑的时候,action为selectTagIds设置了当前编辑的对象的tag集合的所有id,checkboxlist 会根据selectTagIds的设置的值自动选中里面的项.struts2的checkbox标签在使用的时候需要注意它的两个属性。value和fieldVa...

  • checkbox编辑选中

    今天修改几个月前的代码，原本做的是一个地区有多个店铺，而现在客户提出新需求，一个店铺可能在多个地区（主店分店这种）。 项目以前采用的struts2框架，数据库主要涉及2个 表，areatype地区表， shop表。areatype与shop表是一对多的关系。 areatype有id，name2个字段， shop表有id，name,areatype_id 等字段，为了少修改代码，

  • struts1中html:multibox的使用

    html:multibox 可以实现自动选中。用于替代checkbox. aa bb cc public class ProductDigicamForm extends ActionForm { private String[] specialChooes;// public String[] getSpecialChooes() { ret...

  • Struts2 <s:select>标签 的 多选功能

    直接上demo：<s:select name="role" listKey="key" listValue="value" multiple="true" list="@service.RoleService@getRoleMap()"> </s:select>这里的”@service.RoleService@getRoleMap()”是你后台代码返回数据的方法

  • Struts html:multibox 动态显示和赋值

     checkBox.jsp: FormBean: private ArrayList possibleOptions; private String[] selectedOptions; public Check

  • struts1.2的<html:multibox打开页面为默认选中状态，复选框动态默认选中

    struts1.2 先说下我的需求 用图说明比较方便，首先我想点击一个按钮，跳转页面，页面上有几个复选框，&amp;lt;html:multibox&amp;gt;   复选框的value如下 &amp;lt;html:multibox property=&quot;box&quot; value=&quot;aa&quot;/&amp;gt; AA&amp;lt;br/&amp;gt; &amp;lt;html:multibox property=&quot;box&quot; value=&quot;b

  • Struts2 复选框示例

    下载它– Struts2-CheckBox-Example.zip 在Struts 2中，可以使用&lt;s：checkbox&gt;标记创建HTML复选框。 fieldValue =“ true”是复选框将提交的实际值。 &lt;s:checkbox name="checkMe" fieldValue="true" label="Check Me for testing"/&gt; ...

  • Struts2 checkbox复选框 传值/取值

    jsp 代码：   http://java.sun.com/jsp/jstl/core" %> String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path

  • Struts1 复选框值的问题

    Struts 1 对复选框处理问题 程序代码 public class ColumnForm extends ActionForm { private String d_filetype[]; public String[] getD_filetype() { return d_filetype; } pu...

Global site tag (gtag.js) - Google Analytics