Litteä muotoilu: historia, edut ja käytännön sovellus. Tasaisen suunnittelun perusperiaatteet

Flat - design (tasainen muotoilu) on suosittu tyyli verkkosivustojen ja käyttöliittymien suunnittelussa sekä käyttöjärjestelmissä, erottuva piirre mikä on yksinkertaisuutta, hienostuneisuutta ja minimalismia. Litteä muotoilu alkoi saada suosiota vuonna 2010 skeuomorfismin vastakohtana.

Skeuomorfismi- fyysinen koriste tai design-elementti, joka on kopioitu toisen esineen muodosta, mutta valmistettu eri materiaaleista tai eri menetelmillä. Esimerkkejä ovat keramiikka, joka on koristeltu niitejäljitelmällä muistuttamaan samanlaisia ​​metalliruukkuja, tai tietokonekalenteri, joka jäljittelee ulkomuoto paperisen pöytäkalenterin kiinnityssivut (määritelmä alkaen Wikipedia).

Litteän tyylin yleistymistä suunnittelussa helpotti Windows 8 -käyttöjärjestelmän julkaisu Microsoftilta vuonna Metro tyyliin, sekä iOS 7, jossa Apple yhtiö valitsee myös litteän tyylin. Tämän jälkeen alkaa todellinen litteän suunnittelun aikakausi. Pian myös suuret yritykset siirtyvät Flat-designiin hakupalvelut ja sovellukset - Google, Youtube, ilmestyy monia sivustoja, jotka käyttävät suunnittelussaan litteän tyylin periaatteita. SISÄÄN viime vuodet flat style design on maailman johtava verkkosivujen suunnittelutrendi.

Litteän suunnittelun edut

1. Käytännöllisyys- litteän suunnittelun avulla voit minimoida tyylien, skriptien ja animaatioiden määrän, mikä mahdollistaa sivuston latautumisen nopeammin.
2. Helppo mukauttaa- Litteä muotoilu on riittävän helppo mukauttaa eri näytön resoluutioihin.
3. Helppokäyttöisyys- yksinkertaistetun tyylin ansiosta käyttäjien on helpompi havaita sivustolla oleva tieto.
4. kauneus- ulkoinen puolueettomuus ja yksinkertaisia ​​malleja voit keskittyä muotoiluun, joka todella tarttuu sinuun.

5 tasaisen verkkosivuston suunnittelun periaatetta

Litteä muotoilu ei ole ollenkaan tylsää, kuten se saattaa vaikuttaa ensi silmäyksellä. Puhtautensa ja hienostuneisuutensa ansiosta suunnitteluratkaisut voivat olla tyylikkäitä ja kauniita ilman turhaa melua, jolloin voit keskittyä tuotteeseen tai palveluun.

1 - 2D-objektien käyttäminen

Litteä suunnittelu sulkee pois elementtien käytön, jotka antavat objektille syvyyttä ja volyymia: varjot, liukuvärit, kohokohdat, pintakuviot, heijastukset, animaatiot. Kun objekti kuvataan, vain sen ääriviivat näytetään.

2 - kuvakkeet ja yksinkertaiset esineet

Käyttämällä litteitä kuvakkeita ja yksitavuisia muotoja, joissa on selkeät ääriviivat ja sama väri, voit yksinkertaistaa suunnittelua mahdollisimman paljon ja tehdä siitä kevyemmän. Säätimet tulevat käyttäjälle intuitiivisiksi ja rohkaisevat vuorovaikutukseen.

3 - Yksinkertaiset fontit suunnittelutyylillä

Litteässä suunnittelussa kiinnitetään paljon huomiota typografiaan ja fonteihin. Kursivointia ei käytetä tässä; fontti sopii harmonisesti sivuston suunnitteluun, ei vain sisällössä, vaan myös navigoinnissa. Jopa sivuston kirjasintyypeissä minimalistista tyyliä suositellaan.

4 - Värien peli

Litteä muotoilu sisältää useita päävärejä, jotka sulkevat pois käytön sujuvat siirtymät ja kaltevuudet, mutta ne voivat olla kirkkaita ja kontrastisia keskenään.

5 - Minimalismi

Litteässä suunnittelussa käytetään elementtien visualisointia, jossa käytetään koko näytön leveyttä ja samalla minimoidaan informaatio.

On olemassa sellainen asia kuin melkein litteä muotoilu. Tämä on yksi käytetyistä litteistä suunnittelukonsepteista yksinkertaisia ​​elementtejä ja kaksiulotteinen avaruus. Esimerkki tästä voisi olla korkealaatuinen valokuva, joka hämärtyy tausta tai tummunut. Tämän avulla voit luoda kohteen syvyyttä ja perspektiiviä.

Esimerkkejä litteästä suunnittelusta

Internetistä, mukaan lukien Valko-Venäjän segmentti, löydät monia esimerkkejä litteän suunnittelun verkkosivustojen kehittämisestä eri aiheissa, mukaan lukien uutisresurssit, portaalit ja jopa verkkokaupat.

"Litteän suunnittelun" vallankumous on jatkanut vauhtiaan sen jälkeen, kun se esiteltiin alustalla Windows Puhelin vuonna 2010. Ei ole vaikea ymmärtää miksi: tämän suunnittelun käyttöliittymä vaikuttaa intuitiivisemmalta ja sopii siihen hyvin mukautuvat elementit, modernit puitteet ja oikein toteutettuina se näyttää houkuttelevalta.
Litteä muotoilu Alkoi olla vastapainona kaikkialla esiintyvälle skeuomorfiselle tyylille, mutta siitä on sittemmin tullut paljon enemmän kuin vain "vaihtoehto B".

