Пайдалануучунун интерфейсин иштеп чыгуу боюнча акыркы колдонмо

Мазмун

• 01. Типографияңызды тандаңыз
• 02. Оң палитраны тандаңыз
• 03. Style шилтемелери жана баскычтары
• 04. Компоненттериңизди түзүңүз
• 05. Документ түзүү жана кызматташуу

Колдонуучунун интерфейсинин дизайны деген эмне? Андан да жакшы суроо болмок, колдонуучу интерфейсинин дизайнына эмнелер кирет? Эстетика? Usability? Жеткиликтүүлүк? Алардын баары? Колдонуучунун оптималдуу тажрыйбасын камсыз кылуу үчүн ушул факторлордун бардыгы кантип биригишет жана биринчи орунда турушу керек?

Жеткиликтүүлүк ар дайым биринчи орунга коюлуп, оптималдуу колдонуунун пайдубалын түптөшү керек (мыкты веб-сайт куруучусун колдонуу бул жерде жардам берет). Андан кийин, колдонуучу интерфейси жеткиликтүү жана колдонууга жарактуу болгондо, ал эстетикалык жактан татыктуу көрүнүшү керек (интерфейсти иштеп чыгуу инструменттери бул жерде жардам берет). Андан кийин, сиздин дизайныңыздын бардык деңгээлде иштешине ынануу үчүн, аны кылдаттык менен текшерип көрүшүңүз керек, муну колдонуучунун мыкты тестирлөө шаймандарын тандоо менен жасай аласыз. Көпчүлүк үлгүлөрдүн фундаменталдык элементтерин жана визуалдык ырааттуулукту камсыз кылуу үчүн эмне кылса болорун карап көрөлү.

01. Типографияңызды тандаңыз

Мыкты типография (дизайндын көптөгөн аспектилери сыяктуу) жеткиликтүүлүккө чейин кайнайт. Визуалдык дизайн колдонуучунун жалпы тажрыйбасын толуктайт, бирок күндүн аягында колдонуучулар интерфейсти колдонушат, аны көркөм деп эсептешпейт. Түшүнүктүү тамгалар ачык-айкындуулукка алып келет жана окулуучу сөздөр колдонуучуларга мазмунду натыйжалуу сиңирүүгө жардам берет. Экөө тең ар кандай визуалдык эстетикадан маанилүү.

Бирок, жакшы иштелип чыккан типография дагы деле эстетикалык жактан канааттандыра алат. Ак-кара Helvetica (же ага окшош шрифт) бир нече жөнөкөй типографиялык өркүндөтүүлөрдөн кийин сулуулукка айланат. Өркүндөтүү деп шрифттин көлөмүн, саптын бийиктигин, тамгалардын аралыгын жана башка нерселерди өзгөртөбүз - тексттин шрифти же түсү эмес.

'Beautiful' типографиясы, чындыгында, окулбай калганда чиркин, анткени көңүл калуу ар дайым эстетиканы жеңип чыгат. Улуу дизайн салмактуу жана гармониялуу.

Интерфейстин дизайнынын көптөгөн аспектилери сыяктуу эле, жеткиликтүүлүктү жана эстетиканы тең салмакташтыруу үчүн визуалдык сүрөттөрдү так жөндөө оңой эмес. Маселе бүтүндөй дизайн боюнча ырааттуулукту сактоо. Ырааттуулук ар кандай маанидеги элементтердин ортосунда так иерархияны орнотот, бул өз кезегинде колдонуучуларга интерфейсти тезирээк түшүнүүгө жана ал тургай, мазмунду натыйжалуу сиңирүүгө жардам берет.

WCAG 2.0 Веб-Мазмундун Жеткиликтүүлүгү боюнча колдонмодо аныкталган минималдуу алфавиттин көлөмү окумдуулук жана окумдуулук жөнүндө сөз болгондо, 18pt (же 14pt тайманбастык менен) болуп саналат. Шрифттин мыкты көлөмү көбүнчө шрифттин өзүнөн көз каранды, бирок визуалдык иерархияга көңүл буруп, анын көлөмү кыскача жана аталыштардан кандайча айырмаланат (б.а.) h1>, h2>, h3>).

