Дастури ниҳоии тарроҳии UI

Мундариҷа

• 01. Матбааи худро интихоб кунед
• 02. Палеткаи ростро интихоб кунед
• 03. Истинодҳо ва тугмаҳо
• 04. Ҷузъҳои худро созед
• 05. Ҳуҷҷатгузорӣ ва ҳамкорӣ кунед

Тарроҳии интерфейси корбар чист? Саволи беҳтаре мебуд, ки воқеан ба тарроҳии интерфейси корбар чӣ дохил мешавад? Эстетика? Истифодабарӣ? Дастрасӣ? Ҳамаи онҳо? Чӣ гуна ҳамаи ин омилҳо муттаҳид мешаванд, то таҷрибаи оптималии корбарон фароҳам оварда шавад ва кадомҳо бояд дар ҷои аввал бошанд?

Дастрасӣ бояд ҳамеша дар ҷои аввал бошад ва заминаи истифодаи оптималиро фароҳам орад (бо истифода аз вебсайти беҳтарин дар ин ҷо кӯмак хоҳад кард). Ва он гоҳ, вақте ки интерфейси ҳам дастрас ва ҳам қобили истифода аст, он бояд аллакай аз ҷиҳати эстетика хеле хуб ба назар расад (асбобҳои тарроҳии интерфейс дар ин ҷо кӯмак хоҳанд кард). Сипас, то боварӣ ҳосил кунед, ки тарроҳии шумо дар ҳама сатҳҳо кор мекунад, ба шумо лозим меояд, ки онро ҳамаҷониба санҷед, ки шумо метавонед онро бо интихоби беҳтарин абзорҳои санҷиши корбарон анҷом диҳед. Биёед ба унсурҳои бунёдии аксари тарҳҳо бодиққаттар назар кунем ва барои таъмини мутобиқати визуалӣ чӣ кор кардан мумкин аст.

01. Матбааи худро интихоб кунед

Типографияи олӣ (ба монанди бисёр ҷанбаҳои тарроҳӣ) то дастрасӣ ба поён мерасад. Тарроҳии визуалӣ албатта ба таҷрибаи умумии корбар илова мекунад, аммо дар охири рӯз корбарон бо интерфейси интерактивӣ муносибат мекунанд, на ҳамчун санъат. Ҳарфҳои фаҳмо боиси возеҳият ва калимаҳои хондашаванда мебошанд, ки ба корбарон самаранок ҳазм кардани мундариҷаро кӯмак мекунанд. Ҳарду аз ҳама эстетикаи визуалӣ муҳимтаранд.

Аммо, типографияи хуб тарҳрезишуда ҳанӯз ҳам аз ҷиҳати эстетикӣ қаноатбахш буда метавонад. Helvetica (ё ҳуруфи шабеҳ) -и сиёҳ-сафед пас аз чанд такмили оддии типографӣ метавонад як чизи зебоӣ бошад. Бо такмилдиҳӣ мо тахрири андозаи ҳуруф, баландии сатр, фосилаи ҳарфҳо ва ғайраро дар назар дорем - на шрифт ё ранги матн.

'Зебо' типография воқеан зишт аст, вақте ки онро хондан мумкин нест, зеро ноумедӣ ҳамеша эстетикаро баланд мекунад. Тарроҳии хуб мутавозин ва ҳамоҳанг аст.

Мисли бисёр ҷанбаҳои тарроҳии интерфейс, танзими дақиқи визуалӣ барои тавозуни дастрасӣ ва эстетика душвор нест. Мушкилот нигоҳ доштани муттасилӣ дар тамоми тарҳ аст. Мутобиқат иерархияи возеҳи байни унсурҳои дорои аҳамияти мухталифро муқаррар мекунад, ки дар навбати худ ба корбарон кӯмак мекунад, ки интерфейсро зудтар фаҳманд ва ҳатто мундариҷаро самараноктар ҳазм кунанд.

Вақте ки сухан дар бораи қобилият ва хондан меравад, андозаи ҳадди аққали қобили қабул, ки аз ҷониби WCAG 2.0 Дастури дастрасии мундариҷаи веб муайян карда шудааст, 18pt (ё 14pt ғафс) аст. Беҳтарин андозаи ҳуруфот барои истифода асосан аз худи шрифт вобаста аст, аммо муҳим аст, ки иерархияи визуалӣ ва чӣ гуна ин андозаи худро аз хулосаҳо ва сарлавҳаҳо фарқ кунад (яъне h1>, h2>, h3>).

