Så väljer du skärmlayout för ett virtuellt husdjur: retro-LCD eller modern hybrid?

En retro-LCD-layout behandlar skärmen som en kompakt scen. Husdjuret, några få statussymboler och ett litet antal reglage delar en fast visuell ram. Pixelgrafik, en begränsad färgpalett och medvetna begränsningar av den synliga informationen skapar en tydlig visuell identitet. Stilen fungerar när huvudslingan är enkel: se husdjuret, förstå dess aktuella tillstånd och välj en handling.

En modern hybrid bevarar en del av den inramade, pixelliknande presentationen men ger mer utrymme åt kompletterande information. Husdjuret kan fortsätta att vara det visuella blickfånget, medan etiketter, menyer, inställningar och sekundära detaljer använder skalbar text och konventionella gränssnittskontroller. Elementen kan också omplaceras när utrymmet förändras. Responsiva gränssnitt flyttar, ändrar storlek på eller omflödar vanligtvis innehåll för att passa olika fönsterstorlekar, i stället för att förstora alla element lika mycket (Microsofts vägledning om responsiv design).

Se ”hybrid” som ett designval, inte som ett löfte om att alla enheter eller funktioner fungerar automatiskt. Layouten kräver fortfarande tydliga beslut om vad som ska vara synligt, vad som ska flyttas till en meny och hur den ska fungera när det tillgängliga utrymmet är begränsat.

Skriv ned spelarens vanligaste uppgift som en kort sekvens: till exempel att upptäcka ett behov, öppna den relevanta handlingen, välja den och bekräfta vad som hände. Skissa upp sekvensen inom skärmens ram. Om sekvensen kan förbli synlig utan pyttesmå etiketter, överlappande symboler eller upprepade menybyten kan en retro-LCD-layout räcka.

Lista sedan den information som måste kunna förstås med en blick och den information som kan vänta till en detaljvy. En husdjursgest och några tydliga indikatorer kan höra hemma på huvudskärmen; längre beskrivningar, samlingar eller konfigurationsalternativ passar kanske bättre i en sekundär panel i en hybridlayout. Denna uppdelning är en designslutsats, inte en universell regel: rätt gruppering beror på spelets faktiska aktiviteter och terminologi.

Räkna meningsfulla val, inte dekorativa ikoner. Fem ikoner som var och en öppnar ytterligare en meny kan kräva mer arbete än tre märkta handlingar. Om spelarna gång på gång måste gå in i och ut ur nästlade menyer för att slutföra huvuduppgiften bör du skapa mer utrymme eller förenkla uppgiften innan du lägger till mer skärmdekoration.

En retro-layout passar särskilt bra när pixelgrafik är central för det avsedda utseendet, husdjuret förblir tydligt i liten skala och de vanliga handlingarna är tillräckligt få för att visas eller nås direkt. Den begränsade scenen kan få husdjuret och dess tillstånd att kännas sammanhängande. Den ger också designen en tydlig gräns: sekundära system kan inte tränga undan huvudscenen utan en medveten avvägning.

Kontrollera om viktiga tillstånd kan skiljas åt utan att förlita sig på subtila färgskiftningar. Använd igenkännbara former, poser, etiketter eller mönster tillsammans med färg. Testa skärmen i gråskala och i den faktiska visningsstorleken. En sprite som ser charmig ut när den förstoras på en designyta kan bli en otydlig klunga pixlar i den färdiga layouten.

Stilen passar dåligt när varje ny funktion lägger till ytterligare en liten statusmarkering eller förkortning. Om spelarna behöver en teckenförklaring för att förstå startskärmen, eller om husdjuret görs mindre för att ge plats åt en växande instrumentpanel, kan den kompakta ramen innehålla för mycket.

En hybrid är användbar när husdjursscenen behöver samsas med läsbar statustext, flera aktivitetsval eller en detaljvy. Den kan också anpassas bättre till olika fönsterstorlekar: Microsofts vägledning beskriver hur ett enkolumnsgränssnitt kan flöda om till flera kolumner på en större skärm och visa mindre metadata i mindre fönster. Tillämpa principen med eftertanke: extra utrymme kan visa användbara detaljer, men bör inte göra att husdjuret konkurrerar med flera lika framträdande paneler.

