\n Du kanske t\u00e4nker: hur h\u00e4nger allt detta ihop med mobildesign? Jag \u00e4r glad att du fr\u00e5gade! Anledningen ligger i sm\u00e5 sk\u00e4rmstorlekar som bara ska inneh\u00e5lla de block och alternativ som verkligen beh\u00f6vs.\n<\/p>\n
\n Anv\u00e4ndbarhet \u00e4r inte vad en kund ser, det \u00e4r n\u00e5got han k\u00e4nner n\u00e4r han surfar i en mobilbutik. L\u00e5t honom k\u00e4nna sig hemma.\n<\/p>\n
\n Princip 2: Prototypframst\u00e4llning
\n<\/h5>\n
\n N\u00e4r du har samlat in all n\u00f6dv\u00e4ndig information om f\u00f6retaget kan du b\u00f6rja designa dess mobilsajt. Det \u00e4r b\u00e4ttre att b\u00f6rja med en prototyp som avsev\u00e4rt f\u00f6renklar processen. En prototyp b\u00f6r inneh\u00e5lla alla strukturella element p\u00e5 sidan: textblock, bilder, l\u00e4nkar, knappar, rubriker och titlar, ing\u00e5ngar, etc. Du kan skapa prototyper i olika program som Photoshop eller Axure eller till och med p\u00e5 papper.\n<\/p>\n
\n F\u00f6r det f\u00f6rsta kommer en prototyp att hj\u00e4lpa dig att f\u00f6rst\u00e5 projektet b\u00e4ttre. N\u00e4r du skapar den kommer du noggrant att t\u00e4nka \u00f6ver alla element och deras positioner, s\u00e5 n\u00e4sta steg \u2013 att rita din design \u2013 blir mycket l\u00e4ttare.\n<\/p>\n \n F\u00f6r det andra, genom att skapa en prototyp sparar du mycket tid p\u00e5 framtida korrigeringar: det \u00e4r b\u00e4ttre att g\u00f6ra dem p\u00e5 den h\u00e4r scenen \u00e4n p\u00e5 n\u00e4sta.\n<\/p>\n \n Innan du skapar en prototyp b\u00f6r du best\u00e4mma dig f\u00f6r vilken enhet du ska skapa den: en mobiltelefon eller en surfplatta. T\u00e4nk dessutom p\u00e5 att var och en av dessa enheter har st\u00e5ende och liggande l\u00e4gen. Notera alla strukturella element som b\u00f6r finnas p\u00e5 din prototyp f\u00f6r att inte gl\u00f6mma n\u00e5gonting.\n<\/p>\n \n Till huvudsidan i en onlinebutik beh\u00f6ver vi till exempel: logotyp, kassa, s\u00f6kf\u00e4lt, navigering, produktblock med bilder, titlar, korta beskrivningar och pris samt lite allm\u00e4n text om butiken. N\u00e4r alla dessa element \u00e4r uppr\u00e4knade kan du b\u00f6rja skapa fyra prototyper: f\u00f6r en mobiltelefon med st\u00e5ende och liggande l\u00e4gen och f\u00f6r en surfplatta med st\u00e5ende och liggande l\u00e4gen.\n<\/p>\n \n N\u00e4r dina prototyper \u00e4r klara och godk\u00e4nda kan du b\u00f6rja designa gr\u00e4nssnittet.\n<\/p>\n \n Ett gr\u00e4nssnitt \u00e4r det f\u00f6rsta en bes\u00f6kare ser n\u00e4r han landar i en webbutik. Interface s\u00e4tter butikstonen vilket \u00e4r mycket viktigt, s\u00e5 ditt uppdrag som designer \u00e4r att g\u00f6ra denna ton positiv och bygga en positiv attityd.\n<\/p>\n \n Hj\u00e4lp bes\u00f6karna att snabbt f\u00f6rst\u00e5 var de \u00e4r, vad de kan f\u00e5, vilka funktioner och funktioner de kan anv\u00e4nda. Det kan uppn\u00e5s genom specifik f\u00e4rganv\u00e4ndning, indrag, ikoner, typsnitt. Om du beh\u00f6ver visa kassan \u2013 l\u00e4gg till en kassaikon; om du beh\u00f6ver infoga en l\u00e4nk \u2013 markera den med f\u00e4rg.\n<\/p>\n \n Det finns tv\u00e5 grundl\u00e4ggande s\u00e4rdrag hos mobila enheter: deras storlek och hur en anv\u00e4ndare interagerar med en webbplats via dessa enheter: han anv\u00e4nder sina fingrar som \u00e4r mycket st\u00f6rre \u00e4n en mark\u00f6r p\u00e5 ett skrivbord. Du b\u00f6r ha dessa egenheter i \u00e5tanke n\u00e4r du designar f\u00f6r mobilen.\n<\/p>\n \n Klickbar omr\u00e5desstorlek:<\/strong>\n <\/p>\n \n P\u00e5 grund av ovan n\u00e4mnda egenskaper hos mobila enheter b\u00f6r en optimal klickbar area vara st\u00f6rre \u00e4n 44x44px. Om du inte vill frustrera dina bes\u00f6kare genom felklick, f\u00f6rs\u00f6k att g\u00f6ra alla klickbara element (l\u00e4nkar, knappar, s\u00f6kf\u00e4lt, etc.) 44x44px eller st\u00f6rre f\u00f6r mdpi-uppl\u00f6sning f\u00f6r Android-enheter och icke-retina-sk\u00e4rmar f\u00f6r iOS-enheter. F\u00f6r andra uppl\u00f6sningar b\u00f6r du skala upp den.\n <\/p>\n<\/li>\n \n Teckensnittsstorlek:<\/strong>\n <\/p>\n \n Du b\u00f6r ge dina bes\u00f6kare snabba scanningsalternativ och gl\u00f6m inte samtidigt deras syn. Det \u00e4r d\u00e4rf\u00f6r din teckenstorlek inte b\u00f6r vara mindre \u00e4n 11 \u200b\u200bpkt. Denna storlek s\u00e4kerst\u00e4ller god l\u00e4sbarhet f\u00f6rutsatt att den anv\u00e4nds med kontrastbakgrund. Men 11pt \u00e4r mer l\u00e4mpligt f\u00f6r platsh\u00e5llare, tips och mindre viktig information. F\u00f6r produktbeskrivningar och viktiga textblock \u00e4r 13pt mer l\u00e4mpligt.\n <\/p>\n<\/li>\n \n Produktbilder Storlek:<\/strong>\n <\/p>\n \n Det kommer inte att vara en \u00f6verdrift om jag s\u00e4ger att produktbilder \u00e4r ansvariga f\u00f6r att s\u00e4lja produkterna (i de flesta fall). M\u00e5nga hoppar \u00f6ver att l\u00e4sa detaljer, de beh\u00f6ver bara bilder som visar en produkt fr\u00e5n alla m\u00f6jliga vinklar. Detta inneb\u00e4r att produktbilder b\u00f6r vara m\u00e4rkbara och tillr\u00e4ckligt stora f\u00f6r att g\u00f6ra det m\u00f6jligt f\u00f6r kunder att granska en produkt i detaljer, du kan till och med l\u00e4gga till ett zoomalternativ f\u00f6r det.\n <\/p>\n \n En produktbild b\u00f6r uppta inte mindre \u00e4n 45 % av en mobiltelefons sk\u00e4rmbredd i st\u00e5ende orientering; och mer \u00e4n 30 % i landskapsorientering. Detta kommer att hj\u00e4lpa en kund att se produktdetaljerna i allm\u00e4nhet och l\u00e4gga m\u00e4rke till dess egenheter. N\u00e4r det g\u00e4ller surfplattor kan du sj\u00e4lv r\u00e4kna ut den b\u00e4sta bildstorleken.\n <\/p>\n \n F\u00f6rutom bildstorleken b\u00f6r du ocks\u00e5 t\u00e4nka p\u00e5 bildkvaliteten. Saken \u00e4r att de flesta moderna mobila enheter anv\u00e4nder retina-sk\u00e4rm, s\u00e5 bilder f\u00f6r 360x640px sk\u00e4rmuppl\u00f6sning kommer inte att se bra ut p\u00e5 sk\u00e4rmar med 720x1280px eller 1080x1920px uppl\u00f6sningar. Du b\u00f6r alltid komma ih\u00e5g att kvaliteten p\u00e5 bilder \u00e4r en av de viktigaste sakerna f\u00f6r en webbutik.\n <\/p>\n<\/li>\n \n Ikonstorlek:<\/strong>\n <\/p>\n \n Ikoner uppfattas mycket l\u00e4ttare \u00e4n text, det \u00e4r d\u00e4rf\u00f6r ikoner vanligtvis anv\u00e4nds f\u00f6r tips ist\u00e4llet f\u00f6r text. \u00c5 ena sidan ska ikoner m\u00e4rkas; men \u00e5 andra sidan b\u00f6r de inte vara f\u00f6r framtr\u00e4dande eftersom de spelar en sekund\u00e4r roll. Om du till exempel l\u00e4gger till ett s\u00f6kf\u00e4lt med h\u00f6jden 44 pixlar l\u00e4gger du till ett f\u00f6rstoringsglas med storleken 24\u00d724 pixlar. Detta skulle vara tillr\u00e4ckligt f\u00f6r att anv\u00e4ndaren ska f\u00f6rst\u00e5 syftet med denna bar, och det kommer att se snyggt ut.\n <\/p>\n<\/li>\n \n Formul\u00e4rstorlek:<\/strong>\n <\/p>\n \n Nedan har jag pratat om storlekar p\u00e5 enskilda element, nu \u00e4r det dags att prata om storleken p\u00e5 ett viktigt block \u2013 form.\n <\/p>\n \n Storleken p\u00e5 en mobiltelefonsk\u00e4rm \u00e4r begr\u00e4nsad, och n\u00e4r en kund beh\u00f6ver fylla i ett formul\u00e4r dyker ett tangentbord upp och \u00f6verlappar ungef\u00e4r h\u00e4lften av sk\u00e4rmstorleken. Denna egenhet kr\u00e4ver att mobila former h\u00e5lls s\u00e5 minimalistiska som m\u00f6jligt. De b\u00f6r endast inneh\u00e5lla de f\u00e4lt som verkligen \u00e4r n\u00f6dv\u00e4ndiga: t.ex. namn, adress, e-post. Den h\u00e4r regeln kan f\u00f6rresten \u00e4ven till\u00e4mpas p\u00e5 skrivbordswebbplatser om du vill \u00f6ka antalet potentiella kunder: ju f\u00e4rre f\u00e4lt ett formul\u00e4r har, desto fler kommer sannolikt att skicka in det.\n <\/p>\n \n En l\u00e5ng och tr\u00e5kig v\u00e4g fr\u00e5n en input till en annan kan frustrera en kund och f\u00e5 honom att l\u00e4mna butiken.\n <\/p>\n<\/li>\n<\/ul>\n \n Varum\u00e4rkets stil b\u00f6r observeras inte bara i logotypen, visitkorten och h\u00e4ften utan ocks\u00e5 p\u00e5 en mobilsajt. Det \u00e4r mestadels f\u00e4rg som hj\u00e4lper till att visa varum\u00e4rkets stil samt framh\u00e4va nyckelelementet p\u00e5 varje sida.\n<\/p>\n \n Innan du designar ett gr\u00e4nssnitt b\u00f6r du fundera \u00f6ver vilka f\u00e4rger som kommer att anv\u00e4ndas och skapa en palett. Om du anv\u00e4nder f\u00e5 f\u00e4rger kommer gr\u00e4nssnittet att se tr\u00e5kigt ut; om du anv\u00e4nder f\u00f6r m\u00e5nga f\u00e4rger kommer gr\u00e4nssnittet att se f\u00f6r r\u00f6rigt och distraherande ut. S\u00e5 det \u00e4r b\u00e4ttre att h\u00e5lla balansen och anv\u00e4nda 6-10 f\u00e4rger. Detta \u00e4r ett optimalt antal men det kan givetvis finnas n\u00e5gra undantag.\n<\/p>\n \n H\u00e4r \u00e4r en steg-f\u00f6r-steg-guide f\u00f6r att v\u00e4lja f\u00e4rger f\u00f6r en e-handelswebbplats:\n<\/p>\n \n F\u00e4rgkombinationerna du har skapat ska vara harmoniska. Kom ih\u00e5g kontrasten eftersom den hj\u00e4lper till att locka bes\u00f6karnas uppm\u00e4rksamhet till de viktigaste elementen, till exempel knappen ”L\u00e4gg till i kundvagn”.\n<\/p>\n \n Precis som med f\u00e4rger kan du skapa en ”palett” f\u00f6r typsnitt du ska anv\u00e4nda: g\u00f6r en lista \u00f6ver typsnittens namn, storlekar och stilar.\n<\/p>\n \n Typsnitt ska ha h\u00f6g l\u00e4sbarhet och enkelt f\u00f6rmedla informationen till potentiella kunder. Undvik d\u00e4rf\u00f6r f\u00f6r komplexa teckensnitt som \u00e4r sv\u00e5ra att l\u00e4sa: kunder kommer inte att f\u00f6rlora sin tid p\u00e5 att f\u00f6rs\u00f6ka f\u00f6rst\u00e5 vad du f\u00f6rs\u00f6ker erbjuda.\n<\/p>\n \n Din typsnittspalett kan se ut som en enkel txt-fil d\u00e4r du sparar f\u00f6ljande information:\n<\/p>\n \n Rubrik 1 \u2013 RobotoLight 36pt\n<\/p>\n \n Det \u00e4r upp till dig att best\u00e4mma vilket typsnitt som ska anv\u00e4ndas f\u00f6r det h\u00e4r eller det elementet. Varje typsnitt har sin egen betydelse och karakt\u00e4r som kommer att skickas till webbplatsen, s\u00e5 du b\u00f6r vara f\u00f6rsiktig med att v\u00e4lja r\u00e4tt typsnitt.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\")
<\/a><\/p>\n<\/a><\/p>\n\n Princip 3: Gr\u00e4nssnitt
\n<\/h5>\n<\/a><\/p>\n\n Princip 4: Storlekar
\n<\/h5>\n<\/a><\/p>\n\n
\n Princip 5: F\u00e4rg
\n<\/h5>\n\n
<\/a><\/p>\n\n Princip 6: Teckensnitt
\n<\/h5>\n