Бо воситаи тарроҳии интерфейси интихобкардаи худ (мо InVision Studio -ро истифода хоҳем кард), як қатор қабатҳои матнро эҷод кунед (Т.) ва сипас ҳамаи андозаҳоро мувофиқат кунед, то бо қолаби зерин алоқаманд бошанд:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• саҳ>: 18px

Бо InVision Studio (ва ҳамаи дигар абзорҳои тарроҳии интерфейси), ин бо роҳи танзими услубҳо бо истифодаи панели Inspector дар тарафи рост анҷом дода мешавад.

Баъдан ҳуруфи худро интихоб кунед, аммо эҳтиёт шавед, зеро он чизе, ки шумо метавонед бо баъзе ҳуруфҳо мушоҳида кунед, ин 18px мебошад саҳ> ва 22px h3> на он қадар фарқ мекунад. Мо ду интихоб дорем: андозаи ҳуруфҳоро такмил диҳед ё барои сарлавҳаҳо шрифти дигарро баррасӣ кунед. Агар шумо пешбинӣ кунед, ки тарроҳии шумо матн вазнин хоҳад буд, бо охирин биравед.

Дар хотир доред, ки:

• Тарроҳии визуалии интерфейси аксар вақт як усули эҳсоси рӯда аст
• Ҳеҷ чиз қарор нест; ҳама чиз метавонад тағйир ёбад

Баландии хат

Баландии оптималии хатҳо кафолат медиҳад, ки сатрҳои матн дар байни онҳо фосилаи кофӣ доранд, то ки сатҳи хуби хондан ба даст оранд. Ин торафт бештар ҳамчун 'стандарт' эътироф карда мешавад; Воситаи Lighthouse Audit Google ҳатто онро ҳамчун чеки дастӣ пешниҳод мекунад (ё ҳатто парчам, агар матн дорои пайвандҳое бошад, ки дар натиҷаи баландии сатри оптималӣ метавонанд ба ҳам наздик бошанд).

Бори дигар, WCAG дар ин кор ба мо кӯмак мекунад ва изҳор медорад, ки баландии сатр бояд андозаи ҳуруфро 1,5 баробар кунад. Ҳамин тавр, дар асбоби тарроҳии интерфейси худ дар зери 'Line' (ё ба ин монанд), андозаи ҳуруфро ба андозаи ҳадди аққал - 1,5 зарб кунед. Мисол, агар матни бадан 18px бошад, пас баландии сатр 27px хоҳад буд (18 * 1,5 - шумо инчунин метавонед амалиётҳои математикаро бевосита дар Inspector иҷро кунед). Боз ҳам, дар хотир доред, ки агар 1.6x худро беҳтар ҳис кунад, 1.6x истифода баред. Дар хотир доред, ки ҳуруфҳои гуногун натиҷаҳои гуногун медиҳанд.

Дар бораи истифодаи маълумоти воқеӣ дар тарроҳии худ фикр кардан барвақт аст, аммо, ҳадди аққал, мо бояд то ҳол маълумоти каме воқеъбинро истифода барем (ҳатто lorem ipsum). InVision Studio дорои як барномаи воқеии воқеии додаҳо мебошад, ки ба мо кӯмак мекунад, ки типографияамон дар асл чӣ гуна бошад.

Фосилаи параграф

