დიზაინის ობიექტების ვიზუალური აღქმის პროცესის ფილოსოფია. სამყაროს ვიზუალური აღქმა

Material Design არის დიზაინის ენა დანერგილი გუგლის წელიადრე, წარმოადგენდა კომპანიის გაბედულ მცდელობას შექმნას ერთიანი მომხმარებლის გამოცდილება ყველა მოწყობილობასა და პლატფორმაზე. ეს გამოირჩევა თამამი ფერებით, ჩრდილების ლიბერალური, მაგრამ პრინციპული გამოყენებით ინტერფეისის ფენების მითითებით და გლუვი ანიმაციებით, რომლებიც საკმაოდ უზრუნველყოფენ. კარგი გამოცდილებაინტერაქცია Android-ში (და Google-ის ზოგიერთ აპში iOS-ზე).

თუმცა, არის ერთი რამ Material Design-ის შესახებ, რომელიც მაწუხებს გასულ წელს შემოღებიდან: მცურავი მოქმედების ღილაკი.

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

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

ჩაძირვა გამოცდილებიდან მოდის

FAB-ები გამოირჩევიან ვიზუალურად — ისინი ფაქტიურად ეკრანზე UI ელემენტის თავზეა. ასევე, FAB-ის დამატება ავტომატურად გამოიწვევს ნაკლებად ჩაღრმავებულ UX-ს, განსაკუთრებით გავლენას მოახდენს აპებზე (ან ეკრანებზე), რომელთა მიზანია ინტერაქტიული გამოცდილების უზრუნველყოფა.

ერთი მაგალითია Google-ის ახალი ფოტო აპლიკაცია.

ფოტო აპი იხსნება გალერეის სახით მცურავი საძიებო ღილაკით. მაგრამ საქმე იმაშია, რომ როდესაც ვხსნი ფოტო აპლიკაციას, უბრალოდ მინდა... ვნახო ჩემი ფოტოები. ამგვარად, მცურავი საძიებო ღილაკი აშორებს მომხმარებელს ფოტოების დათვალიერებაში ჩაძირვისგან, რაც აპლიკაციის მთავარი მიზანია. დანერგილი, Smart Search არის Google Photo აპის უნიკალური ფუნქცია. მაგრამ ნიშნავს ეს იმას, რომ მას განაცხადში უნდა მიეცეს უმაღლესი დონის, მუდმივი FAB? (Ვფიქრობ არა.)
უცნაურად საკმარისია, Google მეთანხმება. FAB-ების Material Design გვერდზე Google განმარტავს, რომ „ყველა ეკრანს არ სჭირდება მცურავი ბრძანების ღილაკი“.
შემდეგ კი დასძენს, რომ „მთავარი მოქმედება გალერეაში სურათზე შეხებაა, ამ შემთხვევაში ღილაკი არ არის საჭირო.

ისინი გამოირჩევიან და ხელს უშლიან.

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

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

FAB ბლოკავს ღილაკს "რჩეულები" და თარიღი.

მომხმარებელმა დუმაზიმ გამოაქვეყნა Graphic Design Stack Exchange-ზე საკითხის შესახებ, რომელიც მას შეექმნა, როდესაც FAB-მა დაბლოკა "რჩეული" ვარსკვლავი, ისევე როგორც დრო მისი აპლიკაციის ეკრანზე. ეს ასახავს პრობლემას სიის ნახვის ყველა აპში და განსაკუთრებით პრობლემური ხდება, როდესაც სიაში ბოლო ელემენტი ვერ ასწრებს ზემოთ. ეს ნიშნავს, რომ მთელი სვეტი უნდა შეიწიროს (ვარსკვლავის მდებარეობის შეცვლა და ა.შ.) ეკრანის სათანადო გამოყენების უზრუნველსაყოფად.

შესაბამისად, FAB იკავებს ეკრანზე ბევრად მეტ უძრავ ქონებას, ვიდრე მისი ზომა გვთავაზობს.

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

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

FAB რეალურად აკეთებს ამას - თეორიულად. მაგრამ რა მოხდება, თუ ხელშემწყობი მოქმედება არ გამოიყენება ხშირად?

მიიღეთ მაგალითად Google აპი Gmail.

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

მაგრამ არის ეს?

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

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

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

გვინდა FAB? გადახაზეთ წინა - გვჭირდება ეს საერთოდ?

რა თქმა უნდა, ყველა FAB-ის გამოყენება არ ამცირებს Material აპლიკაციების გამოყენების გამოცდილებას. Იქ არის რამდენიმე ნათელი მაგალითები FAB-ები, რომლებსაც აქვთ აზრი და აუმჯობესებენ ამ აპების UX-ს.

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

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

