Oxirgi UI dizayn qo'llanmasi

Tarkib

• 01. Tipografiyani tanlang
• 02. To'g'ri palitrani tanlang
• 03. Uslublar va tugmalar
• 04. Komponentlaringizni yarating
• 05. Hujjatlashing va hamkorlik qiling

Foydalanuvchi interfeysi dizayni nima? Yaxshi savol bo'lishi mumkin, aslida foydalanuvchi interfeysi dizayniga nima kiradi? Estetika? Foydalanish mumkinmi? Maxsus imkoniyatmi? Ularning hammasi? Qanday qilib ushbu omillarning barchasi foydalanuvchilarning maqbul tajribasini ta'minlash uchun birlashtiriladi va ulardan qaysi biri birinchi o'rinda turishi kerak?

Imkoniyat har doim birinchi o'rinda turishi kerak, bu qulaylik uchun asos yaratadi (eng yaxshi veb-sayt yaratuvchisidan foydalanish bu erda yordam beradi). Va keyin, agar foydalanuvchi interfeysi mavjud bo'lsa va foydalanishga yaroqli bo'lsa, u allaqachon estetik jihatdan juda yaxshi ko'rinishi kerak (interfeys dizayni vositalari bu erda yordam beradi). Keyin sizning dizayningiz barcha darajalarda ishlashiga ishonch hosil qilish uchun siz uni sinab ko'rishingiz kerak bo'ladi, buni siz eng yaxshi foydalanuvchi sinov vositalarini tanlashimiz bilan qilishingiz mumkin. Ko'pgina dizaynlarning asosiy elementlarini va vizual muvofiqlikni ta'minlash uchun nima qilish kerakligini batafsil ko'rib chiqamiz.

01. Tipografiyani tanlang

Ajoyib tipografiya (dizaynning ko'plab jihatlari singari) kirish imkoniyatiga ega. Vizual dizayn, albatta, foydalanuvchining umumiy tajribasini oshiradi, ammo kun oxirida foydalanuvchilar interfeys bilan o'zaro aloqada bo'lib, uni san'at deb hisoblamaydilar. Tushunarli harflar aniqlikka olib keladi va o'qiladigan so'zlar foydalanuvchilarga tarkibni samarali hazm qilishga yordam beradi. Ikkalasi ham har qanday vizual estetikadan muhimroqdir.

Biroq, yaxshi ishlab chiqilgan tipografiya hali ham estetik jihatdan qoniqarli bo'lishi mumkin. Oq-qora Helvetica (yoki shunga o'xshash shrift) bir nechta oddiy tipografik yaxshilanishlardan so'ng go'zallik bo'lishi mumkin. Yaxshilash deganda biz shrift yoki matn rangini emas, shrift o'lchamini, satr balandligini, harflar oralig'ini va boshqalarni sozlashni nazarda tutamiz.

"Chiroyli" tipografiya aslida o'qimagan paytda juda xunuk bo'ladi, chunki ko'ngilsizlik har doim estetikani o'ziga jalb qiladi. Ajoyib dizayn muvozanatli va uyg'undir.

UI dizaynining ko'plab jihatlari singari, kirish va estetikani muvozanatlash uchun ingl. Qiyinchilik butun dizayn davomida izchillikni saqlab qolishdir. Muvofiqlik har xil ahamiyatga ega bo'lgan elementlar o'rtasida aniq ierarxiyani o'rnatadi, bu o'z navbatida foydalanuvchilarga interfeysni tezroq tushunishga va hattoki tarkibni yanada samarali hazm qilishga yordam beradi.

O'qish mumkinligi va o'qilishi haqida gap ketganda, WCAG 2.0 veb-tarkibiga kirish uchun qo'llanma tomonidan belgilangan minimal shrift hajmi 18 ppt (yoki 14 piksel qalin). Shriftning eng yaxshi o'lchamlari asosan shriftning o'ziga bog'liq, ammo vizual iyerarxiyani va ushbu asosiy o'lchamning sarlavhalar va sarlavhalardan qanday farq qilishini yodda tutish kerak (ya'ni h1>, h2>, h3>).

