首页 > 新体验 > 设计沙龙 > UI界面设计
  • H5页面UI设计和APP设计有什么区别?

    adinnet/2018-05-16 16:06/UI界面设计

    设计师相较于前端来讲是最接近产品用户体验的人,但是毕竟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页面注意这里是可以自定义进度条样式的。

    以上就是H5页面设计相对于APP的区别,希望这些能够对您在H5 UI设计上有所帮助。

上一篇:10个APP闪屏页UI设计案例欣赏下一篇:智能家居APP界面设计案例欣赏
400-021-8655
在线咨询
在线留言