1. Qisqacha kirish Interfeys inventarizatsiyasi nima?

Reja

1. Qisqacha kirish

2. Interfeys inventarizatsiyasi nima?

3. Interfeys inventarizatsiyasini qayerdan boshlash kerak?

4. Qurilish bloklarini investitsiya qilish

5. Belgilarning investitsiyasi

6. Naqshlarning investitsiya qilish

7. Xulosa

Dizayn tizimlari Sprint 1: interfeys inventarizatsiyasi

Qisqacha kirish: Men Marcin: UX ning sobiq menejeri va hozir UXPin asoschilaridan biri va bosh direktori - UX dizayn platformasi. Ushbu ketma-ket nashrlarda, men UXPin-ning o'z dizayn tizimini yaratish sayohati haqida xabar beraman. Birinchi postda men dizayn tizimlarining asoslarini muhokama qildim (nima uchun? Nima uchun?). Endi biron bir ishni bajarish vaqti keldi! Interfeys inventarizatsiyasi yordamida Dizayn Tizimimizni yaratish jarayonini qanday boshlaganimiz haqida hikoya.

Agar siz dizayn tizimini nima uchun yoki qanday yaratishni bilmoqchi bo'lsangiz, ushbu ketma-ket yozilgan xabarlarga amal qiling. Ko'p amaliy maslahatlar keladi!

Dastlabki tadqiqotlarimizdan so'ng, dizayndagi izchillikning etishmasligi mahsulot ishlab chiqarishdagi eng katta muammolardan biri ekanligini bilib oldik. Shuningdek, biz ushbu muammoni o'z mahsulotimizda hal qilishimiz kerakligini tasdiqladik.

Eng muhimi, biz dizayn tizimining nomuvofiqliklarning oldini olish uchun to'g'ri echim ekanligini aniqladik. Biz eng yangi loyihalarimizni qo'llab-quvvatlash uchun o'sib borar ekan, dizayn tizimining uzoq muddatli hayotini yaxshilaydigan jarayonni yaratishga to'liq majburiyat berishimiz kerak edi.

Natan Kertis, dizayn tizimlari mutaxassisi va Modulli veb-dizayn muallifi sifatida mashhur bo'lgan:

"Dizayn tizimi bu loyiha emas. Bu mahsulotlarga xizmat ko'rsatadigan mahsulot. ”

Dizayn tizimi oddiygina toshga o'yilgan emas va u bir martalik etkazib berilmaydi. Bu sizning mahsulotingizni ishlab chiqarish jarayonining yuragi, bu jarayon artefakt emas.

Dizaynerlar uchun bu juda ajoyib. Dizayndagi nomuvofiqliklarni va takroriy ishlarni bartaraf etish jarayonidagi o'zgarishlar? Ro'yxatdan o'ting! Afsuski, ishlar yanada murakkablashadi.

Jarayonni tubdan o'zgartirish har doim juda qiyin. Siz odamlarni o'zlarining konfor zonalaridan majburan chiqarib yuborasiz, ularning xatolariga ishora qilasiz va ishlarini boshqacha qilishlarini so'raysiz. Sizni ochiq qo'l bilan kutib olishlarini kutmang. Avvaliga ular qarshilik ko'rsatadilar - bu insoniy tabiat, shuning uchun siz tayyor bo'lishingiz kerak.

Xo'sh, qanday qilib boshqalarni o'zgartirishimiz mumkin? Bizda yo'q.

Hayotimdagi ba'zi muhim maslahatlar shundan iboratki, odamlarni o'zgartirish befoyda. Buning o'rniga biz boshqalarni bizning yo'limizdan yurishga undashimiz kerak. Shunday qilib, o'zimizdan boshlaylik.

O'zingizdan boshlang

Ehtimol siz: "Hey, bosh direktor emasmisiz?" Odamlarga shunchaki dizayn tizimida ishlashni boshlashlarini aytolmaysizmi? ”

Texnik jihatdan to'g'ri bo'lsa-da, amalda bu oddiy emas.

Birinchidan, hatto rahbarlar ham cheklovlarga to'la dunyoda yashaydilar. Men shunchaki odamlarni vaqtni hisobga oladigan loyihalardan tortib ololmayman, ularni men bilan dizayn tizimida ishlashga majbur qila olmayman va hali ham VP-larimizni muhim loyihalarni miqyosida, o'z vaqtida va strategiyasida etkazib berishda javobgarman. Bu asossiz taxmin.

