UX Dizaynerining eskizlari uchun eng yaxshi sheriklari

Asboblar samaradorligi bilan to'la

Hozircha, men o'ylaymanki, Sketch - bu bozorda eng yaxshi dizayn vositasi. O'zim boshdan kechirgan eng oddiy shovqin modellaridan birini taklif qilishdan tashqari (men 2014 yilda birinchi MacBook-ni olganimda Fireworks-dan Sketch-ga o'tdim. Bu mening Windows kunlarimdagi qorong'u payt edi, lekin u juda yaxshi xarakterga ega edi).

Sketch-ning qabul qilinishining bir qismi, shuningdek, boshqa uchinchi tomon dasturlari bilan osonlikcha integratsiyalashuvi va plaginlarga ochiq-oydin munosabatda bo'lishi bilan bog'liq.

Asboblar va plaginlar dengizi mavjud. Bu to'liq ro'yxat bo'lmaydi (buning uchun google.com-dan foydalanishingiz mumkin). Buning o'rniga men UX Dizaynerlari uchun hayoliy vositalar aralashmasi deb hisoblayman (ya'ni dizaynerlar ko'proq miqyoslilik, jarayon, aloqa va vizual tajriba va animatsiyaga ko'proq e'tibor qaratishgan).

Sketch tezroq va samaraliroq

Bu plaginlarning sehridir. Ba'zi plaginlar issiq tugmachalar bilan yaxshi birlashtirilgan, boshqalarida esa Sketch-ning to'liq huquqli interfeyslari mavjud.

Roy van Ruijenning "Eskiz yuguruvchisi" (va jamoa!)

Sketch uchun diqqat markaziga o'xshaydi. Bu ko'proq rivojlangan foydalanuvchilar uchun qisman buyruq satrlari uslubidagi interfeyslar nima qilayotganlarini biladigan odamlar uchun, shuningdek, plaginlar va simvol funktsiyalari mutaxassislarga ko'proq qaratilganligi uchun. Bu, eng asosiy darajada, navigatsiya uslublari va ramzlarini hiyla-nayrangli Sketch-ga qaraganda tezroq do'zaxga aylantiradi.

Rodrigo Soares tomonidan qatlamlarning nomini o'zgartiring

Men buni doim ishlataman. Ommaviy qatlamlarning nomini o'zgartiring yoki toping va o'zgartiring. Cheksiz uyushgan dizayner uchun bu juda zaruriy narsa.

InVision tomonidan hunarmandchilik

Men asosan namunaviy ma'lumotlarni olish uchun Craft Data-ni va Matchuplarni InVision-ga surish uchun Crafter Sync-dan foydalanaman, shunda ularni Inspect-dan foydalanib ko'rish mumkin (keyinchalik bu haqda keyinroq).

Nudg.it tomonidan Entoni Kollurafici

Agar siz 8 px o'lchovli panjara uchun interfeysdan foydalansangiz (sizga kerak), unda sizga ushbu vosita mutlaqo kerak bo'ladi. Sketch-da kichik va katta o'sishlarni o'zgartirishga imkon beradi (asl qiymati mos ravishda 1px va 10px). Ob'ektni o'ng tomonga siljitish uchun 8px ga o'tadigan kunlarni tugatdim, so'ngra O'ngga + O'ngga + Chapga. Men Sketch-dagi shunchaki asabiylashtiruvchi chertishlarni saqlagan oddiyroq vositani o'ylay olmayman.

Anima App tomonidan avtomatik tartib

Sketch guruhlarga ajratish uchun yangi xatti-harakatlarni chiqarganida, bu masxara qilishga moyil bo'lganlar uchun qutqaruvchi edi. Eng katta salbiy tomoni shundaki, ushbu boshqaruvning xatti-harakatlari biroz noaniq. Auto-Layout sizga qulay sxemalarni yaratishda yordam beradigan plagin yordamida tuzatadi

Manfaatdor tomonlar bilan baham ko'ring

Marvel tomonidan ajablanib

