Чувствителен дизайн: Как да го оправим първи път

Разкриване на информация Вашата поддръжка помага за поддържането на сайта! Печелим такса за препращане за някои от услугите, които препоръчваме на тази страница.


В мемоара си от 1939г, Вятър, пясък и звезди, Френският автор и аристократ Антоан дьо Сент-Екзюпери изрази мнение: „Дизайнер знае, че е постигнал съвършенство не когато няма какво да добави, а когато няма нищо, което да му се отнеме.“ Прочутият авиатор и автор на „Малкият принц“ не доживя да види информационната епоха, но въпреки това думите му продължават да резонират в свят, в който киберпространството е заменило небето като граница на иновациите.

В действителност, когато обхвата на вниманието се свива дори когато богатството на наличното съдържание се разширява експоненциално, подходът „по-малко е повече“ на Сент-Екзюпери е по-актуален от всякога. Бизнесът вече няма лукса да бие около пословичния храст, когато средният прозорец за ангажиране на мобилен посетител на уебсайта им е по-малко от пет секунди. Имайки предвид, че повече от пет цента на всеки долар сега се харчат онлайн, ще ви накара да направите всяка една от тези секунди.

Става въпрос за много повече от това просто да намерите реномиран доставчик на хостинг услуги и да качите основен уебсайт. Трябва да създадете сайт, който да отговаря на нуждите на всички посетители. (Ако имате нужда от помощ, за да разберете как работят уебсайтове и уеб хостинг, моля, вижте нашето илюстрирано ръководство за хостинг).

Ключът е да хванете окото на посетителя и да държите този прозорец широко отворен (и насочен към страницата ви) адаптивен дизайн. Пазарът бързо се превръща в много важна част от света след PC и тъй като все повече потребители получават своите новини, се наслаждават на забавления и правят покупки с таблети и смартфони, като се уверите, че вашият уеб сайт е проектиран така, че да отговаря на техните непрекъснато развиващи се нужди е от решаващо значение. Всичко е в запазването на функциите, които посетителите искат, и нито едно от нещата, които нямат.

Няма място за тромава графика, объркваща навигация или страници, заключени в резолюции само за десктоп. Мобилните потребители искат техния интернет, чист и оразмерен за екрана си, така че не забравяйте да изберете хост (и платформа), която поддържа наистина отзивчив дизайн.

Потенциалните награди за извличане на повече от по-малко са значителни. С повече от 2,1 милиарда абонати за мобилни широколентови услуги като потенциални клиенти, икономията на изразяване и максималната интерактивност са от първостепенно значение; най-добрият дизайн може да бъде само този, който може да се похвали с най-голямата интерактивност и най-малкото „дизайнерски щрихи“.

Печеливш дизайн

Чувствителен дизайн: Правилното му оформяне

В днешната иновативна среда броят на устройствата, използвани за сърфиране в мрежата, продължава да расте, без признаци за забавяне. Отзивчивият дизайн създава оптимално потребителско изживяване на устройства от десктоп до смартфон, улеснява потребителите да вземат бързи и образовани решения за покупка.

Защо отзивчивият дизайн е толкова важен?

Има 2,1 милиарда мобилни широколентови абонаменти.

87% от възрастните в Америка имат мобилен телефон.

55% използват мобилните си телефони, за да излизат онлайн, като 31% от тях отиват онлайн предимно, използвайки телефона си, а не компютър или друго устройство.

45% от възрастните в Америка имат смартфон, 90% използват телефона си, за да излизат онлайн.

Американските потребители прекарват средно по 1,4 часа на ден, сърфирайки в интернет на мобилно устройство.

37% от собствениците на мобилни телефони и 64% от собствениците на смартфони използват телефона си, за да получават новини онлайн.

60% от потребителите на таблети предпочитат да четат новини в мобилната мрежа, отколкото чрез приложение.

79% от потребителите на смартфони използват своите телефони, за да помогнат при пазаруването.

71% от потребителите очакват мобилните сайтове да се зареждат толкова бързо, ако не и по-бързо от сайтовете за настолни компютри.

74% от мобилните посетители ще изоставят сайт, ако изтеглянето му отнема повече от 5 секунди.

