H5界面UI设计和APP有什么区别

设计师相较于前端来讲是更接近产品用户体验的人，但是毕竟APP原生系统界面设计跟H5页面设计还是存在很多差异性的。所以很多不太熟悉H5技术限制的设计师还是很容易犯一些错误的。H5相对于APP在设计上有什么区别呢？一起来了解下。

1、功能的简化

通过以上的图片可以看到，天猫H5的首页功能比APP的首页功能减少了很多，例如扫一扫的和消息功能以及底部导航都没有了。同类的banner广告布局也没有这么复杂，只是简单粗暴的大banner下方放几个功能入口。

2、突出基本功能

例如天猫的App端商品类别放置在第二屏，而H5的商品分类在首页顶部原扫一扫图标的位置，点开就是一个抽屉式弹窗。更简洁直观的功能更有利于增强H5的操作体验。

3、顶部navigationBar不可更改

H5的顶部navigationBar是不可更改的，不管任何软件打开H5，其顶部显示的始终是原打开此H5页面app的navigationBar。所以一般如果需要设计顶部导航的时候我们是基于navigationBar的下方再放置一个navigationBar的。这里也就是如上图右侧所示显示了双层navigationBar的效果。

4、常使用顶部返回按钮

h5页面较长的情况下经常会使用顶部返回按钮，这个类似与pc网页端的交互形式。目前多数h5已然淘汰了此交互功能,以顶端自带的返回按钮来替代。目前天猫也仅在首页使用，因为如果没有这个按钮的话点返回会退出天猫。所以，具体使用与否还需视情况而定。

5、加载进度条

每进入一个新的h5页面顶部都会显示加载进度条，如果是原生系统内嵌的H5页面注意这里是可以自定义进度条样式的。

千语创想-专业APP开发、app定制服务商，提供一站式移动应用解决方案，满足您的各类需求，欢迎免费评估需求和获取报价。

立即免费在线制作一个APP，新手注册即送开发大礼包

提交app定制需求，免费获取报价和周期：

电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500

手机请点击https://www.qianyuthink.com/?url=/m/customizedservice