01 з 09
Як атрымаць сабе працу з UXPin
Па меры прасоўвання ў галіне мабільнага дызайну, дызайн прыкладанняў і адаптыўны дызайн назіраецца ўсё большая ўвага на UX (User Experience) і Wireframing , інтэрактыўнага прототипирования і макетах. Ёсць тона інструментаў там, накіраваных на гэту нішу, і яны працуюць у поўнай гамай ад комплексу, маюць нагружаныя бегемотаў да нешматлікія і ледзь карысным. Адным з інструментаў, якія прыцягнулі маю ўвагу гэта UXPin проста таму, што ён быў распрацаваны дызайнерамі для дызайнераў.
Перад тым, як рухацца наперад ... адзін нюанс. Калі ў вас ёсць арганізацыя, якая аддае перавагу валодаць праграмным забеспячэннем, тым UXPin не для вас. Усе працы, праведзенай у гэтым дадатку выконваецца ў браўзэры і праекты захоўваюцца захоўваюцца ў вашай ўліковага запісу.
Каб пачаць працу з UXPin вы запускаеце браўзэр і галаву UXPin. Тут вы можаце падпісацца на бясплатную пробную або арганізаваць штомесячны план, заснаваны на вашай чаканай патрэбы. Працэс рэгістрацыі даволі просты, і як толькі вы ўсталявалі імя карыстальніка і пароль, ваш гатовыя пачаць.
02 з 09
Як пачаць праект у UXPin
Калі вы увайсці вы з'явіцеся на прыборнай панэлі, і адсюль вы можаце вырашыць, каб стварыць новы каркас, новы мабільны праект або Спагадны праекта вэб-дызайну. Ёсць таксама убудовы для UXPin, якія дазволяць вам ўнесці ў вашых праектах Photoshop або эскіза. Для гэтага Як я збіраюся стварыць банер з тэкстам і дадаць кнопку электроннай пошты для банэра. Для дасягнення гэтай мэты я выбраў Стварыць новы каркас.
03 з 09
Як выкарыстоўваць UXPin інтэрфейс
Дызайн паверхні разбіваецца на чатыры вобласці. У чорнай вобласці злева ўяўляюць сабой шэраг інструментаў, якія дазваляюць вярнуцца да прыборнай панэлі, адкрыйце Elements вы будзеце выкарыстоўваць, адкрыйце панэль смарт-элементы, пошук элементаў, дадаваць нататкі на старонку і дадаць член каманды. У ніжняй частцы знаходзіцца кнопка, якая адкрывае кароткі падручнік, іншы, што дазваляе атрымаць доступ да ўліковага запісу і іншы, які атрымлівае доступ да FAQ, давайце вы будзеце задаваць пытанні і нават забяспечыць зваротную сувязь.
У сіняй вобласці ўздоўж верхняй ўяўляюць сабой шэраг інструментаў і уласцівасцяў. Больш цёмныя кнопкі на правай баку дазваляюць перабіраць свой праект, наладзіць параметры праекта, падзяляюць старонку і зрабіць мадэляванне ў браўзэры старонкі.
Панэль элементаў з'яўляецца, дзе вы бераце біты і кавалкі для дызайну паверхні, назва вашага праекта і дадаць або выдаліць старонкі.
Бібліятэка Elements з'яўляецца прыемным сюрпрызам для дызайнераў UX. Гэта поп-уніз дазваляе выбраць з Anon 30 бібліятэк, пачынаючы ад прашыўкі для Android Lolipop Як у вас ёсць доступ да загрузніку і элементы Foundation разам з узрушаючым абразкамі шрыфтоў, абразкамі жэсту для мабільных і калекцыі сацыяльных віджэтаў.
04 з 09
Як дадаць элемент на старонцы UXPin
Для пачатку я перацягнуў элемент скрынкі да паверхні дызайну і, калі я адпускаю мыш, панэль Properties адчыняецца. Кнопка Properties дазваляе назваць элемент і ўсталяваць шырыню і вышыню пазіцыі значэння элемента. Вы можаце таксама дадаць водступы да элемента, закругліць куты і наладзіць яго празрыстасць. Пры націску на кнопку Колер фону адкрывае палітру RGBA колеру.
Вы таксама можаце прызначыць шрыфт, межы і шаблон да абранага элементу. Маланка дае вам магчымасць дадаваць інтэрактыўнасць да абранага элементу.
05 з 09
Як дадаць і адфарматаваць тэкст у UXPin
Для таго, каб дадаць тэкст, перацягнуць тэкставы элемент дызайну паверхні і ўвядзіце тэкст. Націсніце кнопку Text Property , каб адкрыць ўласцівасць шрыфта і фарматаванне тэксту. Калі вам патрэбен блок манекена тэксту, дадаць тэкставы элемент і націсніце кнопку GENERATE Lorem Ipsum ва ўласцівасцях шрыфта.
06 з 09
Як дадаць малюнак у UXPin Старонка
Ёсць некалькі спосабаў вырашэння гэтай задачы. Вы можаце выкарыстоўваць інструмент Image на панэлі інструментаў, дадаць элемент малюнка з бібліятэкі ці проста перацягнуць малюнак з працоўнага стала на элемент на паверхні канструкцыі , як паказана вышэй.
07 з 09
Як дадаць кнопкі ў UXPin Page
Хоць ёсць кнопка элемент, увёўшы «Button» у вобласць пошуку, як паказана вышэй, адкрывае ўсе кнопкі знойдзеных ва ўсіх бібліятэках. Перацягнуць адзін, які працуе для вас на працоўную паверхню і выкарыстоўваць ўласцівасці, каб змяніць колер, шрыфт, і нават радыус Border. Для таго, каб змяніць тэкст ўнутры кнопкі, адзін раз націснуць на тэкст і ўвядзіце новы тэкст.
08 з 09
Як дадаць інтэрактыўнасці на старонку UXPin
Гэта не так складана, як гэта можа здацца на першы погляд. Для ўводу электроннай пошты, я дадаў элемент ўводу, змянення памеру яго, увайшоў у тэкст і фарматаваны тэкст. З уваходным элементам , абраным націсніце кнопку Уласцівасці і, калі ўласцівасці элемента з'яўляюцца націсніце бачнасцю кнопку- вочнага яблыка - у правым верхнім куце панэлі.
Націсніце кнопку і націсніце кнопку ўзаемадзеяння - Маланка Bolt- ва ўласцівасцях. Калі адкрыецца панэль Ўзаемадзеяння, абярыце новае ўзаемадзеянне. Выберыце Націсніце ад Trigger выскачыць ўніз. У вобласці дзеянняў выберыце Show Element. Вы зараз спытаць, які элемент, каб паказаць. Націсніце адзін раз на gunsite і націсніце на элемент ўводу. З элементам ідэнтыфікаваным, зараз вы можаце вызначыць, ці з'яўляецца аніміраваць элемент. У гэтым выпадку я вырашыў паказаць акно ўводу з лёгкасцю і пайшоў са значэннем па змаўчанні працягласць 300 мс.
Я таксама хачу, каб кнопка перамяшчэння каля 65 кропак направа пры пстрычцы. Я абраў кнопку, адкрыў панэль узаемадзеянняў і выбраны новае ўзаемадзеянне. Я выкарыстаў наладзіць кампутар:
- Trigger: Націсніце
- Дзеянне: Перанесці
- Move Direction: 65 кропак на восі х
- Анімацыя: Лінейны
- Працягласць: 300 мс
Каб выдаліць ўзаемадзеянне выбраць элемент і адкрыць панэль узаемадзеянняў. Выберыце ўзаемадзеянне ў панэлі і націсніце Trash Can, каб выдаліць яго.
09 з 09
Як праверыць свае старонкі UXPin
У сувязі з тым, вы працуеце ў браўзэры, тэставанне мёртвы проста. Націсніце кнопку Simulate Design. Адкрыецца старонка ў браўзэры, і вы можаце праверыць шлях. Там будзе таксама панэль дадаецца ў левай частцы старонкі, якая дазваляе Каментары, карта сайта, калі ёсць некалькі старонак, Юзабіліці тэставанне, Жывая Sharing, рэдагаванне і вяртанне да панэлі кіравання.
У ніжняй частцы старонкі знаходзіцца яшчэ адна невялікая панэль, якая дазваляе паказваць інтэрактыўныя элементы, паказаць ці схаваць каментары і падзяліцца спасылкай з іншымі праектамі.