გთხოვთ, ასევე გაითვალისწინოთ, რომ ზემოთ მოცემული ეკრანის ანაბეჭდები მხოლოდ ისტორიის ნაწილს გვიყვება: რეალურად გამოყენებისას, FAB-ები ადგილზე რჩება მაშინაც კი, როდესაც მომხმარებელი სქროლობს (ხშირად). როგორც Google-მა არაერთხელ აღნიშნა Material Design-ში, მოძრაობის დიზაინი ისეთივე მნიშვნელოვანია, როგორც UI დიზაინი.

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

ასე რომ, რადგან ჩვენ თითქმის არ გვაქვს კარგი FAB განხორციელების მაგალითები, ჩნდება კითხვა: საჭიროა თუ არა ისინი?

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

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

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

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

Google's Material Design არის საკმაოდ კარგი ერთიანი, პრინციპული დიზაინის ენა, მაგრამ FAB არ არის საუკეთესო რამ ამაში.

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

09.09.2016 დამატებულია ახალი ღილაკი, ტალღოვანი ეფექტი არ მუშაობდა ძველზე ახალ Chrome-ში.

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

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

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

ღილაკი შექმნილია სხვა სტატიიდან მოდალური ფანჯრის დასაკავშირებლად. თუ თქვენ დააკავშირებთ მესამე მხარის ბმულებს, მაშინ ღილაკს აქვს მოვლენა თავის HTML კოდში

Onclick="return false;"

ახლა თქვენ უნდა დაამატოთ თავად სტილები სტილის ფაილს CSS.

