Mobile Web Design 10 padomi, lai labāk izmantotu

Paredzams, ka mobilā tīmekļa pārlūkošana kļūs par nākamo lielāko interneta platformu. Tagad ir viegli pārlūkot tīklu no gandrīz visur, izmantojot tehnoloģijas, kas ir saderīgas ar mobilajām ierīcēm. Tā kā mobilajā tīmekļa dizainā ir īsa lietojamība, tas apgrūtina pārlūkošanu pa dažādām populārām mobilajām tīmekļa vietnēm. Mobilo ierīču projektēšanai jābūt vienkāršākai par standarta vietni un vairāk uzdevumu, lai veiktu darbu, jo lietotāji meklē kaut ko īpašu un steidzamu.

Jums jāņem vērā, kā izmantot vislielāko minimālo pieejamo vietu jūsu galvenajam saturam un joprojām ir interesants mobilajiem lietotājiem. Izvairieties no lieliem attēliem un flash animācijas, jo tas palēninās jūsu vietni. Atcerieties, ka mobilajām tīmekļa vietnēm funkcionalitāte ir svarīgāka par stilu. Ja jūsu tīmekļa vietne nav kodēta un pareizi noformēta, tas varētu labāk izskatīties vienā tālrunī, sliktākajā gadījumā citā vai sliktāk, vispār neuzrādot. Pārbaudiet, apstipriniet un pārbaudiet, vai tā ir saderīga ar visām mobilajām ierīcēm.

Lai palīdzētu jums izveidot tīmekļa vietni, kas ir pieejama ne tikai galddatoros vai klēpjdatoros, bet arī mobilajās ierīcēs, šeit ir dažas lietas, kas jāapsver mobilā tīmekļa dizainā ar paraugu attēliem kopā ar mobilās tīmekļa vietnes versijas tiešo saiti.

1. Izlemiet par ekrāna izšķirtspēju

Mobilā pasaule satur daudzveidīgus dizaina apsvērumus no dažādiem ekrāna izmēriem un izšķirtspēju dažādām formām. Mērķis ir panākt līdzsvaru starp pietiekamu ekrāna platumu un auditorijas lielumu. Uzziniet pašreizējo mobilo ierīču specifikācijas un izmantojiet vislabāko vērtējumu. Mobilo izstrādātāju izaicinājums ir veids, kā iegūt piemērotu attēlošanu dažādos ekrāna izmēros, neatjaunojot lapas dažādām platformām.

Šeit ir saraksts ar tīmekļa rezolūcijām, kas populāras mobilajās ierīcēs, sākot ar 2011. gada februāri, ko Uxbooth.com iesniedza ar publicēto rakstu, Mobilās tīmekļa dizaina apsvērumi (2. daļa): Izmēri, David Leggett. Autors izskaidro dažus punktus par displeja izmēriem un risinājumiem izkārtojuma dizainam.

2. Sadaliet tīmekļa lapas mazās porcijās

Garas teksta daļas var būt grūti nolasāmas, lai to ievietošana vairākās lapās ierobežo ritināšanu vienā virzienā. Atbrīvojieties no zemas prioritātes satura. Pieturieties pie vienas teksta slejas, kas iesaiņo, tāpēc nav horizontālas ritināšanas.

Tālāk redzamajā piemērā CBS News mobilās tīmekļa vietnes versija parāda tikai galveno ziņu sadaļu un ziņu rakstus pārtrauc nelielās daļās. Kaut arī Treehugger iepazīstina ar saviem jaunākajiem rakstiem un jaunākajiem tweets ar dažām pilnas tīmekļa vietnes iezīmēm. Lai apskatītu pārējo rakstu, abās vietnēs lietotājs noklikšķina uz teksta saites.

CBS News

Treehugger

3. Vienkāršojiet dizainu

Vienkāršība atbilst lietojamībai. Ļaujiet viņiem bez grūtībām pārvietoties pa vietni. Izvairieties no tabulu, rāmju un cita formatējuma iekļaušanas. Ja izmantojat polsterējumu, neaizmirstiet saglabāt to absolūtā minimālā līmenī, kas ir daudz mazāks nekā parastajā tīmekļa lapā. Salīdzinot ar galddatoriem, jo ​​vairāk jūs noklikšķināt uz saitēm mobilajās tīmekļa vietnēs, jo vairāk jūs gaidīsiet, jo tiek ielādēts laiks. Ar to jums ir nepieciešams noņemt un vienkāršot jūsu vietni ar līdzsvaru starp saturu un navigāciju.

Mūsu piemērā Best Buy mobilās versijas tīmekļa vietnē ir uzskaitītas tikai vissvarīgākās produktu kategorijas, kas samazina satura hierarhijas līmeni. Kaut arī YouTube mobilā mājas lapa parāda tikai četrus jaunākos fokusa fotoattēlus.

Labākais pirkums

YouTube

4. Iespēja apskatīt pilnu tīmekļa vietni

