前端和视觉间的故事

f2e and vd

Transcript

1. Frontend and visual designer You  Xiao   zhouqicf@gmail.com   http://www.zhouqicf.com   前端和视觉间的故事
2. BOX MODEL
3. BOX MODEL h"p://dev/labs/youxiao/minutes/f_v/box.html  
4. BOX MODEL 问题出在哪？
5. PSD
6. 出相同功能模块的图时，尽可能在第一时间提供该模块的最复杂情形   p  文字太长导致折行   p  导航右侧的按钮、链接   p  多种数据形式、多种状态   p  …   ABOUT PSD
7. Png8不支持半透明（布尔透明）   ABOUT PSD ABOUT PSD h"p://ued.taobao.com/blog/2010/12/10/jpg_png/
8. 图片的尺寸时不要将边框线计算在内   ABOUT PSD ABOUT PSD
9. 遇到迭代开发时，千万要事先统一所有页面的视觉样式，包括通 用模块样式（如模块的标题、喉巴……）；通用元素的样式（如提 示、表单、表格……）；模块间的间距；配色方案……   尽量避免样式的不一致、避免推翻之前的设计。   ABOUT PSD h"p://kxt.koubei.com/space/vd/xiqin/2010xiangmu/sd/
10. 原生按钮还是链接模拟按钮？   ABOUT PSD
11. 中文默认字体（font:  12px/1.231  arial;） ABOUT PSD …
12. 哪些是链接？ ABOUT PSD
13. 1537*528 157KB 首页：10KB(css)+60KB(js)+40KB(img)  ≈  110KB 内容尽量不要做成图片 home_icon_v9.jpg ABOUT PSD ABOUT PSD h"p://kxt.koubei.com/product/business/v1/demo/home.php
14. 将视觉稿按“项目分类”整齐地放在KXT上 ABOUT PSD ABOUT PSD h"p://kxt.koubei.com/space/vd/product/
15. 标注：   p  特殊字体，标示出字体名称、字号，特别是运用了特殊字体的 数字（PS-­‐BROSWER） p  关键间距的数值（当然对于前端来讲，这里更好的做法是视觉 统一模块甚至元素间的间距，比如标题的下边距统一10像素， 各个模块间的下边距统一20像素）   p  行高 p  特殊色值   p  渐变范围、阴影范围（显示器色差）   p  … ABOUT PSD
16. DYNAMIC DESIGN
17. “DYNAMIC” DESIGN 显⽰示、隐藏; ⿏鼠标移⼊入、⿏鼠标移出; 加载开始、加载结束; DYNAMIC DESIGN
18. h"p://kxt.koubei.com/product/business/v1/demo/pic_branch_manage.php DYNAMIC DESIGN
19. h"p://my.koubei.com/jiayuan/home.html DYNAMIC DESIGN
20. h"p://www.taobao.com DYNAMIC DESIGN
21. h"p://kxt.koubei.com/labs/youxiao/minutes/f_v/index-­‐transform.htm DYNAMIC DESIGN 更有趣的⽅方式：
22. h"p://demo.tutorialzine.com/2010/10/css3-­‐animated-­‐bubble-­‐bu"ons/css3-­‐bu"ons.html DYNAMIC DESIGN
23. h"p://my.koubei.com/jiayuan/home.html DYNAMIC DESIGN
24. DYNAMIC DESIGN What’s more?
25. h"p://twi"er.com/ DYNAMIC DESIGN Ajax  is  everywhere.
26. h"p://kxt.koubei.com/product/business/v1/demo/pic_one_manage.php DYNAMIC DESIGN Ajax  is  loading.
27. h"p://my.koubei.com/my/personalhome.html?city=2595 DYNAMIC DESIGN Ajax  is  loading
28. h"p://www.flickr.com/photos/upload/ DYNAMIC DESIGN Ajax  is  loading
29. h"p://my.koubei.com/jiayuan/home.html DYNAMIC DESIGN Ajax  is  successful.
30. DYNAMIC DESIGN And, What’s more?
31. DYNAMIC DESIGN h"p://www.webdesignerwall.com/demo/media-­‐queries
32. DYNAMIC DESIGN
33. DYNAMIC DESIGN
34. h"p://kxt.koubei.com/product/business/v1/demo/home.php DYNAMIC DESIGN
35. Modularity DESIGN
36. MODULARITY
37. MODULARITY
38. MODULARITY h"p://kxt.koubei.com/space/lib/global/base/builder/builder.html
39. MODULARITY
40. MODULARITY
41. h"p://kxt.koubei.com/product/manage/v1/demo/demo.php MODULARITY
42. h"p://kxt.koubei.com/product/manage/v1/demo/demo.php MODULARITY h"p://kxt.koubei.com/space/vd/xiqin/2010xiangmu/sd/%E5%90%8E%E5%8F%B0%E8%A7%86%E8%A7%89%E8%A7%84%E8%8C%83.JPG
43. MODULARITY
44. MODULE OOCSS OODESIGN MODULARITY
45. MODULARITY
46. MODULARITY
47. h"p://oocss.org/ MODULARITY
48. h"p://kxt.koubei.com/k2/bu"on/bu"on.html MODULARITY
49. MODULARITY
50. MODULE PATTERN MODULARITY
51. MODULARITY p  标题   p  简介   p  这个模式用来解决什么问题   p  具体的解决方案   p  为什么用这种模式   h"p://developer.yahoo.com/ypa"erns/navigafon/bar/progress.html
52. p  交互生成高保真原型，甚至生成前端HTML结构   p  视觉-­‐基于基本框架再根据不同项目、页面替换不 同风格的质感和色彩，节约重新创意时间   p  前端专注CSS+JS，专注功能、体验   h"p://ui-­‐pa"erns.com/pa"erns h"p://developer.yahoo.com/ypa"erns/ MODULARITY
53. MODULARITY h"p://tms.taobao.com
54. CSS3
55. h"p://lab.simurai.com/css/bu"ons/ CSS3 - @FONT-FACE
56. h"p://code.google.com/webfonts CSS3 - @FONT-FACE
57. h"p://www.zhouqicf.com/demo/css/2010/bu"on_maker/bu"on_maker.html CSS3 - BORDER-RADIUS
58. h"p://my.koubei.com/jiayuan/home.html CSS3 - BOX-REFLECT
59. CSS3 - TEXT-STROKE
60. h"p://slides.html5rocks.com/#slide34 CSS3 - TEXT-SHADOW
61. h"p://www.zhouqicf.com/html-­‐css/content-­‐and-­‐webkit-­‐mask-­‐image CSS3 - -WEBKIT-MASK-IMAGE
62. CSS3 - GRADIENTS
63. h"p://westciv.com/tools/gradients/index.html CSS3 - GRADIENTS
64. CSS3 - GRADIENTS h"p://westciv.com/tools/radialgradients/index.html
65. CSS3 - BOX-SHADOW
66. h"p://westciv.com/tools/shadows/ text-­‐shadow:7px  7px  10px  #333333; CSS3 - BOX-SHADOW
67. CSS3 - OPACITY Border-­‐color、background-­‐color、color、outline…  
68. CSS3 - TRANSFORM h"p://westciv.com/tools/transforms/index.html
69. CSS3 - ANIMATION h"p://www.zurb.com/playground/css3-­‐polaroids
70. CSS3 - ANIMATION h"p://www.apple.com/html5/showcase/gallery/#grid2d
71. CSS3 …
72. CSS3 抛开限制，   尽情享受设计。 Restrictions aside and enjoy the design.
73. CSS3 性能、成本、效率。 Performance, cost, efficiency.
74. CSS3 渐进增强。 Progressive Enhancement. h"p://lifesinger.org/blog/2008/10/understand-­‐progressive-­‐enhancement/
75. p  样式类   –  公共Bu"on列表   –  公共ICON列表   –  翻页组件   –  Logo列表   –  后台产品公用组件   p  组件类   –  calendar日历组件   –  层叠数据选择器   –  图片上传裁切   –  carousel轮播组件   –  富文本编辑器   –  F2E:YKValidator   –  popup弹出层对话框   –  气泡   –  wangwang   h"p://kxt.koubei.com/wiki/index.php/F2E:KXT h"p://kxt.koubei.com/wiki/index.php/F2E:K2 F2E MODULES
76. p  视觉和前端的故事   –  h"p://kxt.koubei.com/wiki/index.php/F2E:VD   p  Visual  Firebug   –  h"ps://chrome.google.com/extensions/detail/lomkpheldlbkkfiifcbfifipaofnmnkn   p  Css3  bu/on  maker   –  h"p://www.zhouqicf.com/demo/css/2010/bu"on_maker/bu"on_maker.html   p  K2  bu/on\pagina8on\icon   –  h"p://kxt.koubei.com/k2/bu"on   –  h"p://kxt.koubei.com/k2/paginafon   –  h"p://kxt.koubei.com/k2/icon   p  后台类组件   –  h"p://kxt.koubei.com/product/manage/v1/demo/demo.php   DONE & DOING
77. Tell us, what do you want. 你提需求，   我们来实现。
78. Q&A