Udhëzuesi përfundimtar i dizajnit të ndërfaqes së ndërfaqes

Përmbajtje

• 01. Zgjidhni tipografinë tuaj
• 02. Zgjidh paletën e duhur
• 03. Lidhjet dhe butonat e stilit
• 04. Krijoni përbërësit tuaj
• 05. Dokumentoni dhe bashkëpunoni

Çfarë është dizajni i ndërfaqes së përdoruesit? Një pyetje më e mirë do të ishte, çfarë hyn në të vërtetë në hartimin e një ndërfaqeje përdoruesi? Estetikë? Përdorshmëria? Mundësia e hyrjes? Të gjithë ata? Si bashkohen të gjithë këta faktorë për të mundësuar një përvojë optimale të përdoruesit dhe e cila duhet të vijë e para?

Mundësia e hyrjes duhet të jetë gjithmonë e para, duke hedhur bazat për një përdorshmëri optimale (përdorimi i një krijuesi të lartë të faqeve të internetit do të ndihmojë këtu). Dhe pastaj, kur një ndërfaqe ndërhyrëse është e arritshme dhe e përdorshme, ajo duhet të duket tashmë mjaft e mirë për sa i përket estetikës (mjetet e dizajnit të ndërfaqes do të ndihmojnë këtu). Pastaj, për t'u siguruar që dizajni juaj funksionon në të gjitha nivelet, do t'ju duhet ta testoni atë plotësisht, gjë që mund ta bëni me zgjedhjen tonë të mjeteve më të mira të testimit të përdoruesit. Le të hedhim një vështrim më të afërt në elementët themelorë të shumicës së dizenjove dhe çfarë mund të bëhet për të siguruar qëndrueshmëri vizuale.

01. Zgjidhni tipografinë tuaj

Tipografia e shkëlqyeshme (si shumë aspekte të dizajnit) shkon deri te mundësia e arritjes. Dizajni vizual sigurisht që shton përvojën e përgjithshme të përdoruesit, por në fund të ditës, përdoruesit po ndërveprojnë me ndërfaqen e përdoruesit, duke mos e parë atë si art. Shkronjat e lexueshme rezultojnë në qartësi dhe fjalët e lexueshme janë ato që i ndihmojnë përdoruesit të tretin përmbajtjen në mënyrë efikase. Të dyja janë më të rëndësishme se çdo estetikë vizuale.

Sidoqoftë, tipografia e modeluar mirë mund të jetë estetikisht e kënaqshme. E zezë në të bardhë Helvetica (ose një font i ngjashëm) mund të jetë një gjë e bukurisë vetëm pas disa përmirësimeve të thjeshta tipografike. Me përmirësime, ne nënkuptojmë shkuljen e madhësisë së shkronjave, lartësisë së rreshtit, ndarjes së shkronjave dhe kështu me radhë - jo shkronjën ose ngjyrën e tekstit.

Tipografia 'e bukur' është në të vërtetë e shëmtuar kur është e palexueshme sepse zhgënjimi gjithmonë e shkel estetikën. Dizajni i shkëlqyeshëm është i ekuilibruar dhe harmonik.

Ashtu si shumë aspekte të dizajnit të ndërfaqes së përdorimit, rregullimi i imazheve vizualë për të balancuar mundësinë e hyrjes dhe estetikën nuk është sfida. Sfida është ruajtja e qëndrueshmërisë gjatë gjithë dizajnit. Konsistenca krijon hierarki të qartë midis elementeve me rëndësi të ndryshme, gjë që i ndihmon përdoruesit të kuptojnë një ndërfaqe më të shpejtë dhe madje edhe të tretin përmbajtjen në mënyrë më efikase.

