Presentera skärmbilder i webbläsar- och enhetsmockuper

Förbered skärmbilden

Börja med den renaste bild du har. Ta bort tillfälliga aviseringar, personuppgifter och oavsiktliga statusdetaljer innan du placerar den. Håll det viktiga gränssnittet nära mitten eftersom en frame eller perspektiveffekt kan minska den läsbara ytan. Om du visar ett arbetsflöde, välj en avgörande skärm eller gör en liten serie med samma beskärningslogik.

Använd en webbläsarstil när innehållet är en webbsida eller en skrivbordslik vy. Använd en telefon- eller surfplattestil när touchlayout och vertikal läsning är centrala. Det här är dekorativa frames; de öppnar ingen webbläsare, läser inte in någon URL och ändrar inte själva skärmbilden. Skillnaden hjälper dig att sätta ärliga förväntningar på den färdiga bilden.

1. Välj en skärmbild med ett tydligt motiv och ta bort känsligt innehåll.
2. Avgör om webbläsar-, iPhone- eller iPadinramning förklarar sammanhanget bäst.
3. Kontrollera att viktig text och viktiga kontroller förblir synliga i framen.

Placera framen och välj scenen

Välj en bakgrund som stödjer skärmbilden. En lugn enfärgad bakgrund fungerar för dokumentation; ett mjukt foto eller en naturscen kan göra en produktpresentation varmare. Placera mockupen med tillräckligt med utrymme runtom så att framekanten syns. I ett webbläsarfönster ska webbläsarkromen vara igenkännbar utan att dekorativa kontroller konkurrerar med sidan.

Håll perspektivet trovärdigt. En lätt lutning kan ge energi, men kraftig rotation gör liten text svår att läsa. Anpassa mockupen efter bakgrundens visuella riktning. En frame som lutar mot öppen yta känns avsiktlig; en som pekar in i ett rörigt objekt känns trång.

Läs också: så lägger du till en iPhone-frame på en skärmbild

1. Välj en enkel bakgrund eller en egen bild med tillräcklig kontrast.
2. Placera den dekorativa framen och lämna en marginal runt ytterkanten.
3. Prova först en rak version och jämför sedan en lutning i den slutliga delningsstorleken.

Kontrollera läsbarhet och trovärdighet

Zooma ut och fråga vad tittaren lägger märke till först. Skärmbilden ska förbli motivet, medan framen visar vilken typ av skärm det är. Om bakgrunden tar över ska du förenkla den eller minska kontrasten. Om skärmbilden försvinner ska du göra mockupen större eller välja en lugnare scen.

Granska hörn, text och kanter. En frame som beskärs för tätt kan se oavsiktlig ut; en smal, ojämn remsa bakgrund kan vara mer störande än en medveten beskärning. Behåll skärmbildernas ursprungliga proportioner när det går och sträck inte ut en rund ikon eller en person på ett foto.

Framestilar och Pro-villkor kan ändras mellan appversioner, så kontrollera det aktuella Mockups-panelen i appen innan du planerar en serie.

1. Granska hierarkin och kontrollera sedan text och framekanter.
2. Jämför resultatet i full storlek och i den storlek som används i ett inlägg eller en artikel.
3. Lägg till en kort bildtext utanför skärmbilden om tittaren behöver kontext.

Lös vanliga mockupproblem

Om skärmbilden ser utdragen ut ska du använda originalets proportioner och anpassa den igen. Om texten är för liten ska du beskära till det meningsfulla området eller använda en större frame. Om frame och bakgrund har liknande färger ska du skapa avskiljning med en annan bakgrund eller en mer återhållsam frame. Om bilden känns lutad utan anledning ska du återgå till rak placering.

Om en bakgrund från en egen bild är rörig ska du inte dölja skärmbilden med tung dekoration. Flytta mockupen till ett lugnare område, minska den visuella konkurrensen eller välj en enklare färg. Exportera ett test och kontrollera det faktiska sparade resultatet innan du skickar det till en kund eller publicerar det.

1. Korrigera proportionerna innan du ändrar skalan.
2. Lös läsbarheten med beskärning och hierarki innan du lägger till dekoration.
3. Förhandsvisa den sparade bilden en gång i den faktiska destinationsstorleken.