20190821 Beginner Course (1/2)

爆速プロトタイピングツールNoodlでUIデザインをしよう！（1/2）

Transcript

1. X 1
2. ര଎ϓϩτλΠϐϯάπʔϧNoodlͰ UIσβΠϯΛ͠Α͏ʂʢ1/2ʣ NOODL BEGINNER COURSE 2
3. X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛ࡟আ͢Δ: ϊʔυΛબ୒ɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબ୒ɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 3
4. X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ಺༰Λ੾Γସ͑ΔϘλϯ ߏங͢Δ৔ॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε= ϊʔυ 4
5. X L001-01 ϨετϥϯΞϓϦ 5
6. X + Component͔Β৽نComponentͱͯ͠IndexɺMenuΛ࡞੒ 6 Componentͷ࡞੒
7. X GroupͷઃఆͰMenuόʔͷҐஔͱαΠζΛઃఆ͠ɺGroupͱಉ͡αΠζ(100%)ͷRectangleͰྖҬͷ৭Λࢦఆ͢Δ 7 Menu Componentͷத਎ͷ࡞੒
8. X ઌ΄ͲͷRectangleͷഎ໘ʢϊʔυͰ͸্ʣʹOpacityΛബͨ͘͠ࠇ͍RectangleΛૠೖ͠2 pix͚ͩͣΒ͢ ͞ΒʹBlur LengthͷઃఆͰྠֲΛ΅͔͢͜ͱͰɺന͍Rectangleͷ্෦ʹബ͍ઢΛ࡞੒Ͱ͖Δ 8 Menuόʔ্෦ʹബ͍࢓੾Γઢ࡞੒
9. X Stack LayoutΛ࢖ͬͯΞΠίϯΛฒ΂ΔɻΞΠίϯ͕എܠͱಉ͡നͩͱݟ͑ͳ͍͜ͱ͕͋ΔͷͰɺഎܠʹ৭Λ͚ͭΔͱ࡞ۀ͠΍͍͢ ΞΠίϯ͸ImageΛ࢖͍ɺ৭΍഑ஔΛௐ੔͢ΔɻΞΠίϯؒ͸Stack LayoutͷItem SpacingͰௐ੔͢Δͱྑ͍ 9 ΞΠίϯͷ഑ஔ
10. X ComponentsͷPagesϑΥϧμ಺ʹTopͱ͍͏ComponentΛ࡞੒͢ΔɻϑΥϧμ಺ʹ࡞Δࡍ͸ϑΥϧμӈͷ̏఺ΞΠίϯ͔Β࡞੒͢Δ 10 Top Componentͷ࡞੒
11. X ࠷ॳͷ਌ϊʔυΛPageͰ࡞੒͢ΔʢGroupͰ͸ͳ͍ʣɻͦ͜ʹBackgroundͱͯ͠Rectangleʢബ͍άϨʔʣɺHeaderͱͯ͠Groupɺ ຊจͱͯ͠Scroll ViewΛ࡞੒͢ΔɻHeader͸·ͣHeaderΛ࡞Γ͍ͨྖҬΛߟྀͯ͠GroupͷαΠζΛܾΊΔ 11 Top Componentͷத਎ͷ࡞੒ ࿮૊Έ͔Β࡞Δ
12. X RectangleͰഎܠ৭Λࢦఆ͢Δɻݕࡧ૭ྖҬΛGroupͰαΠζɾҐஔࢦఆ͢ΔɻImageͰMenuΞΠίϯΛ഑ஔ͢Δ ˎ͜ͷΑ͏ʹImageͷ਌ʹGroupΛஔ͔ͳͯ͘΋੒ཱ͢ΔɻҰํɺ਌GroupͰྖҬΛ࡞Δͱݟ͑ͳ͍TapྖҬʹͰ͖ͨΓɺͳʹ͔ͱศར 12 Headerͷத਎ͷ࡞੒ MenuΞΠίϯͱݕࡧ૭ྖҬͷ഑ஔ
13. X Search Group಺ʹRectangleͰݕࡧ૭Λ࡞੒͢ΔɻSearch GroupͷPaddingΛࢦఆ͢Δ͜ͱͰɺRectangleͷपΓʹ༨നΛ࡞Δ͜ͱ͕Ͱ͖Δ จࣈೖྗՄೳͳςΩετϘοΫεʹ͸Text InputΛ࢖͏ɻΞΠίϯ΍ςΩετͷҐஔ͸దٓௐ੔͢Δ 13 Headerͷத਎ͷ࡞੒ ݕࡧ૭ɺςΩετೖྗɺݕࡧΞΠίϯͷઃஔ
14. X Scroll ViewͷItem SpacingΛ40ʹઃఆ͢ΔɻScroll Direction͕Verticalʹͳ͍ͬͯΔ͜ͱΛ֬ೝ͢ΔɻScroll Viewʹରͯ͠Ϋʔϙϯը૾(Image)ɺ ͱSection1(Group, Height = 1290)ͱSection2(Group, Content Height)Λ࡞੒͠ɺ͞ΒʹRectangleΛ࢖ͬͯനʹ͢Δ 14 Topͷத਎ͷ࡞੒
15. X Section1ͷPad TopΛ-40ʹࢦఆ͢Δ͜ͱͰɺ਌ͷScroll ViewͰࢦఆͨ͠Item SpacingΛ૬ࡴ͢Δ͜ͱ͕Ͱ͖Δ 15 Paddingͷখٕ
16. X ͋Β͔͡Ί༻ҙͯ͋͠ΔH6Λૠೖ͠ɺ೚ҙͷλΠτϧΛೖྗ͢Δʢϗοτͳ͓ళͷ෦෼ʣ Scroll Viewͷߴ͞ɾҐஔɾItem SpacingΛࢦఆͯ͠Scroll DirectionΛHorizontalʹ͢Δ ͋Β͔͡Ί༻ҙͯ͋͠ΔCard ItemΛෳ਺ૠೖ͠ɺScroll ViewͷPad Left, Pad RightΛௐ੔͢Δ 16 Section1ͷத਎ͷ࡞੒ ԣεΫϩʔϧίϯςϯπ
17. X Component InputsΛ࡞੒͠ɺ+PortͰ3ͭPortΛ࡞੒͢Δɻ(Title, Img, text) ˎPortΛ࡞੒͢ΔͱComponent Inputs͔ΒNoodlΛҾͬுΕΔΑ͏ʹͳΔ ্ਤͷΑ͏ʹNoodlΛ઀ଓ͢Δ͜ͱͰɺComponentͷ֎෦͔Β֤ϊʔυͷύϥϝʔλΛมߋͰ͖ΔΑ͏ʹͳΔ 17 Card Itemͷத਎ͷ࡞੒ ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ
18. X Component OutputsΛ࡞੒͠ɺ+PortͰ1ͭPortΛ࡞੒͢Δ(tap)ɻComponent ChildrenΛStack LayoutʹͿΒ͛͞Δɻ ͜ΕʹΑΓɺCard Item Componentͷ֎ʹͿΒ͛ͨ͞ϊʔυ͕͜͜ʹͿΒ͕ͬͨ࣌͞ͱಉ͡ڍಈʹͳΔ 18 Card Itemͷத਎ͷ࡞੒ ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ
19. X Topʹ໭ΓɺCard ItemʹඞཁͳTagΛૠೖ͢ΔɻCard ItemͱTagͷ಺༰Λฤूͯ͠ҰͭҰͭͷ͓ళʹ߹Θͤͨ৘ใʹॻ͖׵͑Δ ˎ͜͜ͰલϖʔδͷComponent Children͕ͳ͍ͱTagΛૠೖ͢Δ͜ͱ͕Ͱ͖ͳ͍ 19 Card Itemͷը૾΍આ໌ͷมߋɺTag෇͚
20. X Scroll ViewͷScroll To IndexͷIndexΛ2ʹ͢Δ
 BooleanͷValueʹνΣοΫΛೖΕͯSaved Value→Scroll To IndexͷDoʹܨ͙ ˎIndex͸୺͔Β0, 1, 2ɾɾͳͷͰ2ʹͨ͠৔߹͸3ຕ໨ʹͳΔ 20 Scroll ViewͷॳظҐஔͷઃఆ