Kur bëhet fjalë për lexueshmërinë dhe lexueshmërinë, madhësia minimale e pranueshme e shkronjave siç përcaktohet nga Udhëzimet e Hyrjes për Përmbajtjen në Ueb WCAG 2.0 është 18pt (ose 14pt me të zezë). Madhësia më e mirë e shkronjave për t'u përdorur varet kryesisht nga vetë shkronja, por është e rëndësishme të kihet parasysh hierarkia vizuale dhe mënyra se si kjo madhësi bazë dallon veten nga përmbledhjet dhe titujt (dmth. h1>, h2>, h3>).

Me mjetin tuaj të zgjedhjes së dizajnit UI (do të përdorim InVision Studio), krijoni një seri shtresash teksti (T) dhe më pas rregulloni të gjitha madhësitë që të ndërlidhen me modelin e mëposhtëm:

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

Me InVision Studio (dhe të gjitha mjetet e tjera të dizajnit UI), kjo bëhet duke rregulluar stilet duke përdorur panelin Inspektor në anën e djathtë.

Tjetra zgjidhni fontin tuaj, por kini kujdes sepse ajo që mund të vini re me disa gërma është ajo 18px p>> dhe 22px h3> nuk duket aq ndryshe. Ne kemi dy zgjedhje: shkulni madhësitë e shkronjave ose merrni parasysh një font tjetër për tituj. Shkoni me këtë të fundit nëse parashikoni që dizajni juaj do të jetë i rëndë për tekstin.

Mbani në mend se:

• Dizajni i ndërfaqes vizuale është shpesh një qasje që ndjen ndjenjën e zorrëve
• Asgjë nuk është vendosur; gjithçka është subjekt i ndryshimit

Vija e gjatesise

Lartësia optimale e linjës siguron që linjat e tekstit të kenë hapësirë ​​të mjaftueshme midis tyre në mënyrë që të arrihen nivele të mira të lexueshmërisë. Kjo po bëhet gjithnjë e më e njohur si një 'standard'; Vegla e Kontrollit të Lighthouse të Google madje e sugjeron atë si një kontroll manual (ose edhe një flamur nëse teksti përmban lidhje që mund të jenë shumë afër njëri-tjetrit si rezultat i lartësisë së vijës jo optimale).

Edhe një herë, WCAG na ndihmon në këtë, duke deklaruar se lartësitë e vijave duhet të jenë 1.5x madhësia e shkronjave. Pra, në mjetin tuaj të dizajnit të UI nën 'Line' (ose të ngjashëm), thjesht shumëzoni madhësinë e shkronjave me - të paktën - 1.5. Si shembull, nëse teksti i trupit është 18px, atëherë lartësia e rreshtit do të ishte 27px (18 * 1.5 - gjithashtu mund të ekzekutoni operacionin e matematikës direkt në Inspektor). Përsëri, megjithatë, jini të vëmendshëm - nëse 1.6x ndjen një përshtatje më të mirë, përdorni 1.6x. Mos harroni se shkronja të ndryshme do të japin rezultate të ndryshme.

Tooshtë shumë herët të mendojmë për përdorimin e të dhënave reale në modelin tonë, por, të paktën, duhet të përdorim ende të dhëna disi realiste (madje edhe lorem ipsum). InVision Studio ka një aplikacion vendas të të dhënave reale për të na ndihmuar të shohim se si mund të duket në të vërtetë tipografia jonë.

Hapësira e paragrafëve

Hapësira e paragrafëve nuk është një stil që ne mund të deklarojmë duke përdorur Inspektorin e InVision Studio. Në vend të kësaj, do të duhet të rreshtojmë manualisht shtresat duke përdorur Udhëzime të zgjuara (). Ngjashëm me lartësinë e vijës, shumëzuesi magjik është 2x (dyfishi i madhësisë së shkronjës). Si shembull, nëse madhësia e shkronjave është 18px, atëherë duhet të ketë të paktën një hapësirë ​​36px para se të çojë në bllokun tjetër të tekstit. Hapësira e shkronjave duhet të jetë së paku 0.12.

Sidoqoftë, nuk kemi nevojë të shqetësohemi për këtë derisa të fillojmë krijimin e komponentëve.

