Perhatikan Reka Bentuk untuk Peranti Mudah Alih
Apabila iPhone pertama dikeluarkan, ia mengambil dunia teknologi dengan ribut. Sejak itu, ia telah hampir 5 tahun dan pasaran telefon pintar telah melonjak dalam populariti, dan walaupun Microsoft telah mendapat persaingan dengan Windows 7 OS dan rakan kongsi. Dengan begitu banyak pengguna Internet pada telefon pintar mereka hari ini, adalah wajar untuk menjangkakan jumlah laman web mudah alih meningkat secara agresif.
Bagaimanapun, mereka bentuk untuk web mudah alih adalah operasi yang sama sekali berbeza dengan reka bentuk web biasa. Laman web kami direka untuk skrin besar, tetapi saiz skrin telefon pintar adalah terlalu kecil berbanding dengan itu, sehingga membawa kepada masalah kebolehgunaan yang menjengkelkan. Piawaian dan amalan reka bentuk baru sangat diperlukan untuk reka bentuk tapak mudah alih yang lebih baik dengan pengalaman pengguna yang lancar.
Dalam panduan ini, kami akan mencari untuk merekabentuk tapak mesra pengguna untuk pelayar mudah alih telefon pintar. Saya akan bercakap mengenai amalan terbaik dan alat pemaju yang berguna untuk anda merancang laman web mudah alih yang lebih baik, jadi mari masuk ke dalamnya selepas melompat!
Perancangan Pengalaman Pengguna yang Kuat
Apabila anda membina laman web mudah alih, penting untuk sentiasa ingat pengguna anda sepanjang masa, sebagai akhirnya laman web anda sedang direkabentuk dan dibuat untuk pengguna dapat menikmati. Sudah tentu umum bagi pengguna untuk mengharapkan laman web mudah alih untuk bertindak sama dengan persekitaran desktop, jadi menjaga pengalaman pengguna mesra harus fokus utama anda semasa membina tapak mudah alih yang berjaya.
Terdapat banyak konsep kegunaan untuk dipertimbangkan untuk pengguna anda. Pertimbangan ini termasuk saiz skrin, imej dalam talian, hiperpautan, saiz fon, dan navigasi halaman. Kami telah menulis mengenai reka bentuk penggunaan mudah alih untuk anda untuk mengukir laman web anda untuk kegunaan yang lebih baik. Selain panduan, anda perlu sentiasa pastikan diri anda berjaga-jaga untuk idea-idea baru untuk memperbaiki tapak anda.
Merancang pengalaman pengguna yang kuat juga bermakna bahawa anda perlu pertimbangkan bagaimana pengguna akan berinteraksi dengan laman web anda. Pada desktop laman web anda boleh berinteraksi dengan tetikus dan papan kekunci, tetapi pada pengguna telefon pintar akan mengetuk, menyentuh, dan meleret cara mereka di sekitar laman web anda. Anda mungkin perlu merancang tapak dengan cara pengguna boleh akses laman web dengan mudah dengan pergerakan fizikal ini.
Keep Pages Short & Sweet
Daging dan kentang dari laman web mana pun adalah kandungan halaman. Setiap halaman web anda memegang sejumlah besar maklumat berguna untuk pengguna anda, seperti teks, foto atau video. Anda juga akan mendapati artikel berita dan catatan blog yang berjalan selama beberapa halaman, yang dapat membantu memecahkan teks tetapi tidak disyorkan untuk peranti mudah alih sebagai teknik memerlukan lebih banyak muatan halaman yang bermakna lebih banyak masa menunggu di sisi pengguna.
Kecuali yang semestinya diperlukan saya cadangkan menjaga kandungan halaman anda pendek. Anda juga harus mempertimbangkan menjadikannya kelihatan manis menggayakan font ke saiz yang jauh lebih besar dan mungkin mengalihkan gambar. Dengan kandungan anda pada paparan penuh ia secara semulajadi menarik perhatian, belum lagi pengoptimuman sebenarnya membuat pengimbasan halaman lebih mudah. Ini juga sebab mengapa a susun atur lajur tunggal sesuai dengan bil dengan sempurna.
Dalam kebanyakan kes, penyemak imbas mudah alih tidak akan memuat halaman web secepat pelayar desktop dan ini dapat mengganggu pembaca anda, itu sebabnya anda perlu mengoptimumkan kandungan dan laman web untuk memuatkan kandungan kelajuan tinggi. Anda boleh sama ada memendekkan artikel sambil mengekalkan kandungan penuh, atau semata-mata keluarkan imej yang tidak diperlukan. Letakkan tumpuan anda pada kesederhanaan bukan kecantikan.
Navigasi teras anda adalah penyelamat kehidupan untuk pelawat anda yang ingin bergerak di antara muka surat. Pada peranti mudah alih, pautan skrin akan kelihatan lebih kecil secara semula jadi, oleh itu lebih sukar untuk diketuk. Tweak penting untuk menyelesaikan masalah ini ialah memaksimumkan font dan ruang untuk pautan navigasi anda, mungkin mengambil kawasan blok keseluruhan. Sebagai alternatif anda boleh reka bentuk bar navigasi supaya sama dengan bar tab aplikasi sebenar iPhone, seperti yang dipamerkan di atas.
Membina Gaya CSS Mudah Alih
Sekarang kita tahu bagaimana untuk mengoptimumkan laman web mudah alih untuk kebolehbacaan dan kebolehgunaan yang lebih baik, adalah baik untuk bercakap tentang gaya CSS. Setiap lembaran gaya CSS mengandungi banyak pemilih dengan sifat yang berkaitan dengan fon, saiz, kedudukan, dan tetapan paparan. Apabila datang ke telefon bimbit anda harus memberi perhatian kepada bagaimana blok anda jatuh ke tempatnya.
(Sumber Imej: Majalah Smashing)
Satu kawasan untuk bermula ialah tetapkan semula pembalut tapak anda ke dalam peratusan. Adalah biasa untuk menggunakan piksel sebagai unit untuk kedudukan, ketinggian baris, saiz fon dan lebar div, tetapi apabila berurusan dengan mudah alih anda akan mahu halaman anda menjadi cecair dan peralihan antara setiap peranti secara semulajadi. Menetapkan divs kontena hingga lebar 100% akan membolehkan kandungan tersebut mengisi dengan mudah antara mod potret / landskap tanpa mengalir di tepi.
Jika anda salah seorang yang ingin menyusun semula susun atur keseluruhan anda, pastikan anda tekan semuanya dengan a menetapkan semula. Juga perenggan, tajuk dan pautan navigasi harus ditetapkan kepada semua paparan: blok; jadi anda mendapat perasaan gaya percetakan linear itu. Letakkan semula margin dan padding untuk mengangkat kembung dari susun atur anda. Elakkan jadual jika mungkin kerana ini cenderung menyebabkan keputusan buggy antara peranti.
Imej besar juga menjadi masalah antara peranti. Kebanyakan imej tapak web anda akan menyebabkan lebih besar daripada 480px dan anda mungkin tidak mahu memecahkan bekas tersebut. Pilihan pertama ialah tetapkan lebarnya pada 100% supaya imej dapat mengubah saiz secara semula jadi. Ia sudah tentu boleh mewujudkan set imej yang berbeza untuk laman web anda dan menjadikannya berbeza berdasarkan ejen penyemak imbas, tetapi dengan jujur ini hanya menambah lebih banyak kerja di pihak anda, jadi cuba gunakan teknik ini hanya apabila ia benar-benar diperlukan.
Merancang Laman Web untuk iPhone
Bahagian pasaran mudah alih agak besar dan dibahagikan, tetapi Apple telah mendapat sepotong besar pai dengan iDevices mereka. Kedua-dua iPhone dan iPad adalah peranti siap sedia Internet mudah alih dengan fungsi skrin sentuh terbina dalam. Mereka mempunyai penyemak imbas web lalai yang sama, Safari, dan pelbagai pilihan lain.
Untuk laman web khusus iPhone, anda perlu menyasarkan saiz skrin. Saiz skrin tetap ditetapkan kepada 320px oleh 480px untuk model iPhone yang lebih tua dan 640px oleh 960px untuk iPhone 4 dan iPhone 4S.
Skrin iPhone adalah terhad kepada ruang. Anda mesti ada satu blok kandungan yang merangkumi selama diperlukan. Menjaga elemen dalam lajur tunggal akan menyelamatkan anda sakit kepala dan membenarkan susun atur bendalir “isikan” kedua-dua potret dan mod landskap. Untuk ini, anda mungkin perlu membangunkan templat lain dan mencari cara untuk memeriksa sama ada pengunjung anda menggunakan iPhone. Coretan PHP kecil di bawah perlu berfungsi dengan baik:
Pada dasarnya logik menarik global kita $ _SERVER pembolehubah untuk ejen HTTP dan menyemak jika perkataan itu “iphone” muncul di mana sahaja. Jika ya maka kita tahu pelawat kami menggunakan iPhone dan dari sana kita boleh meletakkan HTML yang sedikit berbeza atau bahkan susun atur template baru! Ini juga boleh digunakan untuk termasuk lembaran gaya khusus iPhone, menukar tajuk halaman anda, mengeluarkan imej, atau hampir apa-apa kesan dinamik.
Ketika datang untuk melayani gaya baru ada cara yang lebih mudah. Seperti yang dinyatakan sebelum ini saiz skrin maksimum untuk iPhone adalah 960px lebar. Oleh itu dengan pertanyaan media CSS3 baru anda boleh menambah gaya terus ke dalam gaya utama laman web anda yang akan sahaja paparan pada iPhone. Berikut ialah kod contoh kecil:
@media skrin dan (max-device-width: 960px) / * iPhone css * /
Ini berfungsi kerana CSS kini boleh mengesan ejen melayari dan sifatnya. Lebar skrin maksimum adalah salah satu sifat yang juga dapat dikesan.
Semua laman web mudah alih untuk peranti iPhone tidak terlalu sukar untuk mereka bentuk, terdapat terlalu banyak contoh untuk merujuk, I.e., CSS iPhone. Pastikan diri anda sibuk belajar dan jangan takut bereksperimen dengan teknik baru dalam reka bentuk UI.
Skrip jQuery Mudah Alih
Majoriti pembangun web akhir adalah akrab dengan perpustakaan jQuery. Ia menawarkan sedikit kecanggihan hebat untuk kesan pengekodan, animasi, menu dropdown, dan pelbagai fungsi dalam penyemak imbas lain, dan ia hanya mendapat lebih hebat dengan pengumuman jQuery Mobile. Ia adalah tidak disyorkan untuk melompat di dalam teknologi secara langsung dan memuatkan laman web anda dengan kesan di mana-mana, tetapi untuk tujuan ujian, fungsi maju dapat bermain dengan sangat baik.
Mobile jQuery agak berbeza dari jQuery biasa kerana ia memberi anda persekitaran yang penuh untuk membina. Apabila anda bekerja dengan fail mereka, mereka bukan hanya JavaScript tetapi juga gaya CSS untuk butang, pautan, dan kesan peralihan. Anda masih menulis halaman web dalam kod HTML, tetapi pasukan jQuery Mobile ada membekalkan banyak ciri reka bentuk UI pilihan. Terdapat banyak yang boleh kita lakukan dengan rangka kerja ini tetapi sejak itu rangka kerja masih dalam versi beta, mari kita berpegang pada kesan mudah.
Tutorial kecil di blog DevGrow menyediakan beberapa contoh hebat. Laman rasmi juga menawarkan demo untuk anda mencuba. Perhatikan bahawa kami menggunakan atribut HTML, peralihan data untuk menambah kesan animasi dengan mana-mana nilai yang telah ditentukan sebelumnya. Ini termasuk slaid, pop, flip, pudar, dan lain-lain. Lihat contoh DevGrow kecil untuk mendapatkan rasa kesan ini.
Kesan dan peralihan cukup kemas, dan hakikat bahawa anda boleh membina antara muka mudah alih keseluruhan dengan ketat dengan jQuery juga merupakan langkah besar ke hadapan untuk platform ini, tetapi dengan platform hanya dalam beta saya tidak akan mengesyorkan membina laman web keseluruhan anda dengan perpustakaan mereka, terutamanya dengan fakta bahawa ia tidak disokong oleh semua telefon pintar utama pada masa penulisan (terutamanya Windows Phone 7), tetapi ia pasti akan menjadi lebih baik dengan masa.
Akhirnya saya cadangkan untuk membiasakan diri dengan rangka kerja mudah alih baru ini sebelum ini menggerakkan secara langsung pada mana-mana projek.
Alat Pembangun Berguna
Pemaju mudah alih bukan sahaja mencari sumber kod dan reka bentuk. Terdapat juga permintaan tinggi untuk alat perisian dan IDE, belum lagi kerangka mudah alih yang kuat. Pembangunan web adalah tugas yang sukar yang memerlukan sedikit dedikasi, tetapi menggunakan alat tambahan akan menjadikan pekerjaan anda jauh lebih mudah.
Emulator Bergerak Opera
Mencari cara untuk memeriksa bagaimana laman web mudah alih anda membuat keputusan? Ini boleh menjadi sakit besar jika anda tidak mempunyai telefon pintar dengan akses Internet. Atau anda tidak mahu menggunakan telefon pintar anda untuk menguji tapak setiap kali kemas kini ditolak ke pelayan anda. Nah, Opera Mobile Emulator adalah perisian hebat untuk menguji laman web mudah alih anda.
Emulator tidak menyokong 20 profil mudah alih seperti Samsung Galaxy S, HTC Desire, dan juga tablet seperti Motorola Xoom. Ia juga mungkin untuk menetapkan resolusi adat dan ketumpatan piksel untuk tujuan ujian intensif. Paling penting, anda tidak perlu melakukan terlalu banyak kerja konfigurasi, hanya membuat beberapa klik dan anda baik untuk pergi.
Muat turun sepenuhnya percuma dan perisian tidak berjalan di kedua-dua Mac OS X dan persekitaran Windows. Pemaju mereka bekerja keras untuk mewujudkan piawaian web yang betul dan tweaking enjin rendering mudah alih mereka. Saya cadangkan alat dev yang lain jika anda sedang mencari alat tambahan untuk membantu anda di sepanjang jalan.
PhoneGap
Tidak banyak API yang dibangunkan melalui HTML5 untuk membina aplikasi mudah alih padat. Terutama landskap mudah alih telah kekurangan jenis laman web ini, yang itulah sebabnya PhoneGap memenuhi niche dengan begitu baik. Platform mereka membolehkan anda dengan mudah membina aplikasi berasaskan HTML5 sebagai aplikasi asli pada 6 platform yang berbeza.
Proses ini berfungsi dengan memampatkan kod anda terlebih dahulu dan melaluinya melalui rangka kerja aplikasi PhoneGap. Dari sana, aplikasi anda boleh mencapai sebahagian besar pasaran mudah alih termasuk Android, iOS, Windows Phone 7, dan BlackBerry.
Sekiranya anda sedikit keliru jangan terlalu risau. Halaman sokongan mereka dengan kemas menggariskan proses dan menawarkan pautan kepada sumber yang berguna. Aplikasi yang telah dibangunkan telah dikumpulkan dalam portfolio gaya perpustakaan yang indah. Semak koleksi aplikasi penuh mereka yang kemudiannya boleh disusun mengikut peranti dengan tangkapan skrin.
Aptana Studio
Laman web Aptana adalah lokasi utama untuk belajar tentang alat pembangunan mereka. Pembebasan suite terbaru, Aptana 3.0.3, mempunyai IDE bersepadu sepenuhnya untuk pembangunan web, gaya CSS, dan tag HTML yang bersarang, dan bahagian yang terbaik: Aptana sepenuhnya percuma untuk muat turun! Mereka menawarkan pakej untuk semua 3 Sistem Pengendali utama (termasuk Linux) yang merupakan kemudahan besar bagi pemaju.
Apa yang menjadikan Aptana istimewa ialah berapa cepat anda boleh mengembangkan aplikasi web kecil dan menguji reka bentuk anda. Suite studio membolehkan anda cepat membangun dan menguji aplikasi web yang berjalan melalui Ruby on Rails, PHP, Python, atau hanya HTML / CSS, dan ciri penonjolan kod mereka baru-baru ini telah dipertingkatkan termasuk pustaka tag HTML5 dan CSS3 baru. Ia juga dilengkapi dengan integrasi Git, terminal terbina dalam, debugger kod, dan segelintir ciri-ciri lain yang bagus.
Mobile GUI Kit dan Ikon
Apa yang akan menjadi web tanpa hadiah percuma? Untuk pereka web kepentingan antara muka pengguna adalah di atas segalanya. GUI mudah adalah sukar untuk datang dan hanya pereka yang paling kreatif telah menghasilkan penyelesaian yang bekerja.
Walau bagaimanapun, terdapat banyak sumber percuma lagi yang tersedia untuk pereka web anda untuk menguji. Kit GUI ini kebanyakannya direka untuk Adobe Photoshop atau Fireworks di mana anda boleh bergerak di sekitar elemen dan mengeksportnya sebagai fail imej rata.
Ikon adalah sumber yang sangat berguna untuk dimiliki. Pereka bentuk membuat set percuma dan menawarkan mereka dalam talian lebih kerap berbanding sebelum ini. Satu laman web tersebut Glyphish mempunyai pameran kedua-dua ikon percuma dan pro. Reka bentuk ini adalah berdasarkan tema tunggal yang akan digunakan pada templat mudah alih dan reka bentuk aplikasi.
Koleksi template prototaip peranti mudah alih kami akan membantu anda dalam perjalanan laman web dan pembangunan aplikasi. Anda tidak sepatutnya mula pengekodan sehingga anda mempunyai antara muka grafik yang kuat dan kit web ini akan membuat anda bermula pada laluan yang betul.
Kit IOS 5 GUI
Elemen Vektor UI iPhone
Kit Icon App iPhone
Magnet Wireframe (Kit DIY)
GUI Antara Muka Android