O'zingiz tanlagan UI dizayn vositasi yordamida (biz InVision Studio-dan foydalanamiz), bir qator matn qatlamlarini yarating (T) va keyin barcha o'lchamlarni quyidagi shablon bilan mos keladigan qilib sozlang:

• h1>: 44px
• h2>: 33 piksel
• h3>: 22px
• p>: 18 piksel

InVision Studio (va boshqa barcha interfeyslarni loyihalash vositalari) yordamida bu uslubni o'ng tarafdagi Inspektor paneli yordamida sozlash orqali amalga oshiriladi.

Keyin shriftingizni tanlang, lekin ehtiyot bo'ling, chunki ba'zi shriftlar bilan ko'rish mumkin bo'lgan narsa 18px p> va 22px h3> hammasi boshqacha ko'rinmaydi. Bizda ikkita tanlov mavjud: shrift o'lchamlarini o'zgartirish yoki sarlavhalar uchun boshqa shriftni ko'rib chiqish. Agar sizning dizayningiz matnni og'ir bo'lishini taxmin qilsangiz, ikkinchisiga o'ting.

Shuni yodda tuting:

• Vizual foydalanuvchi interfeysi dizayni ko'pincha ichakni his qilish usulidir
• Hech narsa qaror qilinmaydi; hamma narsa o'zgarishi mumkin

Chiziq balandligi

Optimal satr balandligi, o'qish darajasining yaxshi darajasiga erishish uchun matn satrlari orasidagi masofa etarli bo'lishini ta'minlaydi. Bu tobora ko'proq "standart" sifatida tan olinmoqda; Google-ning Lighthouse Audit vositasi buni hatto qo'lda tekshirish (hatto matnda satrning balandligi balandligi natijasida bir-biriga juda yaqin bo'lishi mumkin bo'lgan havolalar mavjud bo'lsa ham bayroq) sifatida taklif qiladi.

WCAG bizga yana bir bor yordam beradi va chiziq balandliklari shrift o'lchamidan 1,5 baravar bo'lishi kerakligini e'lon qiladi. Shunday qilib, "Line" (yoki shunga o'xshash) ostidagi interfeyslarni loyihalash vositasida shrift o'lchamini kamida - 1,5 ga ko'paytiring. Masalan, asosiy matn 18px bo'lsa, satr balandligi 27px (18 * 1,5 - matematik operatsiyani to'g'ridan-to'g'ri Inspektorda bajarishingiz mumkin) bo'ladi. Shunga qaramay, esda tuting - agar 1.6x o'zini yaxshi his qilsa, 1.6x dan foydalaning. Shuni esda tutingki, har xil shriftlar har xil natijalarni beradi.

Dizaynimizda haqiqiy ma'lumotlardan foydalanish haqida o'ylashga hali erta, ammo, hech bo'lmaganda, biz hali ham biron bir realistik ma'lumotlardan foydalanishimiz kerak (hatto lorem ipsum). InVision Studio bizning tipografiyamiz aslida qanday ko'rinishini ko'rishimizga yordam beradigan mahalliy haqiqiy ma'lumot dasturiga ega.

Paragraf oralig'i

Paragraf oralig'i biz InVision Studio's Inspector yordamida e'lon qilishimiz mumkin bo'lgan uslub emas. Buning o'rniga biz aqlli qo'llanmalar (⌥) yordamida qatlamlarni qo'lda tekislashimiz kerak bo'ladi. Chiziq balandligiga o'xshash sehrli multiplikator 2x (shriftning ikki baravar kattaligi). Masalan, shrift hajmi 18px bo'lsa, keyingi matn blokiga o'tishdan oldin kamida 36px bo'sh joy bo'lishi kerak. Harflar oralig'i kamida 0,12 bo'lishi kerak.

Biroq, biz tarkibiy qismlarni yaratishni boshlamagunimizcha, bu haqda tashvishlanishimiz shart emas.

