UI/UX Design for Mobility

Transcript

1. UI/UX DESIGN FOR MOBILITY Mede by Takashi Sakamoto @bookslope

2. PROFILE ͸͡Ί·ͯ͠ UI/UX DESIGN FOR MOBILITY εϚʔτϞϏϦςΟࣄۀਪਐࣨ
   ࣨ௕
 ৘ใઃܭɾ69σβΠϯ͕ઐ໳ྖҬ
   ΦϯϥΠϯίϛϡχςΟӡӦ
 دߘɾߨԋଟ਺


   ஶ࡞ʰ*"γϯΩϯάʱͳͲ Mede by Takashi Sakamoto @bookslope

3. LAYER ࠓճͱΓ͋͛Δʮ6*69ʯͱ͸ɺϞϏ ϦςΟΛ୅ද͢Δࣗಈंͷӡస੮ʹ ΈΒΕΔϢʔβʔΠϯλʔϑΣʔε ʢ).*ʣΛऔΓ্͍͛ͯ·͢ɻ
 
 ).*ͱ͸ɺ)VNBO.BDIJOF
   *OUFSGBDFͷུͰɺਓؒͱػցͱͷؒ Ͱ৘ใͷ΍ΓͱΓΛߦ͏ڥքͱ͍͏ ҙຯΛ࣋ͭɻ

   UI/UX DESIGN FOR MOBILITY Steering Smartphone Driver & Passenger City

4. INDEX ͜ͷࢿྉʹؚ·ΕΔ΋ͷ UI/UX DESIGN FOR MOBILITY ंͷ).*σβΠϯைྲྀ
   .BB4ʹ͓͚Δ69σβΠϯ
   10$ͷॏཁੑ 01.

   02. 03.

5. ंͷ).*σβΠϯைྲྀ “HMI” DESIGN TREND 01

6. CASE ʮ$"4&ʯͷਁಁʹΑΓɺӡసखͷૢ ࡞ྖҬʹੜ׆ͷҰ෦ͱͯ͠ීஈར༻͠ ͍ͯΔεϚϗ͕୆಄͖ͯ͠·ͨ͠ɻ
   ʮ$"4&ʯͱ͸ɺʮ$POOFDUFEʯ ʮ"VUPOPNPVTʯʮ4IBSFEˍ 4FSWJDFʯʮ&MFDUSJDʯͷ಄จࣈΛࣔ ͢ɻ UI/UX DESIGN

   FOR MOBILITY

7. CTRL ೥ɺถւ܉ͷۦஞ؋͸͜Ε·Ͱ ࠾༻͍ͯͨ͠λονεΫϦʔϯʢιϑ τʣ͔Βैདྷͷεϩοτϧૢ࡞ʢϋʔ υʣʹ໭ͨ͠ͱ͍͏ൃදΛͨ͠ɻ
   ৐૊һͷޡૢ࡞͕ଟ͍ͷ͕ཧ༝ͩ ͕ɺௐࠪϨϙʔτʹΑΔͱशख़౓΍ ܇࿅ෆ଍ͱ͍͏ਓؒଆͷ໰୊ͷ΄͏ ͕ු͖ூΓʹͳ͍ͬͯΔɻ UI/UX

   DESIGN FOR MOBILITY

8. By SpaceX Crew Dragon UI/UX DESIGN FOR MOBILITY

9. Semi Roadstar Model S Model 3 UI/UX DESIGN FOR MOBILITY

10. By BYTON Menu Menu Meter + Infortainment UI/UX DESIGN FOR

    MOBILITY

11. By NIO Nomi Infortainment Meter UI/UX DESIGN FOR MOBILITY

12. Infortainment By Polestar2 UI/UX DESIGN FOR MOBILITY Meter

13. By Polestar Precept UI/UX DESIGN FOR MOBILITY Infortainment Meter

14. By SONY VISION UI/UX DESIGN FOR MOBILITY Meter + Infortainment

    Side Monitor Side Monitor

15. By The Dyson Battery Electric Vehicle UI/UX DESIGN FOR MOBILITY

    Meter + Infortainment Side Monitor HVAC CTRL

16. TREND ϞϏϦςΟʢࣗಈंʣͷ).*σβΠϯ ͷτϨϯυͱͯͭ͠ͷைྲྀ͕͋Γ· ͢ɻ UI/UX DESIGN FOR MOBILITY /*0
    1PMFTUBS

    
    %ZTPOʜ #:50/
    40/:
    )0/%"ʜ Meter + Infortainment Infortainment Meter 01. 02. ηύϨʔτܕ ίϯόΠϯܕ

17. By Apple CarPlay UI/UX DESIGN FOR MOBILITY Apple CarPlay

18. By Android Auto UI/UX DESIGN FOR MOBILITY Android Auto

19. Citroen Ami εϚϗΛΠϯϑΥςΠϯϝϯτγες Ϝͱͯͦ͠ͷ··ར༻͢Δίϯηϓτ ΋͋Γ·͢ɻ UI/UX DESIGN FOR MOBILITY Meter

    Smartphone

20. Android Automotive OS ͍ΘΏΔंͷ04ʢ$BS
    04ʣ͸ɺ "OESPJE
    "VUPNPUJWF
    ͱݺ͹ΕɺϏϧ υΠϯͷϩʔυϚοϓ͕ܭը͞Ε͍ͯ Δɻ UI/UX DESIGN FOR

    MOBILITY 2020 7PMWP
    $BST 2021 3FOBVMU
    
    /JTTBO
    
    .JUTVCJTIJ (FOFSBM
    .PUPST
    

21. UI/UX DESIGN FOR MOBILITY Automotive High-Tech New System Legacy System

    Android Auto CarPlay Tesla Polestar2 Bentz Porsche NISSAN BYTON SONY Waymo Citroen Ami

22. TOYOTA e-Palette τϤλͷʮFύϨοτʯ౦ژ όʔδϣϯͰ͸ɺηϯαʔɺΧϝϥɺ -J%"3γεςϜ͕౥ࡌ͞Ε͓ͯΓɺ௿ ଎ࣗಈӡసΛαϙʔτ͍ͯ͠·͢ɻ UI/UX DESIGN FOR MOBILITY

    Ctrl Camera View

23. Point of View ࣗಈӡసٕज़͕ൃୡ͢Δͱɺ).*ͱ͠ ͯॏཁͳͷ͸ɺӡస͢Δӡసखͷࢹ ఺ΑΓ΋ɺӡస͍ͯ͠ͳ͍৐٬ͷࢹ ఺ʹॏ͖Λஔ͘ඞཁ͕͋Γ·͢ɻ UI/UX DESIGN FOR

    MOBILITY Passenger Driver

24. .BB4ʹ͓͚Δ69σβΠϯ UX DESIGN FOR “MaaS “ 02

25. UI/UX DESIGN FOR MOBILITY

26. ໨త ໨త ໨త UI/UX DESIGN FOR MOBILITY

27. By Designing from the Car: Why Context Matter UI/UX DESIGN

    FOR MOBILITY

28. By Google Maps UI/UX DESIGN FOR MOBILITY

29. By Airbitat Oasis Smart Bus Stop UI/UX DESIGN FOR MOBILITY

30. By Android Auto UI/UX DESIGN FOR MOBILITY

31. By Holoride UI/UX DESIGN FOR MOBILITY

32. By Tesla UI/UX DESIGN FOR MOBILITY

33. By Waymo UI/UX DESIGN FOR MOBILITY

34. By Waymo UI/UX DESIGN FOR MOBILITY

35. By Uber ౸ண࣌ؒ
    αʔϏε
    φϏήʔγϣϯ
    ӡస
    ৐ंϧʔτ
    ं྆඼࣭
    ͦͷଞ UI/UX

    DESIGN FOR MOBILITY

36. UI/UX DESIGN FOR MOBILITY By JR౦೔ຊ

37. UI/UX DESIGN FOR MOBILITY Horai EMot my route LUUP aimo

    WHILL docomo bike share Multimodal Single-mode JR East JR East WILLERS Whim ANA Uber Special Public

38. MaaS CTRL ʮ.BB4ίϯτϩʔϥʔʯͱ͸ɺϢʔ βʔ޲͚.BB4ΞϓϦͷ͜ͱ͚ͩͰ͸ ͳ͘ɺࣄۀऀ΍࣏ࣗମ޲͚ͷσʔλ ՄࢹԽ΍෼ੳɺ੍ޚΛ͢Δ͜ͱΛࢦ ͢ɻ
    ϢʔβʔͱϞϏϦςΟͷؔ܎Λվળ ͠ɺϢʔβʔͷརศੑΛ͞Βʹ޲্ ͢Δ͜ͱʹͳΔɻ

    UI/UX DESIGN FOR MOBILITY MaaS CTRL

39. 10$ͷॏཁੑ THE IMPORTANCE OF “POC" 03

40. By NISSAN #TMS2019 UI/UX DESIGN FOR MOBILITY

41. UX Research σβΠϯϑΣʔζΑΓલͷاըϑΣʔ ζʹ͓͍ͯɺ69ϦαʔνΛ͢Δ͜ͱ Ͱɺاըͷਫ਼౓Λ޲্ͤ͞ΔऔΓ૊Έ ʹͭͳ͕Γ·͢ɻ UI/UX DESIGN FOR MOBILITY

    σβΠϯ اը ࣮ݧ ։ൃ

42. By NISSAN Ariya Concept UI/UX DESIGN FOR MOBILITY

43. By NISSAN IMk Concept UI/UX DESIGN FOR MOBILITY

44. Ideation νʔϜ͕ڞಉϫʔΫγϣοϓ΍Ϣʔ βʔௐࠪɺݕূʹࢀՃ͢Δ͜ͱͰɺҙ ࢥͷڞ༗͕͠΍͘͢ͳΓ·͢ɻ UI/UX DESIGN FOR MOBILITY ϫʔΫγϣοϓ ௐࠪ

    ݕূɾ࣮ݧ σβΠϯ اը ࣮ݧ ։ൃ

45. MaaS x Card σβΠφʔ΍ϊϯσβΠφʔ޲͚ʹ։ ൃͨ͠ϫʔΫγϣοϓσβΠϯπʔ ϧɻ
    Ҡಈʢओʹެڞަ௨αʔϏεʣʹ· ͭΘΔϢʔβʔମݧΛՄࢹԽͨ͠ ΧʔυͰɺަ௨ࣄۀऀ΍ࣗಈंձࣾ ͳͲͷاը΍σβΠϯʹܞΘΔํʹར

    ༻ͯ͠΋Β͏͜ͱͰɺϢʔβʔମݧͷ ޲্ʹߩݙ͢ΔऔΓ૊Έɻ UI/UX DESIGN FOR MOBILITY

46. UX ϓϩηε͸ઢܗͰ͸ͳ͘ɺαΠΫϧ͢ Λ೦಄ʹஔ͘ͱΘ͔Γ΍͍͢ɻߟ͑ Δ΂͖λΠϛϯάͱ͍͏ͷ͸Ұ୴ແ ࢹͯ͠औΓ૊Ή͜ͱͰɺઌʹΞ΢τ ϓοτ͕ੜ·ΕΔɻ
    Ξ΢τϓοτΛઌ಄ʹߟ͑ΔͨΊʹ ͸ɺ໾ׂ෼୲ΑΓઌʹࣗ਎ͷମݧ͔ Βߟ͑ΔบΛ͚͓ͭͯ͘͜ͱ͕େ੾ Ͱ͋Δɻ

    UI/UX DESIGN FOR MOBILITY اըϑΣʔζʹ͓͚ΔσβΠϯͰ͋Δ
    ࡞Δͱݕূ͸ৗʹαΠΫϧ͢Δ
    Ϣʔβʔମݧͱ͸ࣗ਎ͷମݧͰ͋Δ

47. Carrozzeria Facebook Page / Group #Mobility #MaaS UI/UX DESIGN FOR

    MOBILITY

48. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ THANKS FOR YOUR ATTENTION! FIN Mede by Takashi Sakamoto

    @bookslope