7 често срещани грешки, направени с отзивчиви макети

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

Снимката е предоставена от PlasmaComp, http://www.plasmacomp.com/blogs/are-you-making-these-responsive-design-mistakes



Снимката е предоставена от PlasmaComp, http://www.plasmacomp.com/blogs/are-you-making-these-responsive-design-mistakes

Като преходна фаза, която придава форма на идеите, макетите имат голяма тежест в процеса на проектиране. Това парче прави преглед на най-често срещаните грешки при макетиране при проектиране в RWD, така че можете да се уверите, че вашата стъпка към отзивчивост е стъпка напред, а не назад.



01. Проектиране за устройства, а не за екрани

Според данни, предоставени от OpenSignal , на пазара вече има 24 093 различни устройства с Android, спрямо 18 796 само за миналата година - и това дори не брои iOS и други устройства.

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



Снимката е предоставена от Люк Врубелски: https://www.flickr.com/photos/lukew

Снимката е предоставена от Люк Врубелски: https://www.flickr.com/photos/lukew

Не мислете по отношение на носими устройства, телефони, таблети или настолни компютри. Разделете вашите макети на:

  • Микроекрани
  • Малки екрани
  • Среден клас
  • Голям
  • Много голям

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



как да скриете перспективната мрежа в илюстратора -

Фокусирането върху размера на екрана също така предотвратява разчитането на размера на устройството за отзивчиви точки на прекъсване, още една отзивчива грешка в макета, която ще опиша сега.

звездни войни измамник един филм плакат

02. Разчита се само на размерите на устройствата за точките на прекъсване

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

Снимката е предоставена от Стефани Уолтър, http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/

Снимката е предоставена от Стефани Уолтър, http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/

Както е обяснено в Най-добри практики за уеб потребителски интерфейс от UXPin , 'изграждане на дизайна, а не на устройството':

  • Започнете с Първо за мобилни устройства подход: създайте макет за най-малкия екран, след което увеличете мащаба. За справка, iPhone в портрет е широк 320 пиксела.
  • Ако много от вашите потребители имат носими устройства, трябва да помислите за микроекрани с още по-малка резолюция. Apple Watch - най-малкият след Pebble Time - има ширина 272 пиксела.
  • Тъй като вашият дизайн започва да се чувства напрегнат, добавете медийни заявки за да направите необходимите промени в оформлението, така че вашият дизайн да е удобен и да работи добре на всяка стъпка.
  • Проектирането за максимална ширина от 2000 пиксела обхваща всички дисплеи, с изключение на най-големите, налични днес. Според най-новите статистически данни за браузъра от W3Schools , 99 процента от посетителите имат резолюции, които попадат под този размер от 2000 пиксела.
  • Въведете отзивчиви точки на прекъсване въз основа на нуждите на дизайна, за да се избегне онова неудобно междинно състояние, което попада между често срещаните размери на устройствата. Създаването на дизайн, който „отговаря“ на размера на екрана, е естеството на RWD.

03. Пренебрегване на контролите на допир

Сензорните контроли са едно от големите предимства на повечето мобилни устройства: те са забавни, интуитивни и спестяват време. Не ги пренебрегвайте на някои устройства, защото други не могат да ги използват. Ето няколко съвета за включване на сензорни контроли:

  • Познайте най-добрите практики за всяко устройство. На малките екрани долният ляв ъгъл е най-лесното място за достъп до палеца, така че поставете там най-щраканите си елементи. Въпреки това, за таблетите, тъй като те се държат по различен начин, горните ъгли са основно докосване.
  • Целите на докосване (като бутоните CTA) трябва да бъдат с подходящ размер. Минимум 44 точки отговаря на насоки, подходящи за дебели пръсти.
  • Предложеното разстояние между елементите е най-малко 23pt, за да се избегне щракване върху грешния.
  • Адаптирайте се към липсата на състояния на задържане. Можете да замените активираните с щракване функции или да разкриете елементите за задържане в родно състояние от самото начало.
  • Не преоткривайте колелото. Чести жестове с ръце като плъзгане работи най-добре за навигация и други функции, тъй като те вече са научени от потребителя.

04. Връзка към съдържание, което не е удобно за мобилни устройства

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

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

05. Лошо планиране за по-големи екрани

Предлагам подход, който е първо мобилен, а не само мобилен. Докато по-малките екрани може да са по-популярни, 42% от трафика все още идва от посетители на работния плот. Трябва да се вземат предвид и двете страни на спектъра на размера на екрана.

Снимката е предоставена от UXPin

Снимката е предоставена от UXPin

Ето няколко съвета от Ръководството за макети за разглеждане на 'голямата картина':

  • Трябва да направите нещо повече от просто увеличаване на по-малки дизайни на екрана. Възползвайте се от допълнителното пространство, като добавите нови елементи или преструктурирате визуалната йерархия.
  • Проверете качеството на изображенията - те могат да изглеждат по-размазани на по-големите екрани.
  • По същия начин проверете четливостта на дължините на линиите. Оптимално е между 45 и 75 знака. Можете да използвате a отметка от Крис Койер за да тествате дължините на линиите на вашия дизайн.
  • Не увеличавайте твърде много шрифтовете. Големите шрифтове заемат значително хоризонтално пространство, което може да принуди читателите да забавят или да пропуснат напред в съдържанието.

06. Използване на последователна навигация през размери на екрана

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

да се научим да рисуваме на таблет

Снимката е предоставена от FiveSimpleSteps (десктоп)

Снимката е предоставена от FiveSimpleSteps (десктоп)

Снимката е предоставена от FiveSimpleSteps (мобилно устройство)

Снимката е предоставена от FiveSimpleSteps (мобилно устройство)

Известна последователност обаче е добра, за да се поддържа последователен UX. Някои елементи трябва да останат същите, за да се изгради разпознаваем интерфейс и да се предлага на потребителите как да използват потребителския интерфейс на ново устройство. Тези елементи трябва да останат последователни:

  • Етикети на връзки или бутони
  • Шрифтове
  • Цветни процедури

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

  • Размер на бутона
  • Визуално оформление
  • Навигационна функционалност - включително сензорни контроли

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

07. Скриване на съдържание

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

Сега знаем, че повечето мобилни потребители изобщо не са мобилни 68% от употребата се случва у дома . Повечето потребители искат пълния сайт на мобилно устройство. Не съкратено, но преформатирано.

Снимката е предоставена от UXPin

Снимката е предоставена от UXPin

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

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

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

мога ли да използвам телефона си като таблет за рисуване

Допълнителна информация

Съветите тук са само преглед на това, което се предлага в безплатната електронна книга UX Design Trends 2015 & 2016 .

Като анализира 71 от най-добрите примери за UX днес, това ръководство деконструира полезни тенденции в прости дизайнерски тактики за ежедневен дизайн.

Думи: Джеръми Жирард

Джеръми Жирард е ръководител на уеб дизайн / разработка в Провиденс, базиран в Род Айлънд Предвиждайте технологични съветници . Той също така преподава дизайн на уебсайтове и разработка на интерфейси в Университета на Род Айлънд. Той допринася със съдържание в безплатна библиотека за дизайн от съвместното приложение за прототипиране UXPin.

Като този? Прочетете тези!

  • Как да проектирате макети, които разработчиците няма да мразят
  • 7 най-добри практики за създаване на макети
  • 15 често срещани грешки, които дизайнерите правят