Muutokset Apple.Com Designiin
Apple.com on tehty joitain muutoksia muotoiluun viime viikolla tai niin, muutokset, jos et ole kiinnittänyt tarpeeksi huomiota, et ehkä ole huomannut.
Vaikka monet mietinnöt viittaavat tähän "uudistettavaksi", mielestäni sitä on vaikea luokitella sellaiseksi. On varmasti joitain merkittäviä muutoksia, mutta muutokset eivät ole täysin täydellinen uudistus kuten CNN.com vuoden 2009 lopulla.
Kuitenkin muutokset ovat merkittäviä web-suunnittelijoille, joten tarkastelen lyhyesti niitä täällä. Jos muutoksista, jotka olen laiminlyönyt mainita, on jotain, voit kommentoida.
Uudelleen suunniteltava navigointipalkki
Merkittävin muutos (vaikkakin vielä hiukan hienovarainen) on navigointipalkin ulkoasu. Apple on yksi näistä navigointipalkkeista, jotka suunnittelevat, kaikki rakastavat ja kadehtivat. Vaikuttaa mahdottomalta, että sitä voitaisiin parantaa. No, heillä oli jotenkin mahdollisuus löytää keinoja tehdä siitä entistä paremmin ja intuitiivisemmaksi.
Tässä on vanha navigointipalkki:
Tässä on uusi:
Muutokset ovat:
- Se on tummempi
- Kaltevuus on korvattu rohkeammalla kiiltävällä ulkoasulla
- Logon ulkonäkö on yksinkertaistettu
- Hakukenttä on pienempi (lisää jäljempänä)
Mielestäni on todella hieno suunnittelijaryhmä, joka tekee todella merkittäviä muutoksia erittäin tärkeän käyttöliittymän elementin ulkoasuun, mutta silti antaa vaikutelman siitä, että mikään ei ole muuttunut. Se vain osoittaa, että visuaaliset yksityiskohdat eivät useinkaan ole yhtä tärkeitä kuin suunnittelun yleinen tuntuma.
Joustava hakukenttä (vain WebKit)
Oli ilmeisesti Webkit-puolueellinen, Applen suunnittelutiimissä on mukana vain joitain WebKit-parannuksia, joista yksi liittyy hakukenttään.
Useimmissa selaimissa napsauttamalla hakulaatikkoa kirkastaa sen taustalla luettavammaksi valkoiseksi. Chrome- tai Safari-hakulausekkeella animaatiot käyttävät CSS3-siirtymiä laajemmiksi ja todennäköisesti hieman käyttökelpoisemmiksi. Seuraavassa näytön grabillä näkyy Chromen hakukenttä sen jälkeen, kun se on animoitu laajemmaksi:
Hakukentän koon muuttamiseksi muut navigointielimet ja logo muuttavat itsensä.
Pidän tästä ominaisuudesta; se lisää intuitiivisuuden tunteen. Mutta se on mielestäni pieni virhe: se ei palaa alkuperäiseen tilaansa, kun poistat tarkennuksen. Tietenkin, jos jotain kirjoitettiin hakukenttään, et halua, että koko muuttuu takaisin, mutta mielestäni sen pitäisi palata normaaliin tilaansa, jos se menettää tarkennuksen ja pysyy tyhjänä.
Tietenkin, koska on äärimmäisen epätodennäköistä, että joku napsauttaa hakukenttään eikä kirjoittaa mitään, oletan, että tämä on merkityksetön laiminlyönti.
Navigointipalkin animoidut merkinnät (vain WebKit)
Toinen pieni WebKit-ominaisuus on navigointipalkin animoitu merkintä. En muista, että näin vaikutettaisiin heidän sivustoillaan ennen, joten oletan, että tämä on uusi ominaisuus. Animoidut merkinnät näkyvät vain kotisivulla ja vain kerran selaimen istunnossa. Tämä on hyvä käytäntö ja hyvä oppitunti kehittäjille, jotka lisäävät animoituja vaikutuksia käyttöliittymiin.
Kuten yläpuolella olevasta näytönohjaimesta näkyy, navigointipalkki tulee ulkopuolelta, luultavasti käyttämällä CSS3-avainkehon animaatiota sekä JavaScriptin, jolla hallitaan, milloin animaatio pitäisi tai ei pitäisi tapahtua.
Animoitujen tuotteiden selaimet (vain WebKit)
Toinen viimeaikainen lisäys on animaation käyttö joillakin tuotesivuilla. CSS3-pohjaisia animaatioita käytetään mac ja iPod tuote-selaimet, joista yksi on alla:
Tuotteet animoivat, kun tulet sivulle ja jos vaihdat alaluokkien välillä, näkyvät tuotteet häviävät ja uudet siirtyvät paikalleen. Tämä tapahtuu CSS3-avaimella, joka perustuu koodiin, joista jotkin on esitetty alla:
Muissa kuin WebKit-selaimissa tuoteselaimen animaatio siirtyy yksinkertaiselle JavaScript-pohjaiselle haalistumiselle. Vaikka tällainen asia ei ole ihanteellinen kaikissa olosuhteissa (koska se on olennaisesti "code forking"), se on realistinen vaihtoehto kehittäjille ja suunnittelijoille, jotka haluavat koodata parhain mahdollisia selaimia ja tarjota heikompia toimintoja muille .
Hakukenttään Auto-Ehdota
[UPDATE] Kuten huomautukset kertovat useista ihmisistä, automaattinen ehdotus ei ole uusi ominaisuus. Meidän sisällyttäminen tähän "uusi ominaisuus" perustui toiseen artikkeliin, joka kertoi, että auto-ehdotus oli uusi. Tästä huolimatta pidämme tämän osion, koska se on hyvä ominaisuus, jolla on mahdollisuus tehdä verkkosivuista hieman käyttökelpoisempi ja joka tarjoaa hyvän esimerkin muille kehittäjille ja suunnittelijoille, jos se sopii heidän projekteihinsa.
Ajax-ohjatun automaattisen ehdotuksen pudotus näkyy kirjoittaessasi hakukyselyn:
Kuten yllä olevasta ruudunkaappauksesta ilmenee, pudotus ei ainoastaan näytä hakutuloksia, jotka vastaavat kirjoitettuja merkkejä, mutta tuloksiin on liitetty tuotekuvia ja kuvauksia. Mielestäni valokuvat ovat tässä paikassa arvokkaampia kuin kuvaukset, mutta kaiken kaikkiaan tämä on mahdollista tehostaa tuotehakuja ja tuloksia.
Mitään muuta?
Tämä näyttää kattavan suuret muutokset Apple.com-suunnittelun äskettäisessä uudelleenkäsittelyssä. Onko olemassa muita merkittäviä muutoksia malliin tai koodiin, jota en ole maininnut täällä?
Tämä viesti kirjoitettiin yksinomaan Webdesigner Depotille, freelance-kirjailija ja web-kehittäjä Louis Lazaris. Louis juoksee Vaikuttavat webs jossa hän lähettää artikkeleita ja tutoriaaleja web-suunnittelussa. Sinä pystyt seuraa Louis Twitterissä tai ota yhteyttä hänen verkkosivuillaan.
Mitä mieltä olet Apple.com-suunnittelun muutoksista? Onko mitään muutoksia, joita emme ole maininneet täällä?