ვიზუალური იერარქიის პრინციპები დიზაინერებისთვის არის დიზაინის კონცეფცია, რომელიც გამოიყენება იმისთვის, თუ როგორ მოძრაობს მაყურებლის თვალები დიზაინში და განსაზღვრავს რომელი ელემენტებია ყველაზე მნიშვნელოვანი ან ვიზუალურად მიმზიდველი.
თავდაპირველად იყო ქვის ფირფიტები, პაპირუსის გრაგნილები და ქაღალდი. შემდეგ გამოჩნდა კომპიუტერის ეკრანები და ელექტრონული ტაბლეტები. გვერდის ჩვენების ტექნოლოგიის განვითარებასთან ერთად, დიზაინერებს აქვთ შინაარსის ორგანიზების მკაფიო გზა. მაგრამ რომელია უკეთესი? მოკლედ , ვიზუალური იერარქია.
აქ არის ვიზუალური იერარქიის განმარტება: ვიზუალური იერარქია არის მოწყობა გრაფიკული ელემენტები დიზაინში თითოეული ელემენტის მნიშვნელობის მიხედვით. ვიზუალური წონა განსაზღვრავს ელემენტის მნიშვნელობა დიზაინის იერარქიაში, ეუბნება მაყურებელს რაზე გაამახვილოს ყურადღება და რა თანმიმდევრობით.
რესურსები დიზაინერებისთვის. 50 უფასო
ეს სულ უფრო მნიშვნელოვანი საკითხი ხდება, რადგან საპასუხო ჩარჩოები აიძულებენ დიზაინერებს იფიქრონ მრავალ სხვადასხვა გვერდზე ერთდროულად. მკვრივი ტექსტისა და მოკლე ყურადღების მიღმა, დიზაინერებმა შეიმუშავეს 6 პრინციპი, რათა მკითხველის თვალი მიემართოს ყველაზე მნიშვნელოვან ინფორმაციას.
ვიზუალური იერარქიის ეს 6 პრინციპი დაგეხმარებათ შეიმუშაოთ ყველაფერი, ბროშურებიდან დაწყებული აპლიკაციებით დამთავრებული, რაც უზრუნველყოფს საბოლოო მომხმარებელს დიზაინერებისთვის კითხვის პოზიტიური გამოცდილება.
ყველა კულტურა იკითხება ზემოდან ქვემოდან, ხოლო კულტურის უმეტესობა იკითხება მარცხნიდან მარჯვნივ. მაგრამ მიუხედავად იმისა, რომ ეს ცოდნა მნიშვნელოვანია გვერდის დიზაინი, დიზაინერებმა იციან, რომ ამოცანა გაცილებით რთულია.
ბოლოდროინდელმა კვლევებმა აჩვენა, რომ ადამიანები ჯერ ათვალიერებენ გვერდს, რათა ნახონ, დაინტერესებულნი არიან თუ არა ამით, სანამ წაიკითხავენ. სკანირების შაბლონები, როგორც წესი, იღებენ ერთ-ერთ ორ ფორმას, "F" და "Z", და თქვენ შეგიძლიათ ისარგებლოთ ამით თქვენს დიზაინში.
F-ნიმუშები. ვიზუალური იერარქიის პრინციპები
F- თარგები ვრცელდება ტრადიციულ ტექსტურ გვერდებზე, როგორიცაა სტატიები ან ბლოგის პოსტები. მკითხველი სკანირებს მარცხენა მხარეს გვერდზე ეძებს საინტერესო საკვანძო სიტყვებს მარცხნივ გასწორებულ სათაურებში ან თავდაპირველ თემის წინადადებებში, შემდეგ ჩერდება და კითხულობს (მარჯვნივ), როდესაც ის წააწყდება რაიმე საინტერესოს. შედეგი ჰგავს F-ს (ან E-ს, ან რაღაც უფრო ჰორიზონტალურ ზოლებს; მაგრამ ტერმინი „F“ დარჩა).
როგორ შეგიძლიათ გამოიყენოთ ეს? გაასწორეთ მნიშვნელოვანი ინფორმაცია მარცხნივ და გამოიყენეთ მოკლე, თამამი სათაურები, ტყვიები და სხვა მსგავსი ელემენტები, რომლებიც ყურადღებას იპყრობს აბზაცის ბლოკების დასაშლელად.
Z- მოდელი. ვიზუალური იერარქიის პრინციპები
Z- შაბლონები ვრცელდება სხვა ტიპის გვერდებზე, როგორიცაა რეკლამები ან ვებსაიტები, სადაც ინფორმაცია სულაც არ არის წარმოდგენილი ბლოკ აბზაცებში. მკითხველი ჯერ ათვალიერებს გვერდის ზედა ნაწილს, სადაც, სავარაუდოდ, მნიშვნელოვანი ინფორმაცია მოიძებნება, შემდეგ გადადის მოპირდაპირე კუთხეში დიაგონალზე და იგივეს აკეთებს გვერდის ბოლოში.
ვებ დიზაინერები, როგორც წესი, ქმნიან თავიანთ გვერდებს ისე, რომ მკაფიოდ შეესაბამებოდეს ამ ქცევას, ათავსებენ ყველაზე მნიშვნელოვან ინფორმაციას კუთხეებში და სხვა მნიშვნელოვან ინფორმაციას ორიენტირებენ ზედა და ქვედა ზოლების გასწვრივ და აკავშირებენ დიაგონალს.
ქვემოთ 2010 წლის კონფერენციის ასამბლეის დიზაინში მნიშვნელოვანი ელემენტებია ლოგო (ზედა მარცხნივ), ღილაკი "რეგისტრაცია ახლა" (ზედა მარჯვნივ) და დინამიკების სია (ქვემოთ), რომლებიც სტრატეგიულად მოთავსებულია ლამაზ Z- შაბლონის წერტილებში.
2. ზომა მნიშვნელოვანია. ვიზუალური იერარქიის პრინციპები
_
ეს საკმაოდ მარტივია: ხალხი პირველ რიგში დიდ რამეებს კითხულობს. თუ თქვენი თვალები მიიპყრო „სპექტაკლზე“, სანამ „Young Vic“-ის ქვემოთ მოცემულ რეკლამაში „გაყოფა“, დაუყოვნებლივ უნდა მიმართოთ აღქმის ფსიქოლოგს: ალბათ, კარგი ფულის გამომუშავება შეგიძლიათ იშვიათი ანომალიის ტესტირებით.
საინტერესო ის არის, რომ ეს ტენდენცია საკმაოდ ძლიერია იმისთვის, რომ უარყოს ზემოდან ქვევით წესი. ზემოთ მოყვანილ სურათზე „ჰაკ“ აჭარბებს „მოქმედების დროს“, რადგან ის უფრო დიდია და მარცხნივ (ასე რომ მარცხნიდან მარჯვნივ წესი გეხმარებათ).
მაგრამ ყოველწლიური ანგარიშის შემდეგ გვერდზე: ადამიანის უფლებების კამპანია 2012 (განვითარებულია მეხუთე მედიის სვეტში) ვრცლად ვკითხულობთ შრიფტი „ბრძოლა თანასწორობისთვის კამპანიის ბილიკზე“ მის ზემოთ ტექსტის წინ „არჩევნები 2012“. ვიზუალური იერარქიის პრინციპები
„არჩევნები 2012“ არის ინფორმაციის უმაღლესი დონის რიგი: ის გვეუბნება ზოგად თემას, რომელსაც ქვემოთ მოცემული ინფორმაცია ეხება. მაგრამ დიზაინერმა გადაწყვიტა, რომ სტატიის სათაური უფრო საინტერესო იყო მკითხველებისთვის და ამიტომ შეაფასა ისე, რომ ჯერ წაკითხული ყოფილიყო.
3. სივრცე და ტექსტურა. ვიზუალური იერარქიის პრინციპები
ყურადღების მიქცევის კიდევ ერთი გზაა მიეცით შიგთავსს საკმარისი ადგილი სუნთქვისთვის . თუ ღილაკის ირგვლივ მნიშვნელოვანი უარყოფითი სივრცეა ან ტექსტური ბლოკის ხაზები ფართოდ არის დაცული, ეს ელემენტები უფრო ადვილად შესამჩნევი იქნება მკითხველისთვის.
როგორც ხედავთ ქვემოთ მოცემულ სურათზე (DrawtoClick-ის საიტის ნაწილი), დაშორება შეიძლება იყოს ელეგანტური ალტერნატივა ან ზომის გამოყენება. აქ გაყიდვადი პუნქტი „Notre agence vouscompagne...“ არის დაწერილი ძალიან პატარა შრიფტით, მაგრამ მას აკრავს თეთრი სივრცის სიმრავლე, რაც მიუთითებს მის მნიშვნელობაზე. ქვემოთ, ფრაზები "Le Compendre", "Le Réaliser" და "Le Partager" დამატებით აქცენტს იძენს მიმდებარე სივრცისგან მოწყვეტით.
როდესაც ადამიანები საუბრობენ "ტექსტურაზე" ვიზუალურ იერარქიასთან დაკავშირებით, ისინი არ გულისხმობენ ტექსტურის გრაფიკულ ეფექტებს. უფრო მეტიც, ამ ტიპის "ტექსტურა" ეხება სივრცის, ტექსტის და სხვა დეტალების საერთო მოწყობას ან სტრუქტურას გვერდზე. Bright Pink-ის ეს მაგალითი კარგად ასახავს კონცეფციას:
პირველ სურათზე სიტყვა "სპორტი" უფრო მაღალია იერარქიაში, ვიდრე "ბადმინტონი", რადგან ის უფრო მაღალი, დიდი და თამამია. მე-2 სურათზე ორი სიტყვა დაახლოებით ექვივალენტურია, შავი მართკუთხედის წყალობით, რომელიც გამოარჩევს „ბადმინტონს“ და ათავსებს მას საკუთარ სივრცეში.
მესამე სურათზე, ფონის ჩანაწერი წყვეტს "სპორტულ" სივრცეს, მაგრამ არა "ბადმინტონის" სივრცეს და, შესაბამისად, იწვევს უკუსვლას, სადაც "ბადმინტონი" ყველაზე მაღალია იერარქიაში. ამ განვითარების პროგნოზირება რთულია, ამიტომ დიზაინერები მას ხშირად უკავშირებენ „ტექსტურის“ ჰოლისტურ გრძნობას.
4. შრიფტის წონა და დაწყვილება. ვიზუალური იერარქიის პრინციპები
შრიფტის შერჩევა გადამწყვეტია ვიზუალური იერარქიის დასამყარებლად. შრიფტის ყველაზე მნიშვნელოვან ატრიბუტებს შორის არის წონა, შტრიხების სიგანე, რომლებიც ქმნიან მის ასოებს და სტილი, როგორიცაა serif და sans serif. სხვა მოდიფიკაციებმა, როგორიცაა დახრილი, ასევე შეიძლება როლი შეასრულოს.
დააკვირდით როგორ ყურსასმენი გავლენას ახდენს სიტყვების იერარქიის თანმიმდევრობაზე ქვემოთ მოცემულ ვებ დიზაინში The Tea Factory-ისთვის: "შესანიშნავი ჩაი, რომელიც დაგეხმარებათ გახურებაში" არის თამაშის სახელი, მაგრამ შრიფტის წონაში და დახრილი შრიფტის განსხვავება, გარდა სიტყვების განლაგებისა, ქმნის უფრო მეტს. დინამიური, ნაკლებად ხაზოვანი, კითხვის გამოცდილება. "://azbyka.com.ua/foto/tea-factory.jpg" />
ზოგიერთ შემთხვევაში, მიზანია მრავალფეროვანი ინფორმაციის წარმოჩენა, როგორც თანაბრად გადაუდებელი. ყველას ერთნაირი ზომისა და წონის დაყენება უზრუნველყოფს ეკვივალენტობას, მაგრამ ასევე გახდის მას ერთფეროვან იერს. შრიფტის დიფერენციაცია ამის თავიდან აცილების ერთ-ერთი გზაა, როგორიცაა Trendi-ის ჟურნალის ყდა ქვემოთ. ვიზუალური იერარქიის პრინციპები
ბროშურის მომზადება დასაბეჭდად.
აქ, გვერდის პერიფერიის გარშემო არსებული ხუთი თიზერი იერარქიაში ერთნაირია, მაგრამ მიაღწიეთ მრავალფეროვნებას ორი კარგად დაწყვილებული შრიფტის შეცვლით - ერთი საშუალო წონის სერიფი და მეორე მსუბუქი, მაგრამ მაღალი sans-serif.
5. ფერი და ჩრდილი.
აქ არის კიდევ ერთი უაზრო: ნათელი ფერები გამოირჩევიან მდუმარე ფერებიდან ან ნაცრისფერი ჩრდილებისგან, ხოლო ღია ფერები უფრო "შორს" ჩანს და, შესაბამისად, უფრო დაბალია იერარქიაში, ვიდრე უფრო მდიდარი, მუქი ფერები. ვებსაიტი Where Are They კონტრასტს უწევს ნათელ შუქს და ფერად განათებას შავი და თეთრი ბადის ეფექტთან სიკაშკაშის ეფექტთან:
გუგენჰაიმის ვებსაიტი იყენებს ფერს ისეთი მნიშვნელოვანი ინფორმაციის ხაზგასასმელად, როგორიცაა მდებარეობის შერჩევა, ამჟამად ნანახი გამოფენების სია და სპეციალური გამოფენების ბმულები. ვიზუალური იერარქიის პრინციპები
საუკეთესო შრიფტი პერსონალური შეფუთვისთვის
მეორეს მხრივ, უიტნის მუზეუმის ვებსაიტი აყალიბებს იერარქიას ერთი შრიფტის, წონისა და ბგერის (შავი) ფარგლებში ელფერით (რაც ნიშნავს თეთრის დამატებას საბაზისო ტონში, რაც მას უფრო მსუბუქს ხდის). „კორი არქანგელოზი პოპ კულტურაზე“ აშკარად არის „ახალი უიტნის ისტორიების“ ქვემოთ ვიზუალურ იერარქიაში, არა მხოლოდ იმიტომ, რომ ის უფრო დაბალია, არამედ იმიტომაც, რომ მისი ჩრდილი უფრო ღიაა, რაც მას ნაკლებად შესამჩნევს ხდის თეთრ ფონზე. ვიზუალური იერარქიის პრინციპები
ფერს განსაკუთრებული მნიშვნელობა აქვს მობილური დიზაინი აპლიკაციები, სადაც ეკრანის მცირე ზომა ზღუდავს სხვა სტრატეგიების გამოყენების უნარს, როგორიცაა ზომის ცვალებადობა და ფართო ინტერვალი. Grainger Industrial Supply აპში, ღილაკი „გადადით გადახდაზე“ შეღებილია წითლად, რაც მას გამოარჩევს ნებისმიერ გვერდზე, სადაც ჩანს. ვიწრო ძიების შედეგების პანელი, პირიქით, ნაცრისფერია, რაც მას იერარქიაში უხეშად ექვივალენტურს ხდის სხვა ელემენტებს, როგორიცაა საძიებო ზოლი და პროდუქტის ბმულები.
განაცხადის დიზაინი Grainger-ისთვის
6. მიმართულება დიზაინერებისთვის.
გვერდის განლაგება, როგორც წესი, შექმნილია ვერტიკალური და ჰორიზონტალური ხაზების ბადის შესასრულებლად, როგორც კონვენციურად, ასევე იმიტომ, რომ ის ყველაზე იკითხება ფორმატში. ასეთ სისტემაში არის იერარქიის დამყარების ახალი გზა: ბადის გატეხვა.
ტექსტი, რომელიც განლაგებულია მრუდის ან დიაგონალის გასწვრივ, ავტომატურად დგას მიმდებარე ბადის მიერ დაბლოკილი ტექსტის წინააღმდეგ და ცენტრალურ ადგილს იკავებს. ეს უკვე დიდი ხანია არის ეფექტური სტრატეგია რეკლამაში, როგორიცაა Frost Design-ის ავტობუსის გაჩერების პოსტერი.
დატოვე კომენტარი