#popup__toggle(ქვემოთ:25px;მარჯვნივ:10px;პოზიცია:ფიქსირებული;z-index:999;).img-circle(ფონის ფერი:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content -box;) .circlephone(box-sizing:content-box;-webkit-box-sizing:content-box;საზღვარი: 2px მყარი #29AEE3;სიგანე:150px;სიმაღლე:150px;ქვედა:-25px;მარჯვნივ:10px; პოზიცია:აბსოლუტური;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;გაუმჭვირვალობა: .5;-webkit-ანიმაცია: წრე-ანიმი 2.4s infinite ease-in -out !მნიშვნელოვანი;-moz-ანიმაცია: წრე-ანიმი 2.4s infinite ease-in-out !მნიშვნელოვანი;-ms-ანიმაცია: circle-anim 2.4s infinite ease-in-out !მნიშვნელოვანი;-o-ანიმაცია: წრე- anim 2.4s infinite ease-in-out !მნიშვნელოვანი;ანიმაცია: circle-anim 2.4s infinite ease-in-out !მნიშვნელოვანი;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition : ყველა .5s;ტრანზიცია: ყველა 0.5s;) .circle-fill(box-sizing:content-box;-webkit-box-sizing:content-box;ფონის ფერი:#29AEE3;სიგანე:100px;სიმაღლე:100px ;ქვედა:0px;მარჯვნივ:35px;პოზიცია:აბსოლუტური;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;საზღვარი: 2px მყარი გამჭვირვალე;-webkit-ანიმაცია : circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in -out;-o-ანიმაცია: წრე-შევსება-ანიმი 2.3s უსასრულო სიმარტივე-შესასვლელი;ანიმაცია: წრე-შევსება-ანიმი 2.3ს უსასრულო სიმარტივე-შესასვლელი;-ვებ-კიტი-გარდამავალი: ყველა .5წ;-moz- გადასვლა: ყველა .5s;-o-transition: ყველა .5s;ტრანზიცია: ყველა 0.5s;) .img-circle(box-sizing:content-box;-webkit-box-sizing:content-box;width:72px; სიმაღლე: 72 პიქსელი; ქვედა: 14 პიქსელი; მარჯვნივ: 49 პიქსელი; პოზიცია: აბსოლუტური;-ვებკიტი-საზღვრის-რადიუსი: 100%;-moz-საზღვრის-რადიუსი: 100%;საზღვარი-რადიუსი: 100%;საზღვარი: 2px მყარი გამჭვირვალე;გაუმჭვირვალობა : .7;) .img-circleblock(box-sizing:content-box;-webkit-box-sizing:content-box;width:72px; სიმაღლე:72px;background-image:url(images/mini.png); ფონი-პოზიცია: ცენტრი ცენტრი; ფონური-გამეორება:არა-განმეორება;ანიმაციის-სახელი: გადახვევა;-webkit-animation-name: tossing;ანიმაცია-ხანგრძლივობა: 1,5წმ;-ვებ-კიტი-ანიმაცია-ხანგრძლივობა: 1,5წმ;ანიმაცია-გამეორება -count: უსასრულო;-webkit-animation-iteration-count: უსასრულო;).img-circle:hover(გაუმჭვირვალობა: 1;) @keyframes პულსი (0% (ტრანსფორმა: მასშტაბი(0.9); გამჭვირვალობა: 1;) 50% (ტრანსფორმა: მასშტაბი(1); გამჭვირვალობა: 1; ) 100% (ტრანსფორმა: მასშტაბი (0.9); გამჭვირვალობა: 1;)) @-webkit-keyframes პულსი (0% (-webkit-transform: scale(0.95); გამჭვირვალობა: 1;) 50% (-webkit-transform: scale(1);გაუმჭვირვალობა: 1;) 100% (-webkit-transform: scale(0.95);გაუმჭვირვალობა: 1;)) @keyframes tossing (0% (transform: rotate(-8deg);) 50% (transform: rotate(8deg);) 100% (transform: rotate(-8deg);)) @-webkit-keyframes tossing (0% (-webkit-transform: rotate(-8deg);) 50% (-webkit-transform: rotate (8 გრადუსი);) 100% (-webkit-transform: rotate(-8deg);)) @-moz-keyframes წრე-ანიმი (0% (-moz-transform: rotate(0deg) scale(0. 5) skew (1deg); გამჭვირვალობა: .1;-moz-გაუმჭვირვალობა: .1;-webkit-გაუმჭვირვალობა: .1;-o-გაუმჭვირვალობა: .1;) 30% (-moz-transform: rotate(0deg) მასშტაბი (0.7) დახრილობა (1 გრადუსი); გამჭვირვალობა: .5;-moz-გაუმჭვირვალობა: .5;-ვებ-კიტი-გაუმჭვირვალობა: .5;-o-გაუმჭვირვალობა: .5;) 100% (-moz-ტრანსფორმა: rotate(0deg) მასშტაბი (1) დახრილობა (1 გრადუსი); გამჭვირვალობა: .6;-moz-გაუმჭვირვალობა: .6;-ვებ-კიტი-გაუმჭვირვალობა: .6;-o-გაუმჭვირვალობა: .1;)) @-webkit-keyframes წრე-ანიმი ( 0 % (-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;) 30% (-webkit-transform: rotate(0deg) scale(0.7) skew(1deg); -webkit-გაუმჭვირვალობა: .5;) 100% (-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;)) @-o-keyframes წრე-ანიმი (0 % (-o-ტრანსფორმაცია: rotate(0deg) kscale(0.5) skew(1deg);-o-გაუმჭვირვალობა: .1;) 30% (-o-transform: rotate(0deg) scale(0.7) skew(1deg); -o-გაუმჭვირვალობა: .5;) 100% (-o-transform: rotate(0deg) scale(1) skew(1deg);-o-გაუმჭვირვალობა: .1;)) @keyframes circle-anim ( 0% (transform : rotate(0deg) scale(0.5) skew(1deg);გაუმჭვირვალობა: .1;) 30% (transform: rotate(0deg) scale(0.7) skew(1deg);გაუმჭვირვალობა: .5;) 100% (transform: rotate (0 გრადუსი) სკალა (1) სკევი (1 გრადუსი); გამჭვირვალობა: .1;)) @-moz-keyframes circle-fill-anim (0% (-moz-transform: rotate(0deg) scale(0.7) skew(1deg);გაუმჭვირვალობა: .2;) 50% (-moz -ტრანსფორმა: rotate(0deg) -moz-scale(1) skew(1deg);გაუმჭვირვალობა: .2;) 100% (-moz-transform: rotate(0deg) scale(0.7) skew(1deg);გაუმჭვირვალობა: .2 + (0 გრადუსი) მასშტაბი(1) დახრილობა(1 გრადუსი); გამჭვირვალეობა: .2; ) 100% (-ვებ ნაკრები-ტრანსფორმა: როტაცია(0 გრადუსი) მასშტაბი(0.7) დახრილობა(1 გრადუსი); გამჭვირვალობა: .2;)) @-o- keyframes circle-fill-anim ( 0% (-o-transform: rotate(0deg) scale(0.7) skew(1deg); გამჭვირვალობა: .2;) 50% (-o-transform: rotate(0deg) scale(1) skew(1deg);გაუმჭვირვალობა: .2;) 100% (-o-transform: rotate(0deg) scale(0.7) skew(1deg);გაუმჭვირვალობა: .2;)) @keyframes circle-fill-anim ( 0% ( ტრანსფორმაცია: rotate(0deg) scale(0.7) skew(1deg);გაუმჭვირვალობა: .2;) 50% (transform: rotate(0deg) scale(1) skew(1deg);გაუმჭვირვალობა: .2;) 100% (transform: rotate(0deg) scale(0.7) skew(1deg);გაუმჭვირვალობა: .2;))

