设计Web App应当注意些什么?看看Google的开发人员怎么说

  随着移动应用占据了网络用户越来越多的时间,移动应用的用户体验也越来越受到开发者的重视。在新近举行的Google Chrome 开发者大会上,Google的开发者关系主管Paul Kinlan分享了一些自己对Web App的看法,Lukew对其分享的内容作了一些总结。

  就目前的情况来看,还是本地应用的用户体验设计走在最前端,一些优秀的交互方式比如声控和卡片模式已经被本地应用广为采用,但Web App却很少使用这些已经被公众认可的交互方式。

  Alexa排名前一千的站点中超过半数仅仅把自己的网站按比例缩小以适应移动端屏幕,更有25%的站点甚至不能很好的和屏幕相匹配。超过八成的移动网页缺乏对触摸点击的优化,六成的移动端网页有可读性问题,一成的网页插件不能在移动端正常工作。

  为了帮助开发者提升网页的用户体验,Google发布了开源的网页分析工具PageSpeed Insights,开发者可以借助该工具对网页的字体、可操控性、窗口等多个方面进行优化。

  开发者应当保证让内容和移动浏览器视区窗口相匹配,毕竟多个维度同时滑动的滚动条难免让用户感到虐心。Chrome会自动调整移动网页字体的大小以此来来弥补移动端网页的设计瑕疵。

  16像素在屏幕上是人眼辨识度的阀值,行高和对比度对可识别性一样有很大影响。开发者需要有限度的在移动端使用网页字体,特别是在网页正文中,这将有助于避免FOUC——文档样式短暂失效。

  网页上可点击的目标需要有7mm大小并且伴随着2mm的颜色填充,这样才不至于给用户带来点击困惑。表格中的标签应当比可点击目标大到两倍以上以方便文字输入。

  在需要的时候调用浏览器的自动填充功能,该API可以使用JavaScript帮助用户完成表格自动填充。此外对表格使用特殊的输入方式以让用户能更加精确的在移动端输入也是必要的。

  现在的网页开发者不得不在多种多样的移动设备以及日新月异的交互方式里周璇,使用恰当的工具、接受合理的交互方式既有利于完善自己的产品又有助于提升自己的开发潜能。虽然本地应用占据了很多的用户时间,但网页应用一样会长期存在并具备自己独特的优势,所以优化自己的移动端网页应用理应受到服务提供者的足够重视。

时间: 2024-09-24 15:31:33

设计Web App应当注意些什么?看看Google的开发人员怎么说的相关文章

Web App设计浅谈

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

Web app设计细节:web app互动设计技巧

文章描述:Web app设计浅谈 . HTML5技术的强势发展,为互联网带来的最大改变就是: web从"已死"的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中.Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的"云"服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的设计,与大家讨论几点设计技巧. 什么是web

WEB APP与原生APP有哪些交互设计区别?

  从使用场景上,Web App用户面临比原生APP用户更严峻的问题: 1. 页面跳转更加费力,不稳定感更强 思考点:如何减少跳转(扁平结构.页面布局技巧),增加数据及展示的流畅流程及稳定性(技术) 2. 更小的页面空间(由于浏览器的导航本身占用一部分屏幕空间),更大的信息记忆负担 移动设备的屏幕要小得多.这种如同透过门缝进行的阅读增加了认知的负担.人脑的短期记忆是不稳定的,用户在滚动屏幕的过程中需要临时记忆的信息越多,他们的表现就会越差.--<贴心设计:打造高可用性的移动产品> 思考点:排版

聊聊WEB APP、HYBRID APP与NATIVE APP的设计差异

  这3类主流应用你都了解吗?设计师除了要有视觉功夫,对不同形式的APP也应当了然于胸,今天百度的同学写了一篇非常全面的总结,帮你迅速搞定3类主流APP的设计方法,附带一大波避雷针,带你巧妙跳过APP设计的雷区,涨姿势是分分钟刻不容缓的事咯! 目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web App.Hybrid App. Native App.

如何提升企业产品WEB APP的用户体验?

  Web App 设计要点 1. 配色 颜色作为设计师传达情感的主要元素之一.一个明确的品牌颜色,对信任度,认知度都会有大大的提升.颜色除了能为界面提升美感,也能作为功能上的辅助.在普遍页面信息量大的企业产品中,往往一个有颜色的按钮就很容易吸引用户的视觉焦点. Lovely是Dribbble大神Kerem Suer设计的Web App.橙色主,蓝色辅助,淡灰色为底色.这个配色既色彩鲜明,淡淡的感觉更让人长时间使用也不觉累.整体感觉和谐舒服,简洁耐看. Squarespace用的是黑白配,可说是

Web App、Hybrid App与Native App

转载文章需要在明显位置标注转载来源:http://www.woshipm.com/pd/123646.html 目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web App.Hybrid App. Native App. 1. Web APP Web App 指采用Html5语言写出的App,不需要下载安装.类似于现在所说的轻应用.生存在浏览器中的应用

移动 App 开发人员应该关注的 7 件事

Apple App Store里有130万的app,而Google Play则托管了140万的app.在竞争如此激烈的移动应用环境中如何确保我们制作的app能获得大量的下载量呢? 广受用户欢迎,并创下了上百万的下载量是每一个移动app开发人员的终极梦想.但是,这谈何容易呢! 在最近的一次网络研讨会上,Rahui Nischal,Nucleus Software Exports公司的高级产品经理,就谈到了开发人员要想创建有吸引力的移动app,所需要关注的几个关键方面. 1.理念是根本 一个移动ap

WEB设计技巧:Web开发中经常使用的网站和Web App

文章描述:Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App,其中包含各类字体库.代码库.插件库.配色方案和测试工具.他同时指出,Web开发环境将慢慢转向云端. Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App,其中包含各类字体库.代码库.插件库.配色方案和测试工具.他同时指出,Web开发环境将慢慢转向云端. CodeVisually是一个开源项目.在它的分类目录下有各种插件.

Web App动效设计原则 Web App的设计方法

文章描述:Mobile Web App的设计方法 [编者按]本文作者:邓腾(@千年牛皮糖),百度无线交互设计师 .在本文中,作者将给大家谈谈Mobile Web App的设计方法,内容包括:Web App定义.Web App的特点.发展现状及设计等等.希望对大家有所帮助. Native App与Web App的争论从未停息过,尽管很多人在批判Web App的各种不是,但也阻止不了各种各样的Web App如雨后春笋般出现,尤其是伴随智能手机的普及而受到重视的Mobile Web App.这是一种在