som du vet finns det många olika saker som du måste ta hänsyn till när du bygger en mobil applikation.
med så mycket att hålla reda på kan vissa delar av utvecklingen gå vilse i shuffle. Det är därför jag alltid säga att du bör hålla ordning med inlämning checklistor och andra verktyg.,
men en faktor som verkar alltid få sopas under mattan och glömde är själva skärmen på de olika enheterna.
skärmstorlek och skärmupplösning är två saker som du måste tänka på före, under och efter att du har utvecklat en mobilapp.
varför?
till att börja med är skärmstorleken viktig eftersom det finns många olika skärmstorlekar. Oavsett om du bestämmer dig för att bygga för Apple eller Android, har båda plattformarna massor av olika enheter.
upplösning är också viktigt., Det beror på att upplösningen av olika skärmar kan påverka hur designers bygger sina appar. Baserat på denna information finns det vissa verktyg som alla appdesigners måste ha.
så som du kan se är både skärmstorlek och upplösningsstorlek viktiga, men av olika skäl.
förstå storlek och upplösning kan hjälpa dig att optimera din mobilapp för en mängd olika enheter. Detta hänvisar till både smartphones, surfplattor och till och med smarta TV-apparater eller andra skärmar där användare kan ladda ner din app.
med detta i åtanke ville jag ge dig en informativ guide för dessa ämnen., Oavsett vilket utvecklingsstadium din app är för närvarande i, är jag säker på att du hittar det här till stor hjälp.
här är vad du behöver veta.
hur man beräknar pixlar per tum
Du måste förstå skillnaden mellan skärmens storlek och dimensionerna på skärmupplösningen.
skärmstorleken mäts med inches. Det är storleken på den faktiska skärmen på en viss enhet.
här är till exempel skärmstorlekarna för några av de senaste iPhones från Apple som du förmodligen känner till.,
mätningar tas från ett hörn av skärmen till det motsatta diagonala hörnet. Det är ganska enkelt, och alla med en linjal kan göra det här.
skärmupplösning är lite annorlunda. Upplösningen mäts med antalet urskiljbara pixlar som kan visas i varje dimension.
skärmupplösningen för iPhone X är 2436 x 1125. Samtidigt som Samsung Galaxy Note 8 har en upplösning på 2960 x 1440.
du behöver veta storleken på skärmen samt upplösningen för att beräkna pixlarna per tum (PPI) på en enhet., Så här beräknar du PPI:
- Lägg till kvadraterna för båda siffrorna i upplösningen
- ta kvadratroten av det numret
- dela föregående nummer med skärmens storlek
det låter lite komplicerat, men jag ska ge dig ett exempel för att visa dig vad jag pratar om. Du kommer förmodligen att behöva en miniräknare för att göra detta.
låt oss använda iPhone X, eftersom det är nytt, och vi har redan täckt skärmstorlek och upplösning. Vi har all information vi behöver för att beräkna PPI.,
Enligt Apple tekniska specifikationer, deras PPI av 2436 x 1125 pixel med 5,8 tums iPhone X 458, så våra beräkningar var inte långt borta.
prova ett par exempel på egen hand med hjälp av denna formel. Det är lätt att ta reda på de exakta specifikationerna för olika enheter genom att bara titta upp det från tillverkarens hemsida.
i grund och botten måste du inse att eftersom skärmstorlek och skärmupplösning båda spelar en roll för att bestämma PPI, kan det berätta hur bra en bild visas på den specifika enheten.,
Så vad händer om du försöker kombinera denna formel med två enheter av olika storlekar och upplösningar? Det kommer bara inte att fungera bra.
till exempel, låt oss ta upplösningen av en gammal iPhone-modell som 4-tums SE och tillämpa den på 12,9-tums iPad Pro.
följ formeln med pixelupplösningen ovan.
- 1136 x 1136 + 640 x 640= 1700096
- 1700096/1303.88 = 1303.88
men nu istället för att dela det numret med 4-tums skärmstorlek, som du ska, låt oss dela upp det med 12.,9, vilket är storleken på en iPad Pro.
- 1303,88/12.9 = 101,08
som du kan se. PPI är super låg, vilket innebär att om denna upplösning var på en större skärm, skulle bilderna bara inte beräkna bra.
det är därför du behöver optimera dina bilder för att ta hänsyn till olika skärmstorlekar, men vi kommer att diskutera det mer detaljerat inom kort.
olika typer av skärmar
Så vi har redan fastställt att olika enheter har ett brett utbud av skärmstorlekar och upplösningar. Men med det sagt är vissa resolutioner mer populära än andra.,
baserat på Internet webbtrafik ur ett globalt perspektiv, 720 x 1280 Pixel smartphones är de mest populära.
som du kan se varierar dessa siffror beroende på plats. Det är dock fortfarande värdefull information. Det är alltid viktigt att veta vilka typer av enheter som är mest populära när det gäller mobilappsindustrin.
detta kan vara till stor hjälp om din målmarknad eller majoriteten av personer som använder enheten finns i de länder där dessa procentandelar är höga.,
Du måste också redogöra för andra typer av skärmar som:
- HD-skärmar
- QHD-skärmar
HD står för high definition, medan QHD står för quarter high definition.
pixelupplösningen för högupplösta skärmar är 1920 x 1080. Quarter högupplösta skärmar har en 960 x 540 pixelupplösning.
några exempel på QHD-skärmar inkluderar:
- Sony Xperia M2
- HTC Desire 601
- Samsung Galaxy S4
Så, vad är mer populärt? Full HD-skärmar eller QHD-skärmar?, Forskning visar att QHD-skärmar ser en nedgång i popularitet.
samtidigt ser vi en ökning av full HD-skärmar när det gäller global webbtrafik.
planera därefter när du bygger och utformar olika delar av din mobilapp.
för dig som planerar att bygga en app i framtiden bör du fokusera mer på HD-skärmar i motsats till QHD-skärmar.
om dessa trender fortsätter, vilket jag förväntar mig att de ska, kommer QHD-skärmar att bli en sak av det förflutna., Men för tillfället bör du fortfarande se till att din app, bilder och mönster kan rymma så många enheter som möjligt.
hur du kan dra nytta av olika skärmstorlekar
OK. Så telefoner, tabletter och andra enheter har olika skärmstorlekar, upplösningar och pixlar per tum. Det finns även olika typer av skärmar.
nu vad?
som utvecklare behöver du bara hålla all denna information i åtanke så att din app är optimerad för alla olika storlekar och enheter.,
om du bara bygger din app med en typ av skärm i åtanke kommer det att påverka användarupplevelsen för andra enheter negativt. Dåliga användarupplevelser kommer att skada din bottenlinje, vilket är något du uppenbarligen vill undvika.
som designer bör du ha frihet och flexibilitet för att bli kreativ med dina mönster och animationer.
se till att du står för olika skärmstorlekar när du använder automatisk Layout för att skapa avancerade iOS-animationer.
här är något annat att komma ihåg., Din app och andra bilder behöver fortfarande ladda felfritt oavsett hur användaren håller sin enhet.
det stämmer. Förutom dimensionerna av deras skärmstorlek och upplösning måste du också se till att det finns en sömlös övergång mellan stående och liggande läge.
beroende på skärmens storlek är användarna mer benägna att luta sig mot en orientering över en annan. Här är några data som visar dig vad jag pratar om.
det här är intressant., Som ni kan se, när vi kommer till enheter med skärmstorlekar större än 9 inches, det finns en betydande ökning av mängden användare som använder liggande läge.
så för det mesta kan vi anta att människor föredrar att använda landskapsorienteringen på sina tabletter.
men med det sagt måste du fortfarande testa din app, bilder och designelement för båda orienteringarna och se till att den är optimerad för alla upplösningar.
slutsats
det finns en skillnad mellan skärmstorlek och skärmupplösning.,
Du kommer att använda båda dessa siffror för att hjälpa dig att beräkna pixlar per tum (PPI) för specifika enheter.
det här är viktigt att veta eftersom det påverkar hur du utformar din app. Du kan inte bygga den med bara en telefon, surfplatta eller plattform i åtanke.
för att användarna ska få den bästa upplevelsen måste appen optimeras fullt ut för så många enheter som möjligt.
Det finns också en skillnad mellan HD och QHD-skärmar., Även om skärmstorlekar rör sig mot en standardupplösning, behöver appdesigners fortfarande vara medvetna om att deras app kommer att ses på många olika typer av skärmar.
så under överskådlig framtid måste du fortsätta designa och testa för så många oförutsedda händelser som möjligt.
hur passar designelementen i din app de olika skärmstorlekarna och upplösningarna för användare med olika enheter?