使用 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 硬珿纷ୗ膏戔懯ጱ ݳ֢现秂戢ොୗ
2. ዳ讨
3. wireframe → mockup → prototype Ӟॺ秂伛牧ݱᛔ薹捝牐 Benoît Meunier, https://flic.kr/p/aJdba8
4. ૡ纷䒍ெ讕᮷犋ᆙ mockup 䋿狶牧 ڊ㬵ጱ౮ຎ者ฎ稯琺縄ෑ牐
5. 秂戢ڊ㬵ጱ憒໒蔭ੂੂ讔讔牧 虏Ո፡ک脒绯牧盄ݢ胼螭䨝笙秂౲ฎ笙፡牐
6. 戔懯䒍耬ԓزկ玕ጱ禊盢牧ྯӞ㮆㻌زጱೲ衔᮷磪犋Ꭳ螇 ฎ犋ฎಋ藮蝨౮ጱ犚盏癩吖牧篷ဩ᯿蕦窂አ牐 SprinterJockey, https://flic.kr/p/w5V2x1
7. మᥝ朼䌘戔懯ᑤ蝱ᤈ懵抷 ٚ䋿狶牧֕犋Ꭳெ讕蝱ᤈ牐 ྯӞ㮆戔懯䒍胙盅᮷磪Ӟᗭ____
8. ૡ纷䒍೭ک戔懯ᑤ蝱ᤈ翕殷䋿֢碻牧 PM 犖䷱൉׀෈礯牧 ݝ胼樄 PSD 蕦蕣෈ਁ౲ฎ፡瑽ᛔ૩಑牐 䌕禂಑ਁ㹓
9. ݱ圵 脲愆 ᮎ犚 mockup ䷱ޞ藗֦ጱԪ
10. 6.(7&+
12. https://www.sketchapp.com/ Sketch
13. 吚簁牧஠殾ض藯ጱฎ牧 ਙ㪔篷ဩ薹究ಅ磪ጱዳ讨牧 磪犚㺔氂ٌ䋿犋ࣁૡٍ牐
14. ‣ Mac Only ‣ $99 聅ز ‣ UI Mockup (Web/App 緡ݢ) ‣ 獉ୌग़圵粚ࣳ ‣ ݢ疥زկ戔傶 Symbol ᯿蕦ڥአ ‣ 秂戢牏蜍ڊො׎ ‣ 䔶य़ኞ眲瑹ҁݱ圵क़䟑膏塅๜҂ ‣ 砇蟴 Zeplin牏InVision 狶娄Ӥ԰㵕懵抷
16. Օᶎ
18. 䋿ֺ
19. 吚碻ٌ䋿磧य़ጱ㺔氂ฎࣁ... 碻纷蚤虻რ蟴ᗝҁ粁҂ 犋螂螭ฎ磪犚ࣁ蕣֢ᶎݢ犥 硬蝱ጱ瑿ො
24. Sketch Toolbox
28. Symbol زկ玕
31. https://zeplin.io/ https://zpl.io/download Mac app
40. http://www.invisionapp.com/ InVision
50. 蝫奾
51. ‣Sketch ‣Sketch Plugins ‣Sketch Plugins – GitHub ‣Zeplin ‣InVision ‣Sketch App Tutorials (Youtube) ‣SketchӾ෈ᗑ