如何辨别webview页面

我们常说的客户端里的i版页面或H5页面,是通过webview控件展示的网页。一个native页面可以有多个webview入口,点击webview入口,打开的就是i版页面。我们可以从i版页面跳转到另一个i版页面,也可以跳转到native页面,因此,如果流程中融合了native页面和i版,如何加以区分并针对性地设计是设计师遇到的一个问题。

iOS和Android两个平台的webview的情况不完全一样,以下会分开举例。
iOS:
1.看导航栏。原native页面返回旁无返回文字,打开i版左上角新出现“返回”两字(第一个i版页面是“返回”,第二个页面及往后的多了“关闭”,这是未经处理的i版状况)

第一个i版页面.png

第二个i版页面.png

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

长按后.png

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

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

未经处理的i版.png

单独增加加载的i版.png

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

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

返回变成关闭.JPG

第一个i版无关闭.png

第二个i版有关闭.png

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

加载进度条.png

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

下拉受限.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容