პირველი 7 ხაზი პასუხისმგებელია ღილაკის გამოჩენაზე, შემდეგ კი ანიმაციაზე. პირველ სტრიქონში შეგიძლიათ დააკონფიგურიროთ ღილაკის მდებარეობა, ხოლო მეექვსე სტრიქონში მიუთითოთ გამოსახულების გზა პარამეტრში background-image:url(mini.png).

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

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

სულ ესაა, მადლობა ყურადღებისთვის. 🙂

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

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

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

<a class =”start” href =”#” ><img src =”სურათი” >a >

ჩვენ შევადგინეთ html კოდი, ახლა ვცადოთ მისი ცურვა.

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

.დაწყება( პოზიცია: ფიქსირებული; z-ინდექსი: 99999 ; } .დაწყება( მარცხენა: 0 :პოზიცია: დაფიქსირებულია; ზედა: 200 პიქსელი; z-ინდექსი: 99999 ; }

თუ ჩვენ გვჭირდება ღილაკის განთავსება მარჯვნივ, მაშინ მარცხენას ნაცვლად უნდა დავაყენოთ მარჯვნივ, კერძოდ:

.დაწყება( პოზიცია: ფიქსირებული; უფლება: 0 ; ზედა: 200 პიქსელი; z-ინდექსი: 99999 ; }

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

<div class =”block_start” >კონტენტის დაბლოკვაdiv >

CSS

