Adobe Təcrübəsi Dizayn Tövsiyələri, İpuçları və Texnikaları

01-də 07

Adobe Təcrübəsi Dizayn Tövsiyələri, İpuçları və Texnikaları

Adobe Təcrübəli Dizaynı Public Preview olaraq təqdim etdikdə, şirkət eyni zamanda iki gözəl əfsanəni həyata keçirdi. Birincisi, ortaya çıxan prototip proqram təminatı bazarında bir yer tutdular. İkincisi, istifadəçilər üçün "işdə irəliləyiş" ilə oynamağa və istifadəçilərə bu inkişafa təsir göstərməyə imkan yaradır. İndi tətbiq bir neçə aydan sonra mövcud olsaydı, bəzi Təcrübə Dizayn tövsiyələrini, göstərişlərini və texnikalarını bölüşmək üçün yaxşı bir vaxt olardı.

Amma ilk növbədə, Prototip Software proqramı nə deməkdir. Bu məkanın əsas oyunçuları arasında Proto.io, Prinsip, UXPin, Atomic.io , Təcrübə Dizaynı və InVision var. Sketch 3, Photoshop və Illustrator kimi tətbiqlərdən fərqli olaraq, statik dizaynların hazırlandığı bu qrafik redaktorların interaktivliyi, hərəkət və günümüzün mobil və veb dizayn sahəsində ümumi xüsusiyyətlərini təqdim edir.

Cib telefonunun yüksəlməsi və qaçınılmaz lazer kimi istifadəçiyə diqqət yetirilməsi ilə dizayner bir neçə eskizləri çəkməyə, bir neçə kompozisiyanı birləşdirməyə və sonra layihəni azad etməyə və ya veb serverə yükləməyə kifayət etmir. UI / UX iş axını əsasən şeyləri dəyişdi. Prosesin hər bir addımı, istifadəçi, eskiz, telefram, mockup və prototipin müəyyən edilməsindən artıq geniş istifadəçi testinə məruz qalır.

Bu, son mərhələdir - prototipləşdirmə - layihənin yekun istehsalına keçməzdən əvvəl ağrı nöqtələrinin aşkar edildiyi və yerləşdiyi yerdir. Bu, interaktivlik, hərəkət, ekranda keçidlər və ekranda hər şeyin yerləşdirilməsi çox vacibdir. Məsələlər və problemlər sadəcə statik bir şəkil kimi göstərilə və ya sözündən izah edilə bilməz. Bütün bunlardan sonra, bu məhsullar real insanlar üçündür. Kodun hamısını hərəkətə keçirmək əvəzinə, prototip prosesi getdikcə bu məqsədlə hazırlanmış qrafik proqram təminatı ilə həyata keçirilir. Bir səhv düzəltmək, şəkil əvəz etmək, bəzi mətnləri yenidən yazmaq, bir düyməni hərəkət etdirmək və s. Kodunu daima yenidən yazma və pozuntudan daha asan görməli bir redaktordan istifadə etmək asandır.

Əslində, bu proqram bugünün "Tez prototipləşdirmə" Dizayn və İnkişaf mühitində əsas komponent olmuşdur.

Bununla birlikdə, Təcrübə Dizaynı ilə bir az əylənək.

02/07

Adobe Təcrübəsiz Dizaynında Sadə Çember ilə Bir Hedef Çubuk Yarat

XD'nin bir təmiz cəhəti onun vektorlu rəsm alətlərinin istifadəsidir. Bir simge tapa bilmirəm? Problem deyil. Roll your own. İşdə necə:

1. Ellipse Tool seçin və Seçim / Alt Shift düymələri basıldığında bir dairə çəkin.
2. Seçilən dairə ilə Fill0000 və Frontal rəngləri xassələrə "heç" qoyun.
3. Çapa nöqtələrini göstərmək üçün dairəni cüt vurun. Dibə aşağı sürükləyin.
4. Seçilən Bağlantı Noktasına cüt vurun və əyri xətlər ilə əvəz olunar.
5. Ağ doldurulmuş və heç bir soxma ilə başqa bir kiçik dairəni çəkin. Yerə yerləşdirin və pim və dairəni seçin. Özelliklerin üstündeki Hizala panelində Yatay Mərkəz düyməsini basın və Pin yaradılıb.

03/07

Adobe təcrübəsi Dizaynında Arka Plan Bluru Yarat