Umumiy uslublar

Agar sizning UI dizayn vositangiz uni qo'llab-quvvatlasa (InVision Studio hali qo'llab-quvvatlamagan bo'lsa), ushbu tipografik uslublarni tezkor ravishda qayta ishlashga imkon berish uchun ularni "Umumiy uslublar" ga aylantirish haqida o'ylang. Bu odatda Inspektor orqali amalga oshiriladi.

02. To'g'ri palitrani tanlang

Dizayningiz uchun mukammal ranglarni tanlash estetikadan tashqariga chiqadi: bu sizning saytingizning barcha ierarxiyasini xabardor qilishi mumkin.

UI dizayni haqida gap ketganda, rang odatdagidek biz bilan suhbatlashishni yoqtiradigan narsalardan biridir, ammo biz to'g'ridan-to'g'ri vizual dizaynga sho'ng'ish yomon narsa deb o'rgatamiz. Bu, albatta, to'g'ri, ammo vizual muvofiqlik haqida gap ketganda, rang eng muhim muammo bo'lishi kerak, chunki u boshqa rollarni o'ynaydi.

UI dizaynidagi rang juda samarali bo'lishi mumkin, ammo ba'zi foydalanuvchilar (ko'pchilik, aslida) turli xil ko'rish qobiliyatlari bilan og'riganligi sababli, bu har doim ham ishonchli emas. Aytish joizki, bu ishlatilayotgan o'ziga xos rang haqida emas, balki rang turi haqida emas. Brendlash haqida gap ketganda, bu to'g'ri bo'lmasligi mumkin, chunki rang bu borada hissiy ta'sir o'tkazish uchun ishlatiladi, lekin UI dizaynida rang, shuningdek, niyat, ma'no va, albatta, vizual iyerarxiyani etkazish uchun ishlatiladi.

01. Stark
Stark plagini Sketch va Adobe XD bilan mos keladi va rang kontrastini tekshirishda va rang ko'rligini to'g'ridan-to'g'ri tuvaldan taqlid qilishga yordam beradi. Figma va InVision Studio-ni qo'llab-quvvatlash juda yaqin orada.
02.Ranglar
Ranglar - bu WCAG 2.0 yo'riqnomasini qondirish uchun tegishli miqdordagi rang kontrastiga ega bo'lgan 90 ta rang kombinatsiyasining to'plami, ularning ba'zilari hatto AAA standartiga javob beradi.
03. A11y loyihasi
A11y loyihasi barcha qulayliklarga oid ulkan markazdir. U resurslar, vositalar, maslahatlar, o'quv qo'llanmalarni o'z ichiga oladi va Stark plaginini ishlab chiqaruvchisi tomonidan yaratilgan va InVision-dan mablag 'oladi.

Rangning uch turi

Ranglar ma'nosini anglatadi, shuning uchun ularning ko'pligi yo'qligi muhimdir. Ko'p sonli ma'nolar foydalanuvchi tushunishi va eslashi kerak bo'lgan ko'proq narsalarga olib keladi - biz tashvishlanishimiz uchun ko'proq ranglarning kombinatsiyasi haqida gapirmaslik kerak. Umuman olganda, bu tavsiya etilgan format bo'ladi:

• Harakat qilishga chaqiruvchi rang (shuningdek, asosiy tovar rangi)
• Neytral quyuq rang (foydalanuvchi interfeysi elementlari yoki qorong'i rejim uchun yaxshiroq)
• Yuqorida aytilganlarning barchasi uchun biroz engilroq va quyuqroq o'zgarish

Bu quyidagilarga imkon beradi:

• Qorong'i rejimga osongina erishish mumkin bo'ladi
• Bizning CTA rangimiz hech qachon boshqa ranglarga zid bo'lmaydi
• Har qanday stsenariyda biz ta'kidlashimiz va ta'kidlashimiz mumkin

Paletangizni sozlang

O'zingizning foydalanuvchi interfeysi dizayni vositasi bilan har bir rang uchun ("Tovar", "Neytral / Yorug'lik" va "Neytral / To'q" deb nomlangan) juda katta hajmdagi artboard (A teging) yarating. Keyin, har bir artboardda rangning quyuqroq va engilroq o'zgarishini va boshqa ranglarning o'zlarini aks ettiradigan qo'shimcha kichik to'rtburchaklar yarating.

Biz bir oz engilroq va to'qroq ranglarni mos ravishda 10 foiz qo'shimcha oq va 10 foiz qo'shimcha qora deb hisoblaymiz. Tugatgandan so'ng, har bir artboardda tipografik uslublarning nusxasini ko'rsating. Ushbu matn qatlamlarining rangi neytral nurli bo'lishi kerak, faqat neytral qorong'i bo'lishi kerak bo'lgan neytral yorug'lik bortida.

Kontrast

Keyin ranglarimizni optimal rang kontrasti uchun tekshirishimiz kerak bo'ladi. Buni amalga oshiradigan turli xil vositalar mavjud, masalan, Sketch va Adobe XD uchun Stark plaginlari yoki macOS uchun Contrast - ammo Contrast Checker yoki Color Contrast Checker kabi onlayn echim juda yaxshi ishlaydi.

Har bir kombinatsiya uchun rang kontrastini tekshiring va ranglarni mos ravishda o'zgartiring. Qaysi ranglardan foydalanishni bilmasangiz, Color Safe tavsiyalaridan foydalanishga harakat qiling.

03. Uslublar va tugmalar

Hajmi

Tugmalar va havolalar, xuddi tipografiya singari, bir nechta farqlarga ega bo'lishi kerak. Axir, barcha harakatlar bir xil ahamiyatga ega emas va biz ilgari muhokama qilganimizdek, rang ishonchsiz aloqa usuli hisoblanadi, shuning uchun u vizual ierarxiyaga ta'sir ko'rsatishning asosiy usuli bo'lishi mumkin emas. Shuningdek, biz o'lcham bilan o'yinchoq qilishimiz kerak.

Vizual muvofiqlik testi - bu maqsad maqsadlari bosilishi mumkin bo'lganligini aniqlash uchun ishlatiladigan qulaylik testi. Dizaynni Studio-dan Freehand-ga sinxronlashtiring (.F), natijada olingan URL manzilini sinovchilarga yuboring va ularni bosish mumkin deb hisoblagan elementlarni aylantirib qo'ying.

InVision Studio-dan tashqari foydalanuvchilar ham Freehand-dan foydalanishlari mumkin, ammo InVision Studio foydalanuvchilari o'z dizaynlarini FreeHand-ga InVision Studio-dan uzluksiz boshlashlari mumkin, bu foydalanuvchilarning vizual mulohazalarini olishning eng tezkor va eng samarali usuli.

Odatda, biz tugma matnini 18px (asosiy matn bilan bir xil) deb e'lon qilishni tavsiya etamiz, lekin tugmachalarning o'lchamlari uchta o'zgarishga ega:

• Oddiy: Balandligi 44px (yumaloq burchaklari: 5px)
• Katta: Balandligi 54 piksel (yumaloq burchaklar: 10 piksel)
• Juda katta: 64px balandlikda (yumaloq burchaklar: 15px)

Bu bizga ma'lum tugmachalarni rangga bog'liq bo'lmasdan muhimroq qilib ko'rsatishga imkon beradi, shuningdek, tugmachalarni joylashtirish uchun (masalan, minimal ko'rinishga ega shakl maydonidagi tugmachadan foydalaning).

Chuqurlik

Kran nishonchasi tugma yoki shakl maydoni bo'lishidan qat'i nazar, soyalarni chuqurlikni oshirish uchun ishlatish kerak va shuning uchun interaktivlikni taklif qilish kerak. Tugmalar va shakl maydonlarining barcha variantlari uchun bitta soya uslubi yaxshi.

Interaktivlik

Har bir tugma turi uning holatini ko'rsatish uchun o'zgarishga muhtoj. Bu foydalanuvchiga ular qilmoqchi bo'lgan narsalar juda yaxshi ekanligini tushuntiradi va ularni kechiktirmasdan bajarilishini ta'minlaydi.

Bu, aslida, vizual izchillikni saqlashning murakkab jihatlaridan biridir, chunki holat ko'pincha davlat yaratishda rang o'zgarishi mumkin. Yaxshiyamki, bu holat o'zgarishlari nisbatan nozik bo'lishi mumkin, shuning uchun rangni biroz engilroq yoki quyuqroq rangga almashtirish juda yaxshi - bu ular uchun kerak. Bu havolalarga ham tegishli.

Bunga qarshi qaror qabul qilish bizni allaqachon muhim ma'noga ega bo'lgan rangdan foydalanishga olib keladi, natijada foydalanuvchilar chalkashib ketishadi yoki boshqa rangni tanlashga qaror qilishadi. Ikkilamchi rangdan foydalanishga qaror qilish juda yaxshi, lekin u foydalanuvchi interfeysi elementlari o'rniga marketing ingl. Kamroq ko'p (va osonroq).

Ushbu qadamni har bir artboard uchun takrorlashni unutmang. Brend artboardiga markali CTA tugmachalarini qo'shmang - keyinchalik ma'lum kombinatsiyalar ishlamay qolganda nima bo'lishini ko'rib chiqamiz.

04. Komponentlaringizni yarating

Komponentlar vaqtni tejashga imkon beradi va barcha interfeyslarni loyihalash vositalari ushbu funktsiyani taklif qiladi (masalan, Sketch-da ular Symbols deb nomlanadi). Studio'da biz komponentni yaratishi kerak bo'lgan barcha qatlamlarni tanlab va ⌘ yordamida komponentlar yaratishimiz mumkinK yorliq.

Komponentlardan foydalanish

Simli kadrlar nafaqat yuqori qulaylikdagi interfeyslarni loyihalashtirish uchun, balki uzoq vaqt davomida bizning interfeysimiz nimani talab qilishini bilish uchun ham juda foydali. Bu kelajakni tasdiqlash kabi.

Bu biz ko'plab tarkibiy qismlarni loyihalashtirishimiz yoki har qanday mumkin bo'lgan stsenariyga tayyor bo'lishimiz kerak degani emas, lekin biz "Nima bo'lsa?" Munosabatini ishga solishimiz kerakligini anglatadi.

Masalan, agar bizning simli ramkamiz 3x1 komponentni talab qilsa-da, lekin uning mazmuni toshga o'rnatilmaganligini bilsak, biroz tafakkur qilish bizni hayratga solishi mumkin: 'Agar bu komponentlar 4x1 bilan tugasa nima bo'ladi?'. Bosh barmoq qoidasi: dizayn faqat foydalanuvchi uchun allaqachon mavjud bo'lgan ehtiyojlar uchun mo'ljallangan, ammo echimlarni nisbatan moslashuvchan qilishga harakat qiling. Aks holda, biz keyinchalik "dizayn qarzlari" bilan juda tartibsizlikni boshlaymiz.

Endi biz ushbu komponentni chap tomondagi kutubxonalar> Hujjat sahifasidagi tuvalga sudrab olib, qayta ishlata olamiz, ammo ushbu ish oqimi sizning UI vositangizga qarab farq qilishi mumkinligini yodda tuting.

Uslubiy qo'llanmalarni yaratishning bu usuli (va natijada dizaynni o'zi yaratish) modulli / kartochkalarga asoslangan sxemalar bilan juda yaxshi ishlaydi, ammo sarlavhalar, altbilgilar va navigatsiyalar kabi "umumiy joylar" ham komponent uchun juda yaxshi nomzodlardir.

Bizning tipografik uslublarimiz, ranglarimiz va tugmachalarimiz bilan shug'ullanganimiz kabi, biz ham tarkibiy qismlarni ehtiyotkorlik bilan tartibga solishni unutmasligimiz kerak.

Bizning qoidalarimizdan foydalanish

Ilgari biz markali CTA tugmachalarini tovar rangining yuqori qismida ishlatmaslik haqida eslatma bergan edik, chunki markali CTA tugmachalari hamma narsadan ajralib turishi kerak. Xo'sh, markali CTA tugmachasini ishlatishda qanday qilib markali komponentni yaratish haqida gaplashamiz? Axir, agar biz neytral qorong'i tugmachalardan foydalansak, aytaylik, navigatsiya tugmachalari yoki shunchaki ahamiyatsiz tugmachalar, bu shunchaki imkoniyat bo'lmaydi, to'g'rimi?

To'g'ri. Shunday qilib, bu komponent yaratish uchun ideal imkoniyat bo'ladi - xususan, sarlavha + matn + tugmalar birikmasi. Brendli tugmachadan foydalanish uchun neytral nurli "karta" fonini qanday yaratganimga e'tibor bering. Xuddi shu tarzda, neytral nurli maydon (shakl maydonlari odatda oq rangga ega, chunki aqliy model tarixiy jihatdan qog'oz shakllari bilan sinonimga ega) neytral yorug'lik fonida hayratlanarli ko'rinmaydi, shuning uchun ular faqat neytral qorong'i fonda ishlatilishi mumkin - to'g'ridan-to'g'ri yoki ichida neytral qorong'i komponent. Bizning qoidalarimizga rioya qilish va izchillikni saqlash bilan biz o'z dizaynimizni moslashuvchan qilamiz.

Stress sinovlari

Ideal holda, bizning dizaynimizdagi mustahkamlikni ta'minlashning eng tezkor va eng samarali usuli bu stressni sinab ko'rishdir. Dizaynni sinovdan o'tkazish shafqatsiz bo'lishni anglatadi. Aytaylik, biz X miqdoridagi nav elementlari bilan navigatsiyamiz bor, chunki bu talab edi; haqiqatan ham egiluvchanlikni ta'minlash uchun ko'proq nav elementlarini qo'shish orqali ushbu talablarni o'zgartirishga urinib ko'ring yoki ishlarga kalitni tashlab qo'yish uchun boshqalarga qaraganda vizual ierarxiyasi yuqori bo'lgan nav elementini qo'shib ko'ring. Bizning o'lchamimiz, tipografiya va rang qoidalarimiz bunga o'xshash narsalarga imkon beradimi? Yoki maqbul foydalanishni taklif qilish uchun yana bir qoida kerakmi?

Qoidalarni qo'shish va qoidalarni egish o'rtasida farq borligini yodda tuting. Ko'proq chekka holatlar kamroq barqarorlikni anglatadi, shuning uchun ko'pincha komponentni qayta ko'rib chiqish qulayligi uchun yaxshiroqdir.

05. Hujjatlashing va hamkorlik qiling

Dizayn fayllarini o'zimiz uchun ham, dizayn faylidan foydalanishi mumkin bo'lgan boshqa dizaynerlar uchun ham foydalanishni qanday osonlashtiramiz? Ularni ishonchli, umumiy bulutli saqlash joylarida xavfsiz saqlash muhim, buni siz bilib olasiz.

Ranglar

Birinchi qadam, agar biz hali bajarmagan bo'lsak, barcha hujjatlarni "Hujjat ranglari" rangiga saqlashimiz kerak - bu ularni dizaynimizda qo'llashimiz kerak bo'lganda ularga kirishni osonlashtiradi.Buning uchun Inspector-dan rang tanlovchi vidjetni oching, ochiladigan oynadan "Hujjat ranglari" -ni tanlang va rangni rangga qo'shish uchun + belgisini bosing. Ko'pgina UI vositalarida xuddi shu tarzda ishlaydi.

Umumiy kutubxonalar

Keyinchalik, biz hujjatimizni - tipografik uslublar, ranglar, tugmalar, umumiy maydonlar va asosiy komponentlar bilan to'liq birgalikda kutubxonaga aylantirishimiz kerak.

Aslida bu shuni anglatadiki, har bir element, hatto bitta qatlamdan iborat bo'lsa ham, tarkibiy qism bo'lishi kerak. Chap tomondagi kutubxonalar panelidagi + ‌ tugmasini bosing va shu hujjatni yangi hujjatga import qiling. To'g'ri: bizning hujjatimiz endi kutubxonadir va foydalanuvchi interfeyslarini kafolatlangan izchillik bilan loyihalashda foydalanishga tayyor.

InVision Studio hali InVision-ning rasmiy Dizayn Tizimi menejeri vositasi bilan sinxronlashtirilmasligi ma'nosida biroz cheklangan, ammo vaqt o'tishi bilan boshqa dizaynerlar foydalanishi va yangilanishi uchun kutubxonani Dropbox-da joylashtirish oson. O'zgarish kiritilganda (mahalliy yoki masofadan turib) kutubxonadan foydalanadigan har bir Studio fayli (yana, mahalliy yoki masofadan turib) ranglar va tarkibiy qismlarni yangilashni xohlaysizmi, deb so'raydi. Jamoa bo'ylab dizayn kutubxonalari shunday saqlanadi.

Vizual jihatdan mos keladigan foydalanuvchi interfeyslarini loyihalash haqida gap ketganda, hamma narsani qayta ishlating. Dizayn tugmachalari, keyin tugma komponentlarini yaratish uchun tugmalardan foydalaning, so'ngra foydalaning
ogohlantirishlar va dialog oynalari kabi boshqa komponentlarni yaratish uchun tugma komponentlari.

Faqat kerak bo'lmagan qismlarni yaratmang. Yodingizda bo'lsin, kutubxona qurish - bu doimiy, birgalikdagi harakatdir. Buni birdaniga bajarish kerak emas, faqat siz o'zingiz bajarasiz yoki hech qachon tugatmaysiz. Bu faqat tilni etkazishi kerak.

Dizayn miqyosida

Dizayn kengaygan sari uni boshqarish qiyinlashadi. Uni samarali va saqlanib qolish uchun turli xil tuzatishlar qilishimiz mumkin, ayniqsa InVision-ning DSM hali Studio bilan ishlamaydi.

Masalan, biz turli xil elementlarning holatlarini tushuntirish vositasi sifatida kutubxonamizga izoh berish uchun matn qatlamlaridan foydalanishni xohlashimiz mumkin. Tipografik uslublar uchun biz matnni yanada aniqroq qilib tahrirlashimiz mumkin (masalan, "h1> / 1.3 / 44px"). Bu shunday deydi h1>s 44px bo'lishi kerak va chiziq balandligi 1,3 ga teng.

Dizayn Handoff

Dizaynni o'chirish vositalari ishlab chiquvchilar dastur yoki veb-saytni yaratishi uchun dizayndagi har bir element tomonidan ishlatiladigan turli xil uslublarni aks ettiradi. Ushbu vositalar uslublarning umumiy ko'rinishini va shuningdek, "hujjat ranglari" namunasining nusxasini o'z ichiga oladi. Ishlab chiquvchilar hatto ushbu uslublarni kod sifatida nusxalashlari mumkin, agar siz har qanday yozma dizayn hujjatlarini yaratishga qaror qilgan bo'lsangiz va komponentlarning kod parchalarini ko'rsatishni xohlasangiz juda yaxshi.

Agar veb-saytdagi muammolarni bartaraf etish va boshqarish haqida tashvishlansangiz, to'g'ri veb-xosting xizmatiga ega ekanligingizga ishonch hosil qiling, ammo sizning dizayn tizimingiz uchun InVision-ning dizaynni uzatish vositasi Inspect-dan foydalanish kerak. Undan foydalanish uchun InVision Studio-da "InVision-ga nashr etish" tugmachasini / belgisini bosamiz, natijada URL manzilini ochamiz va keyin Inspect rejimiga o'tish uchun bosing. Bu haqiqatan ham qulay.

Ushbu tarkib dastlab net jurnalida paydo bo'ldi.