Börja med att utforma en layout för smala skärmar. Se till att husdjuret, den viktigaste statusinformationen och den primära handlingen är tillgängliga; flytta sekundär information till en panel eller meny med ett tydligt namn. På bredare skärmar kan du visa kompletterande detaljer eller placera en lista bredvid scenen. Behåll samma ordning och benämningar på handlingarna så att layoutändringen inte får samma uppgift att kännas som ett annat system.

Skala inte upp hela retrokompositionen tills den fyller en stor skärm. Det kan skapa obekvämt tomrum eller göra att reglagen hamnar för långt ifrån varandra. Bestäm i stället vilka delar som ska växa, vilka som ska förbli en avgränsad scen och vilken extra information som faktiskt är till hjälp. Material Designs vägledning om layouter beskriver på liknande sätt layouter som anpassningsbara efter inmatningsmetod, enheter och skärmelement, med responsiva marginaler, kolumner och ytor (Förstå layouter).

Bedöm varje påstående för den aktuella designen med ”ja”, ”delvis” eller ”nej”. Det här är en praktisk checklista, inte ett validerat bedömningsinstrument.

• Spelarens huvudsakliga uppgift med husdjuret kan slutföras med ett kompakt urval av synliga val.
• Husdjuret och dess viktiga tillstånd förblir tydliga på den minsta avsedda skärmstorleken.
• Merparten av den kompletterande informationen är valfri under huvudsamspelet.
• Gränssnittet behöver visa påtagligt olika mängder information på olika skärmstorlekar.
• Spelarna behöver etiketter eller beskrivningar som skulle bli trångbodda i retro-ramen.
• Husdjursscenen ska förbli visuellt åtskild från menyer och statusdetaljer.

Övervägande ”ja” på de tre första punkterna talar för en layout med retro som utgångspunkt. ”Ja” på behovet av varierande informationsmängd eller läsbara etiketter talar för en hybrid. Om svaren går isär kan du skapa en prototyp av en hybrid med ett fast fönster för husdjurets pixelgrafik och en separat, enklare yta för status och handlingar. Då bevaras scenen samtidigt som det kompletterande gränssnittet kan anpassas.

Skapa en representativ skärm för varje seriöst alternativ och använd samma husdjur, tillstånd och uppgift. Ta med det mest informationsrika vanliga tillståndet, inte bara den renaste viloskärmen. Be några personer som inte känner till skissen att identifiera husdjurets aktuella tillstånd och utföra huvuduppgiften. Lägg märke till var de tvekar, misstolkar en symbol eller missar en handling; ändra layouten utifrån observerade problem i stället för att anta att själva stilen löser dem.

Testa på den minsta avsedda skärmstorleken, på en bredare skärm och med förstorad text om gränssnittet stöder det. Kontrollera tangentbordsfokus om upplevelsen styrs med tangentbord, och se till att det förblir synligt när spelaren navigerar bland kontrollerna. För webbaserade gränssnitt som styrs med pekare anger WCAG 2.2 en minsta målstorlek på 24 gånger 24 CSS-pixlar för AA-kriteriet, med angivna undantag. Standarden anger också ett kontrastförhållande på 3:1 och en minsta yta för fokusindikatorer enligt AAA-kriteriet för fokusutseende (W3C:s översikt över WCAG 2.2). Dessa kriterier är användbara kontroller, men de avgör inte vilken visuell stil som passar spelet.

Kontrollera till sist att texten förblir läsbar mot scenen, att valda och inaktiva kontroller ser olika ut och att skärmen fortfarande förmedlar sin hierarki när färg saknas. Om retroprototypen klarar kontrollerna och stöder den återkommande uppgiften direkt bör du behålla dess begränsningar. Om den gång på gång tvingar fram trånga etiketter eller dolda handlingar bör du använda en hybrid och bevara retrokänslan där den gör störst nytta: i husdjursscenen, dess ram eller ett litet antal välbekanta visuella kännetecken.

• Vad är nytt i WCAG 2.2 — W3C:s webbinitiativ för tillgänglighet
• Metoder för responsiv design — Microsoft Learn
• Förstå layouter — Material Design