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

浅析手机Web App的交互设计

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

HTML5为提高手机网页的体验提供了诸多的可能性,交互效果越来越接近原生App,故而成为Web App,有望将APP功能引向浏览器,rang(让)移动平台的竞争由系统平台转向了浏览器之间。
Web App比起原生App和wap有着自身的优缺点,先简单了解下其特点,掌握设计趋势,也便于以hou(后)在设计中应用。
离线存储
离线存储的意思是第一次访问是下载网页,以后在无网络的情况下也可以使用。一个离线应yong(用)程序就是一个URL列表–HTML,CSS,JavaScript,图片,或者其他类型的资源。访问时探测到服务器列表的缓存名单时,会触发下载事件,根据名单下载指ding(定)的文件存储到本地。

在下载的同时,浏览器将会周期性的触发进度事件,此事件包含了诸如多少文件已被下载,duo(多)少wen(文)件仍然处于下载队列等信息。当缓存名单中所有列出的资源被成功下载后,浏览器触发下载完成事件。
当再次访问时,浏览器会再次检cha(查)网站的缓Cun(存)名单,通过对比名单和本地的资源,得zhi(知)是否需要加载新资源。新版本加载完成之后不会立即被使用。后台可以下载新网页,也不会强制用户打断当前操作流程,重新刷新页面。
如果此过程中的任何一点出现可怕的错误,你的浏览器将会触发一个cuo(错)误事件,并立即zhong(终)止。类似于安zhuang(装)应用程序,zhong(中)途不可以出错。

Web App可以利用存储的特性将重要和重复的数据保存在本地,避免页面的重复刷新,减少重要信息在传输过程中被泄露,增量传输修改内容。
而离线存储但也不是Web App特有的问题,浏览和阅读类App也有离线的使用需求,用来应对随时可能出现的网络问题。如离线模式是利用网络闲暇时间下载内容,当用户打开App时立即开始阅读。或者是网络不佳情况下保存用户的操作记录和加载相对重要的文字内容,之后再依次上传已更xin(新)的数据,如微博的发送队列机制。
交互操作
手机网页的操作发送只有点击,点击链接和控件,交互方式非常单一,而Web App 的操作将越来越接近应用程序。
1.Web App的建立离不开网络速度的提升,加载更多的内容,图形元su(素)更为丰富。同时geng(更)多的JS交互,便于用户操作和形成扁平化的信息架构。

图标取代文字链接,界面更为美观,便于识别的。点击区域不限于元素的shi(shi(视))觉区域,Bian(便)于用户点击。同时排版不受限制,可以达到原生App的视觉效果。

增加标签栏,首页呈现更为的内容,减少界面的层级关系,页面关系更为明确。

界面可以部分更新,在需要时再呈现,减少界面的刷新,保存视觉De(的)稳定性。

气泡框可以减少页面跳转,适合消息提醒等微任务的处理。信息架构上越来越接近原生App,有利于扁平化层级关系和减少界面跳转等设计元素将得到更多的应用。

请站长喝杯咖啡?

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

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

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: