Ang panghuli gabay sa disenyo ng UI

Nilalaman

• 01. Piliin ang iyong palalimbagan
• 02. Piliin ang tamang paleta
• 03. Mga link ng link at pindutan
• 04. Lumikha ng iyong mga sangkap
• 05. Dokumento at makipagtulungan

Ano ang disenyo ng interface ng gumagamit? Ang isang mas mahusay na tanong ay, kung ano ang talagang napupunta sa disenyo ng isang interface ng gumagamit? Mga Aesthetics? Kakayahang magamit? Pag-access? Lahat sila? Paano nagkakaisa ang lahat ng mga salik na ito upang paganahin ang isang pinakamainam na karanasan ng gumagamit at alin ang dapat mauna?

Ang pag-access ay dapat na laging mauna, ang pagtula ng mga pundasyon para sa pinakamainam na kakayahang magamit (makakatulong dito ang paggamit ng isang nangungunang tagabuo ng website). At pagkatapos, kapag ang isang UI ay parehong naa-access at magagamit, dapat itong magmukhang disente sa mga tuntunin ng estetika (makakatulong ang mga tool sa disenyo ng UI dito). Pagkatapos, upang matiyak na gagana ang iyong disenyo sa lahat ng mga antas, kakailanganin mong subukan ito nang lubusan, na magagawa mo sa aming pagpili ng pinakamahusay na mga tool sa pagsubok ng gumagamit. Tingnan natin nang malapitan ang mga pangunahing elemento ng karamihan sa mga disenyo at kung ano ang maaaring gawin upang matiyak ang pagkakapare-pareho ng visual.

01. Piliin ang iyong palalimbagan

Mahusay na typography (tulad ng maraming mga aspeto ng disenyo) ay kumukulo sa kakayahang ma-access. Tiyak na nagdaragdag ang visual na disenyo sa pangkalahatang karanasan ng gumagamit ngunit sa pagtatapos ng araw, nakikipag-ugnay ang mga gumagamit sa UI, hindi tinitingnan ito bilang sining. Ang mga nabasang titik ay nagreresulta sa kalinawan at nababasa na mga salita na tumutulong sa mga gumagamit na matunaw nang mabuti ang nilalaman. Ang parehong ay mas mahalaga kaysa sa anumang visual aesthetic.

Gayunpaman, ang maayos na pagdisenyo ng palalimbagan ay maaari pa ring maging kasiya-siya sa aesthetically. Ang Black-on-white Helvetica (o isang katulad na font) ay maaaring maging isang bagay ng kagandahan pagkatapos lamang ng ilang simpleng mga pagpapahusay ng typographic. Sa pamamagitan ng mga pagpapahusay, nangangahulugan kami ng pag-aayos ng laki ng font, taas ng linya, spacing ng sulat at iba pa - hindi ang font o ang kulay ng teksto.

Ang 'Magagandang' palalimbagan ay talagang pangit kapag hindi ito nababasa dahil ang pagkabigo ay palaging tropa ng mga estetika. Mahusay na disenyo ay balanseng at maayos.

Tulad ng maraming aspeto ng disenyo ng UI, ang paghuhusay ng mga visual na balansehin ang kakayahang mai-access at mga estetika ay hindi ang hamon. Ang hamon ay ang pagpapanatili ng pagkakapare-pareho sa buong buong disenyo. Ang pagiging pare-pareho ay nagtatakda ng malinaw na hierarchy sa pagitan ng mga elemento ng iba't ibang kahalagahan, na kung saan ay tumutulong sa mga gumagamit na maunawaan ang isang UI nang mas mabilis at kahit na mas mahusay na matunaw ang nilalaman.

Pagdating sa kakayahang mabasa at kakayahang mabasa, ang minimum na katanggap-tanggap na laki ng font na tinukoy ng WCAG 2.0 Mga Alituntunin sa Pag-access sa Nilalaman ng Web ay 18pt (o naka-14pt na naka-bold). Ang pinakamahusay na sukat ng font na gagamitin higit sa lahat ay nakasalalay sa font mismo ngunit mahalaga na maging maingat sa visual hierarchy at kung paano makilala ang sukat ng base na ito mula sa mga buod at heading (ibig sabihin h1>, h2>, h3>).

