Канчатковае кіраўніцтва па дызайне карыстацкага інтэрфейсу

Задаволены

• 01. Выберыце тыпаграфіку
• 02. Падбярыце патрэбную палітру
• 03. Стыль спасылак і кнопак
• 04. Стварыце свае кампаненты
• 05. Дакументаваць і супрацоўнічаць

Што такое дызайн карыстацкага інтэрфейсу? Лепшым пытаннем было б, што на самой справе ўваходзіць у дызайн карыстацкага інтэрфейсу? Эстэтыка? Карыснасць? Даступнасць? Усе яны? Як усе гэтыя фактары аб'ядноўваюцца, каб забяспечыць аптымальны карыстацкі досвед і якія павінны быць на першым месцы?

Даступнасць заўсёды павінна быць на першым месцы, закладваючы асновы для аптымальнай зручнасці выкарыстання (тут дапаможа найлепшы канструктар сайтаў). І тады, калі карыстацкі інтэрфейс адначасова даступны і карысны, ён ужо павінен выглядаць даволі прыстойна з пункту гледжання эстэтыкі (тут дапамогуць інструменты дызайну карыстацкага інтэрфейсу). Тады, каб пераканацца, што ваш дызайн працуе на ўсіх узроўнях, вам трэба будзе яго старанна пратэставаць, што можна зрабіць з дапамогай нашага выбару лепшых інструментаў для тэставання карыстальнікаў. Давайце больш падрабязна разгледзім асноватворныя элементы большасці канструкцый і тое, што можна зрабіць, каб забяспечыць візуальную паслядоўнасць.

01. Выберыце тыпаграфіку

Вялікая тыпаграфіка (як і многія аспекты дызайну) зводзіцца да даступнасці. Візуальны дызайн, безумоўна, павялічвае агульны досвед карыстальніка, але ў рэшце рэшт карыстальнікі ўзаемадзейнічаюць з карыстацкім інтэрфейсам, не разглядаючы яго як мастацтва. Чытаемыя літары даюць яснасць, а чытабельныя словы дапамагаюць карыстальнікам эфектыўна пераварваць змест. І тое, і іншае важней за любую візуальную эстэтыку.

Аднак добра распрацаваная тыпаграфіка па-ранейшаму можа быць эстэтычна задавальняючай. Чорна-белы Helvetica (альбо падобны шрыфт) можа стаць прыгажосцю толькі пасля некалькіх простых тыпаграфскіх удасканаленняў. Пад удасканаленнем мы маем на ўвазе наладжванне памеру шрыфта, вышыні радкоў, інтэрвалу літар і гэтак далей - а не шрыфта ці колеру тэксту.

Тыпаграфіка "Прыгожая" на самай справе непрыгожая, калі яе немагчыма прачытаць, бо расчараванне заўсёды пераўзыходзіць эстэтыку. Выдатны дызайн збалансаваны і гарманічны.

Як і многія аспекты дызайну карыстацкага інтэрфейсу, дакладная наладка візуальных элементаў, каб збалансаваць даступнасць і эстэтыку, не з'яўляецца складанай задачай. Задача складаецца ў захаванні ўзгодненасці на працягу ўсяго дызайну. Паслядоўнасць усталёўвае выразную іерархію паміж элементамі рознай значнасці, што, у сваю чаргу, дапамагае карыстальнікам хутчэй разумець карыстацкі інтэрфейс і нават больш эфектыўна пераварваць змест.

Калі гаворка ідзе пра разборлівасць і чытальнасць, мінімальна дапушчальны памер шрыфта, вызначаны Кіраўніцтвам па даступнасці вэб-змесціва WCAG 2.0, складае 18pt (ці 14pt паўтлустым шрыфтам). Лепшы памер шрыфта для выкарыстання шмат у чым залежыць ад самога шрыфта, але важна памятаць пра візуальную іерархію і пра тое, як гэты базавы памер адрозніваецца ад зводкі і загалоўкаў (г.зн. h1>, h2>, h3>).

Выбраўшы інструмент дызайну карыстацкага інтэрфейсу (мы будзем выкарыстоўваць InVision Studio), стварыце шэраг тэкставых слаёў (Т.), а затым адкарэктуйце ўсе памеры, каб суаднесці іх з наступным шаблонам:

• h1>: 44 пікс
• h2>: 33px
• h3>: 22px
• p>: 18px

У InVision Studio (і ўсіх іншых інструментах дызайну карыстацкага інтэрфейсу) гэта робіцца шляхам карэкціроўкі стыляў з дапамогай панэлі Inspector справа.

Далей абярыце шрыфт, але будзьце асцярожныя, таму што некаторыя шрыфты могуць заўважыць, што гэта 18 пікселяў p> і 22px h3> выглядае не так інакш. У нас ёсць два варыянты: наладзіць памеры шрыфта альбо разгледзець іншы шрыфт для загалоўкаў. Ідзіце з апошнім, калі вы мяркуеце, што ваш дызайн будзе насычаны тэкстам.

Майце на ўвазе, што:

• Візуальны дызайн карыстацкага інтэрфейсу - гэта часта падыход
• Нічога не вырашана; усё можа быць зменена

Вышыня лініі

Аптымальная вышыня радка забяспечвае дастатковую адлегласць паміж радкамі тэксту для дасягнення прыстойнага ўзроўню чытальнасці. Гэта становіцца ўсё больш і больш прызнаным "стандартам"; Інструмент "Аўдыт маяка" Google прапануе яго нават у якасці ручной праверкі (ці нават сцяга, калі тэкст змяшчае спасылкі, якія могуць быць занадта блізка адзін ад аднаго ў выніку неаптымальнай вышыні радка).

У чарговы раз WCAG нам дапамагае, заявіўшы, што вышыня радкоў павінна быць у 1,5 разы большая за памер шрыфта. Такім чынам, у вашым інструменце дызайну карыстацкага інтэрфейсу ў раздзеле «Лінія» (ці падобным) проста памножце памер шрыфта на - прынамсі, на 1,5. Напрыклад, калі асноўны тэкст складае 18 пікселяў, тады вышыня радка будзе 27 пікселяў (18 * 1,5 - вы таксама можаце выканаць аперацыю па матэматыцы непасрэдна ў інспектары). Зноў жа, памятайце: калі 1.6x адчувае сябе лепш, выкарыстоўвайце 1.6x. Памятайце, што розныя шрыфты будуць мець розныя вынікі.

Пакуль яшчэ рана думаць аб выкарыстанні рэальных дадзеных у нашым дызайне, але, па меншай меры, нам усё ж варта выкарыстоўваць некалькі рэалістычныя дадзеныя (нават lorem ipsum). InVision Studio мае ўласнае рэальнае прыкладанне для перадачы дадзеных, якое дапаможа нам зразумець, як можа выглядаць наша тыпаграфіка.

Інтэрвал паміж абзацамі

Інтэрвал паміж абзацамі - гэта не той стыль, які мы можам заявіць, выкарыстоўваючы інспектар InVision Studio. Замест гэтага нам спатрэбіцца ручное выраўноўванне слаёў пры дапамозе разумных накіроўвалых (⌥). Падобна вышыні радка, магічны множнік складае 2 разы (падвойны памер шрыфта). У якасці прыкладу, калі памер шрыфта складае 18 пікселяў, перад пераходам у наступны тэкставы блок павінна быць не менш за 36 пікселяў. Інтэрвал паміж літарамі павінен быць не менш 0,12.

Аднак нам не трэба пра гэта турбавацца, пакуль мы не пачнем ствараць кампаненты.

Агульныя стылі

Калі ваш інструмент дызайну карыстацкага інтэрфейсу гэта падтрымлівае (InVision Studio пакуль гэтага не робіць), падумайце аб пераўтварэнні гэтых тыпаграфскіх стыляў у "Агульныя стылі", каб зрабіць іх хутка шматразовымі, забяспечваючы візуальную кансістэнцыю. Звычайна гэта робіцца праз інспектара.

02. Падбярыце патрэбную палітру

Выбар ідэальных колераў для вашага дызайну выходзіць за рамкі эстэтыкі: ён можа інфармаваць усю іерархію вашага сайта.

Калі гаворка ідзе пра дызайн карыстацкага інтэрфейсу, звычайна колер - гэта адна з першых рэчаў, з якой мы любім бавіць час, але нас вучаць, што пагружацца проста ў візуальны дызайн - гэта дрэнна. Гэта, безумоўна, дакладна, аднак, калі гаворка ідзе пра візуальную кансістэнцыю, колер павінен быць галоўнай праблемай, бо ён адыгрывае іншыя ролі.

Колер у дызайне карыстацкага інтэрфейсу можа быць вельмі эфектыўным, але паколькі некаторыя карыстальнікі (на самой справе многія) пакутуюць ад розных відаў зроку, гэта не заўсёды надзейна. Пры гэтым гаворка ідзе не абавязкова пра канкрэтны колер, які выкарыстоўваецца, а, хутчэй, пра тып колеру. Гэта можа не адпавядаць рэчаіснасці, калі гаворка ідзе пра брэндынг, паколькі колер выкарыстоўваецца для эмацыянальнага ўздзеяння ў гэтым плане, але ў дызайне карыстацкага інтэрфейсу колер таксама выкарыстоўваецца для перадачы намераў, сэнсу і, вядома, візуальнай іерархіі.

01. Старк
Убудова Stark сумяшчальна з Sketch і Adobe XD і дапамагае праверыць каляровую кантраснасць і імітаваць дальтонізм непасрэдна з палатна. Падтрымка Figma і InVision Studio з'явіцца вельмі хутка.
02.Колеры
Колеры - гэта набор з 90 каляровых спалучэнняў, якія маюць адпаведную колькасць каляровай кантраснасці, каб адпавядаць рэкамендацыям WCAG 2.0 - некаторыя з іх нават паспяваюць адпавядаць стандарту AAA.
03. Праект A11y
Праект A11y - гэта маштабны цэнтр для ўсіх пытанняў, звязаных з даступнасцю. Ён уключае рэсурсы, інструменты, парады, навучальныя дапаможнікі і ствараецца вытворцам убудовы Stark і атрымлівае фінансаванне ад InVision.

Тры віды колеру

Колеры маюць сэнс, таму важна, каб іх не было занадта шмат. Занадта шмат сэнсаў прыводзіць да большай колькасці рэчаў, якія карыстальнік павінен разумець і памятаць - не кажучы ўжо пра больш каляровых спалучэннях, пра якія мы павінны турбавацца. Наогул, гэта быў бы рэкамендаваны фармат:

• Колер з заклікам да дзеяння (таксама асноўны колер брэнда)
• Нейтральны цёмны колер (лепш для элементаў карыстацкага інтэрфейсу альбо цёмнага рэжыму)
• Пры ўсім пералічаным, некалькі больш светлая і цёмная варыяцыя

Гэта дазваляе наступнае:

• Цёмны рэжым будзе лёгка дасяжным
• Наш колер CTA ніколі не будзе канфліктаваць з іншымі кветкамі
• У любым сцэнары мы зможам падкрэсліць і дэ-падкрэсліць

Наладзьце палітру

Выбраўшы інструмент дызайну карыстацкага інтэрфейсу, стварыце па адной досыць вялікай мантажнай вобласці (націсніце A) для кожнага колеру (з назвамі «Брэнд», «Нейтральны / Светлы» і «Нейтральны / Цёмны»). Затым у кожнай мастацкай вобласці стварыце дадатковыя меншыя прастакутнікі, якія адлюстроўваюць больш цёмныя і светлыя варыяцыі колеру, а таксама іншыя колеры.

Мы маглі б разгледзець трохі больш светлыя і цёмныя як 10 адсоткаў дадаткова белага і 10 адсоткаў дадаткова чорнага адпаведна. Пасля завяршэння адлюструйце копію друкарскіх стыляў на кожнай мантажнай вобласці. Колер гэтых тэкставых слаёў павінен быць нейтральна-светлым, за выключэннем нейтральнай светлай мастацкай вобласці, дзе яны павінны быць нейтральна-цёмнымі.

Кантраст

Далей нам трэба будзе праверыць нашы колеры на наяўнасць аптымальнага кантрасту колеру. Існуе мноства інструментаў, якія могуць гэта зрабіць, напрыклад, убудова Stark для Sketch і Adobe XD альбо Contrast для macOS - аднак такое рашэнне ў сеціве, як Contrast Checker або Color Contrast Checker, выдатна падыдзе.

Праверце каляровую кантраснасць для кожнай камбінацыі і адпаведна падпраўце колеры. Калі вы не ведаеце, якія колеры выкарыстоўваць, паспрабуйце скарыстацца рэкамендацыямі Color Safe.

03. Стыль спасылак і кнопак

Памер

Кнопкі і спасылкі, падобна тыпаграфіцы, павінны мець некалькі варыяцый. У рэшце рэшт, не ўсе дзеянні маюць аднолькавы ўзровень важнасці, і, як мы ўжо абмяркоўвалі раней, колер з'яўляецца ненадзейным метадам зносін, таму ён не можа быць асноўным метадам уздзеяння на візуальную іерархію. Нам таксама трэба цацацца з памерам.

Візуальны тэст на даступнасць - гэта тэст на юзабіліці, які выкарыстоўваецца для вызначэння таго, ці могуць мішэні націснуць на націск. Сінхранізаваць дызайн ад Studio да Freehand (⌘⇧F), адпраўце атрыманы URL тэстэрам і няхай яны абводзяць элементы, якія, на іх думку, можна націснуць.

Карыстальнікі Non-InVision Studio таксама могуць выкарыстоўваць Freehand, але карыстальнікі InVision Studio могуць плаўна запускаць свае дызайны ў Freehand з InVision Studio, што з'яўляецца самым хуткім і эфектыўным спосабам атрымання візуальных водгукаў карыстальнікаў.

Як правіла, мы рэкамендуем тэкст кнопак аб'яўляць як 18 пікселяў (тое ж самае, што і асноўны тэкст), але каб самі кнопкі мелі тры варыяцыі:

• Нармальны: Вышынёй 44 пікселяў (закругленыя куты: 5 пікселяў)
• Вялікі: Вышынёй 54 пікселяў (закругленыя куты: 10 пікселяў)
• Вельмі вялікі: 64 пікселяў у вышыню (закругленыя куты: 15 пікселяў)

Гэта дазваляе нам зрабіць некаторыя кнопкі больш важнымі, не залежачы ад колеру, а таксама ўкласці кнопкі (напрыклад, выкарыстоўваць кнопку ўнутры мінімальна выглядаючага поля формы).

Глыбіня

Незалежна ад таго, ці з'яўляецца націск націскам кнопкі ці поля формы, цені павінны выкарыстоўвацца для павелічэння глыбіні і, такім чынам, мяркуюць інтэрактыўнасць. Адзіны стыль цені для ўсіх варыянтаў кнопак і палёў формы выдатна падыходзіць.

Інтэрактыўнасць

Кожны тып кнопкі патрабуе змены, каб паказаць стан навядзення. Гэта тлумачыць карыстальніку, што тое, што яны спрабавалі зрабіць, цалкам нармальна і гарантуе, што яны будуць працягвацца без затрымкі.

На самай справе гэта адзін з самых складаных аспектаў падтрымання візуальнай кансістэнцыі, таму што колер часта з'яўляецца стылем, які мяняецца пры стварэнні дзяржавы. На шчасце, гэтыя змены стану могуць быць адносна нязначнымі, таму можна змяніць колер на некалькі больш светлы альбо цёмны варыянт - вось для чаго яны. Гэта датычыцца і спасылак.

Прыняцце рашэння супраць гэтага прымусіць нас выкарыстоўваць колер, які альбо ўжо мае істотнае значэнне, у выніку чаго карыстальнікі заблытаюцца, альбо прыняць рашэнне прыдумаць іншы колер. Рашэнне выкарыстоўваць другасны колер цалкам нармальна, але яго трэба захаваць для маркетынгавых візуальных элементаў, а не для элементаў карыстацкага інтэрфейсу. Менш - гэта больш (і прасцей).

Не забудзьцеся паўтарыць гэты крок для кожнай мастацкай вобласці. Не ўключайце фірмовыя кнопкі CTA на мантажную вобласць брэнда - пазней мы разгледзім, што адбываецца, калі пэўныя камбінацыі не працуюць.

04. Стварыце свае кампаненты

Кампаненты значна эканоміць час, і ўсе інструменты дызайну карыстацкага інтэрфейсу прапануюць гэтую функцыю (напрыклад, у Sketch яны называюцца сімваламі). У Studio мы можам ствараць кампаненты, выбіраючы ўсе пласты, якія павінны складаць кампанент, і выкарыстоўваючы ⌘Да цэтлік.

Выкарыстанне кампанентаў

Каркасныя каркасы вельмі карысныя не толькі для распрацоўкі карыстацкіх інтэрфейсаў з высокай зручнасцю выкарыстання, але і для высвятлення таго, што наш інтэрфейс спатрэбіцца ў доўгатэрміновай перспектыве. Гэта накшталт як праверка будучыні.

Гэта не азначае, што нам трэба распрацаваць нагрузку на кампаненты альбо быць гатовымі да любога магчымага сцэнарыя, але гэта азначае, што нам трэба выкарыстоўваць стаўленне "Што рабіць, калі?".

Напрыклад, калі наш каркас патрабуе кампанента 3x1, але мы ведаем, што змест не ўсталяваны, невялікі роздум можа прымусіць нас задацца пытаннем: "А калі гэтыя кампаненты апынуцца 4x1?". Асноўнае правіла: дызайн толькі для патрэб карыстальнікаў, якія ўжо існуюць, але паспрабуйце зрабіць рашэнні адносна гнуткімі. У адваротным выпадку, мы пазней скончымся з вельмі бруднай "дызайнерскай запазычанасцю".

Цяпер мы можам выкарыстаць гэты кампанент паўторна, перацягнуўшы яго на палатно з раздзела "Бібліятэкі> Дакумент" злева, хоць майце на ўвазе, што гэты працоўны працэс можа адрознівацца ў залежнасці ад вашага інструмента карыстацкага інтэрфейсу.

Гэты метад стварэння кіраўніцтва па стылі (і, у рэшце рэшт, стварэння самога дызайну) асабліва добра працуе з модульнымі / картачнымі макетамі, хаця "агульныя месцы", такія як верхні калонтытул, калантытулы і навігацыя, таксама з'яўляюцца выдатнымі кандыдатамі для кампанента.

Падобна таму, як мы скончылі з тыпаграфскімі стылямі, колерамі і кнопкамі, мы павінны памятаць пра ўважлівую арганізацыю кампанентаў.

Выкарыстоўваючы нашы правілы

Раней мы рабілі заўвагу наконт таго, каб не выкарыстоўваць фірмовыя кнопкі CTA па-над маркай, бо фірмовыя кнопкі CTA, відавочна, павінны вылучацца сярод усяго іншага. Такім чынам, як мы можам стварыць фірмовы кампанент, маючы магчымасць карыстацца фірмовай кнопкай CTA? У рэшце рэшт, калі мы выкарыстоўваем нейтральныя цёмныя кнопкі для, скажам так, навігацыйных кнопак ці проста менш важных кнопак, гэта проста не будзе варыянтам, так?

Правільна. Такім чынам, гэта была б ідэальная магчымасць стварыць кампанент - у прыватнасці, камбінацыю загаловак + тэкст + кнопка. Звярніце ўвагу, як я стварыў фон карткі з нейтральным святлом, каб можна было выкарыстоўваць фірмовую кнопку. Аналагічным чынам, нейтральнае светлавое поле формы (палі формы звычайна белыя з-за разумовай мадэлі, якая гістарычна сінонімічная папяровым формам) не выглядае дзіўна на нейтральным светлым фоне, таму іх можна выкарыстоўваць толькі на нейтральным цёмным фоне - альбо непасрэдна, альбо ўнутры нейтральны цёмны кампанент. Гэта тое, як мы робім дызайн гнуткім, выконваючы правілы і захоўваючы паслядоўнасць.

Стрэс-тэставанне

У ідэале самым хуткім і эфектыўным спосабам забеспячэння трываласці нашай канструкцыі з'яўляецца яе стрэс-тэст. Выпрабаванне дызайну азначае жорсткасць. Скажам, у нас ёсць навігацыя з X колькасцю элементаў навігацыі, таму што гэта было патрабаваннем; для таго, каб сапраўды забяспечыць гнуткасць, паспрабуйце змяніць гэтыя патрабаванні, дадаўшы больш элементаў навігацыі, альбо, каб сапраўды ўключыць ключ, трэба таксама дадаць элемент навігацыі з больш высокай візуальнай іерархіяй, чым іншыя. Ці дазваляюць нашы правілы памеру, тыпаграфікі і колеру нешта падобнае? Ці для таго, каб прапанаваць аптымальную зручнасць, нам патрэбна іншае правіла?

Майце на ўвазе, што існуе розніца паміж даданнем правілаў і згінаннем правілаў. Больш краёвых выпадкаў азначае меншую паслядоўнасць, таму часцей за ўсё для зручнасці проста перагледзець кампанент.

05. Дакументаваць і супрацоўнічаць

Як зрабіць нашы дызайнерскія файлы прасцей у выкарыстанні як для сябе, так і для іншых дызайнераў, якія могуць выкарыстоўваць наш дызайнерскі файл? Ну, як вы даведаецеся, важна захаваць іх у надзейным сумесным воблачным сховішчы.

Колеры