Stilet e përbashkëta

Nëse mjeti juaj i dizajnit UI e mbështet atë (InVision Studio nuk e bën akoma), merrni parasysh t'i ktheni këto stile tipografike në 'Stile të Ndara' për t'i bërë ato të përdoren me shpejtësi, ndërsa siguroni qëndrueshmëri vizuale. Kjo zakonisht realizohet përmes Inspektorit.

02. Zgjidh paletën e duhur

Përzgjedhja e ngjyrave perfekte për dizajnin tuaj shkon përtej estetikës: ajo mund të informojë të gjithë hierarkinë e faqes tuaj.

Kur bëhet fjalë për dizajnin e ndërfaqes së ndërfaqes, ngjyra është zakonisht një nga gjërat e para me të cilën ne kënaqemi duke u zhytur, por na është mësuar që zhytja drejt në dizajnin vizual është një gjë e keqe. Kjo sigurisht që është e vërtetë, megjithatë kur bëhet fjalë për qëndrueshmërinë vizuale, ngjyra duhet të jetë shqetësimi kryesor sepse luan role të tjera.

Ngjyra në dizajnin e ndërfaqes së përdoruesit mund të jetë shumë e efektshme por meqenëse disa përdorues (shumë, në të vërtetë) vuajnë nga lloje të ndryshme të aftësive të kufizuara të shikimit, nuk është gjithmonë e besueshme. Kjo u tha, nuk ka të bëjë domosdoshmërisht me ngjyrën specifike që po përdoret, por më tepër me llojin e ngjyrës. Kjo mund të mos jetë e vërtetë kur bëhet fjalë për markën pasi ngjyra përdoret për ndikim emocional në këtë drejtim, por, në modelin e ndërfaqes, ngjyra përdoret gjithashtu për të komunikuar qëllimin, kuptimin dhe, natyrisht, hierarkinë vizuale.

01. Stark
Shtojca Stark është e përputhshme me Sketch dhe Adobe XD dhe ju ndihmon të kontrolloni kontrastin e ngjyrave dhe të simuloni verbërinë e ngjyrave direkt nga kanavacë. Mbështetja për Figma dhe InVision Studio vjen shumë shpejt.
02.Ngjyrat
Colors është një grup prej 90 kombinimesh ngjyrash që kanë sasinë e duhur të kontrastit të ngjyrave në mënyrë që të plotësojnë Udhëzimet WCAG 2.0 - madje disa prej tyre arrijnë të plotësojnë standardin AAA.
03. Projekti A11y
Projekti A11y është një qendër masive për të gjitha gjërat që lidhen me aksesin. Ai përfshin burime, mjete, këshilla, udhëzime dhe është krijuar nga prodhuesi i shtojcës Stark dhe merr fonde nga InVision.

Tre llojet e ngjyrave

Ngjyrat mbajnë kuptim, prandaj është e rëndësishme të mos keni shumë prej tyre. Shumë kuptime sjellin më shumë gjëra që përdoruesi duhet t'i kuptojë dhe mbajë mend - për të mos përmendur më shumë kombinime ngjyrash për t'u shqetësuar. Në përgjithësi, ky do të ishte formati i rekomanduar:

• Një ngjyrë thirrje për veprim (gjithashtu ngjyra kryesore e markës)
• Një ngjyrë neutrale e errët (më mirë për elementet UI ose modalitetin e errët)
• Për të gjitha sa më sipër, një variacion pak më i lehtë dhe më i errët

Kjo mundëson sa vijon:

• Modaliteti i errët do të jetë i arritshëm lehtësisht
• Ngjyra jonë CTA kurrë nuk do të bie ndesh me ngjyrat e tjera
• Në çdo skenar ne do të jemi në gjendje të theksojmë dhe de-theksojmë

Vendosni paletën tuaj

