Mobilus interneto dizainas 10 patarimų, kaip geriau naudoti

Tikimasi, kad mobilusis žiniatinklio naršymas taps pagrindine interneto platforma. Dabar lengva naršyti tinklą iš beveik bet kur, panaudojant mobiliuosius įrenginius, kurie tinka rankai dėl technologijos. Kadangi mobiliojo interneto dizaino įgyvendinimas yra trumpas, sunku naršyti po kelią populiarių mobiliųjų svetainių. Mobiliųjų įrenginių projektavimas turi būti paprastesnis nei standartinė svetainė ir daugiau užduočių, kad darbas būtų atliktas, nes vartotojai ieško kažko konkretaus ir skubaus.

Turėtumėte atsižvelgti į tai, kaip naudoti pagrindinį turinį mažiausiai minimalaus laisvos vietos ir likti įdomus mobiliesiems vartotojams. Venkite didelių vaizdų ir „Flash“ animacijos, nes tai sulėtins jūsų svetainę. Atminkite, kad mobiliųjų svetainių funkcionalumas yra svarbesnis nei stilius. Jei jūsų svetainė nėra užkoduota ir dizainas tinkamai, jis gali atrodyti geriau viename telefone, blogiausiu kitu arba dar blogiau, visai neparodomas. Patikrinkite, patikrinkite ir patikrinkite, ar jis suderinamas su visais mobiliaisiais įrenginiais.

Norėdami padėti jums sukurti svetainę, kuri būtų prieinama ne tik staliniuose ar nešiojamuosiuose kompiuteriuose, bet ir mobiliuosiuose įrenginiuose, čia rasite keletą dalykų, kuriuos reikia apsvarstyti mobiliojo interneto dizaino metu su pavyzdiniais vaizdais ir mobiliosios svetainės versijos tiesiogine nuoroda.

1. Nuspręskite ekrano skiriamąją gebą

Mobiliame pasaulyje yra daug įvairių dizaino priežasčių, susijusių su skirtingais ekrano dydžiais ir skirtingomis formomis. Tikslas pasiekti tinkamą ekrano plotį ir auditorijos dydį. Sužinokite apie esamų mobiliųjų įrenginių specifikacijas ir naudokitės geriausiu sprendimu. Mobiliųjų kūrėjų iššūkis - tai būdas tinkamai rodyti įvairius ekrano dydžius, nereikia atkurti skirtingų platformų puslapių.

Čia pateikiamas mobiliųjų įrenginių populiarių interneto sprendimų sąrašas nuo 2011 m. Vasario mėn., Kurį pateikė „Uxbooth.com“ su jų paskelbtu straipsniu, Mobiliojo interneto dizaino aspektai (2 dalis): Matmenys, pateikė David Leggett. Autorius paaiškina keletą taškų apie ekrano matmenis ir išdėstymo dizaino sprendimus.

2. Suskirstykite tinklalapius į mažas dalis

Ilgąsias teksto dalis gali būti sunku skaityti, todėl jų išdėstymas keliuose puslapiuose riboja slinkimą į vieną kryptį. Atsikratykite žemo prioriteto turinio. Laikykitės vieno stulpelio teksto, kuris apvynioja, todėl nėra horizontalaus slinkimo.

Toliau pateiktame pavyzdyje „CBS News“ mobiliojo interneto svetainės versija rodo tik pagrindinius naujienų skyrius ir naujienų straipsnius perkelia į mažas dalis. Nors Treehugger pristato savo naujausius straipsnius ir naujausius „tweets“ su kai kuriomis pilnos svetainės funkcijomis. Abiejose svetainėse vartotojas spustelėja teksto nuorodą, kad pamatytų likusią straipsnio dalį.

„CBS News“

Medžių mylėtojas

3. Supaprastinkite dizainą

Paprastumas prilygsta naudojimui. Leiskite jiems be jokių sunkumų judėti svetainėje. Venkite įtraukti lenteles, rėmelius ir kitus formatus. Jei naudojate pamušalą, nepamirškite, kad jis būtų kuo mažesnis nei mažesnis už įprastą tinklalapį. Palyginti su staliniais kompiuteriais, tuo daugiau spustelėsite mobiliųjų svetainių nuorodas, tuo daugiau laukiate dėl įkėlimo laiko. Turint tai, turite atsisakyti ir supaprastinti savo svetainę su turiniu ir navigacija.

Mūsų pavyzdyje „Best Buy“ mobiliosios versijos svetainėje pateikiamos tik svarbiausios produktų kategorijos, mažinančios turinio hierarchijos lygį. „YouTube“ mobiliajame pagrindiniame puslapyje rodomi tik keturi naujausi vaizdo įrašai.

Geriausias pirkimas

„YouTube“

4. Galimybė peržiūrėti visą svetainę

