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

რა უპირატესობები აქვს საიტის მზა UI ელემენტების გამოყენებას პროექტში?

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

სად შეგიძლიათ გამოიყენოთ HTML UI ელემენტების ნაკრები?

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

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

Ისე. თქვენი ყურადღებისთვის HTML UI ელემენტების 20 უფასო ნაკრებითქვენი საიტისთვის. არ დაგავიწყდეთ სოციალური ქსელის გამოწერა. ქსელები.

ელემენტი

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

დიზაინის ბლოკები

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

მასალის დიზაინი Bootstrap-ისთვის

უფასოა css ჩარჩოსთვის ჩამტვირთავი 3დიზაინში Google Material Design. სამწუხაროდ, მას არ გააჩნია ორიგინალური Google Material Design-ის დინამიკა Angular-ზე, მაგრამ ცდილობს მის მიბაძვას.

ბრტყელი ინტერფეისი

საკმარისად მაღალი ხარისხის UI კომპლექტი ბრტყელ სტილში, რომელიც ეფუძნება საპასუხო CSS Framework Bootstrap 3. უზარმაზარი პლუსია PSD წყაროების ხელმისაწვდომობა.

სუფთა UI ნაკრები

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

ბრტყელი დიზაინის UI - HTML5 + CSS3

დაბალი ხარისხის მინიმალური ნაკრები UI ელემენტები HTML5 + CSS3-ში. გარდა ამისა, მას აქვს ორიგინალური დიზაინი.

Metro UI CSS

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

პროპელერი

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

Material Design Lite

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

სემანტიკური ინტერფეისი

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

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

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

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

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

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

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

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

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

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

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

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

და თუ თქვენ გაქვთ სერიოზული პროექტი, მაშინ ჩვენი გუნდი მზად არის განათავსოს დიზაინის სისტემა ორგანიზაციაში ჩვენი განვითარების საფუძველზე და მოარგოს ის კონკრეტულ ამოცანებს Figma-ს გამოყენებით. ვებ / დესკტოპი და ნებისმიერი მობილური. ჩვენ ასევე ვიცნობთ React / React Native-ს. მიწერე T: @kamushken

პირველ თავში დამავიწყდა მეთქვა, რომ თქვენ უნდა გემოქმედათ დამტკიცებული ფერის სქემის საფუძველზე. ამოცანა არ იყო ახალი ფერების მოფიქრება და შეთავაზება. ფერის ასარჩევად ზოგჯერ ვიყენებ Adobe Color CC-ს (აუცილებელია ავტორიზაცია (!)) ან ColorScheme.ru. ჩავსვამ მთავარ ფერთა კოდს და შემდეგ ვირჩევ მას ჩრდილებს სხვადასხვა რეჟიმში: ანალოგური, მონოქრომული, ტრიადული და ა.შ. ძალიან ძლიერი და ჰარმონიული კონტრასტების შერჩევა შესაძლებელია, მაგალითად, ტრიადის რეჟიმში. ეს მე ვარ იმ ფაქტზე, რომ დიაპაზონის მისაღებად უკეთესი გზა მქონდა, მაგრამ ასეთი სურვილები არ იყო.

ასევე მქონდა კითხვები Open Sans ფონტთან დაკავშირებით, რომელიც გამოიყენებოდა საიტის მიმდინარე ვერსიაში. როგორც ჩანს, ეს უფრო და უფრო ნაკლებად არის გავრცელებული ყოველდღიურ სამყაროში. ახლა აქტუალურია: Helvetica, Lato, Source Sans Pro, Roboto და ა.შ. მაგრამ ეს კითხვა, თურმე, მარკეტოლოგების მიერ გადახედვის ეტაპზე იყო.

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

გაიდლაინები

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

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

1/15: შრიფტი Circe

მნიშვნელოვანი სიახლე მარკეტინგის გუნდიდან დასაწყისში: ჩვენ ვშორდებით Open Sans-ს და ვიღებთ Circe-ს მთავარ შრიფტად.

შრიფტის აღწერა

ცირკი არის გეომეტრიული გროტესკი, რომელსაც აქვს ადამიანის სახე და მრავალი ლამაზი დამატება. შრიფტი შედგება 6 წონისგან განსხვავებული გაჯერებით, თხელიდან ექსტრა თამამამდე. შრიფტი თავის სახელს ენიჭება როგორც მასობრივ გასართობად ქცეულ გეომეტრიულ ფორმებსა და შექმნის პროცესს, ასევე თავისებურ, გარკვეულწილად სახიფათო ხასიათს. მიუხედავად იმისა, რომ ცირკის ძირითადი ფორმები საკმაოდ მშვიდი გეომეტრიული გროტესკებია გარკვეული ჰუმანისტური მახასიათებლებით, ალტერნატიულმა ფორმებმა და სვაშ ნიშნებმა შეიძლება მთლიანად შეცვალონ შრიფტის ბუნება. ერთის მხრივ, დიზაინერს შეუძლია ისარგებლოს კირილიცაზე არასოდეს უნახავი ფორმებით, მაგრამ, მეორე მხრივ, ამ მრავალფეროვნების ერთადერთი ზღვარი მხოლოდ მომხმარებლის გემოვნება და საღი აზრია, ასე რომ გარკვეულწილად შრიფტი მისთვის საშიში ხდება, როგორც ჯადოქარი ცირკი ოდისეის მეზღვაურებისთვის. Circe-ის სუპერ გაფართოებული პერსონაჟების კომპოზიცია, რომელიც მოიცავს როგორც ლათინურ, ასევე კირიულ სიმბოლოებს ევროპული ენების უმეტესობისთვის, ისევე როგორც ალტერნატიული ვარიანტებისა და ვარიანტების უზარმაზარ რაოდენობას, ორგანიზებულია სტილისტურ ნაკრებებად, რომლებიც საშუალებას გაძლევთ სწრაფად, მოხერხებულად და მოქნილად შეცვალოთ სიმბოლო. კომპლექტის. შრიფტი კარგია როგორც საკმაოდ მცირე ტექსტის ტიპებში, ასევე დიდ ზომებში, მაგალითად, ჟურნალების სათაურებში, პლაკატებში და ა.შ. დიზაინერი - ალექსანდრა კოროლკოვა. შრიფტი გამოუშვა ParaType-მა 2011 წელს.

