金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 15个令人震惊的HTML5实验,Web应用设计浅谈

15个令人震惊的HTML5实验,Web应用设计浅谈

发布时间:2019-11-04 21:12编辑:web前端浏览(179)

    15个令人震惊的HTML5实验

    2011/09/16 · HTML5 · 1 评论 · HTML5

    注:本文由敏捷翻译 – 翦丹编译自 Sonia Tracy 的博文。如需转载,请参见文后声明。

    除非你一直在岩石下生活,否则你不会没听过HTML5。现在几乎到处都有HTML5的身影,这得益于苹果公司前CEO 乔布斯和很多开发人员的推广。Sonia Tracy 收集整理了15个令人振奋的HTML5实验。提示:如果无法查看这些实验,请更新你的浏览器。

    1. Canvas Cycle

    艺术家Mark Ferrari 和 编码师 Joseph Huckaby的共同合作,这是一幅华丽动人的自然风景画,如冬日的森林,海景和山脉。他们看着这美不胜收并具有音效的图片,心旷神怡。如果你想从工作中获得片刻的轻松,这些照片可以瞬间融化你的紧张感。

    图片 1

    1. Google Gravity

    另一个来自于Mr.Doob的惊人之作,这比第一个的互动少些但是仍然十分棒。它提供了谷歌搜索主页的基本的副本。但是当你点击光标让整个页面开始“下滑”直到底部。谷歌标志作为一个迅速刷新页面的链接,这对那些讨厌谷歌的大公司来说是个很有意思的游戏。

    图片 2

    1. Canvas Trees

    这是有Kenneth Jorgenson创制,这可能是唯一一个地方你能够看到这种句子“刷新会有更多美味的树”。正如所说:你可以点击网站,然后它会带你到一个白色的背景。当开始计算程序中有多少分支时,黑色墨水绘制的树开始成长。你可以不断地刷新,只要你愿意。

    图片 3

    1. Magnetic

    这是另外个有意思又可供你娱乐的小东西。你基本以一对“磁铁”开始,这可以在屏幕上拖动。些许微粒光束围绕着它,如果你移动它可以改变他们的形状。如果你想要更多的磁铁和微粒,只需双击并拖动他们到任意地方。是的,他们都是有关磁铁和微粒。

    图片 4

    1. Celebrity Earnings Graph 名人赚钱图表

    想知道一个电视名人每集节目赚多少?这是个很酷的小图能显示成堆的彩条,它们代表每一个特定特定的名人(或像 Charlie Sheen). 这是 Daniel Rapp诸多项目中的一个。

    图片 5

    1. Canvas Ribbon

    Paul Truong 开发了这个有趣的应用,能够让你通过不停地移动在屏幕上绘制多色彩条。它能使形状和设计都十分漂亮。你所需要做的只是在屏幕上拖动。

    图片 6

    1. WebGL Water

    这还有一个很酷的演示,使用了革命性的WebGL(基于Web的图形库),在谷歌chrome上效果最好。在演示中,你可以荡起水中的涟漪,或拖动球体移动它,然后按某些键盘键设置光线的方向和切换重力,所有的都是见证如何在环境中灵活地移动目标。

    图片 7

    1. Chrysaora

    另一个由WebGL提供的令人惊异的演示,在这你可以看到一群非常漂亮活泼的水母在水中游动,梦幻般的阳光洒向书面。见证HTML5和WebGL所带来的网络生活,最好用谷歌Chrome浏览。

    图片 8

    1. Voxel Rain

    Voxel rain 意味着3D多色箱降成一个旋转的大块。这就像展示20世纪90年代的计算机,现在涉及到Web浏览器,利用HTML5的能力,互联网中最明亮的时代不会太远。

    图片 9

    1. HTML5 文本效果

    通常我们网页设计师不知道HTML5在Web排版突破上到底能给我们带来多大突破,并给你演示答案,比以往任何时候都跟多!你可以选择见证立体效果、霓虹灯效果,甚至移动的霓虹灯效果,未来的网页排版全在HTML5控制中。

    图片 10

    1. 旋转的 HTML5 Logo

    我Hold不住了,它旋转、旋转……这很酷。

    图片 11

    1. 3D绘图

    厌倦了2D基本HTML绘图服务吗?简单地画条线,然后向左或者向右移动,你将会看到你的旋转3D透视图。3D绘图与HTML5的结合不会更复杂。

    图片 12

    1. mta.me Conductor

    mta.me Conductor 通过涌现的点不断移动形成线,当线相互“碰撞”时给予你灵感,他们会引发一些互动。这些都证明HTML5不仅仅是代码,而是互动,是网页对于用户的真正关心。

    图片 13

    1. Doogle Gmail

    一个有趣的射击类型游戏,但主角是Gmail!就像经典的射击游戏,你获得生命、得分和全能的激光束。可能一个潜在的演示展示HTML5作为游戏的能力小心,Flash。如果还想玩其他HTML5 游戏,这里有10个HTML5游戏网站。

    图片 14

    1. W Pilot

    这是一个上瘾的游戏,它应该是非法的。严重的是,一旦你登录到他们的服务器,你将要玩几个小时。你基本上是到处乱飞拍摄的东西,同时避免由其他球员出手。它很简单并具有可玩性,允许多玩家操作,现在很受欢迎。

    图片 15

     

    原文:Sonia Tracy翻译:敏捷翻译 – 翦丹

    如需转载,但请注明原文/译文出处、译文超链接和译者等信息,否则视为侵权,谢谢合作!

    赞 收藏 1 评论

    图片 16

    Web应用设计浅谈

    2011/08/19 · HTML5 · HTML5

    注:本文转载自一叶苦雨

    HTML5技术的强势发展,为互联网带来的最大改变就是: web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中。Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主。

    本文将围绕web app的设计,与大家讨论几点设计技巧。

    什么是web app?

    Web app是一种通过网络(如互联网或内联网)访问的应用程序;也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言(如JavaScript)并依赖于web 浏览器来渲染的应用程序。Web app的流行归功于网页浏览器的普及,以及使用这一轻薄客户端方便的用户体验。不必下载安装就可以实现更新和维护,具有支持跨平台的内在属性,是web app开始流行的关键原因。典型的web app产品包括web邮箱、web商店、wikis等等。

    Web app的优点

    ◆通过兼容性浏览器实现配置而不需要任何复杂的“转出”步骤;

    ◆浏览器应用程序几乎不需要客户端上的磁盘空间;

    ◆新功能从服务器自动传递给用户,用户自己不必升级程序;

    ◆可以轻松整合进入其他服务类web程序;

    ◆跨平台的兼容性

    现阶段web app还很难有一个设计原则

    HTML5技术仍在发展中且发展尚不完善, web app作为该技术的产物自然也是在不断试验中进步;此外,web app还要依赖兼容性浏览器更强大的渲染能力,俗话说“皮之不存毛将焉附”,在大家都期待的强大浏览器出现之前谁也难以预言web app需要做成什么样才算是一个合格的产品。在这种行业背景下,web app还难以有一个所谓的设计原则,起码现在还不构成总结一个合理设计原则的条件。

    其实,所谓的设计原则本就是从已有的、典型的设计作品中倒推得出的。比如,解构主义设计风格的提出不是之前就有的,是理论家在分析总结了建筑设计师盖里、埃森曼、特斯楚米等大师的典型设计作品,结合这几位大师的设计理念后定义的一个流派名称。所谓的解构主义设计原则也是从权威大师典型作品中归纳总结的; 设计原则出现后继而可以对之后的设计起一定的指导作用。

    因此本文不谈所谓的web app设计原则,现从已经上线的优秀产品中选择典型设计元素与大家讨论分享,寻找可以借鉴的地方,并借此增进对web app产品设计的认识。

    Web app界面设计的8个实用技巧

    Web app用户界面设计,核心是web设计;不过与一般意义上的web设计相比较,web app更加注重功能。为了在与桌面应用程序的竞争中展现其优势,web app需要提供简洁、直观、快速响应的用户界面,以便于用户在任务操作中节省精力和时间。

    1.界面元素随需而变

    力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多,用户需要寻找和思考的时间也就越多。同样,界面中存在的选项越少,可用功能就越明显、越容易浏览。不过简化界面并非轻而易举,尤其是你不想减少应用程序功能的情况下。

    图片 17

    以Kontain搜索模块为例,在搜索框中有一个下拉菜单,帮助用户细化搜索范围。用户可以通过菜单选择自己想要寻找的内容。该网站通过这些选项简化了搜索框。

    将高级功能隐藏起来是一种有效的简化方法。搞清楚在界面中用户最经常用的是哪些功能,然后把其他功能隐藏处理。这些可由下拉式菜单和控件完成。例如,搜索栏中的高级过滤器可以做成尾部的特殊下拉菜单样式。当用户需要这些过滤器的时候只需要几次点击就可以使用。决定哪些功能保留展示哪些需要隐藏起来,并不是一个简单的工作,需要取决于功能控件的重要程度和被使用的频繁程度。

    图片 18

    擅长如此处理的还有CollabFinder, 如上图。用户点击搜索链接后并没有被马上带到其他页面;搜索框控件下拉下来,允许用户在当前页面内直接进行搜索操作。这样的设计方式,既保持了用户视觉焦点的稳定,又使得整个页面在不使用某个特定功能的情况下简洁清爽。

    2.为模态窗口增加边缘阴影

    弹出式菜单和窗口周边的阴影不仅仅是为了视觉美观。阴影一方面增大了菜单或窗口的尺寸,有助于将菜单或窗口从背景中区别开来;另一方面通过灰度化的边缘阴影可以屏蔽背景内容的噪音干扰。

    这个技巧根植于传统桌面程序,帮助用户将注意力集中在弹出的窗口。由于很多模态窗口不容易从桌面程序内容页面中凸显出来,阴影可以使它们看起来具有立体效果、仿佛悬浮于其他内容之上,于是拉近了模态窗口与用户的距离。

    图片 19

    如上图,Digg的登录窗口边缘拥有厚厚的阴影,对下面内容的视觉噪音起到了有效的屏蔽作用。

    为实现这样的效果,设计师往往将透明的PNG背景图片作为容器,再把内容填充到容器中,同时等距离填充弹出框各边缘。或者使用具有透明边框的背景图片,并将内容框绝对定位在其中。另外,也可以使用基于JavaScript的lightboxes命令或者CSS3中的 drop shadows命令,但需要注意浏览器是否支持。

    3.空白状态时告诉用户可以做什么

    当设计web app的时候,不仅需要关心一般情况下的信息展示,还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候,可以在空白区域放置一条帮助信息告诉用户如何开始。例如,一个项目管理的应用程序主页会列出用户的项目,假如还没有什么项目信息,可以为用户提供一个项目创建页面的链接。即使这个页面上已经存在了这样一个功能按钮,一个额外的帮助并不会有什么妨碍。

    图片 20

    如上图,Campaign Monitor在右边方向提供了一个建立新信息的快速入口。

    图片 21

    Wufoo的表单页面有醒目的、友好的信息鼓励用户去创建新的表单。

    这个技巧可以有效地鼓励用户试用该服务,并在注册后立即进行使用。通过应用程序的单一操作步骤可以帮助用户理解这个应用的优势以及对他们是否有用。

    此外,只为用户展示最重要的功能选项也很关键。一股脑的将众多功能倾泻给用户并没有什么实际意义。需要牢记的是,用户通常想从应用中获得或多或少的信息,但却不想跳进细节中,用户没有时间也没有兴趣。

    在空白状态中激励用户,可以显著地降低用户的流失率,并帮助潜在的用户更好的理解程序系统是如何工作的。

    4.Button状态积极反馈

    许多web app拥有自定义样式的按钮。默认的输入按钮可能不适合某些情景,文字链接有时候看起来又太含蓄。需要注意的是,把链接做成Button样式的时候,它们就应该有button的表现形式。比如,在点击button的时候它们应该会出现被“压”过的样子。这不仅仅是纯粹的视觉变化。及时反馈给用户,可以使web app感觉起来更灵敏,与桌面应用程序的用户体验更接近。

    可以使用CSS添加按钮的“pressed”等状态,实现在不同状态下显示不同背景图片的功能。

    图片 22

    例如Highrise中的按钮,在鼠标指针点击的时候会呈现 “pressed”状态效果,为用户提供了灵敏的反馈感受。

    5.使用上下文情境导航

    在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件,因为用户不是在任何情况下都需要它们。

    上下文情境导航最好的一个例子就是Office 2007中,原先默认的工具栏集合被换成了带状控件形式。每一项tab控制着一组相关联的功能,如编辑图形、校对或者简单书写。

    Web app可以从这种上下文情境导航中获益,仅展示用户需要的、而不是所有可用的功能,从而保持用户界面的整洁清爽。

    图片 23

    例如上图中,Lighthouse 有非常典型的tab导航菜单;然而,在tab导航栏的下方它还有二级导航,在这个二级导航中只显示网站活跃部分的相关条目。

    6.更加重视关键功能

    并不是所有的控件都拥有相同的重要性。例如创建一个新的条目,页面中会有“创建”“取消”两个button. 这里的“创建”就要更加重要些,因为这是大多数情况下用户即将要做的事情。极少的情况下用户才会去点击取消。虽然这两个控件并排放置,但是不要给予相同的重视程度。

    为了将注意力引导到“创建”上,我们可以尝试使用不用的风格或样式。一种方式是将“创建”设计成button样式,“取消”设计成文字链接样式。另一种方式是在视觉上使用使用不同的颜色,并使button略有凸起的效果。这样便于抓住用户的目光。

    图片 24

    例如在Google+创建新圈子的弹窗中,创建按钮在视觉上具备了更加醒目的效果,拥有该页面中更高的重视等级。

    7.嵌入视频

    虽然图片和文字是向用户介绍应用程序功能的很好的方式,但如果资源允许的话,视频将是一个更优方案。近年来视频在网络上的使用越来越频繁。Web app的截屏视频经常被使用在营销网站中来展示产品的功能;然而这并不是视频使用的唯一方式。

    图片 25

    GoodBarry 在其首页中使用截屏视频来展示产品。同时它还在应用中嵌入了视频来指导用户如何去开始。

    图片 26

    MailChimp在管理面板中使用教程视频以帮助新用户。

    一些web app使用内部嵌入的视频帮助用户了解产品的特定功能。视频是快速演示产品如何使用的绝佳方法,因为与文字相比视频更容易被用户所接受,而且视频可以使用户准确地看到需要做什么,更加清晰。

    8.让升级或降级的提示简洁、不扰民

    在很多互联网产品中都会有不同权限的用户账户存在,比如邮箱、空间、网盘存储、SNS产品等。在用户拥有了一个账户后,他们可以对账户进行升级或降级。如何设计界面来提示用户他们可以升级而不去干扰用户的工作流程呢?设计师肯定不愿意在应用程序之外完成这件事情,这样的提示应该是和app是无缝连接的,而且最好是让用户感觉方便。因此升级账户的提示最好放在app内完成。
    通过几个例子我们了解一下升级账户的处理方式。

    图片 27

    FreshBooks 的升级提示是一直存在的,被放置在了web app的底部。如上图。由于提示是在界面的工作区以外的位置,并不会对用户的工作流程造成影响。

    图片 28

    在Basecamp的升级提示中,用户可以很清晰地得知升级后将会有哪些变化。请看上图。

    图片 29

    在CompVersions中,各种升级后的变化情况很直观 ,整个页面简洁清晰。请见上图。

    总结

    Web app的设计细节远不止上文中提到的这些,本文只算作抱砖引玉,希望大家可以在已有的优秀产品中发现更多思考的触发点。当我们习惯了走马观花地浏览其他公司产品的时候,我们已经对太多的东西习以为常;当我们开始设计用户界面,开始处理细节的时候,却时常会有拿捏不准的感觉。如果平时多总结一下其他产品(不一定拘泥于自己的产品圈子)的细节亮点,相信很多东西在实际工作中可以为我所用。

    赞 收藏 评论

    图片 30

    HTML5终极指南:2012年的14个预测

    2011/12/23 · HTML5 · HTML5

    来源:IT经理网

    无论是当红科技企业如Zynga、Facebook、Google和Apple,还是刚刚诞生的初创企业,2012年都是决胜HTML5的一年。以下是关于HTML5在2012发展趋势的大胆预测:

    一、欢迎来到更加互联的Web世界

    2012年,html5 将增加更多有用的开放接口API,供开发人员使用,让网站之间的连接更加紧密。

    例如,Facebook上的Zynga游戏在iFrames里运行。通过调用最新的PostMessage API,这些游戏能在Facebook包容框架内互相之间通讯。在HTML5之前,不同窗口之间的通讯需要依赖远程服务器——或者使用不稳定的破解方法。

    另外一个让人兴奋的新功能是CORS(Cross Origin Resource Sharing)。这是不同网站之间分享信息变得非常容易。例如,CORS将允许初创企业开发出一种能够编辑facebook图片的编辑服务,允许你修改之后再上传,无需通过糟心的破解途径。

    基于HTML5的的语义信息(例如Semantics和Microdata)创建提取web页面信息的web工具变得更加容易。因此,将有大量的Mashup混搭服务出现,出色的浏览模式也将越来越多(例如readers阅读器和translators)

    图片 31

    二、Web浏览器看上去更像iPhone

    每个人都喜欢苹果的iOS操作系统。现在你可以在HTML5上看到了。2012年你的右脸其将开始支持push notifications通知服务,geolocation地理位置服务,以及可以离线使用的应用程序。有些浏览器可能会采用更加类似iOS的用户界面。

    三、越来越多的应用程序将基于HTML5创建,而不是以可下载应用程序的方式出现(例如金融时报的客户端)

    你可能已经在使用电子邮件、日程和图片分享等web应用程序,2012年将有更多类型的程序推出HTML5版本。你将看到类似Inkscape和Illustrator这样的内容创建程序也开始支持HTML5。

    四、IE浏览器和微软将变得“酷”很多

    微软对浏览器 IE 已经投入了巨资,并且很多资金用于提升 html5的性能,未来将在 IE10上有所体现。IE10凭借Canvas硬件加速功能将在速度测试上击败所有其他浏览器竞争对手。此外微软还在HTML5页面与桌面电脑的功能整合方面别具匠心,并最终推动HTML5应用的开发热情。

    五、浏览器厂商将推出应用程序商店业务

    看到苹果公司的移动应用商店 App Store 的巨大成功,并且结合 html5 的日渐成熟,未来浏览器厂商将会构建自己的网络应用商店 Web App Store,从而对苹果公司应用商店可能构成冲击。其实,谷歌公司的 谷歌浏览器Google Chrome 已经推出了网络应用商店。这个趋势对于HTML5应用开发者来说是个好事——这意味着程序将有更多的销售机会,尽管不同平台的支付平台和分账机制还未就绪。

    六、至少有一个基于WebGL的重量级主机游戏会发布(再发布)

    2012年至少有一个AAA级别的主机游戏公司会迈出这一步,发布一款基于WebGL的,无需客户端的3D web游戏。也可能采用重新发布一部游戏大作的方式(例如团队要塞2或者刺客信条),或者是一款流行的多人在线游戏如魔兽世界,当然也有可能直接发布一款全新游戏。

    七、多数应用都将通过离线缓存来支持离线工作

    离线缓存技术将会迅速提高 html5 的可用性和应用范围。基于缓存而不需要联网,就可以查询本地数据库和服务,这一方面能提高HTML5应用的运行速度,提供类似传统桌面应用的流畅性,同时也能带来一些安全性话题,例如你可能在清理计算机缓存的时候不小心擦除掉你正在处理的文档或者工作进度,或者为恶意软件远程访问你电脑上的私密数据打开方便之门。

    八、HTML5广告将取代Flash广告变得无处不在

    html5 广告可以兼容 Flash广告,随着致力于基于 html5 提供各方面技术和工具以及各种服务的创业公司不断涌现,HTML5广告面临的沙盒问题、安全问题以及认证工具等问题都将得到解决。

    九、JavaScript 随着内存管理和数据类型的改进而提高运行速度

    JavaScript已经是世界上运行最快的脚本语言之一了,但还是有提高空间。Google Chrome已经开始着手推动更好的内存管理和垃圾收集算法。加之更优秀的数据类型管理,Javascript将获得与Java等成熟语言较为接近的性能表现。

    十、Canvas硬件加速技术将被应用于多种浏览器(但不会是主流浏览器)

    其他浏览器厂商都会学习微软引入硬件加速技术,不这么做就会显得落伍。火狐浏览器面临的形式最为严峻,如若不引入硬件加速将可能重演IE悲剧——迟钝、肿胀并被遗留代码活活拖跨。2012年主流移动浏览器还不会支持硬件加速,这估计要等到2013年。

    十一、人们将能在移动设备上玩到Zynga等公司的HTML5流行游戏,但限于一些较为简单的游戏

    你也许能看到有人玩纯HTML5版本的Zynga扑克、字谜、Mafia Wars等游戏,这些游戏可以在网页里,也可以在facebook原生应用里运行。但这些都会是写基于菜单的游戏、棋牌游戏或者角色扮演游戏,更复杂的富有视觉冲击的游戏例如Ville还需要等待一段时间。

    十二、Facebook将发布改进的HTML5 API,允许与其他网站更加无缝集成

    十三、Facebook将于桌面更加无缝集成

    想想吧,任意拖放、文件系统访问、照片同步以及桌面Widgets。这些功能将模糊桌面与浏览器之间的界限,让社交图谱与桌面体验紧密结合。

    十四、苹果依然不会在移动版Safari上支持HTML5的声音功能

    iOS3时代,html5 的声音功能在移动Safari上一切正常,但是苹果在 iOS4 和5 版本中禁用了大多数的API调用,因为这可能会冲击iTune业务。2012年,苹果依然不会放松对苹果生态系统的绝对控制权,并拒绝向 html5 提供声音接口API。

    原文出处:The Definitive Guide To HTML5: 14 Predictions For 2012

    赞 收藏 评论

    图片 32

    本文由金沙国际官网发布于web前端,转载请注明出处:15个令人震惊的HTML5实验,Web应用设计浅谈

    关键词:

上一篇:没有了

下一篇:没有了