Aluksi flat oli yksinomaan kaksiulotteinen ja keskittyi täysin minimalismiin. Moderni flat 2.o käyttää varjoja, kaltevuksia ja muita elementtejä saadakseen sen näyttämään "melkein tasaiselta".

5 ominaisia ​​komponentteja moderni litteä muotoilu:

1. Pitkät varjot
Pitkät varjot lisäävät kuviin syvyyttä ja ulottuvuutta ilman, että sinun on uhrattava minimalistisia kuvakkeen yksityiskohtia, jotka tekevät käyttöliittymästä houkuttelevan.

2. Dynaamiset värit
Harvan visuaalisen ilmeen täydentäminen on helppoa energisillä väreillä, erityisesti vaaleilla sävyillä.
Eri värillinen tausta toisin kuin pohjaväri elementit tekevät sivusta, jossa on kaakeloitu ruokalista, elävämpää.
Flat UI Colors -verkkosivusto sisältää tehokkaimmat tasaisten värimallit.

3. Yksinkertainen typografia
Fontin valinta flatissa perustuu yhteen kriteeriin: luettavuus. Tyypillisesti käytetään sans serif -fontteja, joiden viivanleveys on vakio.

4. Läpinäkyvä painike
Yksi trendikkäimmistä elementeistä moderni web-suunnittelu. Syynä on, että se ei herätä liikaa huomiota, mutta on selvästi tunnistettavissa painikkeeksi.

5. Minimalismi
Tasaisuus ja minimalismi kulkevat käsi kädessä samoilla periaatteilla: yksinkertaisuus ja sisältökeskeisyys.
Saattaa tuntua, että litteän suunnittelun käyttö on yleinen lähtö, mutta minimalismia on vaikea toteuttaa: mitä vähemmän työelementtejä, sitä enemmän huomiota ne vaativat.

Huolimatta siitä, kuinka upealta litteä muotoilu näyttää, ei ole takeita, että se toimii sivustossasi. Tutustu sen tärkeimpiin etuihin nähdäksesi, kannattaako globaalia uudelleensuunnittelua suunnitella.

Edut:
käytetään reagoivassa käyttöliittymässä;
yksinkertaistaa käyttäjän navigointia;
selkeä rakenne ja kaavio visuaalisia korostaa sivun sisäistä logiikkaa;
nopea lataus sivut grafiikan yksinkertaisuuden vuoksi;
Tuttu typografia parantaa luettavuutta.

Litteässä suunnittelussa on kyse yksinkertaisuudesta ja minimalismista, mikä toisaalta vaikeuttaa visuaalisesti monimutkaisten viestien välittämistä. Siksi ennen kuin rynnätät päättömästi käyttöliittymän yksinkertaistamiseen, sinun tulee harkita huolellisesti sivuston ja käyttäjän välistä vuorovaikutusta.

Päällä Verkkopohja Suunnittelukirja trendeistä.

Litteä muotoilu on tulevien vuosien suunnittelun avainsuunta, joten kutsumme sinut tutustumaan siihen paremmin ja oppimaan sen perustan 5 perusperiaatetta.

Johdatus litteään suunnitteluun

Venäjällä litteä muotoilu on käännetty "litteäksi suunnitteluksi", ja siitä tuli sen jälkeen ehdoton suosikki Applen esitykset iOS-käyttöjärjestelmä. Painopiste oli minimalistisessa käytettävyyssuunnittelussa. Pääpaino on käyttömukavuudessa. Tämä on selvä protesti "squeformismia" (esineiden visualisointia todellisuudessa) vastaan. Valinta osui yksinkertaisempiin ja samalla yksinkertaisempiin esteettisiin ratkaisuihin. Realistisiin visualisointeihin kyllästyneet käyttäjät tervehtivät tätä suuntaa ilolla, ja yhä useammat verkkoprojektit siirtyvät tähän muotoon.

Haluaisin huomauttaa, että "tasainen" ei tarkoita "tylsää". Ratkaisut litteä muotoilu voivat olla kauniita, ne ovat hienostuneempia, puhtaampia, vapautettuja kaiken tarpeettomuudesta ja muuttuvat "rauhan saareksi". Lopulta he tekevät sisällön ymmärrettäväksi. Jäljelle jää vain perusperiaatteet oppiminen, jotta niitä voidaan soveltaa käytännössä.

”Litteä” muotoilu ei pyri välittämään volyymia, vaan se perustuu kaksiulotteiseen visualisointiin. Tämä tarkoittaa, että et näe varjoja, heijastuksia tai kohokohtia tekstuureilla (poikkeuksena pitkiä varjoja). Vain ääriviivojen siirto, ei mitään muuta.

Suunnittelussa on suositeltavaa käyttää yksitavuisia hahmoja sekä seurata ääriviivojen selkeyttä, jonka tarkoituksena on korostaa keveyttä ja painottomuutta. Lisäksi tällaiset lakoniset elementit jäljittelevät anturia hyvin, mikä synnyttää halun olla vuorovaikutuksessa kohteen kanssa (kutsu painaa, koskettaa). Elementtien yksinkertaisuus ei kuitenkaan vastaa koko suunnittelun yksinkertaisuutta - tämä koskee vain ääriviivoja. Tämän seurauksena kaikki, mitä käyttäjä näkee, on hänelle selvää ja hän voi käyttää sitä helposti.

