这3类主流应用你都了解吗？

你知道所有这三种主流应用吗？除了视觉功夫，设计师还应该知道不同形式的应用程序。今天，百度的学生们写了一个非常全面的总结，帮助您快速完成三种主流应用程序的设计方法，并附上一波避雷针，带您巧妙地跳过应用程序设计的雷区。上升的姿势迫在眉睫！主流应用程序大致分为三类：WebApp、HybridApp、NativeApp。一、WebApp、HybridApp、Nativeapp纵向比较首先，我们来看看什么是Webapp。、HybridApp、NativeApp。1.WebappWebapp是指用Html5语言编写的app，不需要下载安装。类似于现在提到的轻应用。生存在浏览器中的应用基本上可以说是触摸屏版的网页应用。优点(1)开发成本低，(2)更新快，(3)更新不需要通知用户，不需要手动升级，(4)可以跨越多个平台和终端。缺点:(1)临时入口(2)无法获得系统级别的通知、提醒、动态效果等。(3)用户留存率低(4)设计有限(5)体验差2.HybridAppHybridApp是指半原生半Web的混合App。需要下载安装，看起来像Nativeapp，但是UIWebView很少，访问内容是Web。比如Store中的新闻类APP，视频类APP一般采用Native框架，Web内容。Hybridapp试图创建类似于Nativeapp的体验，但仍然受到技术、网速等诸多因素的限制。尚不完美。3.NativeappNativeapp是指原始程序，一般依靠操作系统，交互性强，是一款完整的app，可扩展性强。用户需要下载、安装和使用。优点:(1)创造完美的用户体验(2)性能稳定(3)操作速度快，启动流畅(4)访问本地资源(通讯录、相册)(5)设计出色的动态效果，转移，(6)有系统级别的贴心通知或提醒(7)用户留存率高的缺点:(1)分销成本高(不同平台有不同的开发语言和界面适应)(2)维护成本高(例如，但仍有用户在使用V2、V3、V4版本，需要更多的开发人员来维护之前的版本)(3)更新缓慢，并根据不同的平台提交–审核–不同的流程，比如上线，需要经过复杂的流程。2.WebApp、HybridApp、从上图可以看出Nativeapp的技术特点，基于Html5语言开发Webapp。Html5语言本身也有不可避免的局限性。Html5语言本身也有不可避免的局限性。正是这些局限性使得Webapp在体验上不如Nativeapp。与Nativeapp相比，Webapp体验受限于以上五个因素：网络环境、渲染性能、平台特性、浏览器和系统限制。1.网络环境，渲染性能WebAPP更依赖网络环境，因为当用户使用WebAPP中的H5页面时，请求服务器显示页面。如果用户碰巧遇到其他环境，如网络速度慢、网络不稳定等，用户要求页面的效率将大大降低，用户在使用中会感到不光滑和间歇性的不良感觉。同时，H5技术本身的渲染性能较弱：对复杂的图形样式、多样化的动态效果、自定义字体等的支持较弱。因此，在设计H5页面时，基于网络环境和渲染性能的影响，应注意以下几点：简化不重要的动画/动态效果，简化复杂的图形和文本风格，减少页面渲染的频率和频率，从下图中移动web版本的jing.与Native版jing相比，fm可以看出，webapp首页去除冗余功能，回溯源头，只为用户提供jing.fm最初的本质需求-电台。既符合H5精简功能，又符合突出核心功能的设计原则。既符合H5精简功能，又符合突出核心功能的设计原则。毫无疑问，它给用户一种明亮的氛围。就像书中“瞬间之美”的核心观点一样，重要的不是我们提供了多少信息，而是我们能否为他们提供真正需要的信息。再比如百度最新推出的直达号，以良子健身为例:从Nativeapp和Webapp(百度直达号)的对比可以看出，Native良子以九宫格的形式展示，属于双导航，功能入口太多；缺点是用户不知道聚焦在哪里，分散了用户的注意力。Web版良子集成，减少导航入口，增强用户注意力；界面清新整洁，很好地传达了良子本身的含义——轻松、愉悦、休闲、舒适。2.受浏览器限制，Webapp通常生活在浏览器中，宿主是浏览器。不同的浏览器有不同的属性，如浏览器自己的手势、页面切换、链接跳转、版本兼容性等。例如下图:UC浏览器和百度浏览器支持手势切换页面。手指从左侧滑动页面，返回到上一级。百度手机助手H5页，顶部Banner支持手势左右滑动切换。这个操作与浏览器本身的手势相冲突。另一个例子是，当基于浏览器的WebAPP打开新模块中的页面时，大多数都会打开新的窗口来显示。例如，当用户使用购物应用程序浏览每日精选模块时，默认打开新产品的新窗口。这样的优缺点是显而易见的：优点是记录用户浏览的痕迹，浏览的商品，以便后续的水平比较；缺点是页面太多，用户很容易在页面中丢失。正如谷歌开发手册所描述的：当用户打开web应用程序时，他们期望这个应用程序就像一个单一的应用程序，而不是一系列网页的组合。然而，设计师需要仔细考虑在什么情况下需要跳转页面，在什么情况下显示在当前页面。因此，基于浏览器的特点，Webapp从设计角度应遵循以下两点：少用手势，避免与浏览器手势发生冲突。尽量在当前页面上显示页面跳转次数。由于Html5语言的技术特性，3.系统限制，平台特性无法调用系统级别的权限。例如，系统级弹出窗口、系统级通知、地理信息、通讯录、语音等。与系统的兼容性也存在一些问题。上述限制通常导致APP扩展不强，体验相对较差。例如，百度地图：基于浏览器显示的Web版本地图，不能全屏显示地图，给用户的视野带来限制；相反，Native版本地图以全屏显示的形式扩大了用户的视野。整个界面干净简洁，主页去除冗余功能。在制定路线的体验中，如图所示：Web版地图消耗的流量大于Native版，离线地图无法提前缓存。对地理位置的判断也是基于宿主浏览器，而不是Web地图本身。获取路线后，更换到达方式相对不方便。相反，Native版本的地图可以直接访问用户的地理位置，清晰地向用户展示应用程序规划的路线，并轻松查看各种路线方案，以便制定最佳方案。只需一键操作切换公交、走路、自驾等路线。与Web版本相比，Native版本的地图增加了更多的情感和易于使用的功能，如记录用户的生活轨迹、记录用户的脚印、享受避免拥堵的解决方案等。基于技术框架的Web版地图很难实现上述功能。从用户体验的角度来看，它比Native版地图弱。4.总结一下，在设计WebAPP时，应遵循以下几点:1。简化不重要的动画/动态效果，简化复杂的图形和文本风格；2.少用手势，避免与浏览器手势冲突；少用弹出窗口；3.减少页面内容，减少控件数量，减少页面跳转次数；尽量在当前页面显示；4.增强Loading时的兴趣；增强页面主次关系；增强控件的再用性；