首页 > WEB互联网 > 网站新手引导tips提示功能开发经验分享
2016
04-17

网站新手引导tips提示功能开发经验分享

前几天将前端开拓者的前台页面调整为响应式网页,发现在手机端的页面布局下导航栏非常难以处理。通过多种方案的尝试与调整,最终决定将导航栏设置为超出屏幕宽度横向滚动的方式以满足布局与功能上的需要。

网站新手引导tips提示功能开发经验分享 - 第1张 | 前端开拓者

 

如上图,在web浏览器中可以看到一个横向滚动的滚动条,用户很清楚的知道可以拖动导航条以查看后面的导航内容。但是在手机中,并没有这样的滚动条显示,多数情况下是看不到的。因此导航条可以滚动的这项功能很可能不会被用户发现,从而导致用户体验上的障碍,因此网站功能上的引导便显得尤为重要。

如何在网站上引导用户关注你网站上无法直接看到的功能呢?目前比较主流的常见做法是当用户第一次进入你的网站是时给与一个悬浮的提示窗口,用户可以选择性的关闭这个窗口,完成用户的第一次功能体验引导。

如下图,可以有效的告知用户导航条是具有滚动功能的。

网站新手引导tips提示功能开发经验分享 - 第2张 | 前端开拓者

 

 

开发tips功能的思路?

一、首先要在HTML中做好相应的tips对话框窗口,使其能够正确的显示在需要的位置。这里需要用到HTML与CSS的相关知识,具体需要怎么做本文就不做详细讲解。

二、通过jquery来控制tips窗体的显示与消失

三、为了避免用户每次打开网页都显示tips窗口,我们还需要通过js来设置与读取cookie,用于保存用户上次关闭tips的操作。

四、为了获得更好的体验,可以考虑为页面增加一些遮罩,突出显示需要展示的功能位置。

网站新手引导tips提示功能开发经验分享 - 第3张 | 前端开拓者

 

jquery完整的实现代码

通过不断的调试与测试,前端开拓者的tips功能已经能够正常运行,下面将jquery部分的代码分享给大家,并且会加上相应的注释以便与大家理解。由于每个网站的需求与实际情况都不同,html和css部分请自行按需编写。

最后编辑:
作者:欧阳
欧阳
设计界的一只猿|平面设计|创意|WEB安全|互联网

留下一个回复

你的email不会被公开。