როგორ გამოვიყენოთ UI კომპლექტები Adobe XD-ში
Miscellanea / / November 29, 2021
მათთვის, ვინც დაინტერესებულია ვებ დიზაინით, UI კომპლექტები Adobe XD შესანიშნავი გზაა ახალი დიზაინის პროექტის დასაწყებად. ამ კომპლექტებით, თქვენ მიიღებთ წვდომას რამდენიმე სასარგებლო რესურსზე, რომელიც შეგიძლიათ შეცვალოთ და გამოიყენოთ თქვენი ვებსაიტის ან აპლიკაციის დიზაინისთვის.
თუ ახალი ხართ პროგრამულ უზრუნველყოფაში და არ ხართ დარწმუნებული, როგორ გამოიყენოთ UI კომპლექტები Adobe XD, მაშინ სწორ ადგილას მოხვედით. ამ სტატიაში მე გაჩვენებთ, თუ როგორ შეგიძლიათ დააინსტალიროთ UI კომპლექტები პროგრამულ უზრუნველყოფაში და შემდეგ გამოიყენოთ თქვენი პროექტისთვის შეტანილი რესურსები.
როგორ ჩამოტვირთოთ UI კომპლექტები Adobe XD-ში
პირველი, მოდით შევხედოთ, თუ როგორ შეგიძლიათ ჩამოტვირთოთ UI კომპლექტები Adobe XD-ში, უშუალოდ პროგრამული უზრუნველყოფის შიგნით. დასაწყებად უბრალოდ მიჰყევით ამ ნაბიჯებს:
Ნაბიჯი 1: დააჭირეთ ჰამბურგერის მენიუს ღილაკს პროგრამის ზედა მარცხენა კუთხეში.
ნაბიჯი 2: მენიუში გადადით ქვევით Get UI Kits ოფციაზე და შემდეგ დააწკაპუნეთ ხელმისაწვდომი სამი ვარიანტიდან.
ამ სტატიისთვის მე ავირჩევ Google Material UI კომპლექტს. თუმცა, თქვენი პროექტის მიხედვით, შეგიძლიათ აირჩიოთ Apple iOS ან Microsoft Windows-ის ნაკრები. ეს გახსნის ოფიციალურ ვებ გვერდს, საიდანაც შეგიძლიათ ჩამოტვირთოთ UI კომპლექტები უფასოდ.
ნაბიჯი 3: იპოვნეთ Adobe XD UI ნაკრები შემდეგ ვებ გვერდზე და ჩამოტვირთეთ იგი თქვენს სისტემაში.
ნაბიჯი 4: ახლა გახსენით გადმოწერილი ფაილი Adobe XD-ში და თქვენ შეგხვდებათ არტბორდები, რომლებიც შეიცავს UI რესურსებს შესაბამისი პლატფორმისთვის.
შეგიძლიათ გეჭიროთ Ctrl ღილაკი და გადააადგილოთ გადახვევის ბორბალი მასშტაბირება/შემცირების მიზნით, რათა ნახოთ ყველა ცალკეული არტ დაფა.
თუ გსურთ ჩამოტვირთოთ Wireframes, შეგიძლიათ დააწკაპუნოთ Wireframes ოფციაზე Get UI Kits მენიუში.
თქვენ ასევე შეგიძლიათ მოძებნოთ დამატებითი UI კომპლექტები Adobe-ს ვებსაიტზე, დააწკაპუნეთ More UI Kits ოფციაზე Get UI Kits მენიუში.
ვებსაიტს აქვს რამდენიმე შესანიშნავი ვარიანტი ასარჩევად, მათ შორის ეს მართლაც მაგარი Movie Magic UI ნაკრები, რომელიც გამოიყურება როგორც მთავარი ეკრანი.
ახლა, როდესაც თქვენ იცით, როგორ ჩამოტვირთოთ UI კომპლექტები, მოდით შევხედოთ, თუ როგორ შეგიძლიათ გამოიყენოთ ისინი თქვენს პროექტებში.
როგორ გამოვიყენოთ UI კომპლექტები Adobe XD-ში
თქვენს პროექტში UI კომპლექტების გამოსაყენებლად, უბრალოდ მიჰყევით ამ მარტივ ნაბიჯებს:
Ნაბიჯი 1: გაადიდეთ ინტერფეისის ელემენტი, რომელიც გსურთ გამოიყენოთ თქვენს პროექტში და დააწკაპუნეთ მის სათაურზე მის ასარჩევად.
ნაბიჯი 2: ახლა დააკოპირეთ ელემენტი Ctrl+C მალსახმობის გამოყენებით.
ნაბიჯი 3: შემდეგ გახსენით ახალი Adobe XD პროექტი მენიუდან.
ნაბიჯი 4: აქ ჩასვით UI ელემენტი Ctrl+V მალსახმობის გამოყენებით.
ამ სტატიისთვის მე გამოვიყენებ მობილური Dark ელემენტს Google Material UI ნაკრებიდან. ელემენტი შეიცავს სახელმძღვანელოებს, რომლებიც დაგეხმარებათ მეტის განთავსებაში ფენები, მაგრამ თუ არ გსურთ მათი გამოყენება, შეგიძლიათ მარტივად წაშალოთ ისინი შემდეგი ნაბიჯის შემდეგ.
ნაბიჯი 5: გიდების წასაშლელად დააწკაპუნეთ დაბლოკვის ხატულაზე ზედა მარცხენა კუთხეში და შემდეგ დააჭირეთ წაშლას. თქვენ შეგიძლიათ გამოტოვოთ ეს ნაბიჯი, თუ გსურთ გამოიყენოთ სახელმძღვანელოები, რათა ზუსტად მოათავსოთ მეტი ობიექტი ელემენტში.
ნაბიჯი 6: ახლა დაუბრუნდით UI კომპლექტს, რომ აირჩიოთ სხვა ელემენტი ამ გვერდზე დასამატებლად. კიდევ ერთხელ დააწკაპუნეთ ელემენტის სათაურზე და დააკოპირეთ Ctrl+C მალსახმობის გამოყენებით.
მე შევქმნი ძირითად სადღეგრძელოს ამ სტატიისთვის, რისთვისაც გამოვიყენებ ერთ-ერთ დიალოგს.
ნაბიჯი 7: ჩასვით ახალი ელემენტი წინა ელემენტზე და შემდეგ გაასწორეთ იგი სახელმძღვანელოების მიხედვით.
ნაბიჯი 8: ახლა სადღეგრძელოში თითოეული ელემენტის რედაქტირებისთვის, ორჯერ დააწკაპუნეთ ტექსტის ველზე და შემდეგ შეიყვანეთ ტექსტი, რომლის გამოყენებაც გსურთ. პირველ რიგში, მოდით შევცვალოთ სადღეგრძელოს სათაური.
შემდეგი, შეცვალეთ სხეულის შინაარსი ორჯერ დააწკაპუნეთ ტექსტურ ველზე და აკრიფეთ ის, რაც გსურთ დაამატოთ.
თქვენ ასევე შეგიძლიათ შეცვალოთ ღილაკების ტექსტი იმავე გზით. მას შემდეგ რაც დაასრულებთ ტექსტის რედაქტირებას, შეგიძლიათ შეცვალოთ ტექსტის ფერი და გამჭვირვალეობა. გამჭვირვალობის შესაცვლელად, უბრალოდ გადაიტანეთ სლაიდერი ინსტრუმენტთა ზოლში Opacity ოფციის ქვეშ მარჯვნივ.
ტექსტის ფერის შესაცვლელად დააწკაპუნეთ მართკუთხედზე Fill ვარიანტის გვერდით და შემდეგ აირჩიეთ ახალი ფერი ფერის ამომრჩევიდან.
და ეს არ არის მხოლოდ ტექსტი, რომლის რედაქტირება შეგიძლიათ ამ გზით. თქვენ ასევე შეგიძლიათ შეცვალოთ თითქმის ყველა ელემენტის ფერი და გამჭვირვალობა დიალოგურ ფანჯარაში, რაც შესანიშნავია, თუ თქვენ აპირებთ უნიკალურ ფერთა სქემას.
როგორც კი შედეგით კმაყოფილი იქნებით, უბრალოდ განაგრძეთ და შეინახეთ თქვენი ფაილი მენიუში Save As ოფციაზე დაწკაპუნებით ან Shift+Ctrl+S მალსახმობის გამოყენებით.
დაასრულეთ თქვენი დიზაინი UI კომპლექტების გამოყენებით
ახლა, როდესაც თქვენ იცით, როგორ ჩამოტვირთოთ და გამოიყენოთ UI კომპლექტები Adobe XD-ში, დარწმუნებული ვარ, უმოკლეს დროში დაიწყებთ საოცარი დიზაინის შექმნას. ეს UI კომპლექტები ნამდვილად საკმაოდ მოსახერხებელია და გეხმარებათ პირდაპირ მიხვიდეთ თქვენს პროექტზე ყოველი UI ელემენტის დიზაინის შესახებ ფიქრის გარეშე.
Შემდეგი: დაასრულეთ პროექტი Adobe XD-ზე და არ იცით როგორ გააკეთოთ მისი ექსპორტი HTML-ში? იხილეთ შემდეგი სტატია მარტივი ნაბიჯ-ნაბიჯ გაკვეთილისთვის.