01/09
Özünüzü necə almaq UXPin ilə başlamışdır
Biz mobil dizayn sahəsinə keçdikcə, app dizaynı və cavab dizaynı UX (İstifadəçi Təcrübəsi) və teleframinq , interaktiv prototipləmə və mockups üzərində artan diqqət mərkəzində olmuşdur. Bu nişə yönəldilmiş bir ton vasitələr var və kompleks, xüsusiyyətli yüklü behemotlardan səmərəli və çətin faydalara qədər tam gamutu idarə edirlər. Gözlərimi tutan vasitələrdən biri dizaynerlər üçün dizaynerlər tərəfindən hazırlanmışdır, çünki UXPindir.
Öncə irəliləməzdən əvvəl ... bir xəbərdarlıq. Sizin proqramınız özünə üstünlük verən bir təşkilatdırsa, UXPin sizin üçün deyil. Bu tətbiqdə görülən işlərin hamısı brauzerdə aparılır və saxladığınız layihələr hesabınıza saxlanılır.
UXPin ilə başlamağınız üçün bir brauzeri və UXPin-ə başlayın. Buradan pulsuz sınaq üçün qeydiyyatdan keçin və ya gözlənilən ehtiyaclarınıza əsaslanan aylıq planı təşkil edə bilərsiniz. Qeydiyyat prosesi olduqca asandır və istifadəçi adı və şifrənizi təyin etdikdən sonra başlamağa hazırsınız.
02/09
UXPin-də bir layihənin necə başlanacağı
Daxil etdiyiniz zaman Dashboard'a gələcək və buradan yeni bir teleframe, yeni mobil layihə və ya məsuliyyətli Veb Dizayn layihəsi yaratmağa qərar verə bilərsiniz. Photoshop və ya Sketch layihələrinizə gətirmək üçün UXPin üçün plug-ins də var. Bunun üçün bənzər bir mətn ilə bir pankart yaratmaq və bannerə e-poçt düyməsini əlavə etmək niyyətindəyəm. Bunu yerinə yetirmək üçün yeni bir teleframe yaradın.
03 09
UXPin interfeysi necə istifadə olunur
Dizayn Səthi dörd sahəyə bölünmüşdür. Sol sahənin qara sahəsindəki panelləri qayıtmaq, istifadə edəcəyi Elementləri açmaq, Smart Elements panelini açmaq, elementləri axtarmaq, qeydlərə əlavə etmək və komanda üzvlərini əlavə etmək üçün imkan verən bir sıra alətlər var. Dipte qısa bir təlimat açan bir düyməsinə, başqa bir hesabınıza daxil olmanıza imkan verən və suallara cavab verən başqa bir sual, suallar verə və hətta geribildirim təmin edək.
Mavi sahənin üstündə bir sıra alətlər və xüsusiyyətlər vardır. Sağ tərəfdəki qaranlıq düymələr dizaynınızı təkrarlamaq, layihə parametrlərini tənzimləmək, səhifəni bölüşmək və səhifənin brauzer simulyasiyasını etmək üçün imkan verir.
Elementlər paneli Design Surface üçün bitləri və parçaları tutduğunuz yerdəyik, layihənizi adlandırın və səhifələr əlavə edin və ya çıxarın.
Elements kitabxanası UX dizaynerləri üçün xoş sürprizdir. Bu pop aşağıdan iOS-dan Android Lolipop-a qədər dəyişən 30 kitabxanadan birini seçə bilərsiniz. Yazı tipi zərif nişanlar, Mobil üçün Gesture nişanlar və Sosial Widgets kolleksiyası ilə yanaşı Bootstrap və Fond elementlərinə də sahibsiniz.
04/09
Bir UXPin səhifəsinə bir element əlavə etmək üçün necə
Başlamaq üçün Qutu elementini dizayn səthinə sürükləyirdim və siçanı sərbəst buraxdığımda Properties panel açılır. Properties düyməsini elementə ad verə və elementin eni boyu və mövqeyini təyin etməyə imkan verir. Ayrıca elementə dolğunluq əlavə edə bilərsiniz, köşelerdən yuvarlaqlaşdırmaq və onun qeyri-şəffaflığını tənzimləyə bilərsiniz. Arka plan Rəng düyməsini basmaq RGBA rəng seçicisini açır.
Seçdiyiniz elementə də font, sərhəd və desen təyin edə bilərsiniz. Şimşək Bolt siz seçilmiş elementə qarşılıqlı təsir yaratmaq imkanı verir.
05/09
UXPin-də mətn əlavə etmək və formatlaşdırmaq
Mətn əlavə etmək üçün mətn elementini dizayn səthinə sürüklə və mətni daxil edin. Yazı xüsusiyyətlərini açmaq və mətni formatlamaq üçün Mətn Özəlliyi düyməsini basın. Dummy mətn blokuna ehtiyacınız varsa, mətn elementini əlavə edin və Font xüsusiyyətlərindən GENERATE LOREM IPSUM düyməsini basın.
06-dan 09-dək
Bir UXPin səhifəsinə şəkil əlavə etmək
Bu vəzifəni yerinə yetirmək üçün bir neçə yol var. Image Tool'unu alətlər panelində istifadə edə bilərsiniz, Kitabxanadan bir Image elementi əlavə edin və ya sadəcə yuxarıda göstərildiyi kimi masaüstünüzden bir görünüşü dizayn səthindəki elementə sürükleyin və buraxın.
07-də 09
UXPin səhifəsinə bir düyməni necə əlavə etmək olar
Bir Button elementi olmasına baxmayaraq, yuxarıda göstərildiyi kimi, " Düyməni " Axtarışa daxil etmək üçün Kitabxanaların bütün hissələrində olan bütün düymələri açır. Design səthində sizin üçün işləyən birini sürüşdür və rəngi, yazı tipini və hətta Sərhəd radiusunu dəyişdirmək üçün Xassələri istifadə edin. Düyənin içərisində mətni dəyişdirmək üçün mətnə bir dəfə basın və yeni mətni daxil edin.
08-də 09
UXPin səhifəsinə qarşılıqlı təsirlər əlavə edin
Bu, ilk dəfə göründüyü kimi, çətin deyil. E-poçt giriş üçün mən bir giriş elementi əlavə etdim, yenidən ölçmüş, mətnə daxil oldum və mətni formatladım. Giriş elementi seçildikdə , Properties düyməsini basın və Element xüsusiyyətləri göründükdə Panelin yuxarı sağ küncündə - Görünürlük düyməsini - göz ayağını basın.
Düyməni seçin və qarşılıqlı təsirlər düyməsini - Şimşək Bolt-ni basın. Qarşılıqlı əlaqələr paneli açıldığında Yeni Etkileşim seçin. Tetikleyiciden pop seçin. Fəaliyyət sahəsi daxilində Elementi Göstər seçin. İndi hansı Elementin göstəriləcəyi soruşulacaq. Silahın üstündə bir dəfə basın və Giriş elementinə basın. Təsdiq olunan elementlə, elementi canlılaşdırmaq və ya verməməsini indi təyin edə bilərsiniz. Bu vəziyyətdə Giriş qutusunu asanlıqla göstərməyə qərar verdim və 300 ms'lik müddəti ilə gedirdim.
Mən də düyməni tıkladığınız zaman sağa 65 piksel hərəkət etmək istəyirik. Düyməni seçdim, Etkileşim panelini açdım və Yeni qarşılıqlı əlaqə seçdim . Bu parametrləri istifadə etdim:
- Tetik : Tıklayın
- Fəaliyyət: Move By
- Dəyişdirmə istiqaməti : x oxunda 65 px
- Animasiya : xətti
- Müddət: 300 ms
Bir qarşılıqlı əlaqəni aradan qaldırmaq üçün elementi seçin və qarşılıqlı təsir panelini açın. Paneldə qarşılıqlı əlaqəni seçin və silmək üçün Çöp Kutusunu basın.
09/09
UXPin-də səhifənizi test etmək
Brauzerdə işlədiyinizə görə test sadədir. Simulate Design düyməsini basın. Bu səhifə brauzerdə açılacaq və siz test edə bilərsiniz. Həmçinin, səhifənin sol tərəfinə Şərhlər, bir neçə səhifə varsa Site Sayt xəritəsi, Kullanılabilirlik Testi, Canlı Paylaşma, Redaktə və Dashboard'a qayıtma imkanı verən bir panel də əlavə olunacaq.
Səhifə altındakı İnteraktiv elementləri göstərmək, şərh etmək və ya gizlətmək və layihənin başqaları ilə bölüşmək imkanı verən başqa bir kiçik paneldir.