20190821 Beginner Course (1/2)

ര଎ϓϩτλΠϐϯάπʔϧNoodlͰ UIσβΠϯΛ͠Α͏ʂʢ1/2ʣ NOODL BEGINNER COURSE 2

X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛ࡟আ͢Δ:
ϊʔυΛબ୒ɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબ୒ɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷ୺ͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 3

X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ಺༰Λ੾Γସ͑ΔϘλϯ ߏங͢Δ৔ॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε=
ϊʔυ 4

X L001-01 ϨετϥϯΞϓϦ 5

X + Component͔Β৽نComponentͱͯ͠IndexɺMenuΛ࡞੒ 6 Componentͷ࡞੒

X GroupͷઃఆͰMenuόʔͷҐஔͱαΠζΛઃఆ͠ɺGroupͱಉ͡αΠζ(100%)ͷRectangleͰྖҬͷ৭Λࢦఆ͢Δ 7 Menu Componentͷத਎ͷ࡞੒

X ઌ΄ͲͷRectangleͷഎ໘ʢϊʔυͰ͸্ʣʹOpacityΛബͨ͘͠ࠇ͍RectangleΛૠೖ͠2 pix͚ͩͣΒ͢ ͞ΒʹBlur LengthͷઃఆͰྠֲΛ΅͔͢͜ͱͰɺന͍Rectangleͷ্෦ʹബ͍ઢΛ࡞੒Ͱ͖Δ 8 Menuόʔ্෦ʹബ͍࢓੾Γઢ࡞੒

X Stack LayoutΛ࢖ͬͯΞΠίϯΛฒ΂ΔɻΞΠίϯ͕എܠͱಉ͡നͩͱݟ͑ͳ͍͜ͱ͕͋ΔͷͰɺഎܠʹ৭Λ͚ͭΔͱ࡞ۀ͠΍͍͢ ΞΠίϯ͸ImageΛ࢖͍ɺ৭΍഑ஔΛௐ੔͢ΔɻΞΠίϯؒ͸Stack LayoutͷItem SpacingͰௐ੔͢Δͱྑ͍ 9 ΞΠίϯͷ഑ஔ

X ComponentsͷPagesϑΥϧμ಺ʹTopͱ͍͏ComponentΛ࡞੒͢ΔɻϑΥϧμ಺ʹ࡞Δࡍ͸ϑΥϧμӈͷ̏఺ΞΠίϯ͔Β࡞੒͢Δ 10 Top Componentͷ࡞੒

X ࠷ॳͷ਌ϊʔυΛPageͰ࡞੒͢ΔʢGroupͰ͸ͳ͍ʣɻͦ͜ʹBackgroundͱͯ͠Rectangleʢബ͍άϨʔʣɺHeaderͱͯ͠Groupɺ ຊจͱͯ͠Scroll ViewΛ࡞੒͢ΔɻHeader͸·ͣHeaderΛ࡞Γ͍ͨྖҬΛߟྀͯ͠GroupͷαΠζΛܾΊΔ 11 Top Componentͷத਎ͷ࡞੒ ࿮૊Έ͔Β࡞Δ

X RectangleͰഎܠ৭Λࢦఆ͢Δɻݕࡧ૭ྖҬΛGroupͰαΠζɾҐஔࢦఆ͢ΔɻImageͰMenuΞΠίϯΛ഑ஔ͢Δ ˎ͜ͷΑ͏ʹImageͷ਌ʹGroupΛஔ͔ͳͯ͘΋੒ཱ͢ΔɻҰํɺ਌GroupͰྖҬΛ࡞Δͱݟ͑ͳ͍TapྖҬʹͰ͖ͨΓɺͳʹ͔ͱศར 12 Headerͷத਎ͷ࡞੒ MenuΞΠίϯͱݕࡧ૭ྖҬͷ഑ஔ

X Search Group಺ʹRectangleͰݕࡧ૭Λ࡞੒͢ΔɻSearch GroupͷPaddingΛࢦఆ͢Δ͜ͱͰɺRectangleͷपΓʹ༨നΛ࡞Δ͜ͱ͕Ͱ͖Δ จࣈೖྗՄೳͳςΩετϘοΫεʹ͸Text InputΛ࢖͏ɻΞΠίϯ΍ςΩετͷҐஔ͸దٓௐ੔͢Δ 13 Headerͷத਎ͷ࡞੒ ݕࡧ૭ɺςΩετೖྗɺݕࡧΞΠίϯͷઃஔ

