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
moriken
August 21, 2019
Design
1
81
20190821 Beginner Course (1/2)
爆速プロトタイピングツールNoodlでUIデザインをしよう!(1/2)
moriken
August 21, 2019
Tweet
Share
More Decks by moriken
See All by moriken
竹取りから流しそうめんやってみた
moriken0307
0
15
世界の製造工場中国でものをつくる
moriken0307
0
26
江戸川橋トマソン
moriken0307
0
65
本当の仲間を見つける採用のフレームワーク
moriken0307
0
58
IoTのせいで彼女ができないのでIoTの力で彼女をつくってみた
moriken0307
0
1k
L002_20190828_BeginnerCourse.pdf
moriken0307
1
79
NoodlとXDを一緒に使うときのコツ
moriken0307
1
120
〇〇をNoodlしてみた
moriken0307
1
620
北欧でNoodlってプロトタイピングツールみつけてきた
moriken0307
2
840
Other Decks in Design
See All in Design
Ride or Die Animatics
warwatkar
0
140
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
850
Wishing Star Comic
torije
2
1.1k
Web 組版の課題とその解法
yamatoiizuka
0
110
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.2k
Wolf and the seven goatkids
_limex_
PRO
0
420
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
580
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
163
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Making Projects Easy
brettharned
108
5.5k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
KATA
mclloyd
14
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Unsuck your backbone
ammeep
662
57k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Six Lessons from altMBA
skipperchong
20
3k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Git: the NoSQL Database
bkeepers
PRO
422
63k
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