Ikkinchidan, jamoalar sizning g'oyalaringizni to'liq o'rganishlari kerak yoki ular hech qachon qabul qilmaydi. Buning uchun ularga og'riqni boshdan kechirishga va echimni tatib ko'rishga imkon berishingiz kerak. Dizayn rahbari yoki etakchi dizayner bo'lishingizdan qat'i nazar, bizning dizaynerlik tizimini tashkilotlarimizga sotish bizning birinchi vazifamizdir.

Interfeys inventarizatsiyasini kiriting - bu dizayn tizimining eng yaxshi boshlang'ich nuqtasi bo'lgan oddiy vosita. Va'z qilish va sayohatni boshlash uchun bir xil foydali.

Interfeys inventarizatsiyasi nima?

Atomic Design muallifi Bred Frost interfeys inventarizatsiyasini quyidagicha belgilagan:

"... sizning interfeysingizni tashkil etuvchi qismlar va qismlarning to'liq to'plami".

Boshqacha qilib aytganda, Interfeys inventarizatsiyasi - bu sizning mahsulotingizning barcha bo'laklari bilan puxta tashkil etilgan quti. Bitta "bo'linmada" siz butun mahsulot yoki butun oiladan yig'ilgan tugmachalarga ega bo'lishingiz mumkin. Boshqasida, barcha ranglar, matnning uslublari va boshqalar.

Interfeys inventarizatsiyasi - bu sizning barcha yorqin nomuvofiqliklaringizni namoyish qilish uchun ajoyib vositadir. Bu sizning jamoangiz va manfaatdor tomonlar uchun muammoni tanib bo'lmaydigan holga keltiradi. Aytish o'rniga, siz ularni tuzatish oson bo'lgan oson iste'mol qilinadigan qismlarni ko'rsatasiz.

Shuningdek, mahsulotning turli bosqichlarini yaxshiroq tushunasiz. Masalan, har xil jadvallarning yig'indisi qaysi biri eskirganligini ko'rsatadi va uni eng yangi versiyaga qaytarish kerak.

Interfeys inventarizatsiyasi daraxt tanasidagi halqalarga o'xshaydi. Xuddi daraxt uzuklarida bo'lgani kabi, siz loyihada yong'in bo'lganida va tizim yaxshi oziqlanganligini ko'rishingiz mumkin. Bu butun tashkilot uchun bebaho dars. Yaxshi va yomon kunlar mahsulot tajribasida aks etadi. Bu bizning tashkiliy ishimizning samaradorligidan dalolat beradi.

Qani boshladik!

Interfeys inventarizatsiyasini qaerdan boshlash kerak

Bred Frost, interfeyslarni inventarizatsiya qilish oddiy interfeys ekranining fotosuratlarini olish va ularni asosiy ma'ruza bo'limlariga ajratish bilan boshlashni taklif qiladi.

Ushbu yondashuv albatta juda yaxshi ishlashi mumkin bo'lsa-da, UXPin-ga mos kelmadi.

Bizda mavjud bo'lgan kod arxitekturasi bor edi, men uni tizimimizning asosi sifatida ishlatmoqchi edim. Bizning UI me'morimiz (bu yigit sof daho va mening rivojlanishim guruxi) yillar oldin CSS-ga yaxshi tuzilgan va modulli yondashuvni taqdim etdi. O'shandan beri biz unga diniy ravishda amal qildik. U bizning CSS-ni (aniqrog'i kamroq, chunki biz jadval jadvallarini tuzish va boshqarish uchun bir oz ishlov beruvchidan foydalanganimiz uchun) quyidagiga ajratdi:

Elementlar - interfeysning eng kichik alohida qismlari, ular komponentlar uchun qurilish bloklari vazifasini bajaradi (masalan, tugmalar, shakl maydonchalari ...).

Komponentlar - mustaqil ravishda qayta-qayta ishlatiladigan interfeys elementlari (masalan, asboblar paneli, sahifa yuklash vositasi).

Modullar - to'liq funktsional imkoniyatlar (masalan, asboblar paneli, qidirish)

Layout ta'riflari - Yuqorida aytilganlarning barchasi stilizatsiyani birlashtirish uchun yadro fayllaridan foydalanadi (masalan, o'zgaruvchilar, piktogramma ta'riflari va boshqalar).

