Photoshop'ta Şık iPhone Uygulaması Kullanıcı Arabirimi Düzenleri Tasarlama İpuçları
Web için grafik tasarım, çağlar boyunca popüler bir trend olmuştur. Ve Apple'ın iPhone'un 2007'de icat edilmesiyle, uygulama mağazası muazzam bir miktar büyüdü. Şimdi iOS uygulama tasarımcıları ve geliştiricilerinin bir araya gelerek gerçeğe fantastik kavramlar geliştirdik.
Ancak Xcode öğrenmek ve Objective-C programlamaktan hoşlanmıyorsanız, Photoshop daha fazla ilgi gösterebilir. Aşağıda, katil iOS uygulaması maketlerini tasarlamak için aldığım ipuçlarından bazılarını sunacağım. Ve her zaman ortaya çıkan yeni trendler olduğu için tasarım topluluğu sürekli olarak uygulamaların nasıl oluşturulacağını yeniden tanımlıyor. Bunu, Apple cihazları için tasarım yapmaya yeni başlayan bir kaynak kılavuzu olarak düşünün.
Uygun Belge Ayarları
Sayfadaki öğeleri düşünmeden önce, iPhone grafiklerinin nasıl oluşturulduğunu anlamalısınız. İPhone 4 / 4S modellerindeki yeni retina ekranında ekran hala fiziksel olarak aynı boyutta ölçülüyor. Ancak piksel cinsinden ekran aslında orijinalden iki katına çıkar - yani 326ppi çözünürlükte 640 × 960 kullanıyoruz.
Ayrıca iPhone 3 / 3GS simgeleri genellikle 57 × 57 pikseldi. iPhone 4 ve 4S ekranlarında varsayılan olarak 114 × 114 kullanılır (ancak daha eski çözünürlükler için ölçeklendirilir). Neyse ki, simge tasarım süreci bir UI düzeni oluşturmaktan oldukça uzak. Ancak bir tasarımcı olarak, her iki beceriyi de oluşturmak asla acıtmaz.
Bu ayarları çok kullanacaksanız, bunları önceden ayarlanmış belge boyutu olarak kaydetmenizi öneririm. Photoshop için yeni belge penceresinde “Ön Ayarı Kaydet…” etiketli bir düğme göreceksiniz. Sadece bir ad verin ve bunu her yeni belge oluşturduğunuzda açılır listeden seçebilirsiniz.
Teehan + Lax, iPhone UI öğelerini manuel olarak oluşturmak yerine, özellikle Photoshop için ücretsiz bir UI kiti indirir. Bu, bir iPhone 4 render, üst çubuklar, düğmeler, klavyeler ve diğer birçok yararlı öğeyi içerir. Kesinlikle önce bu kapmak ve bu öğelere kolay erişim var yerel bir dizine kaydedin.
Çubukları ve Düğmeleri Özelleştirin
Uygulamanızın üst ve alt kısımlarında büyük olasılıkla menü çubukları bulunur. Üst kısım, geçerli görünümü etiketlemek için geri ve düzenleme düğmeleriyle birlikte kullanılır. Alt kısım genellikle gezinmedir ve bunu gerçekleştirmek için genellikle sekmeleri kullanır.
Teehan + Lax bunlar için gerçekten genel örnekler kullanır. Ancak kendi renkleriniz, dokularınız ve diğer göz şekerlerinizle özelleştirmeniz çok daha kolaydır. Örnek olarak Grup katman Çubuğunu (Gri-Mavi) alalım ve iPhone boyutunda yeni bir belge penceresine sürükleyelim. Ardından soldaki küçük üçgeni tıklayın ve Çubuk Üst etiketli başka bir alt grup açın. En altta, gradyan için bir kaplama efekti olan bir arka plan katmanı bulunur.
Bu arka plan katmanında FX'i açın ve degrade katmanına çift tıklayın. Varsayılan renkleri Apple'dan kaldırdım ve (soldan sağa) # 3478a7'yi # 5eb0e7 olarak ayarladım. Ayrıca iki düğme degradelerini kaybetmek zorunda kalacak - bunlar için zengin bir karanlık etkisi için # 052b50 ila # 044a8e değerlerini kullandım.
Dokularla Eğlenceli
Sadece bu küçük degrade değişiklikleriyle uygulamanızı özelleştirmenin oldukça basit bir görev olduğunu söyleyebilirsiniz. Sadece biraz ayrıntı için, çubuk degrade alanının üzerine bir doku veya desen ekleyebiliriz. Bu demo örneği için eğik çizgilerle gideceğiz.
Saydam bir arka planla 7 × 7 piksel yeni bir belge oluşturarak başlayın. Ardından, kalem aracınızı en küçük ölçekte (1 piksel x 1 piksel) ayarlayın ve sağ üst köşeden sol alt köşeye bağlayın. Siyah HEX # 000000 kullandım, ancak daha sonra her zaman rengi değiştirebileceğiniz için önemli değil. Takip etmiyorsanız aşağıdaki ekran görüntüsüne bakın:
Şimdi Düzenle -> Deseni Tanımla… 'ya basın ve bir ad verin, ardından kaydet'e basın. İhtiyacımız olan tek şey desen olduğundan pencereyi şimdi (kaydetmeden) kapatmaktan çekinmeyin. Şimdi çubuğun üst grubuna geri arka plan üzerinde yeni bir katman oluşturun. Tüm arka plan gradyan çubuğunu seçecek vektör maskesine CMD + tıklama veya CTRL + tıklama.
Ancak, yeni oluşturulan yeni katmanı tekrar tıkladığınızdan emin olun, böylece mavi renkle vurgulanır. Bu yeni desenle dolduracağız, ancak yalnızca üst çubuk gradyanının (ve düğmelerin altında) çizgilerini görmek istiyoruz. Üst menüde Düzenle -> Doldur'a gidin ve açılır menüden “Desen” i seçin. Aşağıdaki kutuda son noktalı deseni seçmeli ve Tamam'a basmalısınız.
İlk başta çizgiler oldukça sert görünüyor. Böylece katmanlar palet dolguyu yaklaşık% 20 değerine düşürür. Ayrıca karıştırma modunu Yer Paylaşımı olarak değiştirebiliriz, böylece çubuklar degrade renklerle akar. % 100'e kadar uzaklaştırın ve harika efekti kontrol edin!
3 piksele 3 piksellik bir doküman oluşturarak ve bir artı sembolü doldurarak başka bir tatlı doku oluşturabilirsiniz. Bunun, üst çubuk gradyanımızın görünümünü nasıl bu kadar çarpıcı şekilde değiştirdiğine bir örnek ekledim. Rengi saf siyahtan saf beyaza #FFFFFF değiştirmeyi de deneyebilirsiniz.
Sekme Çubuğu Simgeleri
Uygulamanızın altında bulunan gezinme düğmeleri, genel kullanıcı deneyimi için çok önemlidir. Kullanıcıların ayarları nerede düzenleyeceklerini, görevleri nasıl gerçekleştireceklerini ve uygulamanızda hızlıca ne yapacaklarını bulmaları gerekir. Aksi takdirde sık sık sinirlenir veya sıkılırlar ve denemeyi bırakırlar. Yani bir ipucu daha alt çubuktaki gezinti alanını ladin edelim.
Aynı iPhone 4 GUI PSD dosyasını kullanarak “sekme çubuğu” grubunu bulun. Bunu CMD / CTRL + ile Photoshop'taki bloğa tıklayarak yapabileceğinizi unutmayın. Üst çubuğa benzer şekilde, eşleşen bazı stiller için arka plan FX gradyanını düzenleyebiliriz. Ancak alternatif olarak, siyah varsayılan gradyan çoğu renk şemasında iyi gider.
Bazı simgeler için The Working Group'un 24px, 48px ve 64px olarak gelen retina setini tavsiye ederim. GUI PSD'deki simgelerin her birine FX katman stilleri uygulanır - temel olarak bir ışık gölgesi ve bir yer paylaşımı gradyanı. Bu küçük detay parçaları gerçekten müthiş bir tasarıma sahiptir, bu yüzden piksellerinize dikkat edin. Sorun yaşıyorsanız bu renk şeması tasarımcısını kullanmayı deneyin.
Metin etiketlerinin kullanıcı deneyimini nasıl etkileyeceğini düşünmelisiniz. Sekme simgelerinin kendi başlarına yeterli olduğunu düşünüyorsanız etiket metni yoluna girebilir. Bununla birlikte, seçeneklerinizi açık tutmak ve birkaç farklı fikirle oynamak önemlidir. Uygulamanız için hangi yöntemin en iyi olduğunu görmek için arkadaşlarınızın ve iş arkadaşlarınızın görüşlerini almaya çalışın.
Bir diğer oldukça popüler teknik, uygulama tasarımcılarının sekme çubuğunu 5 yuvaya ayıran bir orta düğme oluşturmasıdır. Yerden tasarruf etmek ve navigasyona biraz zarafet katmak için bu tasarımı kullanan çok yaratıcı uygulamalar gördüm. Formspring buna bir örnektir, aşağıdaki ekranı ekledim.
Yararlı Bağlantılar
- Glif Icon Set
- Photoshop'ta bir iPhone Bank Uygulaması tasarlama [Eğitim]
- Photoshop'ta iPhone Uygulamaları Tasarlama [PDF]
- İPhone / iPad Uygulama Geliştirici Araçları ve Kaynaklarının Faydalı Koleksiyonu
- iPhone ve iPad Uygulamaları için iOS Kullanılabilirlik İpuçları ve Kaynakları
- İlk iPhone Uygulamanızı Oluşturma
Sonuç
İOS uygulamalarıyla ve Adobe Photoshop ile çalışmak için bu stratejiler, tasarım duyularınızı daha da geliştirdikçe kullanışlı olacaktır. Mobil uygulamalar, web sitelerine ve logolara göre tamamen farklı bir top oyunudur. Sürekli olarak yeni teknikler öğreneceğiniz için bu işlemi aklınızda bulundurun.
Yukarıda eklenen bağlantılar ile birlikte uygulama arayüzü tasarımı ile ilerlerken çok daha rahat hissetmelisiniz. Yerleşim maketleri her zaman zordur ve inşa etmek ve çalışmak için zaman gerektirir. Ancak yeterince bağlılığınız varsa, mobil pazar muhtemelen en zengin alan olacaktır. Başka sorularınız veya yorumlarınız varsa lütfen aşağıdaki tartışma alanında bize bildirin.
