საპასუხო დიზაინი: როგორ მოვიქცეთ სწორად, პირველად

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


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

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

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

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

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

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

გამარჯვების დიზაინი

საპასუხო დიზაინი: სწორად მიღება

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

რატომ არის საპასუხო დიზაინი ასე მნიშვნელოვანი??

აქ 2.1 მილიარდი მობილური ფართოზოლოვანი ხელმოწერაა.

ამერიკელი მოზრდილების 87% -ს აქვს მობილური ტელეფონი.

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

ამერიკელი მოზრდილების 45% -ს აქვს სმარტფონი, 90% იყენებს ტელეფონს ინტერნეტის გასაღებად.

ამერიკელი მომხმარებლები საშუალოდ დღეში 1.4 საათს ხარჯავენ ინტერნეტში მობილური მოწყობილობით.

მობილური ტელეფონების მფლობელთა 37% და სმარტფონის მფლობელთა 64% იყენებს ტელეფონს ახალი ამბების ინტერნეტში მისაღებად.

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

სმარტფონის მომხმარებელთა 79% თავის ტელეფონებს იყენებს სავაჭრო მაღაზიაში დახმარების მისაღებად.

მომხმარებელთა 71% ელოდება, რომ მობილური საიტები სწრაფად იტვირთება, თუ არა უფრო სწრაფად, ვიდრე დესკტოპის საიტები.

მობილური ვიზიტორების 74% საიტს დატოვებს, თუ გადმოტვირთვის 5 წამზე მეტი დრო დასჭირდება.

საპასუხო საიტის ანატომია

განვითარების ეტაპზე, საპასუხო ვებგვერდის დიზაინის 3 ტექნიკური ინგრედიენტია:

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

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

Masthead

თავსაბურავი

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

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

ლოგო

უფრო დიდი და მასშტაბური უნდა იყოს საბოლოო განზომილებამდე.

პირველადი ნავიგაცია

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

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

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

საძიებო ყუთი

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

სურათების გალერეა

სურათის ნავიგაცია

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

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

პროდუქტის სურათი

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

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

პროდუქტის აღწერა

პროდუქტის მიმოხილვა

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

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

მიმოხილვის გრაფი

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

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

რაოდენობის ველი, ზომების ვარდნა და კალათის დამატება

გაზიარების ღილაკი

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

Footer

Footer ნავიგაცია

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

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

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

დასაწყისში დაბრუნება

ისევ და ისევ, ეს ყველაფერი მომხმარებლის გამოცდილებასა და მოხერხებულობაზეა!

წყაროები

  • მობილური ტექნოლოგიების მონაცემთა ცხრილი – pewinternet.org
  • მობილური ინტერნეტის გამოყენება და მომხმარებლის ქცევის ტენდენციები – madmobilenews.com
  • MobiForge – mobithinking.com
  • რატომ არის 2013 საპასუხო ვებ დიზაინის წელი – mashable.com
  • მობილური პირველი რეაგირების ვებ დიზაინის ანატომია – bradfrostweb.com
  • როგორ მუშაობს სითხე ბადეები საპასუხო ვებ დიზაინში – 1stwebdesigner.com
  • მედია მოთხოვნების მიღმა: ადაპტური ვებ დიზაინის ანატომია – slideshare.net
  • რა არის Heck საპასუხო ვებ დიზაინი? – johnpolacek.github.io
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map