Adobe Tecrübesi Ustasi Tricks, Maslahatlar va Texnik

01dan 07 gacha

Adobe Tecrübesi Ustasi Tricks, Maslahatlar va Texnik

Adobe Tajriba Tasarrufini Public Preview deb e'lon qilganida, kompaniya bir vaqtning o'zida ikkita ajoyib ishlarni amalga oshirdi. Birinchidan, ular ishlab chiqarilayotgan prototip dasturiy ta'minot bozorida bo'sh joy tashlashgan. Ikkinchidan, foydalanuvchilar "ishlashning iloji bo'lmagani" bilan o'ynash imkoniga ega bo'lishdi va foydalanuvchilarning ushbu taraqqiyotga ta'sir qilishiga imkon yaratdi. Endi dastur bir necha oy mobaynida ishga tushirilgan bo'lsa, ba'zi tajriba dizayni, maslahatlar va texnikani almashish uchun yaxshi vaqt bo'lardi, deb o'ylardim.

Lekin, birinchi navbatda, siz Prototyping Software tomonidan nimani anglatishini so'rashingiz mumkin. Ushbu makondagi asosiy o'yinchilar orasida Proto.io, Prinsip, UXPin, Atomic.io , Tajriba Dizayni va InVision. Sketch 3, Photoshop va Illustrator kabi ilovalardan farqli o'laroq, bu grafik muharrirlar interaktivlik, harakat va bugungi mobil va veb-dizayn sohasida keng tarqalgan boshqa xususiyatlarni taqdim etadi.

Mobil va ko'tarilishi mumkin bo'lgan, lazerga o'xshash tarzda foydalanuvchilarga e'tiborni qaratgan holda, dizaynerga bir nechta eskizlarni qamrab olish, bir nechta kompozitsiyani yig'ish va keyinchalik loyihani bo'shatish yoki veb-serverga yuklash uchun etarli emas. UI / UX ish xar jarayoni tubdan o'zgartirildi. Jarayonning har bir bosqichi, foydalanuvchini aniqlash, eskizlar, teleframlar, mockuplar va prototyping endi keng qamrovli foydalanuvchi testiga ta'siri.

Bu oxirgi bosqich - protetib qo'yish - loyiha yakuniy ishlab chiqarishga o'tishidan oldin og'riq nuqtalarining aniqlanishi va aniqlanishi. Bu erda interaktivlik, harakat, ekran o'tishlari va ekranda hamma narsani joylashtirish juda muhimdir. Muammolar va muammolarni oddiygina statik rasm sifatida ko'rsatish yoki og'zaki tushuntirish mumkin emas. Axir bu mahsulotlar haqiqiy insonlar uchun. Bularning barchasini kodga almashtirishdan ko'ra, prototip jarayonida borgan sari shu maqsadda ishlab chiqilgan grafik dastur tomonidan amalga oshirilmoqda. Xatolarni tuzatish, rasmni almashtirish, ba'zi matnlarni qayta yozish, tugmachani ko'chirish va boshqacha qilib aytganda, doimiy ravishda kodni qayta yozish va disk raskadrovka qilishdan ko'ra ingl.

Aslida, ushbu dastur bugungi "Tez prototiplash" Loyihalash va Loyihalash muhitida muhim tarkibiy qismga aylandi.

Buning ustiga, tajriba dizayni bilan bir oz hazm qilaylik.

02 ning 07

Adobe Tecrübeyle Tasarımında oddiy bir doira bilan maqsad pinini yarating

XD ning nozik tomoni uning vektor chizilgan vositalaridan foydalanishidir. Belgini topib bo'lmaydimi? Muammo yo'q. O'zingizning vazifangizni bajaring. Quyida qanday qilib:

1. Ellipse Tool-ni tanlang va Variant / Alt Shift tugmachalari bosilib, doira chizilgan.
2. Tanlangan doira bilan, FF0000 plomba rangi va chegaradagi xususiyatlar "yo'q" ga sozlang.
3. Anchor nuqtalarini ko'rsatish uchun doira ikki marta bosing. Pastki ankrajni pastga siljiting.
4. Tanlangan ulanish nuqtasini ikki marta bosing va chiziqlar chiziqlar bilan almashtiriladi.
5. Oq plomba bilan boshqa kichik doira chizish va hech qanday tutun yo'q. Uni joyga ko'chiring va pim va doira tanlang. Xususiyatlar ustki qismidagi "Hizalama" panelida Landshaft markazi tugmasini bosing va pin yaratiladi.

03 ning 07

Adobe tajriba dizayni ichida fon buzilishini yaratish

