{"id":249628,"date":"2023-07-01T09:52:00","date_gmt":"2023-07-01T06:52:00","guid":{"rendered":"https:\/\/inform.click\/sahkoisen-kaupankaynnin-mobiilisuunnitteluperiaatteiden-opas\/"},"modified":"2023-07-01T10:28:00","modified_gmt":"2023-07-01T07:28:00","slug":"sahkoisen-kaupankaynnin-mobiilisuunnitteluperiaatteiden-opas","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/sahkoisen-kaupankaynnin-mobiilisuunnitteluperiaatteiden-opas\/","title":{"rendered":"S\u00e4hk\u00f6isen kaupank\u00e4ynnin mobiilisuunnitteluperiaatteiden opas"},"content":{"rendered":"<p>\n  El\u00e4mme korkean teknologian maailmassa, jossa l\u00e4hes jokaisella ihmisell\u00e4 on p\u00e4ivitt\u00e4inen p\u00e4\u00e4sy Internetiin eri laitteiden kautta.\n<\/p>\n<p>\n  Muutama vuosi sitten useimmat meist\u00e4 k\u00e4yttiv\u00e4t siihen vain p\u00f6yt\u00e4tietokoneita, mutta viime vuosina tilanne on muuttunut. Nyt mobiililaitteet ottavat johtoaseman, kun yh\u00e4 useammat ihmiset k\u00e4ytt\u00e4v\u00e4t mieluummin tablettejaan ja matkapuhelimiaan Internetiss\u00e4 surffaamiseen.\n<\/p>\n<p>\n  Verkkokauppa ei ole poikkeus; my\u00f6s mobiililaitteiden k\u00e4ytt\u00f6 lis\u00e4\u00e4ntyy. Mobiiliyst\u00e4v\u00e4llisyys on nyky\u00e4\u00e4n v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4 kaikille verkkokauppasivustoille. Jopa Google pit\u00e4\u00e4 mobiiliyst\u00e4v\u00e4llisyytt\u00e4 sijoitussignaalina. Joten t\u00e4ss\u00e4 on yleiskatsaus mobiilisivustotyyppeihin ja yksityiskohtainen opas verkkokaupan mobiilisuunnittelun periaatteista.\n<\/p>\n<p>\n  Mobiiliyst\u00e4v\u00e4llisten sivustojen tyypit\n<\/p>\n<p>\n  Mobiiliyst\u00e4v\u00e4llisten sivustojen luomiseen on muutamia tapoja, ja t\u00e4ss\u00e4 ovat yleisimm\u00e4t: responsiivinen suunnittelu, mobiilisovellus ja erillinen mobiiliversio sivustosta. Jokaisella n\u00e4ist\u00e4 tyypeist\u00e4 on hyv\u00e4t ja huonot puolensa, joita tulee harkita huolellisesti ennen kuin valitset yrityksellesi parhaiten sopivan. T\u00e4ss\u00e4 on tarkempi yleiskatsaus kustakin mobiiliyst\u00e4v\u00e4llisen sivuston ratkaisusta.\n<\/p>\n<h5>\n  Responsiivinen muotoilu<br \/>\n<\/h5>\n<p>\n  T\u00e4m\u00e4 on l\u00e4hestymistapa, kun sinulla on yksi sivusto, joka toimii yht\u00e4 hyvin kaikilla laitteilla: p\u00f6yt\u00e4tietokoneilla, tableteilla ja erilaisilla matkapuhelimilla. Sivuston elementtien (kuvat, fontit, lohkot jne.) kokoa muutetaan k\u00e4ytt\u00e4m\u00e4si n\u00e4yt\u00f6n resoluution mukaan.\n<\/p>\n<p>\n  Responsiivisen suunnittelun suuri etu on, ett\u00e4 k\u00e4ytt\u00e4j\u00e4 n\u00e4kee saman sivuston kaikilla laitteillaan. Mutta samalla on joitain haittoja, joista suurin on tarve ottaa huomioon kaikki mahdolliset skenaariot ja laajalle levinneet n\u00e4yt\u00f6n resoluutiot. Suunnittelijan tulee p\u00e4\u00e4tt\u00e4\u00e4, mitk\u00e4 elementit n\u00e4ytet\u00e4\u00e4n kaikissa laitteissa ja mitk\u00e4 elementit ovat v\u00e4hemm\u00e4n t\u00e4rkeit\u00e4 ja ne voidaan j\u00e4tt\u00e4\u00e4 pois pienilt\u00e4 n\u00e4yt\u00f6ilt\u00e4. Lis\u00e4ksi mukautuvat asettelut vaativat enemm\u00e4n koodausta, mik\u00e4 voi joskus tuhota sivuston.\n<\/p>\n<p>\n  T\u00e4m\u00e4ntyyppinen mobiilisivusto on hyv\u00e4 valinta pienille ja keskisuurille verkkokaupoille.\n<\/p>\n<h5>\n  Mobiilisovellus<br \/>\n<\/h5>\n<p>\n  Mobiilisovellus on hyv\u00e4 tapa antaa asiakkaille kaikki tarvittavat tiedot k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisell\u00e4 tavalla. Mutta samalla t\u00e4m\u00e4 ratkaisu vaatii suuria resursseja, sill\u00e4 mobiilisovellus kehitet\u00e4\u00e4n p\u00e4\u00e4sivustosta erill\u00e4\u00e4n. Lis\u00e4ksi sovellus tulisi kehitt\u00e4\u00e4 kaikille alustoille: iOS, Android, Windows Phone.\n<\/p>\n<p>\n  Mobiilisovellus on hyv\u00e4 valinta suuriin verkkokauppoihin, joissa on monia luokkia ja tuotteita. Jos asiakas vierailee sivustolla melko usein l\u00f6yt\u00e4\u00e4kseen, ostaakseen tai kysy\u00e4kseen jotain, se on helpompi tehd\u00e4 sovelluksen kautta kuin sivuston kautta.\n<\/p>\n<h5>\n  Mobiiliversio<br \/>\n<\/h5>\n<p>\n  Mobiilisivustoversiossa yhdistyv\u00e4t responsiivisen suunnittelun ja mobiilisovelluksen edut, joten se on optimaalinen tapa tulla mobiiliyst\u00e4v\u00e4lliseksi.\n<\/p>\n<p>\n  Toisaalta mobiiliversio on kehitetty erill\u00e4\u00e4n ty\u00f6p\u00f6yt\u00e4sivustosta ja se voi sis\u00e4lt\u00e4\u00e4 vain v\u00e4ltt\u00e4m\u00e4tt\u00f6m\u00e4t lohkot v\u00e4hemm\u00e4ll\u00e4 koodilla. Toisaalta ei ole tarvetta suunnitella ja kehitt\u00e4\u00e4 mobiiliversiota jokaiselle alustalle erikseen, sill\u00e4 mobiilisivustoversio n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 kaikilla laitteilla ja n\u00e4yt\u00f6ill\u00e4.\n<\/p>\n<p>\n  Jotkut suuret kaupat yhdist\u00e4v\u00e4t edell\u00e4 mainitut tyypit ja tarjoavat 2 versiota samanaikaisesti: mobiiliversion ja sovelluksen. Asiakkaan on vain p\u00e4\u00e4tett\u00e4v\u00e4, mik\u00e4 toimii h\u00e4nelle parhaiten.\n<\/p>\n<p>\n  Riippumatta siit\u00e4, mink\u00e4 muunnelman kauppias tarvitsee, suunnittelijan tulee noudattaa tiettyj\u00e4 periaatteita suunniteltaessaan mobiilisivustoa. Listaan \u200b\u200bniist\u00e4 t\u00e4rkeimm\u00e4t alla. Puhun enimm\u00e4kseen mobiiliversioista, koska ne yhdist\u00e4v\u00e4t ideoita responsiivisesta suunnittelusta ja sovelluksesta.\n<\/p>\n<h3>\n  Verkkokaupan mobiilisuunnittelun p\u00e4\u00e4periaatteet<br \/>\n<\/h3>\n<p>\n  Jos sinulla on kokemusta vain ty\u00f6p\u00f6yt\u00e4sivustojen suunnittelusta, mobiililaitteiden suunnittelu voi olla vaikeaa. Suunnittelusi ei pit\u00e4isi olla pelk\u00e4st\u00e4\u00e4n houkutteleva, vaan my\u00f6s yst\u00e4v\u00e4llinen mobiilik\u00e4ytt\u00e4jille.\n<\/p>\n<p>\n  Mobiililaitteiden suunnittelussa suurin ongelma on n\u00e4yt\u00f6n koko. Tableteissa ja matkapuhelimissa on paljon pienemm\u00e4t n\u00e4yt\u00f6t kuin p\u00f6yt\u00e4tietokoneissa. Mutta silti sinun pit\u00e4isi pysty\u00e4 tarjoamaan mobiilik\u00e4ytt\u00e4jille k\u00e4tev\u00e4t navigointimahdollisuudet ja varmistamaan saumaton k\u00e4ytt\u00f6kokemus.\n<\/p>\n<h5>\n  Periaate 1: K\u00e4ytett\u00e4vyys<br \/>\n<\/h5>\n<p>\n  Nyky\u00e4\u00e4n suunnittelijan tulee luoda kauniita k\u00e4ytt\u00f6liittymi\u00e4 k\u00e4ytett\u00e4vyytt\u00e4 ajatellen. Saavuttaaksesi suunnittelemasi verkkokaupan mahdollisimman tehokkaan, sinun tulee tutustua siihen paremmin. Aloita tutkimuksesta ja vastaa seuraaviin kysymyksiin:\n<\/p>\n<ul>\n<li>Mit\u00e4 tuotteita t\u00e4\u00e4ll\u00e4 myyd\u00e4\u00e4n?\n  <\/li>\n<li>Kuka on t\u00e4m\u00e4n kaupan keskim\u00e4\u00e4r\u00e4inen asiakas?\n  <\/li>\n<li>Mit\u00e4 vaihtoehtoja pit\u00e4isi olla saatavilla? Kumpi n\u00e4ist\u00e4 vaihtoehdoista on t\u00e4rke\u00e4mpi?\n  <\/li>\n<\/ul>\n<p>\n  Saatat ajatella: miten t\u00e4m\u00e4 kaikki liittyy mobiilisuunnitteluun? Kiva, ett\u00e4 kysyit! Syyn\u00e4 on pieni n\u00e4ytt\u00f6, jonka pit\u00e4isi sis\u00e4lt\u00e4\u00e4 vain ne lohkot ja vaihtoehdot, joita todella tarvitaan.\n<\/p>\n<p>\n  K\u00e4ytett\u00e4vyys ei ole sit\u00e4, mit\u00e4 asiakas n\u00e4kee, se on jotain, jonka h\u00e4n kokee liikkuessaan mobiilikaupassa. Anna h\u00e4nen tuntea olonsa kotoisaksi.\n<\/p>\n<h5>\n  Periaate 2: Prototyyppi<br \/>\n<\/h5>\n<p>\n  Kun olet ker\u00e4nnyt kaikki tarvittavat tiedot yrityksest\u00e4, voit ryhty\u00e4 suunnittelemaan sen mobiilisivustoa. On parempi aloittaa prototyypist\u00e4, joka yksinkertaistaa prosessia huomattavasti. Prototyypin tulee sis\u00e4lt\u00e4\u00e4 kaikki sivun rakenneosat: tekstilohkot, kuvat, linkit, painikkeet, otsikot ja otsikot, sy\u00f6tteet jne. Voit luoda prototyyppej\u00e4 eri ohjelmissa, kuten Photoshopissa tai Axuressa, tai jopa paperille.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Ensinn\u00e4kin prototyyppi auttaa sinua ymm\u00e4rt\u00e4m\u00e4\u00e4n projektia paremmin. Sit\u00e4 luodessasi mietit huolellisesti kaikki elementit ja niiden sijainnit, joten seuraava vaihe \u2013 suunnittelun piirt\u00e4minen \u2013 on paljon helpompi.\n<\/p>\n<p>\n  Toiseksi, luomalla prototyypin s\u00e4\u00e4st\u00e4t paljon aikaa tuleviin korjauksiin: on parempi tehd\u00e4 ne t\u00e4ss\u00e4 vaiheessa kuin seuraavissa.\n<\/p>\n<p>\n  Ennen prototyypin luomista sinun tulee p\u00e4\u00e4tt\u00e4\u00e4, mille laitteelle aiot luoda sen: matkapuhelimelle vai tabletille. Huomaa lis\u00e4ksi, ett\u00e4 jokaisessa n\u00e4ist\u00e4 laitteista on pysty- ja vaakatilat. Merkitse muistiin kaikki prototyypist\u00e4si l\u00f6ytyv\u00e4t rakenneosat, jotta et unohda mit\u00e4\u00e4n.\n<\/p>\n<p>\n  Esimerkiksi verkkokaupan etusivulle tarvitsemme: logon, kassan, hakupalkin, navigoinnin, tuotelohkot kuvilla, otsikoilla, lyhyill\u00e4 kuvauksilla ja hinnalla sek\u00e4 yleist\u00e4 teksti\u00e4 kaupasta. Kun kaikki n\u00e4m\u00e4 elementit on lueteltu, voit aloittaa nelj\u00e4n prototyypin luomisen: matkapuhelimelle, jossa on pysty- ja vaakatila, ja tabletille, jossa on pysty- ja vaakatila.\n<\/p>\n<p>\n  Kun prototyyppisi ovat valmiit ja hyv\u00e4ksytty, voit aloittaa k\u00e4ytt\u00f6liittym\u00e4n suunnittelun.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cf9b544.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cf9b544.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Periaate 3: K\u00e4ytt\u00f6liittym\u00e4<br \/>\n<\/h5>\n<p>\n  K\u00e4ytt\u00f6liittym\u00e4 on ensimm\u00e4inen asia, jonka k\u00e4vij\u00e4 n\u00e4kee saapuessaan verkkokauppaan. K\u00e4ytt\u00f6liittym\u00e4 asettaa kaupan s\u00e4vyn, mik\u00e4 on eritt\u00e4in t\u00e4rke\u00e4\u00e4, joten sinun teht\u00e4v\u00e4si suunnittelijana on tehd\u00e4 t\u00e4st\u00e4 s\u00e4velest\u00e4 positiivinen ja rakentaa positiivista asennetta.\n<\/p>\n<p>\n  Auta vierailijoita nopeasti ymm\u00e4rt\u00e4m\u00e4\u00e4n, miss\u00e4 he ovat, mit\u00e4 he voivat saada, mit\u00e4 toimintoja ja ominaisuuksia he voivat k\u00e4ytt\u00e4\u00e4. Se voidaan saavuttaa tietyill\u00e4 v\u00e4reill\u00e4, sisennyksill\u00e4, kuvakkeilla ja fonteilla. Jos haluat n\u00e4ytt\u00e4\u00e4 kassan &#8211; lis\u00e4\u00e4 kassakuvake; jos sinun on lis\u00e4tt\u00e4v\u00e4 linkki &#8211; korosta se v\u00e4rill\u00e4.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d205006.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d205006.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Periaate 4: Koot<br \/>\n<\/h5>\n<p>\n  Mobiililaitteilla on kaksi perusominaisuutta: niiden koko ja tapa, jolla k\u00e4ytt\u00e4j\u00e4 on vuorovaikutuksessa sivuston kanssa n\u00e4iden laitteiden kautta: h\u00e4n k\u00e4ytt\u00e4\u00e4 sormiaan, jotka ovat paljon suurempia kuin ty\u00f6p\u00f6yd\u00e4n kohdistin. Sinun tulee ottaa n\u00e4m\u00e4 erityispiirteet huomioon, kun suunnittelet mobiililaitteille.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d3b318d.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d3b318d.webp\" alt=\"\" \/><\/a><\/p>\n<ul>\n<li>\n<p>\n      <strong>Napsautettavan alueen koko:<\/strong>\n    <\/p>\n<p>\n      Mobiililaitteiden edell\u00e4 mainituista ominaisuuksista johtuen optimaalisen napsautettavan alueen koon tulisi olla suurempi kuin 44x44px. Jos et halua turhauttaa vierailijoitasi virheellisill\u00e4 klikkauksilla, yrit\u00e4 tehd\u00e4 kaikista napsautettavista elementeist\u00e4 (linkit, painikkeet, hakupalkki jne.) 44x44px tai suurempi mdpi-resoluutiolla Android-laitteilla ja ei-retina-n\u00e4yt\u00f6ill\u00e4 iOS-laitteilla.. Muissa resoluutioissa sit\u00e4 kannattaa suurentaa.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Fonttikoko:<\/strong>\n    <\/p>\n<p>\n      Sinun tulisi tarjota vierailijoille nopeat skannausvaihtoehdot ja unohtaa samalla heid\u00e4n n\u00e4k\u00f6kykyns\u00e4. Siksi fonttikoon tulee olla v\u00e4hint\u00e4\u00e4n 11 \u200b\u200bpt. T\u00e4m\u00e4 koko varmistaa hyv\u00e4n luettavuuden edellytt\u00e4en, ett\u00e4 sit\u00e4 k\u00e4ytet\u00e4\u00e4n kontrastitaustan kanssa. 11pt sopii kuitenkin paremmin paikkamerkkeihin, vihjeisiin ja v\u00e4hemm\u00e4n olennaisiin tietoihin. Tuotekuvauksiin ja t\u00e4rkeisiin tekstilohkoihin 13pt sopii paremmin.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Tuotekuvien koko:<\/strong>\n    <\/p>\n<p>\n      Ei liene liioittelua, jos sanon, ett\u00e4 tuotekuvat ovat vastuussa tuotteiden myynnist\u00e4 (useimmissa tapauksissa). Monet ihmiset j\u00e4tt\u00e4v\u00e4t lukematta yksityiskohtia, he tarvitsevat vain kuvia, jotka n\u00e4ytt\u00e4v\u00e4t tuotteen kaikista mahdollisista n\u00e4k\u00f6kulmista. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 tuotekuvien tulee olla havaittavissa ja riitt\u00e4v\u00e4n suuria, jotta asiakkaat voivat tarkastella tuotetta yksityiskohtaisesti. Voit jopa lis\u00e4t\u00e4 siihen zoomausvaihtoehdon.\n    <\/p>\n<p>\n      Tuotekuvan tulee peitt\u00e4\u00e4 pystysuunnassa v\u00e4hint\u00e4\u00e4n 45 % matkapuhelimen n\u00e4yt\u00f6n leveydest\u00e4; ja yli 30 % vaakasuunnassa. T\u00e4m\u00e4 auttaa asiakasta n\u00e4kem\u00e4\u00e4n tuotteen tiedot yleisesti ja huomaamaan sen erityispiirteet. Mit\u00e4 tulee tablet-laitteisiin, voit selvitt\u00e4\u00e4 parhaan kuvakoon itse.\n    <\/p>\n<p>\n      Kuvien koon lis\u00e4ksi kannattaa huomioida my\u00f6s kuvien laatu. Asia on, ett\u00e4 useimmat nykyaikaiset mobiililaitteet k\u00e4ytt\u00e4v\u00e4t verkkokalvon\u00e4ytt\u00f6\u00e4, joten 360 x 640 pikselin n\u00e4ytt\u00f6resoluutiolla kuvat eiv\u00e4t n\u00e4yt\u00e4 hyv\u00e4lt\u00e4 n\u00e4yt\u00f6ill\u00e4, joiden resoluutio on 720 x 1280 pikseli\u00e4 tai 1080 x 1920 pikseli\u00e4. Kannattaa aina muistaa, ett\u00e4 kuvien laatu on yksi t\u00e4rkeimmist\u00e4 asioista verkkokaupassa.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Kuvakkeiden koko:<\/strong>\n    <\/p>\n<p>\n      Kuvakkeet havaitaan paljon helpommin kuin teksti, mink\u00e4 vuoksi kuvakkeita k\u00e4ytet\u00e4\u00e4n yleens\u00e4 vihjein\u00e4 tekstin sijaan. Toisaalta kuvakkeiden tulee olla havaittavissa; mutta toisaalta niiden ei pit\u00e4isi olla liian n\u00e4kyv\u00e4sti esill\u00e4, koska niill\u00e4 on toissijainen rooli. Jos esimerkiksi lis\u00e4\u00e4t hakupalkin, jonka korkeus on 44 kuvapistett\u00e4, lis\u00e4\u00e4 suurennuslasi, jonka koko on 24 x 24 kuvapistett\u00e4. T\u00e4m\u00e4 riitt\u00e4\u00e4, ett\u00e4 k\u00e4ytt\u00e4j\u00e4 ymm\u00e4rt\u00e4\u00e4 t\u00e4m\u00e4n palkin tarkoituksen, ja se n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Lomakkeiden koko:<\/strong>\n    <\/p>\n<p>\n      Alla olen puhunut yksitt\u00e4isten elementtien koosta, nyt on aika puhua t\u00e4rke\u00e4n lohkon koosta \u2013 muodosta.\n    <\/p>\n<p>\n      Matkapuhelimen n\u00e4yt\u00f6n koko on rajoitettu, ja kun asiakkaan on t\u00e4ytett\u00e4v\u00e4 lomake, n\u00e4kyviin tulee n\u00e4pp\u00e4imist\u00f6, joka peitt\u00e4\u00e4 noin puolet n\u00e4yt\u00f6n koosta. T\u00e4m\u00e4 erikoisuus edellytt\u00e4\u00e4, ett\u00e4 mobiililomakkeet pidet\u00e4\u00e4n mahdollisimman minimalistisina. Niiden tulee sis\u00e4lt\u00e4\u00e4 vain ne kent\u00e4t, jotka ovat todella tarpeellisia: esim. nimi, osoite, s\u00e4hk\u00f6postiosoite. Muuten, t\u00e4t\u00e4 s\u00e4\u00e4nt\u00f6\u00e4 voidaan soveltaa my\u00f6s ty\u00f6p\u00f6yt\u00e4sivustoihin, jos haluat lis\u00e4t\u00e4 liidej\u00e4: mit\u00e4 v\u00e4hemm\u00e4n lomakkeessa on kentti\u00e4, sit\u00e4 enemm\u00e4n ihmiset todenn\u00e4k\u00f6isesti l\u00e4hett\u00e4v\u00e4t sen.\n    <\/p>\n<p>\n      Pitk\u00e4 ja tyls\u00e4 \u200b\u200btie sy\u00f6tteest\u00e4 toiseen voi turhauttaa asiakkaan ja saada h\u00e4net poistumaan kaupasta.\n    <\/p>\n<\/li>\n<\/ul>\n<h5>\n  Periaate 5: V\u00e4ri<br \/>\n<\/h5>\n<p>\n  Br\u00e4ndityyli\u00e4 tulee huomioida paitsi logossa, k\u00e4yntikorteissa ja vihkosissa my\u00f6s mobiilisivustolla. Se on enimm\u00e4kseen v\u00e4ri, joka auttaa n\u00e4ytt\u00e4m\u00e4\u00e4n br\u00e4ndityyli\u00e4 sek\u00e4 korostaa kunkin sivun avainelementtej\u00e4.\n<\/p>\n<p>\n  Ennen kuin suunnittelet k\u00e4ytt\u00f6liittym\u00e4n, sinun tulee mietti\u00e4, mit\u00e4 v\u00e4rej\u00e4 k\u00e4ytet\u00e4\u00e4n, ja luoda paletti. Jos k\u00e4yt\u00e4t v\u00e4h\u00e4n v\u00e4rej\u00e4, k\u00e4ytt\u00f6liittym\u00e4 n\u00e4ytt\u00e4\u00e4 tyls\u00e4lt\u00e4; jos k\u00e4yt\u00e4t liikaa v\u00e4rej\u00e4, k\u00e4ytt\u00f6liittym\u00e4 n\u00e4ytt\u00e4\u00e4 liian sotkuselta ja h\u00e4iritsev\u00e4lt\u00e4. Joten on parempi s\u00e4ilytt\u00e4\u00e4 tasapaino ja k\u00e4ytt\u00e4\u00e4 6-10 v\u00e4ri\u00e4. T\u00e4m\u00e4 on optimaalinen luku, mutta tietysti voi olla joitain poikkeuksia.\n<\/p>\n<p>\n  T\u00e4ss\u00e4 on vaiheittainen opas v\u00e4rien valitsemiseen verkkokauppasivustolle:\n<\/p>\n<p>\n  Luomiesi v\u00e4riyhdistelmien tulee olla harmonisia. Muista kontrasti, sill\u00e4 se auttaa kiinnitt\u00e4m\u00e4\u00e4n vierailijoiden huomion t\u00e4rkeimpiin elementteihin, esimerkiksi &#8221;Lis\u00e4\u00e4 ostoskoriin&#8221; -painikkeeseen.\n<\/p>\n<ol>\n<li>Valitse sivuston p\u00e4\u00e4v\u00e4ri. Se on vastuussa mielialan v\u00e4litt\u00e4misest\u00e4.\n  <\/li>\n<li>Valitse toissijainen v\u00e4ri. Se auttaa p\u00e4\u00e4v\u00e4ri\u00e4 korostamaan eri elementtej\u00e4.\n  <\/li>\n<li>Valitse tuotekuvausten p\u00e4\u00e4v\u00e4ri.\n  <\/li>\n<li>Valitse otsikoiden v\u00e4ri. Otsikoiden tulee olla havaittavissa.\n  <\/li>\n<li>Muista, ett\u00e4 erilaisten vihjeiden tai ty\u00f6kaluvihjeiden ei pit\u00e4isi erottua, mutta niiden tulee silti olla n\u00e4kyviss\u00e4.\n  <\/li>\n<li>Tuotteen hinta on t\u00e4rke\u00e4 tekij\u00e4, korosta sit\u00e4 v\u00e4rill\u00e4.\n  <\/li>\n<li>Linkit, painikkeet ja navigointielementit tulee n\u00e4hd\u00e4 napsautettavina elementtein\u00e4, t\u00e4m\u00e4 voidaan saavuttaa my\u00f6s v\u00e4reill\u00e4.\n  <\/li>\n<li>Voit halutessasi valita lis\u00e4\u00e4 s\u00e4vyj\u00e4 valituista v\u00e4reist\u00e4.\n  <\/li>\n<\/ol>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d592881.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d592881.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Periaate 6: Fontit<br \/>\n<\/h5>\n<p>\n  Kuten v\u00e4reiss\u00e4, voit luoda &#8221;paletin&#8221; k\u00e4ytt\u00e4millesi fonteille: tee luettelo fonttien nimist\u00e4, kooista ja tyyleist\u00e4.\n<\/p>\n<p>\n  Fonttien tulee olla eritt\u00e4in luettavia ja niiden tulee v\u00e4litt\u00e4\u00e4 tiedot helposti potentiaalisille asiakkaille. V\u00e4lt\u00e4 siksi liian monimutkaisia \u200b\u200bkirjasimia, joita on vaikea lukea: asiakkaat eiv\u00e4t menet\u00e4 aikaansa yritt\u00e4ess\u00e4\u00e4n ymm\u00e4rt\u00e4\u00e4, mit\u00e4 yrit\u00e4t tarjota.\n<\/p>\n<p>\n  Fonttipalettisi saattaa n\u00e4ytt\u00e4\u00e4 yksinkertaiselta txt-tiedostolta, johon tallennat seuraavat tiedot:\n<\/p>\n<p>\n  Otsikko 1 \u2013 RobotoLight 36pt\n<\/p>\n<p>\n  On sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, mit\u00e4 fonttia k\u00e4yt\u00e4t t\u00e4lle tai tuolle elementille. Jokaisella kirjasimella on oma merkityksens\u00e4 ja luonteensa, jotka v\u00e4litet\u00e4\u00e4n sivustolle, joten sinun tulee olla varovainen oikeiden fonttien valinnassa.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d79dd6d.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d79dd6d.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Periaate 7: Sopeutuminen<br \/>\n<\/h5>\n<p>\n  Kun olet miettinyt mobiiliverkkokaupan UX-ratkaisuja, luonut prototyypin, tehnyt v\u00e4ri- ja fonttipaletit ja piirt\u00e4nyt lopullisen k\u00e4ytt\u00f6liittym\u00e4n, ty\u00f6 ei ole ohi: on mukautumisen aika.\n<\/p>\n<p>\n  Olet luomassa verkkokauppaa, jonka vierailijat n\u00e4kev\u00e4t mobiililaitteillaan. Nyky\u00e4\u00e4n on olemassa suuri valikoima mobiililaitteita, joilla on eri kokoja ja resoluutioita. Olisi tehotonta luoda prototyyppi jokaiselle niist\u00e4. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 kun luot p\u00e4\u00e4prototyyppi\u00e4si, sinun tulee harkita, mit\u00e4 elementtej\u00e4 muutetaan, venytet\u00e4\u00e4n tai jopa j\u00e4tet\u00e4\u00e4n pois k\u00e4ytetyst\u00e4 laitteesta riippuen.\n<\/p>\n<p>\n  Sopeutuminen on eritt\u00e4in t\u00e4rke\u00e4\u00e4 mobiilisuunnittelussa. Yrit\u00e4 testata prototyyppi\u00e4si ainakin suosituimmilla resoluutioilla.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d99f749.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217d99f749.webp\" alt=\"\" \/><\/a><\/p>\n<h3>\n  Lopulliset ajatukset<br \/>\n<\/h3>\n<p>\n  Vaikka t\u00e4m\u00e4 artikkeli on omistettu mobiiliverkkokauppasivustojen suunnitteluperiaatteille, joitain kohtia voidaan k\u00e4ytt\u00e4\u00e4 my\u00f6s ty\u00f6p\u00f6yt\u00e4sivustoissa: k\u00e4ytt\u00f6liittym\u00e4, v\u00e4rit, k\u00e4ytett\u00e4vyys, fontit.\n<\/p>\n<p>\n  Muista, ett\u00e4 periaatteet eiv\u00e4t ole tiukkoja lakeja; et ehk\u00e4 seuraa niit\u00e4 koko ajan. T\u00e4rkeint\u00e4 on suunnitella k\u00e4ytett\u00e4vyytt\u00e4 ajatellen ja kohdeyleis\u00f6\u00e4 ajatellen.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  : <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2015\/11\/26\/ecommerce-mobile-design-principles\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>El\u00e4mme korkean teknologian maailmassa, jossa l\u00e4hes jokaisella ihmisell\u00e4 on p\u00e4ivitt\u00e4inen p\u00e4\u00e4sy Internetiin eri laitteiden kautta. Muutama vuosi sitten useimmat meist\u00e4 k\u00e4yttiv\u00e4t siihen vain p\u00f6yt\u00e4tietokoneita, mutta viime vuosina tilanne on muuttunut. Nyt mobiililaitteet ottavat johtoaseman, kun yh\u00e4 useammat ihmiset k\u00e4ytt\u00e4v\u00e4t mieluummin tablettejaan ja matkapuhelimiaan Internetiss\u00e4 surffaamiseen. Verkkokauppa ei ole poikkeus; my\u00f6s mobiililaitteiden k\u00e4ytt\u00f6 lis\u00e4\u00e4ntyy. Mobiiliyst\u00e4v\u00e4llisyys on nyky\u00e4\u00e4n v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4 kaikille verkkokauppasivustoille. Jopa Google pit\u00e4\u00e4 mobiiliyst\u00e4v\u00e4llisyytt\u00e4 sijoitussignaalina. Joten t\u00e4ss\u00e4 \u2026<\/p>\n","protected":false},"author":1,"featured_media":149017,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[690,521,599,53,196,118],"tags":[],"class_list":["post-249628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobiili","category-sekalaista","category-tekniikka-ja-paljon-muuta","category-web-ja-wordpress-2","category-web-suunnittelu","category-web-tyokalut"],"_links":{"self":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/comments?post=249628"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249628\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media\/149017"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media?parent=249628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/categories?post=249628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/tags?post=249628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}