Pateikite nuorodą, skirtą mobiliesiems lankytojams, kad galėtumėte grįžti į visą jūsų svetainę, kad vartotojas galėtų rasti ir peržiūrėti kitą turinį ir funkcijas, prieinamas tik svetainės darbalaukio versijoje. Jūsų žiūrovai tikrai atliks daug vertikalios slinkties, todėl padėsite juos naudodami nuorodas „Atgal į viršų“, kad jie galėtų pereiti į puslapio viršų.

Pavyzdžiui, Ars Technica turi savo nuorodos mygtuką į standartinę svetainę, esančią ant antraštės. Nors „Shangri-La“ turi visą savo svetainės nuorodą ant poraštės.

Ars Technica

Shangri-La

5. Navigacija

Susipažinkite su savo auditorija ir žinokite, ko ieškote. Sužinokite, kaip jie norės naršyti jūsų svetainėje. Padėkite naršymo meniu žemiau turinio, jei tiksliniai mobiliojo ryšio naudotojai nori greitai matyti turinio keitimą. Turinys ir antraštė pirmiausia turi būti matomi, kad nebūtų peržiūrėtas puslapio turinys. Naudotojams, norintiems greitai pereiti tam tikroje kategorijoje, įdėkite naršymą puslapio viršuje. Žemiau pateikiami įvairūs navigacinio planavimo pavyzdžiai, naudojami mobiliojo interneto dizainui.

D&G

Politikas

Dienos horoskopas

6. Naudokite teksto nuorodas

Jūsų pagrindiniame tinklalapyje gali būti naudojami „whizy-out“ meniu, „rollovers“ ar kiti išgalvoti „gadgetry“, tačiau mobilioji naršyklė greičiausiai nebus. Atminkite, kad dinaminiai puslapių elementai ir grafiniai ryšiai naudoja išteklius, todėl pasirinkite gerai pažymėtas teksto nuorodas.

Išskyrus sąrašą

Reddit

7. Padarykite skirtumą tarp pasirinktos nuorodos

Perkeliant žymeklį žemyn, slinksite puslapį ir iš karto bus paryškintos nuorodos. Taigi svarbu aiškiai patarti vartotojui, koks elementas yra sutelktas. Tai galima padaryti keičiant nuorodų ir mygtukų šriftą ir fono spalvą arba tiesiog pridedant tam tikrą padding aplink nuorodas, kad paspaudžiamas plotas būtų 44px didesnis už 44px. „Geek Squad“ ir „Diesel“ naudojo didelius šriftus spustelėjus tekstui.

Geek Squad

Dyzelinas

8. Balanso nuorodos

Kiekvienas puslapio atsisiuntimas sunaudoja laiko ir sistemos išteklius, kurių pastarasis trūksta, todėl stenkitės, kad svetainės lankytojas nepatektų į daugybę puslapių, kad galėtumėte pasiekti norimą informaciją. Suraskite pusiausvyrą tarp nuorodų skaičiaus kiekviename puslapyje ir svetainės gylį.

Flickr

„Twitter“

9. Sumažinkite vartotojo teksto įvedimą

Sunku įvesti tekstą į mobilias svetainių versijas. Vietoj to pakeiskite radijo mygtukus arba sąrašus, kad jie galėtų lengvai pasirinkti tai, ko jiems reikia. Atminkite, kad mobiliųjų telefonų naudotojai neturi prieigos prie įprastinės klaviatūros ir pelės. Kuo trumpesnis URL, tuo geriau, nes ilgas URL įvedimas yra monotoniškas.

Mūsų žemiau pateiktame pavyzdyje „Fedex“ naudojo kontrolinį sąrašą ir išskleidžiamuosius meniu. Nors „Tumblr“ pasirinko jūsų kalbą, naudodami išskleidžiamąjį meniu.

„Fedex“

Tumblr

10. Nėra iškylančių ar atnaujinamų

Mobiliosios naršyklės paprastai nepalaiko iššokančių langų. Ir jei jie tai padarys, jie turėtų labai siaurą erdvę, kad galėtų įsiminti. Nenaudokite jų, kad išvengtumėte nenuspėjamų rezultatų. Be to, periodiškai neatnaujinkite puslapių, kad nebūtų užpildyta ribota įrenginio atmintis. Leiskite vartotojui atnaujinti turinį.

A Nutshell

Gaukite kūrybišką ir pritaikykite savo mobiliojo interneto dizainą nauju būdu. Padarykite savo turinį pakankamai įtikinamą ir naudingą. Suteikite savo naudotojams tai, ko jie nori, kai nori. Vartotojai nenori giliau įsikurti į svetainę, kad surastų, ko jie ieško mobiliajame tinkle.

Ar turite kokių nors pageidaujamų mobiliųjų svetainių, kurios jus tikrai įkvėpė? Ar galite bendrinti kai kuriuos mobiliojo interneto dizaino patarimus? Praneškite mums!

Papildoma literatūra

1. Reaguojantis interneto dizainas (alistapart.com)
2. Padarykite savo svetainę draugišku (thinkvitamin.com)
3. W3C MobileOK tikrintuvas (w3.org)
4. „iPhone Simulator“