Фосилаи параграфҳо услубе нест, ки мо онро бо истифода аз Inspector Studio InVision Studio эълон кунем. Ба ҷои ин, ба мо лозим аст, ки қабатҳои қабатҳои худро бо истифода аз Дастури оқилона (() ҳамоҳанг созем. Монанд ба баландии хат, мултипликатори ҷодугарӣ 2х аст (андозаи ҳуруфро ду баробар). Мисол, агар андозаи ҳарф 18px бошад, пас пеш аз ворид шудан ба блоки матни оянда бояд ҳадди аққал 36px ҷой дошта бошад. Фосилаи ҳарфҳо бояд на камтар аз 0,12 бошад.

Бо вуҷуди ин, то он даме, ки мо ба эҷоди ҷузъҳо шурӯъ накунем, дар ин бора хавотир нашавем.

Услубҳои муштарак

Агар асбоби тарроҳии интерфейси шумо онро дастгирӣ кунад (InVision Studio ҳоло ҳам нест), дар бораи табдил додани ин услубҳои типографӣ ба 'Услубҳои муштарак' фикр кунед, то онҳоро зуд истифода баранд ва ҳангоми мутобиқати визуалӣ. Ин одатан тавассути нозир анҷом дода мешавад.

02. Палеткаи ростро интихоб кунед

Интихоби рангҳои комил барои тарроҳии шумо аз доираи эстетика берун аст: он метавонад тамоми иерархияи сайти шуморо огоҳ созад.

Вақте ки сухан дар бораи тарҳрезии интерфейс меравад, одатан ранг яке аз аввалин чизҳое мебошад, ки мо бо он дӯст медорем, аммо ба мо таълим медиҳанд, ки ғаввосӣ ба тарроҳии визуалӣ кори бад аст. Ин албатта дуруст аст, аммо вақте ки сухан дар бораи мутобиқати визуалӣ меравад, ранг бояд боиси нигаронии аввалиндараҷа бошад, зеро он нақшҳои дигарро мебозад.

Ранг дар тарҳрезии интерфейс метавонад муассир бошад, аммо азбаски баъзе корбарон (дарвоқеъ) аз намудҳои гуногуни маъюбии визуалӣ ранҷ мебаранд, на ҳамеша боэътимод аст. Гуфта мешавад, ки ин на ҳатман дар бораи ранги мушаххаси истифодашуда, балки бештар аз навъи ранг аст. Вақте ки сухан дар бораи брендинг меравад, ин метавонад дуруст набошад, зеро ранг барои таъсири эҳсосӣ дар ин робита истифода мешавад, аммо, дар тарҳрезии UI, ранг инчунин барои муоширати ният, маъно ва албатта, иерархияи визуалӣ истифода мешавад.

01. Старк
Васлкунаки Stark бо Sketch ва Adobe XD мувофиқ аст ва ба шумо кӯмак мекунад, ки фарқияти рангҳоро санҷед ва нобиноии рангро мустақиман аз канвас тақлид кунед. Дастгирӣ барои Figma ва InVision Studio ба зудӣ пешкаш мешавад.
02.Рангҳо
Рангҳо маҷмӯи иборат аз 90 таркиби ранг аст, ки миқдори мувофиқи контрасти рангро барои қонеъ кардани дастурҳои WCAG 2.0 доранд - баъзеи онҳо ҳатто ҷавобгӯи стандарти AAA мебошанд.
03. Лоиҳаи A11y
Лоиҳаи A11y як маркази азим барои ҳама чизҳои дастрасӣ мебошад. Он захираҳо, асбобҳо, маслиҳатҳо, дастурҳоро дар бар мегирад ва аз ҷониби созандаи плагини Stark сохта шудааст ва аз InVision маблағгузорӣ мегирад.

Се намуди ранг

Рангҳо маъно доранд, аз ин рӯ муҳим аст, ки шумораи онҳо зиёд набошад. Аз ҳад зиёди маъноҳо чизҳои бештаре ба вуҷуд меоянд, ки корбар бояд онҳоро дарк кунад ва дар ёд дорад - на таркиби рангҳои бештарро барои мо хавотир кардан лозим аст. Умуман, ин формати тавсияшаванда хоҳад буд:

• Ранги даъват ба амал (инчунин ранги асосии бренд)
• Ранги торики бетараф (барои унсурҳои интерфейс ё ҳолати торик беҳтар аст)
• Барои ҳамаи ин чизҳои дар боло овардашуда, варианти каме сабуктар ва ториктар

Ин имкон медиҳад, ки зерин:

• Ҳолати тира ба осонӣ ба даст хоҳад омад
• Ранги CTA-и мо ҳеҷ гоҳ бо рангҳои дигар мухолифат намекунад
• Дар ҳама гуна сенария мо метавонем таъкид кунем ва таъкид кунем

Палетаи худро насб кунед

Бо асбоби тарроҳии интерфейси интихобкардаи худ, барои ҳар як ранг як artboardи хеле калон (крани А) созед (бо номи 'Brand', 'Neytral / Light' and 'Neytral / Dark'). Пас, дар ҳар як тахта росткунҷаҳои хурди иловагӣ эҷод кунед, ки вариантҳои ториктар ва сабуктари ранг ва инчунин рангҳои дигарро нишон медиҳанд.

Мо каме сабуктар ва ториктар мешуморем, ки мутаносибан 10 фоизи иловагии сафед ва 10 фоизи иловагии сиёҳ. Вақте ки шумо ба итмом мерасед, нусхаи сабкҳои типографиро дар ҳар як артборд намоиш диҳед. Ранги ин қабатҳои матнӣ бояд нури бетараф бошад, ба истиснои лавҳаи нури бетараф, ки он ҷо бояд торики бетараф бошад.

Баръакс

Баъд, ба мо лозим меояд, ки рангҳои худро барои муқоисаи оптималии ранг тафтиш кунем. Воситаҳои гуногун мавҷуданд, ки ин корро карда метавонанд, масалан, плагини Stark барои Sketch ва Adobe XD ё Contrast for macOS - аммо ҳалли онлайн ба монанди Contrast Checker ё Color Contrast Checker хеле хуб хоҳад буд.

Контрасти рангро барои ҳар як комбинатсия тафтиш кунед ва рангҳоро мувофиқан ислоҳ кунед. Агар шумо боварӣ надоред, ки кадом рангҳоро истифода баред, тавсияҳои Color Safe -ро истифода баред.

03. Истинодҳо ва тугмаҳо

Андоза

Тугмаҳо ва истинодҳо, ба монанди типография, бояд якчанд вариант дошта бошанд. Дар ниҳоят, на ҳама амалҳо дорои аҳамияти якхела мебошанд ва тавре ки мо қаблан муҳокима кардем, ранг усули боэътимоди муошират аст, бинобар ин он усули асосии таъсиррасонӣ ба иерархияи визуалӣ буда наметавонад. Мо инчунин бояд бо андоза бозича кунем.

Санҷиши вобастагии визуалӣ ин озмоиши қобилияти истифодашавандаест, ки ҳадафҳои ламсро клик кардан мумкин аст ё не. Тарҳро аз Studio то Freehand ҳамоҳанг кунед (⌘⇧F), URL-и натиҷагирифтаро ба озмоишгарон фиристед ва аз онҳо унсурҳои ба боварӣ кликшавандаро гирд оред.

Корбарони Non-InVision Studio низ метавонанд Freehand -ро истифода баранд, аммо корбарони InVision Studio метавонанд тарҳҳои худро ба Freehand аз InVision Studio мустақиман роҳандозӣ кунанд, ки ин роҳи зудтарин ва муассиртарини ба даст овардани аксуламали визуалӣ аз корбарон мебошад.

Одатан, мо тавсия медиҳем, ки матни тугма ҳамчун 18px эълон карда шавад (ҳамон тавре ки матни бадан), аммо худи тугмаҳо се варианти андозаи худро доранд:

• Муқаррарӣ: Дар баландии 44px (кунҷҳои ҳамаҷониба: 5px)
• Калон: 54px дар баландӣ (кунҷҳои ҳамаҷониба: 10px)
• Илова калон: Дар баландии 64px (кунҷҳои ҳамаҷониба: 15px)

Ин ба мо имкон медиҳад, ки баъзе тугмаҳо бидуни такя ба ранг муҳимтар пайдо шаванд ва инчунин тугмаҳои лона (масалан, тугмаро дар майдони формаи намуди ҳадди ақал истифода баред).

Чуқурӣ

Сарфи назар аз он, ки ҳадафи ламс кнопка ё майдони форма аст, бояд сояҳо барои баланд бардоштани чуқурӣ истифода шаванд ва аз ин рӯ интерактивиро пешниҳод кунанд. Услуби ягонаи соя барои ҳама вариантҳои тугмаҳо ва майдонҳои форма хуб аст.

Интерактивӣ

Ҳар навъи тугма барои тағир додани ҳолати ҷойивазкунии он ба дитаргуние ниёз дорад. Ин ба корбар равшан месозад, ки он чизе, ки онҳо мекӯшиданд, комилан хуб аст ва кафолат медиҳад, ки онҳо бетаъхир иҷро мекунанд.

Ин дарвоқеъ яке аз ҷанбаҳои мураккаби нигоҳ доштани мутобиқати визуалӣ мебошад, зеро ранг аксар вақт услуби мусоидро ҳангоми тағир додани давлат тағйир медиҳад. Хушбахтона, ин тағиротҳои давлатӣ метавонанд нисбатан нозук бошанд, аз ин рӯ тағир додани ранг ба варианти каме сабуктар ва ё ториктараш хуб аст - ин барои онҳост. Ин ба пайвандҳо низ дахл дорад.

Тасмимгирӣ бар зидди ин боис мешавад, ки рангеро истифода барем, ки ё аллакай маънои муҳиме дошта бошад ва дар натиҷа корбарон ошуфта шаванд ва ё дар сурати интихоби ранги дигар тасмим гиранд. Қарори истифодаи ранги дуюмдараҷа комилан хуб аст, аммо он бояд барои визуализатсияи маркетинг на унсурҳои интерфейси захира карда шавад. Камтар бештар аст (ва осонтар).

Дар хотир доред, ки ин қадамро барои ҳар як artboard такрор кунед. Тугмачаҳои тамғаи CTA-ро дар artboard бренди дохил накунед - баъдтар мо дар бораи он рӯй хоҳем дод, ки вақте баъзе комбинатсияҳо кор намекунанд.

04. Ҷузъҳои худро созед

Ҷузъҳо як вақтро сарфа мекунанд ва ҳамаи асбобҳои тарроҳии интерфейс ин хусусиятро пешниҳод мекунанд (масалан, дар Sketch, онҳоро Symbols меноманд). Дар Studio мо метавонем компонентҳоро бо интихоби ҳамаи қабатҳои, ки бояд ҷузъро ташкил диҳанд ва бо истифода аз ⌘ эҷод кунемК. миёнабур.

Истифодаи ҷузъҳо

Вайрефреймҳо на танҳо барои тарроҳии интерфейсҳои коршоям, балки барои фаҳмидани он, ки интерфейси мо дар оянда чӣ талаб мекунад, хеле муфиданд. Ин як навъ ба далели оянда монанд аст.

Ин маънои онро надорад, ки мо бояд ҷузъҳои зиёдеро таҳия кунем ё ба ҳама гуна сенарияи имконпазир омода бошем, аммо ин маънои онро дорад, ки мо бояд муносибати "Чӣ бояд кард?"

Масалан, агар чаҳорчӯбаи симии мо ҷузъи 3x1-ро талаб кунад, вале мо медонем, ки мундариҷа дар санг гузошта нашудааст, каме тафаккур моро ба андеша водор мекунад: 'Агар ин ҷузъҳо ба 4x1 хотима ёбанд?'. Қоидаи возеҳ чунин аст: тарҳрезӣ танҳо барои эҳтиёҷоти корбар, ки аллакай мавҷуданд, аммо кӯшиш мекунанд, ки ҳалли худро нисбатан фасеҳ кунанд. Дар акси ҳол, мо бо қарзи тарроҳии хеле бетартибона баъдтар аз хатти боло хоҳем рафт.

Ҳоло мо метавонем ин ҷузъро тавассути кашонидани он ба рони аз Китобхонаҳо> Ҳуҷҷат дар тарафи чап истифода барем, гарчанде дар хотир доред, ки ин ҷараёни кор вобаста ба асбоби интерфейси шумо фарқ карда метавонад.

Ин усули эҷоди дастурҳои услубӣ (ва дар ниҳоят худи тарроҳиро эҷод кардан) махсусан бо тарҳбандии модулӣ / кортӣ хуб кор мекунад, гарчанде ки 'минтақаҳои маъмул', ба монанди сарлавҳаҳо, поёнҳо ва навигатсияҳо, инчунин номзадҳои беҳтарин барои як ҷузъ мебошанд.

Чӣ тавре ки мо бо услубҳои типографӣ, рангҳо ва тугмаҳои худ кор кардем, мо бояд фаромӯш накунем, ки ҷузъҳои худро бодиққат тартиб диҳем.

Истифодаи қоидаҳои мо

Пештар мо дар бораи истифода накардани тугмаҳои тамғаи CTA дар болои ранги бренд эрод гирифтем, зеро тугмаҳои брендии CTA, бешубҳа, бояд дар байни ҳама чизҳои дигар фарқ кунанд. Пас, чӣ гуна мо метавонем дар бораи эҷоди як ҷузъи брендӣ дар ҳоле, ки ҳанӯз ҳам тавони истифода бурдани тугмаи тамғаи CTA дошта бошем? Дар ниҳоят, агар мо тугмаҳои торики бетарафро барои истифода, истифода барем, бигӯем, тугмаҳои навигатсия ё тугмаҳои соддатар муҳим, ки ин танҳо имконе нахоҳад буд, дуруст аст?

Дуруст. Ҳамин тавр, ин як имконияти беҳтарин барои сохтани ҷузъе хоҳад буд - алахусус, таркиби сарлавҳа + матн + тугма. Аҳамият диҳед, ки чӣ гуна ман заминаи нури бетараф 'корт' -ро барои эҷоди истифодаи тугмаи тамға эҷод кардам. Ба ҳамин монанд, майдони шакли нури бетараф (майдонҳои форма одатан аз сабаби модели равонӣ, ки таърихан бо шаклҳои коғазӣ ҳаммаъно мебошанд) дар заминаи рӯшноии бетараф аҷиб ба назар намерасанд, бинобар ин онҳо танҳо дар заминаи торики бетараф - мустақиман ё дар дохили он истифода мешаванд ҷузъи торики бетараф. Ҳамин тавр мо тарзи худро ҳангоми риоя кардани қоидаҳои худ ва нигоҳ доштани мутобиқат чандир месозем.

Озмоиши стресс

Идеалӣ, роҳи зудтарин ва муассиртарини таъмини устуворӣ дар тарҳи мо ин озмоиши стресс мебошад. Ба озмоиш гузоштани тарҳ маънои бераҳм буданро дорад. Биёед бигӯем, ки мо новбари X миқдори ашёи нав дорем, зеро ин талабот буд; бо мақсади ба таври воқеӣ таъмин намудани чандирӣ, кӯшиш кунед, ки ин талаботро бо илова кардани ашёи нави нав иваз намоед ё дарвоқеъ дар дастгоҳ калидро ба кор андозед, инчунин кӯшиш кунед, ки як ҷузъи навро бо иерархияи визуалӣ баландтар аз дигарон илова кунед. Оё қоидаҳои андоза, типография ва ранги мо ба ин монанд имкон медиҳанд? Ё барои пешниҳоди корбурди оптималӣ ба мо як қоидаи дигар лозим аст?

Дар хотир доред, ки байни илова кардани қоидаҳо ва хам кардани қоидаҳо фарқияте ҳаст. Ҳодисаҳои бештари канорӣ маънои пайдарпайии камтарро доранд, аз ин рӯ, аксар вақт ба хотири истифодаи қобилияти беҳтар кардани ҷузъ беҳтар аст.

05. Ҳуҷҷатгузорӣ ва ҳамкорӣ кунед

Чӣ тавр мо файлҳои тарроҳии худро барои худ ва ҳам барои тарроҳони дигаре, ки метавонанд файли тарроҳии моро истифода баранд, осонтар кунем? Хуб, бехатар нигоҳ доштани онҳо дар анбори боэътимоди муштараки абр муҳим аст, зеро шумо мефаҳмед.

Рангҳо

Қадами аввал ин аст, ки ҳамаи рангҳоро ба 'Рангҳои Ҳуҷҷатӣ' захира кунед, агар мо инро то ҳол накардаем - ин дастрасии онҳоро ҳангоми осонтар кардани он дар вақти тарроҳии мо осон мекунад.Барои ин, виҷети интихобкунандаи рангро аз Inspector кушоед, аз афтанда 'Colors Document' -ро интихоб кунед ва баъд тасвири + -ро пахш кунед, то ки ранги рангро илова кунед. Ин дар аксари асбобҳои UI низ ҳамин тавр кор мекунад.

Китобхонаҳои муштарак

Сипас, мо бояд ҳуҷҷати худро пурра бо сабкҳои типографӣ, рангҳо, тугмаҳо, майдонҳои умумӣ ва ҷузъҳои асосӣ ба китобхонаи муштарак табдил диҳем.

Моҳиятан ин маънои онро дорад, ки ҳар як унсур бояд ҷузъ бошад, ҳатто агар он танҳо аз як қабат бошад. Тугмаи + ‌-ро дар панели Китобхонаҳо дар тарафи чап пахш кунед ва пас худи ин ҳуҷҷатро ба ҳуҷҷати нав ворид кунед. Дуруст аст: ҳуҷҷати мо ҳоло китобхона аст ва омода аст барои тарроҳии интерфейсҳо бо мутобиқати кафолатнок истифода шавад.

InVision Studio аз он ҷиҳат то андозае маҳдуд аст, ки ҳанӯз бо асбоби расмии тарроҳии системаи менеҷери InVision ҳамоҳанг намешавад, аммо дар Dropbox ҷойгир кардани китобхона ба осонӣ кофист, то дигар дизайнерҳо бо мурури замон истифода ва навсозӣ кунанд. Вақте ки тағирот ворид карда мешавад (ба таври маҳаллӣ ё дурдаст), ҳар як файли Studio, ки китобхонаро истифода мебарад (дубора, маҳаллӣ ё фосилаи дур) мепурсад, ки оё шумо рангҳо ва ҷузъҳоро навсозӣ кардан мехоҳед. Ин аст китобхонаҳои тарроҳӣ дар байни гурӯҳҳо.

Вақте ки сухан дар бораи тарроҳии интерфейсҳои корбарӣ меравад, ки ба таври визуалӣ мувофиқанд, ҳама чизро дубора истифода баред. Тугмаҳои тарроҳӣ, пас тугмаҳоро барои сохтани ҷузъҳои тугма истифода баред, пас истифода баред
ҷузъҳои тугма барои сохтани ҷузъҳои дигар, ба монанди огоҳӣ ва муколама.

Танҳо ҷузъҳои нодаркорро эҷод накунед. Дар хотир доред, ки сохтани китобхона як кӯшиши доимӣ ва муштарак аст. Он набояд ҳама якбора ба анҷом расад, танҳо шумо анҷом диҳед ё ҳамеша иҷро кунед. Он танҳо бояд забонеро расонад.

Тарҳрезӣ дар миқёс

Бо васеъ шудани тарҳ, идоракунии он сахттар мешавад. Тағиротҳои мухталифе ҳастанд, ки мо мехоҳем онҳоро барои самаранок ва нигоҳдорӣ нигоҳ дорем, хусусан азбаски InVision DSM ҳоло бо Studio кор намекунад.

Масалан, мо метавонистем қабатҳои матниро барои шарҳи китобхонаи худ ҳамчун воситаи шарҳи ҳолатҳои истифодаи унсурҳои гуногун истифода барем. Барои сабкҳои типографӣ, мо метавонистем ҳатто матнро барои тавсифи бештар таҳрир кунем (масалан "h1> / 1.3 / 44px"). Ин мегӯяд h1>s бояд 44px ва баландии сатр 1,3 дошта бошад.

Тарроҳии дастӣ

Воситаҳои тарроҳии тарроҳӣ сабкҳои гуногунро, ки ҳар як унсури тарроҳӣ истифода мебаранд, нишон медиҳанд, то таҳиягарон барнома ё вебсайтро сохта тавонанд. Ин воситаҳо шарҳи услубҳо ва инчунин нусхаи 'рангҳои ҳуҷҷат' -ро дар бар мегиранд. Таҳиягарон ҳатто метавонанд ин сабкҳоро ҳамчун рамз нусхабардорӣ кунанд, ки агар шумо тасмим гирифта бошед, ки ягон ҳуҷҷати тарроҳии хаттӣ эҷод кунед ва мехоҳед намоиши рамзи ҷузъҳои компонентро дохил кунед.

Агар шумо дар бораи ҳалли мушкилот ва идоракунии вебсайт ташвиш дошта бошед, боварӣ ҳосил кунед, ки хидмати дурусти хостинги веб ба шумо кӯмак мерасонад, аммо барои системаи тарроҳии шумо, асбоби тарроҳии тарроҳии InVision, Inspect, чизи истифодашаванда аст. Барои истифода аз он, мо тугмаи 'Нашр кардан ба InVision' -ро дар InVision Studio пахш карда, URL-и натиҷагирифтаро кушоед ва пас барои гузаштан ба Режими Тафтиш клик кунед. Ин дар ҳақиқат қулай аст.

Ин мундариҷа ибтидо дар маҷаллаи net пайдо шуд.