Design fluent

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare

Fluent Design System (denumit în cod Project Neon) [1] , prezentat oficial ca Microsoft Fluent Design System, este un limbaj de proiectare dezvoltat în 2017 de Microsoft [2] . Fluent Design este o reînnoire a limbajului Microsoft Design Language 2 care include îndrumări pentru proiectări și interacțiuni utilizate în cadrul software-ului conceput pentru toate dispozitivele și platforma Windows 10. Sistemul se bazează pe cinci componente cheie: lumină, adâncime, mișcare, material și scară. Noul limbaj de proiectare include o utilizare mai proeminentă a efectelor de mișcare, adâncime și transluciditate [3] [4] .

Trecerea la Fluent este un proiect pe termen lung; Aspectele preliminare ale designului (în special efectele de transluciditate „acrilică” și „dezvăluirea” efectelor butoanelor) au fost încorporate în Windows 10 , mai ales în „Fall Creators Update” lansat în octombrie 2017, precum și un sistem de actualizare Xbox A software lansat alături [5] [6] [7] [8] . Alte aspecte ale Fluent vor fi introduse în Windows în timp [9] .

Comparativ cu Metro și Aero

Principiile cheie ale lui Fluent sau „blocuri” (lumină, adâncime, mișcare, material și scară) se îndepărtează de conceptul plat definit de Metro și, păstrând în același timp aspectul curat introdus de Metro, Fluent reînnoiește grafica Aero, o abordare de design care a fost introdus în Windows Vista și Windows 7 , inclusiv transluciditate neclară, modele animate de paralaxă, umbrire, efecte de evidențiere în urma indicatorului mouse-ului sau gesturi gestuale de intrare și Metro „fals” odată descărcat [10] .

Aplicații fluente

Ușoară

Dezvăluie punctul culminant

Scopul luminii este de a atrage atenția și de a ilumina informațiile. La plimbare, evidențierea Reveal luminează marginile ascunse din apropiere pe obiecte, cum ar fi liste și butoane din meniul de navigare burger. După selectare, de exemplu, făcând clic sau atingând, este afișat rapid un efect de lumină circulară albă. De asemenea, în mediul holografic al Windows-ului, există un indicator alb rotunjit.

La 6 noiembrie 2017, angajatul Microsoft, David Haz, a declarat că există planuri de a aplica evidențierea divulgării în bara de activități, dar din iulie 2019, acest lucru nu s-a întâmplat.

Dezvăluie focalizarea

Elemente „focalizabile” cu margine care se aprinde prin vederea focului [11] .

Adâncime

Adăugarea adâncimii utilizează axa Z și permite diferențierea conținutului prin stratificare. Adâncimea este prezentată prin umbre și straturi de adâncime Z [12] [13] . Acest lucru este evident mai ales în aplicația Office reproiectată din 2019.

Mişcare

Mișcarea stabilește o relație între elementele interfeței cu utilizatorul și oferă continuitate în experiență [14] .

Adăugați / eliminați animații

Listează animațiile pentru inserarea și eliminarea articolelor dintr-o colecție [15] .

Animații legate

Animațiile conectate sunt tranziții ale elementelor. În timpul unei schimbări de conținut, un element pare să zboare în continuare prin aplicație [16] .

Tranziția conținutului

Se folosește când se modifică doar o parte din conținutul unei pagini [17] .

Burghiu

Drill este utilizat atunci când navigați mai adânc într-o aplicație. De exemplu, vizualizați mai multe informații după selectarea unui element [18] .

Decolorare

Fade in and out pentru a insera și închide elemente din vizualizare [19] .

Parallax

Parallax mută obiecte la viteze diferite. Fundalul se mișcă mai lent decât conținutul de deasupra acestuia. De exemplu, o listă va derula mai repede decât imaginea de fundal, creând un efect de adâncime pe lângă mișcare [20] .

Apăsați Feedback

Când un element este apăsat, acesta revine momentan pe fundal și apoi își restabilește poziția inițială. Exemple de feedback de presă includ meniul Start Tile live, Action Center Quick Actions și butoanele din bara de adrese Microsoft Edge [21] .

Material

Acril