Litteä muotoilu vaatii äärimmäistä varovaisuutta fonttien kanssa työskenneltäessä. Toisin sanoen niiden luonteen on täydennettävä suunnittelujärjestelmää ilman, että se on ristiriidassa sen kanssa. Lisäksi litteässä suunnittelussa fontti on myös keskeinen navigointielementti.

Ei vain kirjasin, vaan myös väri on olennainen osa "litteää" suunnittelua. Suurin osa paleteista perustuu 2-3 väriin, vaikka tietysti poikkeuksiakin on. Yleensä valitaan rikkaat ja kirkkaat, mutta samalla puhtaat värit. Kuten todettiin, kaltevuuksia tai tarpeettomia siirtymiä ei ole.

Litteä muotoilu on silmiinpistävä esimerkki sellaisesta globaalista trendistä kuin minimalismi. Suunnittelijat kieltäytyvät tarpeettomista kelloista ja pillistä, siirtyvät pois monimutkaisista ja implisiittisistä lähestymistavoista visualisointiin, mikä kantaa hedelmää käyttäjän toiminnan muodossa.

Tasainen vai melkein tasainen? Etsimme kompromissia!

Lopuksi haluaisin huomauttaa, että nykyään tasaisen ja ei-litteän suunnittelun välillä on synergiaa. Puhumme "melkein litteästä" suunnittelusta. Tämä on kuvatun konseptin yleisin sovellus, kun yhdessä yksinkertaisten ja ytimekkäiden elementtien ja kaksiulotteisen tilan kanssa suunnittelijat käyttävät 1-2 tekniikkaa syvyyteen ja perspektiiviin.

Myös vuoden 2017 trendi oli Semi Flat Design - puolitasainen muotoilu. Vaikutettu Materiaalisuunnittelu, siitä tuli hieman tilallisempi. Näkyviin tulee vaaleita varjoja, jotka saavat mallin näyttämään puolitasomaiselta. Tasainen suunnittelu on edelleen ajankohtainen varjojen vuoksi, se on syventynyt ja monimutkaisempi, mutta peruskäsitettä ei rikota.

Joka kehittyy mobiilisovelluksia ja verkkosivustoja, kirjoitti meille kolumni ja teki ennätyksen tasaisen ja materiaalisuunnittelun suhteen.

Tekijä: suurelta osin, ero litteän suunnittelun ja materiaalisuunnittelun välillä on hienovarainen. Henkilölle, jolla ei ole syvällistä tietoa graafisesta suunnittelusta, he voivat todellakin näyttää hyvin samanlaisilta. Tässä artikkelissa yritän "valoittaa" joitain niiden välisiä eroja. Saat lisätietoa, joka on niin tarpeellista, jotta et vahingossa vahingoita suunnittelijan herkkää luonnetta.

Hieman historiaa

Ennen kuin alamme puhua eroista kahden suosituimman muotoilutrendin välillä, selvitetään, mistä ne tulevat. On olemassa mielipide, että materiaalisuunnittelu luodaan tasaisen pohjalta. Mistä litteä muotoilu sitten tuli?

Skeuomorfismi

Mitä tulee käyttöliittymään ja web-suunnitteluun, skeuomorfismin käsite viittaa lähestymistapaan, jonka pääideana on jäljitelmä. Menemättä yksityiskohtiin, muista vain Applen käyttöliittymät ennen iOS 7:n tuloa heidän " realistisia tekstuureja, valaistus ja näyttäviä tehosteita."

Yritys saada digitaaliset esineet näyttämään digitaalisilta vastineilta. todellista maailmaa perusteltuna tarpeella helpottaa käyttäjän vuorovaikutusta laitteen kanssa. Itse asiassa juuri tästä syystä kaikki rajapinnat, joissa oli realistisia tekstuureja, hallitsivat digitaalinen maailma monta vuotta. Skeuomorfinen suunnittelu tekee hienoa työtä auttaessaan käyttäjiä siirtymään saumattomasti todellisesta maailmasta digitaaliseen.

Kuitenkin kukoistavan mobiiliteknologiat vähitellen on keskityttävä ensisijaisesti mukavuuteen ja helppokäyttöisyyteen. Samaa mieltä, tällä alalla on luotava mobiiliratkaisuja, saatavilla erilaisia ​​laitteita, lisääntyy merkittävästi. Ja juuri tällä hetkellä yksinkertaisuudesta tulee uusi suunnittelustandardi.

Huomautus: Älä missään tapauksessa ajattele, että skeuomorfismi on kokonaan kadonnut. Sitä käytetään laajalti peleissä, joissa on tarpeen luoda realistinen maailma ja auttaa pelaajia tuntemaan hahmonsa voidakseen uppoutua syvästi peliprosessiin.

Litteä muotoilu

Tämä tyyli on täysin vailla kolmiulotteisia esineitä. Karkeasti sanottuna litteästä suunnittelusta puuttuu sellaisia ​​tyylielementtejä kuin varjot, tekstuurit, kaltevuudet, mutta siinä kiinnitetään huomiota kirjasimien ja värien sekä ikonien leikkiin. Mutta miksi tämä kaikki oli välttämätöntä? Vastaus on yksinkertainen.

Ensinnäkin litteä muotoilu vähentää merkittävästi sivun latausaikaa. "Raskaiden" skeuomorfisten yksityiskohtien puuttuminen (ajattele: kerrokset, serif-fontit, gradientit) tekee litteistä suunnitteluelementeistä "kevyempiä", mikä puolestaan ​​nopeuttaa merkittävästi latausaikoja. Lisäksi litteät elementit näyttävät yhtä houkuttelevilta molemmilla näytöillä. korkea resoluutio, ja matalalla.

Toiseksi, yksinkertaisia ​​kuvia voi välittää ideasi käyttäjille nopeammin kuin yksityiskohtaiset kuvat: ne ovat kaavamaisia ​​ja siksi melko helppoja ymmärtää.

Ja tietysti litteät kuvakkeet suhteellisen yksinkertaisella fontilla voi ohjata käyttäjien huomion todella tärkeään sisältöön.

Nykyään litteä muotoilu on saanut ansaittua tunnustusta, mutta siinä on edelleen omat ongelmansa. Selkein esimerkki tällaisista ongelmista oli Windows-versio 8 Microsoftilta. Tätä käyttöjärjestelmää pidetään litteän suunnittelun edelläkävijänä ja se tukee Metro-suunnittelun konseptia. Ongelmiin johti se, että yritys piti tarpeellisena kiinnittää enemmän huomiota typografiaan kuin itse grafiikkaan.

NN Groupin suorittaman Windows 8:n käytettävyystestin tulokset osoittivat, että käyttäjillä oli vaikeuksia erottaa napsautettavat objektit ei-napsautettavista. Käyttäjät valittivat, että staattisilta näyttäneet esineet olivat todella napsautettavia. Tämän seurauksena yrityksen päätehtävä - auttaa käyttäjiä tulkitsemaan järjestelmää oikein - epäonnistui.

Toinen yritys, joka usein liitetään litteään muotoiluun, on Apple. He siirtyivät pois skeuomorfisista suunnitteluelementeistä liikkuvassa leikkaussalissa iOS-järjestelmä 7, julkaistu vuonna 2013. Tällä kertaa siirtymä otettiin hieman paremmin vastaan, mikä johtui pääasiassa siitä, että yritys ei yrittänyt päivittää konseptia kokonaan käyttöliittymä, mutta lisäsi vain muutamia muutoksia kohti litteää muotoilua. Tämän ansiosta käyttäjät voivat käyttää tuotetta luottaen aiempaan kokemukseensa käyttöjärjestelmistä ja verkkosivustoista.

Materiaalisuunnittelu

Tehdään nyt selväksi: materiaalisuunnittelu on enemmän merkkituote kuin spontaani muotoilutrendi, joka on saanut laajan hyväksynnän. Tämä erottaa sen pääasiassa litteästä muotoilustaan.

Kutsumalla suunnittelumateriaalia "brändätyksi" tarkoitan, että siinä on joukko selkeästi määriteltyjä suosituksia ja periaatteita, joita jokainen itseään kunnioittava suunnittelija noudattaa. On aivan selvää, miksi Google esitteli materiaalisuunnittelunsa: suunnittelua oli yhtenäistettävä, jotta sovellukset näyttäisivät samalta missä tahansa monista Android-laitteista.

Vaikka litteä muotoilu on melko toimiva, sitä pidetään edelleen vaikeasti ymmärrettävänä. Totuus on, että litteät esineet näytöllä voivat hämmentää käyttäjiä (erityisesti niitä, joilla ei ole kokemusta mobiili- ja verkkoliitäntöjen käytöstä). Siksi materiaalisuunnittelu pyrkii tuomaan takaisin skeuomorfismin elementtejä, mutta suuresti yksinkertaistetussa muodossa. Kuvat näyttävät litteiltä, ​​varsinkin kun me puhumme väreistä, mutta ovat silti moniulotteisia Z-akselin läsnäolon vuoksi.

Toisin sanoen materiaalisuunnittelua voidaan kutsua parannelluksi versioksi litteästä suunnittelusta, jossa on skeuomorfismin elementtejä - animaatiota, varjoja ja kerroksia. Näin voit tehdä tuotteesta intuitiivisemman navigoinnin kannalta ja välttää tarpeetonta monimutkaisuutta yleisessä tyylissä.

Litteän suunnittelun plussat ja miinukset

Jätetään taakseen tyylien evoluution historia ja siirrytään johonkin merkittävämpään - luetellaan vahvoja ja heikkoja puolia litteä muotoilu.

• Minimalismi ja tyyli
• Intuitio. Sinun on helpompi välittää ideasi käyttäjille.
• Säästää aikaa ja resursseja. Sivut latautuvat paljon nopeammin pienemmällä kaistanleveyden kulutuksella.
• Keskity sisältöön. Käyttöliittymä ei sisällä tarpeettomia yksityiskohtia, jotka voivat viedä huomion pois todella arvokkaasta tiedosta.
• Näyttää yhtä hyvältä päällä erilaisia ​​laitteita, oli se sitten tietokoneen tai älypuhelimen selain.
• Nopeuttaa verkkosivuston tai sovelluksen suunnitteluprosessia poistamalla tarpeettomat suunnittelun kosketukset.

