Უახლესი Atomic.io განახლება მოიცავს Scrollable კონტეინერების

01 წლის 03

უახლესი Atomic.io განახლება მოიცავს Scrollable კონტეინერების

ატომური

რამდენიმე თვით ადრე მე ვაჩვენე, თუ როგორ შეიძლება გამოყენებულ იქნას ატომური.იი პროტოტიპის მოძრაობისთვის . ერთ-ერთი მთავარი პუნქტი მე ნაწილში იყო "მოძრაობის ჩვენება", ვიდრე კლიენტის ან გუნდის წარმოდგენებში გასვლისთვის მნიშვნელოვანია. ფაქტობრივად, ეს გახდა ისეთი კრიტიკული, რომ მთელი ახალი კატეგორია UX / UI ინსტრუმენტები გამოჩნდება ადგილზე. მათ შორისაა - Apple Keynote, Adobe- ის Edge Animate, ეფექტისა და UXPin- ის შემდეგ , ასახელებს რამდენიმე. ბლოკზე ახალი ბავშვი არის Atomic.io რომელიც ღია ბეტაში იყო, როდესაც პირველად დავწერე პროდუქტის შესახებ.

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

ეს უნდა ყოფილიყო ბევრი მომხმარებლისთვის საგანი, რადგან ამ თვეში აპლიკაციას გაეცანით scrollable კონტეინერები და მე უნდა ვაღიარო, რომ პროტოტიპში გლუვი შემცველობა შექმნა მკვდარი მარტივია.

აი როგორ…

02 03

როგორ შევქმნათ ვერტიკალური სკროლის კონტენტი ატომურში

ატომური

თქვენ უნდა მოაწეროს პირველი 30 დღიანი საცდელი ვადის გასვლისთვის და ამ პერიოდის ბოლოს, თქვენ წარმოდგენილი იქნება სამი ფასების გეგმის მიხედვით.

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

როდესაც ინტერფეისი, როგორც ჩანს, ნახავთ, არსებობს შეზღუდული რაოდენობის ინსტრუმენტები, უნარი დაამატოთ გვერდები და ფენების გვერდებზე, მხატვრული და, მეტი უფლება, კონტექსტში მგრძნობიარე თვისებები პანელი.
ამ მაგალითში დავიწყე iPhone 5-ის წინასწარი ვარიანტი, რომელიც არის 320 x 568.I შემდეგ გახსენით საქაღალდე, რომელიც შეიცავს სკანდალს და გადაათრიეს მათ ტილოზე. ისინი ავტომატურად დაემატა პროექტს და ხედავთ, რომ ისინი ინდივიდუალურ ფენებს იყენებენ, თუ იარსებებს Layers tab . მე აირჩიეთ არჩეული იარაღი (შერჩევა), შერჩეული სურათი და გადაათრიეს იგი ახალ პოზიციას, რათა მათ შორის გარკვეული სივრცე დაამატოთ. მე შევარჩიე ყველა სურათი და დააკლიკე პანელის ღილაკს ვერტიკალურად . ეს თანაბრად სივრცეში გამოსახულებები.

შემდეგი ნაბიჯი არის შეარჩიოს ყველა შინაარსი, რომელიც უნდა scrolled და ან დააჭირეთ კონტეინერის ღილაკს ან აირჩიეთ შექმნა Scroll კონტეინერი საწყისი ჯგუფი ღილაკს პოპ ქვემოთ. მას შემდეგ, რაც კონტეინერი იქმნება - ნახავთ მასში Layers Panel - დააჭირეთ კონტეინერს და გადაიტანეთ ქვედა სახელური upwards to ბოლოში ტილო . დაწკაპეთ Preview ღილაკს ქვედა თვისებები პანელი და ეს დაიწყება ბრაუზერის ფანჯარაში. გამოიყენეთ თქვენი მაუსის გადახურვის საჭე, რომ გადაახვიოთ შინაარსი. თქვენს პროექტში დაბრუნებისას დააჭირეთ ღილაკს ღილაკს ბრაუზერის ფანჯრის ქვედა მარჯვენა.

03 03

როგორ შეიქმნას ჰორიზონტალური სენსორული კონტენტი ატომური

ატომური

ჰორიზონტალური სენსორი ისეთივე ადვილია, რომ შესრულდეს.

ასეთ შემთხვევაში, ტილოები გადაიღეს ტილოებზე და მათ ერთმანეთის წინააღმდეგ გაანადგურეს. შერჩეულ სურათებთან ერთად, მე დააჭირეთ ღილაკს ყველაზე გასწორება ღილაკს, რათა უზრუნველყონ ისინი ერთმანეთთან შეესაბამება.

მე გადავწყვიტე Shift გასაღები და შერჩეული თითოეული ფენის Layers პანელი. შერჩეული სურათებით, მე დაჭერით კონტეინერის ღილაკზე და Properties Properties პანელს, შერჩეული ჰორიზონტალურად Behaviors ფართობი.

მე შევამოწმე პროექტი ბროუზერი ფანჯარაში დაწკაპვით Preview ღილაკი.

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

ამ ფუნქციის შესახებ დამატებითი ინფორმაციის მისაღებად შეამოწმოთ atomic.io: