Adobe Experience- ის დიზაინი, რჩევები და ტექნიკა

01 წლის 07

Adobe Experience- ის დიზაინი, რჩევები და ტექნიკა

Adobe- მა გამოცდილების დიზაინად წარდგენისას, როგორც გენერალურმა გამოფენამ გააცნო, კომპანია ერთბაშად ორი საკმაოდ საოცარი წარმატებებით ასრულებდა. პირველ რიგში, ისინი კოსმოსში წარმოქმნილ სივრცეში შექმნილ პროტოტიპურ ბაზარზე შეიტანეს. მეორე, მათ საშუალება ჰქონდათ შექმნან მომხმარებლებისთვის "მუშაობის პროგრესით" და მომხმარებლებს აძლევენ გავლენას ამ პროგრესზე. ახლა, რომ განაცხადის უკვე ხელმისაწვდომია რამდენიმე თვის განმავლობაში, ვფიქრობდი, რომ ეს იქნება კარგი დრო გაზიარება ზოგიერთი გამოცდილება დიზაინი ტრიუკები, რჩევები, და ტექნიკა.

მაგრამ პირველი, თქვენ შეიძლება გაინტერესებთ, რა იგულისხმება Prototyping პროგრამული უზრუნველყოფა. ამ სივრცეში ძირითად მოთამაშეებს შორისაა Proto.io, პრინციპი, UXPin, Atomic.io , Experience Design და InVision. აპლიკაციებისგან განსხვავებით, როგორიცაა Sketch 3, Photoshop და Illustrator, სადაც სტატიკური დიზაინი იწარმოება, ამ გრაფიკული რედაქტორები გააცნობენ დღევანდელი მობილური და ვებ დიზაინის სივრცეში გავრცელებულ ურთიერთქმედებას, მოძრაობას და სხვა მახასიათებლებს.

მოძრავი მობილური და გარდაუვალი, ლაზერული მსგავსი აქცენტი მომხმარებელი, აღარ არის საკმარისი დიზაინერი რომ whip up რამდენიმე ესკიზები, გაიყვანოს ერთად რამდენიმე comps და შემდეგ გაათავისუფლოს პროექტი ან ატვირთეთ იგი სერვერზე. UI / UX workflow ფუნდამენტურად შეიცვალა რამ. პროცესის ყოველი ნაბიჯი, მომხმარებლის, სკეტჩების, საკაბელო მოწყობილობის, მოქუფებისა და პროტოტიპის იდენტიფიცირებისგან, ახლა უკვე ფართო მომხმარებლის ტესტირება ექვემდებარება.

ეს არის ის, რომ ბოლო ეტაპი - პროტოტიპი - სადაც ტკივილის წერტილები აღმოჩენილია და ფიქსირდება პროექტის საბოლოო წარმოებაში. ეს არის ის, სადაც ინტერაქცია, მოძრაობა, ეკრანის ტრანსფორმაცია და ეკრანის ყველაფრის განთავსება ძალიან კრიტიკულია. საკითხებსა და პრობლემებს არ შეუძლიათ უბრალოდ სტატიკურ იმიჯად, ან სიტყვიერად განმარტავენ. ყოველივე ამის შემდეგ, ეს პროდუქტები ნამდვილი ადამიანებია. იმის ნაცვლად, რომ გადაადგილება ყველა რომ კოდი, პროტოტიპის პროცესი სულ უფრო ხორციელდება მიერ გრაფიკული პროგრამული განკუთვნილია მხოლოდ ამ მიზნით. შეცდომის დაფიქსირება უფრო ადვილია, შეცვალოს სურათი, შეცვალონ ტექსტი, გადაადგილება ღილაკი და ა.შ. ვიზუალური რედაქციის გამოყენებით, ვიდრე მუდმივად გადაწერა და გამართვის კოდი.

სინამდვილეში, ეს პროგრამა გახდა მთავარი კომპონენტი დღევანდელი "სწრაფი პროტოტიპის" დიზაინი და განვითარების გარემოში.

ამასთანავე, მოდით გარკვეული fun ერთად გამოცდილება დიზაინი.

02 07

შექმნა დანიშნულების Pin უბრალო წრე Adobe Experience დიზაინი