• Minimalistinen tyyli.
• Melko intuitiivinen intuitiivisella tasolla. Materiaalisuunnittelu on yhtä helppo havaita kuin kokeneita käyttäjiä, ja aloittelijoille.
• Kohtalainen skeuomorfismi. Kaikki näyttää realistisemmalta Z-akselin käytön ansiosta (ainutlaatuinen Google-konsepti).
• On olemassa joukko käsikirjoja, joita päivitetään jatkuvasti. Siksi jokainen suunnittelija voi aina kääntyä heidän puoleensa, jos työprosessin aikana ilmenee vaikeuksia.
• Animaatioita verkkoratkaisuissa suositellaan. Sinun ei tarvitse muistuttaa sinua siitä, kuinka paljon ihmiset rakastavat liikkumista. Lisäksi animaation avulla voit tehdä käyttöliittymästä selkeämmän ja intuitiivisemman.

• Sillä on omistaja (Google-yritys). Siksi kaikki kysymykset ja parannusehdotukset tulee osoittaa omistajalle.
• Z-akselin vuoksi suunnitteluprosessi saattaa kestää kauemmin.
• Animaatioelementit vaativat enemmän resursseja.
• Ohjeiden tiukka noudattaminen voi rajoittaa mallin omaperäisyyttä.

Tee yhteenveto

Itse asiassa yhden tarkastelun kohteena olevista suunnittelutavoista ei pitäisi katsoa olevan selkeä etu toiseen verrattuna, koska litteät ja materiaalityylit kulkevat rinnakkain. Ne ovat molemmat uskomattoman suosittuja, ja molemmissa ei ole liiallista realismia. Materiaalisuunnittelu on litteän suunnittelun seuraaja, kun taas litteä muotoilu itsessään oli reaktio liian painaviin ja realistisiin ratkaisuihin. Materiaalisuunnittelu lisäsi jotain, mistä litteä design on aina pyrkinyt etääntymään - pientä skeuomorfismia. Vaikka yksi asia on aina erilainen näiden lähestymistapojen välillä: materiaalisuunnittelu on patentoitu tuote Google, ja litteä muotoilu on tulosta useiden suunnittelukäytäntöjen yhdistämisestä, joka tähtää ensisijaisesti yleiseen yksinkertaisuuteen.

Itse asiassa litteä muotoilu on kehittynyt paljon viime vuosina, täysin "litteästä" tyylistä "puolitasaiseen" tyyliin. Se mahdollistaa nyt tasojen ja hienovaraisten varjojen käytön, jotta kohteet voivat näyttää syvemmältä kuin ne ennen näkyivät. Joten, sinä ja minä olemme onnellisia litteän suunnittelun 2.0 aikalaisia.

Lopuksi, mikään ei estä sinua yrittämästä yhdistää näitä kahta lähestymistapaa luodaksesi todella toimivan ja käyttäjäystävällisen tuotteen. Ota siis inspiraatiota taso- ja materiaalisuunnitteluguruilta ja ryhdy töihin!

Tässä artikkelissa kerron sinulle litteästä suunnittelusta. Olet luultavasti jo kuullut tästä jotain, sillä flatista on tullut yksi verkon johtavista trendeistä viime vuosien aikana.

Tänään tarkastelemme, mitä litteä muotoilu on, miten se syntyi ja mitä tarvitset puhtaan, kirkkaan ja reagoivan suunnittelun luomiseen.

voit löytää hyviä esimerkkejä litteä suunnittelu verkkosivuilla http://market.envato.com/. Saatavilla on paljon asetteluja, kuvakkeita ja malleja selkeä ymmärrys siitä, miltä moderni muotoilu näyttää .

1. Mikä on litteä muotoilu?

Litteä muotoilu - moderni tyyli käyttöliittymä sekä graafinen suunnittelu, jolle on ominaista minimalismi. Litteälle suunnittelulle on ominaista elementtien vähimmäismäärä ja erilaisten tekstuurin, varjon ja valon vaikutusten puuttuminen, esimerkiksi: sekavärit, liukuvärit, kohokohdat ja niin edelleen.

Flat vastustaa skeuomorfismia( Skeuomorfismi on suunnitteluperiaate, kun yhdelle tuotteelle annetaan toisen ulkonäkö, ts. kun erilaisia ​​käyttöliittymäelementtejä kopioidaan todellisista objekteista - n. käännös.) , sekä rikas muotoilu On kuitenkin syytä sanoa, että litteä muotoilu ei ole ollenkaan niin yksinkertaista kuin miltä näyttää ensi silmäyksellä. Se sisältää joitain skeuomorfismin piirteitä, mutta puhumme tästä hieman myöhemmin.

Yleensä litteä auttaa käyttäjää keskittymään sisältöön ilman, että visuaalit häiritsevät häntä. Litteä muotoilu korostaa elementtien yksinkertaisuutta tehden samalla käyttöliittymästä reagoivamman, miellyttävämmän ja helppokäyttöisemmän.

2. Hieman historiaa

Litteä muotoilu, kuten tiedät, oli olemassa kauan ennen kuin siitä tuli maailmanlaajuinen trendi verkossa. Litteä muotoilu oli melko suosittua 80-luvulla, koska tekniikka ei tuolloin ollut vielä tarpeeksi kehittynyt tukemaan monimutkaisia ​​efektejä, tekstuureja ja varjoja. Suunnittelussa pyrittiin kuitenkin jo silloin skeufomorfismiin, ja käyttöliittymäelementeistä yritettiin tehdä mahdollisimman realistisia.