21. X Section2ʹStack LayoutΛ࢖ͬͯH6, Card Item2Λૠೖ͢Δɻ͜ͷ࣌Item SpacingΛۭ͚Δͱݟӫ͕͑ྑ͍ Card Item2͕ܨ͕͍ͬͯͬͨߴ͕͞ಡΊͳ͍ͷͰɺStack LayoutͷSize ModeΛContent Heightʹͯ͠ॊೈʹ͓ͯ͘͠ 21 Section2ͷ࡞੒
22. X HeaderͷHeightΛScroll ViewͷPad Topʹܨ͙ͱ HeaderͰઃఆͨ͠஋͕Scroll Viewͷ஋ʹ൓ө͞ΕΔΑ͏ʹͳΔ 22 Headerͷߴ͞Λࢀরͯ͠Scroll ViewͷҐஔΛௐ੔͢Δ
23. X Scroll ViewͱHeaderͷॱ൪ΛೖΕସ͑Δ ˎԼʹ͋Δϊʔυͷํ͕ϓϨϏϡʔͰखલʹ͘ΔɻHeaderΛखલʹ͢Δ 23 HeaderͱScroll Viewͷલޙؔ܎Λमਖ਼͢Δ
24. X IndexͷதʹRoot(Group), Pages, MenuΛ্ਤͷΑ͏ʹ࡞੒͢Δ PagesͷStart Pageͱͯ͠TopΛબͿ 24 IndexΛ࡞੒͢Δ
25. X ComponentͷPagesϑΥϧμͷதʹTopͱಉ͡Α͏ʹRestaurant ComponentΛ࡞੒͢Δ(P.10) ্ਤͷΑ͏ʹϊʔυΛ഑ஔͯ͠ɺഎܠͷRectangleɺScroll ViewɺImageɺTextΛ࡞੒͢Δ TextΛGroupʹೖΕͯPaddingΛ͢ΔͱTextʹ༨നΛ࡞ΕΔ 25 Restaurantϖʔδͷ࡞੒
26. X ໭ΔϘλϯ͸120 x 120ͷྖҬΛGroupͰ࡞͔ͬͯΒImageΛૠೖͯ͠࡞੒͢Δ 26 ໭ΔϘλϯͷ࡞੒
27. X Card Item3ΛScroll Viewʹૠೖ͠ɺTagΛ͚ͭΔ ˎCard Item3͕ࣸਅʹ൒෼ඃ͍ͬͯΔͷ͸Card Item3಺ͷҰ൪্ͷGroup͕Pad Top -300ͱࢦఆ͍ͯ͠ΔͨΊͰ͢ 27 Card ItemͱTagͷ࡞੒
28. X Flow LayoutΛ༻͍ͯImageΛฒ΂ΔɻHeight 800 px 28 ը૾ΛྻͰฒ΂Δ
29. X ը૾SizeΛ360 x 360 pxɺFill ModeΛAspect Fillʹ͢Δ ˎFill Mode͸৭ʑࢼͯ͠Έ͍ͯͩ͘͞ɻFill ModeΛมߋͨ͠ࡍ͸ߋ৽͕ඞཁͰ͢ 29 ը૾Λมߋͯ͠੔͑Δ
30. X Topʹ໭ΓPage NavigationΛ࡞੒͠ɺDestinationʹRestaurantΛઃఆ͢Δ Index 2ͷCard Itemͷtap͔ΒPage NavigationͷNavigate To Pageʹ઀ଓ͢Δ 30 Top͔ΒRestaurantʹϖʔδભҠΛઃఆ͢Δ
31. X Restaurantʹ໭ΓPage Navigation BackΛ࡞੒͢Δ ໭ΔϘλϯͷGroupͷTap͔ΒPage Navigation BackͷBackʹ઀ଓ͢Δ ˎˎϓϨϏϡʔΛIndexͷRoot Groupʹ͢Ε͹׬੒Ͱ͢ˎˎ 31 Restaurantϖʔδͷ໭ΔϘλϯΛઃఆ͢Δ
32. X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 32