Анатомията на отзивчивия сайт

В етапа на разработка има 3 технически съставки на отзивчив дизайн на уебсайтове:

  1. Течни решетки – Дизайн на база процент, който съответно се адаптира към размера на екрана.
  2. Гъвкави изображения – Изображения с размер в относителни единици, за да не се показват извън съдържащия ги елемент.
  3. Медийни заявки – Начин за прилагане на CSS правила към страницата въз основа на размера на показвания браузър.

5 ключови дизайнерски елемента на отзивчивата електронна търговия гарантират възможно най-доброто потребителско изживяване.

The Masthead

удар с глава

Трябва да е малък и прост, за да се запази фокусът върху основното съдържание, но лесен за видимост.

Опитайте да използвате линеен CSS градиент вместо фоново изображение, за да дадете по-голяма гъвкавост на дизайна и да намалите HTTP заявките.

Логото

Трябва да са по-големи и да се намалят до крайните размери.

Основна навигация

Или главното меню може да бъде сложно, когато работите в отзивчив дизайн поради ограниченото пространство, осигурено от малките екрани на телефона.

Има много опции за преодоляване на това в зависимост от броя предпочитани опции на менюто, включително:

  • Проста котва от менюто в заглавката, която превключва основната навигация на малките екрани.
  • Заглавна котва, която скача потребителите към навигацията, която е поставена в долния колонтитул.
  • Лев навик за слайд (като Facebook), до който се осъществява иконата на менюто, разкрива тава, която се плъзга отляво и премества основното съдържание отдясно.
  • Навигация, която покрива основното съдържание на страницата.

Поле за търсене

Поле за търсене позволява на посетителите да прескачат директно до това, което търсят.

Галерията на изображенията

Навигация на изображенията

Вместо текстова навигация на изображението покажете визуализация на различни изгледи на продукти.

Изображенията трябва да се свързват с по-големите им колеги.

Изображение на продукта

Направете вашето изображение на продукта като фокусна точка на страницата.

Опитайте лекия скрипт, наречен Swipe.js, за да създадете образна въртележка за изображения, позволяваща на потребителите да прекарват пръст между снимките на продукта по удобен за докосване начин.

Описание на продукта

Преглед на продукта

Трябва да се показва над изображението (в маркирането преди контейнера с изображения), като предоставя на посетителя име на продукта, цена и популярност или рейтинг.

По този начин те могат да определят дали това е продуктът, който търсят, без да се налага да чакат зареждането на останалата част от страницата.

Преглед на броя

Броят на рецензиите прескача до отзивите под подробностите за продукта.

Този малък детайл може да бъде много ценен за 79% от потребителите на смартфони, които използват телефона си, за да помогнат при пазаруването, а може би дори правят или продават продажба.

Количество поле, падащ размер и бутон за добавяне в кошницата

Сподели бутон

Споделянето на съдържание и продукти в социалните мрежи може да бъде чудесен начин за увеличаване на експозицията. Просто го дръжте просто с един бутон.

Подножието

Навигация в колонтитула

Предоставянето на достъп до навигацията на основния сайт е добър начин за потребителя да премине към друга секция и да избегне оставянето им в задния край.

Номер и услуга за обслужване на клиенти

Не забравяйте, че телефоните извършват разговори! Посетителят може да има въпрос относно продукта и възможността бързо да се свърже с представител на обслужването на клиенти може да бъде точно това, което им е необходимо, за да вземат решение за покупка.

Обратно към горната връзка

Отново всичко е свързано с потребителското изживяване и удобството!

Източници

  • Информационен лист за мобилни технологии – pewinternet.org
  • Тенденции за използване на мобилен интернет и поведение на потребителите – madmobilenews.com
  • MobiForge – mobithinking.com
  • Защо 2013 е годината на отзивчивия уеб дизайн – mashable.com
  • Анатомия на мобилния първи отзивчив уеб дизайн – bradfrostweb.com
  • Как работят флуидни мрежи в отзивчив уеб дизайн – 1stwebdesigner.com
  • Отвъд медийни заявки: Анатомия на адаптивен уеб дизайн – slideshare.net
  • Какво по дяволите е отзивчив уеб дизайн? – 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