UIeenheden

UIeenheden verwijzen naar gestandaardiseerde maten die worden gebruikt om elementen in een gebruikersinterface te schalen en te rangschikken. Ze zijn bedoeld om visuele consistentie, voorspelbaar gedrag op verschillende apparaten en toegankelijke typografie te bevorderen door een gemeenschappelijke vocabulaire voor afmetingen te bieden, zoals breedte, hoogte, marges, padding en regelafstand. In de praktijk kunnen UI-eenheden absoluut of relatief zijn en worden ze vaak georganiseerd in een schaal in plaats van als losse waarden.

Op verschillende platforms komen verschillende soorten eenheden voor. Voor het web bestaan veelgebruikte CSS-eenheden zoals px, em, rem en viewport-eenheden (vw, vh). Voor mobiele platforms gebruikt iOS logische eenheden genaamd punten, die op hun beurt naar schermpixels worden omgerekend, terwijl Android density-independent pixels (dp of dip) hanteert. Moderne ontwerp- en ontwikkelomgevingen proberen een consistente basis te bieden over platforms heen.

Design-systemen implementeren vaak een basisunit en een afstanden- en typografieschaal die daarvan afgeleid is. Een veelvoorkomend patroon is een basiseenheid van bijvoorbeeld 4 of 8 pixels, waaruit marges, padding en regelhoogtes worden afgeleid. Design tokens worden gebruikt om deze waarden tussen ontwerp- en codecomponenten te delen.

De voordelen zijn onder meer betere consistentie, betere schaalbaarheid bij responsieve ontwerpen en betere toegankelijkheid doordat relatieve eenheden kunnen meebewegen met de gebruikersinstellingen. Mogelijke nadelen zijn verwarring bij het mixen van verschillende eenheden of het beperken van ontwerpvrijheid als de schaal te rigide is.