Uslub qo'llanmasini qanday yaratish kerak: UI doirasidan boshlang

AdRollning UX dizayneri bilan nima uchun bunday qilganimiz va biz nimani bilib olganimiz haqida savol-javob

Ushbu blog postlari uslublar qo'llanmasining yaratilishidan boshlab jamoalarimizga etuk foydalanuvchi interfeysini yaratishgacha bo'lgan va natijada mahsulotlarimiz uchun o'ziga xos ovoz va ohangni yaratishgacha bo'lgan ketma-ket birinchi nashrdir.

Salom! Men Arya Srinivasan, AdRoll-da UX tadqiqotchisi. Men AdRoll-ning ona reklama API-sida ishlaydigan UX dizayneri Mason Li bilan AdRoll-ning uslub qo'llanmasini ishlab chiqish haqida gaplashdim.

Arya: Ishlarni boshlash uchun nima uchun uslublar bo'yicha qo'llanma loyihasini boshladingiz? Qanday muammoni hal qilish kerak edi?

Mason: Muammo mahsulotlarda ham, bitta mahsulot ichida ham dizayndagi nomuvofiqlik edi. Masalan, hamma joyda bir xil ko'rinishi kerak bo'lgan tugma, lekin rangi, shrift og'irligi va chegara uslubida farq qiladi.

Dizaynerlarning istehzolari va bizning dasturlarimizda tugmalar har xil ko'rinadi.

AdRollning tez o'sishi, biz tezlikka yo'naltirilganimizni anglatardi. Hozir biz bir nechta mahsulotlarga ega bo'lgan yirik kompaniyamiz, shuning uchun dizayner sifatida, biz o'z mahsulotimizni taqdim etishda muvofiqlikni ta'kidlashimiz kerak: dizayn orqali.

Dizaynga e'tibor qaratish uchun avval mavjud nomuvofiqliklarni tuzatish kerak edi. UX dizaynerlari odatda bitta yoki ikkita mahsulotga e'tibor berishadi, shuning uchun jamoamizni barcha mahsulotlarning dizayni haqida o'ylashlari uchun men UI qoidalarini muhokama qilish uchun haftalik "UI Smackdown" uchrashuvini tashkil qildim.

Har bir yig'ilishda biz bitta dizayn to'g'risida qaror qabul qilish uchun dizayndagi nomuvofiqliklarni ko'rib chiqdik. Bir nechta uchrashuvlardan so'ng, dizaynerlar mendan hali ham to'g'ri rang yoki to'ldirish haqida so'rashdi. Bizga barcha javoblar bilan markaziy hujjat kerak edi, shuning uchun men UI Framework-ni dizaynerlar uchun manba sifatida yaratdim. Qachonki biron bir komponent etishmayotganligini yoki yangi tarkibiy qismni qo'shishni xohlasak, biz uni muhokama qilamiz va asosiy UI Framework fayliga qo'shamiz.

Arya: Siz AdRoll-ni dizaynerlik markaziga aylantirmoqchi bo'lganingizni aytdingiz - bu bilan nimani nazarda tutyapsiz?

Mason: Men AdRoll dizaynni birinchi o'ringa qo'yishini istayman, shunda u raqobatbardosh differentsiator - mijozlar tomonidan ularning ehtiyojlarini chinakam hal qiladigan yaxshi ishlab chiqilgan mahsulot sifatida tan olinadi.

Arya: Uslublar bo'yicha qo'llanmada bevosita qanday maqsadlaringiz bor edi? Ushbu loyihani uzoq muddatga ko'ra bilasizmi?

Mason: Mening qisqa muddatli maqsadim - UI tarkibiy qismlarini standartlashtirish orqali dizaynerlar o'rtasida dizaynning muvofiqligini ta'minlash. Dizaynerlar dizayni gapirganda bir xil tilda gapirishlarini istayman. Masalan, modal yoki pastga tushadigan holatda, muhandislar dizaynerning taklifiga asoslanib quradilar. Agar dizayn elementlari dizaynerlar o'rtasida farq qilsa, muhandislar bir xil elementni turli yo'llar bilan yaratmoqchi.