Колдонуучу UI дизайны куралы менен (InVision Studio колдонобуз), текст катмарларынын катарларын түзүңүз (Т) андан кийин бардык шаблондорду төмөнкү шаблон менен корреляциялоо үчүн тууралаңыз:

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

InVision Studio (жана башка бардык UI дизайн куралдары) менен, бул оң жактагы Inspector панелин колдонуп стилдерди тууралоо жолу менен жүзөгө ашырылат.

Кийинки арипти тандаңыз, бирок сак болуңуз, анткени айрым шрифттер менен байкасаңыз, ал 18px p> жана 22px h3> баары башкача көрүнбөйт. Бизде эки тандоо бар: шрифттин көлөмүн кичирейтүү же аталыштар үчүн башка арипти карап чыгуу. Эгер сиздин дизайныңыз тексттин оордугун күтсөңүз, экинчисине өтүңүз.

Эсиңизде болсун:

• Visual UI дизайны көбүнчө ичегини сезген ыкма
• Эч нерсе чечилбейт; бардыгы өзгөрүшү мүмкүн

Саптын бийиктиги

Оптималдуу сап бийиктиги тексттин саптарынын окулушунун татыктуу деңгээлине жетүү үчүн алардын ортосунда жетиштүү аралыкты камсыз кылат. Бул барган сайын "стандарт" катары таанылып жатат; Google'дун Маяк Аудит инструменти аны кол менен текшерүү (же тексттин саптын оптималдуу бийиктигинин натыйжасында бири-бирине өтө жакын шилтемелерди камтыса, желек) катары сунуштайт.

WCAG бизге дагы бир жолу жардам берет, сызыктын бийиктиги 1,5 эсе шрифт өлчөмүндө болушу керек деп. Демек, 'Line' (же ага окшош) астындагы UI дизайн куралыңызда, ариптин көлөмүн жок дегенде 1,5ке көбөйтүңүз. Мисал катары, негизги текст 18px болсо, анда саптын бийиктиги 27px болмок (18 * 1,5 - математиканы түздөн-түз инспектордо жүргүзсөңүз болот). Дагы бир жолу, эсиңизде болсун - эгер 1.6x өзүңүздү жакшыраак сезсе, анда 1.6x колдонуңуз. Ар кандай шрифттер ар кандай натыйжаларды бере тургандыгын унутпаңыз.

Дизайнда чыныгы маалыматтарды колдонуу жөнүндө ойлонууга эрте, бирок, жок дегенде, бир аз реалдуу маалыматтарды (ал тургай lorem ipsum) колдонушубуз керек. InVision студиясында типографиябыздын чындыгында кандай болушу мүмкүн экендигин билүүгө жардам берүүчү жергиликтүү чыныгы маалымат колдонмосу бар.

Параграфтардын аралыгы

Параграф аралык интервал - бул биз InVision Studio's Inspector колдонуп жарыялай турган стиль эмес. Анын ордуна, Акылдуу колдонмолорду (⌥) колдонуп катмарларды кол менен тегиздөөбүз керек. Сызыктын бийиктигине окшош сыйкырдуу көбөйткүч 2х (ариптин эки эсе чоңдугу). Мисал катары, эгер ариптин көлөмү 18px болсо, анда кийинки тексттик блокко өтөөрдөн мурун, жок дегенде, 36px мейкиндик болушу керек. Тамгалардын аралыгы кеминде 0,12 болушу керек.

Бирок, биз компоненттерди түзүп баштамайынча, бул жөнүндө тынчсыздануунун кажети жок.

Жалпы стилдер