Gamit ang pinili mong tool sa disenyo ng UI (gagamitin namin ang InVision Studio), lumikha ng isang serye ng mga layer ng teksto (T) at pagkatapos ay ayusin ang lahat ng mga laki upang maiugnay sa sumusunod na template:

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

Sa InVision Studio (at lahat ng iba pang mga tool sa disenyo ng UI), ginagawa ito sa pamamagitan ng pagsasaayos ng mga istilo gamit ang panel ng Inspector sa kanang bahagi.

Susunod na piliin ang iyong font, ngunit mag-ingat dahil ang maaari mong mapansin sa ilang mga font ay ang 18px p> at 22px h3> hindi ganoon kaiba ang hitsura. Mayroon kaming dalawang pagpipilian: i-tweak ang mga laki ng font o isaalang-alang ang isang iba't ibang mga font para sa mga heading. Sumama sa huli kung inaasahan mong magiging mabigat sa text ang iyong disenyo.

Tandaan na:

• Ang disenyo ng Visual UI ay madalas na isang diskarte sa pakiramdam ng gat
• Walang napagpasyahan; lahat ay maaaring magbago

Taas ng linya

Tinitiyak ng taas ng pinakamainam na linya na ang mga linya ng teksto ay may sapat na spacing sa pagitan ng mga ito upang makamit ang disenteng antas ng kakayahang mabasa. Ito ay nagiging mas at kinikilala bilang isang 'pamantayan'; Iminungkahi pa ng tool ng Lighthouse Audit ng Google na ito bilang isang manu-manong tseke (o kahit isang watawat kung naglalaman ang teksto ng mga link na maaaring masyadong malapit na magkasama bilang isang resulta ng taas ng suboptimal na linya).

Muli, tinutulungan kami ng WCAG sa isang ito, na ipinapahayag na ang taas ng linya ay dapat na 1.5x ang laki ng font. Kaya, sa iyong tool sa disenyo ng UI sa ilalim ng 'Line' (o katulad), i-multiply lamang ang laki ng font ng - hindi bababa sa - 1.5. Bilang isang halimbawa, kung ang teksto ng katawan ay 18px, kung gayon ang taas ng linya ay 27px (18 * 1.5 - maaari mo ring maisagawa ang pagpapatakbo ng matematika nang direkta sa Inspektor). Gayunpaman, muli, maging maingat - kung ang 1.6x ay nararamdaman na mas mahusay na magkasya, gumamit ng 1.6x. Tandaan na ang iba't ibang mga font ay maglalabas ng iba't ibang mga resulta.

Masyadong maaga upang isipin ang tungkol sa paggamit ng totoong data sa aming disenyo ngunit, sa pinakamaliit, dapat pa rin kaming gumamit ng medyo makatotohanang data (kahit na ang lorem ipsum). Ang InVision Studio ay may katutubong app ng totoong data upang matulungan kaming makita kung ano ang maaaring magmukhang tunay na hitsura ng aming palalimbagan.

Puwang ng talata

Ang spacing ng talata ay hindi isang istilo na maaari naming ideklara gamit ang InVision Studio's Inspector. Sa halip, kakailanganin naming manu-manong ihanay ang mga layer gamit ang Smart Guides (⌥). Katulad ng taas ng linya, ang magic multiplier ay 2x (doble ang laki ng font). Bilang isang halimbawa, kung ang laki ng font ay 18px, pagkatapos ay dapat mayroong hindi bababa sa isang 36px na puwang bago humantong sa susunod na bloke ng teksto. Ang spacing ng letra ay dapat na hindi bababa sa 0.12.

Gayunpaman, hindi namin kailangang magalala tungkol dito hanggang sa magsimula kaming lumikha ng mga bahagi.

Mga nakabahaging istilo

