Mobil Cihazlar için Tasarım içine bir bakış
İlk iPhone piyasaya sürüldüğünde, teknoloji dünyasını fırtınadan aldı. O zamandan beri neredeyse 5 yıl oldu ve akıllı telefon pazarında popülerlik arttı, Microsoft bile Windows 7 işletim sistemi ve ortaklarıyla rekabete girdi. Bugünlerde akıllı telefonlarındaki pek çok İnternet kullanıcısı ile, mobil web sitelerinin sayısının agresif bir şekilde artmasını beklemeniz mantıklı geliyor..
Ancak, mobil web için tasarım, ortak web tasarımı ile tamamen farklı bir işlemdir. Web sitelerimiz büyük ekranlar için tasarlanmıştır, ancak akıllı telefonun ekran boyutu buna göre çok küçüktür, bu nedenle rahatsız edici kullanılabilirlik sorunlarına yol açar. Yeni tasarım standartları ve uygulamaları Sorunsuz kullanıcı deneyimi ile daha iyi bir mobil site tasarımı için çok gerekli.
Bu rehberde, akıllı telefonların mobil tarayıcıları için kullanıcı dostu bir site tasarlamayı düşünüyoruz. Daha iyi bir mobil web sitesi tasarlamanız için en iyi uygulamalar ve kullanışlı geliştirici araç hakkında konuşacağım.!
Güçlü Kullanıcı Deneyimi Planlama
Bir mobil web sitesi oluştururken kullanıcılarınızı her zaman göz önünde bulundurun, Sonuç olarak, web siteniz kullanıcıların keyfini çıkarması için tasarlanmış ve oluşturulmuştur. Kullanıcıların bir mobil web sitesinin masaüstü ortamına benzer şekilde davranmasını beklemesi kesinlikle yaygındır. kullanıcı deneyimini kolaylaştırmak başarılı bir mobil site oluştururken ana odak noktanız olmalı.
Kullanıcılarınız için dikkate alınması gereken birçok kullanılabilirlik kavramı vardır. Bu hususlar arasında ekran boyutu, satır içi görüntüler, köprüler, yazı tipi boyutları, ve sayfa gezinti. Daha iyi kullanılabilirlik için web sitenizi oymanız için mobil kullanılabilirlik tasarımı hakkında yazdık. Rehberin yanında, her zaman yeni fikirler için kendinizi uyarın sitenizi geliştirmek için.
Güçlü bir kullanıcı deneyimi planlamanız ayrıca bir kullanıcının web sitenizle nasıl etkileşime gireceğini düşünün. Masaüstünde web siteniz bir fare ve klavye ile etkileşime girebilir, ancak akıllı telefonlarda kullanıcılar dokunarak, vurulması, ve hızlıca kaydırmak sitenizin etrafındakiler. Muhtemelen siteyi, kullanıcıların kullanabileceği şekilde tasarlamanız gerekir. Bu fiziksel hareketlerle site bilgilerine kolayca erişebilirsiniz..
Sayfaları Kısa ve Tatlı Tut
Herhangi bir web sitesinin et ve patates sayfa içeriği. Web sayfalarınızın her biri önemli miktarda faydalı bilgi tutar metin, fotoğraf veya video gibi kullanıcılarınız için Ayrıca, birkaç sayfa için yayınlanan ve metni parçalamaya yardımcı olabilecek, ancak mobil cihazlar için bu teknik olarak tavsiye edilmeyen haber makalelerini ve blog yazılarını da bulacaksınız. daha fazla sayfa yükleme gerektirir, bu kullanıcı tarafında daha fazla bekleme süresi anlamına gelir.
Kesinlikle gerekli olmadıkça öneririm sayfa içeriğinizi kısa tutmak. Ayrıca tatlı görünmesini sağlamanız gerekir. yazı tipini daha büyük bir boyuta biçimlendirme ve belki görüntüleri bir kenara taşıma. İçeriğinizin tam ekranda olması, doğal olarak dikkat çekiyor, optimizasyonun aslında sayfaları taramayı çok daha kolay hale getirdiğinden bahsetmiyorum bile. Bu da neden bir tek sütun düzeni faturaya mükemmel uyuyor.
Çoğu durumda, mobil tarayıcılar web sayfalarını masaüstü tarayıcıları kadar hızlı yükleyemez ve bu okuyucularınızı rahatsız edebilir, bu yüzden yapmanız gerekenler içeriği ve web sitesini optimize et yüksek hızlı içerik yükleme için. Ya yapabilirsiniz içeriğin tamamını korurken makaleyi kısaltın, ya da sadece gereksiz görüntüleri kaldırın. Odağınızı güzellik yerine sadeliğe yerleştirin.
Temel navigasyonunuz, sayfalar arasında gezinmek isteyen ziyaretçilerinizin hayat kurtarıcısıdır. Bir mobil cihazda, ekran bağlantıları doğası gereği daha küçük görüneceğinden, dokunulması çok daha zor olacaktır. Bu sorunu çözmek için gerekli bir tweak gezinti bağlantılarınız için yazı tipini ve alanı en üst düzeye çıkarın, belki tüm blok alanını alıyor. Alternatif olarak yapabilirsiniz gezinme çubuğunu gerçek iPhone uygulamasının sekme çubuğuna benzer olacak şekilde tasarlayın, yukarıda görüldüğü gibi.
Mobil CSS Stilleri Oluşturma
Artık mobil web sitesini daha iyi okunabilirlik ve kullanılabilirlik için nasıl optimize edeceğimizi biliyoruz, CSS stilleri hakkında konuşmak iyi olur. Her CSS stil sayfası, yazı tipleri, boyutları, konumlandırma ve ekran ayarlarıyla ilgili özelliklere sahip birçok seçici içerir. Cep telefonu gelince, dikkat etmek gerekir blokların nasıl yerlerine düştü.
(Resim Kaynağı: Smashing Magazine)
Başlamak için bir alan sitenizin sarıcı genişliklerini yüzde olarak sıfırlayın. Pikselleri konumlandırma, satır yüksekliği, yazı tipi boyutu ve div genişliği için birim olarak kullanmak yaygındır, ancak mobil olarak çalışırken sayfalarınızın olmasını istersiniz. her cihaz arasında akışkan ve geçiş doğal olarak. Konteyner divs'in% 100 genişliğe ayarlanması içeriğin Kenardan akmadan dikey / yatay mod arasında kolayca doldurun.
Tüm düzeninizi yeniden yapılandırmak isteyen insanlardan biriyseniz, ile her şeye vur sıfırlamak. Ayrıca paragraflar, başlıklar ve gezinti bağlantılarının tümü Ekran bloğu; Böylece bu lineer baskı stili hissini elde edersiniz. Kabarcıkları düzeninizden çıkarmak için kenar boşluklarını ve dolguyu yeniden konumlandırın. Tablolardan kaçının Mümkünse, bunlar cihazlar arasında buggy sonuçları elde etme eğiliminde olduklarından.
Büyük görüntüler aynı zamanda cihazlar arasında bir güçlüktür. Web sitenizdeki resimlerin çoğu 480 pikselden daha büyük olacaktır ve kabı kırmalarını istemeyebilirsiniz. İlk seçenek Görüntülerin doğal olarak yeniden boyutlandırılması için genişliklerini% 100 olarak ayarlayın. Kesinlikle mümkün web siteniz için farklı resim grupları oluşturun ve onları tarayıcı aracısına göre farklı kılar, ancak dürüst olmak gerekirse, bu yalnızca tarafınıza daha fazla çalışma ekler, Tekniği sadece gerçekten ihtiyaç duyulduğunda kullanın.
İPhone için Web Siteleri Tasarlama
Mobil pazar payı oldukça büyük ve bölünmüş, ancak Apple iDevices ile birlikte büyük bir dilim pasta aldı. Hem iPhone hem de iPad, yerleşik dokunmatik ekran işlevine sahip, mobil hazır Internet aygıtlarıdır. Aynı varsayılan web tarayıcısına, Safari'ye ve bir dizi başka seçeneğe sahiptirler.
İPhone'a özgü web siteleri için ekran boyutunu hedeflemeniz gerekir. Sabit ekran boyutu Daha eski iPhone modelleri için 480 piksele kadar 320 piksel ve İPhone 4 ve iPhone 4S için 960 pikselden 640 piksel.
iPhone ekranları alanla sınırlıdır. Sahip olmalıdır Gerektiği kadar uzun süren bir içerik bloğu. Öğeleri tek bir sütunda tutma baş ağrısı kurtaracak ve bir sıvı düzenine izin vermek “doldur” Hem dikey hem de yatay modlar. Bunun için muhtemelen başka bir şablon geliştirmeniz ve ziyaretçilerinizin bir iPhone kullanıp kullanmadığını kontrol etmenin bir yolunu bulmanız gerekecektir. Aşağıdaki küçük PHP snippet'i iyi çalışmalıdır:
Temelde mantık dünyayı çekiyor $ _SERVER HTTP ajanı için değişken ve kelimenin kelime olup olmadığını kontrol eder. “iphone” herhangi bir yerde görünür. Evet ise, ziyaretçimizin bir iPhone kullandığını biliyoruz ve oradan biraz farklı HTML, hatta tamamen yeni bir şablon düzeni oluşturabiliriz! Bu aynı zamanda iPhone'a özgü bir stil sayfası ekleyin, sayfa başlıklarınızı değiştirin, görüntüleri kaldırın veya neredeyse tüm dinamik efektleri.
Yeni stiller sunmaya gelince daha kolay bir yol var. Daha önce de belirtildiği gibi, iPhone için maksimum ekran boyutu 960 piksel genişliğinde. Bu nedenle, yeni CSS3 medya sorguları ile doğrudan sitenizin ana stil sayfasına doğrudan stiller ekleyebilirsiniz. sadece iPhone’da görüntüler. Aşağıda küçük bir örnek kod verilmiştir:
@ ortam ekranı ve (maksimum aygıt genişliği: 960 piksel) / * iPhone css * /
Bu çalışır çünkü CSS artık göz atma aracıları ve özelliklerini algılayabilir. Maksimum ekran genişliği aynı zamanda tespit edilebilecek özelliklerden biridir..
İPhone cihazları için hepsi bir arada mobil web sitesinin tasarımını yapmak çok zor değil, yalnızca referans alınacak çok fazla örnek var, yani CSS iPhone. Çalışmakla meşgul ol ve korkma UI tasarımında yeni tekniklerle deneme.
Mobil jQuery Komut Dosyası
Ön uç web geliştiricilerin büyük çoğunluğu jQuery kütüphanesine aşinadır. Kodlama efektleri, animasyonlar, açılır menüler ve diğer tarayıcı içi işlevsellikler için harika bir kısa yol sunar ve jQuery Mobile'ın duyurusu ile daha da harikalaşır. Bu doğrudan teknikte atlamak için tavsiye edilmez ve web sitenizi her yerde efektlerle yükleyin, ancak test amacıyla gelişmiş işlevler çok iyi oynayabilir.
jQuery Mobile normal jQuery'den biraz farklıdır, çünkü size inşa etmek için tam bir ortam sunar. Dosyaları ile çalışırken, sadece JavaScript değil, aynı zamanda düğmeler, bağlantılar ve geçiş efektleri için CSS stilleridirler. Hala web sayfalarını HTML kodunda yazıyorsunuz, ancak jQuery Mobile ekibinin bir çok isteğe bağlı UI tasarım özelliği sağladı. Bu çerçeveyle yapabileceğimiz çok şey var ama o zamandan beri çerçeve hala beta halinde, en basit efektlere bağlı kalalım.
DevGrow blogunda küçük bir öğretici bazı harika örnekler sunar. Resmi site de denemeniz için demolar sunuyor. HTML özelliğini kullandığımızı unutmayın, veri geçişi Önceden tanımlanmış değerlerden herhangi biriyle animasyon efekti eklemek için Bunlara slayt, pop, flip, solma vb. Dahildir. Bu efektlerin tadına bakmak için küçük DevGrow örneğini inceleyin..
Etkileri ve geçişleri oldukça zarif ve tüm mobil arayüzü kesinlikle jQuery ile oluşturabileceğiniz gerçeği de bu platform için ileriye dönük büyük bir adımdır, ancak platformun sadece beta sürümünde olması ile tüm mobil sitenizi oluşturmanızı tavsiye etmem. onların kütüphanesi, özellikle Yazma sırasında tüm ana akıllı telefonlar tarafından desteklenmiyor (özellikle Windows Phone 7), ancak zamanla kesinlikle daha iyi olacak.
Sonunda, bu yeni mobil çerçeveyi tanımaya başlamanızı öneririm önce herhangi bir projeye canlı dağıtım yapmak.
Faydalı Geliştirici Araçları
Mobil geliştiriciler sadece kodlama ve tasarım kaynaklarını aramıyorlar. Ayrıca, güçlü mobil çerçevelerden bahsetmek yerine, yazılım araçları ve IDE'lere yüksek talep var. Web geliştirme biraz bağlılık gerektiren zor bir iştir, ancak ek araçlar kullanmak işinizi çok daha kolay hale getirir.
Opera Mobile Emulator
Mobil web sitenizin nasıl işlediğini kontrol etmenin bir yolunu mu arıyorsunuz? İnternet erişimi olan bir akıllı telefonunuz yoksa, bu çok büyük bir acı olabilir. Veya sitenize bir güncelleme yapıldığında, sitenizi test etmek için akıllı telefonunuzu kullanmak istemezsiniz. Peki, Opera Mobile Emulator mobil web sitenizi test etmek için harika bir yazılımdır..
Öykünücüsü etrafında destek 20 mobil profil Samsung Galaxy S, HTC Desire ve hatta Motorola Xoom gibi tablet gibi. Ayarlamak da mümkündür özel çözünürlük ve piksel yoğunluğu yoğun test amaçlı. Hepsinden iyisi, çok fazla yapılandırma çalışması yapmanız gerekmez, sadece birkaç tıklama yapın ve gitmeniz iyi olur.
İndirme işlemi tamamen ücretsizdir ve yazılım hem Mac OS X hem de Windows ortamında çalışır. Geliştiricileri, web standartları uygun ve mobil işleme motorlarında ince ayarlamalar yapmak için çok zorlar. Size yardımcı olacak ilave araçlar arıyorsanız, diğer cihazlarını da öneririm..
PhoneGap
Sağlam mobil uygulamalar oluşturmak için HTML5 üzerinden geliştirilen birçok API olmamıştır. Özellikle mobil peyzaj bu tür web sitelerinin bulunmadığından, PhoneGap'ın nişi bu kadar iyi doldurmasının nedeni budur. Onların platformu kolayca sağlar HTML5 tabanlı uygulamaları 6 farklı platformda yerel uygulamalar olarak yapılandır.
İşlem, önce kodunuzu sıkıştırarak ve PhoneGap'in uygulama çerçevesi içinden geçirerek çalışır. Oradan uygulamalarınız Android, iOS, Windows Phone 7 ve BlackBerry dahil mobil pazarın büyük bir bölümüne ulaşabilir.
Kafanız biraz karıştıysa, çok fazla endişelenmeyin. Destek sayfaları, süreci özenle özetliyor ve yardımcı kaynaklara bağlantılar sunuyor. Daha önce geliştirilen uygulamalar güzel bir kütüphane tarzı portföyde derlendi. Daha sonra ekran görüntülü cihazlara göre sıralayabileceğiniz tam uygulama koleksiyonlarına göz atın.
Aptana Stüdyo
Aptana web sitesi, geliştirme araçları hakkında bilgi edinmek için önde gelen bir yerdir. En yeni sürüm olan Aptana 3.0.3, web geliştirme, CSS stilleri ve HTML etiketi yerleştirme için tam entegre bir IDE'ye ve en iyi bölüme sahiptir: Aptana tamamen ücretsiz indirmek! Geliştiriciler için büyük kolaylık sağlayan 3 büyük İşletim Sisteminin (Linux dahil) tamamı için paketler sunarlar.
Aptana'yı özel yapan şey, küçük bir web uygulamasını ne kadar çabuk geliştirip tasarımınızı test edebilmenizdir. Stüdyo süiti Ruby on Rails, PHP, Python veya basitçe HTML / CSS üzerinden çalışan bir web uygulamasını hızla geliştirin ve test edin, ve kod vurgulama özellikleri yakın zamanda yeni HTML5 ve CSS3 etiket kitaplıkları ekle. Ayrıca, Git entegrasyonu, dahili bir terminal, kod ayıklayıcı ve bir çok şık özellik ile birlikte gelir..
Mobil GUI Kitleri ve Simgeleri
Etrafta özgürce yalan söylemeyen ağ ne olurdu? Web tasarımcıları için kullanıcı arayüzünün önemi her şeyin üstündedir. Basit GUI'lerin gelmesi zordur ve yalnızca en yaratıcı tasarımcılar çalışma çözümleri geliştirmiştir.
Ancak, web tasarımcısının test edebileceği çok sayıda ücretsiz ve kaliteli kaynak bulunmaktadır. Bu GUI kitleri, çoğunlukla öğeleri dolaşıp düz görüntü dosyaları olarak dışa aktarabileceğiniz Adobe Photoshop veya Fireworks için tasarlanmıştır.
Simgeler sahip olmak için çok kullanışlı bir kaynaktır. Tasarımcılar ücretsiz setler yaratıyor ve onları her zamankinden daha sık çevrimiçi sunuyorlar. Böyle bir web sitesi Glyphish hem ücretsiz hem de profesyonel ikonlardan oluşan bir vitrinde. Bu tasarımlar mobil şablonlarda ve uygulama tasarımlarında kullanılacak tek bir temaya dayanır.
Mobil cihazlar prototipleme şablonları koleksiyonumuz, web sitesi ve uygulama geliştirme yolculuğu boyunca sizin için çok yardımcı olacaktır. Güçlü bir grafik arayüze sahip olana kadar kodlamaya başlamamalısınız ve bu web kitleri doğru yolda çalışmaya başlayacaktır.
iOS 5 GUI Takımı
iPhone kullanıcı arabirimi vektör öğeleri
iPhone App Simgesi Seti
Tel kafes mıknatıslar (diy kiti)
Android Arabirimi GUI