.block_start( ფონი: #382d25; საზღვარი: 1 px მყარი #382d25; საზღვარი-რადიუსი: 6 პიქსელი; ყუთი-ჩრდილი: 0 px 0 px 8 px #382d25; შრიფტის ზომა: 14 პიქსელი; padding: 5 px 5 px 0; პოზიცია: ფიქსირებული; უფლება: 25 პიქსელი; ტექსტის გასწორება: ცენტრში; ზედა: 25 პიქსელი; სიგანე: 96 პიქსელი; z-ინდექსი: 99999 ; }

მოდით კომენტარი გავაკეთოთ პარამეტრების თვისებებზე. ბლოკის პოზიცია მითითებული იყო პოზიციის გამოყენებით: ფიქსირებული; z-ინდექსი: 99999; და მოათავსეთ იგი ზედა მარჯვნივ - მარჯვნივ: 25px; ზედა: 25 პიქსელი. ბლოკის სიგანე (სიგანე) არის 96 პიქსელი. მისი დიზაინი მითითებულია პარამეტრებით - ფონი, საზღვარი, საზღვარი-რადიუსი, ყუთი-ჩრდილი. და ბოლოს, ისე, რომ ჩვენი ტექსტი ბლოკის შიგნით მოთავსდეს შუაში და ჰქონდეს მინდვრები და იყოს იგივე ზომა, დავწერეთ შრიფტის ზომა: 14px; padding: 5px 5px 0; ტექსტის გასწორება: ცენტრში.

თეორია კარგია, თქვენ ფიქრობდით, მაგრამ როგორ შეიძლება ამის განხორციელება რეალურად? მაგალითად, ვთქვათ, გვაქვს ორი ვებ – გვერდი – ერთი არის CMS Joomla, მეორე არის WordPress. აბა, მოდით დავაინსტალიროთ ის ჯომლასთვის

ინსტალაცია CMS Joomla-ზე

ღილაკის html კოდი უნდა განთავსდეს საიტის შაბლონში - ეს არის ფაილი index.php, რომელიც მდებარეობს აქ - your_site/templates/theme/ მე ყველაზე ხშირად ვაყენებ თავად კოდს ტეგის წინ.

, ოღონდ იქ სადაც მიგაჩნიათ მოთავსება, მთავარია ტეგებს შორის იყოს …

.
ახლა მოდით გადავიდეთ სტილებზე. ჩვენ ვაკოპირებთ მათ და ვათავსებთ შაბლონის პარამეტრების ფაილში - როგორც წესი, ეს არის CSS ან styles საქაღალდის layot.css, template.css ან general.css ფაილები.

ინსტალაცია CMS WordPress-ზე

საიტის მართვის პანელში, მარჯვნივ, მოძებნეთ განყოფილება ” გარეგნობა", შემდეგ "რედაქტორი" და გახსენით footer.php ფაილი და დაამატეთ ჩვენი ღილაკის html კოდი.
ღილაკების დიზაინის სტილი, ანალოგიურად, მოთავსებულია შაბლონის დიზაინის ფაილში - style.css ფაილში, რომელიც მდებარეობს wp-content/themes/your_theme/style.css ან ადმინისტრაციული პანელის მეშვეობით, "Appearance" -> განყოფილება "რედაქტორი", ფაილის style.css.

და ბოლოს, მოდით გავაკეთოთ ჩვენი ღილაკი "Top" და გავქრეთ, როდესაც გადახვევის ზოლი არის ზედა.

“Back to Top Button” / “Back to Top Button” საიტისთვის

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

<a href ="#" id "toTop" ><img src =http: //our_site/images /up1.png საზღვარი ="0" align "absmiddle" />a > <სკრიპტი src = "/your_site/js/toTop.js" type="text/javascript" >სკრიპტი > <სკრიპტის ტიპი = "text/javascript" > $(ფუნქცია()($("#toTop" ).scrollToTop(); ));სკრიპტი >

დაბნეულობის თავიდან ასაცილებლად, მე კონკრეტულად შევცვალე კლასი id="toTop-ით". toTop.js ფაილის შინაარსი შემდეგია

$(function())($.fn.scrollToTop=function())($(this).hide().removeAttr(“href”);if($(window).scrollTop()!=”0″) ($ (this).fadeIn("ნელი"))var scrollDiv=$(this);$(window).scroll(function())(if($(window).scrollTop()=="0″)( $(scrollDiv ).fadeOut("ნელი"))else($(scrollDiv).fadeIn("ნელი")));$(this).click(function())($("html, body").animate ((scrollTop :0),"ნელი"))))));

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

<სკრიპტი src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> სკრიპტი >

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

#ზემოდან ( ფონი: არცერთი; ქვედა: 20 პიქსელი; კურსორი: მაჩვენებელი; პოზიცია: ფიქსირებული; უფლება: 2 პიქსელი; }

ისე, ეს ყველაფერი დარწმუნებულია! იმედი მაქვს, ახლა იცით, რა და როგორ უნდა გააკეთოთ თქვენი „გემის“ ნაოსნობის დასაყენებლად.

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

wordpress ღილაკის მოდული სახელწოდებით Floating button დაამატებს ასეთ მცურავ ღილაკს თქვენს საიტზე.

მოდულის ინსტალაცია

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

პარამეტრები

ინსტალაციის შემდეგ, დამატებითი მცურავი ღილაკის ჩანართი გამოჩნდება მარჯვნივ თქვენი WordPress საიტის მართვის კონსოლში:

დააწკაპუნეთ მასზე და დაიწყეთ მცურავი ღილაკის დაყენება:

1. ღილაკის მდგომარეობა - ჩართეთ და გამორთეთ ღილაკის ჩვენება;

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

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

რეგისტრაცია დეველოპერების ვებსაიტზე

გადადით გვერდზე https://admin.probtn.com/login/new და შეავსეთ მისამართი ელფოსტა, სახელი და პაროლი და დააჭირეთ ღილაკს "შექმნა":

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

საიტზე რეგისტრაციისა და შესვლის შემდეგ ჩვენ ვხედავთ შემდეგ გვერდს:

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

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

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

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

ჩვენ ვასრულებთ საწყის დაყენებას ღილაკზე „გაგზავნა“ დაწკაპუნებით.

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

შექმნის შემდეგ, ჩვენი ღილაკი ნაჩვენებია მარცხნივ კონსოლში:

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

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

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

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

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

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

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

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

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

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

ბუკლეტის გვერდის შექმნა

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

ჰმ. რატომღაც ჩვეულებისამებრ გამოუვიდა.

იქნებ ასეა? არა, ეს ასე არ არის, მოსაწყენია.

ოჰ, მე მოვიფიქრე!

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

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

თვალის მოძრაობის ჩვენება ან დამალვა.

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

ვიზუალური აღქმის პრინციპები

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

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

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

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

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

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

ამ შემთხვევაში გამოიკვეთება ლინდერჰოფი, რაც ისევ არღვევს მთლიანობას.

მაინც ეყრდნობა კომუნიკაციის პრინციპი, დავხატოთ მაჩვენებლის ისრები.

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

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

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

ობიექტების გამოყოფა

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

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

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