当设计师遭遇HTML5（2）
作者：一叶苦雨 来源：网易用户体验设计中心 发布时间：2011-08-05 18:59:53
HTML5及web app 的优势
以移动互联网领域为例，面对众多的终端设备和平台，设计师和开发人员不得不在产品的展现和体验的一致性方面做出妥协举措，并在疲于填铺平台的过程中浪费了我们如此多的精力。产品本来可以达到更高的水准，但移动终端碎片化（包括硬件和软件）的现实将美好的愿望阻拦在外。
当前主流的手机开发平台有：iOS、Symbian、Linux、Palm、BlackBerry、Windows Mobile、Android等。其中，iOS平台需要针对480*320、960*640及1024*768的分辨率分别设计；Android平台中QVGA分辨率为240*320，WQVGA分辨率为240*400，HVGA分辨率为320*480，WVGA分辨率为480*800，FWVGA分辨率为480*854等等；Symbian系统可谓历史悠久，现在开发主要针对S60 V3和V5两个版本，分辨率仍有176*208、208*208、240*320/320*240、352*416/416*352及800*352等众多种类。即使同一个平台，分辨率不同设计也就会有相应的差异。加之客户端产品需要不断的更新迭代，从1.0版本、2.0版本一直到N.0版本；每开发一次native app 就需要铺一次平台。并且现实状况是并非所有用户都会积极更新新版本，所以设计师和开发人员在研发新功能的时候还要顾忌之前的旧版本会不会支持等问题。不同的平台乘以不同的版本，人力物力被投入到了铺设平台的工作中，提高产品用户体验的精力比较有限。
于是人们受够了终端设备碎片化的折磨，开始期盼着一种有别于native app的事物出现。由HTML5技术开发的web app的出现给予了设计师和开发人员美好愿景。HTML5技术的渲染过程主要是由浏览器、内嵌HTML5解析器的应用程序、支持书签打开方式的应用程序抑或是移动手机产品进行的。如此，产品的上线和版本更新不再需要花费那么长时间来铺平台， Appcelerator的内部逻辑会将产品的UI转换为iOS或Android等平台的原生界面。同时，web app形式的产品不需要用户下载更新，通过网络即可以访问最新版本；也便于设计师和开发人员调试和修正错误，不再存在同时兼顾新旧版本的问题。
HTML5可以实现的效果
HTML5威力如此强大，确实拥有提高互联网产品质量、改善开发人员现实环境的潜力。因此设计师和开发人员需要对它进行必要的了解。但这并不意味着设计师就要放下自己手中的工作开始学习编程技术了，而是应当考虑HTML5对具体的设计将会有哪些明显的改变，HTML5技术可以实现什么样的设计效果？
在苹果、谷歌及微软等巨头公司的积极倡导下，HTML5技术进步神速，web app可以实现的效果愈来愈丰富。很多web app确实已经可以和native app相媲美了。对HTML5支持最好的浏览器是Safari和Chrome，Firefox和 Opera差强人意，IE浏览器支持度最低。如下图所示：
现在网络上常常会见到类似《使用HTML5开发的19个网站》、《25款超棒的 HTML5 Canvas 游戏》等相关介绍文章，设计师可以时常拿来把玩体验一番。本文囿于篇幅限制，在此只举几个应用HTML5技术比较典型的网站产品进行示例说明。
0
投稿猜你喜欢
方法一、使用os模块的system方法：os.system（cmd），其返回值是shell指令运行后返回的状态码，int类型，0表示shel- PHP crc32() 函数实例输出 crc32() 的结果：<?php $str = crc32("Hello World
- 大家可以先参考python切片复制列表的知识点详解这篇内容，对知识点用法有个了解切片，即处理一个完整列表中部分数据。语法 变量[起始索引:终
- 前言今天小编就带着大家来盘点一下数据抓取过程中这些主流的加密算法，它们有什么特征、加密的方式有哪些等等，知道了这些之后对于我们逆向破解这些加
- 记录微信小程序中使用wxss加载图片并实现动画的方式，最终实现loading效果。代码.weui-loading {margin: 0 5p
- asp网站程序在国内运用很广,但是类似于im286.asp?id=20050307213811这样的url有点不利于搜索引擎的收录,也就是说
- 本文实例讲述了python生成IP段的方法。分享给大家供大家参考。具体实现方法如下：#!/usr/local/bin/python#-*-
- HTML中使背景图片自适应浏览器大小实例详解解决办法：1、图片不够大，又background属性不能拉伸图片； 2、只能用个div，把其z-
- cvtColor函数这个函数有两个参数1，src 要进行变换的原图像2，code 转换代码标识例子：import cv2image=cv2.
- js代码： <script> window.onload = function(){ <PRE class=javascr
- 这篇文章主要介绍了python框架django项目部署相关知识详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价
- 短几年，Google 的 Logo 已经象 Nike 的挑勾和 NBC 的孔雀图案一样著名了。Ruth Kedar，Google
- 我发现有的网站利用了SQL SERVER提供的通过EXCHANGE或OUTLOOK收发邮件的扩展存储过程来完成收发和自动处理邮件（这句话太长
- javascript的字符集：javascript程序是使用Unicode字符集编写的。Unicode是ASCII和Latin-1的超集，并
- 今天因为做一个效果的时候需要CSS的定位来实现，于是我就根据自己原来对CSS的了解，用absolute和relative摆弄了好一阵子，总是
- 这些包可以独立使用，也可以与其他包一起使用以满足复杂的业务需求。Integration Services 可以提取和转换来自多种源（如 XM
- .asa是文件后缀名,它是Active Server Application的首字母缩写。Global.asa文件可以管理在ASP应用中两个
- loc和iloc的意思首先，loc是location的意思，和iloc中i的意思是指integer，所以它只接受整数作为参数，详情见下面。l
- 最近在做FLY量化交易系统的维护，总有客户说策略执行好慢，结果有些人展示策略一看，每个语句后边都要打印下数据。哪些数据都是辅助用的，打印出来
- 前言常见的通知方式有：邮件，电话，短信，微信。短信和电话：通常是收费的，较少使用；邮件：适合带文件类型的通知，较正式，存档使用；微信：适合告
