Suunnittelu reaktiolle
Reagoivien verkkosivustojen suunnittelu voi olla aika haastava, koska prosessi on niin erilainen.
Suunnittelijoina olemme tottuneet rakentamaan pikselin täydellisiä mockappeja web-piirustuksissamme. Mutta reagoiva muotoilu poikkeaa toisistaan.
Suunnittelijan rooli ei ole enää tuottaa mockup ja siirtää sen pois kehittäjälle, koska reagoiva muotoilu ei ole vain kaksivaiheinen prosessi, se on sarja tarkistuksia. Suurin osa on selaimessa. Se on yhteistoiminnallinen pyrkimys suunnittelija ja kehittäjä, ei enää kaksi erillistä tehtävää.
Seuraavassa on muutamia vinkkejä ja yleinen työnkulku siirtymään staattisten sivustojen suunnittelusta suunnittelemaan vastaavia niistä hieman helpommin.
Tietäen näkymäasi
Ennen projektin aloittamista on tärkeää määrittää näkymäporttisi. Tavallinen lähestymistapa olisi rakentaa yhdelle asettelulle älypuhelimille, yksi tablet-laitteille ja pienemmille katselupisteille, suuremman työpöytäversion ja ehkä toisen työpöydän versio suuremmille / laajemmille näytöille, esimerkiksi 1200 tai 1400 pikseliä tai enemmän.
Suunnitella etukäteen
Piirtäminen voi olla paras ystäväsi. Ota yksi paperi ja tee 3-4 laatikkoa kunkin kuvaruudun edustamiseksi. Kun kaikki sivusi näkymät yhdistyvät, et voi keskittyä mihinkään muotoiluun kuin toiset. Kun suunnittelet ulkoasua, ota tärkein sisältö ensin ja lisää se jokaiseen näyteikkunaan, työskentele matkalla vähemmän tärkeisiin asioihin kuin mennä.
Tulet nopeasti ymmärtämään, että kaikki sisältö ei sovi pienempiin katselupisteisiin. Parempi löytää se nyt tekemällä luonnoksia, sen sijaan, että yrität tehdä muutoksia valmiiseen muotoiluun.
Yup, nämä ovat minun todelliset scribbles. Et ehkä pysty selvittämään mitä jokainen elementti on, mutta ne ovat todellisesta projektista. Tein suunnittelun ja kehityksen, joten minun ei tarvitse tehdä selkeää kenellekään muulle. Tästä syystä mikään ei ole nopeampaa kuin kynä ja paperi, jotta nopeasti hahmotellaan layout-ideoita.
Wireframes ja mockups
Tärkein osa wireframing, on ottaa kehittäjä ottaa aktiivisen roolin. Hänen pitäisi tietää heti, jos ideasi toimii tai ei, ja voi antaa ehdotuksia siitä, miten voit saada näkemänsi läpi ilman, että sinun on keksittävä pyörä uudelleen.
Reagoivalla suunnittelulla ei enää voi kuluttaa 90% suunnitteluaikasta ennen kehityksen alkamista. Joten mallien on oltava nopeita ja karkeita. Ole myös avoin muutoksille, koska mahdollisuudet ovat alkuperäiset ideasi eivät välttämättä toimi täsmälleen suunnitellusti.
Selain
Suurten testausmäärien vuoksi reagoiva muotoilu on paras mahdollinen selaimessa tehtyjen tarkistusten parissa. Heti kun perusasettelu on sovittu, on parasta aloittaa kehittyminen heti. Kun selaimesi näkyy selaimissasi, se estää paljon suunnittelun ongelmia.
Toinen asia, jota pitää suunnittelija, on, mitä elementtejä suunnittelussa voi luoda CSS: llä yksinään. Monet päivitykset pystyvät näyttämään pudotusvarjoja, kaltevuuksia, reunoja, pyöristettyjä kulmia ja muita CSS: llä luotuja design-elementtejä. CSS: n elementit ovat helpommin muuttuvia, niillä on vähemmän suunnitteluaikaa ja ne eivät edellytä kuvien tai kuvasekvenssien toteuttamista. Tietenkin, jos et kehitä sivustoa itse, sinun on kyettävä kommunikoimaan ulkoasuideoidesi kehittäjän kanssa.
Ottamalla sen Photoshopiin
Suosittelen käyttämään yhtä .psd-mallia kaikille asetteluille. Tässä on nopea esimerkki, jossa käytetään 1200 pikselin suurinta katselupistettä. Aloita siis uudella .psd: llä 1200 pikseliä leveäksi 2000 pikseliä korkealla. Muut näkymäportit ovat 480, 1020 ja 768 pikseliä leveä.
Aloita poista taustakerros ja kopioi se niin monta näköistilaa kuin haluat plus yksi. Täytä alkuperäisen taustakerroksen musta ja jätä loput valkoiseksi. Laita jokainen valkoinen taustakerros kansioon ja nimeä se sen katselupisteeseen (esimerkki: "480").
Seuraavaksi määritetään jokaisen .psd-näkymän. Muista, että sinun tarvitsee vain tehdä tämä kerta ja käyttää uudelleen mallia kaikkiin projekteihisi.
Anna ensin oppaat kunkin näytön reunojen kohdalta. (Näytä -> Uusi opas ja valitse "Pystysuora"). Lisää oppaat 90, 216, 360, 840 ja 1110 pikselillä.
Seuraavaksi luo kerrosmaskit jokaiseen kansioon, joka muodostaa kunkin näkymän reunat. Käytä Rectangular Marquee Tool -työkalua valitaksesi alueen kahden ohjaimen (480 pikseliä) sisällä.
Ottamalla Snap-valintaruutu (View -> Snap) tekee tästä paljon helpompaa. Kun valintasi on tehty ja oikea kansio on valittu Tasot-pallossa, napsauta Lisää tasomaskin -painiketta. Tee sama askel muille näköportteille.
Nyt kun haluat nähdä tietyn katselukerran, sammuta vain muut kansiot. Sisällysin myös kuvan Layers Palettista, jos halusit nähdä, mitä sen pitäisi näyttää.
simulaatiot
Jos sinulla on jo karkea sivusto, ota kuvakaappaus jokaisesta katselusivulta ja lisää ne .psd-tiedostoosi oikeaan kansioon.
Yleensä on helpompaa aloittaa pienimmällä katselualueella ja työskennellä jopa suuremmissa kuvissa Photoshopissa. Joten kopioi 480 pikselin rakenne, kopioi sitten kerrokset ja pudota ne 768 pikselin kansioon.
Sinun ei tarvitse olla pikseliä täydellinen minkä tahansa asettelun kanssa. Minulla on taipumus saada yksi katselukulma oikein, mutta loput muutan vain elementtejä, jotka ovat todella erilaisia kussakin. Älä huolestu marginaalien ympäröimisestä tekstilohkojen ympärillä. Todella vain sivuuttaa tekstiä niin paljon kuin pystyt, koska Photoshop ei pysty tekemään sitä selaimessa, ja suurin osa tekstin suunnittelusta tehdään CSS: llä.
Ymmärtää, miten sisältö muuttuu
Kun ajatellaan suunnittelua, sinun on ymmärrettävä, miten ulkoasua muutetaan, koska se muuttuu yhdestä näkökulmasta toiseen. Sinun on myös harkittava, mitä tapahtuu, jos ulkoasu on hieman pienempi tai suurempi kuin suunnittelemasi näkymäportti.
Sisältösi on sopeutettavissa kuhunkin ulkoasuun muutamia vaihtoehtoja. Kukin elementti voi olla kiinteä, piilotettu, kelluva (vasen tai oikea), neste tai ne voivat skaalata. Kaikki antavat reagoivan suunnittelun käyttää näiden kaikkien yhdistelmää.
Kelluvat elementit näkyvät tavallisimmin sellaisissa sisältöalueilla, jotka istuvat vierekkäin suurissa asuintiloissa, mutta pinoavat toistensa päälle pienemmissä näkökulmissa. Kun katselukenttä alkaa pienentyä ja kukin elementti kelluu vasemmalle, oikeanpuoleiset elementit alkavat pilkkoa vasemmalla puolella olevien elementtien alapuolelle.
Nestemäinen sisältö sopii parhaiten näkymäporttien muuttamiseen, mutta voi olla hankalaa, jos sitä käytetään suurissa tarkasteluprofiileissa. Nestemäistä sisältöä käytetään tyypillisesti sarakkeisiin, joiden mittakaava on niin leveä kuin näkymä. Ne toimivat hyvin pienillä näkökulmilla, mutta ne voivat olla liian laajoja suuremmille, joten on parasta vaihtaa kiinteäksi niille.
Samanlaisia kuin nestemäiset, skaalauselementit annetaan prosenttiyksikön kooltaan ja mittakaavalta niin pieniksi tai leveiksi kuin näkymä mahdollistaa. Nämä ovat erilaisia, koska ne voivat koskea kuvia ja tekstikokoja. Näille elementeille annetaan prosentti leveys ja / tai korkeus ja mukautuvat näkymään.
Kiinteä on kaikkein jäykkä tapa luoda sisältöä. Jos sinulla on sellainen sisältö, jota et halua skaalata tai muuttaa kokoa millään tavalla, se korjataan. Paras tapa tehdä kiinteät elementit on suunnitella ne pienen näköportin mukaan. On paljon helpompaa käyttää pieniä elementtejä suuressa ikkunassa, kun yrität sovittaa valtavan elementin pieneen katselupisteeseen.
Kun haluat poistaa elementin tai vain ei ole tilaa, voit piilottaa sen. Käyttäjä ei näe piilotettuja elementtejä, mutta se on edelleen ladattavissa. Joten jos käytät suuria kuvia, mutta piilotat niitä mobiilikäyttäjiltä, sivun lataaminen kestää kuitenkin yhtä paljon, onko kuviot näkyvissä vai eivät.
Muista, että voit ja pitäisi käyttää kaikkien näiden yhdistelmää samassa elementissä. Tämä tarkoittaa, että tekstiruutu on nestettä yhdestä katselualustasta, joka on kiinteä ja kelluva vasemmalle toisessa ja voi olla piilotettu kolmanteen.
Suunnittelijoita ei unohdeta
Koska niin paljon ulkoasua voidaan luoda CSS: llä, voi tuntua, että roolisi suunnittelija on vähentynyt. Todellakin, roolisi on juuri muuttunut. Web-suunnittelu liian kauan on ollut suunnittelemassa käyttöliittymä ja laiminlyödä sisältöä.
Asettelu on edelleen tärkeä, mutta kehittäjä voi tehdä paljon. Suunnittelijan tulisi keskittyä varmistamaan, että verkkosivuston tavoitteet saavutetaan. Vietä paljon aikaa muuntamisprosessin vahvistamiseen, korostamalla tärkeää sisältöä ja tekemällä siitä maukasta ja helposti sulavaa.
Jotta olisin täysin rehellinen, yritin etsiä hyviä esimerkkejä tästä reagoivasta suunnittelusta, mutta emme todellakaan voineet saada mitään hyviä esimerkkejä.
Graafiset elementit ja kuvat
On olemassa joitakin erityisiä näkökohtia, kun käsitellään kuvia reagoivassa suunnittelussa. Suurin mahdollinen lähestymistapa on ottaa kuvia, jotka sopivat pienimpään näkymäporttiin. Näin pidät tiedostokoko alhaalla ja sinulla on kuvia, jotka toimivat jokaisen näkymän koon mukaan.
Seuraavassa on esimerkki kuvista, jotka voidaan helposti näyttää useilta katseluosilta Orestis.nl .
Suuri taustakuvio voi olla erityisen ongelmallinen, kun sitä pienennetään älypuhelimen käyttöä varten. Jos aiot käyttää niitä, muista tehdä se tavalla, joka pitää tiedostojen koot ja latausajat mahdollisimman pieninä.
johdonmukaisuus
Yksi suurimmista ongelmanratkaisuongelmista on johdonmukaisuuden puute. Käyttäjillä saattaa olla vaikeuksia navigoida sivustosi tablet-laitteessa, kun ne käytetään heidän työpöydän suunnitteluun.
Varmista, että käytät samaa väritystapaa jokaisessa ulkoasussa ja pidä vähintään yhtä yhtenäistä elementtiä koko. Logo on helpoin siirtymään kaikkiin. Aina navigointi on selkeästi merkitty ja helposti löydettävissä. Jos haluat poistaa elementtejä pienemmistä kuvasuunnitelmista, sinulla on muita tapoja päästä kyseiseen sisältöön.
Älä keksitse pyörää uudelleen
Kun suunnittelet staattista verkkosivustoa, sinulla voi olla paljon vapautta, mutta herkässä suunnittelussa on enemmän asioita. Käytä menetelmää, joka toimii ja viettää aikaa, joka näyttää hyvältä. Jos ihmiset voivat tehdä sähköpostimalleja näyttävät mahtavalta, voit tehdä samoin reagoivalla tavalla, se vie vain vähän luovuutta.
Mikä on mielestäsi vaikeinta pitää mielessä suunniteltaessa vastaavaa sivustoa erillisten mobiili- ja staattisten sivustojen sijaan? Kerro meille kommentit!