Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20190821 Beginner Course (1/2)
Search
Take
August 23, 2019
Design
0
220
20190821 Beginner Course (1/2)
Take
August 23, 2019
Tweet
Share
More Decks by Take
See All by Take
20190828 Beginner Course (2/2)
pentake
3
150
NoodlとXDを一緒に使うときのコツ
pentake
0
200
Other Decks in Design
See All in Design
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
220
Resolving text accessibility dilemmas in UIs
romanshamin
0
110
The Fight
euralisw
0
100
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.1k
🇫🇷 Dogmes et Design Systems, comment faire autrement
morganepeng
0
190
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
UXデザイナーというものが アジャイルに入ってみた!
muture
2
2k
231129_FOSS4G-ASIA-2023_kato
hjmkth
0
270
Design Leadership in Challenging Times
morganepeng
3
280
顕在化されていない期待、デザインの灯台
daitorii
1
1k
ChatGPTを活用したUI勉強会のススメ
abokadotyann
20
12k
社内管理画面のデザインもプロダクトデザイン
takanorip
3
680
Featured
See All Featured
Building Adaptive Systems
keathley
29
1.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Faster Mobile Websites
deanohume
296
30k
4 Signs Your Business is Dying
shpigford
174
21k
Teambox: Starting and Learning
jrom
126
8.4k
The Cult of Friendly URLs
andyhume
73
5.6k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Code Review Best Practice
trishagee
54
15k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
In The Pink: A Labor of Love
frogandcode
137
21k
Transcript
X 1
രϓϩτλΠϐϯάπʔϧ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