web app设计原则

一、什么是web app

维基百科对web app的定义：

web App是指使用浏览器支持语言编写的app，运行于浏览器中，通过网络访问。

二、web app的优点（相对于nativeapp）

1.跨平台的高兼容性（基于浏览器开发，无需区分android和iOS，灵活性强）；

2.更新实时，无需用户手动升级（自动在线更新）

3.开发成本低（不用受手机系统的限制）；

4.无需安装、占空间少（在线打开，无需下载安装，节省手机本地存储）

5.易于维护（维护成本较低）；

6.调试，发布方便（后台更新，快速发布）

三、web app的缺点（相对于nativeapp）

1.受限于浏览器，性能和界面效果存在差距（页面加载速度慢、动画效果差）

2.严重依赖网络连接（在离线状态下无法工作）

3.调用硬件和本地文件不便（例如相机）

4.无法在app store里上架销售（推广受限）

5.入口不明显（主要依靠搜索）

四、native app的优点

1.提供最佳的用户体验，最优质的用户界面，最华丽的交互

2.针对不同平台提供不同体验（iOS、android、windows三个平台）

3.可节省带宽成本（无需任意时刻联网）

4.可访问本地资源（例如相机）

5.盈利模式明朗

五、native app的缺点

1.移植到不同平台上比较麻烦

2.维持多个版本的成本比较高

3.需要通过store或market的确认

4.盈利需要与第三方分成

六、web app存在的意义

关于webapp和nativeapp存在的价值和意义的讨论一直没有停止过。这就得从两者的优缺点说起，可以说webapp的优点即是nativeapp的缺点，相反，webapp的缺点就是nativeapp的优点。

在PC时代大家习惯通过浏览器搜索查询信息，浏览器搜索成为主要的上网方式。而在移动互联网时代，搜索的需求被各种各样的细分app所分割，例如查找美食可以用大众点评、美团；查找地点可以用搜狗地图、高德地图；查找电影可以用爱奇艺、腾讯视频。。。那在这种情况下，为何还要去开发webapp呢？

主要原因：

1.nativeapp的推广成本越来越高，部分用户习惯通过浏览器搜索查询信息，通过webapp能够为nativeapp导量（市面上绝大多数webapp都是这么干的）；

2.一些需求例如天气查询、快递查询、新闻、阅读完全可以通过浏览器来实现，而无须下载单独的app占用本地的存储空间；

七、web app的设计原则

1.顶部导航

webapp多采用顶部导航，而nativeapp多采用底部导航，这是为啥呢？

看完下面这两张图即可知晓：页面底部是浏览器的固定导航栏，如再将app的导航栏置于页面底部，易导致用户误操作。因此，web app的导航栏通常置于页面顶部。

难道真的没样底部导航吗？没错，还真有这样的，例子不多，但有一个大牌是这样干的——淘宝网。

但是，底部导航栏只在首页显示，并非在其它标签页始终显示。

导航栏的细节：

•均带有品牌标识，品牌标识主要用于品牌宣传，符合大多数web app为nativeapp导量的定位。品牌标识能够加深用户对产品的印象，尤其是在同质化严重的今天。当然，也有web app没有提供品牌标识。

•多采用tab式切换，这也是考虑到webapp严重依赖网络的特性，每一次页面跳转都需要请求网络，tab式切换能够页面的跳转，提高用户的使用体验。

•默认导航收起。web app顶部的空间被浏览器的地址栏所占据、底部的空间被浏览器的操作栏所占据，内容展示区域大大折扣，尤其是在小屏手机上。因此，为了保持页面的简洁，尽可能多地展示内容，一些app默认将导航收起，点击可在当前页面展开。

2.  减少页面跳转

正如前面所说，考虑到web app严重依赖网络，因此要减少页面跳转，导航栏多采用tab切换，搜索采用临时层弹出而非新页。

点击nativeapp首页的搜索框，通常会跳转至搜索页；而webapp则不然，直接在当前页面显示历史记录或热词推荐，调起键盘，点击“取消”回到原页面，无须重新加载。

3.  增大展示空间

为了增大页面展示空间，导航栏默认收起。除体现在导航外，float浮层在webapp也尽量减少使用。

下面左图是大众点评nativeapp的详情页设计，优惠买单信息在滑动页面时保持贴顶；右侧是大众点评webapp的详情页设计，页面滑动时顶部无贴顶设计。

4.  优化图片展示

虽然3G、4G时代早已来临，但是手机流量依旧是我们心头的痛。webapp在图片展示方面与nativeapp也有所不同，webapp应该尽量减少图片的使用或尽量使用小图，提高页面的加载速度，减少流量的耗费。

还是以大众点评为例，左侧是大众点评nativeapp，右侧是大众点评webapp。显而易见，同样一条评论，右侧webapp把图片给省去了，只保留了评论的文字。

5.  动效设计

webapp尽量不使用不必要的动效，一方面开发实现难度较大，另外一方面也是考虑到实现效果不佳。

因此，webapp在动效方面应优先使用简单的动画，如平移、缩放，尽量避免使用3D动画。此外，也尽量减少页面滑动等操作，这也是考虑到浏览器本身就有滑动手势操作，例如右滑打开之前页面。例如爱奇艺的nativeapp左右滑动可在不同tab页切换，而webapp则不支持。

6.  保证页面简洁

作为nativeapp导量的入口，多数webapp在设计上增加了各种各样的推广链接，而忽略了用户的体验。常见的推广链接有以下几种形式：1、页面顶部放置下载条；2、页面底部悬浮层引导；3、下载按钮形式。对于顶部和底部的浮层引导，进一步占据页面空间，再加上配以各种各样的颜色，导致页面变得异常繁复，用户感受不到友好，又何谈去下载。

八、如何正确引导用户下载nativeapp

那如何正确引导用户下载nativeapp呢？

首先，webapp作为nativeapp的招牌，只有保证用户的使用体验，才能在用户心中建立良好的印象，随后再去下载。用户使用webapp多是从搜索入口进入，刚开始对webapp也是陌生的，如界面负责、体验不佳必然导致用户快速地离去，即使下载按钮做的再大、再明显也于事无补。

其次，从webapp和nativeapp的差异点和用户的使用痛点出发，寻找功能点引导用户下载nativeapp，这样才不会招致用户反感，顺其自然。webapp与nativeapp在内容和体验方面都有不同，由于自身的一些特性， webapp在内容上做了精简，在操作上做了简化。而nativeapp在内容和功能方面更全面，在操作方面体验也更佳、更流畅。用户在使用产品的过程中必然会有一些痛点，这些痛点才是吸引用户下载的内在动力。

例如左图爱奇艺webapp在播放器下方显示文案——打开爱奇艺视频，提升3倍流畅度。对于视频用户来说，播放流畅度关乎视频阅读的体验，如流畅度不佳，视频播放等待的时间较长，用户必然会焦躁，甚至离去。因此，通过流畅度可以大大地吸引用户下载爱奇艺nativeapp。

例如右图大众点评webapp底部贴底显示——使用APP返积分抵现金。O2O烧钱模式已经是家喻户晓了，大家吃饭前习惯打开团购网站看是否有优惠和团购。APP返积分抵现金对于团购用户来说，吸引力度较大。因此，也能够刺激用户下载大众点评的nativeapp。