ბარათის დიზაინის ეფექტურობის საიდუმლოებები - SkillsUp - გაკვეთილების მოსახერხებელი კატალოგი დიზაინის, კომპიუტერული გრაფიკის, Photoshop გაკვეთილების, Photoshop-ის გაკვეთილების შესახებ. მაღალი გარჩევადობის ეკრანი. UI ელემენტების შეზღუდვა

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

დაიწყეთ შავი და თეთრი კონტურებით

ძალიან მარტივად ჟღერს: დაიწყეთ თქვენი დიზაინის შავ-თეთრი მაკეტით. იფიქრეთ ბარათების დანიშნულებაზე და მათი ნაწილების დაჭერით. (მთელი ბარათი შეიძლება იყოს ბმული.)

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

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

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

გამოიყენეთ ბევრი თავისუფალი ადგილი

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

"ჰაერის" სიმრავლე სივრცეს მისცემს დიზაინის ელემენტებს, გახდის ყველა ბარათს ვიზუალურად უფრო ფართო და გაზრდის კითხვადობას.

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

დაამატეთ ბუნებრივი ფერები და ჩრდილები

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

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

გამოიყენეთ რამდენიმე ფიზიკური წესი, რომლებიც გამოიყენება ბარათის ხელში ჩაგდებისას:

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

Მარტივად შეხედე

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

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

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

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

აირჩიეთ მარტივი შრიფტები

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

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

UI ელემენტების შეზღუდვა

გახსოვდეთ: ერთი ბარათი უდრის ერთ მოქმედებას.

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

შეინახეთ ფორმები და დიზაინი მარტივი - ისევ და ისევ, Material Design შესანიშნავი ვარიანტია - და შეეცადეთ არ გააკეთოთ ერთზე მეტი ღილაკი.

ღილაკები ალბათ ერთადერთი UI ელემენტია, რომელიც დაგჭირდებათ. იბრძოლე ამისთვის.

დასკვნა

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

თარგმანი – მაგიდა

26.12.2016

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

კარგად შესრულებული ბარათის დიზაინს შეუძლია გააუმჯობესოს თქვენი აპლიკაციის UX (მომხმარებლის გამოცდილება). ამ სტატიაში მე აღვწერ ბარათის დიზაინის განხორციელების 5 სასარგებლო ტექნიკას და მოვიყვან რამდენიმე საინტერესო მაგალითს.

• ასევე წაიკითხეთ:

1. დაიცავით წესი „ერთი ბარათი - ერთი კონცეფცია“

2. ბარათის მთელი ზედაპირი უნდა იყოს დაწკაპუნებული

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

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

3. გახადეთ ბარათები მიმზიდველი

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

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

სურათები

სურათებზე აქცენტი ბარათის დიზაინის სიძლიერეა. Კვლევა დაადასტურეთრომ სურათები „ამაღლებს“ დიზაინს. ამრიგად, სურათების გამოყენებაზე ფოკუსირება ბარათის ინტერფეისის დიზაინს მომხმარებლებისთვის უფრო მიმზიდველს ხდის.

ჩრდილები და გრადიენტები

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

ტიპოგრაფია

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

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

რჩევა: რეგულარული sans-serif შრიფტი შესანიშნავია ბარათებისთვის.

• ასევე წაიკითხეთ:

4. შეზღუდეთ ბარათის შინაარსი

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

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

5. ისარგებლეთ ანიმაციით და მოძრაობით

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

ვიზუალური ნიშნები

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

ვიზუალური გამოხმაურება

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

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

ასე რომ, ამ სტატიაში აგიხსნით, რა არის „ბარათის დიზაინი“ და როგორ მოქმედებს ის ზოგადად ვებ დიზაინზე.

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

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

ბარათის დიზაინი საუკუნეების განმავლობაში

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

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

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

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

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

რა არის რუქები ინტერნეტში?

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

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

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

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

რატომ უნდა გამოიყენოთ ბარათები?

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

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

რუკები აწესებს წესრიგს: რუქები შემოაქვს ორგანიზაციის ფენებს შინაარსისთვის.

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

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

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

ვებ განვითარების თანამედროვე ტენდენციები და მიდგომები

ისწავლეთ სწრაფი ზრდის ალგორითმი ნულიდან ვებსაიტის მშენებლობაში

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

ვინ იყენებს ბარათებს?

დრიბლინგი

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

