搜尋
首頁web前端H5教程设计师视角看HTML5

HTML5被传为Flash的杀手,是一种用于web应用程序开发、具有变革意义的网络技术。HTML 5提供了一些新的元素和属性,其中有些是技术上类似和标签,但有一定含义,例如和这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。同时为 其他浏览要素提供了新的功能,通过一个标准接口,如和标记。

除了原先的DOM接口,HTML5增加了更多样化的API:

  • 实时二维绘图——Canvas API:有关动态产出与渲染图形、图表、图像和动画的API。
  • 定时媒体播放——HTML5音频与视频:HTML5里新增的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API,而无需安装任何插件。
  • 离线存储数据库(离线网络应用程序)
  • 编辑
  • 拖放
  • 跨文档通信
  • 通信/网络——Communication APIs:构建实时和跨源(cross-origin)通信的两大基础: 跨文档通信(Cross Document Messaging)与 XMLHttpRequest Level 2。
  • 浏览历史管理
  • MIME和协议处理程序时表头登记
  • 微数据

以上技术说明存在于WHATWG HTML说明文档中,但并没有全部包含在W3C HTML5的说明文档里;W3C另对一些技术做了单独说明,此文不再一一赘述。

听起来略有些太过技术了,那么HTML5对设计将会有哪些影响呢?这是网页设计师和开发人员不厌其烦讨论了编程代码后不得不考虑的问题。

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

现在网络上常常会见到类似《使用HTML5开发的19个网站》、《25款超棒的 HTML5 Canvas 游戏》等相关介绍文章,设计师可以时常拿来把玩体验一番。本文囿于篇幅限制,在此只举几个应用HTML5技术比较典型的网站产品进行示例说明。

移动终端

1.Gmail


设计师视角看HTML5

2.Youtube


设计师视角看HTML5

3.Vesseltracker

设计师视角看HTML5

4.GeoCongress

设计师视角看HTML5

5.BusinessesForSale.com

设计师视角看HTML5

6.TriOut Mobile

设计师视角看HTML5

7.ING Direct

设计师视角看HTML5

8.AOI

设计师视角看HTML5

9.Naver

设计师视角看HTML5

10.百度无线小说

设计师视角看HTML5

PC端

1. Flickr Browser

设计师视角看HTML5

2. X-Worlds

设计师视角看HTML5

3. CSSWarp

设计师视角看HTML5

4. CSS3.0 Maker

设计师视角看HTML5

5.Tiny Fluid Grid

设计师视角看HTML5

6. HootSuite

设计师视角看HTML5

7. Aviary’s Image Editor

设计师视角看HTML5

8. Twimbow

设计师视角看HTML5

9. Scribd

设计师视角看HTML5

10. Google Body Browser

设计师视角看HTML5

设计师通过亲自体验这些HTML5手机应用或网站,对HTML5所能支持的效果细节会有一个大概的、感性的认知。籍此获得的设计感知能力远比看几行让人头晕的代码要深刻、易于运用。

HTML5近期为什么无法成为主流

看了以上网站的效果,是不是感觉HTML5很酷?既然它这么优秀,既可以就解决终端碎片化的困扰,又便于开发人员实现,那么为什么我们不赶紧将 HTML5推广开来?我们到底在等待什么?然而残酷的现实告诉我们,HTML5的时代还没有真正到来,在近期内仍无法取代native app成为主流。笔者根据自己的理解,将原因归结为以下几点:

HTML5本身

W3C表示在2014年之前不会公布有关HTML5的标准。现在各大公司积极开发意图走在web app产品研发中的前列,但仍处于探索阶段。HTML5还没有清晰明确的统一标准,也就难以大范围的推广。等待该技术成为主流,仍需尚待时日。

浏览器

没错,web app确实只需要网络访问就可以。但是产品的效果需要支持HTML5技术的浏览器进行渲染,产品的组件需要浏览器的控件库来搭建完成。现有的浏览器在控件 库方面都存在漏洞,致使web app的效果无法全部施展,加载速度较慢。HTML5大行其道,一个强大的浏览器的作用非比寻常。而这个强大的浏览器什么时候才可以出现,还没人知道。

网络信号

Native app 在离线状态下依然可以使用一些功能,稳定性比较好。相比之下Web app对网络的依赖性更大。这一点和“云”有些相似,没有接通网络就无法使用其服务(虽然HTML5支持离线存储)。现今国内的wifi普及率还非常 低,3G网络覆盖率也有待完善而且费用偏高、稳定性不强。无论从稳定性还是流量资费角度考虑,用户都没有能力舍弃native app.

移动终端

