来自前端的交互设计

来自前端的交互设计

Transcript

1. 2014年02月22日   来自前端的交互设计  
2. !  卢岳文   !  来自奇舞团   !  360搜索onebox   !  360音乐   自我介绍  
3. !  最接近用户   !  梦境重建师   !  资源配置   !  最具美感工程师   为什么FE要关注交互设计？  
4. !  可用   !  易用 !  友好   交互设计目的  
5.    可用   能够有效的完成任务需求  
6. 谢谢通知   为什么没有通知库？   被迫点击“OK”  
7. 初始化失败，看起来有什么问题吗？  
8. 这样看起来好些了  
9. 正常情况下是这样的  
10.         如何防止   图片加载失败  
11.         图片绑定error  
12.         将error事件移除，防止重复触发  
13. 添加  alt  属性  
14.        易用   完成任务的容易程序及时间长短  
15. 注册案例   !  这些信息必须吗？   !  安全吗？   !  视觉混乱  
16.   降低门槛   分步完善     简化  
17. 选项越多，规则越多  
18. 发散一下：越简约越易用吗？  
19. 阻碍操作   强迫等待    
20.   不小心触发   感觉不可控    
21. 功能失效、位置隐蔽、信息干扰 都会给用户带来严重的挫败感  
22.      友好   是否让用户在使用过程中感到愉悦  
23. 附件提醒  
24. 360点评，有趣的打分  
25. 抛物线公式：   一般式：  y=px2+ax+b      (p、a、b为常数，p≠0）     顶点式：  y=p(x-a)2+b    （p、a、b为常数，p≠0）     交点式(两根式)：y=p(x-x1)(x-x2)    （p≠0）  
26. 1.  将抛物线的顶点设置在x轴上：          y  =  p  *  (x-a)2     2.  设起始点坐标为x1，y1        终点坐标为x2，y2          则：          y1  =  p  *  (x1-a)2          y2  =  p  *  (x2-a)2     3.  假设  x1  >  x2  ，可计算出：          p  =  ((sqrt(  y1)  +  sqrt(  y2))  /  (x1  -  x2)  )2          a  =  x1  -  sqrt(y1  /  p)  
27. 抛物线轨迹  
29.         常见电商菜单  
30.         延迟显示子菜单  
31.         探测鼠标移动的 方向与轨迹  
32.         由一条直线与X轴正方向所成角的正切〔正切就是对边比邻边〕   K  =  tanα  =（y2-y1）/（x2-x1）=  Δy/Δx  
33.        
34. 带给用户更好的使用体验  
35. !  HTML5   !  CSS3   !  CANVAS   !  Cocos2D   !  AngularJS   更酷的前端交互  
36. !  http://www.75team.com    奇舞团  博客   !  http://qiwoo.org    奇舞团  平台工具/组件   !  http://html5.360.cn    炫酷的HTML5作品   欢迎关注  
37. 谢    谢  !   北京奇虎科技有限公司