Litteä muotoilu, siinä muodossa kuin me sen nyt näemme, alkoi saada suosiota Microsoftin alkaessa valmistaa tuotteita niin kutsuttuun metrotyyliin. Metro on Microsoftin käyttöliittymäsuunnittelu, joka on hämmästyttävä tyylillään ja yksinkertaisuudellaan.

Vuonna 2010 Microsoft julkaisi Windows Phone 7:n, jossa käytettiin litteää muotoilua terävillä reunoilla ja yksinkertaisella grafiikalla, jotka perittiin yhdestä sen aikaisemmista tuotteista. Microsoft (Zune). Myöhemmin menestyksen innoittamana Microsoft julkaisi käyttöjärjestelmän Windows-järjestelmä 8, perustuu samaan tasainen tyyli Metro.

Loppujen lopuksi litteä muotoilu saavutti suosionsa huippunsa vuonna 2013, kun Apple julkaisi iOS 7 näyttää perusteellisesti uusi muotoilu täysin uudelleen suunnitelluilla käyttöliittymäelementeillä, mukaan lukien kuvakkeet ja fontit. Apple yhtiö luotu käyttöliittymän ja ikonien suunnittelun visuaaliset periaatteet .

Pian sen jälkeen myös Google alkoi käyttää litteää tyyliä sovelluksissaan ja verkkosivuillaan kutsuen sitä Materiaalisuunnittelu. Googlella on jopa kokonainen tälle tyylille omistettu osio, joka sisältää kuvauksen web-suunnittelun tavoitteista, sen periaatteista ja ohjeet erilaisten suunnitteluobjektien luomiseen: kuvakkeet, asettelut ja niin edelleen.

Siitä lähtien flatista on tullut web-suunnittelun avaintrendi, mikä tekee verkkosivuista, sovelluksista ja käyttöliittymäelementeistä tyylikkäitä, siistejä ja tyylikkäitä.

Siten yrityksiltä löytyy kolme globaalia esimerkkiä litteästä suunnittelusta, joita ilman on vaikea kuvitella moderni maailma tekniikat:

Microsoftin metrosuunnittelu

Apple iOS 7 -suunnittelu

Googlen materiaalisuunnittelu

3. Muista olla puhdas

Tasaista suunnittelua kutsutaan ilmeisesti "litteäksi", koska siinä ei ole kolmiulotteisia elementtejä ja realistisia tehosteita, kuten liukuvärejä, tekstuureja, kohokohtia, puolisävyjä ja varjoja. Muista, että litteä tyyli on kaksiulotteinen (litteä) tapa kuvata esineitä.

Lisäksi litteässä suunnittelussa esineet on kuvattu hyvin yksinkertaistetusti ja tyyliteltysti.

Ja joskus käytetään jopa vain kohteen siluettia tai ääriviivoja, ts. juuri sen verran, että esine on tunnistettavissa, mutta ei ylikuormita sitä pienillä yksityiskohdilla.

Minimalistista on tullut nykyään globaali trendi: muotojen yksinkertaisuus ja terävien reunojen käyttö luovat siistin ja miellyttävän designin. Yksinkertaiset lomakkeet ymmärrettävämpi ja helpompi ymmärtää. Tämä pitää suunnittelun minimalistisena ja puhtaana antamatta sille kiireistä ja sotkuista ilmettä.

4. Tuo se täydellisyyteen

Tiedä, että litteiden kuvakkeiden ja käyttöliittymäelementtien luomisessa sinun on saatava ne näyttämään teräviltä, ​​siisteiltä ja pikselin täydellisiltä, ​​ts. niin paljon kuin mahdollista. Lisäksi tämä koskee sekä rasteri- että vektorigrafiikkaa.

Ohjelman kanssa Adobe Photoshop kaikki on selvää täällä: se toimii rasterigrafiikka, joka on pikselipohjainen.

Mitä tulee ohjelmaan Adobe Illustrator, sitten se käyttää vektorigrafiikkaa, joka koostuu kaareista ja viivoista, joita kutsutaan vektoreiksi ja jotka määritetään matemaattisilla kaavoilla.

Olipa kerran, Adobe Illustrator ei ollut kovinkaan hyvä kätevä ohjelma luodaksesi pikselin täydellistä grafiikkaa. Hyviä uutisia onko tuo uusimmat versiot Illustrator terästä loistava työkalu luoda hyvää grafiikkaa.

Minun on sanottava se Vektorigrafiikka Pohjimmiltaan työskennellään yksinkertaisten, tasaisten muotojen, puhtaiden värien ja ruudukoiden kanssa. Adobe Illustratorin asetukset ovat erittäin joustavat ja voit mukauttaa ruudukon tarpeisiisi, kohdistaa kohteita ja käyttää Erilaisia ​​tyyppejä napsahtaa. Näin on helpompi luoda täydellinen muotoilu, joka näyttää puhtaalta ja tyylikkäältä kaikilla näytöillä. Jos haluat oppia luomaan täydellistä grafiikkaa, sinun tulee lukea artikkeli: Kuinka luoda pikselin täydellistä taidetta Adobe Illustratorilla .

