Mikro Etkileşimler: 15 Örnek ve Bunların Nasıl Tasarlanacağı
Mikro etkileşimlerin açıklaması: bir tanım, Dan Saffer'ın dört bölümü, türe göre gruplandırılmış 15 gerçek örnek, tasarım kuralları ve bunların CSS, Framer Motion, GSAP veya ExodeUI'te nasıl oluşturulacağı.
Ana nokta
Mikro etkileşim, arayüzde tek bir şey yapan küçük, sınırlı bir andır: bir gönderiyi beğenmek, bir ayarı değiştirmek, bir formu onaylamak veya bir hareketi tamamlamak. Terim ve anatomisi dört bölümü tanımlayan Dan Saffer'dan geliyor. Bir tetikleyici onu başlatır, kurallar ne olacağına karar verir, geri bildirim sonucu gösterir ve döngüler veya modlar zaman içinde ne yapacağını yönetir. İyi mikro etkileşimler kısadır, kullanıcının kendi girişine yanıt verir ve kesintiye uğramaz.
Mikro etkileşim nedir?
Mikro etkileşim, bir üründeki en küçük tam etkileşimdir: başlangıcı, değişikliği ve sonu olan tek bir görev. Bu tam bir akış değil. Bir gönderiyi beğenmek mikro bir etkileşimdir; Yorum yazmak ve yayınlamak bir akıştır. Fikir ve yapısı Dan Saffer'ın her bölümü dört parçaya ayıran Mikroetkileşimler kitabından alınmıştır.
Mikro etkileşimin dört bölümü
Dan Saffer'ın çerçevesi mikro etkileşimi dört bileşene ayırıyor. Bunları adlandırmak faydalıdır çünkü çoğu hata ve çoğu kötü hareket, bütünde değil, dördünden birinde bulunur.
Tetiklemek
Bunu başlatan olay. Kullanıcı tarafından başlatılan (dokunma, fareyle üzerine gelme, uzun basma, sürükleme) veya sistem tarafından başlatılan (indirme işleminin tamamlanması, bir ağ hatasının gelmesi). Kredi bilgileri: Dan Saffer.
Tüzük
Başladığında ne olur: geçerli durumlar, sürükleme sınırları veya minimum ve maksimum değerler gibi kısıtlamalar ve olayların sırası. Kredi bilgileri: Dan Saffer.
Geri bildirim
Ürünün kullanıcıya ne olduğunu nasıl anlattığı: yaylanma, renk değişimi, simge dönüşümü, metin güncellemesi. Hareket tasarımının çoğunun yaşadığı yer burasıdır. Kredi bilgileri: Dan Saffer.
Döngüler ve Modlar
Etkileşimin zaman içinde ne yaptığı ve modların bunu nasıl değiştirdiği. Aynı geçiş, mantığını değiştirmeden karanlık modda veya kompakt düzende farklı davranabilir. Kredi bilgileri: Dan Saffer.
Mikro etkileşimler neden önemlidir?
Mikro etkileşim, bir arayüzün kullanıcıya bir paragraf metin olmadan nasıl yanıt verdiğidir. Bir eylemin alındığını onaylar, bir şeyin hâlâ çalıştığını gösterir veya nelerin değiştiğini açıklar. Bunlar eksik olduğunda, aynı ürün daha ağır geliyor: Kullanıcılar ilk dokunuşun onlara geldiğini söylemediği için iki kez tıklıyor veya hiçbir ilerleme belirtisi göstermeyen bir ekranda bekliyorlar. İyi olanlar fark edilmekten çok hissedilir, asıl mesele de budur.
15 mikro etkileşim örneği
Bunlar iletişim kurdukları şeylere göre gruplandırılmıştır. ExodeUI eşleşen bir örnek gönderdiğinde, onu açıp düzenleyebilmeniz için ad verilir.
Düğmeler ve geçişler (basın ve belirtin)
1. Düğmeye basıldığında: işaretçi aşağıdayken yaklaşık 0,92'ye ölçeklenir ve serbest bırakıldığında geri çekilir (ExodeUI örneği: Jöle Düğmesi). 2. Geçiş anahtarı: taahhütte renk değişikliği ile yay tabanlı çeviri (Gooey Toggle). 3. Mod anahtarı: göstergesini kaydıran ve aktif etiketi değiştiren bölümlü bir kontrol (Hareket Anahtarı).
Form geri bildirimi (doğrulama ve gönderim)
4. Geçersiz giriş sarsıntısı: iletişim kutusu olmadan "bu alanı kontrol edin" yazan kısa yatay bir itme (Kıpırdat Metin Girişi). 5. Gönderim devam ediyor: düğme ilerleme göstergesi haline gelir, böylece kullanıcı asla yerini kaybetmez (Animasyonlu Gönderme Düğmesi). 6. Başarı onayı: Eylem gerçekleştiğinde düğmede küçük bir kutlama patlaması (Roket Fırlatma Düğmesi).
Yükleme ve ilerleme
7. Dairesel ilerleme: Gerçek değerine kadar dolan ve bir yay (Radyal Ölçer) ile yerleşen bir halka. 8. Seviye veya aktivite ölçer: ses seviyesi (Ses Dalgası) gibi gelen verilere canlı olarak tepki veren bir çubuk.
Navigasyon
9. Menü geçişi: iki durum arasında geçiş yapan ve menüyü yerinde gösteren bir simge (Morph Nav). 10. Dock büyütme: imlecin yakınındaki öğeler kaldırılır ve büyür, ardından yerleşir (Manyetik Dock). 11. Sekme seçimi: yanıp sönmek yerine sekmeler arasında kayan bir gösterge (Sıvı Sekme Çubuğu).
Boş ve başarı durumları
12. Boş durum: Boş ekranı yumuşatmak için bir kerede canlandırılan küçük bir çizim. 13. Ödül açıklaması: Bir dönüm noktasına ulaşıldığında beklentiyle açılan bir hediye veya rozet (Sürpriz Hediye Kutusu).
Yenilemek için çek
14. Yenilemek için çekin: sürüklemeyi izleyen, ardından geri yaylanan ve bırakıldığında sabitlenen elastik kaydırma. Geri bildirim bir eğirme değil, esnemedir.
Dokunsal tarzda geri bildirim
15. Onay darbesi: mobil cihazdaki dokunsal dokunuşu yansıtan öğe üzerinde kısa bir ölçek ve parıltı; böylece aynı eylem, titreşim motoru olmayan bir cihazda da aynı şekilde hissedilir.
Onları iyi tutacak kuralları tasarlayın
Yardımcı olan bir mikro etkileşimi sinir bozucu olandan ayıran birkaç kural vardır.
- Kısa tutun: çoğu yaklaşık 200-400 ms'de tamamlanır; küçük bir öğenin daha uzun hareketi yavaş hissettiriyor
- Girişle aynı karede başlayın; Gecikmiş bir başlangıç, sebep-sonuç duygusunu bozar
- Kesintisiz tutun: Kullanıcı hareketin ortasında eylemi tersine çevirirse, sıfırdan yeniden başlamak yerine hızla yönlendirin
- Saygı, azaltılmış hareketi tercih eder: değişikliği hala ileten statik veya çapraz geçişli bir geri dönüş sağlayın
- Ona bir iş verin: Eğer etkileşim birden fazla karara ihtiyaç duyuyorsa bu bir akıştır
Mikro etkileşimler nasıl oluşturulur?
Doğru araç, aynı etkileşimin kaç platformda çalışması gerektiğine bağlıdır.
Yalnızca CSS
Basit, kendi kendine yeten durumlar için iyidir: vurgulu kaldırmalar, odak halkaları ve :checked veya sınıf değişikliği tarafından yönlendirilen geçişler. Geçişler ve @ana kareler yeterlidir ve stil sayfasının ötesinde gönderilecek hiçbir şey yoktur.
Framer Motion veya GSAP (web)
Hareket yaylara, jestlere veya orkestrasyona ihtiyaç duyduğunda ve yalnızca web üzerinde çalışması gerektiğinde iyi olur. Her ikisi de size kesintili yaylar sağlar ve React durumu tarafından çalıştırılabilir.
ExodeUI (tek dosyadan web, iOS ve Android)
Aynı etkileşimin bir React uygulamasında, bir SwiftUI uygulamasında ve Flutter'te aynı şekilde davranması gerektiğinde bunu kullanın. Bunu bir .exode dosyasında bir kez yazarsınız ve çalışma zamanı onu her platformda oynatır, dolayısıyla platform başına yeniden yazma işlemi olmaz.
Üretim için uygulama örneği
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Hatırlanacak temel ilkeler
- Mikro etkileşim, Dan Saffer tarafından adlandırılan dört bölümden oluşan, tetikleyici, kurallar, geri bildirim ve döngüler veya modlardan oluşan küçük bir görevdir.
- İyi olanların çoğu yaklaşık 200-400 ms'de tamamlanır, girişle aynı çerçevede başlar ve kesintiye uğramaz.
- Geri bildirim, işi yapan şeydir: eylemi onaylar ve genellikle herhangi bir metin olmadan nelerin değiştiğini açıklar
- Her zaman aynı bilgiyi hareketsiz olarak taşıyan, azaltılmış hareket tercihli bir geri dönüş sağlayın