Mening o'rta muddatli maqsadim - "RollUp", AdRoll-ning ichki interfeys ichki kutubxonasida ushbu uslubni bizning kodimizda belgilash. Agar bizda oldindan belgilangan uslublar jadvali bo'lsa, unda bizning muhandislarimiz buni bajarishlari kerak. Dizaynerlar va muhandislar bir xil tilda gapirishlari mumkin.

Arya: Uslub qo'llanmasini yaratishda biron bir muammoga duch keldingizmi? Siz ularni qanday hal qildingiz?

Mason: Eng katta to'siqlardan biri mahsulot jamoalari ichidagi odamlardan sotib olish edi. Barchani jalb qilish uchun men kun tartibidagi mavzularning aniq ro'yxati bilan uchrashuv tashkil qildim. Men dizayndagi nomuvofiqliklarni, masalan, mahsulotlar orasidagi ochiladigan menyularni namoyish etdim. Vizual dalillarni taqdim etish suhbatlarga turtki beradi va oxirida odamlar o'zlarining mahsulotlari haqida qayg'uradilar va mustahkamlikni xohlashadi.

Yana bir qiyinchilik - qoidalarni hal qilish edi. Komponentni standartlashtirish haqida gap ketganda, u har qanday joyda, har qanday kontekstda qo'llanilishi kerak. Har bir chekka holat haqida o'ylashingiz kerak. Komponent moslashuvchan bo'lishi kerak, lekin shu bilan birga u to'liq ishlatilishi kerak, shuning uchun uni ishlatish oson, iste'mol qilinishi va qo'llanilishi mumkin.

Mana bizning uslublar qo'llanmasining moslashuvchanligiga misol. Ushbu geotargeting ochiladigan bandini to'ldirish bo'yicha bizning dastlabki qarorimiz juda katta edi, shuning uchun biz ushbu foydalanish holatini hisobga olish uchun uslublar qo'llanmasini qayta ko'rib chiqdik.Oldin (chapda), keyin (o'ngda)

Men yana bir muammoni chaqirishni xohlayman! Nomlash qiyin bo'lishi mumkin. Yuqorida aytib o'tganimdek, men dizaynerlar va muhandislarning bir xil tilda gaplashishini istayman, ammo buni diqqat bilan bajarish kerak. Ochiladigan menyu kabi sodda narsa uchun biz aslida bir nechta o'zgaruvchiga egamiz (ulardan biri katakchali katakchalari, ikkinchisi belgilash katakchalari va matn bloklari, ikkinchisi esa standart ochiladigan menyu). Umumjahon tushunchasi mavjud bo'lgan uch xil ochilishni qanday nomlaymiz?

Semantika qiyin; bizning nomlashimiz mantiqiy bo'lishi kerak. Biz biron bir nom haqida qaror qabul qilganimizda konsensusga erishish uchun hamkorlikning salqin vositalaridan foydalanganmiz. Masalan, Ueyk bizga barcha ochiq savollar va muammolarni to'plashda, echimlarni muhokama qilishda, UI Smackdown qarorlarini kuzatishda va Slack bilan integratsiya orqali katta mahsulot jamoasi bilan suhbatni davom ettirishda yordam berdi.

UIda uyg'unliklarni muhokama qilish va tarkibiy qoidalar bo'yicha hamkorlik qilishda qanday foydalandik.

Arya: UsR qo'llanmasini yaratishda e'tiborga olish kerak bo'lgan AdRoll-ning UI xususida biron bir noyob narsa bormi?

Mason: Bizning boshqaruv panelimiz juda katta ma'lumotlarga ega. Bundan tashqari, kampaniyani yaratish oqimi reklama beruvchilarga juda ko'p dastaklarni jalb qiladi. Kam tajribaga ega bo'lgan reklama beruvchilarning ehtiyojlarini qondirish uchun biz samarali standart sozlamalarga ega bo'lishga intilamiz. Mahsulotlarimizda tarkibiy qismlar murakkab funktsiyalarga ega, ammo sodda va ulardan foydalanish oson.

