Accentsconagua
Share
Vad du ska skapaI denna handledning tar jag dig igenom min designprocess för att skapa en lyhörd design i Sketch. För att hålla saker till rätta, ska jag prata om en mottaglig målsida jag designade för en resepapp ett tag tillbaka. Låt oss komma in i det!
Varje designprojekt har någon form av inställning. För den här specifika ska jag kortfattat prata om innehåll och trådramar innan jag hoppar in i den lyhörda designprocessen i skiss.
Det är generellt bra att få tag i innehållet innan du påbörjar ett designprojekt. Det är precis hur jag börjar alla mina projekt (för vad det är värt, det är en del av mitt kontrakt - något jag rekommenderar att du sätter i bruk också). Denna handledning fokuserar på UI-sidan av saker, utesluter de viktiga UX-frågorna som varför visst innehåll valdes, sidmål och så vidare.
När du diskuterar innehåll med din klient eller ditt team måste du tänka på innehållet på både små och stora skärmar. Jag föreslår att du skriver in innehållet för mobil först, skriv ut allt i en Google Doc. Öppna sedan dokumentet på din telefon för att avgöra om det är rätt eller om det är för mycket. Om du rullar igenom sidor och sidor med utskrivet innehåll på din telefon, vet du att du måste adressera det direkt.
Alltid, oavsett vad, skära ditt innehåll avsevärt.
"Bli av med hälften av orden på varje sida, och bli av med hälften av vad som är kvar." -Steve Krug, gör mig inte tänk
När du väl är nöjd med mobilinnehållet är du välkommen att lägga till mer till tabletten och den stationära versionen. Större skärmar har mer skärmfastigheter för att hantera mer detaljerad information.
Du kommer självklart att gå igenom revisioner. Bli inte alltför upptagen på den här gången. Innehållet bör vara nära slutligt men det behöver inte skrivas i sten.
För att lära dig mer om en förstahandsinriktning, läs igenom James Deers artikel:
Att samtycka till innehåll för alla sidversioner är det första steget i att konfigurera din design. Nu vet du vad du kan förvänta dig. Det är helt okej att hålla innehållet detsamma hela tiden, precis som det är att visst innehåll visas eller försvinner beroende på skärmstorlek.
Den vanligaste typen av innehåll på webben är skrivet text. Det finns emellertid andra saker inklusive bilder och grafik (dvs fotografier eller illustrationer), videor, citat, ljudfiler (dvs podcasts), spel eller till och med inbäddad innehåll genom iframes.
Du behöver inte ha alla videoklipp och podcast-episoder naglade ner. Åtminstone har en beskrivning av det visuella eller auditiva innehållet. Det är vad jag gjorde för den här klienten. Jag visste ungefär vilken typ av grafik jag ville ha för varje avsnitt för att ytterligare förklara värdetillfället för varje avsnitt. Men jag hade inte den faktiska grafiken när innehållet diskuterades. Jag har just beskrivit det.
Nästa steg är att visa innehållet visuellt. Med detta projekt valde jag att göra enkla, lågfärdiga trådramar. Jag ville snabbt och visuellt dra ut innehållet. Jag gjorde två trådramar, en mobil och ett skrivbord eftersom de var och en hade olika innehållskrav. Båda av dem ger dig en allmän uppfattning om den visuella strukturen på målsidan.
Du kan använda vilket verktyg du är mest bekväm med för trådramar, men jag använde Sketch här. Du kan också skapa papper med låg prestanda och penna. Det spelar ingen roll. Du kan till och med använda de tekniker som diskuteras senare i denna handledning för att skapa mottaglig wireframes.
Låt oss hoppa in i lyhörd UI-design med Sketch.
Det kommer att göra våra liv enklare om vi först identifierar innehåll som är samma över alla varianter och innehåll som är unika för specifika skärmar.
I denna design finns följande element närvarande på alla skärmar:
Element som är unika för olika skärmstorlekar:
Perfekt. Nu kan vi börja om att skapa dessa element på lämpligt sätt.
Min grundläggande knapp för både skrivbord och surfplatta är en rektangel som är 352px med 40px med en 5px radiusradie. Bakgrunden är # 7455FF. Inom egenskaperna för omformning väljer du att stifta objektet till dess vänstra och högra kanter och ställa in en fast höjd.
Nästa är textlagret, knappens kopia, med ett Objekt Sans UI-teckensnitt, fetstil och en 16px teckenstorlek. Det är vit eller #ffffff. Dess inriktningsbredd är inställd på bil och det finns inga andra inställningar på textlagret. Om du vill kan du vrida knappen till en symbol, men det är inte nödvändigt för den här specifika designen eftersom knappen bara visas en gång över hela sidan.
När du kombinerar de två elementen i en grupp (eller en symbol), borde du kunna ändra storlek på knappens bredd utan problem, med texten kvar i mitten oavsett knappens bredd.
En annan sak du kan göra är att använda Anima-plugin för Sketch. Det låter dig skapa vätskeskärmar som ändras, samtidigt som deras egenskaper hålls ihop, t.ex. avstånd, vaddering eller höjd. Det är bra för layouter med formulär.
Vi kan använda Anima för att hålla olika huvudelement ihop medan du ändrar storlek från mobil till skrivbord. Det ger oss också en bra indikation på hur dessa element kommer att verka i förhållande till varandra i andra skärmstorlekar än de vi designar i storlekarna som mellan en större telefon eller en tablett.
Men för det vi gör idag lägger det här plugin inte till mycket.
Denna målsidesdesign kräver några stora och vackra rubriker. I skrivbordsversionen är h1 72px medan h2 är 32px. 72px är alldeles för mycket för mobilen. Vi måste göra h1-rubriken mottaglig. Det är inte så enkelt som vätsketypografi finns i CSS men det är genomförbart.
Vi behöver skapa en stil för varje h1-rubrik och spara den som en textstil med rätt namngivningskonvention eller syntax. Detta gör det möjligt för oss att senare välja den nödvändiga h1 som behövs när du utformar resten av sidan. Det är inte perfekt och ganska manligt, men så går det.
För h1 är dessa följande stilar: Noto Sans UI, fet, storlek 72 (skrivbord), storlek 48 (tablett) och storlek 32 (telefon).
Samma syntax kan användas för att organisera symboler också. Till exempel: Style-namn / sub-namn / specifik stil
Så, för att organisera vår typografi kan vi använda följande syntax för stora h1 för stationära datorer: Rubriker / H1 / Desktop, för tablett: Rubriker / H1 / tablett och för telefoner: Rubriker / H1 / Telefon.
Anledningen till att det står Rubriker / h1 i rullgardinsmenyn för närvarande beror på att vi inte har lagt till några andra stilar. Så låt oss flytta till h2 och lägga till ett annat lager av hierarki i textstilarna.
För h2 använder jag följande stilar: Noto Sans UI, fetstil, storlek 73 (skrivbord och tablett) och storlek 18 (telefon). Låt oss använda följande syntax för h2 på telefoner: Rubriker / H2 / Telefon. För tablett kan vi göra två saker här, vi kan kombinera det med skrivbordet och kalla det Rubrik / H1 / Skrivbord + Tablet eller vi kan ha två separata stilar som helt enkelt är desamma. Jag skriver om den här designen efter att den är klar så det är lite partisk. Jag ska säga att låt oss skilda tabletten från skrivbordet eftersom det är en bättre designpraxis.
Med typografi stilar i Sketch kan du verkligen få detaljerad och organiserad med sina syntaxregler. Men med det här skrivandet finns ingen funktion i Sketch, eller inget plugin, som ändrar typografi för dig hur vätsketypografi fungerar via CSS. Från och med nu är det fortfarande en manuell process.
Uppåt kommer vi att skapa symboler för att återanvända och göra våra liv lite enklare. I denna design har vi gott om vittnesmål och citat från tidigare användare. De måste vara lyhörda.
Tack och lov kommer formatet för vittnesmål att vara desamma över hela sidan, så vi behöver bara göra det en gång för dem. Först har vi personens namn och sedan deras citat. De två är dock olika stilar. Låt oss utforma källan först. Jag heter textstilen Vittnesmål / Källa. Den faktiska stilen för detta element är: Noto Sans UI, djärva, storlek 14, linjehöjd 24. Därefter har vi själva testet. Jag heter textstilen Omdöme / Citat. Dess stil är: Noto Serif, vanlig, storlek 14, linjehöjd 24.
För att skapa en symbol, välj båda textelementen och klicka på Skapa symbol ikonen längst upp till vänster i verktygsfältet. Jag heter min symbol Rekommendation.
Nu måste vi redigera symbolen för att den ska kunna ändras väl för olika skärmstorlekar och för olika citatstorlekar. Dubbelklicka på den nyskapade symbolen för att redigera den.
Först av allt måste vi byta namn på elementen inom symbolen. Som standard skapas namnet på ett textlager från sitt eget textinnehåll. Jag bytte namn till dem Källans namn och Citat, respektive.
Därefter måste vi justera inpassningsinställningarna för båda textelementen. De kommer att ha samma resizing egenskaper. Varken har en fast bredd eller höjd. Men de kommer båda att ändra storlek från vänster och övre kanter. Detta kommer att se till när du ändrar storlek på symbolen, kommer textelementen att stanna där de hör hemma.
För att återanvända symbolen klickar du på rullgardinsmenyn längst upp till vänster i verktygsfältet som säger Föra in och navigera till vittnesmål symbol. Klicka sedan var som helst på tavlan för att placera den. För att ändra textpastainnehållet i lämpliga övergångsinmatningar som vi bytt namn tidigare. Ändra storlek efter behov.
Jag använder termen "responsiv grafik" lite annorlunda här. Tanken är att grafiken kommer att förändras beroende på skärmstorlek. Jag skulle dock fortfarande behöva göra grafiken manuellt för varje skärm. Om de inte är flytande, som ett inmatningselement eller en knapp, kan de inte göras automatiskt.
För att få en bättre förståelse för vad lyhörd grafik är, här är en länk till en artikel som jag skrev om responsiva ikoner, men idén är exakt densamma för alla typer av grafik och bilder.
Vi kan vända både resvägskorten till symboler samt korten från den sociala delen av målsidan. Låt oss gå med de sociala korten runt dag 3 grafik istället (det är lite mer intressant).
Återigen välj kortet och vrid det till en symbol. Dubbelklicka på den för att redigera symbolen. Vi vill se till att den ändras bra både vertikalt och horisontellt.
Från och med bakgrunden vill vi ge den storlek på egenskaper som gör objektet till toppen och vänster. Detsamma gäller för de två textlagren. Vi vill dock att bilden, eller avataren, ska sättas högst upp till höger. Slutligen glöm inte att ändra titlarna på dessa element till något mer lämpligt för när vi övertygar dess innehåll.
Och voila!
Slutligen vill vi också ta itu med de små designdetaljerna. I denna specifika design återanvänder jag den lilla lila linjen med en punkt mycket. Jag vänder denna lila indikator till en symbol också.
Denna symbol består av en cirkel som är 8px med 8px med en # 7455FF bakgrund. Linjens bredd spelar ingen roll för mycket men standardvärdet är 122px. Dess höjd är 2px. Återigen med # 7455FF bakgrund.
Inom symbolen behöver vi göra en viss ändringsinställning igen. För cirkeln behöver vi den för att hålla samma storlek och på samma plats. Vi ska ge den en fast bredd och höjd och stifta den till den högra högra kanten. För linjen kommer vi också att ge den en fast höjd, men inte en fast bredd som vi behöver för att expandera i bredd. Vi kommer också stifta den till höger kant när du ändrar storlek.
På det här sättet, när vi ändrar storlek på den här symbolen, ändras det bara linjens bredd.
En sak vi kan göra är att ställa in bakgrunden att vara flytande också. Höjder av sektioner skiljer sig mellan mobila och stationära layouter; det betyder att du måste flytta bakgrundselementen upp och ner till rätt plats.
Här anropar användargränssnittet en gräns på 16 px. Det innebär att bakgrundsskiktet måste vara 16px bort från kanterna på tavlan. Allt du behöver göra är att välja bakgrundsskiktet och, antingen genom att använda Anima-pluginet eller använda egenskaperna för att ändra storlek, klistra alla kanter på bakgrundsskiktet. Så, pin den till toppen, botten, vänster och höger. Nu när du ändrar storleken på tavlan följer bakgrunden med dig!
Nu när vi har tagit hand om de flesta designelementen som kan göras responsiva eller flytande eller till återanvändbara symboler, är det dags att prata om resten av designelementen på den här sidan.
Enkelt uttryckt, det är här du rullar upp ärmarna och gör dina mönster manuellt, en efter en. Att utforma kartbilden måste göras för hand eftersom den är unik. Detsamma gäller för layout och plockning, och bestämmer typografi.
Tyvärr är det inte en bit tårta att designa responsiva gränssnitt i Sketch. Men det finns tekniker, även plugins, vilket gör ditt liv mycket enklare som en designer som arbetar i Sketch. Jag hoppas att denna handledning har gett dig ett bra genomgång av min egen designprocess. Att utforma responsiva användargränssnitt behöver inte vara tråkigt, det kan också automatiseras mycket.
Har du några tips eller tricks för att designa responsivt användargränssnitt att dela med oss? Släpp dem i kommentarerna nedan!