Pinterest

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

Twitter, რომელიც იყენებს 144 სიმბოლოს ლიმიტს პოსტზე, დაიბადა "ჩაშენებული ბარათის განლაგებით". გასულ წელს, სოციალურმა ქსელმა გამოუშვა საკუთარი პროდუქტი სახელწოდებით Twitter Cards, აპლიკაცია, რომელიც შექმნილია იმისთვის, რომ დაგეხმაროთ თქვენი შინაარსის სისტემაში გამოქვეყნებისას. დეველოპერები აღწერენ თავიანთ აპლიკაციას, როგორც შეუძლიათ:

„მიამაგრეთ უამრავი ფოტო, ვიდეო და სხვა მედია კონტენტი თქვენს ტვიტებზე, რაც გამოიწვევს ტრაფიკს თქვენს ვებსაიტზე“

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

The Guardian

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

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

დასკვნა

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

მათი ვიზუალური მიმზიდველობის წყალობით, ბარათების ინტერფეისები უფრო მეტია, ვიდრე უბრალოდ ტენდენცია.

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

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

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

რა არის კონტეინერის ვებ დიზაინი?

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

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

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

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

გაინტერესებთ? წაიკითხეთ უახლესი სტატია 2018 წლის TOP 18 ტენდენციების შერჩევით.

ბარათის UI ნიმუში მობილურ მოწყობილობაზე და საპასუხო დიზაინი.

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

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

შეადარეთ The Verge-ის ვებსაიტის ზემოთ მოცემული სკრინშოტი მის მობილურ ვერსიას ქვემოთ:

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

მობილური ვერსიის სანახავი ზონა:

სრული ეკრანის ხედვის არე:

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

ბარათები და მასალების დიზაინი

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

ვებ საიტის განვითარება. ბარათის დიზაინის მომავალი.

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

1. ტექნოლოგია

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

სულ უფრო და უფრო მეტი ვიდეო ჩაანაცვლებს სურათებს (იდეა, რომელსაც ზოგიერთი დიზაინერი წლების განმავლობაში თამაშობდა). გამოიყენეთ თქვენი ინტერფეისი (ზემოთ) იყენებს ანიმაციურ GIF ბარათებს, რომლებიც ავსებენ მთავარ გვერდს უამრავი ინფორმაციით.

2. ურთიერთქმედების გაღრმავება

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

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

ზომა 3

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

HOW Arkitekter (ზემოთ) აერთიანებს დიდი და საშუალო ზომის ბარათებს ნავიგაციაში. ზოგიერთი ბარათი არის ბმული, ზოგი კი უბრალოდ სტატიკურ ინფორმაციას წარმოადგენს. ფართო სივრცეები ჰყოფს ბარათებს, რაც დიზაინს ჰაეროვან შეგრძნებას აძლევს.

4. ტარებადი მოწყობილობები

Google Glass-ის წყალობით, ბარათები ახლა გახდა UI დიზაინის ძირითადი ელემენტი ტარებადი მოწყობილობებისთვის.

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

ვებ საიტის დამუშავება 2016-2018 წწ. დასკვნა

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

წაიკითხეთ სტატია კიდევ ერთი - დუტონის ან დუპლექსის შესახებ.

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

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

წყარო: ფორმალურად დიახ

რა არის კონტეინერზე დაფუძნებული დიზაინი?

ნიმუშის გასაგებად, ჯერ უნდა გაიგოთ თავად ბარათის იდეა.

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

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

ბარათები მობილური და საპასუხო ვებსაიტების ინტერფეისებში

როგორც უკვე დავწერე, ბარათის ინტერფეისები კარგად ერწყმის საპასუხო ჩარჩოებს, რის გამოც თავად Intercom's Des Traynor-მა მათ უწოდა ინტერნეტის მომავალი. ეს UI ნიმუში კარგად ითარგმნება მობილურ მოწყობილობებზე მრავალი მიზეზის გამო - მათზე ახლა ვისაუბრებთ.

წყარო: The Verge

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

შეადარეთ დესკტოპის (ზემოთ) და მობილურის (ქვემოთ) ხედები The Verge-დან:

წყარო: The Verge (მობილური საიტი)

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

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

მობილური ხედვის პორტი:

წყარო: UXPin

მაღალი გარჩევადობის ეკრანი:

წყარო: UXPin

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

ბარათების მომავალი

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

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