前端工程师如何兼顾设计工作

前端工程师与设计师的关系非常密切，而在小团队的合作中往往每个人都需要同时兼顾很多角色，高效地产出。因为项目的需求，产品的特点还有个人的兴趣，我需要同时承担这两种角色，此前一直做前端开发的我在这两年的时间内遇到了一些挑战、问题，也得出了一个经验和心得，希望与大家一一分享。

Transcript

1. 我的困惑 前端工程师如何兼顾设计工作
2. 吕婷 Ting Lv 前端工程师 2012 - 至今 青云 QingCloud 2010 - 2012 豆瓣 Douban 2007 - 2010 wigix
3. 前端工程师 设计师
6. 原因
9. 系统设计 底层技术实现 API开发
10. SUN MON TUES WED THUR FRI SAT 100 80 60 40 20 0 SUN MON TUES WED THUR FRI SAT 125 100 75 50 25 0
11. 另外一个原因：效率
12. 参与角色 • 产品/项目经理 • 设计师（视觉设计师，交互设计师） • 后端开发工程师 • 前端开发工程师（重构工程师，JS工程师） • 测试工程师
13. 问题 • 大家只专注在各自的领域 • 沟通不及时或者过度沟通 • 时间成本高, 整体进度被拉长 • 每个人都无法全面了解产品的细节 • 任何改动都要经过一系列的环节，效率太低 • 越来越不了解彼此的工作方式和特点，不利于默契合作
14. 参与角色 • 产品经理 • 设计师 （视觉设计师，交互设计师） • 后端开发工程师 • 前端开发工程师 • 测试工程师
15. 从需求出发
16. 交付物 • 计算 • 存储 • 网络 • 安全
17. 交付方式 控制台 API
18. • 用 Photoshop 做 Mockup ？ • 用 illustrator、firework 做原型图？ • 用 Axure Pro 做个 demo 先？
20. 记得我是个前端工程师
21. HTML CSS JS
23. 前端实现方案 • API • Web App • BackboneJS • Stylus • Grunt
27. 不要过早关注细节
28. Why we skip Photoshop • You can’t click a Photoshop mockup. • Photoshop gives you too many tools to focus on the details. • The text in Photoshop is not the text on the web. • Photoshop puts the focus on production, not productivity. • Photoshop is repeating yourself. • Photoshop isn’t collaboration friendly. • Photoshop is awkward.
30. 设计不需要完美，足够好就可以
31. 新的挑战：资源可视化
32. 不要过度设计
35. 用户的真实需求？ • 资源本身的可视化 • 网络拓扑图展示 • 支持所有资源操作 • 实时更新
36. Internet 181.11.242.184
39. 实现 • SVG • Web App • Components
43. 实现 • d3.js
44. Design is not just what it looks like and feels like. Design is how it works.
45. 基本原则 • 尽量简单 • 如果不能简单，就要保证每一步都正确 • 不要让用户思考 • 从用户角度出发
50. 反复验证， 快速调整， 碰撞出更好的用户体验， 收集用户的反馈
51. 我的收获 • 全身心的投入产品 • 工作效率高 • 沟通成本低 • 学会思考 • 极大的自由 • 极大的责任 • 极大的成就感
52. 新的挑战：官网
53. 与控制台的不同 • 用户范围更广 • 以宣传介绍为主 • 重注视觉 • 代表企业形象
54. 寻找灵感 • dribbble.com • http://tympanus.net/codrops/ • http://themeforest.net/category/wordpress/ corporate • http://www.thebestdesigns.com/
55. • 多看 • 多想 • 多做 方法
56. 工具 • 笔、纸 • illustrator • HTML CSS JS
58. 满意的地方 • 首屏 • 主色 • 风格
59. 不满意的地方 • 配色单调 • 图标风格不一致 • 细节不够
60. 新的挑战：控制台2.0
61. 改版的目的 • 更合理的导航结构 • 更好的用户体验 • 满足未来新增的多项功能 • 更好的视觉效果 • 令人感动的设计细节
62. 正在做的事情 • UI库 • 结合之前的经验，更加系统地学习设计 • 学习制作icon • 持续关注设计
63. UI库 • 页面基本元素的标准定义 • 快速产出高保真原型 • 积累通用的基础组件 • 可在实际开发中直接使用
66. Thanks