01 09
როგორ მიიღოთ UXPin- სთან ერთად
როგორც ჩვენ გადავიდეთ მობილური დიზაინის სფეროში, აპლიკაციის დიზაინი და საპასუხო დიზაინი იყო მზარდი ფოკუსირება UX (მომხმარებლის გამოცდილება) და საკაბელო , ინტერაქტიული პროტოტიპისა და ამოფრქვევის მიმართ. არსებობს ტონა ინსტრუმენტები out არსებობს მიზნად ამ ნიშა და ისინი აწარმოებს სრული გამის კომპლექსი, მხატვრული ლადენის behemoths რომ sparse და ძლივს სასარგებლო. ერთი ინსტრუმენტი, რომელიც დაიჭირეს ჩემი თვალი UXPin უბრალოდ იმიტომ, რომ ის მიერ შემუშავებული დიზაინერებს დიზაინერებს.
სანამ წინ ვივლით ... მღვიმეში. თუ თქვენი ორგანიზაციაა, რომელიც უპირატესობას ანიჭებს პროგრამას, მაშინ UXPin არ არის თქვენთვის. ამ აპლიკაციაში შესრულებული ყველა სამუშაო შესრულებულია ბრაუზერში და თქვენ მიერ შენახული პროექტები შეინახება თქვენს ანგარიშზე.
UXPin- თან ერთად დაიწყეთ ბრაუზერი და ხელმძღვანელი UXPin- ში. აქედან შეგიძლიათ დარეგისტრირდეთ უფასო სასამართლოში ან მოაწყოთ ყოველთვიური გეგმის საფუძველზე თქვენი მოსალოდნელი საჭიროების საფუძველზე. დარეგისტრირების პროცესი საკმაოდ მარტივია და ერთხელ თქვენ გაქვთ თქვენი მომხმარებლის სახელი და პაროლი, თქვენი მზად ვართ დავიწყოთ.
09 09
როგორ დავიწყოთ პროექტი UXPin- ში
როდესაც შეხვიდეთ სისტემაში Dashboard- ზე და აქედან შეგიძლიათ გადაწყვიტოთ ახალი მავთული, ახალი მობილური პროექტი ან საპასუხო ვებ დიზაინი პროექტი. ასევე არსებობს plug-ins UXPin- ისთვის, რომელიც საშუალებას მოგცემთ მიიღოთ თქვენი Photoshop- ის ან Sketch პროექტებში. ამისათვის როგორ ვაპირებ ბანერის შექმნას და ბანერისთვის ელფოსტის დამატება. ამ მიზნის მისაღწევად შევარჩიე ახალი მავთული.
09 09
როგორ გამოვიყენოთ UXPin ინტერფეისი
დიზაინი ზედაპირის დაყოფილია ოთხი სფეროებში. მარცხენა მხარეს შავი არეალია, რომელიც საშუალებას მოგცემთ დაბრუნდეთ დაფაში, გახსენით ელემენტები, გახსენით სმარტ ელემენტთა პანელი, ელემენტების ძიება, შენიშვნები დაამატეთ გვერდზე და დაამატეთ გუნდის წევრები. ბოლოში არის ღილაკი, რომელიც ხსნის მოკლე ტუტორიას, რომელიც საშუალებას მოგცემთ წვდომოთ თქვენი ანგარიში და სხვა, რომელიც იკითხება FAQ- ს, გთხოვთ, დასვით კითხვები და უპასუხოთ.
ლურჯი ფართობი გასწვრივ ზედა არის რიგი ინსტრუმენტები და თვისებები. მუქი ღილაკები მარჯვენა მხარეს საშუალებას მოგცემთ გაეცნოთ თქვენს დიზაინს, შეცვალოთ პროექტის პარამეტრები, გააზიარეთ გვერდი და გააკეთეთ ბრაუზერის სიმულაციური გვერდი.
ელემენტები პანელი არის სადაც თქვენ დაიბრუნოს ბიტი და ცალი დიზაინი ზედაპირის, დაასახელეთ თქვენი პროექტი და დამატება ან წაშლა გვერდები.
ელემენტების ბიბლიოთეკა არის სასიამოვნო სიურპრიზი UX დიზაინერებისთვის. ეს პოპ ქვემოთ საშუალებას გაძლევთ აირჩიოთ anon 30 ბიბლიოთეკების დაწყებული iOS- დან Android Lolipop ასევე თქვენ გაქვთ წვდომა Bootstrap და ფონდის ელემენტები ერთად Font Awesome ხატები, ჟესტი მორგებული მობილური და კოლექცია სოციალური ვიჯეტები.
04 09
როგორ დაამატოთ ელემენტი UXPin გვერდზე
დასაწყებად დავიწყე ყუთი ელემენტის დიზაინი ზედაპირზე და, როდესაც მაუსის გათავისუფლება, თვისებები პანელი იხსნება. თვისებები ღილაკი საშუალებას მოგცემთ დაასახელოთ ელემენტი და მითითებული ელემენტის სიგანე სიმაღლე და პოზიციის მნიშვნელობები. თქვენ ასევე შეგიძლიათ დაამატოთ padding ელემენტს, მრგვალი off კუთხეების და შეცვალოს მისი opacity. ფონის ღილაკის ღილაკზე დაჭერით იხსნება RGBA ფერის ამომრჩეველი.
ასევე შეგიძლიათ აირჩიოთ შრიფტი, საზღვარი და ნიმუში შერჩეული ელემენტისთვის. Lightning Bolt გაძლევთ შესაძლებლობას დაამატოთ ინტერაქტიულობა შერჩეული ელემენტისთვის.
09 09
როგორ დაამატოთ და ფორმატი ტექსტი UXPin
ტექსტის დასამატებლად, ტექსტის ელემენტის დიზაინი ზედაპირზე გადაიტანეთ და შეიტანეთ ტექსტი. დააჭირეთ ღილაკს "Text Properties" ღილაკს ფონტის თვისებების გასახსნელად და დააინსტალირეთ თქვენი ტექსტი. თუ დაგჭირდებათ ტექსტის ბლოკირება, დაამატეთ ტექსტის ელემენტს და დააჭირეთ ღილაკს GENERATE LOREM IPSUM ღილაკს ფონტის თვისებები.
09 09
როგორ დაამატოთ გამოსახულება UXPin გვერდი
ამ ამოცანის შესრულების რამდენიმე გზა არსებობს. თქვენ შეგიძლიათ გამოიყენოთ გამოსახულების ინსტრუმენტი Toolbar- ში, დაამატეთ სურათის ელემენტის ბიბლიოთეკიდან ან უბრალოდ გადააადგილეთ თქვენი დესკტოპის გამოსახულება დიზაინის ზედაპირზე ზედაპირზე, როგორც ნაჩვენებია ზემოთ.
09 09
როგორ დაამატოთ ღილაკი UXPin გვერდი
მიუხედავად იმისა, რომ არსებობს ღილაკი ელემენტის, შესვლის " ღილაკს " შევიდა ძებნა ფართობი, როგორც ზემოთ ნაჩვენები, ხსნის ყველა ღილაკები ნაპოვნი ყველა ბიბლიოთეკა. გადაათრიეთ ის, რომელიც მუშაობს დიზაინის ზედაპირზე და გამოიყენეთ თვისებები, რომ შეიცვალოს ფერი, შრიფტი და საზღვრის რადიუსიც კი. ღილაკის შიგნით ტექსტის შესაცვლელად დააჭირეთ ტექსტს ერთხელ და შეიყვანეთ ახალი ტექსტი.
08 09
როგორ დაამატოთ ინტერაქტიულობა UXPin გვერდზე
ეს არ არის ისეთი რთული, როგორც ეს პირველად გამოჩნდება. ელფოსტის შეყვანისთვის შეავსეთ შეყვანის ელემენტი, განაახლა ეს, შევიდა ტექსტში და დააფორმატე ტექსტი. შეყვანის ელემენტის შერჩევა დააჭირეთ ღილაკებს Properties ღილაკს და როდესაც ელემენტთა თვისებები გამოჩნდება ღილაკის ხილვადობის ღილაკზე - თვალის ჩაკვრა - პანელის ზედა მარჯვენა კუთხეში.
შეარჩიეთ ღილაკი და დააჭირეთ ღილაკს Interactions ღილაკს - Lightning Bolt- ში. როდესაც ურთიერთქმედების პანელი იხსნება, აირჩიეთ ახალი ურთიერთქმედება. აირჩიეთ დაწკაპუნება საწყისი პოპ ქვემოთ. სამოქმედო არეალში აირჩიეთ შოუ ელემენტი. თქვენ ახლა ითხოვენ, თუ რომელი ელემენტის ჩვენება. დაწკაპეთ ერთხელ იარაღი და დააჭირეთ შეყვანის ელემენტს. ელემენტის იდენტიფიცირება, შეგიძლიათ ახლა განსაზღვროთ თუ არა ელემენტმა animate. ამ შემთხვევაში გადავწყვიტე შეყვანის ყუთის ჩვენება მარტივად და წავიდა 300ms- ის სტანდარტულ ხანგრძლივობით.
მე ასევე მინდა ღილაკს გადაადგილება 65 პიქსელი მარჯვნივ, როდესაც მას დაწკაპავთ. მე შევარჩიე ღილაკი, გაიხსნა ინტერაქტიული პანელი და შეარჩია ახალი ურთიერთქმედება . მე ეს პარამეტრები გამოიყენე:
- Trigger : დააჭირეთ
- მოქმედება: გადაადგილება
- გადაადგილების მიმართულება : 65 px on x ღერძი
- ანიმაცია : ხაზოვანი
- ხანგრძლივობა: 300 ms
ინტერაქციის ამოღების ელემენტის შერჩევა და ურთიერთქმედების პანელის გახსნა. აირჩიეთ პანელში ურთიერთქმედება და დააჭირეთ ღილაკზე წაშლას წაშლა.
09 09
როგორ შეამოწმოთ შენი გვერდი UXPin- ში
იმის გამო, რომ ბრაუზერში მუშაობს, ტესტირება მკვდარია მარტივი. დააჭირეთ სიმულაციური დიზაინის ღილაკს. გვერდი ბრაუზერში გაიხსნება და შეგიძლიათ შეამოწმოთ გზა. ასევე იქნება პანელი მარცხენა მხარეს, რომელიც საშუალებას იძლევა კომენტარები, საიტის რუკა თუ არსებობს მრავალჯერადი გვერდები, გამოყენების ტესტირება, ცოცხალი გაზიარება, რედაქტირება და დაბრუნების Dashboard.
გვერდის ქვედა ნაწილში არის კიდევ ერთი პატარა პანელი, რომელიც საშუალებას გაძლევთ აჩვენოთ ინტერაქტიული ელემენტები, აჩვენოთ ან დამალვა კომენტარები და გაუზიარეთ პროექტს ლინკთან ერთად.