Share
Laten we een eenvoudige, maar effectieve 'static admin bar' in Photoshop oprollen. We zullen een selectie van UI-elementen maken en hun verschillende toestanden ontwerpen, klaar om te bouwen in HTML en CSS.
Als je WordPress sinds v3.1 hebt gebruikt, dan heb je ongetwijfeld de altijd aanwezige beheerbalk opgemerkt die aan de voorkant verschijnt wanneer je bent ingelogd?
Een eenvoudige, handige tool waarmee je direct naar de beheerder kunt springen zonder - weet je - eerst naar de beheerder. Google zijn ook fans van de statische beheerbalk; het past mooi bij het hele web-app-ding. Als u GMail, Google Docs, Google + gebruikt, heeft u dit gezien:
Zelfs de Chrome-browser heeft soms een vergelijkbare werkbalk in het voettekst?
En als u Themeforest bezoekt, vindt u vaak auteurs die statische balken gebruiken om door hun themavoorbeelden te navigeren:
OK, dus nu weten we waar we het over hebben, laten we nu nadenken over enkele ontwerpaspecten die we moeten overwegen.
Genoeg gepraat. Laten we Photoshop openen (of de jouwe maken in Fireworks) en dingen op gang brengen?
Open een nieuw document, mijn 200x1000px, en voeg een aantal handleidingen toe om je werkbalk (70px hoog), je knoppen (30px pixels verticaal gecentreerd in de balk), plus een marge links en rechts van 20px te definiëren.
Voeg een willekeurige textuur toe aan de hoofdachtergrond, dit staat voor uw webpagina en zit onder de balk. Voeg vervolgens een vorm toe (zwart) met een dekking van 85%. Dit is de balk zelf, en als u deze een beetje transparant maakt, wordt benadrukt dat deze 'boven' de inhoud van de webpagina staat.
We gaan nu enkele algemene elementen toevoegen aan de pagina. Er zijn een paar voorbeelden, maar we hoeven niet alles te tekenen, net zo lang als we rekening houden met alle toestanden van onze verschillende items. Als dat klaar is, kan de rest van de build in de browser worden gedaan.
Als het aankomt op het bouwen van onze beheerbalk, gaan we een miniatuurafbeelding invoeren met de Gravatar-API. Dit zal aanwezig zijn om aan de gebruiker te laten zien dat ze zijn ingelogd (dat klinkt misschien voor de hand, maar het is een handige herinnering voor het geval iemand zich wil afmelden wanneer ze weggaan.)
In de tussentijd heb ik de standaard gravatar-afbeelding gepakt en gaan we deze als tijdelijke aanduiding gebruiken.
Maak een afgeronde rechthoek (U) met een randstraal van 2 px, tussen de hulplijnen zoals hieronder weergegeven. Houd de shift ingedrukt terwijl je hem versleept, en beperk de afmetingen tot vierkant. Je hebt een net 30x30px vierkant gemaakt. Plaats de miniatuurafbeelding erboven, klik met de rechtermuisknop in het deelvenster met lagen en selecteer 'Knipmasker maken'.
Ik heb een donkere slagschaduw toegevoegd aan de maskerlaag (dubbelklik op de laag om de laageigenschappen te openen) van 2px rechtstreeks naar beneden. Dit is een veel voorkomende toestand van veel van onze elementen, die we later zullen zien.
Voeg wat tekst toe om de gebruiker te verwelkomen (in dit geval Droid Serif Italic op 12px), en een neutraler label om de gebruiker toe te staan om uit te loggen.
Bij het tekenen van vormen in Photoshop, zult u vaak merken dat de anti-aliasing (die alles warm en wazig maakt) sommige details van uw werk wegneemt. Laten we dit nu demonstreren door een eenvoudige vierkante vorm op onze donkere achtergrond te tekenen.
Het is perfect precies, denk je. Eenmaal ingezoomd, kunt u duidelijk de vervaging langs elk van de randen zien. Door deze te verwijderen, kunnen we ons imago opruimen en pixelperfectie realiseren. Maak een kopie van de vorm en plaats deze naast.
Heel goed. Neem nu het gereedschap Direct selecteren (A) - de kleine witte cursorpijl - en selecteer de vorm. Commandeer en klik om twee knooppunten langs één rand te selecteren en duw ze vervolgens naar binnen totdat je een perfect scherpe rand ziet.
Veel beter! De vectoren komen exact overeen met het pixelraster. Herhaal dit nu voor de andere drie randen, waarbij u ervoor zorgt dat u de afmetingen van het object zo goed mogelijk behoudt.
OK, dat ziet er veel beter uit, maar het echte verschil wordt duidelijk wanneer we uitzoomen naar werkelijke pixels?
Een delicaat maar aanzienlijk verschil. Houd hier rekening mee wanneer u de knoppen bouwt tijdens deze zelfstudie, en het uiteindelijke resultaat zal er des te beter uitzien.
Vermijd het opruimen van strooiflanken door eerst "Snap to Pixels" in uw vormopties in te schakelen:
Nogmaals bedankt aan Jeff voor het wijzen van dit!
We hebben de algemene afmetingen van onze knoppen al besproken, dus het kan geen probleem zijn om verder te gaan en een paar te bouwen. We gaan nu kijken naar een voorbeeld van een vrijstaande (niet verbonden met een andere knop) - de meldingsknop.
Op dezelfde manier hebben we ons gravatar masker gevormd, teken een 30px hoge afgeronde rechthoek rond enkele eenvoudige Arial 12px-tekst. Deze knop illustreert een zweeftoestand, dus we plaatsen een goed zichtbare streek rond de rechthoek, geven het een stevige achtergrondkleur en passen (zoals we met onze gravatar deden) een slagschaduw toe om de knop een verhoogde blik.
Een andere veelgebruikte UI-functie is het genummerde label dat aangeeft hoeveel e-mails, meldingen, updates enz. Actief zijn. U bent hier bekend mee als u een smartphonegebruiker bent, een mac-eigenaar, eraan denkt - als u ooit een browser van welke aard dan ook heeft geopend?
We gaan deze UI-conventie gebruiken en onze knop met meldingen een numeriek label geven. We gebruiken een opvallendere kleur omdat het idee hierachter is om de aandacht van de gebruiker te trekken. Een donkere, gedurfde Arial-tekst met een bleke slagschaduw, afgezet tegen een subtiele gele kleurovergang, zou de slag moeten slaan. Hier volgt een kort overzicht van de verloopinstellingen:
Nogmaals, dit is een kleine, afgeronde rechthoek, met een straal van 2px op de hoeken, en heeft een subtiele slagschaduw. We plaatsen het bovenop onze knop en aan de rechterkant. Netjes.
Nadat we onze knop in zijn hover-status hebben gemaakt, zouden we nu de standaardstatus moeten afhandelen. Dit zal minder opvallen - duidelijk, maar toch discreet. Kopieer de meldingsknop en zorg ervoor dat elk van uw elementen netjes binnen een eigen map in het deelvenster Lagen blijft. Verander de etikettekst (als u dit wenst) dan saai de kleur een weinig. Doe hetzelfde voor de lijnkleur en verwijder de slagschaduw.
Dupliceer deze knop, want we gaan deze ook gebruiken om te demonstreren hoe gegroepeerde elementen verschijnen.
Wanneer we een kleine verzameling gekoppelde knoppen hebben (bijvoorbeeld navigatieknoppen), moeten we de gebruiker erop wijzen dat ze te maken hebben met een groep en niet alleen met een rij willekeurige elementen. We kunnen gebruiken nabijheid, een techniek waarmee eenheid in webdesign wordt bereikt. We plaatsen objecten dicht bij elkaar zodat hun relatie visueel wordt aangegeven.
Zoals u kunt zien, hebben we de afgeronde hoeken verwijderd waar onze knoppen samenkomen. Het afgeronde effect wordt alleen zichtbaar langs de buitenranden van gegroepeerde objecten. In een ogenblik voegen we een andere knop toe tussen deze twee om het effect nog meer te benadrukken.
Laten we eerst eens kijken naar hoe we de afgeronde hoeken verwijderen. Selecteer met onze rechthoek gemarkeerd het gereedschap Ankerpunt verwijderen en verwijder de buitenste twee knopen van de curve.
Selecteer vervolgens het gereedschap Punt converteren en converteer de resterende twee punten naar rechte hoeken.
Bingo!
Nadat u de afgeronde hoeken aan één kant van elk van de knoppen hebt verwijderd, kunt u ze nu samen opbinden.
Er gaat niets boven een set kwaliteitspictogrammen om gebruikers in de meest directe vorm te instrueren. Op sommige van onze knoppen zullen we pictogrammen gebruiken in plaats van tekst - ze zien er geweldig uit en ze besparen op ruimte. We kunnen tooltips altijd gebruiken om te verifiëren waar iedereen voor is. Hier is een voorbeeld van twee pictogrammenknoppen, samengevoegd, waarvan er één het zweefeffect toont:
Zoals ik al zei, gebruiken we tijdens deze tutorial geen enkele afbeelding (OK, behalve de thumbnail van gravatar). Ga in plaats daarvan naar het lettertype Web Symbols van Just be Nice Studio. Wat aardig van ze.
Het is prachtig en wordt compleet geleverd in .otf-indeling (voor gebruik op uw systeem) en een weblettertypekit voor implementatie op uw webpagina's met @ font-face. Dit betekent dat we geen sprites of losse afbeeldingsbestanden hoeven te gebruiken; we kunnen alleen karakters gebruiken en dit lettertype toepassen - geweldig.
In dit geval heb ik de U en S respectievelijk, maar we kunnen heel gemakkelijk hakken en veranderen wanneer we aan het bouwen zijn. We kunnen zelfs effecten toepassen met behulp van CSS, net als bij normale lettertypen, maar ik loop hier voorop? Bouw voor nu gewoon een paar knoppen en gebruik enkele van deze geweldige pictogrammen.
Op dezelfde manier waarop we hebben gewerkt, bouw een zoekveld. Het is identiek aan de knoppen in hun standaardstatus (lichtgrijze lijn, lichtgrijze letterkleur, geen slagschaduw), behalve dat het geen effen achtergrond heeft.
De bijbehorende knop doet maakt echter opnieuw gebruik van een van onze tekens voor websymbolen (L). Stop het hele ding tegen de rechterwijzer, want we gaan het in de browser plaatsen op deze rand.
Ik dacht dat het misschien leuk zou zijn om een extra knop toe te voegen die tekent extra aandacht, voor het geval iets - er - extra, moet worden gedaan. Bijvoorbeeld een knop 'publiceren' of 'kader sluiten'.
Nogmaals, we kunnen gebruik maken van de pictogrammen, met behoud van de gebruikelijke knopafmetingen en 2px afgeronde hoeken. Deze keer gebruiken we echter hetzelfde gele verloop als bij ons notificatienummer, # f9d944 tot # fee77f, met een streek van # f9d944. Het pictogram is donkergrijs # 292929, net als bij de melding, met een bleke slagschaduw.
De zweefstand heeft, zoals verwacht, een donkere slagschaduw, net als bij de andere knoppen.
We zijn nu ten einde en hebben bijna alle mogelijke toestanden van onze UI-elementen afgedekt. We gaan een extra knop toevoegen tussen onze instellingen en profielknoppen, deze keer om te fungeren als vervolgkeuzemenu (let op het ontbreken van afgeronde hoeken):
In de bovenstaande schermafbeelding ziet u de vervolgkeuzelijst zichtbaar, per definitie is de knop actief (of zweeft u over). De knop neemt de juiste status aan; gemarkeerde streek, lichtere tekst en donkere slagschaduw. Ik heb een ander pictogram voor websymbolen () gebruikt om aan te geven dat er meer inhoud onder de knop staat.
Het vervolgkeuzemenu zelf moet visueel worden gekoppeld aan de rest van de UI-elementen, maar moet opvallen. Het komt ook boven elke webpagina die op dat moment zichtbaar is. Ik heb er daarom voor gekozen om er een eenvoudige witte rechthoek van te maken, met een slagschaduw:
De lichte achtergrond bindt het visueel met de zwevende 'menu'-knop, en de schaduw helpt het te onderscheiden van andere inhoud. Het gemarkeerde hovereffect op de vervolgkeuzelink is gewoon een bleker tintje van het geel dat we hebben gebruikt.
Er is slechts een klein element waarmee we nu te maken hebben; de tooltip (onthoud dat we dat noemden?) We gaan het gebruiken als verificatie voor het geval dat de doelen van onze pictogramknoppen niet meteen duidelijk zijn.
Het screenshot hierboven toont mijn eerste tooltip - in principe volkomen helder, maar toen besefte ik dat het visueel identiek was (afgezien van het kleine puntje) naar het vervolgkeuzemenu. Omdat dat zou suggereren dat ze op de een of andere manier een vergelijkbare rol vervulden, besloot ik dat het beter was om een alternatieve route te nemen. Dit is een tooltip; het moet niet voor iets anders worden verward.
De tweede poging is veel succesvoller. Het is subtiel tegen onze donkere beheerbalk, maar de sterk contrasterende tekst maakt het zeer leesbaar. Alles wat je nodig hebt om deze kleine puppy te bouwen is een zwarte rechthoek (deze keer geen afgeronde hoeken, maar dat is aan jou). Trek met je eerste getrokken vorm een andere tekening en zorg ervoor dat je het gereedschap Toevoegen aan vorm (+) hebt geselecteerd. Hiermee worden uw twee vormen samengevoegd tot één formulier, met behoud van de afzonderlijke vectoren voor bewerking:
Met het gereedschap Direct selecteren (A) kunt u de punten van de tweede vorm selecteren en afzonderlijk manipuleren. Pas het formaat aan zoals jij wilt en draai het 45ш. Je zult eindigen met zoiets?
Het einde van de weg! Hopelijk heb je een UI-ontwerp samengesteld dat voldoet aan je goedkeuring. In de volgende zelfstudie zien we hoe dit veel kan worden gecodeerd in een browservriendelijke, lopende en lopende statische beheerbalk. Bedankt voor het lezen, ik kijk ernaar uit om te horen wat je hiervan vindt in de reacties!
Accentsconagua