《谈谈MobileWebApp的设计方法》由会员分享，可在线阅读，更多相关《谈谈MobileWebApp的设计方法（8页珍藏版）》请在金锄头文库上搜索。
1、泽思网络 上海 APP 开发商 谈谈 Mobile Web App 的设计方法Native App 与 Web App 的争论从未停息过，尽管很多人在批判 Web App 的各种不是，但也阻止不了各种各样的 Web App 如雨后春笋般出现，尤其是伴随智能手机的普及而受到重视的 Mobile Web App。这是一种在非议声里成长起来的产品形态，无论其结果如何，都应该吸引开发者和设计师的关注。一. Web App 定义维基百科对 Web App 的定义是：Web App 是指使用浏览器支持语言编写的 App，运行于浏览器中，通过网络访问。所以移动 Web App 就特指特指运行在智能手机浏览器
2、中的 Web App。我认为在用户眼里，它是 App；在开发者眼里，它是 Web。二. Web App 的特点Google Chrome 开发小组推出的Web App 开发指南提出了如下对 Web App 的判断标准：是否独立，完成当前任务不需要链接到另一个完全不同的使用环境？使用它是否可通过交互、参与并完成特定任务？是否具有良好的用户界面，看起来非常美观，并且占据全屏？是否使用和本地应用一样的界面模型，比如按钮、对话框或者其他元素？是否可以离线工作？是否应用了设备的某些功能，比如使用到来自 GPS 的定位和动作传感器的数据？是否隐藏了传统的网站导航栏和导向链接？应用是否是参照客户端架构模型设
3、计？泽思网络 上海 APP 开发商 这也不是本文讨论的重点，仅供读者参考。另外就是谈 Web App 和 HTML5 的文章必提的 Web App 相对于 Native App所存在的优势和不足。【优势】跨平台和终端更新实时，无需用户手动升级开发成本和技术门槛很低，前段开发工程师可快速上手无需安装、占空间少易于维护搜索引擎索引优化调试，发布方便【劣势】受限于浏览器，性能和界面效果存在差距严重依赖网络连接调用硬件和本地文件不便无法在 app store 里上架销售，但未来搜索引擎可以扮演 Web App 的分发入口也说不定下面是关于开发各平台应用的语言、开发工具、应用格式和应用商店的对比图：三.
4、 发展现状截止到目前，app store 和 google play 中的 app 数量均已接近 70 万，marketplace 的 app 数量接近 13 万。而且随着 iOS、Android、Windows Phone各平台层出不穷的新设备的发布和普及，app 数量始终保持着增长态势。泽思网络 上海 APP 开发商 Web app 由于其定义比较模糊，所以暂时还没有一个比较准确的统计数据。但国内主流的手机浏览器都将 Web App 放在很重要的位置（从左到右依次是遨游、百度、360、QQ 、UC 浏览器的应用中心）：根据最新的调查显示开发者对开发 HTML5 Web App 的兴趣也在与
5、日俱增：jQuery, Sencha, JQ.Mobi, Zepto 等移动 UI 组件和框架的发展也使得 Mobile Web App 的开发越来越简单、高效和性能更好。封装了 webView 的 Hybrid App 则兼具 Web App 和 Native App 特点，在开发成本和用户体验上取到了一个很好的平衡点。好的 Hybrid App 完全能媲美 Native App 的用户体验。这种开发模式正在得到越来越多的开发商和开发者的青睐。Facebook，百度都使用过这种方式开发过自己的产品。四. 设计1. 屏幕适配移动设备的屏幕是各式各样的，对设计影响较大的主要是屏幕分辨率、尺寸、屏
6、幕方向这些因素。现在的 iOS 设备有320480，640960，1136640，1024768 ， 20481536 这些分辨率，3.5 寸、4 寸、 7.9 寸、9.7 寸这些尺寸。Android 设备的碎片化则更严重。所以需要关注 Web app 在不同屏幕下的界面适配问题。1.1 适配不同分辨率通过响应式网页的设计方法提升页面在不同分辨率下的兼容性：由于手机屏幕尺寸下，一般来说只能一个模块一个模块地从上到下排列。此时设泽思网络 上海 APP 开发商 计者就需要考虑模块摆放的优先级了。一般来说，用户重点关注的、最近更新、与用户相关的信息应该放在前面。另外最好以主流分辨率 480800 进
7、行设计，对略高于和略低于该分辨率的屏幕可将界面元素进行缩放，对间距、边距进行适当调整。所以，在设定容器、图片、文本框的宽度时最好避免使用 px 单位，使用%可使页面在不同分辨率屏幕下保持布局和页面结构不发生改变。1.2 平板电脑使用 CSS3 的媒体查询（media query）语句可获得浏览器的高宽和设备的像素比，并可根据开发者的需要对不同的设备应用不同的样式表。所以开发者可以控制一个页面在不同设备上的表现。由于手机屏幕和平板电脑的屏幕尺寸和像素都相去甚远，所以为了充分利用平板电脑的大屏优势，以获得良好的用户体验，最好在两种设备上使用不同的界面布局。相信 iOS 用户都有这样的感觉：有的 A
8、pp 只适配 iPhone，在 iPad 上运行则无法布满屏幕，只能点“2X”按钮显示一个粗糙的界面。还有一种 App 可同时兼容 iPhone 和iPad，在手机和平板的屏幕上都能完美显示，用户也无需单独下载两个版本。很明显，后者使用起来更方便，更美观。Mobile Web App 使用媒体查询功能即可实现这种功能。那么在平板电脑上，有哪些需要注意的设计点呢？因为平板电脑多在横屏下使用，所以使用分栏视图可在一个界面内显示两个层级的内容，方便用户快速切换 item。首页多以宫格视图、Tab 为主，微博、QQ 这种以内容为主的界面将分栏视图作为默认首页也是可以的。在手机上最常使用的 list 在
9、平板上就不是很常用了，整个屏泽思网络 上海 APP 开发商 幕显示 list，不仅浪费空间，也没有分栏视图的操作高效。需要注意的是，IE9 以下的浏览器不支持 media query.1.3 横竖屏切换由于目前还不能在 webkit 内核里禁止设备方向的旋转，所以如果用户的设备开启了屏幕方向根据重力自动旋转，那么运行于浏览器的 Web App 也是会跟着旋转的。如果能够捕捉到设备的方向，可以对横竖屏分别进行布局设计，但最好能保证界面风格和样式不会有大的变化。反例就是 iPhone 的音乐 App，在竖屏下会显示歌曲 list，但是切换到横屏下显示专辑封面。两种界面风格跳动太大会导致部分用户不适
10、应，以为是两个不同的页面。计算器 App 也只有在横屏下才显示科学计算模式，竖屏下用户根本无法切换到该模式，连引导也没有。宫格视图是横竖屏切换最平滑的布局，看看 iOS 系统的主屏幕就知道了。一个个应用程序图标在横竖屏切换时，几乎只是图标旋转了一下方向。还有一点就是切换到横屏时，可自动进入全屏模式以显示更多的内容。否则标题栏和底部栏将会占去很多空间2.动效受浏览器性能影响，很多 Native App 能实现的华丽动画在 Web App 里的表现并不是很好。所以应该果断去掉非必要的动效以保证 Web App 能够运行流畅。因为很多动效会对用户起到很好的引导作用，如果没有这些动画，可能会导致用户对
11、界面逻辑关系的理解产生混乱。这就对动效的设计提出了较高的要求。总结了一下 Web App 的几点动效设计原则：尽量不使用不必要的动效。泽思网络 上海 APP 开发商 优先使用简单的动画。如平移、缩放。尽量避免使用 3D 动画。避免刷新页面。因为整个页面白屏，浏览器走进度条的体验会给用户浏览网页的感觉，而不是在使用 app框架元素优先显示。只在内容加载区域显示 loading 动画避免跳变。在不影响性能的情况下，可尽量用缩放和平移动画，保证用户视觉焦点的延续性和理解的延续性。同类界面/对象，同层级界面/对象的动效保持一致。可帮助用户理解产品架构和导航逻辑。高层级界面的动效对应高级物理位置。如果左
12、右平移的动画是用来切换上下一层级，那么首页应该是在最左边，如 iOS。如果前后切换的动画是用来切换上下一层及，那么首页应该是在最上面，如 Windows Phone。3.信息架构讲导航和信息架构的文章众多，Mobile Web App 既然要实现 Native App 的操作体验，照传统的移动客户端的设计模式去设计即可。只需要记住你设计的 Web App需要运行在 iOS, Android, Windows Phone 等多个平台，多种设备上即可。由于 iOS 相比其他平台，没有 back 按键，所以在 iOS 上运行需要保证界面内的导航能够实现闭环。所以 Android 上有些操作可以通过
13、Menu 键唤出，但是在 iOS上就需要直接暴露出来。下图左侧是 Zaker 的 Android 版，右侧是 iPhone 版。Android 版的菜单栏需要点击 Menu 键才出现。4.使用 Native App 的 UI 控件使用 Native App 的 UI 控件，可以让 Mobile Web App 更有 Native App 的操泽思网络 上海 APP 开发商 作体验。常见的如 Badge，Back button，Bubble，Picker，Indicator ，Title bar，Dialog，Toast，Loading，Drap down to refresh，Notifica
14、tion 等。下图分别是 Facebook 的 Native App 和 Web App，由于后者使用了客户端常见的一些 UI 控件，所以用户很难从视觉上识别出后者是 Web App.避免使用传统的 Web UI 控件，如面包屑、文字链：另外，在控件尺寸上也应该像 Native App 那样提供尽量大点击区域的控件。参照经验和各平台的官方人机界面指南，可以知道适合用户手指点击的尺寸应该在 7-9mm 之间，不能小于 7mm。相邻点击控件的行距不应小于 2mm。5. 针对浏览器优化为了兼顾浏览器的性能和交互，需要注意以下几点：页面使用尽量少的 DOM 元素；简化动效；避免与浏览器的交互冲突，如左右滑动，如浏览器的 tab bar, action bar, 以及浏览器全屏后的虚拟按钮；考虑保存用户的哪些数据：设置、个人数据、阅读锚点、跳出页面等。规则图形用 Canvas 绘制，避免向服务器请求 img.注意离线数据存储，通过 manifest 定义需要被缓存的文件，以便用户离线时使用。减少数据请求频率。6. 其他Track：建立 Track 机制可以快速获取用户的操作习惯和页面的浏览情况。从而方便设计师和产品人员快速改善产品。这一点比在 Google Analytics 获取到的数据更方泽思网络 上海