X Scroll ViewͷItem SpacingΛ40ʹઃఆ͢ΔɻScroll Direction͕Verticalʹͳ͍ͬͯΔ͜ͱΛ֬ೝ͢ΔɻScroll Viewʹରͯ͠Ϋʔϙϯը૾(Image)ɺ ͱSection1(Group, Height = 1290)ͱSection2(Group,
Content Height)Λ࡞੒͠ɺ͞ΒʹRectangleΛ࢖ͬͯനʹ͢Δ 14 Topͷத਎ͷ࡞੒

X Section1ͷPad TopΛ-40ʹࢦఆ͢Δ͜ͱͰɺ਌ͷScroll ViewͰࢦఆͨ͠Item SpacingΛ૬ࡴ͢Δ͜ͱ͕Ͱ͖Δ 15 Paddingͷখٕ

X ͋Β͔͡Ί༻ҙͯ͋͠ΔH6Λૠೖ͠ɺ೚ҙͷλΠτϧΛೖྗ͢Δʢϗοτͳ͓ళͷ෦෼ʣ Scroll Viewͷߴ͞ɾҐஔɾItem SpacingΛࢦఆͯ͠Scroll DirectionΛHorizontalʹ͢Δ ͋Β͔͡Ί༻ҙͯ͋͠ΔCard ItemΛෳ਺ૠೖ͠ɺScroll ViewͷPad Left,
Pad RightΛௐ੔͢Δ 16 Section1ͷத਎ͷ࡞੒ ԣεΫϩʔϧίϯςϯπ

X Component InputsΛ࡞੒͠ɺ+PortͰ3ͭPortΛ࡞੒͢Δɻ(Title, Img, text) ˎPortΛ࡞੒͢ΔͱComponent Inputs͔ΒNoodlΛҾͬுΕΔΑ͏ʹͳΔ ্ਤͷΑ͏ʹNoodlΛ઀ଓ͢Δ͜ͱͰɺComponentͷ֎෦͔Β֤ϊʔυͷύϥϝʔλΛมߋͰ͖ΔΑ͏ʹͳΔ 17 Card
Itemͷத਎ͷ࡞੒ ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ

X Component OutputsΛ࡞੒͠ɺ+PortͰ1ͭPortΛ࡞੒͢Δ(tap)ɻComponent ChildrenΛStack LayoutʹͿΒ͛͞Δɻ ͜ΕʹΑΓɺCard Item Componentͷ֎ʹͿΒ͛ͨ͞ϊʔυ͕͜͜ʹͿΒ͕ͬͨ࣌͞ͱಉ͡ڍಈʹͳΔ 18 Card
Itemͷத਎ͷ࡞੒ ֎෦͔Βத਎Λૢ࡞Ͱ͖ΔޱΛ։͚Δ

X Topʹ໭ΓɺCard ItemʹඞཁͳTagΛૠೖ͢ΔɻCard ItemͱTagͷ಺༰Λฤूͯ͠ҰͭҰͭͷ͓ళʹ߹Θͤͨ৘ใʹॻ͖׵͑Δ ˎ͜͜ͰલϖʔδͷComponent Children͕ͳ͍ͱTagΛૠೖ͢Δ͜ͱ͕Ͱ͖ͳ͍ 19 Card Itemͷը૾΍આ໌ͷมߋɺTag෇͚

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ͷॳظҐஔͷઃఆ

X Section2ʹStack LayoutΛ࢖ͬͯH6, Card Item2Λૠೖ͢Δɻ͜ͷ࣌Item SpacingΛۭ͚Δͱݟӫ͕͑ྑ͍ Card Item2͕ܨ͕͍ͬͯͬͨߴ͕͞ಡΊͳ͍ͷͰɺStack LayoutͷSize ModeΛContent
Heightʹͯ͠ॊೈʹ͓ͯ͘͠ 21 Section2ͷ࡞੒

X HeaderͷHeightΛScroll ViewͷPad Topʹܨ͙ͱ HeaderͰઃఆͨ͠஋͕Scroll Viewͷ஋ʹ൓ө͞ΕΔΑ͏ʹͳΔ 22 Headerͷߴ͞Λࢀরͯ͠Scroll ViewͷҐஔΛௐ੔͢Δ

