--- title: "Modulaarisen ulkoasun ominaisuudet sovelluksen tekoon - Modulaarisen ulkoasun sovelluskehitin" description: "Nauti parhaasta koodittomasta sovelluskehittimestä ja luo sovelluksellesi kaunis ulkoasu" canonical_url: "https://fi.goodbarber.com/feature-index/design/" lang: fi --- # Modulaarinen ulkoasu Nauti parhaasta koodittomasta sovelluskehittimestä ja luo sovelluksellesi kaunis ulkoasu - [Yleinen ulkoasu](#generaldesign) - [Etusivu](#home) - [Yläpalkki](#header) - [Navigointitapa](#navigationmode) - [Navigoinnin muokkaus](#customnav) - [Valikko](#menu) - [Design-aineistot](#design_ressources) - [Osiot](#sections) ## Yleinen ulkoasu+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4) - ### Räätälöity jokaiselle laitteelle GoodBarber hoitaa ulkoasun kokonaan mobiilista pöytäkoneeseen. Design-elementtimme mukautuvat täydellisesti jokaiseen näyttökokoon, joten laatu on yhtenäinen jokaisella laitteella: älypuhelimella, tabletilla, kannettavalla tai pöytäkoneella. - ### Global Style Tool Hallitse sovelluksesi koko tyyliä yhdestä ainoasta valikosta: väriteema, typografia, toimintopainikkeet, hover-tehosteet ja muut elementit. Luo ulkoasusi ja ota se käyttöön koko sovelluksessasi yhdellä napsautuksella. - ### Taustakuvien hallinta GoodBarberilla voit liittää kuvia ulkoasuusi ja näyttää ne taustalla. - ### Muokattavat marginaalit Muokkaa projektisi marginaaleja: vaakasuuntaiset kaikilla näytöillä, pystysuuntaiset vain mobiilinäytöillä. - ### Hover-tehosteet teksteissä Lisää teksteihisi hover-tehoste: alleviivaus tai kirjasinvärin vaalennus tai tummennus. - ### Hover-tehosteet kuvissa Lisää kuviisi hover-tehoste: lähennys, loitonnus tai läpinäkyvyys. - ### Teeman vaihtaminen Voit vaihtaa teeman yhdellä napsautuksella ja säilyttää samalla navigointitapasi sekä projektisi rakenteen ja sisällön. - ### Ratkaisu jokaiseen tarkoitukseen Mallien monipuolisuus sekä muokkausvaihtoehtojen laajuus ja voima antavat sinun luoda sovelluksen, joka vastaa tarkoitustasi. - ### Tyylieditori Hallitse tyylejäsi yleisellä tasolla, jotta ulkoasu pysyy yhtenäisenä sovelluksen eri näkymissä. - ### Muutosloki GoodBarberin hallintapaneelissa on muutosloki, josta näet historian kaikista projektiisi tehdyistä muutoksista. - ### Ulkoasun päivitys ilman uudelleenkäännöstä Projektisi ulkoasuun liittyvät päivitykset eivät edellytä sovelluksesi kääntämistä uudelleen. Kun ne on hyväksytty, ne tulevat automaattisesti voimaan ja näkyvät käyttäjillesi ilman lisätoimia. - ### Kuvakirjasto Tallenna kuvia omaan kirjastoosi, jotta löydät ne helposti myöhempää käyttöä varten. - ### Valikoiva kuvien koon muutos Kuvista tehdään useita kokosuhteita, ne pakataan ja tallennetaan välimuistiin, jotta tiedostokoon, suorituskyvyn ja näyttölaadun yhdistelmä olisi paras mahdollinen. Latausajat optimoidaan näyttölaadusta tinkimättä. - ### Yksiväritehoste GoodBarberin hallintapaneeliin sisältyvän kuvaeditorin ansiosta voit lisätä kuviisi yksiväritehosteen. - ### Sumennustehoste Lisää kuviisi sumennustehoste yhdellä napsautuksella suoraan GoodBarberin hallintapaneelista sisäänrakennetun kuvaeditorin avulla. - ### Zoomaustehoste Lisää zoomaustehosteita, jotka käynnistyvät kun hiiri viedään kuvan päälle, projektisi pöytäkoneversiossa. - ### Kuvakkeen ja aloitusnäytön luonnin avustaja GoodBarberin hallintapaneelissa on työkalu, joka auttaa sinua luomaan sovelluskuvakkeesi ja käynnistysnäyttösi alusta alkaen. - ### Liukuvärien hallinta Liitä liukuvärejä sovelluksesi ulkoasuun valitsemalla yksi koko kirjastosta (joka käyttää palvelua [https://uigradients.com](https://fi.goodbarber.com)). Kun olet valinnut yhden, liukuväri luodaan ja otetaan käyttöön sovelluksesi ulkoasussa automaattisesti. - ### Genius Palette Jätä väripalettisi tekoälylle. Yhdellä napsautuksella Genius Palette luo yhtenäisen, ammattimaisen värisarjan, joka on valmis otettavaksi käyttöön koko ulkoasussasi. - ### Design System GoodBarber nojaa määriteltyyn designjärjestelmään: perustat, atomit ja komponentit sekä valmiiden asettelujen kirjasto. Säännöt pätevät oletuksena jokaiseen sivuun, joten projekti pysyy yhtenäisenä näkymästä toiseen. - ### Tuntopalaute ja animaatiot Natiivisovelluksissa on aistillinen kerros: tuntopalaute sormen alla, sujuvat siirtymät listasta sen yksityiskohtiin ja liike, joka vastaa vieritykseen. - ### Painikkeiden ja lomakekenttien muodot Määritä sovelluksesi jokaisen painikkeen muoto, neliö, pyöristetty tai pyöreä, sekä lomakekenttiesi muoto, koko ja otsikon sijainti. - ### App Walkthrough Opasta käyttäjäsi ensimmäisen käynnistyksen läpi vuorovaikutteisella esittelyllä. Valitse, miten se näytetään, ja herätä näytöt eloon Lottie-animaatioilla. ## Etusivu+ [https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4](https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4) - ### Modulaarinen etusivu Etusivu on sovelluksesi ensimmäinen osio. Se koostuu widgeteistä ja on täysin joustava. Laajan widget-valikoiman ansiosta etusivun avulla rakennat projektisi niin, että sovelluksestasi tulee aidosti omanlaisensa. - ### Käyttöön tai pois käytöstä Voit ottaa etusivun käyttöön tai poistaa sen käytöstä sovelluksessasi. Jos poistat sen käytöstä, navigointi riippuu yksinomaan valitsemastasi navigointitavasta. - ### 77 widgetiä Widgeteillä sinulla on ainutlaatuinen vapaus järjestää sovelluksesi etusivu. - ### Sisältöwidgetit Content apps Tee sovelluksesi etusivusta elävämpi widgeteillä, jotka päivittyvät automaattisesti aina, kun projektissasi julkaistaan uutta sisältöä. - ### Navigointiwidgetit Content apps Tarjoa suora pääsy sovelluksesi tärkeimpiin osioihin navigointiin tarkoitetuilla widgeteillä. Täydellinen tapa ohjata käyttäjäsi projektisi ytimeen. - ### Verkkokauppawidgetit eCommerce apps Luo suorat sisääntulot tuotteisiisi ja mallistoihisi sovelluksesi etusivulta tuotelistan ja mallistolistan widgeteillä - ### Kampanjawidget eCommerce apps Näytä kampanjaviesti heti, kun käyttäjät saapuvat kauppasi etusivulle. Voit nostaa esiin tuotteen, malliston tai mallistojen listan. Kampanjawidget on hyvin joustava ja auttaa sinua kasvattamaan myyntiä. - ### Puolidynaamiset widgetit Näillä widgeteillä rakennat etusivun, joka päivittyy automaattisesti aina kun uutta sisältöä julkaistaan, ja tarjoat samalla käyttäjälle selkeän rakenteen sovelluksessa liikkumiseen. - ### Muut widgetit Tämä ryhmä kokoaa hyödyllisiä widgetejä, kuten haun, uutiskirjeen, mainoksen, ajastimen ja HTML-widgetit. - ### Rakentaminen vetämällä ja pudottamalla Etusivusi widgetien järjestäminen on helppoa. Vedä widgetit vain sinne, missä haluat niiden olevan. - ### Lajitteluvaihtoehdot Käytössäsi on laaja valikoima tapoja hallita sisältöwidgetiesi kohteiden järjestystä: päivämäärän, suosion, aakkosten tai satunnaisuuden mukaan ja niin edelleen. - ### Kohteiden määrä Widgetin näyttämien kohteiden määrä voidaan asettaa widgetkohtaisesti, jotta etusivusi järjestämiseen jää mahdollisimman paljon vapautta. - ### Omalla koodilla tehdyt widgetit Rakenna omat widgetisi HTML:llä, CSS:llä ja JavaScriptillä ja sijoita ne etusivulle vakiowidgetien rinnalle. ## Yläpalkki+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4) - ### Muokattava NavBar NavBar on sovelluksesi strateginen paikka. Siksi hallitset täysin sen ulkoasua ja toimintoja. Valitse 3 eri korkeudesta (Small, Medium, Big) ja näytä logosi, otsikko tai kuvaus. - ### Muokattavat kuvakkeet Jokaiselle NavBariin lisäämällesi linkille annetaan kuvake. Tämä kuvake on täysin muokattavissa. - ### Pikakuvakkeiden lisääminen NavBar voi näyttää enintään 6 pikalinkkiä sovelluksesi keskeisiin osioihin tai ulkoisiin lähteisiin. - ### Pikakuvakkeiden hallinta Kun voit muokata NavBar-pikakuvakkeidesi ulkoasua, käyttökokemus pysyy yhtenäisenä koko sovelluksessasi. - ### Automaattinen asettelu Sovellus hoitaa automaattisesti parhaan asettelun sen mukaan, montako pikakuvaketta NavBarissa on. - ### Muokattavat pikakuvakkeet Jokaisen NavBar-pikakuvakkeen ulkoasu on muokattavissa. Käytössäsi on yli 1000 vektorikuvakkeen kirjasto, voit lisätä omia kuvakkeitasi ja muokata linkkien otsikoita. - ### Tehostevaihtoehdot Content apps Lisää yläpalkkiin läpinäkyvyys-, sumennus- tai piilotustehosteita. Nämä hienovaraiset tehosteet voivat antaa sovelluksellesi viimeisen silauksen ja erottaa sen joukosta. - ### Tehosteiden automaattinen hallinta GoodBarber lisää tehosteet yläpalkkiin automaattisesti sen laitteen ja käyttöjärjestelmän mukaan, jolla sovellus näytetään. - ### Osiokohtainen yläpalkki Sovelluksesi jokaiselle osiolle voidaan määrittää oma yläpalkkinsa ja siihen liittyvä NavBar. ## Navigointitapa+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Muokattavat navigointitavat Valitse sovelluksesi navigointitapa tarjolla olevista malleista. Jokaista valikkoa voi muokata viimeistä yksityiskohtaa myöten rajattomilla yhdistelmillä, jotta jokaisesta projektista tulee ainutlaatuinen. - ### Swipe Keskeinen navigointitapa sovelluksille, joissa on paljon osioita. - ### Little Swipe Tarjoa pystysuuntainen navigointi, jossa jokaista sovelluksesi kohtaa kuvaa kuvake. - ### TabBar Klassikko: TabBar on navigointitapa, joka tarjoaa nopean pääsyn sovelluksesi tärkeimpiin osioihin. - ### Grid Grid näyttää sovelluksesi navigoinnin koko näytöllä, ja jokaista kohtaa kuvaa kuvake. - ### Slate Slate näyttää sovelluksesi navigoinnin koko näytöllä, ja jokaista kohtaa kuvaa teksti. - ### From scratch Content apps From Scratch -valikossa voit koodata navigointisi lisäämällä omaa HTML-koodiasi. - ### Näkymätön Content apps Jos et halua näyttää sovelluksessasi navigointivalikkoa, voit ottaa käyttöön näkymättömän navigointitavan. - ### Floating TabBar TabBar irrotettuna näytön reunasta, kelluen sisältösi päällä. Natiivisovelluksissa se on alareunassa, verkkosovelluksessa se näkyy palkkina yläpalkin alla. ## Navigoinnin muokkaus+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Header, Body & Footer Jokainen navigointivalikko koostuu 3 erillisestä osasta: Header, Body ja Footer, joista jokainen on täysin muokattavissa. Headerin ja Footerin näyttäminen ei ole pakollista. - ### Logon näyttäminen Näytä logosi navigointitapasi yläosassa lataamalla logosi tai lisäämällä tekstiä suoraan. - ### Linkki käyttäjäprofiiliin Lisää navigointitapaasi suora linkki käyttäjän profiiliin. Muokkaa tekstiä, kuvaketta ja linkin väriä. - ### Pikakuvakkeiden lisääminen Lisää navigointitapaasi pikakuvakkeita, joilla käyttäjät pääsevät helposti mihin tahansa sovelluksesi osioon tai ulkoiseen linkkiin tai voivat jopa tehdä toiminnon, kuten kirjautua ulos tai lähettää tekstiviestin tai sähköpostin. - ### Muokattavat erottimet Lisää navigointivalikkoosi erottimia ja muokkaa niiden väriä ja korkeutta pikseleinä. - ### Muokattava linkkialue Rakenna navigointivalikkosi lisäämällä linkkejä sovelluksesi osioihin. - ### Tekijänoikeus Lisää projektisi navigointivalikkoon tekijänoikeusalue. Valitse väri ja teksti sekä kirjasin ja kirjasinkoko. - ### Edistyneet design-asetukset GoodBarber mahdollistaa navigointivalikon ulkoasun edistyneen muokkaamisen. Kirjasin, värit, tasaus, kuvake, solun korkeus, otsikon lisääminen ja paljon muuta. - ### Valikon oletusnäkymä Valikoille Swipe, Little Swipe, Grid ja Slate valitset valikon oletustilan: aina piilossa tai aina näkyvissä, kun sovellus käynnistyy. ## Valikko+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 välivalikkomallia GoodBarber tarjoaa Valikko-osion, joka mahdollistaa monitasoisen navigoinnin sovelluksessasi. Voit valita 10 mallista. - ### Kuva jokaiselle kohteelle Valitse navigointi, jossa jokainen valikon kohta on korkearesoluutioinen kuva, jotta ulkoasu on täydellinen riippumatta siitä, minkä kokoisella näytöllä sovelluksesi näytetään. - ### Edistynyt ulkoasu Lisää kuviin liukuväri- tai sumennustehosteita. Säädä tekstin sijaintia ja logovalintaa valikkokohdissasi. - ### Automaattinen rakentaminen GoodBarber hoitaa asettelun automaattisesti valikkosi kohtien määrän mukaan, jotta näkymä pysyy aina houkuttelevana. - ### Omalla koodilla tehty valikko Kirjoita valikkosi kokonaan alusta HTML:llä, CSS:llä ja JavaScriptillä sisäänrakennetulla editorilla ja GoodBarber App API:lla, jotta navigointi ei muistuta mitään muuta. ## Design-aineistot+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Kuvakegalleria Hallintapaneelissasi on saatavilla yli 1000 kuvakkeen kokoelma, jonka designtiimimme on luonut varta vasten ja joka on järjestetty 3 eri sarjaan. - ### Muokattavat kuvakkeet Luo oma kuvakekokoelmasi lataamalla omia kuvakkeitasi tai kuviasi suoraan projektisi hallintapaneelista .png-muodossa, kooltaan 260 px x 260 px. - ### Ammattimaiset teemat GoodBarberin hallintapaneelissa on 25 ammattimaista teemaa, jotka asiantuntevat designerimme ovat tehneet. Mobile first -ajattelustamme ammentaen ne on suunniteltu mukautumaan täydellisesti jokaiseen laitteeseen, ne seuraavat nykyisiä suuntauksia ja ne ovat täysin muokattavissa. - ### Google Fonts -kirjasto GoodBarberissa on yli 400 Google Fonts -kirjasimen valikoima, jota voi käyttää suoraan hallintapaneelissa ilman ylimääräistä koodia. - ### Pexels-kirjasto GoodBarberin asiakkailla on pääsy Pexels-kuvapankkiin suoraan hallintapaneelista, ja siinä on yli 500 000 korkearesoluutioista kuvaa. - ### Edistynyt kuvahaku GoodBarberin hallintapaneelin Pexels-kirjastossa on edistynyt hakutoiminto, jolla lajittelet kuvia aiheen, avainsanan tai värin mukaan. - ### Omat kirjasimet Lataa omat kirjasimesi, .woff2 verkkosovellukselle ja .ttf tai .otf natiivisovelluksille, ja löydä ne hallintapaneelin jokaisesta kirjasinvalitsimesta Google Fonts -kirjaston rinnalta. - ### Google Material Icons Lisää sovellukseesi Google Material -kuvakesarja solid-, rounded-, contour- ja two-tone-tyyleissä ja käytä sitä kaikkialla, missä kuvakkeita on, myös navigointivalikossa. ## Osiot+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 30 erilaista osiotyyppiä GoodBarber tarjoaa 30 erilaista osiotyyppiä, joilla rakennat projektisi. - ### Edistyneet asetukset näytettäville tiedoille Valitse jokaiselle osiolle, mitkä tiedot näytetään, esimerkiksi päivämäärä tai kirjoittaja artikkeliosiossa. - ### Työkalupalkin muokkaus Content apps Valitse jokaiselle osiolle, mitkä toiminnot ovat käytettävissä työkalupalkissa: kommentit, jakaminen, tekstin koko ja kohteen merkitseminen kirjanmerkiksi. - ### Pääsy kommentteihin Content apps Anna käyttäjien päästä kommenttisivulle jokaisesta sisältönäkymästä. - ### Suora jakolinkki sosiaaliseen mediaan Lisää jokaiselle sisältösivulle suorat jakolinkit sosiaaliseen mediaan. - ### Sivun asteittainen lataus Selkeiden eleiden avulla käyttäjä saa osiossa esiin lisää sisältöä tarpeen mukaan. Näin näyttäminen on nopeampaa ja käyttökokemus parempi. - ### Yleinen kelluva painike Toimintopainike, joka kelluu sisältösi päällä ja pysyy käytettävissä koko sovelluksessa, valitsemallasi otsikolla. ## Valmis rakentamaan sovelluksesi? [Aloita maksutta](https://fi.goodbarber.com/create/)[Katso hinnat](https://fi.goodbarber.com/pricing/content/)