Kung sinusuportahan ito ng iyong tool sa disenyo ng UI (wala pa ang InVision Studio, isaalang-alang na gawing 'Mga Nakabahaging Estilo' ang mga typographic na istilong ito upang mabilis itong magamit muli habang tinitiyak ang pagkakapare-pareho ng visual. Karaniwan itong nagagawa sa pamamagitan ng Inspektor.

02. Piliin ang tamang paleta

Ang pagpili ng mga perpektong kulay para sa iyong disenyo ay napupunta nang lampas sa mga estetika: maaari nitong ipaalam ang buong hierarchy ng iyong site.

Pagdating sa disenyo ng UI, ang kulay ay nakagawiang isa sa mga unang bagay na nasisiyahan kaming nakikipag-usap ngunit itinuro sa amin na ang diving diretso sa visual na disenyo ay isang masamang bagay. Ito ay tiyak na totoo, subalit pagdating sa visual na pagkakapare-pareho, ang kulay ay dapat na isang pangunahing pag-aalala dahil gumaganap ito ng iba pang mga tungkulin.

Ang kulay sa disenyo ng UI ay maaaring maging mabisa ngunit dahil ang ilang mga gumagamit (marami, sa totoo lang) ay nagdurusa mula sa iba't ibang mga uri ng mga kapansanan sa paningin, hindi ito palaging maaasahan. Sinabi na, hindi kinakailangan tungkol sa tukoy na kulay na ginagamit, ngunit sa halip ang uri ng kulay. Maaaring hindi ito totoo pagdating sa pag-tatak dahil ginamit ang kulay para sa pang-emosyonal na epekto sa bagay na ito ngunit, sa disenyo ng UI, ginagamit din ang kulay para sa pakikipag-usap sa hangarin, kahulugan at, syempre, hierarchy ng visual.

01. Stark
Ang Stark plugin ay katugma sa Sketch at Adobe XD at tinutulungan kang suriin ang pagkakaiba ng kulay at gayahin ang pagkabulag ng kulay nang direkta mula sa canvas. Suporta para sa Figma at InVision Studio na paparating na.
02.Kulay
Ang mga Kulay ay isang hanay ng 90 mga kumbinasyon ng kulay na may naaangkop na halaga ng kaibahan ng kulay upang masiyahan ang Mga Alituntunin ng WCAG 2.0 - ang ilan sa kanila ay pinamamahalaan upang matugunan ang pamantayan ng AAA.
03. A11y Project
Ang A11y Project ay isang napakalaking hub para sa lahat ng mga bagay na nauugnay sa kakayahang mai-access. Nagsasama ito ng mga mapagkukunan, tool, tip, tutorial at nilikha ng gumagawa ng plugin na Stark at tumatanggap ng pondo mula sa InVision.

Ang tatlong uri ng kulay

Ang mga kulay ay nagtataglay ng kahulugan, kaya't mahalagang hindi masyadong marami sa kanila. Napakaraming kahulugan ang nagreresulta sa maraming mga bagay na dapat maunawaan at matandaan ng gumagamit - hindi na banggitin ang higit pang mga kumbinasyon ng kulay upang magalala kami. Sa pangkalahatan, ito ang magiging inirekumendang format:

• Kulay ng call-to-action (din ang pangunahing kulay ng tatak)
• Isang walang kinikilingan na madilim na kulay (mas mahusay para sa mga elemento ng UI o madilim na mode)
• Para sa lahat ng nasa itaas, isang bahagyang mas magaan at mas madidilim na pagkakaiba-iba

Pinapayagan nito ang sumusunod:

• Madilim na mode ay madaling matamo
• Ang aming kulay na CTA ay hindi kailanman magiging salungat sa iba pang mga kulay
• Sa anumang senaryo maaari naming bigyang-diin at de-bigyang-diin

I-set up ang iyong palette

Gamit ang napili mong tool sa disenyo ng UI, lumikha ng isang medyo malaking artboard (tapikin ang A) para sa bawat kulay (pinangalanang 'Brand', 'Neutral / Light' at 'Neutral / Dark'). Pagkatapos, sa bawat artboard, lumikha ng karagdagang mas maliit na mga parihaba na nagpapakita ng mas madidilim at mas magaan na mga pagkakaiba-iba ng kulay at pati na rin ang iba pang mga kulay mismo.

Isasaalang-alang namin ang bahagyang mas magaan at mas madidilim na 10 porsyento na sobrang puti at 10 porsyentong sobrang itim ayon sa pagkakabanggit. Kapag tapos ka na, ipakita ang isang kopya ng mga istilo ng typographic sa bawat artboard. Ang kulay ng mga layer ng teksto na ito ay dapat na walang ilaw na ilaw, maliban sa walang kinikilingan na artboard kung saan dapat silang maging dilim na dilim.

Paghahambing

Susunod kakailanganin naming suriin ang aming mga kulay para sa pinakamainam na pagkakaiba ng kulay. Mayroong iba't ibang mga tool na magagawa ito, halimbawa ang Stark plugin para sa Sketch at Adobe XD o Contrast para sa macOS - gayunpaman, ang isang online na solusyon tulad ng Contrast Checker o Color Contrast Checker ay maayos.

Suriin ang kaibahan ng kulay para sa bawat kumbinasyon at i-tweak ang mga kulay nang naaayon. Kung hindi ka sigurado kung anong mga kulay ang gagamitin, subukang gamitin ang mga rekomendasyon ng Color Safe.

03. Mga link ng link at pindutan

Sukat

Ang mga pindutan at link, kagaya ng typography, ay dapat magkaroon ng kaunting pagkakaiba-iba. Pagkatapos ng lahat, hindi lahat ng mga aksyon ay pantay na antas ng kahalagahan at, tulad ng tinalakay natin kanina, ang kulay ay isang hindi maaasahang paraan ng komunikasyon, kaya't hindi ito maaaring maging pangunahing pamamaraan ng pag-impluwensya sa hierarchy ng visual. Kailangan din nating laruan ng laki.

Ang isang pagsubok sa kakayahang makita ay isang pagsubok sa kakayahang magamit na ginagamit upang matukoy kung ang mga target sa pag-tap ay lilitaw na nai-click. I-sync ang disenyo mula sa Studio patungo sa Freehand (⌘⇧F), ipadala ang nagresultang URL sa mga tester at palibutan ang mga ito ng mga elemento na pinaniniwalaan nilang nai-click.

Ang mga gumagamit ng Non-InVision Studio ay maaaring gumamit ng Freehand din, ngunit ang mga gumagamit ng InVision Studio ay maaaring maglunsad ng kanilang mga disenyo sa Freehand nang walang putol mula sa InVision Studio, na kung saan ay ang pinakamabilis at pinakamabisang paraan ng pagkuha ng visual na feedback mula sa mga gumagamit.

Sa pangkalahatan, inirerekumenda namin na ang teksto ng pindutan ay ideklara bilang 18px (pareho sa teksto ng katawan) ngunit ang mga pindutan mismo ay may tatlong pagkakaiba-iba sa laki:

• Normal: 44px sa taas (bilugan na sulok: 5px)
• Malaki: 54px sa taas (bilugan na sulok: 10px)
• Dagdag na malaki: 64px sa taas (bilugan na sulok: 15px)

Nagbibigay-daan ito sa amin na gumawa ng ilang mga pindutan na lilitaw na mas mahalaga nang walang pag-asa sa kulay at pati na rin sa mga pindutan ng pugad (halimbawa, gumamit ng isang pindutan sa loob ng isang maliit na hitsura na form na patlang).

Lalim

Hindi alintana kung ang target na tapikin ay isang pindutan o isang form na patlang, ang mga anino ay dapat gamitin upang madagdagan ang lalim at samakatuwid iminumungkahi ang pagkakaugnay. Ang isang solong estilo ng anino para sa lahat ng mga iba't ibang mga pindutan at form na patlang ay mabuti.

Pakikipag-ugnay

Ang bawat uri ng pindutan ay nangangailangan ng isang pagkakaiba-iba upang ipahiwatig ang hover na estado nito. Nilinaw nito sa gumagamit na ang tinangka nilang gawin ay ganap na pagmultahin at tinitiyak na magpatuloy sila nang walang pagkaantala.

Ito ay talagang isa sa mga mas kumplikadong aspeto ng pagpapanatili ng pagkakapare-pareho ng visual dahil ang kulay ang madalas na pinapaboran na istilo upang mabago pagdating sa paglikha ng isang estado. Sa kabutihang palad, ang mga pagbabagong ito ng estado ay maaaring maging medyo banayad, kaya't mainam na baguhin ang kulay sa bahagyang mas magaan o mas madidilim na pagkakaiba-iba - iyon ang para sa kanila. Nalalapat din ito sa mga link.

Ang pagpapasya laban dito ay magdudulot sa amin na gumamit ng isang kulay na alinman sa mayroon nang makabuluhang kahulugan, na magreresulta sa pagkalito ng mga gumagamit, o kung hindi man ay pagpapasya na magkaroon ng ibang kulay. Ang pagpapasya na gumamit ng pangalawang kulay ay ganap na pagmultahin ngunit dapat itong mai-save para sa mga visual ng marketing sa halip na mga elemento ng UI. Mas kaunti ang higit pa (at mas madali).

Tandaan na ulitin ang hakbang na ito para sa bawat artboard. Huwag isama ang mga may markang CTA na pindutan sa artboard ng tatak - sa paglaon ay saklaw namin kung ano ang mangyayari kapag hindi gumana ang ilang mga kumbinasyon.

04. Lumikha ng iyong mga sangkap

Ang mga sangkap ay isang malaking tagatipid ng oras at lahat ng mga tool sa disenyo ng UI ay nag-aalok ng tampok na ito (hal. Sa Sketch, tinatawag silang Mga Simbolo). Sa Studio maaari kaming lumikha ng mga bahagi sa pamamagitan ng pagpili ng lahat ng mga layer na dapat bumuo ng bahagi at ginagamit ang ⌘K pintas

Paggamit ng mga sangkap

Ang mga wireframes ay lubhang kapaki-pakinabang, hindi lamang para sa pagdidisenyo ng mga mataas na kakayahang magamit ng UI kundi pati na rin para malaman kung ano ang kakailanganin ng aming UI sa pangmatagalan. Ito ay uri ng tulad ng pag-proofing sa hinaharap.

Hindi ito nangangahulugan na kailangan namin upang mag-disenyo ng maraming mga sangkap o maging handa para sa anumang posibleng sitwasyon ngunit nangangahulugan ito na kailangan naming gamitin ang isang ‘Paano kung?’ Saloobin.

Halimbawa, kung ang aming wireframe ay tumatawag para sa isang 3x1 na bahagi ngunit alam namin na ang nilalaman ay hindi nakatakda sa bato, isang kaunting pagmumuni-muni ay maaaring humantong sa amin na magtaka: 'Paano kung ang mga sangkap na ito ay natapos na maging 4x1?'. Ang panuntunan sa hinlalaki ay: disenyo lamang para sa mga pangangailangan ng gumagamit na mayroon na ngunit subukang gumawa ng mga solusyon na medyo may kakayahang umangkop. Kung hindi man, susubukan namin ang ilang napaka-magulo na 'utang sa disenyo' sa paglaon.

Ngayon ay maaari naming muling gamitin ang sangkap na ito sa pamamagitan ng pag-drag sa kanvas mula sa Mga Aklatan> Dokumento sa kaliwang bahagi, bagaman tandaan na ang daloy ng trabaho na ito ay maaaring magkakaiba depende sa iyong tool sa UI.

Ang pamamaraang ito ng paglikha ng mga gabay sa istilo (at sa paglaon ay nilikha ang disenyo mismo) ay gumagana nang mahusay sa mga layout ng modular / batay sa card, kahit na ang mga 'karaniwang lugar' tulad ng mga header, footer at pag-navigate ay mahusay din na mga kandidato para sa isang bahagi.

Tulad ng nagawa na namin sa aming mga istilo ng typographic, kulay at pindutan, dapat nating tandaan na maingat na ayusin ang aming mga bahagi.

Paggamit ng aming mga patakaran

Mas maaga sa amin ay gumawa ng isang pangungusap tungkol sa hindi paggamit ng mga may markang CTA na pindutan sa tuktok ng kulay ng tatak, dahil ang mga may markang CTA na pindutan ay malinaw na kailangan upang makilala sa gitna ng lahat ng iba pa. Kaya paano tayo gagawa tungkol sa paglikha ng isang may sangkap na branded habang nakakagamit pa rin ng isang may markang CTA na pindutan? Pagkatapos ng lahat, kung gumagamit kami ng mga walang kulay na madilim na mga pindutan para sa, sabihin nating, mga pindutan sa pag-navigate o simpleng mga hindi gaanong mahalaga na mga pindutan, hindi iyon magiging isang pagpipilian, tama ba?

Tama Kaya't ito ay magiging isang perpektong pagkakataon upang lumikha ng isang bahagi - partikular, isang heading + teksto + na kumbinasyon ng pindutan. Pansinin kung paano ako lumikha ng isang backdrop na walang kinikilingan na ilaw 'card' upang paganahin ang paggamit ng pindutang may tatak. Katulad nito, ang patlang na walang kinikilingan na ilaw (ang mga patlang ng porma ay karaniwang puti dahil sa modelong pang-kaisipan na kasabay ng kasingkahulugan ng mga form ng papel) ay hindi kamangha-mangha sa walang kinikilingan na background ng ilaw kaya maaari lamang silang magamit sa walang katuturang madilim na background - alinman sa direkta o sa loob isang walang kinikilingan madilim na sangkap. Ito ang paraan kung paano namin nababago ang aming disenyo habang sinusunod ang aming mga patakaran at pinapanatili ang pare-pareho.

Pagsubok ng stress

Sa isip, ang pinakamabilis at pinakamabisang paraan ng pagtiyak sa pagiging matatag sa aming disenyo ay upang subukan ito ng stress. Ang paglalagay ng isang disenyo sa pagsubok ay nangangahulugang malupit. Sabihin nating mayroon kaming nabigasyon na may X dami ng mga nav item dahil iyon ang kinakailangan; upang masiguro ang kakayahang umangkop, subukang baguhin ang mga kinakailangang ito sa pamamagitan ng pagdaragdag ng higit pang mga item sa nav o, upang talagang magtapon ng isang spanner sa mga gawa, subukang magdagdag din ng isang nav item na may mas mataas na hierarchy ng visual kaysa sa iba pa. Pinapayagan ba ng aming mga panuntunan sa laki, palalimbagan at kulay para sa isang katulad nito? O upang mag-alok ng pinakamainam na kakayahang magamit kailangan ba natin ng ibang panuntunan?

Tandaan na mayroong pagkakaiba sa pagitan ng pagdaragdag ng mga patakaran at baluktot ang mga patakaran. Ang higit pang mga kaso ng gilid ay nangangahulugang mas mababa ang pagkakapare-pareho, kaya't sa karamihan ng oras mas mabuti para sa kapakanan ng kakayahang magamit na muling pag-isipang muli ang bahagi.

05. Dokumento at makipagtulungan

Paano namin ginagawang mas madaling gamitin ang aming mga file sa disenyo para sa aming sarili at sa iba pang mga taga-disenyo na maaaring gumamit ng aming file ng disenyo? Kaya, ang pagpapanatiling ligtas na maiimbak sa maaasahang, nakabahaging cloud storage ay mahalaga, tulad ng malalaman mo.

Kulay

Ang unang hakbang ay upang mai-save ang lahat ng mga kulay sa swatch ng 'Mga Dokumentong Kulay' kung hindi pa natin nagawa ito - gagawing madali ang pag-access sa kanila kapag kailangan naming ilapat ang mga ito sa aming disenyo.Upang magawa ito, buksan ang widget ng tagapili ng kulay mula sa Inspector, piliin ang 'Mga Kulay ng Dokumento' mula sa dropdown at pagkatapos ay i-click ang icon na + upang idagdag ang kulay sa swatch. Gumagawa ito ng parehong paraan sa karamihan ng mga tool sa UI.

Mga Nakabahaging Aklatan

Susunod, kailangan naming i-convert ang aming dokumento - kumpleto sa mga istilo ng typographic, kulay, pindutan, karaniwang mga lugar at pangunahing mga bahagi - sa isang nakabahaging library.

Mahalaga na nangangahulugan ito na ang bawat elemento ay kailangang maging isang bahagi, kahit na ito ay binubuo ng isang layer lamang. I-click ang pindutang + ‌ sa kaliwang bahagi ng sidebar ng Mga Aklatan at pagkatapos ay i-import ang mismong dokumento sa isang bagong dokumento. Tama iyan: ang aming dokumento ay isang silid-aklatan na at handa nang magamit upang magdisenyo ng mga UI na may garantisadong pagkakapare-pareho.

Ang InVision Studio ay medyo limitado sa diwa na hindi pa ito nagsi-sync sa opisyal na tool ng Design System Manager ng InVision ngunit sapat na madali itong mailagay ang silid-aklatan sa Dropbox para magamit at ma-update ng ibang mga taga-disenyo sa paglipas ng panahon. Kapag nagawa ang isang pagbabago (lokal o malayo), ang bawat file ng Studio na gumagamit ng silid-aklatan (muli, lokal o malayo) ay magtatanong kung nais mong i-update ang mga kulay at sangkap. Ganito pinananatili ang mga disenyo ng silid-aklatan sa lahat ng mga koponan.

Pagdating sa pagdidisenyo ng mga interface ng gumagamit na biswal na pare-pareho, muling gamitin ang lahat. Magdisenyo ng mga pindutan, pagkatapos ay gumamit ng mga pindutan upang lumikha ng mga bahagi ng pindutan, pagkatapos ay gamitin
mga sangkap ng pindutan upang lumikha ng iba pang mga bahagi tulad ng mga alerto at dayalogo.

Huwag lamang lumikha ng mga sangkap na hindi kinakailangan. Tandaan, ang pagbuo ng isang silid-aklatan ay isang patuloy, nakikipagtulungan na pagsisikap. Hindi ito kailangang makumpleto nang sabay-sabay, nakumpleto mo nang nag-iisa o nakumpleto kailanman. Kailangan lamang nitong maghatid ng isang wika.

Disenyo sa sukatan

Habang lumalawak ang isang disenyo, nagiging mahirap ang pamamahala nito. Mayroong iba't ibang mga pagsasaayos na maaaring gusto naming gawin upang mapanatili itong mahusay at mapanatili, lalo na't ang DSM ng InVision ay hindi pa gumagana sa Studio.

Halimbawa, baka gusto naming gumamit ng mga layer ng teksto upang i-annotate ang aming library bilang isang paraan ng pagpapaliwanag ng mga kaso ng paggamit ng iba't ibang mga elemento. Para sa mga istilong typographic, maaari rin naming mai-edit ang teksto upang maging mas mapaglarawan (hal. "H1> / 1.3 / 44px"). Sinasabi nito h1>Ang s ay dapat na 44px at may taas na linya na 1.3.

Disenyo ng Handoff

Ang mga tool sa handoff ng disenyo ay nagpapakita ng iba't ibang mga istilo na ginagamit ng bawat elemento sa disenyo upang ang mga developer ay maaaring bumuo ng app o website. Ang mga tool na ito ay nagsasama ng isang pangkalahatang-ideya ng mga istilo at din ng isang kopya ng swatch ng 'mga kulay ng dokumento'. Maaari ring kopyahin ng mga developer ang mga istilong ito bilang code, na napakahusay kung napagpasyahan mong lumikha ng anumang nakasulat na dokumentasyon ng disenyo at nais mong isama ang mga representasyon ng snippet ng code ng mga bahagi.

Kung nag-aalala ka tungkol sa pag-troubleshoot at pamamahala ng isang website, tiyakin na makakatanggap ka ng tamang serbisyo sa pagho-host ng web ay makakatulong, ngunit para sa iyong system ng disenyo, ang tool sa handoff ng disenyo ng InVision na, Inspect, ang dapat gamitin. Upang magamit ito, na-click namin ang button na 'I-publish sa InVision' / icon sa InVision Studio, buksan ang nagresultang URL at pagkatapos ay i-tap upang lumipat sa Inspect Mode. Maginhawa talaga ito.

Ang nilalamang ito ay orihinal na lumitaw sa net magazine.