View Transitions: რბილი გადასვლა ბრაუზერში და საჭირო შეზღუდვები

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

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

რას გვთავაზობს ადრეული API

Chrome 111-ში წარმოდგენილი View Transitions ერთ დოკუმენტში ინტერფეისის ცვლილების გარდამავალ ეფექტს ემსახურება. ამ ეტაპის შესაძლებლობა ჩვეულებრივ სხვადასხვა დოკუმენტს შორის ყველა გადასვლის ავტომატურ ანიმაციად არ უნდა წარმოვადგინოთ.

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

გადასვლა მოქმედებას არ აყოვნებდეს

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

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

ნაკლები მოძრაობა სრულფასოვანი არჩევანია

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

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

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