A big redesign of Rush - Tim Wu

Transcript

1. Tim Wu v i s u a l d e s i g n e r Sketch Meetup
2. About Me 1993.03.18 WeChat: wuweiguo0318 Hangzhou, China Dribbble.com Zi.com wuweiguo3@gmail.com Jiangsu University of Science and Technology Major: Information Management and information system (2010-2014) 3 years experience
3. Experience 2016.02 - 2016.11 Rush 负责 Rush iOS / Android / Mac / Web 端的⽤用户体验和产品视觉⼯工作。 2015.04 - 2016.02 ⽹网易易 LOFTER 负责 LOFTER iOS / Android / Web 端的界⾯面设计⼯工作，主导了了 LOFTER 5.0 UI 改版，定义了了全新的产品视觉。
4. A Big Redesign of Rush
5. What is Rush? Rush 致⼒力力于成为最好⽤用的邮件客户端，拉近你 和邮件联系⼈人的距离，给你带来前所未有的邮 件体验，让⼯工作交流更更加简单便便捷。
6. Logo designed by UENO. Font: ARS Maquette
7. Rush 微信读书 Twitter 知乎 掘⾦金金 Doit.im Saturation
8. Saturation
9. Principle of Redesign 轻松 • 尊重⽤用户直觉，不不使⽤用晦涩复杂的交互； • 减少学习成本，⽤用最少的引导和解释； • 减少层级和步骤，尽量量使⽤用单屏引导。 • 原⽣生体验； 准确 • ⽂文字清晰易易读，图标⽣生动易易懂， ⾊色彩清爽美观，排版恰到好处； • 遵循⼀一致性规范； 愉悦 • 适当场景、少量量的情感化过度与提示； • 解决不不开⼼心； • 永远不不忘我们是为⼯工作交流⽽而⽣生。
10. What's the problem • 整体⾊色调灰暗； • 主题⾊色运⽤用黯淡⽆无光； • 冗余元素：邮箱底板，露露出附件； • 视觉 bug 如间距、截断位置； • 新邮件提示不不明显； • 邮件列列表阅读感受不不佳； • icon 绘制不不精致； • 滑动后显示范围很窄； • 整体⻛风格平淡，没有特⾊色；
12. Faces
13. Avatar Color Reduce the saturation to 0
15. Corporation Logo
16. What's the problem • ⽓气泡占⽤用时间位置不不合理理； • ⽓气泡、⽂文字、icon 都很⼩小； • 截断位置不不对； • 搜索⼊入⼝口不不统⼀一； • 多处存在字体使⽤用错误；
18. What's the problem • 加号表意不不明； • 右侧导航间距太窄； • 邮箱信息是找⼈人的区分要素吗，是否有必要露露出？ • 整体很平淡；
25. Chat view
26. Rush - Mail
27. Rush - Other three tabs
28. Rush - Chat view
29. Rush - Calendar
30. Rush - Other
31. Rush - Illustration
32. Rush - Illustration
33. Rush - UI Kit Sketch Plugin: Artboard Tricks
34. Rush - UI Kit
35. Rush - UI Kit
36. Icons
37. Emotion designed by Vitalia.
38. Animation
39. Animation
40. Design Details
41. Design Details
42. Design Details
43. Design Details Q Z R V D U H W X T B F I J E C S A Y N M G O K P L space 123 return Q Z R V D U H W X T B F I J E C S A Y N M G O K P L space 123 return iOS Rush
44. More than mail!
45. Thanks for your time!