Эгер UI дизайн куралыңыз аны колдосо (InVision Studio азырынча жок), визуалдык ырааттуулукту камсыз кылуу менен, тез кайталап колдонуу үчүн, бул типографиялык стилдерди 'Бөлүшүлгөн стилдерге' айландырыңыз. Бул көбүнчө Инспектор аркылуу ишке ашат.

02. Оң палитраны тандаңыз

Дизайныңызга мыкты түстөрдү тандоо эстетикадан тышкары: ал сиздин сайтыңыздын бардык иерархиясын маалымдай алат.

Интерфейстин дизайны жөнүндө сөз болгондо, түс адатта эң алгачкылардан болуп бири-бирибизге жаккан нерселердин бири болуп саналат, бирок биз түз эле визуалдык дизайнга сүңгүү жаман нерсе деп үйрөтүп жатабыз. Бул, албетте, чындык, бирок визуалдык ырааттуулук жөнүндө сөз болгондо, түс башка көйгөйлөрдү жаратышы керек, анткени ал башка ролдорду ойнойт.

Интерфейстин дизайнындагы түстөр эффективдүү болушу мүмкүн, бирок кээ бир колдонуучулар (көпчүлүгү, чындыгында) визуалдык майыптыктын ар кандай түрлөрүнөн жапа чеккендиктен, ал дайыма эле ишенимдүү боло бербейт. Айткандай эле, сөзсүз түрдө колдонулуп жаткан белгилүү бир түстө эмес, түстүн түрүндө. Брендингге келгенде бул туура эмес болушу мүмкүн, анткени түс эмоционалдык таасир тийгизүү үчүн колдонулат, бирок интерфейстин дизайнында түс, ниет, маани жана, албетте, визуалдык иерархияны билдирүү үчүн колдонулат.

01. Stark
Stark плагини Sketch жана Adobe XD менен шайкеш келет жана түстөрдүн карама-каршылыгын текшерип, түздөн-түз холсттон окшоштурат. Жакында Figma жана InVision студияларын колдоо.
02.Түстөр
Түстөр - WCAG 2.0 Колдонмолорун канааттандыруу үчүн түстөрдүн карама-каршылыгына ылайыктуу болгон 90 түстүү айкалыштардын жыйындысы, алардын айрымдары AAA стандартына жооп берет.
03. A11y долбоору
A11y долбоору бул жеткиликтүүлүккө байланышкан бардык нерселер үчүн ири борбор. Ал ресурстарды, шаймандарды, кеңештерди, окуу куралдарын камтыйт жана Stark плагининин өндүрүүчүсү тарабынан түзүлөт жана InVision тарабынан каржыланат.

Түстүн үч түрү

Түстөр маанини туюнтат, ошондуктан алардын саны көп болбошу керек. Өтө көп маанилер колдонуучунун түшүнүшү жана эсинде сакташы керек болгон көп нерселерге алып келет - биз үчүн тынчсыздануу үчүн түстөрдүн айкалышы жөнүндө айтпаганда дагы. Жалпылап айтканда, бул сунуш кылынган формат болмок:

• Аракетке чакыруу түсү (ошондой эле негизги бренд түсү)
• Нейтралдуу кочкул түс (UI элементтери же күңүрт режим үчүн жакшы)
• Жогоруда айтылгандардын бардыгы үчүн бир аз жеңил жана күңүрт вариация

Бул төмөнкүлөрдү иштетет:

• Караңгы режимге оңой эле жетүүгө болот
• Биздин CTA түсү башка түстөр менен эч качан карама-каршы келбейт
• Кандай гана сценарий болбосун, биз баса белгилей алабыз

Палитраңызды жөндөңүз

Колдонуучу UI дизайн куралыңыз менен, ар бир түс үчүн бирден чоң көлөмдөгү ("А" баскычын) түзүңүз ("Бренд", "Бейтарап / Ачык" жана "Бейтарап / Караңгы" деп аталган). Андан кийин, ар бир артборддо кошумча кичинекей тик бурчтуктарды жасап, түстүн күңүрт жана ачык түстөрүн, ошондой эле башка түстөрдүн өзүн көрсөтүңүз.