თქვენივე სიტყვებით რომ ვთქვათ: შრიფტი არატრადიციულია ვებისთვის, უფრო ახლოსაა ტიპოგრაფიულ სტილთან, აქვს მასში „ლიტერატურული ჟღერადობა“. ეს მხოლოდ ჩემი ასოციაციებია. თუ შევადარებთ Open Sans-ს და Circe-ს, მაშინ ეს უკანასკნელი ცოტას იმარჯვებს სიმკვრივის მიხედვით.


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

2/15: ფერები

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

3/15: ტიპოგრაფია

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

4/15: ბმულები

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

5/15: ღილაკები

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

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

6/15: ტექსტის შეყვანა

თუ კვლავ მივმართავთ GMD-ს, დავინახავთ, რომ ასეთი საშუალებების გამოყენების ტენდენციაა:

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

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

7/15: ჩამოსაშლელები

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

8/15: სლაიდერები

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

9/15: ჩანართები / ჩანართები

- დიახ, ყველაფერი გასაგებია, მოდით გავაგრძელოთ!

10/15: შერჩევის ელემენტები

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

11/15: მაგიდა

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

12/15: იკონოგრაფია

ხატების გამოყენების რეკომენდაციები და მაგალითები. ვფიქრობ, GMD-ის ინტენსიურმა და გამოჩენილმა ხატებმა შეაფერხა იკონოგრაფიის ევოლუცია. ერთხელ იყო პიქსელირებული, შემდეგ ამოზნექილი, სადღაც მათ შორის, ios გამოკვეთილი (მოხაზულობა) შემოვიდა ტენდენციაში, ფერად-ფერადი ბრტყელი სტილი ცოტა ხნით ახლოს ციმციმდა (გახსოვთ, როდესაც გაუთავებელი ფსევდოჩრდილი გადაჭიმული იყო ობიექტის კუთხით?) . შემდეგ Google მოვიდა და თქვა, როგორ უნდა გავაკეთოთ ეს. და თუ სიმღერის ტექსტში ღრმად არ ჩავალთ, ბოლო დროს მხოლოდ GMD ხატულებს ვიყენებ მათი მრავალფეროვნებისა და შესრულებისთვის. თქვენ შეგიძლიათ აიღოთ მრავალი მეტაფორა დამოუკიდებელი ხატების დიზაინერებისგან (უფასო, მიეცით ყველა ზომა, png/svg/zip, მინიშნება: მოსახერხებელია დააწკაპუნოთ მარჯვენა ღილაკით და ჩამოტვირთოთ სასურველი ზომა). ვფიქრობ, რომ ინტენსიური ხატები უფრო გასაგები და შესამჩნევია (და საგზაო მოძრაობის წესების ნიშნები უნდა იყოს მითითება).

13/15: ბარათები

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

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

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

14/15: შესვლა

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

15/15: სპეციფიკაციები

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

თუ უპირატესობას ანიჭებთ 8px ბადეს, გაითვალისწინეთ, რომ ყველა padding არის 8-ის ჯერადი; თუ იყენებთ 10px ბადეს, როგორც ჩემს შემთხვევაში, მაშინ ვერ იპოვით 13 ან 27px ინტერვალს ელემენტებს შორის ამ დიზაინში, ყველა ბალიშები იქნება 10-ის ჯერადი.

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

თავის დასკვნა

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

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

1. იან ლოსერტიძალიან მაგარია, მისი

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

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

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

UI Patterns პროექტი შეიცავს რამდენიმე მახასიათებელს/ნაწილს:

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

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

UI დიზაინის შაბლონები

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

ისინი იყოფა რამდენიმე კატეგორიად:

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

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

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

დამაჯერებელი დიზაინის ნიმუშები

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

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

ინტერფეისის ეკრანის ბიბლიოთეკა

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

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

სულ. ზოგადად, UI Patterns სერვისი იქნება შესანიშნავი ასისტენტი ყველა დიზაინერისთვის: როგორც დამწყებთათვის, ასევე პროფესიონალი სპეციალისტებისთვის. ინტერფეისის დიზაინის შაბლონების შერჩევა მართლაც კარგია – 16000 ილუსტრაციის გარდა, არსებობს სხვადასხვა UX/UI ამოცანების დეტალური ანალიზი რჩევებით, განხორციელების ვარიანტებით და ა.შ.

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