使用 Sketch 改善程式與設計的合作及標註方式

FrontEnd, UI Design, Sketch, Zeplin, InVision

文章介紹 http://blog.patw.me/archives/1114/use-sketch-to-improve-flow-of-frontend-and-design/
- Patrick Wang (patw)

Transcript

1. patw / Front-End Engineer / https://patw.me
   Gogolook Developers meet up
   ́
   ֵአ SKETCH 硬珿纷ୗ膏戔懯ጱ
   ݳ֢现秂戢ොୗ
   

   View Slide

2. ዳ讨
   

   View Slide

3. wireframe → mockup → prototype
   Ӟॺ秂伛牧ݱᛔ薹捝牐
   Benoît Meunier, https://flic.kr/p/aJdba8
   

   View Slide

4. ૡ纷䒍ெ讕᮷犋ᆙ
   mockup 䋿狶牧
   ڊ㬵ጱ౮ຎ者ฎ稯琺縄ෑ牐
   

   View Slide

5. 秂戢ڊ㬵ጱ憒໒蔭ੂੂ讔讔牧
   虏Ո፡ک脒绯牧盄ݢ胼螭䨝笙秂౲ฎ笙፡牐
   

   View Slide

6. 戔懯䒍耬ԓزկ玕ጱ禊盢牧ྯӞ㮆㻌زጱೲ衔᮷磪犋Ꭳ螇
   ฎ犋ฎಋ藮蝨౮ጱ犚盏癩吖牧篷ဩ᯿蕦窂አ牐
   SprinterJockey, https://flic.kr/p/w5V2x1
   

   View Slide

7. మᥝ朼䌘戔懯ᑤ蝱ᤈ懵抷
   ٚ䋿狶牧֕犋Ꭳெ讕蝱ᤈ牐
   ྯӞ㮆戔懯䒍胙盅᮷磪Ӟᗭ____
   

   View Slide

8. ૡ纷䒍೭ک戔懯ᑤ蝱ᤈ翕殷䋿֢碻牧
   PM 犖䷱൉׀෈礯牧
   ݝ胼樄 PSD 蕦蕣෈ਁ౲ฎ፡瑽ᛔ૩಑牐
   䌕禂಑ਁ㹓
   

   View Slide

9. ݱ圵
   脲愆
   ᮎ犚 mockup ䷱ޞ藗֦ጱԪ
   

   View Slide

10. 6.(7&+
    

    View Slide

11. View Slide

12. https://www.sketchapp.com/
    Sketch
    

    View Slide

13. 吚簁牧஠殾ض藯ጱฎ牧
    ਙ㪔篷ဩ薹究ಅ磪ጱዳ讨牧
    磪犚㺔氂ٌ䋿犋ࣁૡٍ牐
    

    View Slide

14. ‣ Mac Only
    ‣ $99 聅ز
    ‣ UI Mockup (Web/App 緡ݢ)
    ‣ 獉ୌग़圵粚ࣳ
    ‣ ݢ疥زկ戔傶 Symbol ᯿蕦ڥአ
    ‣ 秂戢牏蜍ڊො׎
    ‣ 䔶य़ኞ眲瑹ҁݱ圵क़䟑膏塅๜҂
    ‣ 砇蟴 Zeplin牏InVision 狶娄Ӥ԰㵕懵抷
    

    View Slide

15. View Slide

16. Օᶎ
    

    View Slide

17. View Slide

18. 䋿ֺ
    

    View Slide

19. 吚碻ٌ䋿磧य़ጱ㺔氂ฎࣁ...
    碻纷蚤虻რ蟴ᗝҁ粁҂
    犋螂螭ฎ磪犚ࣁ蕣֢ᶎݢ犥
    硬蝱ጱ瑿ො
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. Sketch Toolbox
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. Symbol زկ玕
    

    View Slide

29. View Slide

30. View Slide

31. https://zeplin.io/
    https://zpl.io/download
    Mac app
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. http://www.invisionapp.com/
    InVision
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. 蝫奾
    

    View Slide

51. ‣Sketch
    ‣Sketch Plugins
    ‣Sketch Plugins – GitHub
    ‣Zeplin
    ‣InVision
    ‣Sketch App Tutorials (Youtube)
    ‣SketchӾ෈ᗑ
    

    View Slide