普通网页中跳转使用a标签,这里我们要对跳转进行更多的干预,所以将全站的跳转收口到框架层,用forward去实现。拒绝用a和window.location。如果我想对所有跳转做一个处理,开动画或者对跳转做一个统计,统计打点,这里如果用a或者window.location会很不好做,要做好收口。

location.href = "url"  页面中很多这种跳转,如果说需要对所有跳转做个统计,就需要找到每个href然后打点。这样是很不好的。如下这样做就好得多。

例如在写定时器的时候,我们也不会直接用,而是进行一下封装。在清掉定时器的时候可以全部清掉,还要自己封装,否则只能清一个。

back:hybrid与浏览器中的行为保持一致就可以。

back在webview中会检查记录,如果大于1就后退,否则就返回上一步操作。

history乱了:支付成功后点击后退,我们不希望回退到订单填写页面。以下有解决方案,看公司需求在选择不同方案

Native Path化:

H5页面都有自己的链接到这个页面,Native也会有但是也不一定,Native在做的时候没有考虑到一个页面有多少页。Native在列表页的时候可能就把订单填写页和产品详情页的信息全都请求下来,这样他在产品详情页的时候就不需要再请求数据。这是H5和Native不一样的地方,H5在列表页跳转到产品详情页的时候就要重新请求数据,H5在产品详情页的时候可能会做各种入口页或者落地页。举例来说:我们在搜索引擎上搜索产品详情页,我们的产品列表也可以过去,或者手机里的短信链接也可以到产品详情页,或者点击某个广告进入。这里如果,进入的入口不同,所展示的页面逻辑不同的话,就会更复杂一些。这里我们需要的是让Native页面也有path链接,让每一个页面都有一个path映射。好处:1、H5可以到任何一个Native页面2、H5这里有一套统一打点的机制的话,Native页面path化的话,这就更好处理了。

频道的入口点有一个疑惑:

例如在频道有ABCD4个入口,其中ABC是需要完成某种通用验证才能访问,比如登录和实名制才能访问。这就有2种做法:第一种:Native不关注,因为里面是H5的页面,H5做健全,如果是他没有登录的话,直接跳转到登录页面。登陆成功再跳回H5的页面。第二种:Native关注整个设计,在访问H5页面前先访问登录,如果成功了再访问H5页面。

H5能做的就H5做,H5做不了的Native做。如果是全局性的业务,又出于体验的话可以Native做。这里最好H5做,因为ABC需要验证可能需要改动,又需要其他验证,如果改动,Native就要改了。如果我们要细致到频道里面入口里面,因为频道自己关注自己样要干什么,Native不一定要关注到某个业务频道里要做什么事情,这时还是H5自己做比较好。

体系化:

例如:H5唤起了一个登陆,登陆中做了很多事情,可以跳到一个H5页面或者Native页面,这些都是可以设置的。如果都能跳过去,说明整个跳转体系已经相通了。

Hybrid设计--核心交互的更多相关文章

  1. Hybrid设计--账号体系的建设

    前后端分离:开发效率高,没有SEO 现在是重客户端设计:交互和业务逻辑是前端来写,适合做前后端分离.对前端更友好,提高了效率. 传统模式开发:整个业务逻辑是server端写,不适合做前后端分离.ser ...

  2. 设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢?

    明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种.面对“大的同时小一点”.“五彩斑斓黑”.“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活.你可以批评我的 ...

  3. Django项目:堡垒机(Linux服务器主机管理系统)--02--02堡垒机设计后台交互程序

    #main.py #本文件写所有的连接交互动作程序 #————————————————02堡垒机设计后台交互程序 开始———————————————— from django.contrib.auth ...

  4. 前端的UI设计与交互之布局篇

    布局是页面构成的前提,是后续展开交互和视觉设计的基础.设计者在选择布局之前,需要注意以下几点原则:明确用户在此场景中完成的主要任务和需获取的决策信息.明确决策信息和操作的优先级及内容特点,选择合理布局 ...

  5. 前端的UI设计与交互之字体篇

    跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...

  6. 前端的UI设计与交互之设计原则篇

    1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...

  7. 开发辅助 | 前端开发工程师对 UI设计、交互设计的认知

    1.UI 用户界面 UI:User Interfase 用户界面 UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计: 2.一个合格的 UI 设计师, ...

  8. 游戏数值——LOL篇 以LOL为起点-说游戏数值设计核心思路

      附     文   文档在今年三月份我动笔写了一小部分,但当时思路凌乱,行文梗阻,于是丢在一边构思了半年,现在又回过头来慢慢写,希望能写好写完吧,初衷是希望即时萌新也能看懂,但是好像并不能行——本 ...

  9. 前端的UI设计与交互之反馈示篇

    为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户 ...

随机推荐

  1. ajax 200 4 parseerror 的错误

    这个问题也碰到几次: 最后在网上还是找到了点线索:1.一可能是data:中的json 不规范2.js语句不规范3.我碰到的是dataType: 'json',data:是数组,最后把json改为tex ...

  2. 手动安装vue-devtools

    第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools git clone https://github.com/vuejs/vue-devtool ...

  3. python的代码缩进和冒号

    一般语言一样采用{}或者begin...end分隔代码块,而是python中,采用代码缩进和冒号来区分代码之间的层次. 缩进的空白数量是可变的,但是所有代码块语句必须包含相同的缩进空白数量,这个必须严 ...

  4. 如何使用ffmpeg

    https://blog.csdn.net/minger1202/article/details/52468986  解码 https://www.jianshu.com/p/c6cfe2edd083 ...

  5. arcgis二次开发遇到System.Runtime.InteropServices.COMException (0x80040228) :异常来自HRESULT:0x80040228

    出现此问题只需要在控件上拖入一个LicenseControl就可以了 参考资料:http://yaogu.blog.163.com/blog/static/1849990662012101283256 ...

  6. iOS-静态库,动态库,framework浅析(三)

    创建framework静态库 第一步,新建项目 新建项目.png 第二步,删除系统默认创建的[FMDB.h]和[FMDB.m]文件,导入需要打包的源文件. 导入源码后的工程.png 第三步,修改项目配 ...

  7. py 正则表达式 List的使用, cxfreeze打包

    从index.html当做检索出压缩文件,index.html的内容如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN& ...

  8. jMeter_响应数据乱码

    jMeter测试时服务响应数据乱码 方式一:修改配置文件参数 1.修改jMeter安装目录 jmeter.properties 中 sampleresult.default.encoding=UTF- ...

  9. 批处理DOS基础命令

    批处理(Batch),也称为批处理脚本.顾名思义,批处理就是对某对象进行批量的处理.批处理文件的扩展名为bat. 批处理文件,或称为批处理程序,是由一条条的DOS命令组成的普通文本文件,可以用记事本直 ...

  10. LoadRunner录制脚本-基础

    1.启动LoadRunner.没有脚本则创建脚本,有脚本则可以运行压力测试 2.点击Create/Edit Scripts,如下图,可新建或打开已有脚本 3.选择要测系统的协议 4.生成脚本分四步 5 ...