01/09
Kendinizi UXPin İle Başlatma
Mobil tasarım, uygulama tasarımı ve duyarlı tasarım alanına geçtiğimizde, UX (Kullanıcı Deneyimi) ve wireframing , interaktif prototip oluşturma ve mockup'lara odaklanıldı. Bu nişe yönelik bir ton araç var ve karmaşık, özellik yüklü behemoth'lardan tam gamı seyrek ve zorlukla kullanabiliyorlar. Gözlerimi yakalayan araçlardan biri, tasarımcıların tasarımcılar tarafından geliştirilmesinden dolayı UXPin.
Biz ilerlemeden önce… bir uyarı. Sizinki, yazılımı sahiplenmeyi tercih eden bir kuruluşsa, UXPin sizin için değildir. Bu uygulamada yapılan tüm çalışmalar tarayıcıda yapılır ve kaydettiğiniz projeler hesabınıza kaydedilir.
UXPin'i kullanmaya başlamak için bir tarayıcı başlatın ve UXPin'e gidin. Buradan ücretsiz bir deneme için kaydolabilir veya beklenen ihtiyacınıza göre aylık bir plan yapabilirsiniz. Kayıt işlemi oldukça kolaydır ve Kullanıcı Adınızı ve Parolanızı belirledikten sonra, başlatmaya hazırsınız.
02/09
UXPin'de Nasıl Proje Başlatabilirim?
Oturum açtığınızda, Kontrol Paneli'ne ulaşırsınız ve buradan yeni bir tel çerçeve, yeni bir mobil proje veya bir Duyarlı Web Tasarımı projesi oluşturmaya karar verebilirsiniz. UXPin için Photoshop veya Sketch projelerinizi getirmenizi sağlayacak eklentiler de vardır. Bunun için Nasıl Yapacağım Bazı metinler içeren bir banner oluşturacağım ve afişe bir e-posta düğmesi ekleyeceğim. Bunu başarmak için Yeni bir tel kafes oluştur seçtim.
03/09
UXPin Arayüzü Nasıl Kullanılır?
Tasarım Yüzeyi dört alana ayrılmıştır. Soldaki siyah alanda, gösterge panosuna dönmenize, kullanacağınız Öğeleri açmanıza, Akıllı Elemanlar panelini açmanıza, öğeleri aramanıza, sayfaya not eklemenize ve ekip üyelerini eklemenize olanak tanıyan bir dizi araç vardır. Altta, kısa bir öğretici açan bir düğme, hesabınıza erişmenizi sağlayan bir başka ve SSS’lere erişen bir başka soru, soru sorup bize geri bildirimde bulunalım.
Üst kısımdaki mavi alanda bir dizi araç ve özellik vardır. Sağ taraftaki koyu düğmeler, tasarımınızı yinelemenize, proje ayarlarını ayarlamanıza, sayfayı paylaşmanıza ve sayfanın tarayıcı içi simülasyonunu yapmanıza olanak tanır.
Elements paneli, Tasarım Yüzeyi için parçaları ve parçaları aldığınız, projenizi adlandırdığınız ve sayfa ekleyip çıkardığınız yerdir.
Elements kütüphanesi, UX tasarımcıları için hoş bir sürpriz. Bu pop, iOS'tan Android Lolipop'a kadar 30 kütüphaneden birini seçmenize izin veriyor. Ayrıca Bootstrap ve Foundation öğelerine, Font Awesome simgeleri, mobil cihazlar için Gesture simgeleri ve Social Widgets koleksiyonu ile birlikte erişebilirsiniz.
04/09
Bir UXPin sayfasına nasıl bir eleman eklenir?
Başlamak için Kutu elemanını tasarım yüzeyine sürükledim ve fareyi bıraktığımda Özellikler paneli açılır. Özellikler düğmesi, elemanı adlandırmanızı ve öğenin genişlik yüksekliğini ve konum değerlerini ayarlamanızı sağlar. Öğeye dolgu ekleyebilir, köşeleri yuvarlayabilir ve opaklığını ayarlayabilirsiniz. Arkaplan Rengi düğmesine tıklandığında bir RGBA renk seçici açılır.
Ayrıca seçilen öğeye yazı tipi, kenarlık ve desen atayabilirsiniz. Lightning Bolt, seçilen bir öğeye etkileşim katma yeteneği sağlar.
05/09
UXPin'de Metin Ekleme ve Biçimlendirme
Metin eklemek için metin öğesini tasarım yüzeyine sürükleyin ve metninizi girin. Yazı tipi özelliklerini açmak ve metninizi biçimlendirmek için Metin Özelliği düğmesini tıklatın . Kukla metin bloğuna ihtiyacınız varsa, bir metin elemanı ekleyin ve Yazı tipi özelliklerinde GENERATE LOREM IPSUM düğmesini tıklayın.
06/09
Bir UXPin Sayfasına Bir Görüntü Nasıl Eklenir?
Bu görevi yerine getirmenin birkaç yolu var. Görüntü Aracı'nı araç çubuğunda kullanabilir, Kütüphane'den bir Görüntü elemanı ekleyebilir veya masaüstünüzden bir görüntüyü yukarıda gösterildiği gibi tasarım yüzeyindeki öğeye sürükleyip bırakabilirsiniz.
07/09
Bir UXPin Sayfasına Bir Düğme Ekleme
Bir Düğme elemanı olmasına rağmen, yukarıda gösterildiği gibi, Arama alanına " Düğme " girerek tüm Kitaplıklarda bulunan tüm düğmeleri açar. Sizin için çalışanı tasarım yüzeyine sürükleyin ve rengi, yazı tipini ve hatta Kenarlık yarıçapını değiştirmek için Özellikler'i kullanın. Düğmenin içindeki metni değiştirmek için, metnin üzerine bir kez tıklayın ve yeni metni girin.
08/09
Bir UXPin sayfasına etkileşim nasıl eklenir?
Bu ilk göründüğü kadar karmaşık değildir. E-posta girişi için bir giriş elemanı ekledim, yeniden boyutlandırdım, metni girdim ve metni formatladım. Giriş elemanı seçiliyken Özellikler düğmesini tıklayın ve Element özellikleri göründüğünde panelin sağ üst köşesinde - göz küresi - Görünürlük düğmesini tıklayın.
Düğmeyi seçin ve özelliklerdeki Şimşek - düğmesine basın. Etkileşimler paneli açıldığında Yeni Etkileşim'i seçin. Tetikleme açılır penceresinden tıklayın. Eylem alanında Eleman Göster'i seçin. Şimdi hangi Elemanın gösterileceği sorulacak. Tabancada bir kez tıklayın ve Giriş öğesine tıklayın. Tanımlanan eleman ile, şimdi öğeye animasyon uygulanıp uygulanmayacağını belirleyebilirsiniz. Bu durumda Giriş kutusunu bir rahatlıkla göstermeye karar verdim ve varsayılan süre 300ms ile gitti.
Düğmenin tıklandığında sağa 65 piksel hareket etmesini istiyorum. Düğmeyi seçtim, Etkileşimler panelini açtım ve Yeni Etkileşim'i seçtim. Bu ayarları kullandım:
- Tetik : Tıklayın
- Eylem: Taşı
- Hareket Yönü : x ekseninde 65 px
- Animasyon : Doğrusal
- Süre: 300 ms
Bir etkileşimi kaldırmak için öğeyi seçin ve Etkileşimler panelini açın. Paneldeki etkileşimi seçin ve silmek için Çöp Kutusu'nu tıklayın.
09/09
UXPin'de Sayfanızı Nasıl Test Edebilirsiniz?
Tarayıcıda çalıştığınız için testler son derece basit. Simulate Design butonunu tıklayın. Sayfa tarayıcıda açılacak ve yolu test edebilirsiniz. Sayfanın sol tarafına, Yorumlar, Sitede Birden Fazla Sayfa, Kullanılabilirlik Testi, Canlı Paylaşım, Düzenleme ve Gösterge Tablosuna bir geri dönüş varsa, bir Site Haritası eklenecektir.
Sayfanın alt kısmında, Etkileşimli öğeleri göstermenize, yorumları göstermenize veya gizlemenize ve proje bağlantısını başkalarıyla paylaşmanıza izin veren başka bir küçük panel bulunur.