Me mjetin tuaj të zgjedhjes së dizajnit UI, krijoni një tabelë arti mjaft të madhe (prekni A) për secilën ngjyrë (me emrin 'Markë', 'Neutrale / Dritë' dhe 'Neutrale / E errët'). Pastaj, në secilën tabelë arti, krijoni drejtkëndësha më të vegjël që shfaqin ndryshimet më të errëta dhe të lehta të ngjyrës dhe gjithashtu vetë ngjyrat e tjera.

Ne do të konsideronim paksa më të lehtë dhe më të errët respektivisht 10 për qind të bardhë ekstra dhe 10 për qind të zezë ekstra. Kur të keni mbaruar, shfaqni një kopje të stileve tipografike në secilën tabelë arti. Ngjyra e këtyre shtresave të tekstit duhet të jetë dritë neutrale, përveç në tabelën e dritës neutrale, ku ato duhet të jenë të errëta neutrale.

Kontrasti

Tjetra do të duhet të kontrollojmë ngjyrat tona për kontrastin optimal të ngjyrave. Ekzistojnë një larmi mjetesh që mund ta bëjnë këtë, për shembull shtojca Stark për Sketch dhe Adobe XD ose Kontrast për macOS - megjithatë, një zgjidhje në internet si Kontrasti i Kontrastit ose Kontrasti i Kontrasit të Ngjyrave do të shkojë mirë.

Kontrolloni kontrastin e ngjyrave për secilin kombinim dhe rregulloni ngjyrat në përputhje me rrethanat. Nëse nuk jeni i sigurt se cilat ngjyra të përdorni, provoni të përdorni rekomandimet e Color Safe.

03. Lidhjet dhe butonat e stilit

Madhësia

Butonat dhe lidhjet, ashtu si tipografia, duhet të kenë disa ndryshime. Mbi të gjitha, jo të gjitha veprimet janë të një niveli të njëjtë të rëndësisë dhe, siç diskutuam më herët, ngjyra është një metodë jo e besueshme e komunikimit, kështu që nuk mund të jetë metoda kryesore e ndikimit në hierarkinë vizuale. Ne gjithashtu duhet të luajmë me madhësi.

Një provë e aftësisë vizuale është një provë e përdorshmërisë që përdoret për të përcaktuar nëse objektivat e trokitjes mund të klikohen. Sinkronizoni modelin nga Studio në Freehand (F), dërgoni URL-në që rezulton te testuesit dhe i lini të rrethojnë elementet që ata besojnë se mund të klikohen.

Përdoruesit jo-InVision Studio mund të përdorin gjithashtu Freehand, por përdoruesit e InVision Studio mund të fillojnë dizajnet e tyre në Freehand pa probleme nga InVision Studio, e cila është mënyra më e shpejtë dhe më efikase për të marrë reagime vizuale nga përdoruesit.

Në përgjithësi, ne do të rekomandonim që teksti i butonit të deklarohet si 18px (i njëjtë me tekstin e trupit) por që vetë butonat të kenë tre ndryshime në madhësi:

• Normale: 44px në lartësi (qoshet e rrumbullakosura: 5px)
• I madh: 54px në lartësi (qoshet e rrumbullakosura: 10px)
• Shumë i madh: 64px në lartësi (qoshet e rrumbullakosura: 15px)

Kjo na mundëson që butonat e caktuar të duken më të rëndësishëm pa u mbështetur tek ngjyra dhe gjithashtu tek butonat e foleve (për shembull, përdorni një buton brenda një fushe forme me pamje minimale).

Thellesi

Pavarësisht nëse caku i goditjes është një buton apo një fushë formash, hijet duhet të përdoren për të rritur thellësinë dhe për këtë arsye sugjerojnë ndërveprimin. Një stil i vetëm hije për të gjitha variantet e butonave dhe fushave të formës është i mirë.

Ndërveprimi

Secili lloj butoni ka nevojë për një ndryshim për të treguar gjendjen e tij të rri pezull. Kjo i sqaron përdoruesit se ajo që ata janë përpjekur të bëjnë është plotësisht e mirë dhe siguron që ato të vazhdojnë pa vonesë.

