从一个简单弹出菜单来说说什么是完美实现需求

如何优化一个弹出菜单

一个弹出菜单有什么优化的?无非就是简单的显示隐藏··
比如这样:

pop1.gif

其实无论是从产品还是运营,都不会很在意这一点,大家都觉得很正常,因为都是这么干的啊,没有什么特别的啊,还能怎么样啊?

有一些想法的童鞋可能会加一个效果把?比如jquery的下拉效果slideDown():

pop3.gif

说实话这种效果几年前还是很流行的,但是动画效果真的很low 有没有?

说到这里可能有人在问 ,是不是故意在挑刺啊,真不是,我想要的效果是那种带有动画效果,让人眼前一亮,但是又不显得突兀,说实话,当技术人员听到这种模棱两可的描述都有杀人的冲动,好吧,幸亏这种效果我已经做出来了:

pop2.gif

从效果上只是加了个 弹出 的效果,你没看错,我仅仅就是想要一个弹出菜单

好了到了这里其实我们的弹出菜单已经够让人眼前一亮了,但是还不够,我们知道在移动端还存在着300ms的延迟,就是总是让人感觉点击的不痛快,迟钝,尤其是刚刚从app切过来,
所以这里我们要解决这个问题,嗯,加个fastclick即可;

前端用户体验的思考

一个简单的弹出菜单尚有这么多可以优化的地方,放到全站我相信可以优化的地方就更多啦;

其实90%的公司是没有优化用户体验这么个专职,这时候就需要前端岗位的童鞋要有一个自我驱动的精神,当然不是说,我能作出一个酷炫的弹出菜单就是好,而是要运用我们所掌握的或是知道的技术,去 完美实现需求!

什么是完美实现需求:就是能够合理达到产品的要求,同时考虑到了用户体验,又在技术实现上能够更好的维护和迭代··

说实话,能够达到完美实现需求有时候简直要了开发人员的小命,为什么?你可能会同时面对leader的压力,产品的压力,测试的压力,大家都在等着你快点完成,你却说你还在完善,你要做的更加完美?
所以不容易,这就需要我们前端开发人员在平时要多积累,多思考,否则,··你可能会被k掉···

举例说明 完美需求

这个弹出菜单不是很具有代表性,我简单举一个栗子来说明如何是完美的需求(当然这个栗子可能还达不到完美需求的地步);

需求很简单,就是我们常见的登陆页!一般情况下,我们首次进入首页,点击需要登录查看的信息,是不是都要跳转到登陆页?

这是h5的通病啦~浏览器会刷呀刷的,使出来吃奶的劲加载出了登陆页,然后我们登录啦!然后又要刷呀刷的跳转回去?对不对?

这时候小a同学已经实现了这块功能,但是他是一个有自我驱动精神的同学,他觉得能不能实现app那种直接弹出登录框的感觉?

有了目标其实就好做啦!于是小a同学做出了这样的效果:

login2.gif

是不是用户体验效果一下子有了质的飞跃?

不过要用户体验是有代价的,主要有这么几个问题:

1、页面弹出的时候要屏蔽触摸,否则当页面大于一屏就会盖不住了··
2、要列出每一个需要呼出登录弹出层的按钮加以判断;
3、页面弹出的css3动画优化问题;
4、最头疼的问题是有些在服务端渲染的数据可能要用异步方式来实现了
5、其他零碎的样式兼容问题

其他问题都好说,第4条意味着php童鞋也要为了你的一个想法去大量修改代码,因为当登陆完成 ,登陆层缩回去的时候客户要看到登陆后的数据啦···
最后大家商量的办法是:当登录完成后弹出层不回去啦,直接刷新页面···

好吧这就是不完美的地方···这样同步渲染的数据就不需要改成异步的了···

那么对于最后:如何在技术实现上能够更好的维护和迭代?

之前所有的登录都是跳转到同一个登录页面,那么当我们要修改登录页的样式的时候只需要改一遍啦··

现在的情况是,莫名的登录弹出层哪哪都是···

当然啦这个问题也好解决,就是使用php的smart模版,提取一个公共的登录弹出模版,在需要的页面插入即可,比如这样:

<!-- 登录弹窗 -->
<div class="popLogin none">
    {include file="_common/login.htm" method="pop"}
</div>

嗯,对于一个具有自我驱动的精神的小a同学还是觉得不完美,因为登陆页和登录弹出层还是多了一次修改,那么小a又做了一次修改,就是把登录弹出层的代码也以smart的模版插入到登陆页;
这样全站所有的登录部分都是使用的同一个模版,样式和js代码!
完美手工!

结束语

一个好的前端工程师就是一个好的产品和一个好的用户体验,童鞋们,加油吧,前端的路本不平坦,只有具有自我驱动的精神,才能更快的成长!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,442评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 赵文亲Bruce日精进第七十一天——寒假第五天 晴 今天在公司A营练习演说时,一个话题练了大半个小时之后觉得有点累...
    弘毅浪迹天涯阅读 181评论 0 0
  • #幸福是需要修出来的~每天进步1%~幸福实修08班~01 张伟# 盐城 天气:晴 心情:好 20170722(34...
    幸福实修08班张伟阅读 245评论 1 0