第一次参加SegmentFault组织的活动,收获很大。活动现场氛围特别棒,特别是那个抽奖的页面真的很棒,很想把源码拿过来学习下。唯一的遗憾就是今天没有抽到奖。

寸志 前端开发与用户体验

今天主要是去听Teambition的寸志老师去的,想去听寸志分享前端干货。这次寸志老师分享的主题是《前端开发与用户体验》,以Teambition的产品为例介绍前端技术在改进产品用户体验方面的应用。
{}

之前有用过Teambition这个团队协作工具来和后端同学进行合作过。感觉这个产品的用户体验过特别好。今天从寸志老师才得知产品用户体验过好是因为他们老板齐俊元是很重视设计。(果然老板重视设计就是不一样啊!)
Teambition采用的前端框架是Backbone。之前听说这个前端框架,一个和AngularJs差不多前端MVC前端框架。但是比AngularJs出来早,Teambition团队采用Backbone加上jquery的一些插件来打造无刷新的交互体验。为什么选择Backbone是因为没有双向绑定,只会更新修改的部分,而不会更新其他部分。(对前端js框架还不是很了解,如果有叙述错误还请指正。)但我觉得对于前端工程师个人而言,AngularJs还是很适合我们的,毕竟它帮我们做了太多的事情。自己最近在研究Facebook的React,很想自己用React Native搞个自己的IOS APP出来。

自己最近一直在研究HTML5的一些新的JS API,今天寸志介绍他们在自己的产品Teambition中采用HTML5新的NotificationAPI 在用户关闭浏览器的情况下来通知用户新的信息。使用Offline Web Application来离线一些资源,这样在用户断网的情况下同样可以获得很好的体验。自己在最后的圆桌环节同时也向今天的四位分享人提问了在现在的成熟的Web产品中有哪些新的HTML5的特性在产品中有应用。
我这里初略整理了一下答案:

  • 使用localStorage来储存一些用户的信息,在一些web的应用中会采用indexDB来储存一些数据到本地。
  • 使用NotificationAPI在用户没有使用浏览器的浏览网站的情况下来通知用户一些信息。
  • 使用Offline Web Application来离线一些资源,这样让用户特殊情况下没网时也能获得不错的体验!
  • 使用CSS3的像animation这种新的特性来制作动画效果。

现在网页设计需要考虑多终端,也就是响应式,在分享中寸志老师分享了他们团队优化响应式的经验:

  1. 他们会先设计手机的版本,然后由手机版本变更到PC版和PAD版本。
  2. 对于iphone的Retina屏幕他们会把图片的大小做到两倍大小,然后使用CSS来把图片大小缩小到一倍。
  3. 使用CSS单位rem,然后使用js来控制根元素html里面的font-size。
    此外分享中提及了:
  • 利用CSS3的动画来制作动画,给用户带来愉悦感。
  • 使用webfont来代替图片图标
  • node-webkit来把网页应用分装成单个应用。

除了寸志老师的前端分享外之外,分享的嘉宾还有又拍云的张聪,扇贝网,暴走漫画的丁彦。因为自己最熟悉的是前端,对于后端和运维不是特别熟悉,所以这里不谢关于这三位大牛的总结了。

下面是这三位大牛的演讲文稿:

圆桌讨论问答

1. 从一个普通的技术开发,到稍有知名度的开发者,你们觉得最艰难的时段是哪个时段?

入门阶段,会受打击,但要端正心态。

每个人做的选择不一样,有很多路,没有哪一条是对的,要选择一条最合适你的。

技术面要广,多关注,多接触。

订阅技术博客,每天度技术文章,提高自己阅读量。

一个学习的心态,要不停的去了解新的东西,要不断更新你现在的知识。

对项目有要求,让项目造就你能力的提升。

找一个好的能解决技术问题的人,这样提升会快一点。


卢小健
304 声望8 粉丝

一个从事网页设计的手艺人


引用和评论

0 条评论