# Digitala menytavlor: skärmar som säljer på kaféer och barer [Canonical HTML page](https://gradiently.design/sv/guide/menu-board-design) En menyskärm läses från slutet av kön, på några sekunder, av någon som bestämmer vad hen ska spendera. Det ändrar nästan varje designval. Så bygger du en som går att läsa, säljer och ändå ser ut som din plats. ## The short version - De flesta digitala menytavlor är vanliga tv-apparater, så designa i 1920×1080 för en liggande skärm eller 1080×1920 för en som hänger på högkant. - Texten på en menytavla bör bedömas från där kunderna faktiskt står, oftast i slutet av kön, inte från skärmens redigeringsprogram. - Mörka bakgrunder med ljus text passar menyskärmar eftersom de minskar bländning och gör orden till det ljusaste i synfältet. - Rörelse på en menytavla bör hållas i bakgrunden, medan priser och artikelnamn ska stå stilla. - Att dela en lång meny över flera skärmar, eller rotera den långsamt, läses bättre än att krympa allt på en. En **digital menytavla** är en meny designad för en skärm, oftast en vanlig tv i 1920×1080, som läses på flera meters avstånd av människor som bestämmer sig snabbt. Designa den som en skylt snarare än en tryckt meny: färre artiklar per skärm, större text, en mörk lugn bakgrund, priser justerade i en kolumn och rörelse bara bakom orden. Skärmen säljer bäst när en kund hittar sin dryck och dess pris innan hen når kassan. En liggande menyskärm för ett kafé med rubriken Kaffe och en kort lista över drycker och priser En kategori per skärm i 1920×1080. Rubriken är det största, och priserna ligger på linje. ## Storlekar för digitala menytavlor Nästan varje menyskärm är en tv eller en kommersiell display med samma 16:9-panel. Designa i skärmens egen upplösning så att inget skalas, vilket håller liten text skarp. En 4K-skärm visar en design i 1920×1080 rent i dubbel storlek, men att designa i 3840×2160 ger finare text om din skärm och spelare stöder det. - Liggande skärm 1920×1080: 1920 × 1080 - Stående skärm 1080×1920: 1080 × 1920 - Tre skärmar i rad 5760×1080: 5760 × 1080 Liggande passar väggen ovanför en disk, stående passar en pelare eller ett fönster. En rad med tre designas som en bred yta och delas upp i tre filer. Om du hänger en skärm på högkant, kontrollera att skärmen eller spelaren kan rotera sin utsignal. Om den inte kan det, exportera den stående designen och rotera filen ett kvarts varv innan du laddar den. ## Så gör du en menyskärm läsbar från kön Det finns inget universellt minimum, eftersom det beror på skärmstorlek och avstånd. Det pålitliga testet är fysiskt: lägg designen på den riktiga skärmen, gå till slutet av kön och läs den. Om du kisar är den för liten eller för full. Som utgångspunkt för en design i 1920×1080 på en typisk diskskärm: | Element | Utgångsstorlek på 1080 px höjd | Anmärkningar | | --- | --- | --- | | Kategorirubrik | 96 till 140 px | En per skärm, eller högst två | | Artikelnamn | 56 till 72 px | Gemener med stor begynnelsebokstav läses snabbare än versaler | | Pris | Samma som artikelnamnet | Högerjusterat i en kolumn, ingen valutasymbol behövs om det är självklart | | Beskrivning | 32 till 40 px | En kort rad eller ingen alls | | Allergen- eller kosttaggar | 28 till 32 px | Använd bokstäver som V eller GF, förklarade en gång på skärmen | Utgångspunkter att testa på din egen skärm, inte regler. Större skärmar och kortare köer kan gå mindre. - **Åtta till tolv artiklar per skärm** är gott och väl. Mer än så och ingen hittar något. - **Välj ett typsnitt med tydliga siffror.** Priser läses oftare än namn. [Typsnitt för sociala medier](https://gradiently.design/sv/guide/fonts-for-social-media) listar typsnitt som förblir tydliga på avstånd. - **Lämna en bred marginal.** Vissa tv-apparater beskär kanterna något, så håll texten minst 60 px in från varje sida. - **Gruppera, rama inte in.** Utrymme mellan kategorier gör mer än linjer och ramar. ## Färger och bakgrunder för menyskärmar En skärm är en ljuskälla. En vit bakgrund i full ljusstyrka lyser genom rummet, blekar orden och tröttar ögat. En djup, dämpad bakgrund med ljus text gör menyn till det ljusaste på väggen, vilket är där du vill ha uppmärksamheten. [Design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) behandlar samma princip för appar. - Rosteriet: espressobrunt, varmt hörn: `radial-gradient(circle at 85% 15%, #7a3b1d 0%, #2a140b 45%, #120906 85%)` - Baren: flaskgrönt, dämpat ljus: `radial-gradient(circle at 15% 85%, #1f5f55 0%, #0e2b27 45%, #071311 85%)` - Sent på kvällen: bläck till plommon: `linear-gradient(160deg, #1b1830 0%, #2d2350 55%, #4a2a52 100%)` Mörka bottnar med en varm yta som hålls borta från priserna. Var och en går att kopiera in i en skärmdesign eller en webbmeny. - Espressobotten: #120906 - Rostning: #7a3b1d - Mjölktext: #f3e7d8 - Cremaaccent: #e9a23b - Salviatagg: #a7b8a0 En hel palett för en menytavla: botten, en mellanton, varmt off-white för text, en accent för dagens erbjudanden och en stillsam färg för kosttaggar. Använd accenten till en enda sak, oftast erbjudandet eller artikeln du helst vill sälja. Om allt är markerat är ingenting det. Kontrollera kontrasten mot bakgrundens mörkaste och ljusaste delar, inte bara mitten, och [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar hur. ## Rörelse på en digital menytavla Rörelse är det skärmar kan göra och tryck inte kan, och den fångar folk som tittar upp från sina mobiler. Håll den i bakgrunden: en långsam färgdrift, ljus som rör sig över ytan, ett erbjudande som glider in en gång per loop. Artikelnamn och priser ska aldrig röra sig, för folk läser dem under flera sekunder. ### Undvik - Rullande eller glidande priser - Snabba klipp mellan skärmar med några sekunders mellanrum - Blinkande ”Erbjudande”-märken - En video så rörig att texten måste sitta i en ruta ### Gör så här - En långsam bakgrundsloop under stilla ord - Skärmar som står kvar i 15 sekunder eller mer om de roterar - Ett erbjudande som glider in och sedan vilar - En loop som fogas utan synligt hopp En mjukt rörlig bakgrund har också en praktisk fördel: en helt statisk bild som står på tolv timmar om dagen kan lämna ett svagt spöke på vissa skärmar, särskilt OLED-paneler. Exportera loopen som MP4, som nästan varje tv och skyltspelare tar emot från ett USB-minne eller en app. [Sömlös loopvideo](https://gradiently.design/sv/guide/seamless-loop-video) visar hur du gör skarven osynlig och [animerade gradientbakgrunder](https://gradiently.design/sv/guide/animated-gradient-background) har idéer för själva rörelsen. ## Så sätter du upp en menytavla från början till skärm 1. **Skriv menyn först** Skär ner den till det som säljer. Gruppera den i kategorier om åtta till tolv artiklar, en kategori per skärm. 2. **Välj layouten en gång** Rubrik uppe till vänster, artiklar i en kolumn, priser högerjusterade. Använd samma layout på varje skärm så att folk lär sig den. 3. **Designa i skärmens storlek** 1920×1080 eller 1080×1920, med 60 px marginal och en mörk bakgrund. 4. **Testa från kön** Lägg den på den riktiga skärmen i den riktiga ljusstyrkan och läs den från där kunderna står. 5. **Exportera och ladda** PNG för stilla skärmar, MP4 för rörliga. Namnge filer efter skärm och datum så att rätt fil läggs upp. ## Håll priser och erbjudanden uppdaterade Poängen med en skärm är att den kan ändras. Ha en förlaga per skärm och ändra bara orden, så att en prishöjning eller en ny säsongsdryck tar minuter och utseendet aldrig glider. Frukost- och kvällsmenyer kan vara två versioner av en design, utbytta med en timer om din spelare stöder schemaläggning. Tryckta menyer, bordskort och fönstret bör använda samma typsnitt och bakgrund, och [design av restaurangmenyer](https://gradiently.design/sv/guide/restaurant-menu-design) tar upp den tryckta sidan. En liggande menyskärm med rubriken Frukost, serveras till 11,30, med två rätter och priser Förmiddagsversionen av tavlan. En liggande menyskärm med rubriken Spritztimmen från klockan 17.00 med tre drycker och priser Samma layout på kvällen, med en annan bakgrund. Gradientlys Studio har menymallar som bär din egen Mark, så att bakgrunden är unik för din plats och gör plats för orden av sig själv. Med Pro kan du exportera rörliga tavlor som MP4 upp till 4K och hålla priserna i ett kalkylblad: [massskapande](https://gradiently.design/sv/guide/bulk-create-from-spreadsheet) fyller varje skärms text och tabeller från det, vilket passar en kedja som kör samma meny på flera platser. ## FAQ ### Vilken storlek ska en digital menytavla ha? Designa i 1920×1080 för en liggande tv, eller 1080×1920 för en skärm på högkant. Använd 3840×2160 bara om din skärm och spelare hanterar 4K-filer. ### Hur stor ska texten vara på en menyskärm? Det beror på skärmstorlek och avstånd, så testa från slutet av kön. På en design med 1080 pixlars höjd är artikelnamn på omkring 56 till 72 pixlar en vettig utgångspunkt. ### Ska en digital menytavla ha mörk eller ljus bakgrund? Mörk fungerar oftast bättre. Den minskar bländning i rummet och gör ljus text till det ljusaste på skärmen. ### Vilket filformat använder menyskärmar? PNG eller JPG för stilla tavlor och MP4 för rörliga. Nästan varje smart-tv och skyltspelare spelar MP4 från ett USB-minne eller en app. ### Ska en menytavla vara animerad? Mjuk bakgrundsrörelse hjälper den att fånga blicken, men håll artikelnamn och priser stilla så att folk kan läsa dem.