如何辨别webview页面
2015-11-13 本文已影响1401人
王文俊
我们常说的客户端里的i版页面或H5页面,是通过webview控件展示的网页。一个native页面可以有多个webview入口,点击webview入口,打开的就是i版页面。我们可以从i版页面跳转到另一个i版页面,也可以跳转到native页面,因此,如果流程中融合了native页面和i版,如何加以区分并针对性地设计是设计师遇到的一个问题。
iOS和Android两个平台的webview的情况不完全一样,以下会分开举例。
iOS:
1.看导航栏。原native页面返回旁无返回文字,打开i版左上角新出现“返回”两字(第一个i版页面是“返回”,第二个页面及往后的多了“关闭”,这是未经处理的i版状况)


2.长按内容列表,出现链接弹层,一定是i版


** 3.使用位置信息的提示说明当前页是i版**

4.i版一般没有下拉加载,也可单独处理为其增加
(下图1是客户端加载样式,图2没有加载样式的i版页面,图3为单独增加加载的i版页面)



** 5.长按可以选择内容区的文字,若是iOS则一定是i版。这点不同于Android,Android不论客户端还是i版都可以选择文字**

Android:
1.看导航栏。
一种导航模式:打开i版返回按钮变成关闭按钮,下图1;
另一种导航模式:右侧有“关闭”,一定是i版(因为Android没有“返回”了,所以有“关闭”的前一页也是i版),下图2和3


2.导航栏下方有加载进度条的,一定是i版
这点iOS同理,因为iOS的i版之前未做进度条,所以没有加上这个例子。

3.Android的i版页面下拉时有阈值限制,移动不了

以上只从能观察到的表象去对webview页面做一个区分,不涉及两个平台不同逻辑上的说明。webview页面目前还有很多体验上的问题,后续会总结出一系列的解决方案。