Pažvelkite į mobiliųjų įrenginių projektavimą
Kai buvo išleistas pirmasis „iPhone“, audros metu jis paėmė technologijų pasaulį. Nuo to laiko ji buvo beveik 5 metai, o išmaniųjų telefonų rinka išaugo populiarėjant, net ir „Microsoft“ įsitraukė į konkurenciją su „Windows 7“ OS ir partneriais. Šiandien daugeliu interneto vartotojų savo išmaniajame telefone yra sveikas protas tikėtis, kad mobiliųjų svetainių skaičius padidės agresyviai.
Tačiau mobiliojo žiniatinklio projektavimas yra visiškai kitokia operacija su bendru interneto dizainu. Mūsų svetainės yra sukurtos didžiuliam ekranui, tačiau išmaniojo telefono ekrano dydis yra per mažas, palyginti su tuo, todėl kyla erzina naudojimo problemų.. Nauji projektavimo standartai ir praktika yra labai reikalingi geresniam mobiliosios svetainės dizainui su sklandžia vartotojo patirtimi.
Šiame vadove mes ketiname sukurti patogią, išmaniojo telefono naršyklių svetainę. Kalbėsiu apie geriausią praktiką ir naudingą kūrėjo įrankį, kad galėtumėte sukurti geresnę mobiliojo interneto svetainę, taigi pateksime į jį po šuolio!
Stiprios naudotojo patirties planavimas
Kai kuriate mobiliąją svetainę, svarbu nuolat saugokite naudotojus, kaip galiausiai jūsų svetainė yra sukurta ir sukurta vartotojams, kad galėtų mėgautis. Žinoma, vartotojai paprastai tikisi, kad mobilioji svetainė elgsis panašiai kaip ir darbalaukio aplinkoje išlaikyti patogią vartotojo patirtį turėtų būti jūsų pagrindinis dėmesys kuriant sėkmingą mobiliąją svetainę.
Jūsų naudotojams reikia apsvarstyti daug naudojimosi koncepcijų. Šie aspektai apima ekrano dydis, inline vaizdai, nuorodos, šrifto dydžius, ir puslapio navigacija. Mes parašėme apie mobilaus naudojimo dizainą, kad galėtumėte išnaudoti savo svetainę, kad būtų geriau naudojamas. Be gido, visada reikia saugokite save apie naujas idėjas pagerinti svetainę.
Planuojant stiprią naudotojo patirtį taip pat reikės apsvarstyti, kaip naudotojas bendrauja su jūsų svetaine. Darbalaukyje jūsų svetainė gali būti sąveikaujama su pele ir klaviatūra, bet išmaniajame telefone bus bakstelėjimas, blaškymas, ir swiping aplink savo svetainę. Jūs tikriausiai turite sukurti svetainę taip, kaip vartotojai gali lengvai prieiti prie svetainės informacijos su šiais fiziniais judesiais.
Laikykite puslapius trumpais ir saldus
Bet kurios svetainės mėsa ir bulvės yra puslapio turinys. Kiekvienas iš jūsų tinklalapių turi daug naudingos informacijos naudotojams, pvz., tekstui, nuotraukoms ar vaizdo įrašams. Taip pat rasite naujienų straipsnius ir tinklaraščio įrašus, kurie rodomi kelis puslapius, o tai gali padėti suskaidyti tekstą, tačiau mobiliesiems įrenginiams nerekomenduojama kaip technikos reikalauja daugiau puslapio įkėlimo, o tai reiškia daugiau laukimo laiko naudotojo pusėje.
Jei tai nėra būtina, aš rekomenduoju trumpas jūsų puslapio turinys. Jūs taip pat turėtumėte apsvarstyti galimybę, kad jis atrodytų saldus šrifto stilius yra daug didesnis ir galbūt judančius vaizdus. Su savo turiniu visame ekrane jis natūraliai pritraukia dėmesį, jau nekalbant apie optimizavimą iš tikrųjų leidžia daug lengviau nuskaityti puslapius. Tai taip pat yra priežastis, kodėl a vieno stulpelio išdėstymas puikiai tinka sąskaitai.
Daugeliu atvejų mobiliosios naršyklės neperkels tinklalapių taip greitai, kaip darbalaukio naršyklės, ir tai gali pakenkti jūsų skaitytojams, todėl jums reikia optimizuoti turinį ir svetainę didelės spartos turinio įkėlimui. Taip pat galite sutrumpinti straipsnį išlaikant visą turinį, arba tiesiog pašalinti nereikalingus vaizdus. Vietoj grožio pastatykite paprastumą.
Jūsų pagrindinė navigacija yra jūsų lankytojų, kurie nori pereiti tarp puslapių, gelbėtojas. Mobiliajame įrenginyje ekrane rodomos nuorodos bus daug mažesnės pagal pobūdį, todėl daug sunkiau paliesti. Svarbus gedimas išspręsti šią problemą yra maksimaliai padidinti naršymo nuorodų šriftą ir vietą, galbūt visą blokavimo zoną. Arba galite sukurkite naršymo juostą, kad ji būtų panaši į tikrąją „iPhone“ programos skirtukų juostą, kaip ir anksčiau parodyta.
Mobiliųjų CSS stilių kūrimas
Dabar, kai žinome, kaip optimizuoti mobiliojo interneto svetainę, kad būtų geriau skaitomas ir patogiau naudoti, būtų gerai kalbėti apie CSS stilius. Kiekviename CSS stiliaus lape yra daug parinkčių, turinčių savybių, susijusių su šriftais, dydžiais, padėties nustatymu ir ekrano nustatymais. Kai kalbama apie mobilųjį telefoną, turėtumėte atkreipti dėmesį kaip jūsų blokai patenka į vietą.
(Vaizdo šaltinis: Smashing Magazine)
Viena sritis, į kurią reikia pradėti iš naujo nustatykite svetainės pakuotės plotį procentais. Įprasta naudoti taškus kaip padėties nustatymo, linijos aukščio, šrifto dydžio ir „div“ pločio vienetą, tačiau dirbant su mobiliuoju telefonu, norėsite, kad jūsų puslapiai būtų skystis ir perėjimas tarp kiekvieno prietaiso natūraliai. Konteinerio dalelių nustatymas iki 100% leis turinį lengvai užpildykite tarp portreto / kraštovaizdžio režimo, nenutraukdami per kraštą.
Jei esate vienas iš tų žmonių, kurie nori pertvarkyti visą išdėstymą, įsitikinkite, kad esate paspauskite viską su atstatyti. Taip pat visos pastraipos, antraštės ir navigacijos nuorodos turi būti nustatytos ekranas: blokas; todėl jūs gaunate tą linijinį spausdinimo stiliaus jausmą. Perkelkite paraštes ir pamušalą, kad pašalintumėte išpūtimą iš savo išdėstymo. Venkite lentelių jei įmanoma, nes jie yra linkę pateikti klaidingus rezultatus tarp įrenginių.
Dideli vaizdai taip pat yra tarp prietaisų. Dauguma jūsų svetainės vaizdų bus didesni nei 480 pikselių, todėl gali nenorėti, kad jie būtų sulaužyti. Pirmasis variantas yra nustatyti jų plotį 100%, kad vaizdai būtų natūraliai pakeisti. Tai tikrai įmanoma sukurti skirtingus vaizdų rinkinius jūsų svetainei ir padaryti juos skirtingai pagal naršyklės agentą, bet sąžiningai tai tik priduria daugiau darbų jūsų pusėje, todėl pabandykite naudoti techniką tik tada, kai tai tikrai reikalinga.
Tinklalapių projektavimas „iPhone“
Judriojo ryšio rinkos dalis yra gana didelė ir padalyta, tačiau „Apple“ gavo didelę pjūvio dalį su savo „iDevices“. Ir „iPhone“, ir „iPad“ yra mobilūs internetiniai įrenginiai, turintys integruotą jutiklinio ekrano funkciją. Juose yra ta pati numatytoji žiniatinklio naršyklė „Safari“ ir daugybė kitų parinkčių.
Tam tikriems „iPhone“ svetainėms turėsite nukreipti ekrano dydį. Nustatytas fiksuotas ekrano dydis 320px 480px senesniems „iPhone“ modeliams ir „IPhone 4“ ir „iPhone 4S“ 640 piks.
„iPhone“ ekranai yra tik erdvėje. Turėtum turėt vienas turinys, kuris tęsiasi tiek, kiek reikia. Elementų laikymas viename stulpelyje taupys galvos skausmus ir leisti skysčio išdėstymą “užpildyti” ir portreto, ir kraštovaizdžio režimai. Tam tikriausiai turėsite sukurti kitą šabloną ir rasti būdą patikrinti, ar jūsų lankytojas (-ai) naudoja „iPhone“. Žemiau pateikiamas mažas PHP fragmentas turėtų veikti gerai:
Iš esmės logika traukia mūsų pasaulį $ _SERVER HTTP agento kintamasis ir tikrina, ar žodis yra “„iPhone“” pasirodo bet kur. Jei taip, mes žinome, kad mūsų lankytojas naudojasi „iPhone“ ir iš ten galime pateikti šiek tiek kitokį HTML ar net visiškai naują šabloną! Tai taip pat galėtų būti naudojama įtraukite specifinį „iPhone“ stilių lapą, pakeiskite savo puslapio pavadinimus, pašalinkite vaizdus arba beveik bet kokius dinaminius efektus.
Kai kalbama apie naujų stilių aptarnavimą, yra lengviau. Kaip minėta anksčiau, maksimalus iPhone ekrano dydis yra 960 piks. Todėl su naujomis CSS3 žiniasklaidos užklausomis galite pridėti stilių tiesiai į pagrindinį svetainės stilių lentelę tik rodomas „iPhone“. Žemiau pateikiamas mažas pavyzdys:
@media ekranas ir (max-device-width: 960px) / * iPhone css * /
Tai veikia, nes CSS dabar gali aptikti naršymo agentus ir jų savybes. Maksimalus ekrano plotis yra viena iš savybių, kurios taip pat gali būti aptiktos.
„IPhone“ įrenginių visame mobiliajame tinkle nėra per daug sudėtinga, nes yra per daug pavyzdžių, pvz., „CSS iPhone“. Laikykite save užimtas mokytis ir nebijokite eksperimentuoti su naujais UI dizaino metodais.
Mobilus jQuery scenarijus
Dauguma priekinio tinklo kūrėjų yra susipažinę su jQuery biblioteka. Ji siūlo fantastišką kodavimo efektų, animacijų, išskleidžiamųjų meniu ir kitų naršyklės funkcijų įvairovę, ir ji tiesiog tampa dar nuostabesnė su jQuery Mobile skelbimu. tai yra nerekomenduojama tiesiogiai peršokti į techniką ir įklijuokite savo svetainę visur, tačiau bandymų tikslais pažangiosios funkcijos gali būti labai geros.
„jQuery Mobile“ yra šiek tiek skiriasi nuo reguliaraus „jQuery“, nes ji suteikia jums galimybę kurti visą aplinką. Dirbdami su jų failais, jie yra ne tik „JavaScript“, bet ir „CSS“ stiliai mygtukams, nuorodoms ir perėjimo efektams. Jūs vis dar rašote tinklalapius HTML kode, tačiau jQuery Mobile komanda turi tiekė daug pasirinktinių UI dizaino funkcijų. Mes galime padaryti daug su šia sistema, bet nuo to laiko sistema vis dar yra beta, palikime paprastus efektus.
Nedidelis „DevGrow“ dienoraščio mokymas pateikia puikių pavyzdžių. Oficiali svetainė taip pat siūlo demonstracijas, kurias galite išbandyti. Atminkite, kad naudojame HTML atributą, duomenų perėjimas pridėti animacinius efektus su bet kuria iš anksto nustatytų reikšmių. Tai apima skaidrių, pop, flip, išnyks ir tt Patikrinkite mažas DevGrow pavyzdys gauti šių efektų skonį.
Poveikis ir perėjimai yra gana tvarkingi, ir tai, kad jūs galite sukurti visą mobiliojo ryšio sąsają griežtai su „jQuery“, taip pat yra didelis žingsnis į priekį šioje platformoje, tačiau su platforma tik beta versijoje nerekomenduojame sukurti visos mobiliosios svetainės su jų biblioteka, ypač su tuo, kad tai yra rašymo metu nepalaiko visi pagrindiniai išmanieji telefonai (ypač „Windows Phone 7“), tačiau jis tikrai bus geresnis su laiku.
Galiausiai aš rekomenduoju susipažinti su šia nauja mobilia sistema anksčiau gyventi bet kuriame projekte.
Naudingi kūrėjų įrankiai
Mobilieji kūrėjai ne tik ieško kodavimo ir dizaino išteklių. Taip pat yra didelė programinės įrangos ir IDE paklausa, jau nekalbant apie galingas mobilias sistemas. Žiniatinklio kūrimas yra sudėtingas uždavinys, kuriam reikia gana daug atsidavimo, tačiau naudojant papildomas priemones jūsų darbas taps daug lengviau.
„Opera Mobile Emulator“
Ieškote būdų, kaip patikrinti, kaip veikia jūsų mobilusis tinklapis? Tai gali būti didžiulis skausmas, jei neturite prieigos prie interneto. Arba jūs tiesiog nenorite naudoti savo išmaniojo telefono, kad išbandytumėte svetainę kiekvieną kartą, kai į jūsų serverį pateks naujinimas. Na, „Opera Mobile Emulator“ yra fantastiška programinė įranga, skirta išbandyti jūsų mobiliojo interneto svetainę.
Emuliatorius palaiko aplink 20 mobiliųjų profilių „Samsung Galaxy S“, „HTC Desire“ ir netgi „Samsung Xoom“. Taip pat galima nustatyti pasirinktinė rezoliucija ir pikselių tankis intensyviems bandymams. Geriausia iš visų, jums nereikia atlikti per daug konfigūravimo darbų, tiesiog padarykite keletą paspaudimų ir jūs gerai einate.
Atsisiuntimas yra visiškai nemokamas ir programinė įranga veikia tiek „Mac OS X“, tiek „Windows“ aplinkoje. Jų kūrėjai sunkiai dirba kurdami tinkamus žiniatinklio standartus ir keisdami savo mobilųjį atvaizdavimo variklį. Rekomenduoju savo kitus „dev“ įrankius, jei ieškote papildomų įrankių, padėsiančių jums pakeliui.
PhoneGap
HTML5 sistemoje nebuvo sukurta daug API, kad būtų sukurtos kietos mobiliosios programos. Pažymėtina, kad judriojo kraštovaizdžio trūksta tokių svetainių, todėl „PhoneGap“ taip gerai užpildo nišą. Jų platforma leidžia jums lengvai statyti HTML5 pagrįstas programas kaip vietines programas 6 skirtingose platformose.
Procesas pradeda suspausti kodą ir perduoti jį per „PhoneGap“ taikomąją programą. Iš ten jūsų programos gali pasiekti didelę mobiliojo ryšio rinkos dalį, įskaitant „Android“, „iOS“, „Windows Phone 7“ ir „BlackBerry“.
Jei esate šiek tiek supainioti, nesijaudinkite per daug. Jų palaikymo puslapiuose tvarkingai aprašomas procesas ir siūlomos nuorodos į naudingus išteklius. Jau sukurtos programos buvo sukompiliuotos gražiame bibliotekos stiliaus portfelyje. Patikrinkite visą jų programų kolekciją, kurią galite rūšiuoti pagal įrenginius su ekranais.
„Aptana“ studija
„Aptana“ svetainė yra svarbiausia vieta mokytis apie jų kūrimo priemones. Naujausiame „Suite“ leidime „Aptana 3.0.3“ yra pilnai integruotas IDE, skirtas kurti internetą, CSS stiliai ir HTML žymos lizdas, ir geriausia dalis: „Aptana“ yra visiškai Laisvas Atsisiųsti! Jie siūlo paketus visoms trims pagrindinėms operacinėms sistemoms (įskaitant „Linux“), kuri yra labai patogi kūrėjams.
„Aptana“ ypatingas yra tai, kaip greitai galite sukurti nedidelę žiniatinklio programą ir išbandyti savo dizainą. Studijos apartamentai leidžia jums greitai sukurti ir išbandyti žiniatinklio programą, kuri veikia per Ruby on Rails, PHP, Python arba tiesiog HTML / CSS, ir jų kodo paryškinimo funkcijos neseniai pagerintos įtraukti naujas HTML5 ir CSS3 žymių bibliotekas. Jame taip pat yra „Git“ integracija, integruotas terminalas, kodų derintuvas ir keletas kitų puikių funkcijų.
Mobiliųjų GUI rinkiniai ir piktogramos
Kas būtų internetas be nemokamų nemokamų interneto svetainių? Interneto dizaineriams vartotojo sąsajos svarba yra svarbesnė už viską. Paprasti GUI yra sunku ateiti ir tik kūrybiškiausi dizaineriai sugalvojo darbo sprendimus.
Vis dėlto yra daug nemokamų, tačiau kokybiškų išteklių, kuriuos galėsite išbandyti interneto dizaineriui. Šie GUI rinkiniai daugiausia skirti „Adobe Photoshop“ arba „Fireworks“, kur galite judėti elementais ir eksportuoti juos kaip plokščius vaizdo failus.
Piktogramos yra labai patogus šaltinis. Dizaineriai kuria nemokamus rinkinius ir siūlo juos internete dažniau nei bet kada anksčiau. Viena iš tokių svetainių „Glyphish“ turi nemokama ir pro piktogramų demonstraciją. Šie dizainai grindžiami viena tema, kuri bus naudojama mobiliesiems šablonams ir programų dizainams.
Mūsų mobiliųjų įrenginių prototipų kūrimo šablonų rinkinys padės jums patekti į svetainių ir programų kūrimo kelionę. Jūs neturėtumėte pradėti koduoti, kol neturėsite stiprios grafinės sąsajos ir šie internetiniai rinkiniai padės jums pradėti teisingą kelią.
iOS 5 GUI rinkinys
„iPhone UI Vector Elements“
„iPhone App Icon“ rinkinys
Vieliniai tinklai (DIY rinkinys)
„Android“ sąsajos GUI