Uy/Maqolalar/Dizayn tizimlari Sprint 1: interfeys inventarizatsiyasi

Joylashtirilgan 25-09-2019

Dizayn tizimlari Sprint 1: interfeys inventarizatsiyasi

Qisqacha kirish: Men Marcin: UX ning sobiq menejeri va hozir UXPin asoschilaridan biri va bosh direktori - UX dizayn platformasi. Ushbu ketma-ket nashrlarda, men UXPin-ning o'z dizayn tizimini yaratish sayohati haqida xabar beraman. Birinchi postda men dizayn tizimlarining asoslarini muhokama qildim (nima uchun? Nima uchun?). Endi biron bir ishni bajarish vaqti keldi! Interfeys inventarizatsiyasi yordamida Dizayn Tizimimizni yaratish jarayonini qanday boshlaganimiz haqida hikoya.

Agar siz dizayn tizimini nima uchun yoki qanday yaratishni bilmoqchi bo'lsangiz, ushbu ketma-ket yozilgan xabarlarga amal qiling. Ko'p amaliy maslahatlar keladi!

Dastlabki tadqiqotlarimizdan so'ng, dizayndagi izchillikning etishmasligi mahsulot ishlab chiqarishdagi eng katta muammolardan biri ekanligini bilib oldik. Shuningdek, biz ushbu muammoni o'z mahsulotimizda hal qilishimiz kerakligini tasdiqladik.

Eng muhimi, biz dizayn tizimining nomuvofiqliklarning oldini olish uchun to'g'ri echim ekanligini aniqladik. Biz eng yangi loyihalarimizni qo'llab-quvvatlash uchun o'sib borar ekan, dizayn tizimining uzoq muddatli hayotini yaxshilaydigan jarayonni yaratishga to'liq majburiyat berishimiz kerak edi.

Natan Kertis, dizayn tizimlari mutaxassisi va Modulli veb-dizayn muallifi sifatida mashhur bo'lgan:

"Dizayn tizimi bu loyiha emas. Bu mahsulotlarga xizmat ko'rsatadigan mahsulot. ”

Dizayn tizimi oddiygina toshga o'yilgan emas va u bir martalik etkazib berilmaydi. Bu sizning mahsulotingizni ishlab chiqarish jarayonining yuragi, bu jarayon artefakt emas.

Dizaynerlar uchun bu juda ajoyib. Dizayndagi nomuvofiqliklarni va takroriy ishlarni bartaraf etish jarayonidagi o'zgarishlar? Ro'yxatdan o'ting! Afsuski, ishlar yanada murakkablashadi.

Jarayonni tubdan o'zgartirish har doim juda qiyin. Siz odamlarni o'zlarining konfor zonalaridan majburan chiqarib yuborasiz, ularning xatolariga ishora qilasiz va ishlarini boshqacha qilishlarini so'raysiz. Sizni ochiq qo'l bilan kutib olishlarini kutmang. Avvaliga ular qarshilik ko'rsatadilar - bu insoniy tabiat, shuning uchun siz tayyor bo'lishingiz kerak.

Xo'sh, qanday qilib boshqalarni o'zgartirishimiz mumkin? Bizda yo'q.

Hayotimdagi ba'zi muhim maslahatlar shundan iboratki, odamlarni o'zgartirish befoyda. Buning o'rniga biz boshqalarni bizning yo'limizdan yurishga undashimiz kerak. Shunday qilib, o'zimizdan boshlaylik.

O'zingizdan boshlang

Ehtimol siz: "Hey, bosh direktor emasmisiz?" Odamlarga shunchaki dizayn tizimida ishlashni boshlashlarini aytolmaysizmi? ”

Texnik jihatdan to'g'ri bo'lsa-da, amalda bu oddiy emas.

Birinchidan, hatto rahbarlar ham cheklovlarga to'la dunyoda yashaydilar. Men shunchaki odamlarni vaqtni hisobga oladigan loyihalardan tortib ololmayman, ularni men bilan dizayn tizimida ishlashga majbur qila olmayman va hali ham VP-larimizni muhim loyihalarni miqyosida, o'z vaqtida va strategiyasida etkazib berishda javobgarman. Bu asossiz taxmin.

