Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / WEB VE ARAYÜZ HAREKETİ← Motion Graphics
Canlı hissettirenarayüzler.
Bir siteyi anlamayı kolaylaştıran ve unutmayı zorlaştıran kaydırma hikâyeleri, mikro etkileşimler ve sayfa geçişleri; hızdan ya da erişilebilirlikten ödün vermeden.
ZANAATİ GÖRÜN
Hareket laboratuvarı: dokunabileceğiniz yedi etkileşim
Video değil, gerçek, çalışan arayüz hareketi. Anahtarlayın, üzerine gelin, sürükleyin ve tıklayın. Buradaki her şey hareket azaltma ayarlarına saygı gösterir.
04Depth
0%
- Brief
- Boards
- Animate
- Ship
Roaswell stüdyosu tarafından nasıl çalıştığımızı göstermek için yapıldı. Müşteri işi değil, gerçek bir marka da değil.
NE ALIRSINIZYayına almak için
Yayına almak için
gereken her şey.
İş başlamadan önce üzerinde anlaşılan net çıktılar; kapsam asla sürpriz olmasın.
01
Hareket ilkeleri
Her etkileşimin tek bir ürüne ait hissettirmesi için yumuşatma, zamanlama ve yay belirteçleri.
02
Kaydırma ve sayfa geçişleri
Bu sitedekiler gibi dikkati yönlendiren, hikâye odaklı kaydırma dizileri ve rota geçişleri.
03
Mikro etkileşim kütüphanesi
Amaçla tepki veren düğmeler, anahtarlar, menüler, kartlar ve formlar.
04
Üretim kodu veya çıktılar
Temiz CSS ve JavaScript ya da Lottie ve video çıktıları; yığınınıza hazır.
05
Erişilebilirlik varyantları
Sonradan yamanmak yerine baştan tasarlanmış hareket azaltma alternatifleri ve odak davranışı.
06
Performans bütçesi
Hareket, yayına çıkmadan önce yüklenme süresine ve etkileşim gecikmesine karşı ölçülür.
NASIL İŞLİYORBrief'ten
Brief'ten
tamamlanmaya.
Her biri net bir çıktıya sahip dört aşama; neyin neden yapıldığını her zaman bilirsiniz.
Denetim
Hareketin bir şeyi netleştireceği yeri ve yalnızca gürültü ekleyeceği yeri bulmak.
İlkeleri belirlemek
Kararların vaka bazlı olmaktan çıkması için yumuşatma ve zamanlama sözlüğünü tanımlamak.
Tarayıcıda prototip
Gerçek ortamda kurmak; onayladığınız şey yayına çıkan şey olsun.
Yayına almak ve ölçmek
Bir performans bütçesiyle yayınlayıp kullanıcıların gerçekte ne yaptığını izlemek.
NEREYE BAĞLANIYORTek stüdyo.
Tek stüdyo.
Tek sistem.
Hareket, veriyle brief edildiğinde ve bütçenin olduğu yere ulaştırıldığında en güçlü şekilde çalışır.
SORULARİyi sorular,
İyi sorular,
açık cevaplar.
Aradığınız bu değil mi? Doğrudan sorun, kıdemli biri yanıtlasın.
Animasyon sitemizi yavaşlatır mı?
Doğru kurulursa hayır. Bir performans bütçesi belirler, en ucuz özelliklerle canlandırır ve gerçek cihazlarda test ederiz.
Kodu siz mi yazıyorsunuz?
Evet. Üretime hazır kod teslim edebilir ya da ekibinizin uygulaması için spesifikasyon ve çıktıları devredebiliriz.
Erişilebilirlik ne olacak?
Her hareketin bir hareket azaltma alternatifi vardır; klavye ve ekran okuyucu davranışı animasyonla birlikte tasarlanır.
CMS'imiz veya framework'ümüzle çalışır mı?
Çoğu modern yığınla çalışırız. Neyi kullandığınızı söyleyin, en iyi yaklaşımı onaylayalım.
Çalışırken görebilir miyim?
Şu an bakıyorsunuz. Bu sitedeki kaydırma dizileri, sayaçlar ve açılışlar aynı yaklaşımla kurulmuştur.