Arxa fonda mətn və ya digər məzmuna sahib olmaq ümumi bir məqamdır. Buradakı problem, daha tez-tez deyil, yuxarıdakı məzmunu aşan bir görüntüdir. Bu məsələnin həll yollarından biri fonun obrazını ləkələməkdir. Photoshop və ya başqa bir resim düzenleme proqramında görüntüyü bulanıklaştırırsınız, ancaq XD'nin bu işi sizin üçün yapabileceğinden, bu biraz etkisizdir. İşdə necə:

1. Yeni bir işarə yaradın və arxa plan şəklinizi əlavə edin.
2. Dikdörtgə Tool seçin və nd şəkil üzərində bir düzbucaq yaradır. Dikdörtgen seçildikdən sonra, Dolumu Ağa və Stroke-ə Boş yerə qoyun.
3. Seçilən Dikdörtgen ilə xüsusiyyətlər panelində Arka Plan Blurunu seçin . Üç sürgü Blur Məbləği, Parlaqlıq və Şəffaflıqdır. İşdə bunlar:

• Blur Məbləği: şəklin altında görünüşün bulanıklığını düzəldir. Maksimum dəyər +50.
• Parlaqlıq: Görünüşdə vurğulanır və gölgələri düzəldir. Minimum dəyər -50, Maksimum dəyər isə +50.
• Şəffaflıq: Şəklin şəffaflığına və görünüş şəklində görünürlüğünə təsir göstərir. Qiymətlər 0% -dən 100% -ə qədər dəyişir.

Həqiqətən, "şeyi dəyişmək" istəyirsənsə, formanın rəngini dəyişdirin və "Görünüş" görünüşünü dəyişdirmək üçün Şəffaflıq dəyəri ilə oynayır.

04/07

Adobe Təcrübəsi Dizaynında Scrim yaradın

Ümumi dizayn problemi interfeys elementlərinin elementləri ümumi bir rəng olmalı, ancaq fon şəklində və ya qatı rəngdə yerləşdirildikdə itirilir. Çözüm bir dırnaqdır. Açıq element interfeys elementi ilə arxa plan arasında yerləşdirilən bir qədər açıq olmayan gradientdir. XD-də bu işi asanlaşdırmaq olar. İşdə necə:

1. XD-də sənətkarlıq yaradın, bir şəkil əlavə edin və bir interfeys elementlərini uyğun UI Kitindən - Fayl> Open UI Kit ... - iş yerindən çıxarın. Yuxarıdakı şəkildəki şəkil Status bar və App Barı görmək çətinləşdirir.
2. Dikdörtgə Toolunu seçin və düzbucaqlıq çəkin. Xüsusiyyət Paneli-də Seçin Seçin və Color Seçicisində açılırdan Gradienti seçin. Gradient rənglərini Qara və Ağa qurun. A dəyərini - Opacity - 60% -ə və Ağ A dəyərini 0% -ə seçin.
3. Seçilən Dikdörtgen ilə Object> Arrangement> Backward (Geri göndər) seçin . Arayüz elementləri artıq görüntü üzərində görünür.

05/07

Adobe Təcrübə Dizaynında Image Avatar yaratmaq

İnsanlar bir-birinə danışdıqları və natiqin şəkli ekranda göründüyü Chat proqramlarında ümumi Design Pattern var. Bu avatarlar adətən maskalanmış şəkillərdir. Ölü sadə bu XD-də bunu yerinə yetirir. İşdə necə:

1. Sənəddə bir şəkil, bir dairə və ya digər forma ilə başlayın. Dairəni hər hansı bir rənglə doldurmaq olar. Nə etməmiz lazım olan bir vuruş rəngini əlavə etməkdir. Təsiri yaratdığınızda yox olacaq, niyə narahat olursunuz. Dairəni soxmağa ehtiyacınız varsa, onu panoya kopyalayın.
2. Döngəni görüntüyə çəkin və həm də şəkil və dairəni seçin. Seçilən bot obyektləri ilə Object> Shape ilə Maska seçin . Siçan sərbəst buraxdığınızda, Avatar yaradılıb. Oradan onu yenidən ölçə bilərsiniz.
3. Bir vuruş əlavə etməli olsanız, panonuzda oturan dairəni sənətkarlıq üzərinə yapışdırın. Seçilən kopiya ilə Properties funksiyasını söndürün və vuruş rəngini və genişliyini əlavə edin. Onları birləşdirmək üçün hər iki obyekti seçin və Properties panelinin yuxarısındaki Hizala seçimlərindən mərkəzə hizala düyməsini basın.
4. Maska ətrafında fotoşəkil çəkmək istəyirsinizsə, maska cüt vurun. Bu şəkil və maska ​​formasını göstərəcəkdir. Görüntüyü basın və mövqeyə sürükləyin. Siçan sərbəst buraxdığınızda, şəkil maskanın içərisində yeni bir vəziyyətdə olacaq.