移动终端(主要是手机)的市场分布情况也是HTML5的影响因素之一。智能手机的市场份额还比较小,功能手机仍占有绝对的优势地位。而在web app的支持性方面智能手机无疑是最好的,其次是社交手机,功能手机支持性最差。移动终端的市场份额分布情况成为HTML5近期推广的瓶颈。如图所示:

设计师视角看HTML5

设计师应如何应对HTML5?

在了解了HTML5技术的优势、效果以及实现进度之后,设计师应该考虑自己接下来需要做些什么了。HTML5是互联网研发的必然趋势之一, 具有提高产品品质的巨大潜力。设计师唯有顺应这一潮流的发展,积极投身到HTML5的试验研发中,才能在时代的大潮中握有先机。那,我们应当怎么做抑或做 些什么呢?笔者有几个浅薄的建议分享给大家:

形成企业的一致风格,增强识别性

现在的native app都需要经过严厉的审核才能上架“应用商店”,即使如此,应用程序已经开始数量激增,找到一个满意的应用谈何容易。如果web app的时代到来,用户只需要通过浏览器就可以轻松使用某个应用程序,没有了“应用商店”的限制,应用程序产品的数量将难以估计。这个时候我们需要担心我 们的产品会不会被淹没在其中。为了避免这样的悲剧,一个有效的办法是使同一个公司的产品具有一致风格,并且鲜明有特点,这样可以更有效的抓去用户的注意 力,增强产品的识别性。

开始注重特定浏览器的适配

为特定用户而设计,也就需要为用户所使用的特定浏览器而设计。只有当我们控制了使用环境,我们才能控制确保用户角度的产品效果更好。也许HTML5的时代不需要再频繁的铺平台,但为特定的浏览器设计特定的效果是进一步提高用户体验的重要举措。

Google Wave是一个不错的例子。Google Wave试图把博客、邮箱、即时通讯以及wikis结合起来,成为一款强大的网络交流服务。它是由HTML5编写的,并不支持在所有浏览器上使用。虽然因 为关注度不高被Google停止服务,但Google Wave作为一次尝试,已经在HTML5的发展道路上走了很远很远。

设计师视角看HTML5

打破思维定势,注重运用技巧

这一建议来源于实际的工作,针对的也是实际工作中会遇到的情况。Web app 的设计工作中,所需要应用的HTML5技术效果往往没有那么多;即使有,团队中的RD也未必全都做得出来。其实用户不关心这个效果是使用什么编程语言完成 的,用户关心的是交互是否顺畅、视觉感官上是否有品味。因此设计师需要在细节上注重提升web app的品质感,比如边框的设计,比如翻页的设计,比如子产品列表的设计等等。甚至可以尝试做一些“伪app效果”。这方面m.naver.com做得非 常棒,布局设计、功能按钮的设计都酷似native app,子产品的列表全部做成高品质的icon样式;其实不过是一个图标加一个链接那么简单。

设计师视角看HTML5

重视移动互联网

HTML5在移动互联网中的需求最旺盛,潜力也最大。适配碎片化严重的移动终端从长远看不是理想的办法,但现阶段还摆脱不了这一现实。现在我们所拥 有的最好的移动实验平台是iphone,它的适配比例已经足够高了。如果做Html5新产品的API支持测试,建议还是使用iPhone.

总结

HTML5技术正引领互联网朝web app方向发展,这是互联网发展的必然趋势之一。Web app将越来越多的走到用户面前。设计师在面对HTML5技术的时候,既需要了解当前该技术可以实现的效果,又需要在实际的工作中不断摸索和总结设计技巧 和策略。紧跟web app的发展,不断尝试,对设计师来说既是一次冒险,也是一次难得的机遇!


本文由HTML5中国网站小编整理发布,转载请注明出处。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
H5:網絡標準和技術的發展H5:網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能,使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎?探索細節H5是HTML5的速記嗎?探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱,它代表了一個更廣泛的現代網頁開發技術生態:1.H5包括HTML5、CSS3、JavaScript及相關API和技術;2.它提供更豐富、互動、流暢的用戶體驗,能在多設備上無縫運行;3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5:網絡開發中常用的術語H5和HTML5:網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西,即HTML5。 HTML5是HTML的第五個版本,帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能,提升了網頁的表現力和交互性。

H5指的是什麼?探索上下文H5指的是什麼?探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5:工具,框架和最佳實踐H5:工具,框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面,支持組件化開發。 2.React通過虛擬DOM優化頁面渲染,適合複雜應用。 3.Webpack用於模塊打包,優化資源加載。

HTML5的遺產:當前了解H5HTML5的遺產:當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼:可訪問性和語義HTMLH5代碼:可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構,提高SEO。 2.ARIA屬性如aria-label增強可訪問性,輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎?H5與HTML5相同嗎?Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的,但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準,包含新標籤和API。 2."h5"通常是HTML5的簡稱,但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具