Web3 UI/UX: Cüzdan Akışları, dApp'ler ve Ürün Ekranları İçin Tasarım

İlk Figma ekranından önce kaydedilen 3 kontrol

Tasarım işini ayırtmadan önce 3 kontrol kaydederiz: kullanıcı görevi, cüzdan etkileşimleri ve geliştirici teslim ihtiyaçları. Bu erken inceleme, eksik ürün kararlarını ekranlara yayılmadan önce tespit etmemize yardımcı olur.

Kontrol ayrıca nihai tasarım notlarında neyi inceleyip göstereceğimizi belirler. Her gözlemi bir akışa, tel çerçeveye, prototipe veya açık soruya bağlarız. İncelemeye hazır olanı ve ekibinizin girdisine ihtiyaç duyulanı görebilirsiniz.

Bu, yeni bir dApp, cüzdan, borsa veya açılış sayfası akışı için uygundur. Ayrıca tüm arayüzü değiştirmeden mevcut bir görevi iyileştirmek istediğinizde de işe yarar. İlgili yaratıcı çalışmalar için tasarım ve görseller bölümüne bakın.

Cüzdan işlemlerini kullanıcılar için nasıl anlaşılır kılıyoruz?

2 kullanıcı grubu akışı şekillendirir: kriptoya yeni başlayanlar ve cüzdan işlemlerini bilenler. Her ikisi için de sonraki adımı netleştiririz.

Her cüzdan etkileşimi, bağlantıdan işlem geri bildirimine kadar akışta bir yer alır. Tel çerçeveler, kullanıcıların devam etmeden önce ne gördüğünü gösterir. Ardından bir prototip, üzerinde anlaşılan etkileşimleri inceleme için birbirine bağlar.

Ürününüzün açıklaması gereken durumları belgeliyoruz:

• Bağlantı: kullanıcının eylemi ve arayüzün onayladığı şey.
• İşlem: kullanıcının onaylamadan önce gösterilen bilgi.
• İlerleme: bir eylem devam ederken arayüzün ilettiği şey.
• Tamamlama: kullanıcının eylemin bittiğini nasıl anlayacağı.
• Hata: ne olduğu ve kullanıcının sonra ne yapabileceği.
• Gaz: ilgili olduğunda, arayüzün gaz bilgisini nasıl sunduğu.

Ürün ve mühendislikten bilinen gereksinimleri getirin. Bir etkileşim onaylanmadıysa, bunu açık bir karar olarak işaretleriz. Bir varsayımı kesinleşmiş davranış olarak sunmayız. Akış boyunca kullanıcıya yönelik ifadeler için Web3 metin yazarlığı arayüzü destekleyebilir.

Figma tesliminizin bağlayabileceği 7 parça

7 parça, ürününüzün ihtiyacına bağlı olarak tek bir Figma tesliminde birleşebilir. Ekibiniz amaçlanan akışı inceleyebilir ve ekranların yeniden kullanılabilir desenlere nasıl bağlandığını görebilir.

• Araştırma notları: dikkate alınan kullanıcı ihtiyaçları ve ürün soruları.
• Rakip incelemesi: sağlanan referanslardan arayüz gözlemleri.
• Kullanıcı akışları: birincil görevler, kararlar ve alternatif yollar.
• Tel çerçeveler: görsel iyileştirmeden önce ekran yapısı ve hiyerarşisi.
• Görsel sistem: arayüz genelinde uygulanan tasarım yönü.
• Bileşen kütüphanesi: tutarlı ekranlar için yeniden kullanılabilir öğeler.
• Tıklanabilir prototip ve test notları: bağlı etkileşimler ve kullanılabilirlik bulguları.

Ekranları ve bileşenleri bağlam içinde düzenliyoruz. Teslim sırasında etkileşim amacını ve açık soruları açıklıyoruz. Geliştiriciler statik resimlerden daha fazlasını inceleyebilir. Ürün sorumluları arayüzün arkasındaki kararları inceleyebilir.

Görsel yönün daha geniş tanımlanması gerekiyorsa, kripto projeleri için markalaşma bölümüne bakın. Ürün ifadeleri için kripto içerik oluşturma arayüzü destekleyebilir.

İlk mesajdan nihai tasarım notlarına 5 adım

