Upgrade to Pro — share decks privately, control downloads, hide ads and more …

InvisionのAndroidアプリでみる4つのデザイン基本原則 / Four design...

Avatar for futabooo futabooo
August 07, 2018
Design
2
2.4k

InvisionのAndroidアプリでみる4つのデザイン基本原則 / Four design basic principles seen in Invision's Android application

Avatar for futabooo

futabooo

August 07, 2018
Tweet

More Decks by futabooo

See All by futabooo
Android Jetpack Navigation Deep Links Tips
Avatar for futabooo futaboooo
0
600
チームの学びを活かす全社での取り組み / company wide efforts to make use of team's learning
Avatar for futabooo futaboooo
1
730
ペアプロ・モブプロを広めるのに役立ったControl Chartの使い方 / How to use Control Chart which helped spread Pair or Mob Programing
Avatar for futabooo futaboooo
2
310
スクラムチームをやめて、20人でカンバン運用してきた半年間の軌跡 / Stop Scrum Start Kanban
Avatar for futabooo futaboooo
19
18k
Pairsの開発のすべて / all of Pairs development
Avatar for futabooo futaboooo
1
2.6k
モブプログラミングという開発スタイル、あるいは生産性について / On development style called mob programming, or productivity
Avatar for futabooo futaboooo
5
8.8k
Androidでスクレイピングした話 / Talk of scraping with Android
Avatar for futabooo futaboooo
0
5.3k
新人スクラムマスターが開発者と兼任しながらやってきた事と成果/What the newcomer Scrum Master came while concurrently serving as a developer and the result
Avatar for futabooo futaboooo
1
1.9k
What I did for Google IO since then
Avatar for futabooo futaboooo
1
430

Other Decks in Design

See All in Design
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
220
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
2.6k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
880
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
110
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
220
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
980
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
Avatar for kinomi kinomidesign
0
130
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
1
25k
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
290
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
110
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
630
kintone Style Book
Avatar for kintone kintone
5
6.4k

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Navigating Team Friction
Avatar for Lara Hogan lara
190
16k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k

Transcript

  1. InvisionͷAndroidΞϓϦͰΈΔ 4ͭͷσβΠϯجຊݪଇ @futabooo AndroidΤϯδχΞ σβΠϯ෦ #2 #android_engineer_design

  2. 2 About me  4FOJPS&OHJOFFS4DSVN.BTUFSBUFVSFLB *OD  'BOUBTZ&BSUI;FSP T$3:FE 4QMBUPPO

     GVUBCPPP ɹɹTakahiro Futagawa 2

  3. 3 About eureka ձࣾ֓ཁ  ैۀһ਺  ໊ʢฏۉ೥ྸࡀʣ  ࣄۀ಺༰

     ࣗࣾαʔϏεاըɾ։ൃɾӡӦ  1BJST  $PVQMFT

  4. 4 Agenda  *OWJTJPOͱ͸  ͭͷσβΠϯجຊݪଇͱ͸  σβΠϯجຊݪଇΛ࣮૷ʹམͱ͢ํ๏

  5. 5 Agenda  *OWJTJPOͱ͸  ͭͷσβΠϯجຊݪଇͱ͸  σβΠϯجຊݪଇΛ࣮૷ʹམͱ͢ํ๏

  6. 6 Invision

  7. 7 Invision

  8. 4ͭͷσβΠϯجຊݪଇͱ͸

  9. 9 4ͭͷσβΠϯجຊݪଇ Proximity ۙ઀

  10. 10 4ͭͷσβΠϯجຊݪଇ Proximity ۙ઀ Repetition ൓෮

  11. 11 4ͭͷσβΠϯجຊݪଇ Proximity ۙ઀ Alignment ੔ྻ Repetition ൓෮

  12. 12 4ͭͷσβΠϯجຊݪଇ Proximity ۙ઀ Alignment ੔ྻ Repetition ൓෮ Contrast ίϯτϥετ

  13. 13 4ͭͷσβΠϯجຊݪଇ Proximity ۙ઀ Alignment ੔ྻ Repetition ൓෮ Contrast ίϯτϥετ

  14. ۙ઀ Proximity 14

  15. ۙ઀ Proximity  άϧʔϓԽ͍ͨ͠ཁૉ͸ۙ͘ʹ  ͦ͏͡Όͳ͍ཁૉ͸ΑΓԕ͘ʹ 15

  16. ۙ઀ Proximity  άϧʔϓԽ͍ͨ͠ཁૉ͸ۙ ͘ʹ  ͦ͏͡Όͳ͍ཁૉ͸ΑΓ ԕ͘ʹ 16

  17. ੔ྻ Alignment 17

  18. ੔ྻ Alignment  ը໘಺ͷ͢΂ͯͷཁૉ͕ଞͷཁૉͱࢹ֮తͳͭͳ͕ΓΛ΋ͭΑ͏ʹ͢Δ 18

  19. ੔ྻ Alignment  ը໘಺ͷ͢΂ͯͷཁૉ͕ଞ ͷཁૉͱࢹ֮తͳͭͳ͕Γ Λ΋ͭΑ͏ʹ͢Δ 19

  20. ൓෮ Repetition 20

  21. ൓෮ Repetition  ΞϓϦͷશମΛ௨ͯ͠ͳʹ͔ͷಛ௃Λ܁Γฦ͢ 21

  22. ൓෮ Repetition  ΞϓϦͷશମΛ௨ͯ͠ͳʹ ͔ͷಛ௃Λ܁Γฦ͢ 22

  23. 23 ίϯτϥετ Contrast

  24. ίϯτϥετ Contrast 24  ಉ͡ཁૉͰͳ͍΋ͷ͸͸͖ͬΓͱҟͳΒͤΔ

  25. ίϯτϥετ Contrast 25  ಉ͡ཁૉͰͳ͍΋ͷ͸͸ͬ ͖ΓͱҟͳΒͤΔ

  26. 26 Reference ϊϯσβΠφʔζɾσβΠϯϒοΫ[ϑϧΧϥʔ৽૷૿ิ൛]

  27. Credit: NASA Earth Observatory/NOAA NGDC Thank you :)