XD- ს ერთი სუფთა ასპექტი ვექტორული ხატვის ინსტრუმენტების გამოყენებაა. ხატი არ არის ნაპოვნი არაა პრობლემა. გააფართოვოს საკუთარი. აი როგორ:

1. აირჩიეთ Ellipse Tool და ერთად Option / Alt-Shift გასაღებები დაჭერით, მიაპყროს წრე.
2. შეარჩიეთ წრეში, შეავსეთ FF0000- ის ფერი და შეავსოთ სასაზღვრო "არცერთი" თვისებები.
3. ორმაგი დაწკაპუნებით წრე აჩვენე წამყვან ქულებს. გადაიტანეთ ქვედა წამყვანი ქვემოთ.
4. ორმაგი დაწკაპუნებით შერჩეული Anchor Point და მოსახვევებში შეიცვალა ხაზები.
5. კიდევ ერთი პატარა წრე შეავსეთ თეთრ შევსებაზე და არა სტოკთან. გადაიტანეთ პოზიცია და აირჩიეთ PIN და წრე. პარალელურად პანორტების პარალელურად პანელზე დააჭირეთ ჰორიზონტალური ცენტრის ღილაკს და შეიქმნა Pin.

07 წლის 03

შექმენით Background Blur Adobe Experience Design- ში

ეს არის საერთო ტექსტური ან სხვა შინაარსის მქონე ფონის სურათზე. პრობლემა აქ არის გამოსახულება, უფრო ხშირად, ვიდრე არა, ზედმეტად აძლიერებს მის შინაარსს. ამ საკითხის გადაჭრის ერთ-ერთი საშუალებაა სურათის სურათის დაბინდვა. სურათის რედაქტირებისთვის შეგიძლიათ სურათების დაბლოკვა და სხვა გამოსახულების რედაქტირების პროგრამა, მაგრამ ეს გარკვეულწილად არაეფექტურია, განსაკუთრებით XD- ს შეუძლია ამ ამოცანის შესრულება. აი როგორ:

1. ახალი არტისტის შექმნა და თქვენი ფონის სურათის დამატება.
2. აირჩიეთ მართკუთხედის ხელსაწყო და შეავსეთ გამოსახულების გამოსახულება. შერჩეული მართკუთხედით, შეავსეთ შევსება თეთრი და ინსულტის არაფერს.
3. შერჩეულ მართკუთხედთან ერთად, შეარჩიეთ ფონის ბუნება თვისებების პანელში. სამი sliders არიან Blur თანხა, სიკაშკაშე და Opacity. აი, რას აკეთებენ ისინი:

• ბუნდოვანი რაოდენობა: არეგულირებს სურათის სურათის ბუნდოვანებას . მაქსიმალური ღირებულებაა +50.
• სიკაშკაშე: არეგულირებს გამოსახულებებსა და ჩრდილებს. მინიმალური ღირებულება -50 და მაქსიმალური ღირებულებაა +50.
• ბუნდოვანი: აისახება ფორმის გამჭვირვალობა და გამოსახულების ხილვადობა. ღირებულებები მერყეობს 0% -დან 100% -მდე.

თუ ნამდვილად გსურთ "გადართოთ რამეები", შეიცვალეთ ფერის ფორმა და ითამაშე უთანასწორობა, რომ შეიცვალოს გამოსახულების "სახეს".

04 წლის 07

შექმნა Scrim in Adobe გამოცდილება დიზაინი

საერთო დიზაინის პრობლემა ინტერფეისის ელემენტების ელემენტები უნდა იყოს საერთო ფერი, მაგრამ დაკარგა, როდესაც განთავსდება ფონზე გამოსახულების ან მყარი ფერის. გამოსავალი არის საშინელება. სკრიმმა გარკვეულწილად გაუმჭვირვალე გრადიენტი ინტერფეისი ელემენტისა და ფონზეა განთავსებული. XD- ში ეს ადვილია. აი როგორ:

1. შექმენით თქვენი დრაივერი XD- ში, დაამატეთ სურათი და დააკოპირეთ ინტერფეისის ელემენტები შესაბამისი UI Kit - ფაილი> ღია UI ნაკრებიდან ... - შესასვლელში. ზემოთ გამოსახულებაში ფოტო ხდის სტატუს ბარს და აპლიკაციის ბარს უჭირს.
2. აირჩიეთ მართკუთხედი ხელსაწყო და ამოიღეთ მართკუთხედი. In Properties Panel აირჩიეთ შევსება და აირჩიეთ გრადიენტი საწყისი pop ქვემოთ ფერი Picker. მოათავსეთ გრადიენტი ფერები შავი და თეთრი. მითითებული ღირებულება - Opacity- მდე 60% და თეთრი ღირებულება 0%.
3. შერჩეული მართკუთხედით აირჩიეთ ობიექტი> არანჟირება> პირადი უკან . ინტერფეისის ელემენტები ახლა ჩანს სურათზე.

07 წლის 05

შექმნა სურათი Picture in Adobe Experience Design

საერთო დიზაინის ნიმუშია ნაპოვნი ჩეთის აპლიკაციები, სადაც ადამიანები ერთმანეთს ელაპარაკებიან და სპიკერის სურათი ეკრანზე გამოჩნდება. ეს ავატრები, როგორც წესი, ნიღბები არიან. ეს მკვდარი მარტივია მიზნად ისახავს XD- ს. აი როგორ:

1. იწყება გამოსახულება და წრე ან სხვა ფორმა მხატვარზე. თქვენ შეგიძლიათ შეავსოთ წრე ნებისმიერი ფერით. რა არ უნდა გავაკეთოთ არის ინსულტის ფერის დამატება. ეს გაქრება, როდესაც თქვენ შექმნით ეფექტს, რის გამოც შეწუხება. თუ საჭიროა წრის მოწევის გაკეთება, დააკოპირეთ ბუფერში.
2. წრის გადატანა სურათზე და აირჩიეთ სურათი და წრე. შერჩეული ბოტის ობიექტების გამოყენებით, აირჩიეთ ობიექტი> ნიღაბი ფორმის გამოყენებით . თაგვის გათავისუფლებისას შეიქმნა Avatar. იქიდან შეგიძლიათ მისი შეცვლა.
3. თუ ინსულტის დაამატებ, გადაწერეთ წრე სხდომაზე თქვენს clipboard- ზე. კოპირების შერჩევა გამორთეთ თვისებები და დაამატეთ ინსულტის ფერი და სიგანე. გამოდიან ისინი, შეარჩიეთ ორივე ობიექტი და დააჭირეთ ცენტრის გასწორებას ღილაკებზე პანელის ზედა პარალელურად.
4. თუ ნიღაში ფოტო გადაადგილება გსურთ, ორმაგი დაწკაპუნებით ნიღაბი. ეს აჩვენებს სურათს და ნიღაბი ფორმას. დაწკაპეთ იმიჯი და გადაიტანეთ იგი პოზიციაზე. როდესაც მაუსის გათავისუფლება, გამოსახულება იქნება მისი ახალი პოზიცია ნიღაბი.

06 07

ითამაშეთ Adobe Experience Design Artboards- ით

გამოცდილება დიზაინი არტბორდები არა მხოლოდ იქაა განთავსება შინაარსი. ისინიც შეიძლება მანიპულირებდნენ. აქ არის რამდენიმე რამ რისი გაკეთებაც შეგიძლიათ:

1. თუ თქვენ გჭირდებათ ლანდშაფტის და პორტრეტის ვერსიები არტბორდის, დუბლიკატი დუბლიკატი და, შერჩეული დუბლიკატით, დააჭირეთ ლანდშაფტის ღილაკს თვისებები პანელში. Artboard შეიცვლება ლანდშაფტის ორიენტაციაზე. თუ Artboard- ს აქვს შინაარსი, დააჭირეთ ღილაკს Artboard სახელი და Artboard თვისებები გამოჩნდება თვისებები პანელში.
2. Artboard- ზე საბაჟო ფერის დამატება და პროექტის ამ ნაწილში შეარჩიეთ მხატვარი და დაწკაპეთ შეავსეთ ფერადი ჩიპი Properties Panel- ის Appearance- ის სექციაში. შეიყვანეთ ჰექსაციციალური მნიშვნელობა ფერისთვის და დააჭირეთ + ნიშანს. ფერი დაემატება საბაჟო ფერს. გამოიყენეთ ეს ფერი სხვა ადგილას, აირჩიეთ ობიექტი და დაწკაპეთ Custom Color ჩიპი გამოიყენოს ფერი.
3. Artboards შეიძლება გაკეთდეს ვერტიკალურად scrollable. ამისათვის აირჩიეთ არტბორდი და შეცვალეთ მისი სიმაღლე ან თვისებების პანელებზე ან გადაღებისას ქვედა ნაწილში. თვისებების პანელის სორბალურ სივრცეში აირჩიეთ ამომრჩეველი მენიუდან pop-up მენიუდან და შეიყვანეთ ეკრანის სიმაღლე. ეს დატეხილი ლურჯი ხაზს აჩვენებს, რომ ნახოთ ბოლოში. ამის შესამოწმებლად დააწკაპუნეთ ღილაკზე დაჭერით და გადააადგილეთ. სენსორების გამორთვა, აირჩიეთ არა სენსორული სკრიპტის ქვემოთ.