Bu tezda bizning yangi sevimlimizga aylanadi. Hozirgi vaqtda InVision hamma biladi, shuning uchun biz ushbu ilovaga e'tibor qaratamiz. Bu erda ba'zi muhim farqlar shundaki, siz o'zingizning dizayningizni vitrinada ommalashtirishingiz yoki boshqa dizaynerlarning ishlariga qarashingiz mumkin. Bundan tashqari, tvOS dasturlarini namoyish qilish uchun AppleTV ilovasi mavjud. Ko'pgina dizaynerlar hali ham ushbu vositada dizayn qilmaydilar, ammo u tezda o'zgarib bormoqda.

Ushbu loyihani bu erda ko'rib chiqing.

Tezroq ishlov berish

Bu o'tgan 18 oy ichida juda katta yo'lni bosib o'tdi. Endi sizda ikkita hayotiy variant mavjud, ulardan biri ikkinchisidan ancha etuk. O'z dizayningizni kodlash imkoniyati bor, bu sizga barchamiz dizaynerlarga bizning ahmoqligimiz haqida aytib beradigan maqtovli maqolalarni yozishga imkon beradi

Zeplin tomonidan Zeplin

Jamoani va ushbu ilova qo'llab-quvvatlagan ishlarni yaxshi ko'ring. Xulosa qilib aytganda, bu UI xususiyatlarini yo'q qildi. Siz ishlab chiquvchilarga taqdim etmoqchi bo'lgan Sketch-dan artboardlarni eksport qiling va u almashiladigan URL-ga sinxronlashtiriladi. Ishlab chiquvchilar istalgan grafik elementni bosishlari va mos keladigan CSS-ga ega bo'lgan deyarli har qanday mulkni (chegara, rang, shrift va boshqalar) olishlari mumkin. Zeplin aqlli HTML-dan tashqarida qoladi, chunki UI dizaynidan ekstrapolyatsiya qilish juda qiyin.

InVision tomonidan InVision tekshiruvi

Bu Zeplin-ning deyarli bir xil funktsional xususiyatiga ega, ammo InVision prototiplash mahsulotining kengaytmasi sifatida ishlaydi. Bu to'plamga to'g'ri kelgani yoqimli, lekin sizni ogohlantiraman, bu sizning dastlabki Sketch faylingizni, shuningdek, yuqoridagi o'ngdagi "yuklab olish aktivlari" tugmachasi orqali manba fayllarini maxfiy deb biladiganlar uchun bitimni buzadi.

UI-ni jonlantiring

Animatsiyani xohlashingiz qanchalik murakkab bo'lsa, qaror qilishning asosiy usuli bu. Men bu erda sodda va ilg'or bo'lishi uchun ikkita variantni sanab o'tmoqdaman. Bundan tashqari, men After Effects va Flash (lol jk) kabi to'liq dasturiy animatsiya dasturidan voz kechayotganimni unutmang, ular mahsulot dizayni jarayoniga yaxshi birlashtirilmagan.

Daniel Xooper tomonidan asos solingan

Printsip - bu sizning dizayningizga oddiy animatsiyalar va o'tishlarni qo'shish uchun juda eskizga o'xshash interfeys. Bu sizning qatlamlaringiz yaxshi guruhlanganligi va yaxshi nomlanishini talab qiladi, chunki ular Printsipga ushbu nomlar bilan olib kirishadi va yaxshi nomlar bilan ob'ektlarni boshqarish osonroq bo'ladi ... MASLAHAT.

Framer jamoasi tomonidan FramerJS

Men bu bilan ko'p o'ynaganim yo'q, chunki men juda ko'p animatsiya qilmayman, lekin u Printsipdan ancha kuchliroq. Haqiqiy kodni yozish kerak bo'lganligi sababli, bu qiyinroq. Lekin juda yaxshi, chunki haqiqiy kodni yozishingiz kerak.

Resurslarni boshqarish

IconJar