Ky është në të vërtetë një nga aspektet më komplekse të ruajtjes së qëndrueshmërisë vizuale, sepse ngjyra shpesh është stili i preferuar për të ndryshuar kur bëhet fjalë për krijimin e një shteti. Fatmirësisht, këto ndryshime të gjendjes mund të jenë relativisht delikate, kështu që është mirë të ndryshosh ngjyrën në variacionin e saj pak më të lehtë ose të errët - për këtë janë ato. Kjo vlen edhe për lidhjet.

Vendimi kundër kësaj do të bëjë që ne të përdorim një ngjyrë që ose tashmë ka kuptim të rëndësishëm, duke rezultuar në përdoruesit e hutuar, ose përndryshe vendosin të dalin me një ngjyrë tjetër. Vendimi për të përdorur një ngjyrë dytësore është plotësisht i mirë, por duhet të ruhet për marketing të pamjeve sesa për elementet e ndërfaqes së ndërfaqes. Më pak është më shumë (dhe më e lehtë).

Mos harroni të përsërisni këtë hap për çdo tabelë arti. Mos përfshini butonat e markës CTA në tabelën artistike të markës - më vonë do të mbulojmë se çfarë ndodh kur kombinime të caktuara nuk funksionojnë.

04. Krijoni përbërësit tuaj

Komponentët janë një kursim i madh i kohës dhe të gjitha mjetet e dizajnit të UI ofrojnë këtë veçori (p.sh. në Skicë, quhen Simbole). Në Studio ne mund të krijojmë komponentë duke zgjedhur të gjitha shtresat që duhet të përbëjnë komponentin dhe duke përdorurK shkurtore

Përdorimi i përbërësve

Kornizat me tel janë shumë të dobishme, jo vetëm për të hartuar ndërfaqe me përdorim të lartë, por edhe për të zbuluar se çfarë do të kërkojë ndërfaqja jonë në planin afatgjatë. Sortshtë njëlloj si mbrojtja e së ardhmes.

Kjo nuk do të thotë që duhet të hartojmë shumë komponentë ose të jemi gati për çdo skenar të mundshëm, por do të thotë se duhet të përdorim një qëndrim 'Po sikur?'

Për shembull, nëse teli ynë kërkon një komponent 3x1, por ne e dimë që përmbajtja nuk është vendosur në gur, një soditje e vogël mund të na çojë të pyesim: 'Po sikur këto përbërës të përfundojnë të jenë 4x1?'. Rregulli i përgjithshëm është: dizajni vetëm për nevojat e përdoruesit që tashmë ekzistojnë, por përpiquni t'i bëni zgjidhjet relativisht fleksibile. Përndryshe, ne do të përfundojmë me disa 'borxhe të dizajnit' shumë të çrregullt më vonë.

Tani mund ta ripërdorim këtë përbërës duke e tërhequr në kanavacë nga Bibliotekat> Dokumenti në anën e majtë, megjithëse ki parasysh që kjo rrjedhë e punës mund të ndryshojë në varësi të mjetit tënd të ndërfaqes.

Kjo metodë e krijimit të udhëzuesve të stilit (dhe përfundimisht krijimi i vetë modelit) funksionon veçanërisht mirë me paraqitjet e bazuara në modulare / karta, megjithëse 'zonat e zakonshme' siç janë headers, footers dhe navigacion janë gjithashtu kandidatë të shkëlqyeshëm për një përbërës.

Ashtu siç kemi bërë me stilet, ngjyrat dhe butonat tanë tipografikë, ne duhet të kujtojmë të organizojmë me kujdes përbërësit tanë.

Shfrytëzimi i rregullave tona

