Ürün Grafikleri Görüntüleri Daha Bilgili Hale Getirmek için 6 Teknik
Web tasarımcıları pazarlama teknikleri ile çok zekice oldular. Sayfa içeriğini yayınlamak her zaman iyidir, ancak ziyaretçilerinizi kapma söz konusu olduğunda, dikkat görüntüleri en popüler medya biçimidir. Demo videolar gibi sese ihtiyaç duymazlar ve önemli bilgileri saniyeler içinde hızlı bir şekilde iletebilirler. Kolay gözükebilir, ancak web sitelerinde bilgilendirici görüntüler oluşturmak için bazı kayda değer teknikler vardır..
Bunlar arasında özellik etiketleri, yakın ekran görüntüleri, fiyat karşılaştırmaları ve diğer dakika ayrıntıları bulunur. Web tasarımcıları yeni uygulamaları, yazılımları, video oyunlarını veya diğer birçok ürünü modellemek için bilgi grafiklerini kullanabilir! Her ne kadar yaygın olarak bu teknikleri farklı teknolojilerde kullanılan teknikleri görseniz de.
Yalnızca ipuçlarını değil, aynı zamanda harika bilgilerle dolu güzel ürün grafiklerinin gerçek hayattan örneklerini sunduğumuz fikirleri aşağıda bulabilirsiniz..
1. İçeriğinizi Genişletin
Bilgilendirici görüntüler, iyi web sayfası içeriği yerine kullanılmamalıdır. Yerine kilit noktalarınızı genişletmek için görüntüleri kullanın ve onları net olarak göster ziyaretçileriniz için. Bunu yapmanın en iyi yollarından biri önemli alanları vurgulamak için küçük bir demo oluşturmak Bir öğretici. Birkaç bilgilendirici grafik ve ekran görüntüsüyle, okuyucunuzun ilgisini her adımda ilerletmek çok daha kolaydır.
Bir yazılım öğreticisini (Photoshop öğreticisi gibi) göstermeye çalıştığınızda bunu yapmak zor olabilir mesajı yazılı metne iletmek. Ziyaretçiler makalenize inecek ve derhal bir saniye içinde materyali bilinçaltı olarak yargılamaya başlayacaktır. Web Designer Wall, kullanışlı bir grafikle birlikte CSS3 yuvarlak görüntüler oluşturma konusunda harika bir eğiticiye sahiptir. Bu, bazı etiketleri ve efektin yakın bir fotoğrafını içerir..
Orijinal makale sayfasında, bu resim başınıza ne oluşturacağınıza daha net bir resim katar. Yazar küçük bir demo bağlantısı ekledi, ancak neden bazı demo görüntüleri içermiyor? Doğru etiketlenmiş bir demo çekimde dikkat çekmeniz çok daha olası.
Dene Sadece medya içeriği uğruna resim eklemekten kaçının Yazında. Bir görüntü olmadan yöntemlerinizi veya nedenlerinizi açıklayabilirseniz, önce buradan başlayın. Ancak daha sonra web kopyanıza bakınca, ayrıntılı bir resim grafiğindeki bazı noktaları tekrar etmeyi düşünmelisiniz. Özellikle bir öğretici karmaşıklık arttıkça daha fazla görsel ipucu gerektirir. İki örnek bir web sitesi veritabanı veya tablo veri seti oluşturmayı içerebilir.
2. Önemli Özellikleri Vurgulayın
Çünkü her bir yazılım / teknoloji parçası o kadar çok özelliğe sahip olacak ki, her bir parçayı açıklamak neredeyse imkansız. Sadece bu değil, aynı zamanda ziyaretçilerinizin bilgi grafiğinizdeki 20'den fazla etiketi okumakla ilgilenmeleri pek mümkün değil. En ilginç özelliklere sadık kalın ve biraz daha derinliği açıklamak için etiketleri kullanın.
Etiket içeriğiniz için web kopyasını yazarken donuk dillerden kaçının her ne zaman mümkünse. Ziyaretçiler uygulamanızın en son sürümüne bakıyorlarsa, renk düzenindeki değişiklikler hakkında çok fazla önem vermeyebilirler. Bu onların günlük iş akışını nasıl etkileyecek? Bunun yerine belki onlar için neyin yararlı olduğunu vurgulayın, Yeni bir arayüz paneli veya çok kullanıcılı bağlantı gibi. Bunlar genellikle olmalıdır soyut özellikler sadece göremediğin “seyir” üründe.
Bu özellikleri açık bir şekilde açıklamak için böyle bir etikete sahip olmak en bol yanıtı verecektir. Ziyaretçiler kendi kararlarını verebilecek zeki, olgun müşteriler olarak gördüklerini hissedecekler. Özelliklerinizden gerçekten hoşlanıyorlarsa, bu yazılımınızı veya ürününüzü satın almak için daha büyük bir itme sağlar.
Aşağıdaki Mozilla Firefox güncelleme sayfasından bir örnek.
Tasarımcıların etiketleri ve yeni özellikleri göstermek için noktalı kıvrımlı çizgiler kullandığını görebilirsiniz. Bunlar aslında kesinlikle bir kabın içine yerleştirilmiş arka plan görüntüleri div. Şaşırtıcı bir şekilde, tüm etiket metni de HTML etiketlerinin içine yazılmıştır (değil sadece bir büyük resim).
Bu yöntemin Google tarayıcı botları için sadece kullanışlı olmadığını, aynı zamanda normal web sayfasını tam olarak deneyimlemeyen mobil kullanıcıların da olduğunu düşünüyorum..
Ayrıca Panorama özelliğinin sola nasıl döndüğünü görün küçük sunuyor “Daha fazla bilgi edin” bağlantı. Bu, muhtemelen bilgi grafiği oluştururken elde edebileceğiniz en iyi uygulamadır! Aynı sayfada alternatif sayfalarınız veya bağlantılarınız varsa, ziyaretçileriniz karmaşık özellikler hakkında daha fazla bilgi edinmek için bu bağlantıları tıklayabilir..
Bilgilendirici grafiklerin, teaser'ları ve ürün özelliklerini kolayca ziyaretçilerinize göstermek için kullanıldığını unutmayın. Yani grafiğin etrafındaki alanda sınırlı olsanız da, her zaman harici bir sayfada daha fazla bilgi edinme şansı sunun.
3. Basit, Göze batmayan Etiketler
Etiketler bilgilendirici ürün grafikleri yaratmada gerçekten en önemli unsurdur. Ziyaretçilerin ürününüz, yazılımınız, web siteleriniz, mobil uygulamanız, vb. Alanlardaki farklı alanları anlamaları gerekecektir. Ürün özelliklerini gerçekten açıklamanız gerektiğinde, seçmeniz önemlidir. hotspot'lar etiketlemek için.
Apple Computers, muhtemelen basit etiket ayrıntılarının en iyi örneğidir. Tabletler, dizüstü bilgisayarlar veya rezil iPhone'a bakarken bu kesin teknikleri grafiklerinde fark edebilirsiniz. Özellikleri ve teknik özellikleri genellikle diğer büyük marka bilgisayar üreticileriyle aynıdır. Yine de, grafik modelleri o kadar el değmemiş ki, ürünler kendilerini pratikte satıyorlar..
Süreci bozduğunuzda, düşündüğünüzden çok daha basit olduğuna dikkat edin! Ürün grafikleri, genel web sitesi tasarımının yalnızca standart bir parçasıdır. Gübre veya çarşaf veya ticaret kartı satıyor olsanız bile, bu etiketleme tekniklerini iyi kullanmak için kullanabilirsiniz. Ve Apple'ın gerçekten basit bilgi verici grafikleri olmasına rağmen, bunu yapacak tek şirket değiller. Deneyin Niş içinde işletmeler için etrafında googling Web sitesinde herhangi bir fantezi bilgi etiketi veya teaser ekranı spor yapıp yapmadıklarını görmek için.
4. Dinamik İçerikli Görüntü
Bazı web geliştiricileri için yazılımınızın etiketli bir grafiğini oluşturmak yeterli olmayabilir. Üzerine gitmek istediğiniz ancak web sayfanızın küçük bir bölümünde yer alan birçok benzersiz özellik olabilir. Mümkün bir dizi tanıtım aşaması oluşturun küçük bir ürün demosu boyunca ziyaretçilerinize yol gösterici.
Newsberry zarif bir şekilde bunun bir örneğini gösterir. Ana sayfalarında, altında küçük bir mini gezinti bulunan bir blok alanı göreceksiniz. Farklı ekran görüntüleri ve beraberindeki bazı tanımlayıcı metinlerle birlikte işlem boyunca 5 adım içerirler. Newsberry'nin ne için kullanıldığı hakkında hiçbir fikriniz olmasa bile, tanıtım içeriği işleri çok net bir şekilde açıklıyor. Hatta slayt serisi boyunca birkaç demo bağlantısı sunulmaktadır..
İçeriğinde ilerlerken, birçok slaytın küçük bir tarayıcı penceresinde ekran görüntüleri içerdiğini fark etmelisiniz. Bu etki aslında taklit etmek çok basittir! Sadece gerek arka plan görüntüleri olarak kullanmak için bir resim bulun ve ekran görüntülerini yeniden boyutlandırın. Bu efekt her ürün için işe yaramaz, ancak ekranları bir web uygulamasından çerçevelemek için iyi bir yoldur.
5. Ekran Görüntülerini ve Ürün Fotoğraflarını Temizle
Ürünleriniz için en iyi etiketlerin ve özelliklerin tümünü dahil etmek mümkündür ancak yine de satışları kaçırmaktadır. Grafiğiniz için seçtiğiniz ekran görüntüleri ve fotoğraflar sonuçta en ince ayrıntılar kadar önemlidir. Windows ve Mac OS X'te, masaüstünüzün ekran görüntüsünü klavye kısayollarıyla çekmenin yolları vardır. Photoshop'ta bir süre ile birlikte bu yöntemi kullanarak, çok ilginç özellik demoları biriktirebilirsiniz.
Ürününüz çok kıvrılmışsa, denemelisiniz birkaç farklı görüntüyü bir araya getirme. Tweetbot'un web sitesinden yukarıdaki örnekte, uygulamadaki bir dokunma eylemini belirtmek için mavi daireler kullanılmıştır. Çok sayıda etiket içeren tek bir ekran görüntüsünün yerine, 3-5 farklı grafiği birleştirmek için küçük bir jQuery resim galerisi kullanmayı düşünün. Bu size daha fazla fırsat verir ürünün farklı bakış açılarına odaklanmak ziyaretçilere daha zengin bir deneyim sunulurken.
Bilgisayarınızdan veya akıllı telefonunuzdan bir çekim yaptığınızda, resim her zaman% 100 zoom olarak kaydedilir. Photoshop gibi resim düzenleyicileri bunları yeniden boyutlandırma yeteneğine sahiptir, ancak genellikle ayrıntıları kaybederler. Peki, böyle bir grafiği küçük web sitenize nasıl sığdırabilirsiniz? En iyi tekniklerden biri büyütme Uygulamayı küçültüp en önemli parçaların büyütülmüş bölümlerini oluşturduğunuz. Bu teknik yazılımda fiziksel ürünlere göre daha yaygın görülür - Aşağıdaki tasarım sürecini ayrıntılı olarak anlattım..
6. "Zoom Lens" Efekti Oluşturma
Adobe Photoshop'ta büyüteç efekti oluşturma adımlarını oluşturacağım. Başka bir grafik düzenleyici kullanıyorsanız, büyük olasılıkla aynı görevleri gerçekleştirebilirsiniz, ancak menüler ve komutlar farklı olacaktır..
Bu tekniğin en iyi örneklerinden biri, Mac için Şeyler ana uygulaması ana sayfasında. Grafikte uygulama küçültülmüş, böylece küçük bir gölge ile birlikte sayfaya mükemmel şekilde sığabiliyor. Bununla birlikte, bazı önemli alanlarda, iç içeriği çok daha büyük olan bir daire göreceksiniz. Objektiften parlayan ışık gibi görünmek için beyaz bir iç ışıma bile eklenmişlerdir.!
Bonus: "Zoom Lens" Etkisi Photoshop Eğitimi
Grafiğiniz için kullanmak istediğiniz ekran görüntüsünü almaya başlayın. Hongkiat ana sayfasının ekranını hızlıca çektim. Sadece tarayıcı penceresini kırpıp yaklaşık 700 piksel boyutuna getireceğim. Kendi web sitenizin içerik alanına sığacak genişliği yeniden boyutlandırmanız gerekir. Şimdi bu arka planın üstüne yeni bir katman yapın ve orantılı tutmak için vardiyayı tutarken dairesel bir seçim yapın. İstediğiniz herhangi bir renkle doldurun.
Aşama 1
Daireyi seçili tutarak, katmanlar panelindeki dolguyu% 0 olarak değiştirin. FX katmanının altına bir 1px-2px siyah kontur ve beyaz bir iç ışıma ekleyin. Daha az beyaz aydınlatma için opaklığı azaltabilirsiniz..
Adım 2
Seçilen çevreyi hala koruyarak arka plan katmanınıza gidin ve ctrl (Mac kullanıcıları için komut veya cmd anahtarıdır..) + c kopyalamak için. Ardından, arka planın üzerinde ancak büyütme çemberi ve yapıştırın altında yeni bir katman oluşturun. Alternatif olarak, sadece tanttaki seçim ile yeni bir katmanı çoğaltmak için ctrl + j tuşlarına basabilirsiniz..
Dönüştürme aracını açmak için ctrl + t tuşlarına basın. Şimdi tutarken yeni yinelenen katmanı ölçeklendirin vardiya her şeyi orantılı tutmak ve alt merkezi sabit tutmak.
Aşama 3
Seçiminizi tekrar yapmak için ctrl tuşuna basın ve büyüteç katman simgesine tıklayın. Unutmayın, yinelenen arka plan katmanını katmanlar panelinde (doğrudan büyüteç camımızın altındaki katman) vurgulayarak, açık mavi bir arka plana sahip olacağını unutmayın.
Geçerli seçimi tersine çevirmek için Ctrl + Shift + i tuşlarına basın. Artık yeniden ölçeklendirilmiş ekran görüntüsümüzden fazla çöpleri temizlemek için sil düğmesine basın. Eklenen bir efekt için, küçük bir gölge eklemek için FX katmanını yukarı çekin. İnce bir 1 piksel dikey çizgi çizebilir ve Sıvılaştırma Filtresi'ni (Filtre> Sıvılaştır) küçük bir tutamaç oluştur!
Sonuç
Harika ürün grafikleri tasarlamak için, temel bilgileri hatırlamanız gerekir. Ziyaretçiler sadece ne satmaya çalıştığınızı anlamak ister! Bu bilgiyi elde etmenin en kolay yolu, bir dizi ekran görüntüsü veya tek bir ayrıntı grafiği. Etiketler, yalnızca en önemli özellik kümelerinin ana hatlarını çizebileceğiniz bu bulmacanın ikinci parçası..
Tüm bu teknikleri bir araya getirdiğinizde büyük resmi fark etmeye başlayacaksınız. İndirme ve satın alımlar hızlanır - özellikle grafiklerinizi ana sayfanızın önüne ve ortasına yerleştirirseniz. Bu teknikler grafik ve web tasarımcılarının ürün tasarımı alanında başlaması için mükemmeldir. Birkaç soyut fikir verdik, ancak aşağıdaki tartışma alanındaki düşüncelerinizi duymak isteriz!