Биз бир аз жеңил жана күңүрт болуп, тиешелүүлүгүнө жараша 10 пайызга кошумча ак жана 10 пайызга кошумча кара деп эсептейбиз. Бүткөндөн кийин, ар бир артбордо типографиялык стилдердин көчүрмөсүн көрсөтүңүз. Бул тексттик катмарлардын түсү нейтралдуу жарык болушу керек, бирок нейтралдуу ачык артбортто алар нейтралдуу караңгы болушу керек.

Контраст

Андан кийин түстөрдүн оптималдуу контрастын текшерип, түстөрүбүздү текшерип чыгышыбыз керек. Муну жасай турган ар кандай шаймандар бар, мисалы Sketch жана Adobe XD үчүн Stark плагини же MacOS үчүн Contrast - бирок, Контраст текшергич же Түс контрастын текшергич сыяктуу онлайн чечим жакшы иштейт.

Ар бир айкалыш үчүн түстөрдүн карама-каршылыгын текшериңиз жана түстөрдү ошого жараша өзгөртүңүз. Кандай түстөрдү колдоно тургандыгыңызды билбей жатсаңыз, Color Safe сунуштарын колдонуп көрүңүз.

03. Style шилтемелери жана баскычтары

Көлөм

Баскычтар жана шилтемелер, типография сыяктуу эле, бир нече вариацияга ээ болушу керек. Кантсе да, иш-аракеттердин бардыгы бирдей деңгээлде боло бербейт жана биз жогоруда талкуулагандай, түс байланыштын ишенимсиз ыкмасы болуп саналат, ошондуктан ал визуалдык иерархияга таасир этүүчү негизги ыкма боло албайт. Ошондой эле, биз көлөмү менен оюнчук керек.

Визуалдык аффформант тести - бул максаттуу баскычтар чыкылдатууга мүмкүн экендигин аныктоо үчүн колдонулуучу тест. Дизайнды Studio дан Freehandга шайкештириңиз (⌘⇧F), натыйжасында URL тестерге жөнөтүп, аларды чыкылдатууга болот деп эсептеген элементтерди тегеректеп туруңуз.

InVision студиясынын колдонуучулары Freehand программасын дагы колдоно алышат, бирок InVision Studio колдонуучулары өз дизайнын InVision Studioдон Freehand программасына үзгүлтүксүз киргизе алышат, бул колдонуучулардан визуалдык жооп алуунун эң тез жана натыйжалуу жолу.

Көбүнчө, баскычтын текстин 18px деп жарыялоону сунуштайбыз (негизги текст менен бирдей), бирок баскычтардын өзүлөрүнүн көлөмү үч вариацияга ээ:

• Нормалдуу: Бийиктиги 44px (тегеректелген бурчтары: 5px)
• Ири: Бийиктиги 54px (тегеректелген бурчтары: 10px)
• Өтө чоң: Бийиктиги 64px (тегеректелген бурчтары: 15px)

Бул бизге айрым баскычтардын түскө таянбастан маанилүү болуп көрүнүшү жана уя баскычтары үчүн мүмкүнчүлүк берет (мисалы, минималдуу форма талаасындагы баскычты колдонуңуз).

Тереңдиги

Кран максаттуу баскычы же форма талаасы экендигине карабастан, тереңдикти жогорулатуу үчүн көлөкөлөрдү колдонуу керек, ошондуктан интерактивдүүлүктү сунуштоо керек. Баскычтардын жана форма талааларынын бардык варианттары үчүн бирден-бир көлөкө стили жакшы.

Интерактивдүүлүк

Ар бир баскычтын түрүнө анын абалын көрсөтүү үчүн вариация керек. Бул колдонуучуга алардын жасаган аракеттеринин толугу менен жакшы экендигин жана алардын токтоосуз жүргүзүлүшүн камсыздайт.

