---
title: "Design System - Sovellussuunnittelu ja UX-ohjeet huippumobiilisovellusten rakentamiseen."
description: "Suunnittelujärjestelmämme kokoaa UX- ja sovellussuunnitteluohjeet, joita käytetään sovellusten rakentamiseen sovellusten rakentajamme avulla, jotta saavutetaan visuaalinen yhdenmukaisuus kaikilla alustoilla."
canonical_url: "https://www.goodbarber.com/uxdesign/"
lang: fi
---

# Design System - Sovellussuunnittelu ja UX-ohjeet huippumobiilisovellusten rakentamiseen.

![ds_banner_alt](<>)

# GoodBarber Design System

## Lue, miten mullistamme sovellusten luomisen ja tarjoamme sujuvia ja tyylikkäitä kokemuksia kaikilla alustoilla.

[Tutustu suunnittelujärjestelmäämme](/uxdesign/foundations)

### GoodBarber-suunnittelujärjestelmä

GoodBarber Design System on kokonaisratkaisu, joka toimii kehyksenä, työkalupakkina ja graafisena peruskirjana suunnittelijoille ja kehittäjille. Se tarjoaa **skaalautuvat ohjeet** johdonmukaista suunnittelukieltä varten, mikä takaa tehokkuuden ja skaalautuvuuden.

Se luo yhteiset suunnitteluperiaatteet ja -mallit ja mahdollistaa samalla joustavuuden ja mukauttamisen tarpeen mukaan. Viime kädessä se tehostaa sovelluskehitystä ja **luo kauniita, toimivia sovelluksia.**

[Perustukset Perusperiaatteet yhtenäisten ja johdonmukaisten mallien rakentamiseksi kaikilla alustoilla.](/uxdesign/foundations)[Atomit Olennaiset osat, jotka varmistavat visuaalisen johdonmukaisuuden ja tehostavat työnkulkua.](/uxdesign/atomic-components)[Komponentit Uudelleenkäytettävät elementit, joiden avulla voidaan rakentaa johdonmukaisia, käyttäjäystävällisiä käyttöliittymiä.](/uxdesign/ui-components)

### Miksi nämä suunnitteluohjeet?

GoodBarber on vuonna 2011 lanseerattu kooditon App Builder, jonka avulla käyttäjät voivat luoda kauniita natiivisovelluksia tai progressiivisia verkkosovelluksia vaivattomasti. Sitoudumme huippuosaamiseen ja tarjoamme jatkuvasti **parhaita ratkaisuja kauniiden sovellusten luomiseen.**

Kun GoodBarber lanseerattiin, käyttäjäkokemuksen (User Experience, UX) suunnittelua ei ymmärretty tai hyväksytty yhtä laajasti kuin nykyään. Matkamme johti meidät kehittämään GoodBarberin Design System -järjestelmän, joka tarjoaa **johdonmukaiset ohjeet ja parhaat käytännöt** **visuaalisen johdonmukaisuuden** saavuttamiseksi **, kehitysprosessin nopeuttamiseksi** ja **yhtenäisen käyttäjäkokemuksen** varmistamiseksi **.**

Jakamalla suunnitteluperiaatteitamme annamme käyttäjille mahdollisuuden saavuttaa **johdonmukaisuutta, tehokkuutta ja skaalautuvuutta** sovelluskehityksessä ja parantaa teknologiallamme luotujen sovellusten yleistä laatua.