Au fost create noi pictograme cu materiale acrilice pentru programele Microsoft, începând cu aplicațiile Office și Microsoft Edge, bazate pe Chromium, în 2018 și, respectiv, în 2019 [22] [23] . Versiunile preliminare ale icoanelor finale au fost reperate în videoclipul „Întâlniți noile icoane pentru Office 365” [24] , înainte ca mai multe să fie observate când a fost dezvăluit Windows 10X [25] , înainte de a fi dezvăluit oficial pe 12 decembrie 2019 [26] . Aceste pictograme au început să apară prin actualizările Microsoft Store pentru acele aplicații, începând cu Mail și Calendar [27] [28] .

Pictogramă Microsoft Defender 2020: un exemplu de design fluent
Pictogramă Microsoft Defender 2020: un exemplu de design fluent

Materialul acrilic creează un efect translucid și neclar cu un ușor efect de zgomot. Puteți crea o ierarhie vizuală folosind diferite opacități. De exemplu, într-o aplicație, suprafețele de conținut principal sunt adesea opace (cu excepția widgeturilor sau aplicațiilor ușoare precum Calculator), o țiglă secundară poate avea un fundal acrilic de 80%, iar țiglă terțiară poate avea un fundal acrilic de 60%. Fundalul acrilic estompează toate elementele din spatele materialului acrilic activ. Acrilicul din aplicație estompează conținutul din aplicație [29] .

Acrilul este dezactivat într-o anumită fereastră atunci când aplicația nu mai este selectată. Ambele tipuri de acril sunt dezactivate la nivel de sistem atunci când transparența este dezactivată, când modul Economisire baterie este activat sau pe hardware-ul low-end. Imaginea de fundal acrilică este dezactivată atunci când o fereastră este debifată sau în modul Windows 10 Mobile, HoloLens sau tabletă.

Aplicațiile variază între diferiți factori de formă, dimensiuni de afișare și de la 0D la 3D. Elementele se adaptează la dimensiunea ecranului și sunt disponibile în mai multe dimensiuni [30] [31] . Controalele conștiente sunt, de asemenea, clasificate în Scala (de exemplu, bare de intrare și intrări care se adaptează la diferite metode de invocare) [32] [33] .

Scară

Aplicațiile se adaptează diferiților factori de formă, dimensiuni de afișare și de la 0D la 3D. Elementele se adaptează la dimensiunea ecranului și sunt disponibile în mai multe dimensiuni. Controalele conștiente sunt, de asemenea, clasificate în Scale (de exemplu, bare de defilare și intrări care se adaptează la diferite metode de invocare).