Бул, чындыгында, визуалдык ырааттуулукту сактоонун бир кыйла татаал аспектилеринин бири, себеби, мамлекет көп учурда түзүлүп жатканда түс оңдолот. Бактыга жараша, бул абал өзгөрүүлөрү тымызын болушу мүмкүн, андыктан түстү бир аз жеңилирээк же күңүрт түстөгү вариациясына өзгөртүү жакшы - бул алар үчүн. Бул шилтемелерге да тиешелүү.

Буга каршы чечим кабыл алсак, же буга чейин олуттуу мааниге ээ болгон түстү колдонуп, колдонуучулардын башын айландырып, же башка түстү ойлоп табууну чечишет. Экинчи түстү колдонууну туура деп тапсаңыз болот, бирок аны интерфейс элементтерине эмес, маркетингдик визуалдык көрүнүштөргө сактоо керек. Азыраак көбүрөөк (жана жеңил).

Бул кадамды ар бир artboard үчүн кайталоону унутпаңыз. Бренд арттасына CTA фирмалык баскычтарын кошпогула - кийинчерээк айрым айкалыштар иштебей калганда эмне болоорун карап чыгабыз.

04. Компоненттериңизди түзүңүз

Компоненттер убакытты үнөмдөгөн жана интерфейстин дизайнынын бардык шаймандары ушул мүмкүнчүлүктү сунуш кылышат (мисалы, Sketchте, алар Symbols деп аталат). Студияда биз компоненттерди түзө турган катмарлардын бардыгын тандап, ⌘ аркылуу компоненттерди түзө алабызK жарлык.

Компоненттерди колдонуу

Wireframes колдонуучунун интерфейстерин иштеп чыгуу үчүн гана эмес, ошондой эле узак мөөнөттүү келечекте биздин UI эмнелерди талап кылаарын билүү үчүн да абдан пайдалуу. Бул келечекти текшерүү сыяктуу.

Бул биз көптөгөн компоненттерди иштеп чыгышыбыз же кандайдыр бир мүмкүн болгон сценарийге даяр болушубуз керек дегенди билдирбейт, бирок биз "Эмне болсо?" Мамилесин колдонушубуз керек дегенди билдирет.

Мисалы, эгер биздин зым карта 3x1 компонентин талап кылса, бирок анын мазмуну таш менен орнотулбагандыгын билсек, анда бир аз ойлонуп, бизди ойлонтушу мүмкүн: ’Бул компоненттер 4х1 болуп бүтсө эмне болот?’. Бармактын эрежеси: колдонуучунун буга чейин болгон муктаждыктары үчүн гана иштеп чыгуу, бирок чечимдерди салыштырмалуу ийкемдүү кылууга аракет кылуу. Болбосо, биз кийинчерээк сызыкка чейин өтө башаламан "дизайн карызын" башыбыздан өткөрөбүз.

Эми биз бул компонентти сол жагындагы Китепканалар> Документтен кенепке сүйрөө менен кайрадан колдонсок болот, бирок бул иш процесси UI куралыңызга жараша айырмаланышы мүмкүн.

Стилдик колдонмолорду түзүүнүн бул ыкмасы (жана акырында дизайндын өзүн өзү жаратат) модулдук / картага негизделген макеттер менен өзгөчө жакшы иштейт, бирок баш "колонтитулдар", "колонтитулдар" жана "навигациялар" сыяктуу "жалпы аймактар" да компоненттин мыкты талапкерлери болуп саналат.

Типографиялык стилдерибизди, түстөрүбүздү жана баскычтарыбызды жасагандай эле, компоненттерибизди кылдаттык менен уюштурууну унутпашыбыз керек.

Биздин эрежелерди колдонуу

