大家好，这只是个测试的消息，看到则说明生效了。

首先自我介绍下，我是百度搜索的一名小前端，我们前端团队人员很多，有很多大佬，并且我们还有专注于建设WEB生态、用户体验、性能优化的组织。虽然大家各自的业务不一样，但大的方向是一致的，而我们写代码，本着从生态、体验出发，那么我们也算是在为WEB生态做贡献了，哈哈。

上次发了个朋友圈截图，截图内容是百度移动端搜 北京到邯郸 ，页面展示的是北京到邯郸的火车票信息、汽车票信息和自驾路线等信息，我们叫她“城市点到点”，也就是说你可以搜索 xx到xx 来查看类似的信息，比如搜索 北京到上海 还会有飞机票信息。

我今天就说说这个“城市点到点”模板我都做了些什么？

页面优化

响应式的线条

页面中头部有一个蓝色醒目的出发地到目的地的线条引导(如果页面上有广告将不显示这个蓝色的线条)，如图所示：

因为考虑到城市名可能是多个字的情况，如：石家庄、呼和浩特、乌鲁木齐等，总不能让字盖住线和点吧？于是我想到了“遮盖法”，也就是分层去做，让权重高的在上，权重低的在下。如图：

先使用背景色+一个层完成白色线条和中间距离文本

两端使用两个层完成出发地和目的地，并且添加对应的边界完成分离

两端站点层使用 :before, :after 完成绝对定位的圆圈

这样的话就可以满足不同长度的文字了，并且全由 CSS 完成，如：

loading状态有趣化

因为页面是票务类，对时效性要求比较高，所以在切换日期的时候会异步去请求新的数据，那么遵循我的原则：只要是异步就要有 loading 、 error 、success 、 empty 状态。于是我们高大上的PM@涂大神优化了我默认的“加载中...”文案，如图：

其实这些状态都在页面存在，我用 JS 去操作她们的展示和隐藏。并且在我看来在这些状态之间的切换页面应该达到不颤抖，比如我网络不好，加载超时了，再点击重新加载，又发现数据为空了，那么状态的切换是： init->loading->error->loading->empty 那么在这些点击过程中状态的高度应该一致。(不过我刚才试了下，确实有稍微的差距了，于是我查了下，是有个公用了间距升级了，因为这个模板是我 2016-05-01 左右开发的，1年多的时间难免有升级，抽空升级下模板就行了)。

合适的点击区域

因为移动端的适用性，点击区域往往是大一点的体验要好，使用合理的内填充完成了页面点击元素的点击区域，如：

看图可以看出，点击区域比较中规中矩、大大方方，那么来几个其他例子：

上图的百度结果页query=刘德华的结果，灰色是点击跳转区域，红色的是反馈点击区域，经过几次尝试我发现我很不方便反馈，是因为反馈很难点啊，当然也可能是我手太“大”的原因。

上图是谷歌图片查看结果，蓝色区域是关闭按钮的点击区域，是不是很赞？因为用户在潜意识里往那个关闭按钮方向点击肯定是想关闭的，如果很小反而会由于不好点击造成用户流失。

当然百度图片区域也很人性化，如：

当然上面说的只是用户可以感知到的，像代码注释、代码逻辑、代码容错、各状态测试这些开发层面的也下了很多，我个人喜欢在开发层面时做的完善些，这可能会导致加班，也比较累，但这让我的项目更稳定，据不完全统计，我这个模板从上线至今没有出现过 bug ，几次修改也都是因为整体页面升级做配合，当然这些成果的背后是我们伟大的PM精心设计方案和需求。

又让我想到我2015年做的几个电影模板，至今都在线上，曾有个妹子做了个新模板，由于各种原因始终没有PK过我这个模板，最终结局就是我在线，她下线。。。

那么这就完美了？其实并不是。

还可以更好

日历优化

现在用的日历是一个通用的插件，那么能不能添加一些功能，如某天已经没有票了，在日历上提示下？

定时刷新

因为票务类的时效性要求很高，比如页面在今天上午打开了，一直没动，下午再看的时候还是有票(因为没刷新)，用户很高兴，但发现刷新后就没票了，多尴尬，能不能加个页面显示( pageshow )时判断上次自动刷新的时候，超过一定阀值时去重新请求数据。

这又引发一个问题，结果页可以添加一个通用的事件，以来处理这些刷新在页面显示时重新计算数据的需求，因为浏览器后台运行时页面会处理暂停的状态，浏览器再次打开会接着继续。

定位优化

切换日期后会为了让用户更好的看到页面展现模板，默认切换返回的是点击那个模板的顶端，但随着用户手机屏幕逐渐变大，用户的最佳可视范围可能已经不是顶端，可以做成记忆用户点击日期行为前的位置，在用户日期确认后再返回该位置，让用户“无感知”。

结语

由于技术方向调整，虽然这些已经不用我处理了，但这些项目放佛是自己的孩子，从小看到大的，有那么种亲情。如果你有更好的建议也可以直接找我聊聊哈~

其实百度结果页有很多值得学习的点，也一直在不断尝试新的技术和优化，有时间了可以学习分享下。