Szín paletta
Az Anyagterv színpalettájánál a Google a „két szín” rendszert részesíti előnyben változatokkal:
Így például, mint ezen a fotón. Az elsődleges színe lila lenne, másodlagos színe cián. Ezután a felhasználói felület más elemeihez a lila és a cián árnyalatváltozatait használja, így minden összeolvad.
Ez Material Design szerkesztő egy nagyon hasznos eszköz, amely segít a színvariációk összeállításában. Ihletet kereshet olyan profi UI / UX tervezőirodáktól is, mint a Agyag , vagy a legnépszerűbb webdesign cégek 2019-ben.
Érzékeny rács elrendezés
Az érzékeny rács elrendezésének megértése azt jelenti, hogy hogyan pixelsűrűség és az automatikus képernyő-adaptáció működik. Nagyrészt az átlagos Android-telefon DPI valahol 300 és 480 DPI között van.
Ezt szem előtt tartva egy 300 DPI képernyő általában legfeljebb 4 oszlopot képes megjeleníteni:
Míg egy 600 dpi-s képernyő legfeljebb 8 oszlopot jelenít meg.
Az egyes oszlopok között vannak „ereszcsatornák”, alapvetően az egyes oszlopokat elválasztó területek. Tehát egy 360dp-s mobilon minden csatorna 16dp körül lenne.
A képernyő DPI megértése
A felhasználói felület tervezésénél figyelembe kell venni a különböző telefonméretek különböző pixelsűrűségeit, függetlenül attól, hogy ez a rendszer felhasználói felülete, vagy az alkalmazás felhasználói felületéről. Itt található a leggyakoribb képernyőfelbontások és pixelsűrűségek diagramja:
Alapszabályként tehát, amikor „globális” témát vagy alkalmazást tervez, és nem arra összpontosít, hogy egyetlen eszköz számára témákat hozzon létre, akkor a legkisebb sűrűséggel kell kezdenie. Ez azért van, mert ha 1x-rel kezdi a tervezést, akkor egyszerűen pixelben kell mérnie, és az értékek a DP-kben változatlanok maradnak.
Ha azonban 3,5x-re tervez, akkor az összes értéket el kell osztania 3,5-vel, hogy alkalmazkodjon a többi sűrűséghez, és ez csak akkor válik fejfájássá, ha több DP-értéket számol.
További tippek az Android 10 UI / UX tervezéséhez
Ha egyedi színre van szüksége a téma összetevőihez, például rádiókhoz, gombokhoz, jelölőnégyzetekhez stb., Akkor ezt kell tennie nem használja a kihúzható elemeket a különféle állapotok ( ellenőrzött, kattintott stb.) . Mert a kihúzható elemek elveszítik a natív Anyagtervezés effektusokat (mint a hullámzás) amelyet a Google széles körben frissített az Android 9 és az Android 10 rendszerben.
Amikor az Anyagtervezéssel foglalkozik, a Google sok olyan finomságot tartalmaz, amelyeket kihasználhat, és ezek természetesebben fognak áramlani az Ön felhasználói felületével / felhasználói felületével.
Tehát itt van néhány kulcsszó a beépített Material Design elemekkel rendelkező komponensek tematizálásához, és az alkalmazás vagy az UI / UX továbbra is élvezni fogja a natív rendszer viselkedését és a felhasználói felület állapotát.
Gomb egyedi színű androiddal: backgroundTint = '@ color / red' ----- Rádió gomb egyéni színű androiddal: buttonTint = '@ color / red' ----- Képek és ikonok android: drawableTint = '@ color / piros '----- ProgressBar egyedi színű androiddal: progressTint =' @ color / red '
Egy egyszerű árnyék megjelenítéséhez az alkatrészek alatt, például kártyanézet módban, csak a magasság tulajdonságot kell használnia.
android: magasság = '1dp'
A címkék és a szülőtulajdonságok egyesítése rendkívül hasznos, hogy jobb irányíthatóságot és kezelhetőbb XML-fájlokat kapjon.
Az animált elrendezésbeli változtatások valóban javíthatják az UX-t, és ezt szinte az összes ViewGroup tiszteletben fogja tartani. Tehát, ha a nézet hierarchiájában változás következik be, animációval jár. Egy kis know-how-val tervezhet is egyedi átmeneti effektusok .
android: animateLayoutChanges = 'true'Címkék android Fejlődés 4 perc olvasás