5. Väri

Yksi litteän suunnittelun erityispiirteistä varjojen ohella on värien käyttö. Suurin osa väreistä, joita litteä design käyttää elementeissään, koostuu vain muutamasta perusväristä.

Litteän suunnittelun värit ovat kirkkaita, täyteläisiä ja täyteläisiä.Tasainen värimaailma ei rajoitu muutamaan erikoisväriin. Se sisältää monia sävyjä, ja niiden valinta riippuu vain siitä, mitä kuvaat, olipa kyseessä makeisten kuvakkeet tai retrotyyliset esineet hienostuneessa retropaletissa.

Oletetaan, että olet käyttöliittymäsuunnittelija ja tunnet hyvin väripaletteja, kokeilet väripaneelia Photoshop ohjelmat ja Illusstartor, sekoittaen värejä haluamallasi tavalla. Tämä prosessi on kuitenkin melko monimutkainen ja vaatii hyvää intuitiota, kokemusta ja taitoja. Täältä löydät työkaluja, joiden avulla voit luoda oman väripaletin.

Jotkut niistä soveltuvat kaikenlaiseen suunnitteluun ja kuvitukseen, eivät vain litteään muotoiluun. Esimerkiksi Adobe Color CC, joka tunnetaan paremmin nimellä Cooler. Nykyään siihen on pääsy sekä verkkosivuston että suoraan Adobe-tuotteiden kautta. Cooler on erittäin joustava työkalu, jonka avulla voit joko luoda oman väripaletin tai valita mukautetun paletin kirjastosta.

Toinen yksinkertainen ja kätevä väripalettigeneraattori on Coolors. Paina vain välilyöntiä ja ohjelma luo väripaletin, voit säätää värejä, on myös vientitoiminto.

On olemassa useita muita samankaltaisia ​​palveluita mukautetuilla paleteilla, joista voi olla hyötyä. On kuitenkin olemassa yksi Designmodon FlatUIColors.com -sivusto, joka on luonut joukon "tasaisia" värejä, erittäin kätevä työhön. Tästä sivustosta on tullut erittäin suosittu suunnittelijoiden keskuudessa, jotka etsivät hyviä väriratkaisuja täydelliseen suunnitteluun. Kokeile!

Löydät myös suuremman valikoiman värejä ja paletteja Googlen materiaalisuunnittelun opas.

6. Pitkät varjot

Kuten edellä mainittiin, litteälle suunnittelulle on ominaista yksinkertaisuus ja paljon vapaata tilaa - minkä vuoksi litteä muotoilu kieltää tehosteiden käytön. On kuitenkin yksi vaikutus, joka on tyypillinen tasaiselle suunnittelulle. Tästä vaikutuksesta on tullut trendi ja ominaispiirre flata.