Arya: Siz uslublar qo'llanmasini yaratishni boshlaganingizda bilishingizni istagan narsalar bormi?

Mason: Men barcha mahsulotlarimiz boshidan qanday ishlashini chuqurroq anglashni istardim. Masalan, biz har haftalik dizayn tanqidiy yig'ilishimizda tegishli mahsulotimiz qanday ishlashini baham ko'ramiz, shuning uchun men SendRoll (bizning elektron pochtamizni qayta ko'rib chiqadigan mahsulot) yuzada qanday ishlashini bilaman, ammo men SendRoll-ning dizayner ekanligi haqida chuqur bilimga ega emasman. O'ylaymanki, mahsulotni nuances bilan tushunish uslublar qo'llanmasida ishlashda aniq yordam beradi, chunki men bundan keyin foydalanish mumkin bo'lgan barcha vaziyatlarni yaxshiroq tushunaman.

Arya: Dizayner jarayoni va ularning mahsuloti haqida umumiy tushunchaga erishish uchun eng yaxshi usul nima?

Mason: Haqiqatan ham mahsulotimizni etkazib berishga e'tibor qaratgan bo'lsak ham, biz har hafta dizayn tanqidiy yig'ilishimizda dizayn jarayonimizni baham ko'rish uchun yaxshi ish qilamiz. O'ylaymanki, har bir yig'ilishdan keyin biz tsiklni yopish haqida yaxshiroq fikrga ega bo'lishimiz mumkin - dizayner qanday qilib yig'ilishdan olgan mulohazalarni o'z ichiga olgan? Mahsulot bizning reklamachilarimiz tomonidan yuborilgan va ishlatilgandan so'ng, biz ham reklamachilar o'zlarining tahlillaridan olingan ma'lumotlarga asoslanib o'z mahsulotlarini qanday ishlatayotganliklari bilan bo'lishishimiz mumkin.

Arya: Ushbu loyihada ishlayotganda siz aytib o'tgan manbalar bormi?

Mason: Men Bred Frostning Atom Dizaynini o'qidim, Internetda tadqiqotlar o'tkazdim va MeetUps-da boshqa UX dizaynerlari bilan suhbatlashdim. Agar biron bir kompaniya yaxshi dizaynga ega deb o'ylasangiz, ular Internetda biron bir uslub bo'yicha qo'llanma haqida gaplashishgan bo'lishi mumkin.

Arya: Bizning uslub qo'llanmamizning holati qanday?

Mason: Men turli xil mahsulotlarimizda ishlatadigan barcha foydalanuvchi interfeysi elementlarini yozib oldim va ularni poydevorlar, tarkibiy qismlar, naqshlar va sahifalarga guruhladim, ular bizning UI dizaynimiz uchun haqiqat manbai bo'lib xizmat qiladi.

Siz Dribbble-da asos va komponent UI elementlarini tekshirishingiz mumkin. Agar siz Atom Dizayni bilan tanish bo'lsangiz, men "atom" va "Molekula" darajalarini "komponentlar" deb atagan narsalarga ajratdim. Masalan, shakl sarlavhasi va kiritilishini birlashtirish boshqa dizaynerlarga to'ldirilgan shaklni osongina nusxalashni osonlashtiradi. maydon

O'qiganingiz uchun rahmat!

Uslubiy qo'llanmani ishlab chiqishda ushbu yaqinlashib kelayotgan mavzularga e'tibor bering:

  • UI doirasi hamkorlikni qanday soddalashtiradi
  • UI Framework asosida yangi uslublar jadvallarini ishlab chiqish
  • Uslublar bo'yicha qo'llanma veb-saytini qanday yaratish kerak
  • Ovozimiz va ohangimizni topishga sayohat