Viime kuussa Adobe julkaisi päivityksen Adobe Muse CC , suosittu visuaalinen web-suunnittelu työkalu, jonka avulla voit luoda verkkosivustoja ilman koodia. Tämä uusi, tehokas työkalu sisältyy Creative Cloudiin.

Perinteisenä graafisena suunnittelijana Adobe Muse avaa uusia ovia, joiden avulla voit työskennellä tuttuun käyttöliittymään, Adobe InDesignin, verkkosivustojen luomiseen. Tämän päivityksen aikaisemman sovelluksen rajoittaminen oli lukittu kiinteän leveyden asetteluihin. Muse on tukenut adaptiivista muotoilua jo jonkin aikaa ja lisännyt tekstin synkronointitoiminnon helpottamaan hallintaa vaihtoehtoisten asettelujen kautta, mutta puuttui reagoivan suunnittelun kriittinen osa. Nyt sinulla on valinta - voit päättää, mikä lähestymistapa ( herkkä tai mukautuva muotoilu ) on paras projektiasi varten.

Kuinka se toimii

Kun luot uuden sivun, vaihtoehto on edessä ja keskellä. Adobe uudisti uuden sivuston valintaikkunan, jolloin voit luoda kiinteän leveän asettelun tai nesteen leveyden asettelun.

fig01

Ilmeinen valinta herkälle suunnittelulle on nesteen leveys. Mitään ei ole muuttunut Plan-tilassa , mutta kerran Suunnittelutilassa on uusi käyttöliittymän ominaisuus, joka on tarkoitettu herkälle suunnittelulle: breakpoint-palkki. Tämä työnkulku on samanlainen kuin Adoben tarjoama Edge Reflow ja viime aikoina Dreamweaver Bootstrap-ominaisuuksineen.

fig02

Piilopisteiden lisääminen

Murtopisteiden lisääminen on yksinkertaista ja intuitiivista. Oikealla puolella näet pesurin, jonka avulla voit muokata sivun leveyttä ja simuloida selaimen kokoa.

fig03

Ajatuksena on lisätä raja-arvoja, kun suunnittelusi "rikkoo", mikä saattaa olla osia päällekkäisiä, liian pieniä tai tapauksesta riippuen. Ihannetapauksessa erota ajatus tiettyjen laitteiden rikkoutupisteiden lisäämisestä ja tarkkaan keskittyä siihen, mitä suunnittelu vaatii. Se on todellakin tasapainotus; Tärkein tuki reagoivaa muotoilua varten on mukauttaa monenlaisia ​​näytön kokoja mobiililaitteiden leviämisen vuoksi. Tässä on harkittua ja tehdä vähän suunnittelua voi mennä pitkälle. Voit lisätä niin monta raja-arvoa kuin tarpeen. Muista vain, että mitä enemmän sinulla on, sitä enemmän sinun tulee hallita.

Voit lisätä taukopaikan napsauttamalla pienempää plus-merkkiä, joka näkyy taittopisteessä.

fig04

Kun olet lisännyt taitopisteen, breakpoint-palkki tulee värikoodattu. Voit hallita breakpoint-ominaisuuksia klikkaamalla hiiren kakkospainikkeella hiiren kakkospainikkeella ja valitsemalla breakpoint properties -asetuksen.

fig05

Tämä avaa breakpoint properties -valintaikkunan. Tässä voit ohjata tiettyjä ominaisuuksia taulukohteen väristä ja / tai sijainnista lisättäessä sarakeoppaita, jotka näkyvät kyseiselle kohtauspisteelle. Kaikki tämä valintaikkuna on täsmällinen nykyiselle taittopisteelle eikä sillä ole mitään vaikutusta mihinkään muuhun sivuosiin.

fig06

Voit selata nopeasti reittipisteiden välillä napsauttamalla sen eri osia. Jokaisessa tahdissa voi aloittaa sisällön uudelleensuuntauksen, jotta selaimen leveys paranee.

Pääsivut

Pääsivuilla on omat raja-arvot, jotka toimivat riippumatta siitä, mistä sivuista niitä käytetään. Tämä antaa sinulle tarkan hallinnan pääsivun sisällöstä, tavallisesti otsikosta ja alatunnistimesta.

fig07

Nämä raja-arvot näkyvät taittopistepalkissa pienten kolmiulotteina, jotka osoittavat, mihin raja-arvot ovat päällikössä. Voit napsauttaa kolmioita, jotta pesuri voidaan sijoittaa nopeasti paikkaan.

Sisällön muotoilu rajatarkastuksissa

Kun lisäät lomapisteen, voit jakaa sisältöä uudelleen haluamallasi tavalla. Usein kerralla otat lähestymistavan, jossa pinoat sisältöä tai muokataan sisältöä niin, että se on suurempi, mikä helpottaa katselua pienillä näytöillä. Ei ole harvinaista näyttää vähemmän sisältöä. Kun näyttö vähenee, sisällön tulisi olla täsmällisempi. Alla olevassa esimerkissä huomaat, että olen mennyt kolmesta sarakkeen ulkoasusta suuremman katkeamispisteen suhteen kahden sarakkeen ulkoasuun pienemmälle törmäyspisteelle. Kuvat ja teksti tulevat suuremmiksi, mikä helpottaa katselua pienemmällä näytöllä.

fig08

Muistettavaa muutama tärkeä asia. Ensinnäkin, jos haluat vähemmän sisältöä, ei sinun pitäisi poistaa ei-toivottua sisältöä pienemmällä kohtauspisteellä. Sinun on muistettava, että tämä on yksi sivu; se reflows muuttamaan layout eri näytön koot, mutta se on edelleen yksi HTML-asiakirja. Joten sen poistaminen mistä tahansa tietyssä tahdissa poistaa sen sivulta. Sen sijaan voit piilottaa sisältökerrokset tietyssä taukopaikassa tai napsauttaa hiiren kakkospainikkeella elementtiä ja valita Piilota kohtauspisteessä . Tämä tekee sisällöstä näkymätön valitussa taittopisteessä, mutta muuten muissa.

On myös tärkeää ymmärtää, miten sisällöt kootaan uudelleen Museissa, kun työskentelet tämän herkän ominaisuusryhmän kanssa. Oletusarvoisesti Museissa luomasi elementit leviää leveästi. Asiakirjaan asetetut elementit, kuten esimerkiksi kuva, skaalaavat leveyden ja korkeuden suhteellisesti. Voit hallita näitä asetuksia ohjauspalkissa, kun elementti on valittu.

fig09

Käyttäytyminen, jonka saatat kohdata, on esineitä "kelluva" hieman, kun selainikkunaa muutetaan. Näissä olosuhteissa Adobe on lisännyt uuden vaihtoehdon nimeltä Page Pinning. Tätä ei pidä sekoittaa aikaisemmissa versioissa käytettävissä oleviin Browser Pinning -vaihtoehtoihin, jotka selaimessa "osuvat" elementtiin; jos käyttäjä rullaa sivua alaspäin, kiinnittynyt elementti pysyisi lukittuna paikalleen sisällön vierittämällä sen alapuolella. Sivun pinoaminen on hieman erilainen. Tämän vaihtoehdon avulla kiinnitetty elementti selaa edelleen selaimella, mutta jos elementti sijaitsee sivun keskellä riippumatta siitä, mikä on selaimen leveys, elementti pysyy lukittuna sivun keskelle, vaikkakin vielä skaalautuu kooltaan, kun mitoitusominaisuudet on asetettu sinänsä.

Sivuston siirto herkästi

Jos olet työskennellyt Musein aiemmin, ja sinulla on kiinteäpintainen sivusto, voit siirtää sen reagoivaan ulkoasuun. Tärkeää on muuttaa sivustosi ominaisuuksia. Voit tehdä tämän valitsemalla Tiedosto> Sivuston ominaisuudet, jos haluat avata Sivuston ominaisuudet -valintaikkunan. Tässä voit muuttaa asettelua kiinteästä leveydestä nesteen leveyteen.

Seuraavaksi sinun on muutettava elementtien attribuutteja, jotka haluat olla nestemäisiä. Voit tehdä tämän poistamalla kaikki aiemmin määritetyt nastat. Napsauta sitten objektia hiiren kakkospainikkeella ja valitse kokoa. Tällöin voit valita erilaisia ​​reagointivaihtoehtoja.

fig10

johtopäätös

Muutamia asioita, jotka eivät ole valmiita "reagoivaan primetime" -työhön Museessa. Vieritysvaikutuksia ei tueta vielä. Mikä tarkoittaa, jos sinun tarvitsee käyttää tällaisia ​​vaikutuksia, joudut pysymään mukautuvana ratkaisuna toistaiseksi. Myöskään kaikki widgetit eivät ole herkkiä, vaikka Adoben ihmiset työskentelevät sen suhteen, ja odotan, että molemmat näistä rajoituksista poistetaan tulevilla päivityksillä.

Uusi vastaava ominaisuus, joka on määritetty Adobe Muse CC: ssä, on tervetullut lisäosa jo tehokkaalle visuaaliselle web-suunnittelutyökalulle. Se tarjoaa suunnittelijoille mahdollisuuden luoda reaaliaikaista sisältöä visuaalisesti ja ympäristöön, joka on intuitiivinen ja tuttu.