SlideShare a Scribd company logo
1 of 70
丘迟 毕业答辩
博客改变生活(http://blog.benhuoer.com) 深爱互联网(http://cv.benhuoer.com/) 一些恶趣味(豆瓣、acFun、人人、推特) 座右铭:要和谐,要有爱…… 看重: 诚实 真 负责任 独立 平等 自由 相互尊重 重新介绍我
作为非专业人士,我压力很大
第一份工作 第一次坐飞机 第一次在外租房 还好有朱棣 第一次与他人合作项目 第一次接触 复杂而庞大 的业务 虽然并没有参与其中 第一次…
其实我挺认同 百淘 的 做一个天真的明白人 百技的知识轰炸 都懂就最好了! 没基础,听了没用… 好像以后也用不上啦~ 学自己最需要的! 拉里邋遢地开始了… 小二初体验
在百技都干了啥? 内网搜索项目 交互+视觉设计  (乐意为之) 前端代码实现    (惨不忍睹) miniSearch         (恶心而实用) 业务简单,就要把细节做到极致 翻译了两篇博文 认识了很多人 看了几部电影 也许长胖了几斤? 技术成长?     少得可怜啊! 喂   那么多百技课程哪儿去了?
内网搜索项目
虽无PD之名,却行PD之事
产品 / 交互 / 视觉 设计一体化了!
极简主义美学
没有最好的,只有最合适的
还有 miniSearch 里花大力气隐藏掉的滚动条
“被迫”简化 设计稿 最终上线
时间紧,必须妥协 其实客户也需要这个功能 作为新人,我们压力很大… 投入产出比(真的很必要吗?) 事实也证明,现在这些功能也已经够我们受的啦! 把好点子记录下来,形成文档
Anyway,简单也是一种美
让功能纯粹化,更多需求交给下一代
[ [ 好吧,我是搞技术的!  ] ]
优雅的CSS代码 .abox, .sbox {     background: #f6f6f6;     border: solid 1px #eaeaea; padding: 6% 6% 8%; -moz-border-radius: 10px;     -webkit-border-radius: 10px; } .sbox{     padding: 10px;     -moz-border-radius: 3px;     -webkit-border-radius: 3px; } #all { width: 86%;     max-width: 70em;     min-width: 700px;     margin: 0 auto; } #results-page #all{ width: 95%; max-width: 80em; }
自适应布局 一点小Trick 渐进增强 模块化,并考虑扩展性 小项目,摒弃框架 身体力行 最佳实践
图片文件的组织与命名 ,[object Object]
容易变更的图片要独立
不引发歧义的短命名,[object Object]
自适应布局中的三栏排列
#adv fieldset{ float: left; width: 100%;     position: relative;  padding: 0 0 15px;     border: solid 1px #e5deda; } /* 单栏fieldset三栏label */ #adv label { display : block; float: left; width: 30%; } fieldset必须浮动 因为要考虑到将来两栏、三栏的情况 必须为fieldset指定width 否则IE下label的宽度无效 So, 不能有margin,不能有xxx…
更囧的 JavaScript
偷懒选用自己熟悉的jQuery
更轻巧    -   项目很小,前端交互逻辑比较简单 API更易用   -  作为非专业人士… 项目周期短 内网小项目  -  轻装上阵,够用就好 爱死动画组件了! -  激发前端的想象力 后台开发人员也喜欢jQuery哦! 很不热心参与的自动补全 就算懂YUI我也会选jQuery啦!
文档,博客,工作,All In One. jQuerymscroll插件 frameset or iframe ? 用iframe更方便地操纵边栏 少一个http请求 多了一点CSS样式 参数配置设计 写在HTML中,避免禁用JS后的完全不可用 直接修改 href , 而不是操纵 window.location ,把对浏览器行为的变更降到最低 这就需要事先把URL等缓存进数组中 创新项目?  -miniSearch
发挥前端想象力创造傻瓜化交互
直接上使用文档了..   miniSearch集成包括但不限于淘宝内网各站点的站内搜索,提供一站式搜索体验。 在输入框输入关键词后,点击下方的按钮,即可调用相应网站的站内搜索,结果在右边的框架页中显示。 如果直接在输入框中按回车键提交表单,将会调用“挖淘宝”搜索。 右上角的两个按钮分别代表缩起边栏和关闭边栏。可以按需切换左边栏的显示状态。 如果框架页为默认欢迎界面,点击关闭按钮会回到“挖淘宝”首页,否则跳转到框架中的页面。 点击左边栏顶部的logo可以回到默认欢迎界面。 在左边栏滚动鼠标中键,可以上下滚动边栏,以查看更多其他站内搜索。 鼠标移到左边栏下方或顶部靠近浏览器边界的地方,边栏会自动滚动。
挖淘宝 主搜索
550行代码
50%自写
没有所谓面向对象的概念
所以……
很凄惨!
不过…
效果是OK的!
“全选”和“全不选”
让界面简洁让用户放弃思考
为扩展性预留,命名:qselect4xxx 拒绝无节制的 ctr+c , ctr+v 更深入的理解代码复用 行为分解并独立 类似行为合并 让逻辑简单 每点击checkbox一次都要计数并比对 似乎有点傻逼 算法不是我的强项啦! IE好好玩耶~ 永远用 onclick 代替 checkbox 的 onchange… 经验
酷诶~
高级搜索的展开动画
好玩的页码(IE很不幸)
结论:恶心的小技巧给用户惊喜!用户体验指数,嗖嗖嗖~
[[ [ 在百技的成长] ]]
淘宝业务的大致了解 好大,好复杂,好有前途…
技术成长 Java,C++  :还是不会呢… 测试 和 质量意识:帮助很大 不过,如果都会了,还分这么多职位干嘛?
淘宝人的工作流程 严密、高效、注重沟通…
作为新人要注意:
1. 有什么话早点说 诚信:诚实正直,言行坦荡…
准确判断,快速决断
2. 为团队中其他人着想 团队合作:共享共担,平凡人做平凡事…
3. 一定要按时完成任务! 客户第一:客户是衣食父母! 敬业:专业执着,精益求精
对不起,班长
4. 不要局限自己 拥抱变化:迎接变化,勇于创新… 激情:乐观向上,永不放弃
相信潜力,全力以赴
坚持 or 妥协 ?
平衡  是一种艺术谦虚  是一种品位
用户体验 也需要质量控制
令人惋惜的偏差 设计稿 最终上线
解决方案
1. 明确细节,并且从一开始就明确 以方便开发人员设计架构
2.积极主动、随时关注 UE人员的地位是自己争取来的
3.提高UE质量意识 当大家心中都有数 才能避免“因为你的失误让我加班”
So... ...
向明尘同学表示歉意!
正如我前几天的一条推特所说
[object Object]

More Related Content

Viewers also liked (17)

Reporte de pelicula
Reporte de peliculaReporte de pelicula
Reporte de pelicula
 
Evaluation 1
Evaluation 1Evaluation 1
Evaluation 1
 
asunción
asunciónasunción
asunción
 
Computacion
ComputacionComputacion
Computacion
 
Las quemaduras(1)
Las quemaduras(1)Las quemaduras(1)
Las quemaduras(1)
 
Internet
InternetInternet
Internet
 
Bases de Datos
Bases de DatosBases de Datos
Bases de Datos
 
математичний маятник
математичний маятникматематичний маятник
математичний маятник
 
Hort novem i desem
Hort novem i desemHort novem i desem
Hort novem i desem
 
The Jewel's mystery - Third part
The Jewel's mystery - Third partThe Jewel's mystery - Third part
The Jewel's mystery - Third part
 
Madeleyni saraya v
Madeleyni saraya vMadeleyni saraya v
Madeleyni saraya v
 
Glosario
GlosarioGlosario
Glosario
 
remates
rematesremates
remates
 
мови програмування дроженець, лисица 11 б (2)
мови програмування дроженець, лисица 11 б (2)мови програмування дроженець, лисица 11 б (2)
мови програмування дроженець, лисица 11 б (2)
 
Documento 123
Documento 123Documento 123
Documento 123
 
Aprendizaje significativo
Aprendizaje significativoAprendizaje significativo
Aprendizaje significativo
 
Calendario formazione 2015
Calendario formazione 2015Calendario formazione 2015
Calendario formazione 2015
 

百技毕业答辩 丘迟