X Scroll ViewͱHeaderͷॱ൪ΛೖΕସ͑Δ ˎԼʹ͋Δϊʔυͷํ͕ϓϨϏϡʔͰखલʹ͘ΔɻHeaderΛखલʹ͢Δ 23 HeaderͱScroll Viewͷલޙؔ܎Λमਖ਼͢Δ

X IndexͷதʹRoot(Group), Pages, MenuΛ্ਤͷΑ͏ʹ࡞੒͢Δ PagesͷStart Pageͱͯ͠TopΛબͿ 24 IndexΛ࡞੒͢Δ

X ComponentͷPagesϑΥϧμͷதʹTopͱಉ͡Α͏ʹRestaurant ComponentΛ࡞੒͢Δ(P.10) ্ਤͷΑ͏ʹϊʔυΛ഑ஔͯ͠ɺഎܠͷRectangleɺScroll ViewɺImageɺTextΛ࡞੒͢Δ TextΛGroupʹೖΕͯPaddingΛ͢ΔͱTextʹ༨നΛ࡞ΕΔ 25 Restaurantϖʔδͷ࡞੒

X ໭ΔϘλϯ͸120 x 120ͷྖҬΛGroupͰ࡞͔ͬͯΒImageΛૠೖͯ͠࡞੒͢Δ 26 ໭ΔϘλϯͷ࡞੒

X Card Item3ΛScroll Viewʹૠೖ͠ɺTagΛ͚ͭΔ ˎCard Item3͕ࣸਅʹ൒෼ඃ͍ͬͯΔͷ͸Card Item3಺ͷҰ൪্ͷGroup͕Pad Top -300ͱࢦఆ͍ͯ͠ΔͨΊͰ͢ 27
Card ItemͱTagͷ࡞੒

X Flow LayoutΛ༻͍ͯImageΛฒ΂ΔɻHeight 800 px 28 ը૾ΛྻͰฒ΂Δ

X ը૾SizeΛ360 x 360 pxɺFill ModeΛAspect Fillʹ͢Δ ˎFill Mode͸৭ʑࢼͯ͠Έ͍ͯͩ͘͞ɻFill ModeΛมߋͨ͠ࡍ͸ߋ৽͕ඞཁͰ͢
29 ը૾Λมߋͯ͠੔͑Δ

X Topʹ໭ΓPage NavigationΛ࡞੒͠ɺDestinationʹRestaurantΛઃఆ͢Δ Index 2ͷCard Itemͷtap͔ΒPage NavigationͷNavigate To Pageʹ઀ଓ͢Δ 30
Top͔ΒRestaurantʹϖʔδભҠΛઃఆ͢Δ

X Restaurantʹ໭ΓPage Navigation BackΛ࡞੒͢Δ ໭ΔϘλϯͷGroupͷTap͔ΒPage Navigation BackͷBackʹ઀ଓ͢Δ ˎˎϓϨϏϡʔΛIndexͷRoot Groupʹ͢Ε͹׬੒Ͱ͢ˎˎ 31
Restaurantϖʔδͷ໭ΔϘλϯΛઃఆ͢Δ

X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 32

20190821 Beginner Course (1/2)

20190821 Beginner Course (1/2)

moriken

More Decks by moriken

Other Decks in Design

Featured

Transcript

X 1

ര଎ϓϩτλΠϐϯάπʔϧNoodlͰ UIσβΠϯΛ͠Α͏ʂʢ1/2ʣ NOODL BEGINNER COURSE 2

X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛ࡟আ͢Δ:

X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ಺༰Λ੾Γସ͑ΔϘλϯ ߏங͢Δ৔ॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε=

X L001-01 ϨετϥϯΞϓϦ 5

X + Component͔Β৽نComponentͱͯ͠IndexɺMenuΛ࡞੒ 6 Componentͷ࡞੒

X GroupͷઃఆͰMenuόʔͷҐஔͱαΠζΛઃఆ͠ɺGroupͱಉ͡αΠζ(100%)ͷRectangleͰྖҬͷ৭Λࢦఆ͢Δ 7 Menu Componentͷத਎ͷ࡞੒