Першы крок - захаваць усе колеры ў зорцы «Колеры дакументаў», калі мы гэтага яшчэ не зрабілі - гэта палегчыць доступ да іх, калі нам трэба будзе прымяніць іх у сваім дызайне.Для гэтага адкрыйце віджэт выбіральніка колераў у інспектары, у выпадальным меню выберыце «Колеры дакументаў», а затым націсніце значок +, каб дадаць колер у ўзор. Гэта працуе аднолькава ў большасці інструментаў карыстацкага інтэрфейсу.

Агульныя бібліятэкі

Далей нам трэба пераўтварыць наш дакумент - у камплекце з тыпаграфскімі стылямі, колерамі, кнопкамі, месцамі агульнага карыстання і асноўнымі кампанентамі - у агульную бібліятэку.

Па сутнасці гэта азначае, што кожны элемент павінен быць кампанентам, нават калі ён складаецца толькі з аднаго пласта. Націсніце кнопку + ‌ на бакавой панэлі бібліятэк злева, а потым імпартуйце гэты дакумент у новы. Правільна: наш дакумент цяпер з'яўляецца бібліятэкай і гатовы да выкарыстання для дызайну карыстацкіх інтэрфейсаў з гарантаванай паслядоўнасцю.

InVision Studio некалькі абмежаваны ў тым сэнсе, што ён яшчэ не сінхранізуецца з афіцыйным інструментам дыспетчара дызайну InVision, але дастаткова проста размясціць бібліятэку ў Dropbox, каб іншыя дызайнеры маглі яе выкарыстоўваць і абнаўляць з цягам часу. Пры ўнясенні змяненняў (лакальна альбо выдалена) кожны файл Studio, які выкарыстоўвае бібліятэку (зноў жа лакальна альбо выдалена), спытае, ці хочаце вы абнавіць колеры і кампаненты. Гэта тое, як бібліятэкі дызайну падтрымліваюцца паміж камандамі.

Калі справа даходзіць да распрацоўкі інтэрфейсаў, якія візуальна адпавядаюць, выкарыстоўвайце ўсё паўторна. Дызайнерскія кнопкі, затым выкарыстоўвайце кнопкі для стварэння кампанентаў кнопак, а затым выкарыстоўвайце
кампаненты кнопак для стварэння іншых кампанентаў, такіх як абвесткі і дыялогі.

Толькі не стварайце непатрэбныя кампаненты. Памятаеце, што стварэнне бібліятэкі - гэта пастаянныя намаганні ў супрацоўніцтве. Гэта не павінна быць выканана адначасова, завершана вамі ў адзіночку альбо завершана ніколі. Ён павінен перадаць толькі мову.

Дызайн у маштабе

Па меры пашырэння дызайну кіраванне ім становіцца больш складаным. Мы можам зрабіць розныя налады, каб захаваць яго эфектыўнасць і падтрымку, тым больш, што DSM InVision пакуль не працуе са Studio.

Напрыклад, мы можам захацець выкарыстоўваць тэкставыя пласты для анатавання нашай бібліятэкі як сродку тлумачэння выпадкаў выкарыстання розных элементаў. Для тыпаграфскіх стыляў мы маглі б нават адрэдагаваць тэкст, каб ён быў больш апісальным (напрыклад, "h1> / 1.3 / 44px"). Гэта кажа пра гэта h1>s павінна складаць 44 пікселяў і мець вышыню радка 1,3.

Дызайн перадачы

Інструменты перадачы дызайну адлюстроўваюць розныя стылі, якія выкарыстоўваюцца ў кожным элеменце дызайну, так што распрацоўшчыкі могуць стварыць прыкладанне або сайт. Гэтыя інструменты ўключаюць агляд стыляў, а таксама копію ўзору "колеры дакумента". Распрацоўшчыкі могуць нават скапіяваць гэтыя стылі ў выглядзе кода, што выдатна, калі вы вырашылі стварыць якую-небудзь пісьмовую праектную дакументацыю, і вы хочаце ўключыць прадстаўленне фрагментаў кода кампанентаў.

Калі вы турбуецеся пра ліквідацыю непаладак і кіраванне вэб-сайтам, пераканайцеся, што ў вас ёсць правільная паслуга вэб-хостынгу, вам дапаможа, але для вашай дызайнерскай сістэмы вам спатрэбіцца інструмент перадачы дызайну InVision - Inspect. Каб выкарыстаць яго, мы націскаем кнопку / значок "Апублікаваць у InVision" у InVision Studio, адкрываем атрыманы URL-адрас і націскаем, каб пераключыцца ў рэжым праверкі. Гэта сапраўды зручна.

Гэты змест першапачаткова з'яўляўся ў часопісе net.