07 07

რედაქტირება მობილური UI Kit- ში Adobe Experience Design- ში

გამოცდილება დიზაინი შეიცავს UI Kit განვითარებისთვის iOS, Android და Windows UI ს. როდესაც მათ პირველად გახსნით, შეიძლება ფიქრობთ, რომ ისინი კარგად არიან მითითებული. არ არის საკმაოდ თითოეული ბიტი და ცალი იმ კომპლექტები მთლიანად რედაქტირებადია. მოდით გავიგოთ Android მავთულის მშენებლობისას.

1. თქვენ დაიწყეთ არტბორდის ხელსაწყოების შერჩევა და Android Mobile- ის შერჩევა Google- ის განყოფილების თვისებების პანელში .
2. აირჩიეთ ფაილი> ღია UI Kit> Google მასალა . ეს ხსნის მატერიალური დიზაინის UI ნაკრები. შეარჩიეთ გამაჯანსაღებელი შუშის და მარკირების ეკრანი . მე მინდა, რომ დავიწყო ეს იმიტომ, რომ ეს მე მაძლევს გიდების სწორი ეკრანზე განთავსება ინტერფეისი ელემენტები. თუ თქვენ დააჭირეთ ერთ ლურჯი ბარები, ნახავთ, რომ ის ჩაკეტილია. დააწკაპეთ დაბლოკვის თითოეულ მათგანს, რომლითაც განბლოკება . მარკეს მხატვარი და ასლის გადაღება ბუფერში. თქვენს დოკუმენტში დაბრუნება და ეკრანის ჩასმა ეკრანზე.
3. ერთხელ დააჭირეთ აპლიკაციის ბარი, რომელიც არტბორდის ზედა. შენიშვნა, თუ როგორ შეგიძლიათ აირჩიოთ იგი. აირჩიეთ ობიექტი> არანჟირება> შემოხვიდეთ წინა. შენი შერჩევა არის ზემოთ ეკრანზე გიდები. ეს უნდა გითხრათ, რომ ეკრანის თითოეულ ელემენტს შეუძლია რედაქტირება.
4. ორჯერ დააწკაპუნეთ სტატუსის ბარი ზედა და, Properties Panels და Fill ფერი 455A64 . ორჯერ დააწკაპუნეთ აპლიკაციის ბარი და დააყენეთ მისი შევსება 607D8B. ეს უნდა გითხრათ, რომ თითოეული ელემენტის UI ნაკრები შეიძლება იყოს რედაქტირებული პროექტის ფერი მახასიათებლების დასაკმაყოფილებლად.
5. რაც შეეხება ხატები? აი, როგორ შეიცვალოს მათი ფერი. ორმაგი დაწკაპუნეთ გულისთვის . თუ თქვენ იხილავთ Properties Panel- ს, თქვენ შეიძლება ვივარაუდოთ, რომ თქვენ არ შეგიძლიათ შეარჩიოთ შერჩევა. მთლად ასე არა. ორჯერ დააჭირეთ გული კიდევ ერთხელ . თვისებები ღიაა და თქვენ შეცვლით შევსების ფერს FF0000. გაიმეორეთ ორმაგი ორმაგი დაჭერით შეასრულე დარჩენილი ხატები და ტექსტი.