Orqa fon tasviri ustida matn yoki boshqa kontent bo'lishi odatiy holdir. Bu erda tasvirlangan muammo, aksincha, yuqoridagi tarkibni to'ldiradi. Ushbu muammoni hal qilishning bir usuli - fon tasvirini bulg'ashdir. Tasvirni fotoshop yoki boshqa rasmni tahrirlash dasturida bulg'ovchi, lekin bu samarasiz, ayniqsa, XD endi siz uchun bu vazifani bajarishi mumkin. Quyida qanday qilib:

1. Yangi satr yaratish va fon rasmingizni qo'shing.
2. To'rtburchak asbobini tanlang va tasvir ustida to'rtburchak chizamiz . To'rtburchak tanlangan bo'lsa, to'ldirishni oq va zarbani yo'q qilib belgilang.
3. Tanlangan to'rtburchak bilan Xususiyatlar panelida Fon buzilishini tanlang . Uch kaydırıcı, Blur miqdori, Yorqinligi va Opaklık'dır. Mana, ular nima qilishadi:

• Blur miqdori: Shakli ostidagi tasvirning loyqaligi sozlanadi. Maksimal qiymat +50 dir.
• Brightness (Yorqinligi): Tasvirdagi diqqatga sazovor joylarni va soyalarni rostlash. Minimal qiymat - 50, eng yuqori qiymat - +50.
• Opaklik: Shakli oshkoralik va tasvirning ko'rinishi shakliga ta'sir qiladi. Ushbu qiymatlar 0% dan 100% gacha.

Agar chindan ham «narsalarni almashtirishni» xohlasangiz, shakli rangini o'zgartiring va tasvirning "ko'rinishini" o'zgartirish uchun "Opaksizlik" qiymati bilan o'ynang.

04 dan 07 gacha

Adobe Tadqiqot Dizaynida skrin yaratish

Umumiy dizayndagi muammo - interfeys elementlarining umumiy rang bo'lishi kerak, ammo fon tasvirini yoki qattiq rangi ustiga qo'yilganda yo'qoladi. Eritma - bu choklar. Skri - interfeys elementi va orqa fon orasiga joylashtirilgan bir oz shaffof gradyent. Bu XD da bajarish oson. Quyida qanday qilib:

1. XD-dagi ish stoliingizni yarating, rasm qo'shing va interfeys elementlarini muvofiq UI Kit-File> Open UI Kit ... -dan nusxa ko'chiring va joylashtiring. Yuqoridagi rasmda surat Status panelini va App Barni ko'rishni qiyinlashtiradi.
2. To'rtburchak vositasini tanlang va to'rtburchak chizamiz . Xususiyatlar paneli-ni tanlang va to'ldirish-ni tanlang va Rang Seçici'de pastki qismdan Gradient-ni tanlang. Degradiy ranglarini qora va oq rangga o'rnating. A qiymatini - Opacity - 60% ga va Oq A qiymati 0% ga sozlang .
3. Tanlangan to'rtburchak bilan, Ob'ektni> Tartibga solish> Orqaga jo'nating ni tanlang . Interfeys elementlari endi tasvir ustida ko'rinadi.

05 dan 07 gacha

Adobe tajriba dizayni orqali rasmli Avatar yaratish

Umumiy Dizayn naqshlari odamlar suhbatlashgan va suhbatdosh rasmlari ekranda paydo bo'lgan Chat ilovalarida topilgan. Ushbu avatarlar odatda maskalangan tasvirlardir. Oddiy o'lik bu XDda buni amalga oshiradi. Quyida qanday qilib:

1. Suratdagi rasm va doira yoki boshqa shakldan boshlaysiz. Doira bo'ylab har qanday rang bilan to'ldirishingiz mumkin. Sizga kerak bo'lmagan narsa, qon tomir rangini kiritishdir. Ta'sir yaratishda u yo'q bo'lib ketadi, shuning uchun nima uchun bezovtalanish kerak. Agar siz doirani yashirishni istasangiz, uni buferga nusxa ko'chiring.
2. Davriyani tasvirga ko'chiring va tasvirni ham, doirani ham tanlang. Tanlangan bot ob'ektlari yordamida Ob'ektlar> Murakkabli murakkab-ni tanlang . Sichqoncha chiqarilganda, Avatar yaratiladi. U yerdan siz uni qayta o'lchamoqdasiz.
3. Agar qon tomirni qo'shish kerak bo'lsa, panodingizda o'tirgan doira ish stoli ustiga joylashtiring. Tanlangan nusxa bilan Xususiyatlar ichida to'ldirishni o'chirib qo'ying va zarba rangi va kengligi qo'shing. Ularni birlashtirish uchun, ikkala moslamani tanlang va Xususiyatlar panelining yuqori qismida Align (Hizala) opsiyalaridagi Center Hizala tugmalarini bosing.
4. Agar siz fotosuratni niqobga o'tkazmoqchi bo'lsangiz, niqobni ikki marta bosing. Bu rasm va niqob shaklini ko'rsatadi. Tasvirni bosing va uni joyiga torting. Sichqoncha chiqarilganda tasvir niqob ichidagi yangi holatida bo'ladi.