Буга чейин биз бренд CTA баскычтарын бренд түсүнүн үстүнө колдонбоо жөнүндө эскертүү бергенбиз, анткени бренд CTA баскычтары башкалардан айырмаланып турушу керек. Ошентип, бренддик CTA баскычын колдоно албай жатып, фирмалык компонентти кантип түзөбүз? Кантсе да, биз нейтралдуу караңгы баскычтарды колдонуп жаткан болсок, анда, мисалы, навигациялык баскычтар же жөн эле анча маанилүү эмес баскычтар, бул жөн эле мүмкүнчүлүк болмок эмес, туурабы?

Туура. Демек, бул компонентти түзүү үчүн эң сонун мүмкүнчүлүк болмок - тактап айтканда, аталышы + текст + баскычы айкалышы. Фирмалык баскычты колдонууга мүмкүнчүлүк берүү үчүн, мен нейтралдуу жарык 'карта' көшөгөсүн кантип жаратканыма көңүл буруңуз. Ошо сыяктуу эле, нейтралдуу жарык формасы (форма талаалары, адатта, кагаз формаларына окшош болгон менталдык моделге байланыштуу ак түстө) бейтарап жарык фонунда таң калыштуу көрүнбөйт, ошондуктан алар нейтралдуу караңгы фондо гана колдонулушу мүмкүн - түздөн-түз же ичинде нейтралдуу караңгы компонент. Биздин эрежелерибизге баш ийип, ырааттуулукту сактоо менен биз дизайнды ийкемдүү кылабыз.

Стресс-тестирлөө

Идеалында, биздин дизайндагы бекемдикти камсыздоонун тез жана эффективдүү жолу - аны стресстен тестирлөө. Дизайнды сынап көрүү - таш боордукту билдирет. Мындай талап болгон, анткени бизде X өлчөмүндөгү нав элементтери бар навигация бар деп коёлу; чындыгында ийкемдүүлүктү камсыз кылуу үчүн, бул талаптарды көбүрөөк nav элементтерин кошуу менен өзгөртүп көрүңүз же чыгармаларга штанганы ыргытып жиберүү үчүн, башкаларга караганда визуалдык иерархиясы жогору болгон nav элементин кошуп көрүңүз. Биздин көлөмүбүз, типографиябыз жана түс эрежелерибиз ушундай нерсеге жол береби? Же оптималдуу колдонууну сунушташ үчүн дагы бир эреже керекпи?

Эрежелерди кошуу менен эрежелерди бүгүүнүн ортосунда айырма бар экендигин эсиңизден чыгарбаңыз. Көпчүлүк учурлар азыраак ырааттуулукту билдирет, ошондуктан көпчүлүк учурда компонентти кайра карап чыгуу ыңгайлуулугу үчүн жакшы болот.

05. Документ түзүү жана кызматташуу

Дизайн файлдарыбызды өзүбүзгө дагы, дизайн файлын колдоно турган башка дизайнерлерге дагы колдонууну жеңилдетсек кандай болот? Ооба, аларды ишенимдүү, жалпы булут сактагычта коопсуз сактоо сиз билгенден кийин маанилүү.

Түстөр

Биринчи кадам, эгерде биз буга чейин жасай элек болсок, анда бардык түстөрдү 'Document Colors' үлгүсүнө сактап калуу керек - бул аларды иштеп чыгууда колдонушубуз керек болгондо, алардын жеткиликтүүлүгүн жеңилдетет.Бул үчүн, Инспектордон түстөрдү тандоочу виджетти ачып, ачылуучу жерден 'Документ Түстөрүн' тандап, андан кийин + сүрөтчөсүнө түстү кошуу үчүн + сүрөтчөсүн басыңыз. Көпчүлүк UI шаймандарында ушундай эле жол менен иштейт.

Жалпы китепканалар

Андан кийин, биздин документти типографиялык стилдер, түстөр, баскычтар, жалпы чөйрөлөр жана негизги компоненттер менен толук - жалпы китепканага айландыруу керек.

