当前位置:首页 > 经验学习 > 交互设计

手机网页也Fashion——HTML5交互亮点解析

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

白底黑字,只有链接是蓝色的;段落隔行只neng(能)用十个“–”来默默的表现;图片都小小的,没有边框没有细节,每逢图片旁边都戳着三个小小的字写着:“看大图”,而在用户xin(心)里这三个字基本约等于“费流量”;“面包屑”已经是很洋气的术语,代表着页面之间的层级关系和来龙去脉;3个点击以后的页面流量都不需要再care,因为少得可怜;没有真正意义上的tab选项卡,没有ju(局)部刷新,没有质感的控件,一切从简。–这听起来仿佛已经是上个世纪的回忆,然而改变这一切的HTML5其实诞生不过才几年前的事。
如果不太了解的童鞋要具体的问什么是HTML5,自己去搜搜吧。简单的说它可以被侠义的理解为是HTML4的升级版本,guang(广)yi(义)的理解上它是一套新的web系统,由HTML5\CSS3\JS组成,这一组合可以让手机端的web网站通过支持HTML5协议的浏览器实现和电脑端网页几近相shi(似)的展示与交互效果,甚至是超越电脑端的无限可能。
以手机QQ空间Wap版的几个版本来简单标识一下,手机网页发展的几个进程:


以shang(上)两个版本都shi(是)手ji(机)网站最初的普遍的样子,为适配da(大)部分的JAVA、MTK、Symbian手机系统浏览器而生,用户访问网页时通过手机键盘上下左右按键甚至是数字键来移动“光标”和页面,用手机键盘的确认键进行点击。

【正在内测中的新“触屏版”】
跟普通版、3G版相比,触屏版打破爪机网页传统体现出的不同特征一目了然,无需赘言。
相比电脑端网页,HTML5所提供的特性对于手机端网页的意义或许更为重大,它让手机端web的表现彻底抛弃了简陋的外衣披上了华服:
特性1 – Canvas :用于在网页上绘制图形,类似于flash在网页中的作用,可编写动画、嵌入音shi(视)频等。
目前网站上最常yong(用)到的Canvas动画就是loading时不停转动的daisy(俗称,菊花…),Google+、twitter把这颗菊花修饰的很细致很漂亮,以及导航栏的交互设计等,精巧的搭配提升了整体的设计感与精细度,深得“细节控”高端用户者的喜爱。

此外,利用Canvas实现的涂鸦功能也为人所熟知,现在在电脑上用鼠标随手绘图已经不新鲜,在手ji(机)上用手指当画笔,随意画图并即时shang(上)传fa(发)布与好友shareni(你)的绘画才能,仿佛才是正经事。(嘿……)
特性2-地理位置服务:通过向浏览器请求,获取GPS、WiFi热点等方式定位用户当前地理位置。
有了HTML5,定位服务将不再是客户端app的特有属性,这一特性也将让手机网页用户的分享变得更加轻松和清晰。围绕LBS服务扩散看来的社交及商务需求已经有了铺天盖地的各种实验,对我和我的朋友来shuo(说)它的意义可能更简单一些:身边的朋友们常常yi(一)会儿飞zhe(这),一会到那,一会儿在吃大餐,一会在party聚会,分享的信息中用地理位置“钉”一下就可以省去一段文字的描述,发条带地理位置微博或者说说告诉你,嗨,我在这儿,来找我吧,已经成了我们的习惯。如果在地图展示功能上可以标出朋友与我之间的距离与路线就更加fang(方)便了,期待这个功能。

特性3-离线运用:使web程序也能像客户端程序般在无网络情况下运行部分功能。
听起来hao(好)像没什么特别的,但不妨设想一下na(哪)天你灵感大爆发突然想xie(写)点东西比如发篇日志什么的,在网络条件不好的情况下,这一特性或许正为你所需要。我常常这样:在路上看到一段话或听到几句歌词,心里面感触翻江倒海霎那间灵感如泉涌,想写点什么,但心想,呆会儿回去再组织语言吧。等回到家打开电脑打开界Mian(面),脑子里却一片空白。(呆……)当然更常ti(体)会的是等人等车又没有wifi的时候,刷微博刷好友动态时的痛苦。我十分非常特别讨厌等……鉴于以上无聊却又时常发生的场景需求,离线读写是必要性的。没网络时我先打开网页写写,有了网络时提醒一下我,确定,发送。在办公室有wifi的的时候先帮我加载一些信息,让我在回家路上即使是2G网络或是没有网络的情况下我还可以快速的看到我的好友之前都说了些什么,这就足够了。
特性4-音视频播放:不用插件和flash,原生支持音视频播放,自带默认播放控制器。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: