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

Fluent Design System & les nouvelles interfaces Windows

Fluent Design System & les nouvelles interfaces Windows

Windows évolue et sa présence à travers tout le médium numérique nécessitait une refonte totale de ses paradigmes. Venez découvrir comment le design des interfaces Windows a évolué et de quelle manière il sert aujourd'hui les interfaces de 0 à 4D.

F6c06223e3759e7b9c93bdb58fc241f5?s=128

Christopher MANEU

October 05, 2017
Tweet

More Decks by Christopher MANEU

Other Decks in Design

Transcript

  1. &>hEd^/'E^z^dDΘ >^EKhs>>^/EdZ&^t/EKt^ ĞŶũĂŵŝŶ>ĂƵŶĂLJ ^zEZ'/ DŝĐŚĂģů&Zz ^Kd ŚƌŝƐƚŽƉŚĞƌDĂŶĞƵ D/ZK^K&d

  2. ĞŶũĂŵŝŶ>ĂƵŶĂLJ hy^/'EZΛ^zEZ'/ ΛŝĞŝĞLJĞ ͮďůĂƵŶĂLJΛƐLJŶĞƌŐŝnj͘ĐŽŵ DŝĐŚĂģů&ĞƌLJ s>KWZ Λ^Kd ΛͺŵĨĞƌLJ ͮŵŝĐŚĂĞů͘ĨĞƌLJΛƐŽĂƚ͘Ĩƌ ŚƌŝƐƚŽƉŚĞƌDĂŶĞƵ

    ֦ հ E'/EZ ΛD/ZK^K&d ΛĐŵĂŶĞƵ ͮĐŚŵĂŶĞƵΛŵŝĐƌŽƐŽĨƚ͘ĐŽŵ ηĞdžƉĞƌŝĞŶĐĞϭϳ
  3. DE>WZK'ZDD ϭ YƵ͛ĞƐƚͲĐĞƋƵĞĨůƵĞŶƚĚĞƐŝŐŶƐLJƐƚĞŵ͍ Ϯ ƌĠŽŶƐƵŶĞĂƉƉůŝĐĂƚŝŽŶĂǀĞĐĨůƵĞŶƚĚĞƐŝŐŶƐLJƐƚĞŵ ϯ &ůƵĞŶƚĚĞƐŝŐŶĚĞŵĂŝŶ͍

  4. DE>WZK'ZDD ϭ YƵ͛ĞƐƚͲĐĞƋƵĞĨůƵĞŶƚĚĞƐŝŐŶƐLJƐƚĞŵ͍

  5. ϮϬϬϳ Ͳ ϮϬϭϮ ĞƐŝŐŶ &ůĂƚ ĞƐŝŐŶ ,LJďƌŝĚĞ ĞƐŝŐŶ ƐŬĞƵŵŽƌƉŚŝƋƵĞ ϮϬϭϭͲ

    ϮϬϭϰ ϮϬϭϰͲ ͍ Wd/d,/^dK/Zh^/'E /K^ ϭăϳ t/EKt^ W,KE EZK/ >K>>/WKW
  6. None
  7. >dZZ/E:hh'DEd ' ' 126&5((1 ' 126&5((1 60$// '6&5((16 /$5*( '6&5((16

    / ,*+ 7 6281' / ,*+ 7 6281' + $37,& / ,*+ 7 6281' */ $1&($%/ ( 6281' + $37,& 9,68$/  · 6281' + $37,& 9,68$/  · 6281' + $37,& 9,68$/  · · 6281' + $37,& 9,68$/  ·· 6281' + $37,& 9,68$/  · · 6281' + $37,& ' '  · · 6281' + $37,& ,00(5 6,9( · ; · 6281' + $37,& ,13876 2873876 9,68$/  · 6281' + $37,& 9,68$/  · 6281' + $37,&
  8. sZ^>ϯD /DE^/KE

  9. ĞƉƚŚ DŽƚŝŽŶ DĂƚĞƌŝĂů ^ĐĂůĞ >ŝŐŚƚ

  10. :DYH1 :DYH :DYH :DYH :DYH

  11. &ůƵĞŶƚĞƐŝŐŶtĂǀĞϭ ZĞǀĞĂů ,ŝŐŚůŝŐŚƚ WĞƌƐƉĞĐƚŝǀĞ WĂƌĂůůĂdž ŽŶŶĞĐƚĞĚ ŶŝŵĂƚŝŽŶƐ ĐƌLJůŝĐ DĂƚĞƌŝĂů ŽŶƐĐŝŽƵƐ

    ŽŶƚƌŽůƐ >/',d Wd, DKd/KE DdZ/> ^>
  12. DE>WZK'ZDD Ϯ ƌĠŽŶƐƵŶĞĂƉƉůŝĐĂƚŝŽŶĂǀĞĐĨůƵĞŶƚĚĞƐŝŐŶƐLJƐƚĞŵ

  13. DK

  14. Zs> ,/',>/',d ͬͬDĞƚƚƌĞĞŶĂǀĂŶƚůĞƐĠůĠŵĞŶƚƐŝŶƚĞƌĂĐƚŝĨƐͬͬ ͬͬƉƉŽƌƚĞƌƵŶĂƚƚƌŝďƵƚƉŚLJƐŝƋƵĞĂƵdžŝŶƚĞƌĨĂĐĞƐͬͬ

  15. Zs> ,/',>/',d фsŝƐƵĂů^ƚĂƚĞDĂŶĂŐĞƌ͘sŝƐƵĂů^ƚĂƚĞ'ƌŽƵƉƐх фsŝƐƵĂů^ƚĂƚĞ'ƌŽƵƉ dž͗EĂŵĞсΗŽŵŵŽŶ^ƚĂƚĞƐ͞х фsŝƐƵĂů^ƚĂƚĞ dž͗EĂŵĞс͞WŽŝŶƚĞƌKǀĞƌ͟х фsŝƐƵĂů^ƚĂƚĞ͘^ĞƚƚĞƌƐх ф^ĞƚƚĞƌ dĂƌŐĞƚсΗZŽŽƚ'ƌŝĚ͘;ZĞǀĞĂůƌƵƐŚ͘^ƚĂƚĞͿΗ

    sĂůƵĞсΗWŽŝŶƚĞƌKǀĞƌΗͬх ф^ĞƚƚĞƌ dĂƌŐĞƚсΗKǀĞƌůĂLJ͘ĂĐŬŐƌŽƵŶĚΗ sĂůƵĞсΗ΂dŚĞŵĞZĞƐŽƵƌĐĞ ƵƚƚŽŶZĞǀĞĂůĂĐŬŐƌŽƵŶĚWŽŝŶƚĞƌKǀĞƌ΃Ηͬх ͙
  16. WZ^Wd/sWZ>>y ͬͬŵĠůŝŽƌĞƌů͛ĞŶŐĂŐĞŵĞŶƚƵƚŝůŝƐĂƚĞƵƌͬͬ ͬͬKƉƚŝŵŝƐĞƌů͛ŝŶƚƵŝƚŝǀŝƚĠͬͬ

  17. WZ^Wd/sWZ>>y фWĂƌĂůůĂdžsŝĞǁ ^ŽƵƌĐĞсΗ΂dž͗ŝŶĚ ŽŶƚĞŶƚƌĞĂ΃Η sĞƌƚŝĐĂů^ŚŝĨƚсΗϰϬΗх ф/ŵĂŐĞ ^ŽƵƌĐĞсΗŵƐͲĂƉƉdž͗ͬͬͬƐƐĞƚƐͬ/ŵĂŐĞƐͬŵŽǀŝĞͺ>ŽƌĚKĨZŝŶŐͺŶď͘ũƉŐΗ ^ƚƌĞƚĐŚсΗhŶŝĨŽƌŵdŽ&ŝůůΗͬх фͬWĂƌĂůůĂdžsŝĞǁх ф^ĐƌŽůůsŝĞǁĞƌ

    dž͗EĂŵĞсΗŽŶƚĞŶƚƌĞĂΗх фdĞdžƚůŽĐŬ ͙ͬх фͬ^ĐƌŽůůsŝĞǁĞƌх
  18. KEEd E/Dd/KE^ ͬͬLJŶĂŵŝƐĞƌƐŽŶĂƉƉůŝĐĂƚŝŽŶͬͬ ͬͬƌĠĞƌĚƵƐĞŶƐĚĂŶƐůĞƉĂƌĐŽƵƌƐƵƚŝůŝƐĂƚĞƵƌͬͬ

  19. KEEd E/Dd/KE^ ^ŽƵƌĐĞ͗ фĂƚĂdĞŵƉůĂƚĞх ф'ƌŝĚdž͗EĂŵĞсΗŚĂƌĂĐƚĞƌdŚƵŵďŶĂŝůΗ ф/ŵĂŐĞ^ŽƵƌĐĞсΗ΂dž͗ŝŶĚ dŚƵŵďŶĂŝů΃Η фͬ'ƌŝĚх фͬĂƚĂdĞŵƉůĂƚĞх ƉƌŝǀĂƚĞǀŽŝĚDĂƐƚĞƌ>ŝƐƚsŝĞǁͺ/ƚĞŵůŝĐŬ;ŽďũĞĐƚƐĞŶĚĞƌ͕/ƚĞŵůŝĐŬǀĞŶƚƌŐƐ

    ĞͿ ΂ ǀĂƌ ŝƚĞŵсĞ͍͘ůŝĐŬĞĚ/ƚĞŵ ĂƐŚĂƌĂĐƚĞƌ͖ ŝĨ;ŝƚĞŵ͊сŶƵůůͿ ΂ ^ĞůĞĐƚĞĚсŝƚĞŵ͖ ,ĞƌŽƐ'ƌŝĚsŝĞǁ͘WƌĞƉĂƌĞŽŶŶĞĐƚĞĚŶŝŵĂƚŝŽŶ;ΗĐŚĂƌĂĐƚĞƌŶŝŵĂƚŝŽŶΗ͕ ŝƚĞŵ͕ΗŚĂƌĂĐƚĞƌdŚƵŵďŶĂŝůΗͿ͖ EĂǀŝŐĂƚŝŽŶ^ĞƌǀŝĐĞ͘EĂǀŝŐĂƚĞфsŝĞǁƐ͘ŚĂƌĂĐƚĞƌƐĞƚĂŝůWĂŐĞх;ŝƚĞŵͿ͖ ΃ ΃
  20. KEEd E/Dd/KE^ ĞƐƚŝŶĂƚŝŽŶ͗ ф'ƌŝĚ dž͗EĂŵĞсΗŚĂƌĂĐƚĞƌ/ŵĂŐĞΗ ф/ŵĂŐĞ^ŽƵƌĐĞсΗ΂dž͗ŝŶĚ /ƚĞŵ͘dŚƵŵďŶĂŝů΃Ηͬх фͬ'ƌŝĚх ƉƌŽƚĞĐƚĞĚŽǀĞƌƌŝĚĞǀŽŝĚKŶ>ŽĂĚĞĚ;ŽďũĞĐƚƐĞŶĚĞƌ͕ZŽƵƚĞĚǀĞŶƚƌŐƐ ĞͿ

    ΂ ŽŶŶĞĐƚĞĚŶŝŵĂƚŝŽŶ ŝŵĂŐĞŶŝŵĂƚŝŽŶ сŽŶŶĞĐƚĞĚŶŝŵĂƚŝŽŶ^ĞƌǀŝĐĞ ͘'Ğƚ&ŽƌƵƌƌĞŶƚsŝĞǁ;Ϳ ͘'ĞƚŶŝŵĂƚŝŽŶ;ΗĐŚĂƌĂĐƚĞƌŶŝŵĂƚŝŽŶΗͿ͖ ŝĨ;ŝŵĂŐĞŶŝŵĂƚŝŽŶ ͊сŶƵůůͿ ΂ ŝŵĂŐĞŶŝŵĂƚŝŽŶ͘dƌLJ^ƚĂƌƚ;ŚĂƌĂĐƚĞƌ/ŵĂŐĞͿ͖ ΃
  21. Zz>/ DdZ/>

  22. ͬͬƌĠĞƌĚĞƐĨŽĐƵƐƐƵƌĚƵĐŽŶƚĞŶƵͬͬ ͬͬ,ŝĠƌĂƌĐŚŝƐĞƌůĂĚĂƚĂͬͬ Zz>/ DdZ/>

  23. Zz>/ DdZ/> ф'ƌŝĚ sĞƌƚŝĐĂůůŝŐŶŵĞŶƚсΗdŽƉΗ ,ĞŝŐŚƚсΗϰϯϬΗх ф'ƌŝĚ͘ĂĐŬŐƌŽƵŶĚх фĐƌLJůŝĐƌƵƐŚ ĂĐŬŐƌŽƵŶĚ^ŽƵƌĐĞсΗĂĐŬĚƌŽƉΗ dŝŶƚŽůŽƌсΗ΂^ƚĂƚŝĐZĞƐŽƵƌĐĞ ĐƌLJůŝĐŽůŽƌ΃Η

    dŝŶƚKƉĂĐŝƚLJсΗϬ͘ϱΗ &ĂůůďĂĐŬŽůŽƌсΗ΂^ƚĂƚŝĐZĞƐŽƵƌĐĞ ĐƌLJůŝĐŽůŽƌ΃Ηͬх фͬ'ƌŝĚ͘ĂĐŬŐƌŽƵŶĚх фͬ'ƌŝĚх ĂĐŬĚƌŽƉ с/ŶͲƉƉĐƌLJůŝĐ ,ŽƐƚĞĚďĂĐŬĚƌŽƉ сĂĐŬƌŽƵŶĚ ĐƌLJůŝĐ
  24. KE^/Kh^ KEdZK>^ ͬͬ^͛ĂĚĂƉƚĞƌăƚŽƵƐůĞƐĚĞǀŝĐĞƐ ͬͬ ͬͬƉƵƌĞƌůĞƐŝŶƚĞƌĨĂĐĞƐͬͬ

  25. DE>WZK'ZDD ϯ &ůƵĞŶƚĚĞƐŝŐŶĚĞŵĂŝŶ͍

  26. ͻ htWdžĐĞů ͻ htWtŽƌĚ ͻ htWWŽǁĞƌWŽŝŶƚ ͻ KŶĞEŽƚĞ ͻ DĂŝů

    ͻ ĂůĞŶĚĂƌ ͻ ĚŐĞ ͻ tŝŶĚŽǁƐůĂƌŵƐ ͻ ĐƚŝŽŶĞŶƚĞƌ ͻ ^ƚĂƌƚDĞŶƵ ^dͲ YhD/ZK^K&dZK/dE&>hEd^/'E͍ ͻ DŝĐƌŽƐŽĨƚWĞŽƉůĞ ͻ DŝĐƌŽƐŽĨƚWŚŽƚŽƐ ͻ DŽǀŝĞƐΘds ͻ 'ƌŽŽǀĞDƵƐŝĐ ͻ tŝŶĚŽǁƐĂůĐƵůĂƚŽƌ ͻ tŝŶĚŽǁƐDĂƉƐ ͻ tŝŶĚŽǁƐ^ƚŽƌĞ ͻ tŝŶĚŽǁƐsŽŝĐĞ ZĞĐŽƌĚĞƌ ͻ ^ƚŽƌLJZĞŵŝdž ͻ DŝĐƌŽƐŽĨƚWĂŝŶƚϯ
  27. Z^^KhZ^ &ůƵĞŶƚĞƐŝŐŶ^LJƐƚĞŵDŝĐƌŽƐŝƚĞʹ ĨůƵĞŶƚ͘ŵŝĐƌŽƐŽĨƚ͘ĐŽŵ &ůƵĞŶƚĞƐŝŐŶĞǀĞůŽƉĞƌŽĐƐʹ ĚĞƐŝŐŶ͘ǁŝŶĚŽǁƐ͘ĐŽŵ DŝdžĞĚƌĞĂůŝƚLJĞƐŝŐŶŽĐƐʹ ŚƚƚƉ͗ͬͬĂŬĂ͘ŵƐͬŵƌĚĞƐŝŐŶ dǁŝƚƚĞƌ ʹ ΛŵŝĐƌŽƐŽĨƚĚĞƐŝŐŶ͕ΛǁŝŶĚŽǁƐĚĞǀ͕ΛǁŝŶĚŽǁƐƵŝ

    ƌĞĂƚŽƌƐEĞƚǁŽƌŬ ŚƚƚƉƐ͗ͬͬǁǁǁ͘ůŝŶŬĞĚŝŶ͘ĐŽŵͬŐƌŽƵƉƐͬϭϯϱϮϵϯϰϬ
  28. ŚƚƚƉƐ͗ͬͬŐŝƚŚƵď͘ĐŽŵͬDŝĐƌŽƐŽĨƚͬtŝŶĚŽǁƐͲƵŶŝǀĞƌƐĂůͲƐĂŵƉůĞƐͬƚƌĞĞͬĚĞǀͬ^ĂŵƉůĞƐͬyĂŵůh/ĂƐŝĐƐ ŚƚƚƉƐ͗ͬͬŐŝƚŚƵď͘ĐŽŵͬŵŝĐƌŽƐŽĨƚͬǁŝŶĚŽǁƐƵŝĚĞǀůĂďƐ

  29. h/<ŝƚƐĚŝƐƉŽŶŝďůĞƐ ƉŽƵƌ͗ ĚŽďĞyͬ^ŬĞƚĐŚͬWŚŽƚŽƐŚŽƉͬ/ůůƵƐƚƌĂƚŽƌ

  30. ŵĂƌĚŝϭϬŽĐƚŽďƌĞϮϬϭϳ ϭϵ͗ϬϬ ^ŽĂƚ ʹ ĂƚŝŵĞŶƚ ^ĞƋƵĂŶĂ ϭ ϮϬƌƵĞĚĞƐ&ƌŝŐŽƐ͕ WĂƌŝƐ

  31. Yh^d/KE^͍

  32. EŽƚĞnjĐĞƚƚĞƐĞƐƐŝŽŶƐƵƌĞdžƉĞƌŝĞŶĐĞƐϭϳ͘ŵŝĐƌŽƐŽĨƚ͘Ĩƌ ƚƚĞŶƚĞnjĚĞŐĂŐŶĞƌƵŶĞ^ƵƌĨĂĐĞWƌŽ ŽƵďůĞnjǀŽƚƌĞĐŚĂŶĐĞĞŶƌĠƉŽŶĚĂŶƚĂƵƐƐŝ ĂƵƋƵĞƐƚŝŽŶŶĂŝƌĞĚĞƐĂƚŝƐĨĂĐƚŝŽŶŐůŽďĂůĞ͊

  33. DZ/ ηĞdžƉĞƌŝĞŶĐĞϭϳ