Suunnittelu tummaa tilaa ja teemoja varten
Laajenna visuaalista ilmettäsi tukemaan vaaleita ja tummia teemoja luontevasti käyttämällä semanttisia värivalintoja, jotka mukautuvat ilman jokaisen komponentin uudelleensuunnittelua.
Suunnittelu tummaa tilaa ja teemoja varten on ilmainen Suunnittelujärjestelmät ja komponenttikirjastot-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Suunnittelujärjestelmät ja komponenttikirjastot-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Suunnittelujärjestelmät ja komponenttikirjastot-kurssilla on yhteensä 4 oppituntia.
Yhden teeman tuolle puolen
Käyttäjät odottavat yhä useammin tummaa tilaa. Yhdelle teemalle rakennettu visuaalinen kieli rikkoutuu heti, kun tausta vaihdetaan.
Tässä oppitunnissa näytetään, miten suunnitellaan eri teemoihin mukautuva väripaletti ilman koko tyyliohjeen monistamista.
Semanttiset värit, eivät kirjaimelliset
Sen sijaan että käyttäisitte taustoille white-arvoa, määritelkää semanttiset roolit: surface, text-primary, border.
Kukin rooli yhdistyy eri teemassa eri kirjaimelliseen arvoon. Komponentti viittaa rooliin, joten se mukautuu automaattisesti teeman vaihtuessa.
Roolien yhdistäminen teemoihin
Teema on yksinkertaisesti hakutaulukko roolista väriin. Vaaleat ja tummat teemat käyttävät samoja roolinimiä mutta eri arvoja.
Koodikatkelma havainnollistaa ajatusta.
const themes = {
light: { surface: '#ffffff', text: '#1a1a1a' },
dark: { surface: '#121212', text: '#eaeaea' }
};
function color(theme, role) {
return themes[theme][role];
}
console.log('light surface', color('light', 'surface'));
console.log('dark text', color('dark', 'text'));Tumma tila ei ole käänteinen väritys
Yleinen virhe on vain kääntää värit. Puhtaan mustan ja puhtaan valkoisen kääntäminen tuottaa jyrkän lopputuloksen ja rasittaa silmiä.
Hyvissä tummissa teemoissa käytetään tummanharmaita sävyjä (ei #000000-arvoa) ja hieman himmennettyä tekstiä häikäisyn vähentämiseksi. Suunnitelkaa jokainen teema tarkoituksella.
Korkeuserot tummassa tilassa
Vaaleassa tilassa varjot ilmaisevat korkeuseroja. Tummassa tilassa varjot ovat lähes näkymättömiä, joten korkeuserot ilmaistaan sen sijaan vaaleammilla pintaväreillä.
Tummassa tilassa kohotettu kortti on hieman vaaleamman harmaa kuin sen takana oleva sivu. Suunnitelkaa pintojen sävyt jokaiselle korkeustasolle.
Kontrasti eri teemojen välillä
Saavutettavuuden kontrastisuhteiden on täytyttävä molemmissa teemoissa. Valkoisella taustalla toimiva tekstiväri ei välttämättä toimi tummanharmaalla.
Tarkistakaa jokainen semanttinen yhdistelmä (teksti pinnalla, teksti primary-värillä) WCAG AA -vaatimuksia vasten jokaisessa teemassa ennen julkaisua.
Korostus- ja brändivärit
Brändin korostusväriä on usein säädettävä teeman mukaan. Valkoisella erottuva kirkas sininen voi tuntua liian kylläiseltä tummalla taustalla.
Määritelkää teemakohtaiset korostusvärit, jotta brändi tuntuu tummassa tilassa harkitulta eikä vahingossa neonväriseltä.
Järjestelmäasetuksen kunnioittaminen
Useimmat alustat tarjoavat käyttäjän asetuksen prefers-color-scheme-ominaisuuden kautta. Käyttäkää oletuksena järjestelmäasetusta ja antakaa käyttäjien sitten ohittaa se.
Käyttöjärjestelmän valinnan kunnioittaminen tarkoittaa, että käyttäjä päätyy automaattisesti haluamaansa teemaan – pieni yksityiskohta, joka tekee kokemuksesta viimeistellyn.
Kuvat ja kuvitukset
Valkoiselle taustalle suunnitellut valokuvat ja kuvitukset voivat riidellä tumman tilan kanssa. Tarjotkaa teemaan mukautuvat resurssit tai lisätkää hienovaraisia reunuksia ja peittokerroksia.
Erityisesti logot saattavat tarvita vaalean muunnelman. Suunnitelkaa resurssien muunnelmat osaksi visuaalista kieltä, ei jälkikäteen.
Molempien teemojen testaaminen
Jokainen uusi komponentti on tarkistettava molemmissa teemoissa ennen yhdistämistä. Vaaleassa tilassa hienolta näyttävä komponentti voi olla tummassa tilassa lukukelvoton.
Rakentakaa dokumentaatioon teeman vaihtopainike, jotta tarkistajat voivat vaihtaa teemaa heti.
Teemat perustana
Semanttisten ja teemoihin mukautuvien värien suunnittelu heti alusta alkaen tekee tulevien teemojen – suuren kontrastin, kausittaisten ja white-label-teemojen – lisäämisestä paljon edullisempaa.
Visuaalinen kieli pysyy samana; vain arvojen hakutaulukot muuttuvat.
Pikatarkistus
Testatkaa teemojen hallintanne.
Kertaus
Opitte laajentamaan visuaalisen kielen eri teemoihin:
- Käyttäkää semanttisia värien rooleja, älkää kirjaimellisia arvoja.
- Suunnitelkaa tumma tila tarkoituksella – se ei ole käänteinen väritys.
- Ilmaiskaa korkeuserot pintojen sävyillä ja tarkistakaa kontrasti jokaisessa teemassa.
- Kunnioittakaa järjestelmäasetusta ja tarjotkaa teemoihin mukautuvia resursseja.
Semanttinen paletti tekee usean teeman tuesta määrityksen eikä uudelleenkirjoitusta.
Opi Suunnittelujärjestelmät ja komponenttikirjastot tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”Suunnittelu tummaa tilaa ja teemoja varten” ilmainen?
Kyllä – oppitunnin ”Suunnittelu tummaa tilaa ja teemoja varten” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Suunnittelujärjestelmät ja komponenttikirjastot-kurssin, päivitä CoddyKit PROhon. Suunnittelujärjestelmät ja komponenttikirjastot-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Suunnittelu tummaa tilaa ja teemoja varten”?
Laajenna visuaalista ilmettäsi tukemaan vaaleita ja tummia teemoja luontevasti käyttämällä semanttisia värivalintoja, jotka mukautuvat ilman jokaisen komponentin uudelleensuunnittelua. Harjoittelet Suunnittelujärjestelmät ja komponenttikirjastot-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Suunnittelujärjestelmät ja komponenttikirjastot-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Suunnittelujärjestelmät ja komponenttikirjastot-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Suunnittelu tummaa tilaa ja teemoja varten”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Suunnittelujärjestelmät ja komponenttikirjastot-oppitunnilla?
Kyllä. Jokainen Suunnittelujärjestelmät ja komponenttikirjastot-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Väripaletit ja typografia
- Välit, asettelu ja ikonografia
- Visuaalisen tyylioppaan luominen
- Suunnittelu tummaa tilaa ja teemoja varten