Ikkinchidan, jamoalar sizning g'oyalaringizni to'liq o'rganishlari kerak yoki ular hech qachon qabul qilmaydi. Buning uchun ularga og'riqni boshdan kechirishga va echimni tatib ko'rishga imkon berishingiz kerak. Dizayn rahbari yoki etakchi dizayner bo'lishingizdan qat'i nazar, bizning dizaynerlik tizimini tashkilotlarimizga sotish bizning birinchi vazifamizdir.

Interfeys inventarizatsiyasini kiriting - bu dizayn tizimining eng yaxshi boshlang'ich nuqtasi bo'lgan oddiy vosita. Va'z qilish va sayohatni boshlash uchun bir xil foydali.

Interfeys inventarizatsiyasi nima?

Atomic Design muallifi Bred Frost interfeys inventarizatsiyasini quyidagicha belgilagan:

"... sizning interfeysingizni tashkil etuvchi qismlar va qismlarning to'liq to'plami".

Boshqacha qilib aytganda, Interfeys inventarizatsiyasi - bu sizning mahsulotingizning barcha bo'laklari bilan puxta tashkil etilgan quti. Bitta "bo'linmada" siz butun mahsulot yoki butun oiladan yig'ilgan tugmachalarga ega bo'lishingiz mumkin. Boshqasida, barcha ranglar, matnning uslublari va boshqalar.

Interfeys inventarizatsiyasi - bu sizning barcha yorqin nomuvofiqliklaringizni namoyish qilish uchun ajoyib vositadir. Bu sizning jamoangiz va manfaatdor tomonlar uchun muammoni tanib bo'lmaydigan holga keltiradi. Aytish o'rniga, siz ularni tuzatish oson bo'lgan oson iste'mol qilinadigan qismlarni ko'rsatasiz.

Shuningdek, mahsulotning turli bosqichlarini yaxshiroq tushunasiz. Masalan, har xil jadvallarning yig'indisi qaysi biri eskirganligini ko'rsatadi va uni eng yangi versiyaga qaytarish kerak.

Interfeys inventarizatsiyasi daraxt tanasidagi halqalarga o'xshaydi. Xuddi daraxt uzuklarida bo'lgani kabi, siz loyihada yong'in bo'lganida va tizim yaxshi oziqlanganligini ko'rishingiz mumkin. Bu butun tashkilot uchun bebaho dars. Yaxshi va yomon kunlar mahsulot tajribasida aks etadi. Bu bizning tashkiliy ishimizning samaradorligidan dalolat beradi.

Qani boshladik!

Interfeys inventarizatsiyasini qaerdan boshlash kerak

Bred Frost, interfeyslarni inventarizatsiya qilish oddiy interfeys ekranining fotosuratlarini olish va ularni asosiy ma'ruza bo'limlariga ajratish bilan boshlashni taklif qiladi.

Ushbu yondashuv albatta juda yaxshi ishlashi mumkin bo'lsa-da, UXPin-ga mos kelmadi.

Bizda mavjud bo'lgan kod arxitekturasi bor edi, men uni tizimimizning asosi sifatida ishlatmoqchi edim. Bizning UI me'morimiz (bu yigit sof daho va mening rivojlanishim guruxi) yillar oldin CSS-ga yaxshi tuzilgan va modulli yondashuvni taqdim etdi. O'shandan beri biz unga diniy ravishda amal qildik. U bizning CSS-ni (aniqrog'i kamroq, chunki biz jadval jadvallarini tuzish va boshqarish uchun bir oz ishlov beruvchidan foydalanganimiz uchun) quyidagiga ajratdi:

Elementlar - interfeysning eng kichik alohida qismlari, ular komponentlar uchun qurilish bloklari vazifasini bajaradi (masalan, tugmalar, shakl maydonchalari ...).

Komponentlar - mustaqil ravishda qayta-qayta ishlatiladigan interfeys elementlari (masalan, asboblar paneli, sahifa yuklash vositasi).

Modullar - to'liq funktsional imkoniyatlar (masalan, asboblar paneli, qidirish)

Layout ta'riflari - Yuqorida aytilganlarning barchasi stilizatsiyani birlashtirish uchun yadro fayllaridan foydalanadi (masalan, o'zgaruvchilar, piktogramma ta'riflari va boshqalar).

UXPin Less fayllarining modulligi

Iloji boricha inventarizatsiya shunga o'xshash tuzilishga rioya qilishi kerak.