Puhumme nyt aiheesta pitkät varjot. Heillä on joitain tyypillisiä ominaisuuksia, mikä tekee tämän vaikutuksen tunnistettavaksi, nimittäin: 45 asteen kallistus ja iso koko(Varjo voi olla useita kertoja pidempi kuin itse kohde. Tämän seurauksena pitkät varjot antavat tasaiselle syvyyden vaikutelman.

Tämä vaikutus tekee kohteesta kolmiulotteisemman, mutta samalla pitää sen tasaisen suunnittelun yhteydessä.

7. Työskentely fonttien kanssa

Typografialla on suuri rooli litteässä suunnittelussa. Usein tekstistä tulee sävellyksen pääelementti.

Litteissä malleissa käytetään yleensä yksinkertaisia ​​kirjasintyylejä, mikä tekee koko suunnittelusta selkeän ja luettavan. Löydät monia ilmaiset fontit Adobe Typekitissä, jos käytät Adoben tuotteita. Löydät myös paljon hyviä ilmaisia ​​fontteja Font Squirrelista. Mutta älä unohda lukea lisenssiä, jos aiot käyttää kirjasinta kaupallisiin tarkoituksiin.

Useimmiten litteässä suunnittelussa on tapana käyttää isot kirjaimet ja kontrastivärit, tämä tekee tekstistä luettavamman.

Käytä fontteja säästeliäästi ja muista, että niiden tulisi täydentää ja täydentää ulkoasua sen sijaan, että ne näyttävät erillisinä elementteinä. Tämä ei tarkoita, että et voi käyttää serif- tai käsinkirjoitettuja monimutkaisia ​​fontteja. Muista vain olla minimaalinen ja pitää kaikki tasapainossa. Flat käyttää kuitenkin usein sans-serif-fontteja, koska ne näyttävät tiukemmilta ja siistemmiltä.

8. Litteän suunnittelun edut ja haitat

Vaikka litteästä suunnittelusta on tullut niin suosittu monien etujensa vuoksi, on silti joitain haittoja, joita suunnittelijat kohtaavat käyttäessään tätä tyyliä. Katsotaanpa hyviä ja huonoja puolia.

Plussat

Suosio

Litteästä suunnittelusta on tullut trendi, joka saa yhä enemmän myönteisiä arvioita suunnittelijoilta ja web-suunnittelijoilta, eikä se näytä menettävän asemaansa ollenkaan. Päinvastoin, se leviää yhä enemmän, saa uusia muotoja ja piirteitä ja tulee yhä luovemmaksi.

Yksinkertaisuus

Litteä muotoilu on yksinkertainen, minimalistinen ja puhdas. Flat on the web auttaa käyttäjiä keskittymään sisältöön visuaalisten kuvien häiritsemisen sijaan. Tämä toimii myös mobiilisovellusten käyttöliittymissä: puhdas muotoilu suurilla painikkeilla hyödyntää mobiililaitteet täydellinen.

Kirkkaus

Väri on toinen hieno plus litteässä suunnittelussa. Kirkkaat ja täyteläiset värit näyttävät houkuttelevilta ja puhtailta, ja liukuvärien puute tekee suunnittelusta tyylikkään. Lisäksi tällaiset puhtaat värit tekevät siitä positiivisemman ja näyttävämmän, tasainen muotoilu luo oikean tunnelman.

Vikoja

Asunnossa on paljon enemmän etuja, mutta mikään muotoilu ei ole täydellinen, emmekä voi idealisoida sitä. Tässä on joitain litteän suunnittelun haittoja, jotka meidän on mainittava:

Vastaamattomuus

Joskus poissaolo tärkeitä yksityiskohtia tai erikoistehosteet tekee käyttäjäystävällisen käyttöliittymän luomisesta vaikeaa ja tekee yleensä koko suunnittelusta reagoimattoman. Kaikki käyttäjät eivät viihdy flat kanssa, koska voi olla vaikeaa löytää verkkosivulta elementtejä, joita sinun on napsautettava tai napautettava näyttöä kännykkä koska ne eivät ole vuorovaikutteisia.

Ongelmia typografian kanssa

Kuten aiemmin mainittiin, kaikki fontit eivät voi olla sopivia litteään suunnitteluun. Joskus niin rikas fontti terävillä reunoilla näyttää todella tasapainoiselta ja tyylikkäältä. Jos fontti valitaan kuitenkin väärin, se voi pilata koko suunnittelun. Sinulla pitäisi olla todella hyvä fiilis siitä, mitkä fontit sopivat litteille ja mitkä eivät. Kokemuksen puute tekee fontin valinnasta erittäin vaikeaa.

Heikko visuaalinen ilme

Tehosteiden, värien ja fonttien käytön rajoitusten vuoksi litteät kuviot voivat näyttää liian yksinkertaisilta ja kylmiltä. Sen minimalismi voi olla myös sen suurin haittapuoli - muut litteät mallit näyttävät lopulta täsmälleen samalta kuin sinun. Joten on erittäin vaikeaa saada kuvakkeitasi tai verkkosivujasi näyttämään erilaisilta kuin jonkun muun suunnittelu, koska käytät samoja yksinkertaistettuja muotoja, rajoitetusti väripaletteja ja vastaavat fontit. Tämän seurauksena litteästä suunnittelusta voi tulla tylsää ajan myötä.

9. Tulevaisuuden flat design -trendit

Ei voida sanoa, että litteä muotoilu olisi täysin muodostunut ja pysähtynyt. Ehkä tämä johtuu sen edellä mainituista puutteista, ja se pyrkii kehittämään ja muuttamaan uusia ominaisuuksia ja lisäämään visuaalista ilmettä.

Jos katsot tarkkaan viimeinen esimerkki litteä muotoilu, voit huomata, että se todellavähitellen pois tiukoista työkaluistaan ​​ja alkaa lisätä hienovaraisia ​​tehosteita, kuten liukuvärejä, varjoja, valaistusta ja muita visuaalisia tehosteita.

Nämä pienet yksityiskohdat antavat litteään muotoiluun syvyyttä ilman, että ne ovat liian yksityiskohtaisia, kuten skeuomorfiset mallit. Nämä hienovaraiset parannukset tekevät asunnosta reagoivamman ja mukavamman ja tuovat myös tuoreen ilmeen, mikä tekee siitä joustavamman ja monipuolisemman.

Siten tasainen ei menetä ominaisuuksiaan, vaan siitä tulee mielenkiintoisempi ja joustavampi- Hän on todella paranemassa.

johtopäätöksiä

Näin ollen keskustelimme joitain faktoja litteän suunnittelun historiasta ja puhuimme väreistä, muodoista ja typografiasta. Tarkastelimme eri näkökulmia, keskityimme litteiden etuihin ja haittoihin ja opimme joitakin hyvän suunnittelun pääperiaatteita.

Toivottavasti opit itse uusi tieto tästä artikkelista tai ainakin piti sitä mielenkiintoisena. Olet sen velkaa itsellesi, että yrität luoda litteän mallin, jos et ole tehnyt sitä aiemmin.

Loppujen lopuksi, mitä muuta on mainittavaa litteästä suunnittelusta?

Jos todella pidät litteästä terävistä reunoistaan, mehukkaita kukkia ja terävät kirjasimet, sen puhtaus ja minimalismi, sitten mennään!

Se on trendikäs, mutta kuten mikä tahansa graafinen tyyli, älä rajoita itseäsi vain yhteen tekniikkaan. Se, että flat on trendikäs, ei tarkoita, että et voi käyttää projektissasi muita tyylejä. Skeuomorfismia pienine yksityiskohtineen ja tekstuureineen voi myös tulla hyvä päätös. Tärkeintä on muistaa, että suunnittelu on erilainen jokaiselle projektille, sen on ilmaistava sen henkeä, tarkoitusta, olemusta pysyen samalla kätevänä ja toimivana. Eteenpäin!