06-dan 07-ə

Adobe Təcrübə Tasarım Dizaynerləri ilə Play

Təcrübə Tasarım Dizaynları yalnız məzmun yerləşdirmək üçün deyil. Onlar da manipulyasiya edilə bilər. Burada edə biləcəyiniz bir neçə şey var:

1. Bir sənətkarın Landşaft və Portret versiyasına ehtiyac varsa, iş yerini cütləşdirin və seçilmiş cütlüklə Properties panelində landşaft düyməsini basın. Sənəd görünüşü Landscape orientation dəyişəcək. Sənədin üzərində məzmun varsa, Artboard'un adını basın və Satır xüsusiyyətləri Properties panelində görünəcək.
2. Sənətçilərə xüsusi bir rəng əlavə etmək və layihənin bu mövzuda layihəsi üçün Satırbaşı seçin və Properties Panel panelinin "Görünüş" bölməsində Dolğun rəng çipini basın. Rəngin onaltılıq dəyərini daxil edin və + işarəsini basın. Rəng Xüsusi rəng olaraq əlavə olunacaq. Rəngi ​​başqa yerlərdə tətbiq etmək üçün bir obyekt seçin və rəng tətbiq etmək üçün Xüsusi rəng çipini basın.
3. Dəzgahlar dikey olaraq kaydırılabilir. Bunu etmək üçün, işarə panelini seçin və ya Rənglər panellərindəki hündürlüyünü dəyişdirin və ya işarənin aşağı hissəsini yuxarıya sürükləyin. Xüsusiyyət panelinin Kaydırılabilir ərazisində, açılır menyudan şaquli seçin və ekran üçün görünüşün hündürlüyünü daxil edin. Bu kəsilmiş mavi xətt sizə görünüşün dibini göstərir. Bunu test etmək üçün Play düyməsini basın və uzaqlaşın. Kaydırmayı söndürmək üçün, Kaydırma pop açılanında None seçin.

07 07

Adobe Təcrübə Dizaynında Mobil UI Sifarişini Düzenleyin

Təcrübə Dizaynı iOS, Android və Windows UI-i inkişaf etdirmək üçün bir UI Kiti ehtiva edir. Onları ilk dəfə açdığınız zaman, olduqca yaxşı bir şəkildə qurulduqlarını düşünürsünüz. Əlbəttə ki, həmin dəstlərin bit və parçaları tamamilə düzəldilə bilər. Bir Android teleferik quraraq tapmaq edək.

1. Sənədli ardıcıllığı seçərək və xüsusiyyətlər panelinin Google bölməsində Android Mobile seçərək başlayacaqsınız.
2. Fayl> UI Kitini Aç> Google Materialı seçin . Bu, Material Design UI Kitini açır. Büyüteç və marquee t Screen Graphics tapşırıqlarını seçin . Bununla başlamağı çox sevirəm, çünki mənə interfeys elementlərinin düzgün ekran yerləşdirilməsinə dair təlimatlar verir. Mavi çubalardan birinə basarsanız kilidləndiyini görürsünüz. Kilidini açmaq üçün hər birinə bağlı kilidi basın . İş yerini çəkin və seçimi panoya kopyalayın. Sənədinizə qayıdın və ekranı iş yerinizə yapışdırın.
3. Çarpanın üst hissəsi olan App barında bir dəfə basın. Necə seçə bilərsiniz. Nesneyi seçin> Arxa> Cədvəl gətirin. Seçiminiz artıq Ekran Kılavuzlarının üstündədir. Bu, ekrandakı elementlərin hər birini redaktə edə biləcəyini söyləməlidir.
4. Üstündəki Status Çubuğunu cüt vurun və Özellikler panelinde və Dolgu rəngini 455A64'e basın . App Barını cüt vurun və doldurmasını 607D8B'ye qoyun. Bu bir UI dəstindəki hər bir elementin layihənin rəng xüsusiyyətlərinə cavab verməsi üçün redaktə edilə biləcəyini söyləməlidir.
5. Nişanlar haqqında nə deyirsiniz? Rəngini necə dəyişə bilərik. Seçmək üçün ürəyə cüt vurun . Properties Panelinə baxırsınızsa, seçimi redaktə edə bilməyəcəyinizə inanırsınız. Tam olaraq deyil. Qəlbini bir dəfə daha cütləşdirin . Properties açıq və FF0000 üçün dolgu rəngini dəyişdirirsiniz. Qalan ikonlar və mətn üçün bu ikiqat cüt vuruşu təkrarlayın.