Notă

  1. ^ Fluent Design este noua interfață de utilizare modernă Microsoft pentru Windows și multe altele , în The Verge , 11 mai 2017. Accesat la 11 mai 2017 .
  2. ^ (EN) Dezvoltator Windows pe Twitter , pe Twitter. Adus la 11 mai 2017 .
  3. ^ Limbaj de proiectare fluent , pe Microsoft . Adus la 12 mai 2017 .
  4. ^ New Windows look and feel, Neon, este oficial „Microsoft Fluent Design System” , su Ars Technica . Adus la 11 mai 2017 .
  5. ^ Microsoft prezintă modificările sale Fluent Design la Windows 10 , în The Verge . Adus pe 29 octombrie 2017 .
  6. ^ (EN) Sistemul de design fluent Microsoft amenință pentru a face ca Windows să arate bine , în Ars Technica. Adus pe 29 octombrie 2017 .
  7. ^ O nouă actualizare majoră Xbox One revizuiește tabloul de bord cu Fluent Design , în The Verge . Adus pe 29 octombrie 2017 .
  8. ^ Xbox One primește o actualizare majoră astăzi, inclusiv un tablou de bord mai rapid , în The Verge . Adus pe 29 octombrie 2017 .
  9. ^ Instagram , 19 martie 2020, https://www.instagram.com/p/B97VqkXg0iN/ . Adus pe 19 aprilie 2020 .
  10. ^ (RO) Nicio evidențiere fluentă a designului în meniul Start - Actualizare Fall Creator pe answers.microsoft.com. Adus la 26 decembrie 2017 .
  11. ^ (EN) cphilippona, Reveal focus - dezvoltator de aplicații UWP , pe docs.microsoft.com. Adus la 30 martie 2018 .
  12. ^ Microsoft prezintă caracteristica 3D „stratificare în adâncime Z” în sistemul său de design fluent , în Windows Central . Adus la 22 decembrie 2017 .
  13. ^ (EN) Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices in VRFocus. Adus la 22 decembrie 2017 .
  14. ^ (EN) mijacobs, Mișcare și animație în aplicații UWP - dezvoltator de aplicații UWP , pe docs.microsoft.com. Adus la 22 decembrie 2017 .
  15. ^ (EN) mijacobs, Mișcare și animație în aplicații UWP - dezvoltator de aplicații UWP , pe docs.microsoft.com. Adus la 30 martie 2018 .
  16. ^ (EN) mijacobs, Connected animation - UWP app developer , pe docs.microsoft.com. Adus la 31 decembrie 2017 .
  17. ^ (EN) mijacobs, Mișcare și animație în aplicații UWP - dezvoltator de aplicații UWP , pe docs.microsoft.com. Adus la 30 martie 2018 .
  18. ^ (EN) davidvkimball, Tranziții de pagină în aplicații WUP - aplicații UWP , pe docs.microsoft.com. Adus pe 27 noiembrie 2019 .
  19. ^ (EN) mijacobs, Mișcare și animație în aplicații UWP - dezvoltator de aplicații UWP , pe docs.microsoft.com. Adus la 30 martie 2018 .
  20. ^ (EN) mijacobs, Cum se utilizează controlul ParallaxView pentru a adăuga adâncime și mișcare aplicației dvs. - Dezvoltator de aplicații UWP , pe docs.microsoft.com . Adus la 22 decembrie 2017 .
  21. ^ (EN) mijacobs, Pointer face clic pe animații în aplicațiile UWP - dezvoltator de aplicații UWP , pe docs.microsoft.com. Adus la 31 decembrie 2017 .
  22. ^ Proiectarea pictogramelor aplicației Office pentru a îmbrățișa o nouă lume a muncii , pe medie , 29 noiembrie 2018. Accesat la 19 aprilie 2020 .
  23. ^ Microsoft dezvăluie noua siglă a browserului Edge care nu mai arată ca Internet Explorer , în The Verge , 2 noiembrie 2019. Adus pe 19 aprilie 2020 .
  24. ^ Faceți cunoștință cu noile pictograme pentru Office 365 , pe youtube.com , 29 noiembrie 2018. Adus pe 19 aprilie 2020 .
  25. ^ #MicrosoftEvent Live , pe youtube.com , 2 octombrie 2019. Adus pe 19 aprilie 2020 .
  26. ^ The Icon Kaleidoscope , pe mediu , 12 decembrie 2019. Adus 19 aprilie 2020 .
  27. ^ Icoane iconice: Proiectarea lumii Windows , pe mediu , 20 februarie 2020. Adus pe 19 aprilie 2020 .
  28. ^ Microsoft lansează noi pictograme colorate Windows 10 , în The Verge , 20 februarie 2020. Adus pe 19 aprilie 2020 .
  29. ^ (EN) mijacobs, Material acrilic - dezvoltator de aplicații UWP , pe docs.microsoft.com. Adus la 22 decembrie 2017 .
  30. ^ (EN) Fluent Design System , pe fluent.microsoft.com. Adus la 18 februarie 2018 (arhivat din original la 1 martie 2018) .
  31. ^ (RO) Adarsh ​​Verma, Ce este sistemul de proiectare fluent? Cum construiește Microsoft cel mai frumos sistem de operare? , în Fossbytes , 12 mai 2017. Adus la 18 februarie 2018 .
  32. ^ (EN) muhsinking, Derulare vizualizare comenzi - Dezvoltator de aplicații UWP , pe docs.microsoft.com. Adus la 22 decembrie 2017 .
  33. ^ Ce este nou cu Microsoft Fluent Design System „wave one” pentru Windows 10 , în Windows Central , 29 iunie 2017. Accesat la 22 decembrie 2017 .

linkuri externe

Adus de la „ https://it.wikipedia.org/w/index.php?title=Fluent_Design&oldid=122133365 ”