Bozorda Lingo by Noun Project kabi boshqa alternativalar mavjud, ammo bu arzon va jozibali ishlaydi. IconJar sizga ikonkalarni osongina boshqarish imkonini beradi va bonus sifatida siz shriftlarni tashlashingiz mumkin va bu har bir glif uchun SVG-ni yaratadi. Bu shuni anglatadiki, siz belgi shriftini kiritib, undagi barcha belgilarni alomat belgilar sifatida olishning o'rniga, ularni individual belgilar sifatida olishingiz mumkin. Tobora ko'proq belgi dizaynerlari ikonkalarni IconJar-ga moslashtirmoqdalar, bu sizning ulkan ikonkalar to'plamingiz hech qanday kuch sarflamasdan tashkil etilishini anglatadi.

Shunchaki sizning manbalaringiz

Ilova dizayni borasida ilgari aytib o'tganimizdek, ko'pgina UX dizaynerlari ilovalarni maxsus vizual aktivlardan foydalanmasdan yaratadilar. Ushbu ro'yxat resurslar dengizini bepul foydalanishingiz mumkin bo'lgan kichik to'plamga tushirishga yordam beradi.

Belgilar

  • Google Material Icons - MD loyihalari uchun bu asosiy to'plam.
  • Nova Icons - bu MD-hissi bilan ajralib turadigan piktogrammalarning ajoyib to'plami.
  • Nucleo - ranglar, ranglar va o'lchamlarni boshqarishga imkon beradigan turli xil va o'sib boruvchi piktogrammalar to'plami.
  • Sehrgarlar - kichikroq to'plam, ammo ko'pgina dasturlar uchun asos sifatida juda yaxshi.

Shriftlar

UI Design uchun shriftlarni tanlash aniq raketa operatsiyasi emas, chunki siz tushunarli sans-serifni tanlashingiz kerak, ular tugmalar, yorliqlar, sarlavhalar va hokazolarda ishlashi kerak. Men bu erda TypeKit Shriftlarini kiritishdan qochaman, chunki , ochig'ini aytganda, qonun loyihasiga mos keladigan juda ko'p nozik shriftlar mavjud. Quyidagi bepul Google shriftlari odatda sizning ko'pgina loyihalaringiz uchun ishlaydi.

  • Roboto - bu juda yaxshi shrift, ammo Material Designga juda bog'langan, shuning uchun MD-ga asoslangan loyihalardan tashqarida foydalanish qiyin bo'lishi mumkin.
  • Open Sans - to'plamning eng ko'p qirrali shriftidir. Bu yillar davomida modada bo'lib kelgan va sekinlashuv belgilari yo'q. UI sizning barcha ehtiyojlaringiz uchun juda ko'p vaznga ega.
  • Lato - Men uni har qanday dizayn uchun ishlatmayman, chunki u har doim ham yaxshi ko'rinmaydigan nozik chiziqlarga ega. U juda oqlangan va UI boshqaruvida ishlatiladigan boshqa shriftli sarlavhalar uchun juda yaxshi bo'lishi mumkin.
  • Kabin - deyarli hamma narsaga o'xshamaydigan "Ochiq" so'zlar singari ko'p qirrali.
  • Montserrat - juda ko'p qirrali emas, lekin men uni tez-tez sim kartalari uchun ishlataman. Bu yumshoqroq hisga ega bo'lgan tushunchalar yoki ilovalar uchun juda mos keladi.
  • Nunito - bu birinchi qarashda Proxima Nova Soft-ning bepul versiyasi kabi ko'rinadigan Google-ning yangi shriftidir
  • Jaldi - sizning UI-ga xiralikni berish uchun etarli uslub. Bundan tashqari, u kichik o'lchamlarda yaxshi ko'rinadi.

Fin. Umid qilamanki, bu to'liq emas. UX Power Tools-da ishlayotganimizda, bu Sketch-ning eng sevimli hamkori bo'lgan ilovalar. Agar siz ko'proq narsani qo'shishimizni xohlasangiz, biz plagin yoki ilovangizni 65 dollarga sinab ko'ramiz, yoki yangi Tesla qancha turadi?

O'rta ma'lumotga ega bo'lmasam, sizni yaxshiroq, samaraliroq dizayner qilish uchun UX Power Tools-da Sketch vositalari ustida ishlamoqdaman. Bizni Twitter @uxpowertools-da kuzatib boring. Agar ruh sizni harakatga keltirsa, menga ham ergashing!