A mobileszközök tervezése
Amikor megjelent az első iPhone, a vihar a tech világot vette. Azóta már majdnem 5 év, és az okostelefon-piac népszerűvé vált, még a Microsoft is a Windows 7 operációs rendszerével és partnereivel folytatott versenyben. Olyan sok internetes felhasználóval, aki mostanában az okostelefonján van, a józan ész, hogy a mobil weboldalak száma agresszívan növekszik.
A mobilhálózat tervezése azonban teljesen más, közös web design. Honlapjaink nagy képernyőre vannak tervezve, de az okostelefon képernyőmérete túl kicsi ahhoz képest, ami bosszantó használhatósági problémákat eredményez. Új tervezési szabványok és gyakorlatok nagy szükség van ahhoz, hogy egy jobb mobil webhelytervezés zökkenőmentes felhasználói élményt nyújtson.
Ebben az útmutatóban egy felhasználóbarát webhelyet kívánunk megtervezni az okostelefon mobil böngészőinek. A legjobb gyakorlatokról és hasznos fejlesztőeszközről fogok beszélni egy jobb mobil weboldal megtervezéséhez, ezért lépjünk be ugrás után!
Erős felhasználói élmény tervezése
Amikor egy mobil webhelyet épít, fontos tartsa szem előtt a felhasználókat, mivel végül a webhelyet a felhasználók számára tervezték és hozzák létre. Természetesen gyakori, hogy a felhasználók azt várják, hogy egy mobil weboldal hasonlóan viselkedjen az asztali környezethez a felhasználói élmény megtartása barátságos a sikeres mobilhely megteremtésénél a fő célpontnak kell lennie.
Számos használhatósági koncepciót kell figyelembe venni a felhasználók számára. Ezek a megfontolások közé tartozik kijelzo méret, inline képek, hiperhivatkozások, betűméretek, és oldal navigáció. A mobil használhatósági tervezésről írtunk, hogy jobban használhassa a webhelyét. Az útmutató mellett mindig szükséged van tartsa magának figyelmét az új ötletekre webhelyének javítása.
Az erős felhasználói élmény megtervezése azt is jelenti, hogy meg kell fontolja meg, hogy a felhasználó hogyan fog kölcsönhatásba lépni a webhelyével. Az asztalon az Ön webhelye kölcsönhatásba léphet egy egérrel és egy billentyűzettel, de egy okostelefon-felhasználóknál megcsapolás, pöcköléséhez, és csúsztatás a webhelyén. Valószínűleg a webhelyet úgy kell megtervezni, ahogy a felhasználók tudják ezeknek a fizikai mozgásoknak a segítségével könnyen hozzáférhet a webhely információihoz.
Tartsa az oldalakat rövid és édes
Bármely weboldal húsa és burgonya a oldal tartalmát. Minden weboldala jelentős mennyiségű hasznos információt tartalmaz felhasználók, például szöveg, fényképek vagy videók. A következő oldalakon futó híreket és blogbejegyzéseket is megtalálhat, amelyek segíthetnek a szöveg felbomlásában, de a mobileszközök számára nem ajánlott a technika több oldalfeltöltést igényel, ami több várakozási időt jelent a felhasználó oldalán.
Hacsak nem feltétlenül szükséges, javaslom az oldal tartalmának rövid megtartása. Azt is fontolóra kell vennie, hogy édesnek tűnik a betűtípus sokkal nagyobb méretre formázása és talán mozgó képek félre. A teljes megjelenítésű tartalommal természetesen vonzza a figyelmet, nem is beszélve arról, hogy az optimalizálás valójában sokkal egyszerűbbé teszi az oldalak szkennelését. Ez az oka annak is, hogy a egy oszlopos elrendezés tökéletesen illeszkedik a számlához.
A legtöbb esetben a mobil böngészők nem fogják gyorsan betölteni a weblapokat, mint az asztali böngészők, és ez bosszanthatja az olvasóit, ezért kell optimalizálja a tartalmat és a webhelyet nagy sebességű tartalom betöltéséhez. Akkor is rövidítse meg a cikket, miközben megtartja a teljes tartalmat, vagy egyszerűen távolítsa el a felesleges képeket. A szépség helyett helyezze a hangsúlyt az egyszerűségre.
A fő navigáció az életmentő, amelyet a látogatók az oldalak között mozognak. A mobileszközön a képernyőhivatkozások sokkal kisebbek lesznek a természetben, így sokkal nehezebb megérinteni. A probléma megoldásához elengedhetetlen csípés maximalizálja a navigációs linkek betűkészletét és helyét, talán az egész blokkterületet felveszi. Alternatívaként lehet tervezze meg a navigációs sávot, hogy hasonlítson az igazi iPhone alkalmazás fülsávjához, mint a fent bemutatott.
Mobil CSS-stílusok építése
Most, hogy tudjuk, hogyan lehet optimalizálni a mobil honlapot a jobb olvashatóság és a használhatóság érdekében, jó lenne beszélni a CSS stílusokról. Minden CSS-stíluslap számos választót tartalmaz, amelyek tulajdonságai a betűtípusok, a méret, a pozicionálás és a megjelenítési beállítások. Amikor a mobilról van szó, figyelni kell hogyan kerülnek a blokkok a helyére.
(Képforrás: Smashing Magazine)
Az egyik terület az elkezdeni állítsa vissza webhelye csomagolószélességeit százalékban. A helymeghatározás, a vonalmagasság, a betűméret és a div szélessége egységként a pixeleket használják, de ha mobilkezeléssel foglalkozunk, az oldalakat szeretné használni folyadék és átmenet az egyes eszközök között természetesen. A konténer divs 100% -os szélességbe állítása lehetővé teszi a tartalom elérését könnyedén töltse be a portré / tájkép módot, anélkül, hogy a szél fölé áramolna.
Ha az egyik olyan ember, aki az egész elrendezést szeretné átépíteni, győződjön meg róla, hogy mindent megüt egy Visszaállítás. Is pontokat, címsorokat és navigációs hivatkozásokat kell beállítani kijelző: blokk; így a lineáris nyomtatási stílus érzését kapja. Helyezze újra a margókat és a párnázatot, hogy eltávolítsa az elrendezésből a puffasztást. Kerülje az asztalokat ha lehetséges, mivel ezek az eszközök között buggyú eredményeket hoznak létre.
A nagy képek a készülékek közötti problémát is jelentik. A webhelye képek többsége nagyobb lesz, mint 480px, és előfordulhat, hogy nem kívánja megszakítani a tárolót. Az első lehetőség az, hogy állítsa be a szélességét 100% -ra, így a képek természetesen átméretezhetők. Ez biztosan lehetséges készítsen különböző képsorozatokat a webhelyére és a böngészőügynök alapján másképp hozza létre őket, de őszintén szólva ez csak több munkát tesz hozzá az oldaladon, így próbáld meg csak akkor használja a technikát, ha valóban szükség van rá.
Weboldalak tervezése iPhone számára
A mobilpiaci részesedés meglehetősen nagy és megosztott, de az Apple egy nagy darab szelet az iDevices-ről. Az iPhone és az iPad egyaránt olyan mobil internetes eszközök, amelyek beépített érintőképernyős funkcióval rendelkeznek. Ezek ugyanazzal az alapértelmezett webböngészővel, Safari-val és számos más opcióval rendelkeznek.
IPhone-specifikus webhelyek esetében célszerű a képernyő méretét célozni. A rögzített képernyőméret beállítása 320px 480px-ral az idősebb iPhone modelleknél és 640px, 960px, iPhone 4 és iPhone 4S esetén.
Az iPhone-képernyők helyet foglalnak el. Neked kellene egy tartalmi blokk, ameddig csak szükséges. Az elemek egy oszlopban tartása megmenti a fejfájást és lehetővé teszi a folyadék elrendezését “kitölt” álló és tájkép módok. Ehhez valószínűleg egy másik sablont kell kidolgoznia, és meg kell találnia a módját, hogy ellenőrizze, hogy látogatója iPhone-t használ-e. Az alábbi kis PHP kódrészlet jól működik:
Alapvetően a logika húzza a globális $ _SERVER változó a HTTP ügynök számára, és ellenőrzi, hogy a szó “iphone” bárhol jelenik meg. Ha igen, akkor tudjuk, hogy látogatónk iPhone-t használ, és onnan kissé más HTML-t vagy akár egy teljesen új sablon elrendezést is fel tudunk állítani! Ezt fel lehetne használni tartalmazhat egy iPhone-specifikus stíluslapot, módosítsa az oldal címeit, távolítsa el a képeket vagy szinte bármilyen dinamikus hatást.
Az új stílusok kiszolgálásának egyszerűbb módja. Mint korábban említettük, az iPhone maximális képernyőmérete 960px. Ezért az új CSS3 média lekérdezésekkel közvetlenül stílusokat adhat hozzá a webhely fő stíluslapjához csak jelenik meg az iPhone-on. Az alábbiakban egy kis példakód látható:
@media képernyő és (max-device-width: 960px) / * iPhone css * /
Ez azért működik, mert A CSS most észlelheti a böngészők és azok tulajdonságait. A maximális képernyőszélesség az egyik olyan tulajdonság, amely szintén észlelhető.
Az iPhone készülékek mindennapos mobil webhelye nem túl nehéz megtervezni, túlságosan sok példa van a hivatkozásra, I.e., CSS iPhone. Tartsa magát elfoglalt tanulásban és ne félj kísérletezzen új technikákkal a felhasználói felület tervezésében.
Mobil jQuery parancsfájlok
Az elsődleges webfejlesztők többsége ismeri a jQuery könyvtárat. Fantasztikus rövidítést kínál a kódolási hatások, az animációk, a legördülő menük és a számos más böngésző-funkció használatához, és a jQuery Mobile bejelentésével még több félelmetes lesz. Ez nem ajánlott közvetlenül a technikába ugrani és terhelje a webhelyét mindenhol hatással, de tesztelés céljából a fejlett funkciók nagyon jól játszhatnak.
A jQuery Mobile egy kicsit különbözik a rendszeres jQuery-től, mivel teljes környezetet biztosít Önnek. Amikor a fájljaival dolgozik, nem csak a JavaScript, hanem a CSS stílusok a gombok, a linkek és az átmeneti hatások számára. Még mindig HTML-kódban weblapokat ír, de a jQuery Mobile csapatnak van számos opcionális felhasználói felületet kínál. Sokat tehetünk ezzel a kerettel, de azóta a keret még mindig béta, ragaszkodjunk az egyszerű hatásokhoz.
A DevGrow blog kis bemutatója néhány pompás példát tartalmaz. A hivatalos oldal demókat is kínál, amelyekkel kipróbálhatja. Ne feledje, hogy a HTML attribútumot használjuk, adatok átmenet animációs hatások hozzáadásához az előre meghatározott értékekkel. Ezek közé tartozik a dia, a pop, a flip, a fade stb. Nézze meg a kis DevGrow példát, hogy megkóstolhassa ezeket a hatásokat.
A hatások és átmenetek eléggé szépek, és az a tény, hogy egy teljes mobil interfészt szigorúan a jQuery-vel tudunk építeni, szintén nagy előrelépést jelent ezen platform számára, de a platform csak béta esetén nem ajánlom a teljes mobil webhelyet a következővel: a könyvtárukban, különösen azzal, hogy ez az az írások idején nem minden nagy okostelefon támogatja (különösen a Windows Phone 7), de az idővel biztosan jobb lesz.
Végül azt ajánlom, hogy megismerkedjünk ezzel az új mobil keretrendszerrel előtt bármely projektben élőben.
Hasznos fejlesztői eszközök
A mobilfejlesztők nem csak a kódolási és tervezési erőforrásokat vizsgálják. Nagy a kereslet a szoftvereszközök és az IDE-k iránt, nem is beszélve a hatékony mobil keretrendszerekről. A webfejlesztés nehéz feladat, amely meglehetősen elkötelezettséget igényel, de a kiegészítő eszközök használata sokkal könnyebbé teszi a munkát.
Opera mobil emulátor
Keresi a módját, hogy ellenőrizze, hogyan teszi közzé mobil webhelyét? Ez hatalmas fájdalmat okozhat, ha nincs okostelefonja Internet-hozzáféréssel. Vagy csak nem akarja használni az okostelefonját, hogy tesztelje az oldalt minden egyes alkalommal, amikor a frissítést a szerverre nyomják. Nos, az Opera Mobile Emulator egy fantasztikus szoftver a mobil weboldal tesztelésére.
Az emulátor támogatja 20 mobilprofil például a Samsung Galaxy S, a HTC Desire és még a Motorola Xoom-hoz hasonló tabletta is. Lehetőség van a egyéni felbontás és pixel sűrűség intenzív tesztelés céljából. A legjobb az egészben, hogy nem kell túl sok konfigurációs munkát végezni, csak néhány kattintás, és jó menni.
A letöltés teljesen ingyenes, és a szoftver Mac OS X és Windows környezetben is fut. Fejlesztőik keményen dolgoznak, hogy megfelelő webes szabványokat hozzanak létre és a mobil renderelőmotorjukat megvilágítsák. Javaslom a többi dev eszközét, ha extra eszközöket keres az út során.
PhoneGap
A HTML5 alatt nem létezett sok API, hogy szilárd mobilalkalmazásokat építsenek. Különösen a mobil táj hiányzott ilyen típusú webhelyek, ezért pontosan ezért PhoneGap tölti ki a rést annyira. A platformok könnyen elérhetőek HTML5 alapú alkalmazásokat építsen natív alkalmazásként 6 különböző platformon.
A folyamat úgy működik, hogy először tömöríti a kódját, és továbbítja azt a PhoneGap alkalmazás keretrendszerén keresztül. Innen az alkalmazások elérhetik a mobil piac nagy részét, beleértve az Androidot, az iOS-t, a Windows Phone 7-et és a BlackBerry-t.
Ha egy kicsit zavarodott, ne fújj túl sokat. Támogatási oldalaik szépen körvonalazzák a folyamatot, és hasznos forrásokra mutató hivatkozásokat kínálnak. A már kifejlesztett alkalmazások szép könyvtári stílusban készültek. Nézze meg a teljes alkalmazásgyűjteményt, amelyet a képernyőképekkel rendelkező eszközökkel rendezhet.
Aptana Stúdió
Az Aptana weboldal a fejlesztőeszközeik megismerésének elsődleges helye. Az Aptana 3.0.3 legújabb verziójának kiadása egy teljesen integrált IDE-t tartalmaz a webfejlesztéshez, a CSS stílusokhoz és a HTML címke fészkeléséhez, és a legjobb rész: az Aptana teljesen ingyenes letölteni! Csomagokat kínálnak mindhárom fő operációs rendszerhez (beleértve a Linuxot is), ami hatalmas kényelmet jelent a fejlesztők számára.
Az Aptana különleges tulajdonsága, hogy milyen gyorsan fejleszthet ki egy kis webes alkalmazást, és kipróbálhatja a tervezést. A stúdió lakosztály lehetővé teszi gyorsan fejleszthet és tesztelhet egy Ruby on Rails-en, PHP-n, Pythonon vagy egyszerűen HTML / CSS-en futó webes alkalmazást, és a kódkiemelő funkciók nemrégiben javultak új HTML5 és CSS3 címkék könyvtárak. Git integrációval, beépített terminállal, kódkeresőkkel és néhány más, különleges funkcióval rendelkezik.
Mobil GUI készletek és ikonok
Mi lenne az a web, amelyen nincsenek freebiesek? A webes tervezők számára a felhasználói felület fontossága minden más felett van. Az egyszerű GUI-k nehezen érhetők el, és csak a leginkább kreatív tervezők dolgoztak ki megoldásokat.
Azonban számos ingyenes, mégis jó minőségű erőforrás áll rendelkezésre a webdesigner számára, hogy kipróbálhassa. Ezek a GUI-készletek többnyire Adobe Photoshop vagy Fireworks számára készültek, ahol az elemek körül mozoghatnak, és lapos képfájlként exportálhatják azokat.
Az ikonok nagyon hasznos forrást jelentenek. A tervezők ingyenes készleteket hoznak létre, és gyakrabban kínálják őket online, mint valaha. Az egyik ilyen Glyphish weboldalon ingyenes és profi ikonok is találhatók. Ezek a tervek egy olyan témakörön alapulnak, amelyet a mobil sablonok és az alkalmazások tervei használnak.
A mobil eszközök prototípus-sablonjainak gyűjteménye nagy segítség lesz az Ön számára a weboldal és az alkalmazásfejlesztés útján. Ne kezdje el a kódolást, amíg nincs erős grafikus felület, és ezek a webkészletek elkezdhetik a helyes utat.
iOS 5 GUI készlet
iPhone UI vektor elemek
iPhone App Icon Kit
Drótváz mágnesek (DIY készlet)
Android interfész GUI