07 of 07

Adobe Tecrübeyle Ustasi Tabloları bilan o'ynang

Tajriba dizayni ustaxonalari faqat tarkibingizni joylashtirish uchungina emas. Ular ham manipulyatsiya qilishlari mumkin. Mana, qila oladigan bir nechta narsa:

1. Agar ishlamasdan, Landshaft va Portret versiyasiga kerak bo'lsa, xaritani nusxalaymiz va tanlangan nusxada Xususiyatlar panelidagi landshaft tugmasini bosing. Grafika Landshaft yo'nalishini o'zgartiradi. Agar jadvalda tarkib mavjud bo'lsa, unda Tasvirbo'yin nomini bosing va Ustki panel xususiyatlari Properties panelida paydo bo'ladi.
2. Ishonchli jadvalga maxsus rang kiritish uchun va loyiha uchun bu ishni bajarish uchun Ishonchli jadvalni tanlang va Xususiyatlar panelining "Tashqi ko'rinish" qismida "Rangni to'ldirish" chipini bosing. Rang uchun onaltılık qiymatni kiriting va + belgisini bosing. Rang maxsus rang sifatida qo'shiladi. Ushbu rangni boshqa joylarda qo'llash uchun ob'ektni tanlang va rangni ishlatish uchun maxsus rang chipini bosing.
3. Taxta panellar vertikal ravishda aylantiriladi. Buni amalga oshirish uchun ish stoli ni tanlang va uning balandligini o'zgartirish uchun yoki Xususiyatlar panellarida yoki shtapelning pastki qismini pastga siljiting. Xususiyatlar panelining Kaydırılabilir maydonida, ochilgan menyudan vertikalni tanlang va ekranning ko'rinish balandligini kiriting. Bu chiziqli ko'k chiziq sizni ko'rish portining tubini ko'rsatadi. Uni sinab ko'rish uchun Play tugmasini bosing va uzoqlashtiring. O'tkazish funksiyasini o'chirish uchun, Scroll paneldagi Yo'q-ni tanlang.

07 of 07

Adobe ilova dizayni tarkibida mobil UI to'plamini tahrirlash

Tajriba dizayni iOS, Android va Windows UI'larni rivojlantirish uchun UI to'plamini o'z ichiga oladi. Ularni birinchi marta ochganingizda, ular sizningcha, yaxshi o'rnashgan deb o'ylashingiz mumkin. Bu to'plamlarning bittasi va qismlari to'liq emas. Android telfonini yaratish orqali bilib olaylik.

1. Siz Artboard vositasini tanlay boshlashingiz va Xususiyatlar paneli Google bo'limida Android Mobile- ni tanlashingiz mumkin.
2. Fayl> UI to'plamini ochish> Google materiali-ni tanlang . Ushbu Materiallar Ustasi UI to'plamini ochadi. Ekran ko'rsatmalaridan ishlaydigan jadvalni o'stiradigan shisha va marquee ni tanlang. Men bu bilan boshlashni yaxshi ko'raman, chunki interfeys elementlarini to'g'ri ekranli joylashtirish uchun ko'rsatmalar beradi. Agar siz "Moviy bar" lardan birini tanlasangiz, u qulflanganligini ko'rasiz. Qulfni ochish uchun har biriga biriktirilgan qulfni bosing . Ish joyi panelini belgilang va tanlovni clipboardga ko'chiring. Hujjatingizga qayting va ekranni ish joyiga joylashtiring.
3. Ish stoli ustki qismini App barda bir marta bosing. Qanday qilib uni tanlashingiz mumkin. Ob'ektni tanlash> Tartibga solish> Oldinga keltiring. Sizning tanlovingiz endi Ekran ko'rsatmalarining ustki qismida. Bu sizga ekrandagi elementlarning har birining tahrir qilinishi mumkinligini aytishi kerak.
4. Yuqoridagi holat satrini ikki marta bosing va Xususiyatlar paneli-da , to'ldirish rangini 455A64 deb o'zgartiring . Ilova panelini ikki marta bosish va to'ldirishni 607D8B ga o'rnatish. Bu sizga UI to'plamidagi har bir elementning loyihaning rang xususiyatlariga javob berish uchun tahrir qilinishi mumkinligini aytishi kerak.
5. Piktogramma haqida nima deyish mumkin? Bu erda ularning rangi qanday o'zgarishi. Uni tanlash uchun yurakni ikki marta bosing . Agar siz Properties paneliga qaralsangiz, siz tanlovni tahrirlay olmaysiz deb taxmin qilishingiz mumkin. Juda emas. Yurakni ikki marta bosing . Xususiyatlar ochiq va to'lg'azish rangini FF0000 ga o'zgartirasiz. Qolgan ikonkalar va matn uchun ushbu ikki marta bosing.