Më herët kemi bërë një vërejtje në lidhje me mos përdorimin e butonave të markës CTA mbi ngjyrën e markës, pasi që butonat e markës CTA padyshim që duhet të dallohen midis gjithçkaje tjetër. Pra, si mund të shkojmë për krijimin e një përbërësi të markës ndërsa jemi akoma në gjendje të përdorim një buton të markës CTA? Mbi të gjitha, nëse jemi duke përdorur butona të errët neutralë, le të themi, butona lundrimi ose butona thjesht më pak të rëndësishëm, kjo thjesht nuk do të ishte një opsion, apo jo?

Djathtas Pra, kjo do të ishte një mundësi ideale për të krijuar një përbërës - specifikisht, një titull + tekst + kombinim butoni. Vini re se si kam krijuar një sfond 'kartë' dritë neutrale për të mundësuar përdorimin e butonit të markës. Në mënyrë të ngjashme, fusha e formës së dritës neutrale (fushat e formës janë zakonisht të bardha për shkak të modelit mendor historikisht sinonim me format e letrës) nuk duket e mahnitshme në sfondin e dritës neutrale, kështu që ato mund të përdoren vetëm në sfondin e errët neutral - qoftë drejtpërdrejt ose brenda një përbërës neutral i errët. Kjo është mënyra se si ne e bëjmë modelin tonë fleksibël duke iu bindur rregullave tona dhe duke ruajtur qëndrueshmërinë.

Testimi i stresit

Idealisht, mënyra më e shpejtë dhe më efektive për të siguruar qëndrueshmëri në modelin tonë është ta provojmë stresin. Vënia në provë e një modeli do të thotë të jesh mizor. Le të themi se kemi një navigim me X sasi të artikujve nav sepse kjo ishte kërkesa; në mënyrë që të siguroni me të vërtetë fleksibilitet, provoni t'i ndryshoni këto kërkesa duke shtuar më shumë artikuj ose, për të hedhur me të vërtetë një çelës në punë, provoni gjithashtu të shtoni një artikull nav me një hierarki vizuale më të lartë se të tjerët. A lejojnë madhësia, tipografia dhe rregullat e ngjyrave tona diçka të tillë? Apo për të ofruar një përdorim optimal, na duhet një rregull tjetër?

Kini parasysh se ekziston një ndryshim midis shtimit të rregullave dhe përkuljes së rregullave. Më shumë raste të skajshme do të thotë më pak qëndrueshmëri, kështu që shumicën e kohës është më mirë për hir të përdorshmërisë për të rimenduar thjesht përbërësin.

05. Dokumentoni dhe bashkëpunoni

Si t’i bëjmë skedarët tanë të dizajnit më të lehtë për t’u përdorur si për veten, ashtu edhe për ndonjë stilist tjetër që mund të përdorë skedarin tonë të dizajnit? Epo, mbajtja e tyre e ruajtur në mënyrë të sigurt në ruajtje të besueshme dhe të përbashkët re është e rëndësishme, siç do ta zbuloni.

Ngjyrat

Hapi i parë është ruajtja e të gjitha ngjyrave në tavolinën 'Ngjyrat e Dokumentit' nëse nuk e kemi bërë tashmë - kjo do t'i bëjë ata më të lehtë për t'u përdorur kur duhet t'i zbatojmë në modelin tonë.Për ta bërë këtë, hapni miniaplikacionin e zgjedhësit të ngjyrave nga Inspektori, zgjidhni 'Document Colors' nga dropdown dhe më pas klikoni në ikonën + për të shtuar ngjyrën në swatch. Kjo funksionon në të njëjtën mënyrë në shumicën e mjeteve të UI.

Bibliotekat e Përbashkëta

Tjetra, ne duhet ta shndërrojmë dokumentin tonë - i plotësuar me stilet tipografike, ngjyrat, butonat, zonat e zakonshme dhe përbërësit bazë - në një bibliotekë të përbashkët.