X ઌ΄ͲͷRectangleͷഎ໘ʢϊʔυͰ͸্ʣʹOpacityΛബͨ͘͠ࠇ͍RectangleΛૠೖ͠2 pix͚ͩͣΒ͢ ͞ΒʹBlur LengthͷઃఆͰྠֲΛ΅͔͢͜ͱͰɺന͍Rectangleͷ্෦ʹബ͍ઢΛ࡞੒Ͱ͖Δ 8 Menuόʔ্෦ʹബ͍࢓੾Γઢ࡞੒

X Stack LayoutΛ࢖ͬͯΞΠίϯΛฒ΂ΔɻΞΠίϯ͕എܠͱಉ͡നͩͱݟ͑ͳ͍͜ͱ͕͋ΔͷͰɺഎܠʹ৭Λ͚ͭΔͱ࡞ۀ͠΍͍͢ ΞΠίϯ͸ImageΛ࢖͍ɺ৭΍഑ஔΛௐ੔͢ΔɻΞΠίϯؒ͸Stack LayoutͷItem SpacingͰௐ੔͢Δͱྑ͍ 9 ΞΠίϯͷ഑ஔ

X ComponentsͷPagesϑΥϧμ಺ʹTopͱ͍͏ComponentΛ࡞੒͢ΔɻϑΥϧμ಺ʹ࡞Δࡍ͸ϑΥϧμӈͷ̏఺ΞΠίϯ͔Β࡞੒͢Δ 10 Top Componentͷ࡞੒

X ࠷ॳͷ਌ϊʔυΛPageͰ࡞੒͢ΔʢGroupͰ͸ͳ͍ʣɻͦ͜ʹBackgroundͱͯ͠Rectangleʢബ͍άϨʔʣɺHeaderͱͯ͠Groupɺ ຊจͱͯ͠Scroll ViewΛ࡞੒͢ΔɻHeader͸·ͣHeaderΛ࡞Γ͍ͨྖҬΛߟྀͯ͠GroupͷαΠζΛܾΊΔ 11 Top Componentͷத਎ͷ࡞੒ ࿮૊Έ͔Β࡞Δ

