Apple.Com Tasarımında Değişiklikler
Apple.com Geçtiğimiz hafta içinde tasarımında bazı düzenlemeler yapıldı, ya da öyle görünüyor ki, eğer yeterince dikkat etmediysen, farketmemiş olabilirsiniz.
Birçok rapor buna “yeniden tasarlama” olarak atıfta bulunsa da, bence onu böyle sınıflandırmak zordur. Bazı önemli değişiklikler kesinlikle vardır, ancak değişiklikler tam olarak gözden geçirilmiş değildir. CNN.com için olduğu gibi 2009'un sonlarında.
Bununla birlikte, değişiklikler web tasarımcıları için önemlidir, bu yüzden kısaca onlara bakacağım. Bahsetmeyi ihmal ettiğim değişiklikler hakkında bir şey varsa, yorum yapmaktan çekinmeyin.
Yeniden Tasarlanmış Gezinme Çubuğu
En önemli değişiklik (yine de biraz ince olsa da), navigasyon çubuğunun görünüşüdür. Apple, herkesin sevdiği ve büyülediği tasarım yönelimli çubuklardan birine sahiptir. Geliştirilebilmesi imkansız görünüyor. Eh, onlar daha iyi görünümlü ve daha sezgisel hale getirmek için yollar bulmak mümkün.
İşte eski navigasyon çubuğu:
İşte yeni:
Değişiklikler şunları içerir:
- Daha koyu
- Degrade daha parlak bir görünümle değiştirildi.
- Logonun görünümü basitleştirildi
- Arama kutusu daha küçüktür (daha fazlası için)
Bence, hiçbir şeyin değişmediği izlenimini verirken, gerçekten çok önemli bir UI öğesinin görünümünde gerçekten önemli değişiklikler olan şeyleri yapmak için büyük bir tasarımcı ekibini almayı düşünüyorum. Görsel ayrıntıların genellikle tasarımın genel hissi kadar önemli olmadığını göstermeye başlar.
Esnek Arama Kutusu (Sadece WebKit)
Açıkça WebKit'i önyargılı olan Apple tasarım ekibi, bunlardan biri de arama kutusuyla ilişkilendirilen bazı WebKit özellikli geliştirmeleri içeriyordu.
Çoğu tarayıcıda, arama kutusuna tıklamak arka planını daha okunabilir bir beyaza dönüştürebilir. Chrome veya Safari'de, arama kutusu daha geniş ve tartışmaya açık bir şekilde kullanılabilmesi için CSS3 Geçişlerini kullanarak animasyon yapar. Aşağıdaki ekran yakalama, daha geniş bir hale gelmesi için animasyon yaptıktan sonra Chrome'daki arama kutusunu gösterir:
Arama kutusunun boyutunu karşılamak için, diğer gezinme öğeleri ve logo kendilerini yeniden boyutlandırabilir.
Bu özelliği beğendim; sezgisel bir his verir. Ama bence, küçük bir kusur var: Odağı çıkardıktan sonra başlangıç durumuna geri dönmez. Tabii ki, eğer arama kutusuna bir şey yazılmışsa, o zaman boyutun geri değişmesini istemezsiniz, ancak odağı kaybederse ve boş kalırsa normal durumuna dönmesi gerektiğini düşünüyorum.
Elbette, herkesin arama kutusuna tıklayıp herhangi bir şey yazmaması son derece olası olmadığından, bunun önemsiz bir ihmal olduğunu varsayalım.
Gezinme Çubuğunun Animasyonlu Girişi (Sadece WebKit)
Başka bir küçük WebKit sadece özellik navigasyon çubuğunun animasyonlu girişidir. Bu etkiyi daha önce sitelerinde görmeyi hatırlamıyorum, bu yüzden başka bir yeni özellik olduğunu farz ediyorum. Animasyonlu giriş sadece ana sayfada ve tarayıcı oturumu başına yalnızca bir kez gerçekleşir. Bu iyi uygulama ve geliştiricilerin arayüzlerine animasyonlu efektler ekleyerek iyi bir derstir.
Yukarıdaki ekran yakalamasında görüldüğü gibi, navigasyon çubuğu muhtemelen CSS3 animasyon animasyonu kullanarak ekran dışı olarak girer ve animasyonun ne zaman gerçekleşmesi gerektiğini veya oluşmaması gerektiğini kontrol etmek için JavaScript'i kullanır.
Animasyonlu Ürün Tarayıcıları (Sadece WebKit)
Diğer bir yeni ekleme, bazı ürün sayfalarında animasyon kullanımıdır. CSS3 tabanlı animasyonlar kullanılır Mac ve iPod Ürün tarayıcıları, bunlardan biri aşağıda gösterilmiştir:
Ürünler sayfaya ilk ulaştığınızda canlandırır ve alt kategoriler arasında geçiş yaparsanız, görünen ürünler uzaklaşır ve yenileri yerlerine atlar. Bu, CSS3 anahtar karesi tabanlı kodla yapılır. bazıları aşağıda gösterilmiştir:
WebKit olmayan tarayıcılarda, ürün tarayıcısının animasyonu, basit JavaScript tabanlı solmaya geçer. Her ne kadar bu tür bir şey her koşulda ideal olmasa da (esas olarak “kodun kodlanması” anlamına geldiğinden), bugün mümkün olan en iyi tarayıcıları kodlamak ve geri kalanı için daha az gelişmiş işlevsellik sağlamak isteyen geliştiriciler ve tasarımcılar için gerçekçi bir seçenektir. .
Arama Kutusu Otomatik Önerme
[UPDATE] Yorumlarda bir dizi insan tarafından belirtildiği gibi, otomatik önerme yeni bir özellik değildir. Bunu “yeni özellik” olarak eklediğimizde, otomatik önerinin yeni olduğunu bildiren başka bir makaleye dayandırıldı. Bununla birlikte, bu bölümü saklarız çünkü bir web sitesini biraz daha kullanılabilir hale getirme potansiyeline sahip iyi bir özelliktir ve diğer geliştirici ve tasarımcıların projelerine uyduğu takdirde takip etmeleri için iyi bir örnek sağlar.
Ajax kaynaklı otomatik önerme açılır menüsü, siz bir arama sorgusu yazarken görünür:
Yukarıdaki ekran görüntüsünde gösterildiği gibi, açılır menü, yazılan karakterlerle eşleşen arama sonuçlarını göstermez, sonuçlara ürün fotoğrafları ve açıklamaları eşlik eder. Fotoğrafların bu noktada açıklamalardan daha değerli olduğunu düşünüyorum, ancak genel olarak bu, ürün arama ve dönüşümlerini hızlandırma potansiyeline sahip.
Başka herhangi bir şey?
Bu, Apple.com tasarımının son zamanlarda yeniden yapılanmasında önemli değişiklikleri kapsadığı görülmektedir. Burada bahsetmediğim tasarım veya kodda başka önemli değişiklikler var mı?
Bu yazı serbest yazar ve web geliştiricisi Louis Lazaris tarafından Webdesigner Deposu için özel olarak yazılmıştır. Louis koşuyor Etkileyici Webler Web tasarımında makaleler ve eğitimler yayınlar. Yapabilirsin Twitter'daki Louis izleyin veya web sitesi aracılığıyla onunla temasa geçin.
Apple.com tasarımındaki değişiklikler hakkında ne düşünüyorsunuz? Burada bahsetmediğimiz değişiklikler var mı?