01-ден 09-ге дейін
Өзіңді қалай алуға болады UXPin-тен басталды
Біз мобильді дизайн саласындағы көшеміз, бағдарлама дизайнына және дизайнерлік дизайнға UX (User Experience) және wireframing , интерактивті прототиптер және мокапсаттарға көбірек көңіл бөлінуде. Онда бұл орынға бағытталған құралдардың тоны бар, олар күрделі, нәзік бегемоттарды сирек және әрең пайдалыға дейін толыққанды басқарады. Менің көзімді ұстап тұрған құралдардың бірі - UXPin, ол дизайнерлер дизайнерлер үшін әзірленген.
Алға жылжудың алдында ... ескерту. Егер сіздің компанияңыз бағдарламалық жасақтамаға ие болғысы келсе, UXPin сіз үшін емес. Бұл бағдарламадағы барлық жұмыстар браузерде жасалады және сіз сақтаған жобалар сіздің есептік жазбаңызға сақталады.
UXPin-тен бастауды бастау үшін браузерді іске қосып, UXPin-ге жіберіңіз. Осы жерден сіз Тегін сынақ нұсқасына тіркеле аласыз немесе сіздің күтілетін қажеттілікке негізделген айлық жоспар жасай аласыз. Тіркелу үрдісі өте оңай және сіздің Пайдаланушы аты мен Құпия сөзіңізді орнатқаннан кейін, сіз өзіңіз бастауға дайын.
02/09
UXPin-те жобаны қалай бастау керек
Сіз кірген кезде, сіз басқару тақтасына келесіз және осыдан бастап сіз жаңа сым-арбаны, жаңа мобильді жобаны немесе жауапты веб-дизайн жобасын жасауды шеше аласыз. Сондай-ақ, Photoshop немесе Sketch жобаларын әкелуге мүмкіндік беретін UXPin үшін плагиндер де бар. Осыған байланысты Мен қалайша кейбір мәтінді баннер жасауды және баннерге электрондық пошта батырмасын қосуды қалайсыз ба? Осыны орындау үшін мен жаңа сымдарды жасауды таңдадым.
03 09
UXPin интерфейсін қалай пайдалануға болады
Дизайн беті төрт аймаққа бөлінген. Сол жағындағы қара аймақта бақылау тақтасына қайта оралуға мүмкіндік беретін бірқатар элементтер бар, элементтерді ашыңыз, Smart Elements тақтасын ашыңыз, элементтерді іздеңіз, бетке ескертпелер қосыңыз және топ мүшелерін қосыңыз. Төменгі жағында қысқа оқу құралын ашады, екіншісі сіздің есептік жазбаңызға қол жеткізуге мүмкіндік береді, ал басқа сұрақтарға жауап беретін сұрақтарға жауап беріңіз және кері байланыс орнатыңыз.
Жоғарғы жағындағы көгілдір аймақта бірқатар құралдар мен қасиеттер бар. Оң жағындағы қараңғы түймелер дизайнын қайталауға, жобаның параметрлерін реттеуге, бетті ортақ пайдалануға және беттің браузерді моделдеуіне мүмкіндік береді.
Элемент тақтасы - дизайнерлік беттің биты мен бөліктерін басып, жобаңызды атаңыз және беттерді қосыңыз немесе жойыңыз.
Elements кітапханасы - UX дизайнерлері үшін жағымды тосын сый. Бұл поп-бөлме iOS-дан Android Lolipop-қа дейінгі 30 кітапхананың ішінен таңдауға мүмкіндік береді. Сондай-ақ, Bootstrap және Foundation элементтеріне Қаріптің таңғажайып белгішелері, Жылжымалы қимыл белгішелері және Әлеуметтік виджеттер жинағы бар.
04 09
Элементті UXPin бетіне қосу әдісі
Іске кірісу үшін, қорап элементін конструкция бетіне сүйреп апарып, тышқанның босатылған кезде, Сипаттар тақтасы ашылады. Сипаттар түймешігі элементті атауға және элементтің енінің биіктігін және орналасу мәндерін орнатуға мүмкіндік береді. Сондай-ақ, элементке толтыруға, бұрыштарды дөңгелектеуге және оның ашықтығын реттеуге болады. Фондық түс түймесін басу RGBA түсті таңдау құралын ашады.
Сондай-ақ, таңдалған элементке қаріпті, шекара мен үлгіні тағайындай аласыз. Lightning Bolt сізге таңдалған элементке интерактивтілікті қосу мүмкіндігін береді.
05 09
UXPin ішіндегі мәтінді қалай қосуға және пішімдеуге болады
Мәтін қосу үшін, мәтін элементін дизайнер бетіне сүйреңіз және мәтінді енгізіңіз. Қаріп сипаттарын ашу және мәтінді пішімдеу үшін Мәтін сипаты түймешігін басыңыз. Егер сізге күлкілі мәтіннің блогы керек болса, мәтін элементін қосыңыз және Қаріп сипаттарындағы GENERATE LOREM IPSUM түймешігін басыңыз.
06 09
Суретті UXPin бетіне қалай қосу керек
Бұл міндетті орындаудың бірнеше жолы бар. Кескін құралын құралдар тақтасында пайдалануға, Кітапханадан сурет элементін қосуға немесе жұмыс үстелінен кескінді жоғарыда көрсетілгендей етіп жасақтауға болады.
07 09
UXPin бетіне түймені қосу әдісі
Түймешік элементі болса да, жоғарыда көрсетілгендей « Іздеу» аймағына « Түйме » енгізу арқылы барлық кітапханалардағы барлық түймелерді ашады. Сізге дизайн бетінен жұмыс істейтін сызықты сүйреңіз және түстерді, қаріпті және шекара радиусын өзгерту үшін Сипаттарды пайдаланыңыз. Түймешіктің ішіндегі мәтінді өзгерту үшін мәтінді бір рет басыңыз және жаңа мәтінді енгізіңіз.
08 09
UXPin бетіне интерактивті қосу әдісі
Бұл бірінші кезекте пайда болғандай күрделі емес. Электрондық пошта енгізу үшін енгізу элементін қосып, өлшемін өзгертіп, мәтінді енгіздім және мәтінді пішімдедім. Енгізілген элемент таңдалғаннан кейін Properties (Сипаттар) түймешігін басып , Элементтер сипаттары пайда болғанда, Панельдің жоғарғы оң жақ бұрышындағы Көріну түймесі - көзге көрінетін түймені басыңыз.
Түймешікті таңдап, қасиеттерге әсер ету батырмасын басыңыз - найзағай. Қатынастар тақтасы ашылғанда, Жаңа өзара әрекетті таңдаңыз. Тінтуірді ашыңыз. Әрекеттер аймағында Элементті көрсету параметрін таңдаңыз. Сізге Элементтің көрсетілуі сұралады. Тышқаннан бір рет басыңыз да, кіріс элементін басыңыз. Элементті анықтаған кезде элементті жандандыратынын не болмайтынын анықтай аласыз. Бұл жағдайда кіріс қорабын ыңғайлылықпен көрсетуді жөн көрдім және 300 мс әдепкі ұзақтық мәнімен жүрдім.
Мен сондай-ақ батырманың басылған кезде оңға 65 пиксель жылжытыңыз. Мен түймені таңдап, өзара әрекеттестік тақтасын ашып, Жаңа өзара әрекетті таңдаймын. Мен келесі параметрлерді қолдандым:
- Триггер : басыңыз
- Әрекет: жылжыту
- Қозғалыс бағыты : x осіне 65 пиксель
- Анимация : сызықты
- Ұзақтығы: 300 мс
Өзара әрекеттесуді жою үшін элементті таңдап, Interactions тақтасын ашыңыз. Тақтада өзара әрекеттестікті таңдап, оны жою үшін қоқыс жәшігін басыңыз.
09 09
Сіздің бетіңізді қалай тексеруге болады UXPin
Браузерде жұмыс істеп жүргеніңіз үшін тестілеу өте қарапайым. Үлгілеу дизайны түймешігін нұқыңыз. Бет браузерде ашылады және сіз жолды тексере аласыз. Сондай-ақ, беттің сол жағына Пікірлерге, бірнеше бет болса, Сайт картасы, Тестілеуді пайдалану, Тікелей алмасу, Өңдеу және бақылау тақтасына оралу үшін қосылатын панель болады.
Беттің төменгі жағында Интерактивті элементтерді көрсетуге, түсініктемелерді көрсетуге немесе жасыруға және жоба сілтемесін басқалармен ортақ пайдалануға мүмкіндік беретін басқа шағын панель.