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
L002_20190828_BeginnerCourse.pdf
Search
moriken
August 28, 2019
Design
1
79
L002_20190828_BeginnerCourse.pdf
爆速プロトタイピングツールNoodlでUIデザインをしよう!(2/2)
moriken
August 28, 2019
Tweet
Share
More Decks by moriken
See All by moriken
竹取りから流しそうめんやってみた
moriken0307
0
15
世界の製造工場中国でものをつくる
moriken0307
0
26
江戸川橋トマソン
moriken0307
0
66
本当の仲間を見つける採用のフレームワーク
moriken0307
0
58
IoTのせいで彼女ができないのでIoTの力で彼女をつくってみた
moriken0307
0
1k
NoodlとXDを一緒に使うときのコツ
moriken0307
1
120
20190821 Beginner Course (1/2)
moriken0307
1
81
〇〇をNoodlしてみた
moriken0307
1
620
北欧でNoodlってプロトタイピングツールみつけてきた
moriken0307
2
850
Other Decks in Design
See All in Design
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
530
Wolf and the seven goatkids
_limex_
PRO
0
450
WHAT ARE ME?
takuro_nakajima
PRO
0
1.4k
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
150
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
240
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
580
231206_Book-launch-event_kato
hjmkth
2
1.2k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
170
Featured
See All Featured
Debugging Ruby Performance
tmm1
70
11k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Writing Fast Ruby
sferik
621
60k
Become a Pro
speakerdeck
PRO
11
4.5k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
RailsConf 2023
tenderlove
4
540
Gamification - CAS2011
davidbonilla
76
4.6k
Side Projects
sachag
451
41k
How GitHub (no longer) Works
holman
304
140k
It's Worth the Effort
3n
180
27k
Transcript
X 1
രϓϩτλΠϐϯάπʔϧNoodlͰ UIσβΠϯΛ͠Α͏ʂʢ2/2ʣ NOODL BEGINNER COURSE 2
X NOODLͷجຊૢ࡞ - ϊʔυΛҠಈ͢Δ: υϥοά - ϊʔυΛ࡞Δ: ӈΫϦοΫɺϊʔυ໊ͷ಄จࣈΛΩʔϘʔυͰೖྗ - ϊʔυΛআ͢Δ:
ϊʔυΛબɾDeleteΩʔΛԡ͢ - ϊʔυΛίϐʔ: ϊʔυΛબɾ㵰+CʢWindows: Ctrl+Cʣ - ϊʔυΛϖʔετ: ⌘+VʢWindows: Ctrl+Vʣ - ϊʔυΛܨ͙: ϊʔυͷͰΫϦοΫ͠ɺͦͷ··ܨ͍͗ͨϊʔυ·Ͱυϥοά͢Δ 3
X ίϯϙʔωϯτҰཡ ϓϩύςΟ ϓϩδΣΫτઃఆ ϊʔυҰཡ දࣔ༰ΛΓସ͑ΔϘλϯ ߏங͢Δॴ ϓϨϏϡʔը໘ ϝχϡʔ ϘοΫε=
ϊʔυ 4
X L002 ίοΫϐοτΞϓϦ ΠϯϑΥάϥϑΟοΫˍλονΠϕϯτ 5
X ࠓճQXGA(2048 x 1536: iPadͳͲͰ࠾༻͞Ε͍ͯΔʣʹ͢Δ 6 Project settingsͷ֬ೝ
X طଘͷComponentΛదͳॴʹDrag & Drop͔ͯ͠ΒRootʹՃ͢Δ 7 Componentͷஔ
X Data and TimesΛComponentҰཡ͔ΒD&D͢Δ String Formatʹ{h}:{m}:{s}ͱೖྗ͠ɺ00:00:00ͱදࣔͰ͖ΔΑ͏ʹ͢Δ 8 Time Component ͷதͷ࡞
X Data and Time͔ΒString Formatʹଓ͢ΔɻHour → h, Minute → m,
Second → s String Format͔ΒTextʹଓ͢Δɻ Formatted → Text 9 Componentͷଓ
X Direction ComponentͷதͷGroupʹImageͰConpass.pngΛૠೖ͢Δ Image͔ΒGroupʹHeight → Height, Width → Widthͱଓ͢Δ͜ͱͰɺImageͷαΠζͱGroupͷαΠζΛҰகͤ͞Δ 10
DirectionͷConpass࡞
X ্ਤͷΑ͏ʹGroupͱImageΛՃ͢ΔɻPosition YΛௐͯ͠Ϩʔμʔͷઌ͕தԝʹҐஔ͢ΔΑ͏ʹ͢Δ Component InputsͷdirectionΛԼͷGroupͷRotation ZɺdistinationΛImage(Conpass.png)ͷRotation Zʹଓ͢Δ 11 ՃͰճస͢Δઃఆ
X Device OrientationͱNumber RemapperΛ༻ҙ͠ɺRotation Y → Input ValueɺRemapped Value →
directionͱଓ͢Δ Number RemapperʹΑΓσόΠεͷRotation Y -80ʙ80Λdirectionͷ0ʙ360ʹରԠͤ͞Δ͜ͱ͕Ͱ͖Δ 12 σόΠεͷՃΛೖྗ͠ɺͷൣғΛ͑Δ
X Image͔ΒGroupʹରͯ͠Height → Height, Width → WidthΛଓͯ͠αΠζΛ߹ΘͤΔ CircleΛૠೖ্ͯ͠ਤͷΑ͏ʹύϥϝʔλઃఆΛ͢ΔɻSolidͷνΣοΫΛ֎͢͜ͱͰϑν͚ͩͷԁʹͳΔɻҐஔΛඍௐ͢Δ 13 αΠζௐͱϝʔλʔͷՃ
X ଆͷϝʔλʔ༻ʹCircleΛ͏Ұͭ࡞ΔɻͦΕͧΕͷCircleͷArc Angleʹରͯ͠ Component Inputsͷengine, speedfΛଓ͢Δ ͜͜ʹ֎෦͔ΒσʔλΛଓ͢Δ͜ͱͰɺϝʔλʔͷArc Angle͕ϦΞϧλΠϜʹมԽ͢ΔΑ͏ʹͳΔ 14 ଆͷϝʔλʔͷ࡞ͱ
σʔλͷө
X Vehicle DataΛը໘ʹD&Dͯ͠ɺ্ਤͷΑ͏ʹϊʔυΛଓ͢Δ Vehicle DataࠓճͷͨΊʹϥϯμϜͳΛు͖ग़͢ComponentΛ༻ҙͨ͠ͷͰ ࣮ࡍʹMQTTͳͲΛհ࣮ͯ͠σʔλΛऔಘ͢Δ͜ͱͰ͖Δ 15 ࣮σʔλʢࠓճμϛʔʣΛө͢Δ
X Bar GraphͷதͷGroupͷԼʹStack LayoutͰgraph itemΛՃ͢Δ graph itemάϥϑͱԼͷຌྫΛࣔ͢ͷͰ͋Γɺॱ൪ʹؾମΛ໊͚͓ͯ͘ 16 Bar GraphͷதΛ࡞͢Δ
X Air condition Data͔Β֤graph itemʹରͯ͠ଓ͢Δ ˎco2Co2ͷnumʹଓ͢Δ 17 ࣮σʔλʢμϛʔσʔλʣͷଓ
X GroupͱRectangleΛ࡞͢ΔɻRectangleͷHeightΛখ͘͢͞Δ͜ͱͰϥΠϯΛදݱ͢Δ Groupͷશ෯ʹରͯ͠LineΛগ͠খ͞Ίʹ࡞Δͱޙ΄ͲͷΧʔιϧΛى͖͘͢ͳΔ 18 Control Panelͷ࡞ εϥΠυόʔ༻ͷϥΠϯ࡞
X GroupͱRectangleΛ࡞͢ΔɻRectangleΛ࠷దͳαΠζʹͯ͠Χʔιϧͱ͢Δ GroupΧʔιϧΑΓগ͠େ͖Ίʹ࡞Δͱλονݕग़ൣғ͕େ͖͘ͳΓ͍͘͢ͳΔ 19 Control Panelͷ࡞ εϥΠυόʔ༻ͷΧʔιϧ࡞
X ΧʔιϧͷGroup͔ΒDragʹରͯ͠This → Targetͱଓ͢Δ͜ͱͰɺGroup͕υϥοάՄೳʹͳΔ υϥοάൣғΛࢦఆ͢ΔͨΊʹLineͷWidthΛDragͷEndʹଓ͢Δ 20 εϥΠυόʔΛυϥοάͰ͖ΔΑ͏ʹ͢Δ
X Number RemapperΛ͏͜ͱͰ0ʙ700ͷεϥΠμʔҐஔΛ0ʙ1ʹஔ͖͑Δ Position X → Input Value, Remapped Value
→ Barͱଓ͢Δ 21 εϥΠμʔҐஔΛଞͰ׆༻Ͱ͖ΔΑ͏ʹ֎ʹग़͢
X EmergencyϘλϯΛImageͰ࡞͠ɺComponent OutputsͷEmergencyʹଓ͢Δ ˎ͜ͷϘλϯΛԡ͢ͱԿ͕ى͜Δ͔ࣗ༝ʹ࡞͢Δ 22 EmergencyϘλϯΛ࡞͢Δ
X എܠΠϝʔδͷʹEffect groupΛૠೖ͠ɺStandard Effectͱͯ͠Gaussian BlurΛબ͢Δ ControlPanelͷBarΛEffect groupͷEffect Amountʹଓ͢Δ͜ͱͰΧʔιϧͷ࠲ඪ͕ΤϑΣΫτͷڧʹө͞ΕΔΑ͏ʹͳΔ 23
X TimeͷԼʹGroupͱImageΛૠೖ͢Δ 24 UFOͷ࡞
X Touch PositionΛ͏ͱλονͨ͠࠲ඪΛऔಘͰ͖Δ Position Yʹؔͯ͠1100ΑΓԼʹߦͬͨ߹ʹ1100ʹ͢ΔͨΊNumber RimapperͷClamp OutputΛ͏ 25 λονϙδγϣϯͷө
X Ͱ͢ʂ ͓ർΕ༷Ͱͨ͠ʂ 26