Apple.com hefur gengist undir nokkrar breytingar á hönnun sinni undanfarna viku eða svo, breytir því að ef þú værir ekki að borga nógu vel eftirtekt gæti þú ekki einu sinni tekið eftir því.

Þótt mörg skýrslur vísa til þessa sem "endurhönnun", held ég að erfitt sé að flokka það sem slíkt. Það eru örugglega nokkrar verulegar breytingar, en breytingarnar eru ekki nákvæmlega lokið eins og var fyrir CNN.com í lok 2009.

Engu að síður eru breytingarnar mikilvægar fyrir vefhönnuðir, þannig að ég lít á þær stuttlega á þeim. Ef eitthvað er um breytingar sem ég hef vanrækt að minnast á skaltu ekki hika við að tjá sig.

A endurhannað siglingarbar

Mikilvægasta breytingin (þó að það sé enn frekar lúmskur) er útlit stýrihjólsins. Apple hefur einn af þessum leiðsögubyrðum sem hönnuður-vitur, allir elska og öfunda. Það virðist ómögulegt að hægt sé að bæta það. Jæja, þeir voru einhvern veginn fær um að finna leiðir til að gera það enn betra útlit og innsæi.

Hér er gamla flakkastikan:

Gamla flakkarsvæði Apple

Hér er nýtt:

Nýtt flakkarsvæði Apple

Breytingar innihalda:

  • Það er dökkra
  • Lóðið hefur verið skipt út fyrir bolta glansandi útlit
  • Útlit lógós er einfalt
  • Leitarreiturinn er minni (meira um það að neðan)

Ég held að það taki virkilega frábært lið hönnuða til að gera það sem raunverulega er nokkuð veruleg breyting á útliti mjög mikilvægt UI frumefni, en samt gefur til kynna að ekkert hafi breyst. Það gengur bara til að sýna að sjónræn upplýsingar eru oft ekki eins mikilvæg eins og heildarfinning hönnunarinnar.

Sveigjanleg leitarreitur (aðeins WebKit)

Að vera augljóslega WebKit-hlutdrægir, hafa Apple hönnunarhópurinn með nokkrum WebKit-eini aukahlutum, einn sem tengist leitarreitnum.

Í flestum vöfrum, smelltu á inn í leitarreitinn að lýsa bakgrunninum að læsilegri hvítu. Í Chrome eða Safari, hreyfist leitarreitinn með því að nota CSS3 Transitions til að verða breiðari og væntanlega svolítið meira nothæfur. Skjárinn sem er að finna hér að neðan sýnir leitarreitinn í Króm eftir að hann hefur verið hreyfimyndaður til að verða breiðari:

Sveigjanlegt WebKit-eini leitarreiturinn

Til að koma til móts við stærð leitarreitunnar breytast önnur flakk og lógóið sjálf.

Mér finnst þessi eiginleiki; það bætir tilfinningu fyrir innsæi. En það hefur, að mínu mati, lítið galli: Það fer ekki aftur í upphafsstað sitt eftir að þú hefur fjarlægt áherslu. Auðvitað, ef eitthvað var slegið inn í leitarreitinn, þá viltu ekki að stærðin breytist aftur, en ég held að það ætti að fara aftur í venjulegt ástand ef það tapar fókus og er tómt.

Auðvitað, þar sem það er mjög ólíklegt að einhver smelli inn í leitarreitinn og skrifar ekki neitt, geri ég ráð fyrir að þetta sé óverulegt aðgerðaleysi.

Hreyfimyndatökustikan (aðeins í WebKit)

Annar lítil WebKit-eini eiginleiki er hreyfimyndun færslusafnsins. Ég man ekki eftir að sjá þessi áhrif á síðuna sína áður, svo ég býst við að þetta sé annar nýr eiginleiki. Hreyfimyndin gerist aðeins á heimasíðunni og aðeins einu sinni í hverri vafra. Þetta er góður æfing og góð kennslustund fyrir forritara sem bætir hreyfimyndum við tengi þeirra.

Hreyfimynd færsluborðsins

Eins og sést á skjánum sem er að ofan, fer flakkastikan frá af skjánum, líklega með CSS3 keyframe fjör, ásamt JavaScript til að stjórna þegar fjörin ætti eða ætti ekki að eiga sér stað.

The Hreyfimyndir Vafrar (aðeins WebKit)

Önnur nýleg viðbót er notkun hreyfimynda á sumum vörusíðum. CSS3 byggir fjör eru notuð á Mac og iPod vöruflokkar, einn þeirra er sýndur hér að neðan:

The Animated Product Browser

Vörurnar búa til þegar þú kemur fyrst á síðunni, og ef þú skiptir á milli undirflokka skýrast sýnilegar vörur í burtu og nýir hoppa inn í þeirra stað. Þetta er gert með CSS3 keyframe-undirstaða kóða, sum þeirra er sýnt hér að neðan:

Sumir af kóða Apple fyrir keyframe fjör

Á vafra sem ekki eru WebKit skiptir hreyfimyndir vafrans yfir á einfaldan JavaScript-falsa. Þrátt fyrir að þessi tegund af hlutur sé ekki hugsjón í öllum aðstæðum (þar sem það er aðallega "kóðaforking") er það raunhæft valkostur fyrir hönnuði og hönnuði í dag sem vill kóðast fyrir bestu mögulegu vöfrum og veita minni aukna virkni fyrir hina hvíldina .

Leitarreitur sjálfvirkt uppástungur

[UPDATE] Eins og bent var á af fjölda fólks í athugasemdunum er sjálfvirkt bendir ekki nýr eiginleiki. Innsláttur okkar á þessu sem "nýr eiginleiki" byggðist á annarri grein sem greint frá því að sjálfvirkt bendir væri nýr. Engu að síður munum við halda þessum kafla vegna þess að það er góð eiginleiki sem hefur tilhneigingu til að gera vefsíðuna svolítið meira nothæf og gefur gott fordæmi fyrir aðra verktaki og hönnuði að fylgja, ef það passar við verkefnið.

Ajax-ekið sjálfvirkt uppástunga fellur niður þegar þú skrifar leitarfyrirspurn:

Leita á tillögum Apple.com

Eins og sýnt er í skjámyndinni hér að framan birtist ekki aðeins niðurstaðan leitarniðurstöður sem passa við stafaða stafina, en niðurstöðurnar fylgja vöruljósmyndum og lýsingum. Ég held að myndirnar séu verðmætari í þessum stað en lýsingarnar, en almennt hefur þetta möguleika á að hagræða vörusókn og viðskipti.

Eitthvað fleira?

Það virðist ná yfir helstu breytingar á nýlegri endurbótum Apple.com hönnunarinnar. Eru einhverjar aðrar verulegar breytingar á hönnun eða kóða sem ég hef ekki getið hér?


Þessi færsla var skrifuð eingöngu fyrir Webdesigner Depot eftir Louis Lazaris, sjálfstætt rithöfundur og vefur verktaki. Louis keyrir Áhrifamikill vefur þar sem hann sendir greinar og námskeið um vefhönnun. Þú getur Fylgdu Louis á Twitter eða hafðu samband við hann í gegnum heimasíðu hans.

Hvað finnst þér um breytingar á Apple.com hönnuninni? Eru einhverjar breytingar sem við höfum ekki getið hér?