Sniedziet saiti jūsu mobilajiem apmeklētājiem, lai atgrieztos savā pilnajā tīmekļa vietnē, lai lietotājs varētu atrast un skatīt citu saturu un funkcijas, kas ir pieejamas tikai vietnes darbvirsmas versijai. Jūsu skatītāji, protams, darīs daudz vertikālu ritināšanu, tāpēc palīdziet tiem izmantot saites “Atpakaļ uz augšu”, lai viņi varētu pāriet uz lapas augšdaļu.

Piemēram, Ars Technica saite uz standarta tīmekļa vietni, kas izvietota pozīcijā. Lai gan Shangri-La ir pilna tīmekļa vietnes saite uz kājenes.

Ars Technica

Shangri-La

5. Navigācija

Iepazīstiet savu auditoriju un apziniet to, ko viņi meklē. Uzziniet, kā viņi vēlas navigēt jūsu vietnē. Novietojiet navigācijas izvēlni zem satura, ja jūsu mērķa mobilie lietotāji vēlas ātri mainīt satura saturu. Saturam un virsrakstam jābūt redzamam, lai netiktu skatīts lapas saturs. Lietotājiem, kuri uzreiz vēlas pārvietoties noteiktā kategorijā, novietojiet navigāciju lapas augšdaļā. Tālāk ir norādīti dažādi navigācijas izvietojuma paraugi, ko izmanto mobilajā tīmekļa dizainā.

D&G

Politico

Ikdienas horoskops

6. Izmantojiet teksta saites

Jūsu galvenajā tīmekļa vietnē var tikt izmantotas izsmalcinātas lidojuma izvēlnes, apgāšanās vai citi iedomātie sīkrīki, bet mobilā pārlūkprogramma, visticamāk, nebūs. Ņemiet vērā, ka dinamiskie lappušu elementi un grafiskās saites patērē resursus, tāpēc izvēlieties labi iezīmētas teksta saites.

Sarakstu saraksts

Reddit

7. Atšķiriet izvēlēto saiti

Pārvietojot kursoru uz leju, ritiniet lapu un uzreiz tiks parādītas saites. Tātad, ir svarīgi skaidri informēt lietotāju par to, kas ir fokusēts. To var izdarīt, mainot saites un pogas fonta krāsu un fona krāsu, vai vienkārši pievienojot dažas polsterēšanas saites, lai padarītu klikšķināmo platību par 44px lielāku par 44px. Geek Squad un Diesel izmantoja lielus fontus klikšķināmam tekstam.

Geek Squad

Dīzeļdegviela

8. Balansa saites

Katra lapas lejupielāde patērē laiku un sistēmas resursus, no kuriem pēdējie ir nepietiekami, tāpēc mēģiniet vietnes apmeklētāju piespiest digg, izmantojot daudzas lapas, lai piekļūtu pieprasītajai informācijai. Atrodiet līdzsvaru starp saites skaitu katrā lapā un vietnes dziļumu.

Flickr

Čivināt

9. Samaziniet lietotāja teksta ievadi

Ir grūti ievadīt tekstu tīmekļa vietņu mobilajās versijās. Nomainiet to ar radio pogām vai sarakstu, lai viņi varētu viegli izvēlēties to, kas viņiem nepieciešams. Atcerieties, ka mobilo sakaru lietotājiem nav piekļuves parastajai tastatūrai un pelei. Jo īsāks ir URL, jo labāk tas ir monotons, lai ievadītu garus URL.

Mūsu zemāk redzamajam paraugam Fedex izmantoja kontrolsarakstu un nolaižamās izvēlnes. Lai gan Tumblr lika jums izvēlēties valodu, izmantojot nolaižamo izvēlni.

Fedex

Tumblr

10. Nav pops vai atsvaidzina

Mobilās pārlūkprogrammas parasti neatbalsta uznirstošos logus. Un, ja viņi to darītu, viņiem būtu ļoti šaura telpa, lai varētu ielikt. Palieciet prom no tiem, lai izvairītos no neprognozējamiem rezultātiem. Bez tam, periodiski nav lapu atsvaidzinošas, lai izvairītos no ierīces ierobežotās atmiņas aizpildīšanas. Ļaujiet lietotājam atsvaidzināt saturu.

Īsumā

Iegūstiet radošu un lietojiet savu mobilo web dizainu jaunā veidā. Padariet savu saturu pietiekami pārliecinošu un izmantojamu. Dodiet saviem lietotājiem to, ko viņi vēlas, kad viņi to vēlas. Lietotāji nevēlas dziļāk izgriezt vietni, lai atrastu to, ko viņi meklē mobilajā tīmeklī.

Vai jums ir kādas vēlamās mobilās vietnes, kas jūs tiešām iedvesmoja? Vai varat koplietot dažus mobilā tīmekļa dizaina padomus? Informējiet mūs!

Turpmāka lasīšana

1. Atsaucīgs Web dizains (alistapart.com)
2. Padariet savu vietni mobilā draudzīgā (thinkvitamin.com)
3. W3C mobileOK pārbaudītājs (w3.org)
4. iPhone simulators