X Scroll ViewͷItem SpacingΛ40ʹઃఆ͢ΔɻScroll Direction͕Verticalʹͳ͍ͬͯΔ͜ͱΛ֬ೝ͢ΔɻScroll Viewʹରͯ͠Ϋʔϙϯը૾(Image)ɺ ͱSection1(Group, Height = 1290)ͱSection2(Group,

X Section1ͷPad TopΛ-40ʹࢦఆ͢Δ͜ͱͰɺ਌ͷScroll ViewͰࢦఆͨ͠Item SpacingΛ૬ࡴ͢Δ͜ͱ͕Ͱ͖Δ 15 Paddingͷখٕ

X ͋Β͔͡Ί༻ҙͯ͋͠ΔH6Λૠೖ͠ɺ೚ҙͷλΠτϧΛೖྗ͢Δʢϗοτͳ͓ళͷ෦෼ʣ Scroll Viewͷߴ͞ɾҐஔɾItem SpacingΛࢦఆͯ͠Scroll DirectionΛHorizontalʹ͢Δ ͋Β͔͡Ί༻ҙͯ͋͠ΔCard ItemΛෳ਺ૠೖ͠ɺScroll ViewͷPad Left,

X Component InputsΛ࡞੒͠ɺ+PortͰ3ͭPortΛ࡞੒͢Δɻ(Title, Img, text) ˎPortΛ࡞੒͢ΔͱComponent Inputs͔ΒNoodlΛҾͬுΕΔΑ͏ʹͳΔ ্ਤͷΑ͏ʹNoodlΛ઀ଓ͢Δ͜ͱͰɺComponentͷ֎෦͔Β֤ϊʔυͷύϥϝʔλΛมߋͰ͖ΔΑ͏ʹͳΔ 17 Card

X Component OutputsΛ࡞੒͠ɺ+PortͰ1ͭPortΛ࡞੒͢Δ(tap)ɻComponent ChildrenΛStack LayoutʹͿΒ͛͞Δɻ ͜ΕʹΑΓɺCard Item Componentͷ֎ʹͿΒ͛ͨ͞ϊʔυ͕͜͜ʹͿΒ͕ͬͨ࣌͞ͱಉ͡ڍಈʹͳΔ 18 Card

X Topʹ໭ΓɺCard ItemʹඞཁͳTagΛૠೖ͢ΔɻCard ItemͱTagͷ಺༰Λฤूͯ͠ҰͭҰͭͷ͓ళʹ߹Θͤͨ৘ใʹॻ͖׵͑Δ ˎ͜͜ͰલϖʔδͷComponent Children͕ͳ͍ͱTagΛૠೖ͢Δ͜ͱ͕Ͱ͖ͳ͍ 19 Card Itemͷը૾΍આ໌ͷมߋɺTag෇͚

X Scroll ViewͷScroll To IndexͷIndexΛ2ʹ͢Δ  BooleanͷValueʹνΣοΫΛೖΕͯSaved Value→Scroll To IndexͷDoʹܨ͙ ˎIndex͸୺͔Β0,

X Section2ʹStack LayoutΛ࢖ͬͯH6, Card Item2Λૠೖ͢Δɻ͜ͷ࣌Item SpacingΛۭ͚Δͱݟӫ͕͑ྑ͍ Card Item2͕ܨ͕͍ͬͯͬͨߴ͕͞ಡΊͳ͍ͷͰɺStack LayoutͷSize ModeΛContent

X HeaderͷHeightΛScroll ViewͷPad Topʹܨ͙ͱ HeaderͰઃఆͨ͠஋͕Scroll Viewͷ஋ʹ൓ө͞ΕΔΑ͏ʹͳΔ 22 Headerͷߴ͞Λࢀরͯ͠Scroll ViewͷҐஔΛௐ੔͢Δ

X Scroll ViewͱHeaderͷॱ൪ΛೖΕସ͑Δ ˎԼʹ͋Δϊʔυͷํ͕ϓϨϏϡʔͰखલʹ͘ΔɻHeaderΛखલʹ͢Δ 23 HeaderͱScroll Viewͷલޙؔ܎Λमਖ਼͢Δ

X IndexͷதʹRoot(Group), Pages, MenuΛ্ਤͷΑ͏ʹ࡞੒͢Δ PagesͷStart Pageͱͯ͠TopΛબͿ 24 IndexΛ࡞੒͢Δ

X ComponentͷPagesϑΥϧμͷதʹTopͱಉ͡Α͏ʹRestaurant ComponentΛ࡞੒͢Δ(P.10) ্ਤͷΑ͏ʹϊʔυΛ഑ஔͯ͠ɺഎܠͷRectangleɺScroll ViewɺImageɺTextΛ࡞੒͢Δ TextΛGroupʹೖΕͯPaddingΛ͢ΔͱTextʹ༨നΛ࡞ΕΔ 25 Restaurantϖʔδͷ࡞੒

X ໭ΔϘλϯ͸120 x 120ͷྖҬΛGroupͰ࡞͔ͬͯΒImageΛૠೖͯ͠࡞੒͢Δ 26 ໭ΔϘλϯͷ࡞੒

X Card Item3ΛScroll Viewʹૠೖ͠ɺTagΛ͚ͭΔ ˎCard Item3͕ࣸਅʹ൒෼ඃ͍ͬͯΔͷ͸Card Item3಺ͷҰ൪্ͷGroup͕Pad Top -300ͱࢦఆ͍ͯ͠ΔͨΊͰ͢ 27

X Flow LayoutΛ༻͍ͯImageΛฒ΂ΔɻHeight 800 px 28 ը૾ΛྻͰฒ΂Δ

X ը૾SizeΛ360 x 360 pxɺFill ModeΛAspect Fillʹ͢Δ ˎFill Mode͸৭ʑࢼͯ͠Έ͍ͯͩ͘͞ɻFill ModeΛมߋͨ͠ࡍ͸ߋ৽͕ඞཁͰ͢

X Topʹ໭ΓPage NavigationΛ࡞੒͠ɺDestinationʹRestaurantΛઃఆ͢Δ Index 2ͷCard Itemͷtap͔ΒPage NavigationͷNavigate To Pageʹ઀ଓ͢Δ 30

X Restaurantʹ໭ΓPage Navigation BackΛ࡞੒͢Δ ໭ΔϘλϯͷGroupͷTap͔ΒPage Navigation BackͷBackʹ઀ଓ͢Δ ˎˎϓϨϏϡʔΛIndexͷRoot Groupʹ͢Ε͹׬੒Ͱ͢ˎˎ 31

X ׬੒Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 32