5 adım, işi ürün bağlamından incelenebilir bir prototip ve geliştirici teslimine götürür. Tasarım başlamadan önce dahil edilen işi, inceleme noktalarını ve programı onaylarız.

1. Ürün bağlamını gönderin. Ürünü, hedef kullanıcıları, birincil görevi, mevcut ekranları ve bilinen kısıtlamaları paylaşın.
2. Materyali inceleyin. Sağlanan araştırmayı, rakip referanslarını ve mevcut ekranları inceliyoruz. Kullanıcı akışını etkileyen soruları işaretliyoruz.
3. Haritalayın ve tel çerçeve yapın. Ana yolu ve önemli alternatif durumları birbirine bağlıyoruz. Tel çerçeveler, görsel iyileştirmeden önce yapıyı belirler.
4. Tasarlayın ve prototip yapın. Görsel sistemi ve arayüz ekranlarını oluşturuyoruz. Ardından üzerinde anlaşılan etkileşimleri tıklanabilir bir prototipte birbirine bağlıyoruz.
5. Test edin ve teslim edin. Üzerinde anlaşılan iş kapsamında kullanılabilirlik testi yapıyoruz. İlgili bulguları dahil ediyor ve Figma dosyasını geliştiriciler için düzenliyoruz.

Geri bildirim toplamak ve ürün sorularını çözmek için bir kişi seçin. İncelemeler odaklı kalır ve gerekli değişiklikleri tercihlerden ayırabiliriz. Daha geniş sosyal ve içerik desteği için sosyal medya ve içerik bölümünü keşfedin.

Bir Web3 prototipi neyi onaylayabilir?

3 girdi, faydalı bir başlangıç noktası belirlememize yardımcı olur: kullanıcı, görev ve mevcut ürün materyali. Kısa bir ürün açıklamasıyla başlayabiliriz. Ekranlar veya araştırma yardımcı olur, ancak başlamak için gerekli değildir.

Bir prototip, üzerinde anlaşılan arayüz etkileşimlerini gösterir ve kullanılabilirlik incelemesini destekler. Altta yatan cüzdan entegrasyonunu, ağ yanıtını veya akıllı sözleşme davranışını doğrulamaz. Bağlı cüzdanlar, ağlar ve sözleşmeler kendi istemlerini ve yanıtlarını kontrol eder. Davranış değişiklik gösterebilir. Üzerinde anlaşılan durumları tasarlar ve teknik onay gerektiren her şeyi işaretleriz.

Talebinizi göndermeden önce sahip olduklarınızı toplayın:

• Ürün özeti ve hedeflenen kullanıcılar.
• Ana kullanıcı görevi ve bilinen herhangi bir sürtüşme noktası.
• Mevcut ekranlar, Figma bağlantıları, araştırma veya bir tanıtım.
• Dikkate alınması gereken cüzdan, işlem, gaz ve hata senaryoları.
• Geliştirme bağlamı ve dosyayı inceleyecek kişi.

Bu materyalleri iletişim yoluyla gönderin. Görevi inceleyip açık kararları not edeceğiz. 2 iş günü içinde yazılı bir teklif alırsınız. Gönderin: ürün özeti, hedef kullanıcılar ve tasarlanmasını istediğiniz ana akış.

Nasıl çalışır

1. Ürün bağlamını gönderinÜrünü, hedef kullanıcıları, ana görevi, mevcut ekranları ve bilinen kısıtlamaları paylaşın. Tasarım kararlarını inceleyecek kişiyi belirtin.
2. İşi ve programı onaylayınÇalışma başlamadan önce hangi akışların, tasarım parçalarının ve inceleme noktalarının dahil olduğunu kararlaştırıyoruz.
3. Akışları ve tel çerçeveleri haritalayınMevcut materyalleri inceliyor, ana yolları ve durumları haritalıyor ve ekran yapısını belirliyoruz.
4. Tasarlayın ve prototip yapınGörsel sistemi ve ekranları oluşturuyor, ardından üzerinde anlaşılan etkileşimleri Figma'da birbirine bağlıyoruz.
5. Test edin ve teslim edinÜzerinde anlaşılan iş kapsamında kullanılabilirlik testi yapıyor, ilgili bulguları ele alıyor ve Figma dosyasını geliştiriciler için düzenliyoruz.