![code icon](https://portal.ww-cdn.com/portal_static/images/designsystem/main/guidelines-dev@small.a0034b531522.png)

**Kehittäjillä** on pääsy sivujen ja komponenttien teknisiin eritelmiin: niiden kokoon, sijoitteluun, käyttäytymiseen ja ominaisuuksiin.

![code icon](https://portal.ww-cdn.com/portal_static/images/designsystem/main/guidelines-design@small.55c3dabb4ecd.png)

**Suunnittelijat** voivat käyttää uusia sivuja luodessaan sääntöjä, jotka koskevat välejä, fonttikokoja, kuvasuhteita ja värien jakautumista.

### Tavoitteet

![ds_objectives_principles_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-04-streamline@small.b7c5264ab429.png)

Tehosta mallien luomista ja tuotantoa soveltamalla rakennusperiaatteita.

![ds_objectives_consistency_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-05-consistency@small.6c9cbe395733.png)

Varmistetaan visuaalinen yhdenmukaisuus sovelluksen sivujen välillä eri alustoilla.

![ds_objectives_smoothux_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-06-ux@small.35d00be0e89f.png)

Sujuvan ja optimaalisen käyttökokemuksen takaaminen

### GoodBarberin suunnitteluperiaatteet

Hyvän suunnittelun pitäisi olla lähtökohta, ei taakkasi. GoodBarber oli ensimmäinen sovelluskehitin, joka muotoili aidon design systemin, joten luot kauniita ja toimivia sovelluksia ilman suunnittelutyön taakkaa. Kuusi periaatetta tekevät sen mahdolliseksi.

#### Järjestelmälähtöinen suunnittelu

Jokainen näyttö kootaan yhdestä muodollisesta design systemistä (perustat, atomit ja komponentit), joten yhdenmukaisuus on taattu rakenteen kautta eikä ole kiinni sinun kurinalaisuudestasi.

Aito kolmikerroksinen järjestelmä, jossa on yli 100 valmista layoutia. Ensimmäinen, joka on muotoiltu no-code-sovelluskehittimeen.

#### Ei suunnittelutaakkaa

Sinä teet luovat valinnat (teema, värit, sisältö); järjestelmä hoitaa hiljaa välistykset, typografian, muodot ja yhdenmukaisuuden.

Ei opeteltavaa design-paneelia, ei suunniteltavaa välistysasteikkoa. Voit ohittaa minkä tahansa oletuksen tarvittaessa.

#### Natiivi oletuksena

Yksi määritys tuottaa kolme moottoria: natiivi iOS (Swift), natiivi Android (Kotlin) ja Progressive Web App (Angular).

Käännetyt Swift- ja Kotlin-binäärit sekä PWA. Ei WebView-kääre.

#### Määritä kerran, yhtenäinen kaikkialla

Väri, typografia, välistykset, muodot ja varjot määritetään kerran semanttisina rooleina ja käytetään kaikkialla, joten yhden teema-asetuksen muuttaminen päivittää koko sovelluksen johdonmukaisesti.

Neljä semanttista väriroolia, 18 laitekalibroitua typografiatasoa, monilaitteinen gutter-järjestelmä.

#### Luettava oletuksena

Paletit on suunniteltu kontrasti ja luettavuus edellä, ja jokainen hallintaelementti säilyttää mukavan kosketusalueen, myös silloin kun elementti näyttää pieneltä.

Genius Palette (oma tekoäly) ja mukavat kosketusalueet jokaisessa hallintaelementissä.

#### Viimeistely, jonka tuntee

Natiivi tuotos avaa aistikerroksen, jonka useimmat no-code-sovellukset ohittavat. Juuri nämä yksityiskohdat saavat sovelluksen tuntumaan viimeistellyltä, ei koneen tuottamalta.

Haptinen palaute, motion design, läpileikkaava mediasoitin, kelluva TabBar.

GoodBarber suunnittelee jokaisen sovelluksen kuudella periaatteella: järjestelmälähtöinen suunnittelu, ei suunnittelutaakkaa, natiivi oletuksena, määritä kerran ja yhtenäinen kaikkialla, luettava oletuksena sekä aistillinen viimeistelyn kerros. Yhdessä ne selittävät, miksi ilman suunnittelutaustaa oleva julkaisee sovelluksen, joka näyttää ammattilaisen suunnittelemalta.

Tutustu GoodBarber Design System -järjestelmään ja vapauta sujuvan sovellussuunnittelun voima!

[Tutustu suunnittelujärjestelmäämme](/uxdesign/foundations)