Në thelb kjo do të thotë që çdo element duhet të jetë një përbërës, edhe nëse përbëhet nga vetëm një shtresë. Klikoni në butonin + ‌ në shiritin anësor të Libraries në të majtë dhe më pas importojeni këtë dokument në një dokument të ri. ’Sshtë e drejtë: dokumenti ynë tani është një bibliotekë dhe është gati të përdoret për të hartuar ndërfaqe me qëndrueshmëri të garantuar.

InVision Studio është disi e kufizuar në kuptimin që ende nuk sinkronizohet me mjetin zyrtar të Menaxherit të Sistemit të Projektimit të InVision por është mjaft e lehtë të vendosësh bibliotekën në Dropbox që dizajnerët e tjerë të përdorin dhe azhurnojnë me kalimin e kohës. Kur bëhet një ndryshim (lokalisht ose nga distanca), çdo skedar Studio që përdor bibliotekën (përsëri, lokalisht ose nga distanca) do t'ju pyesë nëse doni të azhurnoni ngjyrat dhe përbërësit. Kjo është mënyra se si mirëmbahen bibliotekat e dizajnit nëpër ekipe.

Kur bëhet fjalë për dizajnimin e ndërfaqeve të përdoruesit që janë vizualisht të qëndrueshme, ripërdorni gjithçka. Dizajnoni butonat, pastaj përdorni butonat për të krijuar përbërës të butonave, pastaj përdorni
komponentët e butonit për të krijuar përbërës të tjerë të tillë si alarme dhe dialogje.

Thjesht mos krijoni përbërës që nuk janë të nevojshëm. Mos harroni, ndërtimi i një biblioteke është një përpjekje e vazhdueshme, bashkëpunuese. Nuk ka pse të përfundojë menjëherë, të kompletohet vetëm nga ju ose të përfundojë ndonjëherë. Duhet vetëm të përçojë një gjuhë.

Projektimi në shkallë

Ndërsa një dizajn zgjerohet, menaxhimi i tij bëhet më i vështirë. Ekzistojnë rregullime të ndryshme që mund të dëshirojmë të bëjmë për ta mbajtur atë efikas dhe të mirëmbajtshëm, veçanërisht pasi DSM i InVision nuk punon ende me Studio.

Për shembull, ne mund të dëshirojmë të përdorim shtresa teksti për të shënuar bibliotekën tonë si një mjet për të shpjeguar rastet e përdorimit të elementeve të ndryshme. Për stilet tipografike, ne madje mund ta redaktojmë tekstin për të qenë më përshkrues (p.sh. "h1> / 1.3 / 44px"). Kjo thotë që h1>s duhet të jetë 44px dhe të ketë një lartësi linje 1.3.

Ndarja e Dizajnit

Mjetet e shpërndarjes së dizajnit shfaqin stilet e ndryshme të përdorura nga çdo element në dizajn në mënyrë që zhvilluesit të mund të ndërtojnë aplikacionin ose faqen e internetit. Këto mjete përfshijnë një përmbledhje të stileve dhe gjithashtu një kopje të pjesës së 'ngjyrave të dokumenteve'. Zhvilluesit madje mund t'i kopjojnë këto stile si kod, gjë që është e shkëlqyeshme nëse keni vendosur të krijoni ndonjë dokumentacion të shkruar të dizajnit dhe dëshironi të përfshini paraqitje të copave të kodit të përbërësve.

Nëse jeni të shqetësuar për zgjidhjen e problemeve dhe menaxhimin e një faqe në internet, sigurimi që keni shërbimin e duhur të mbajtjes së faqes në internet do t'ju ndihmojë, por për sistemin tuaj të dizajnit, mjet për shpërndarjen e dizajnit të InVision, Inspect, është gjëja për t'u përdorur. Për ta përdorur atë, ne klikojmë në butonin / ikonën 'Publiko në InVision' në InVision Studio, hapim URL-në që rezulton dhe më pas prekim për të kaluar në Modalitetin e Inspektimit. Reallyshtë vërtet i përshtatshëm.

Kjo përmbajtje fillimisht u shfaq në revistën net.