Чындыгында, бул бир гана катмардан турса дагы, ар бир элемент компонент болушу керек дегенди билдирет. Сол жактагы Китепканалар капталындагы + ‌ баскычын чыкылдатып, ушул документти жаңы документке импорттоп алыңыз. Туура: биздин документ азыр китепкана болуп саналат жана кепилденген ырааттуулукта интерфейстерди иштеп чыгуу үчүн колдонууга даяр.

InVision студиясы InVisionдин Дизайн Системасы Менеджеринин расмий куралы менен шайкештештирилбейт деген мааниде бир аз чектелген, бирок убакыттын өтүшү менен башка дизайнерлердин колдонушу жана жаңыртуусу үчүн Dropbox китепканасын жайгаштыруу жетиштүү. Өзгөртүү киргизилгенде (жергиликтүү же алыстан), китепкананы колдонгон ар бир Studio файлы (кайрадан, жергиликтүү же алыстан) түстөрдү жана компоненттерди жаңырткыңыз келеби деп сурайт. Дизайн китепканалары командалар арасында ушундайча жүргүзүлөт.

Колдонуучунун интерфейстерин визуалдык ырааттуулукка ылайыкташтырууга келгенде, бардыгын кайрадан колдонуңуз. Дизайн баскычтары, андан кийин баскыч компоненттерин түзүү үчүн баскычтарды колдонуңуз, андан кийин колдонуңуз
баскыч компоненттери, башка эскертмелер жана диалогдор сыяктуу компоненттерди түзүү.

Кереги жок компоненттерди түзбө. Эсиңизде болсун, китепкана куруу - бул биргелешкен аракет. Аны бир эле учурда бүтүрүп, өзүңүз бүтүрүп же түбөлүккө бүтүрбөйсүз. Бул бир гана тилди жеткириши керек.

Дизайн масштабда

Дизайн кеңейген сайын аны башкаруу кыйын болуп калат. Натыйжалуу жана туруктуу иштей тургандай кылып оңдоону каалайбыз, айрыкча InVision’дин DSM азырынча Studio менен иштебей жатат.

Мисалы, ар кандай элементтердин колдонулушун түшүндүрүп берүү үчүн, китепканабызга түшүндүрмө берүү үчүн текст катмарларын колдонсок болот. Типографиялык стилдер үчүн биз текстти дагы сүрөттөмө кылып түзөтө алмакпыз (мис. "H1> / 1.3 / 44px"). Бул мындай дейт h1>с 44px жана сызыктын бийиктиги 1,3 болушу керек.

Design Handoff

Дизайнды өткөрүп берүү куралдары иштеп чыгуучулар колдонмону же вебсайтты курушу үчүн, дизайндагы ар бир элемент колдонгон ар кандай стилдерди чагылдырат. Бул куралдар стилдерге сереп салууну, ошондой эле 'документ түстөрүнүн' нускасынын көчүрмөсүн камтыйт. Иштеп чыгуучулар бул стилдерди код түрүндө көчүрүп алса болот, эгерде сиз кандайдыр бир жазуу жүзүндөгү дизайнердик документтерди түзүүнү чечкен болсоңуз жана курамдык бөлүктөрдүн код үзүндүлөрүн камтый турган болсоңуз, анда эң сонун болот.

Эгер сиз веб-сайттын мүчүлүштүктөрүн издөөгө жана башкарууга тынчсызданып жатсаңыз, анда туура веб-хостинг кызматын алганыңызга ынансаңыз, жардам берет, бирок сиздин дизайн системаңыз үчүн InVision компаниясынын дизайнын өткөрүп берүү куралы, текшерип көрүңүз. Аны колдонуу үчүн, InVision Studio'догу 'InVision'ге жарыялоо' баскычын / сүрөтчөсүн чыкылдатып, натыйжасында URL дарегин ачып, андан соң Текшерүү режимине өтүү үчүн таптап коёбуз. Бул чындыгында ыңгайлуу.

Бул мазмун алгач net журналында пайда болгон.