Паттерн в дизайне это: Что такое паттерн в графическом дизайне / Skillbox Media

Дизайн 

Содержание

Z-образный паттерн в дизайне интерфейсов — UXPUB

Легко представить, что пользователи взволнованно читают каждое письмо, которое вы пишете. Выбросьте это из головы, потому что пользователи этого не делают. Они пробегают по нему глазами.

Пользователи не читают веб-страницы, они их просматривают.

Просмотр страницы означает, что они останавливаются, чтобы прочитать только, когда что-то бросается им в глаза.

Как дизайнер, вы имеете много контроля над тем, куда люди смотрят, когда они просматривают веб-страницу, которую вы разработали. Чтобы создать правильный путь для глаз посетителя, вам нужно понять, как наши глаза обрабатывают информацию. В этой статье я объясню теорию и практику создания визуальных иерархий в веб-дизайне с использованием Z-шаблона.

Что такое Z-паттерн, как он работает и почему он работает

Как и следовало ожидать, макет z-шаблона следует форме буквы Z. Дизайн z-паттерна задает маршрут, по которому человеческий глаз перемещается при просмотре страницы слева направо, сверху вниз:

  • Сначала люди просматривают сверху слева направо, формируя горизонтальную линию
  • Далее, вниз в левую часть страницы, создавая диагональную линию
  • Наконец, снова слева направо, образуя вторую горизонтальную линию

Когда глаза пользователей двигаются по этому шаблону, он образует воображаемую букву “Z”:

Пример Z-шаблона. Изображение: Tutplus

Эта модель работает, потому что большинство читателей западной культуры просматривают вашу страницу так же, как книгу – сверху вниз, слева направо.

Когда его использовать

Z-паттерн встречается на страницах, которые не сосредоточены на тексте (для перегруженных текстом страниц, таких как статьи или результаты поиска, лучше использовать F-паттерн). Это делает Z-паттерн хорошим решением для простых дизайнов с минимумом текста и несколькими ключевыми элементами, которые необходимо увидеть. Минималистские или лендинг страницы, ориентированные в основном на один или два основных элемента, могут реализовать Z-шаблон, чтобы побудить пользователей следовать этому естественному методу.

Z-шаблон действительно блестяще подходит для дизайн-проектов, где простота и призыв к действию – наиболее важные принципы. Лендинг страница Facebook – пример Z-шаблона

Как его использовать

Прежде чем приступать к разработке макета страницы, важно найти ответы на следующие вопросы:

  • Когда посетитель попадает на вашу страницу, какую информацию вы хотите, чтобы он заметил?
  • В каком порядке вы хотите, чтобы он видел информацию?
  • А чем вы хотите его занять?

Смысл Z-шаблона на самом деле довольно прост: наложите букву Z на страницу. В идеале вы хотите, чтобы люди сначала увидели вашу самую важную информацию, а затем следующую важную информацию. Таким образом, важные элементы должны быть размещены вдоль пути просмотра, и правильная информация должна быть представлена посетителям в нужное время.

Очень важно создать направление движения.

Это указание пути глазам от одной части страницы к другой в нужном вам направлении. Вы создаете направление движения посредством сочетания визуального веса и визуального направления. Вот несколько лучших практик, которые следует учитывать при создании направления движения:

  • Точка #1. Отправная точка путешествия зрителя. Это идеальное место для вашего логотипа.
  • Точка #2. Поместите предметы, которые вы хотите, чтобы читатель увидел, сначала в верхней части Z. Глаз, естественно, будет следовать по пути Z, поэтому цель состоит в том, чтобы поместить ваш вторичный “призыв к действию” в конце. Поместите больше визуального веса в точку #2 – сделайте кнопку (или другой ключевой элемент) яркой и красочной, чтобы привлечь внимание пользователей и направлять их по ходу Z-паттерна.
  • Центральная область страницы. 
    Необходимо заполнить ее содержимым, которое интересует пользователя, но все же побуждая его обратить взгляд вниз к следующей строке. Например, вы можете поместить изображение герой в центр страницы, чтобы отделить ее верхнюю и нижнюю части и направить глаза по пути Z.
  • Точка #3. Направлять пользователей к окончательному призыву к действию в точке #4. Например, ваша страница продвигает какой-либо продукт, который вы хотите продать. Вы желаете, чтобы потенциальные клиенты увидели рекламный текст, который убедит их его купить, прежде чем они увидят кнопку “Купить сейчас”. Таким образом, вы можете использовать точку #3 для сообщения преимуществ или другой полезной информации для пользователей.
  • Точка #4. Это финишная линия, строка между ней и точкой 3 должна содержать контент, который подталкивает взгляд пользователя к углу. Точка #4 сама по себе является идеальным местом для вашего основного призыва к действию.
Предлагаемый Z-шаблон

Ниже вы можете увидеть два замечательных примера Z-шаблона от Basecamp и Evernote.

Пример Z-паттерна от BasecampПример Z-паттерна от Evernote

Зиг-заг паттерн

Есть одна интересная и полезная вещь, касающаяся Z-паттерна. Мы можем немного расширить этот шаблон, рассматривая его скорее, как серию z-движений, а не одно большое z-движение.

Как вы можете видеть ниже, это именно то, что делает Dropbox, направляя пользователей через несколько ключевых функций продукта и заканчивая своим повторным Z-паттерном с помощью кнопки призыва к действию “Зарегистрироваться бесплатно”. В этом шаблоне кнопка “Узнать больше” играет роль вторичной кнопки призыва к действию, который помогает читателям перейти на следующую соответствующую страницу без необходимости читать весь рекламный текст.

Пример Зиг-заг паттерна

Вывод

Z-паттерн предлагает отличные возможности, и именно по этой причине он был принят множеством веб-сайтов. Вы можете воспользоваться преимуществом z-паттерна и разместить важную информацию туда, где взгляд естественно упадет, чтобы увеличить визуальное выделение. Просто не забудьте установить приоритетность информации, которую вы сообщаете

.

Читайте также: F-образный паттерн в дизайне интерфейсов

Спасибо!

Подписывайтесь на UX Planet: Twitter | Facebook

Темные паттерны дизайна — это совершенно неэтично и безответственно — UXPUB

Норвежский совет потребителей (Forburkerrådet) недавно опубликовал отчет «Обманутые дизайном», который показывает, что некоторые технические компании используют темные паттерны, чтобы препятствовать нам реализовать свои права на неприкосновенность частной жизни. Темные паттерны дизайна кажутся невинными, но этичны ли они? А вы используете темные паттерны дизайна, чтобы предложить отличный пользовательский опыт?

Темные паттерны в дизайне или просто мудацкий дизайн

Что такое темные паттерны дизайна?

Темные паттерны – это уловки на веб-сайте или в приложении, которые вводят пользователей в заблуждение, поэтому они делают то, что не собирались делать. Например, делятся своими персональными данными и обновляют учетную запись. Помимо этого, технологические компании разрабатывают свой продукт таким образом, чтобы пользователи становились зависимыми от него. Бизнес, использующий темные паттерны дизайна, имеет свой собственный интерес. Он рассматривает своих пользователей как рыб в море, а темный паттерн дизайна служит приманкой. Прибыль – это единственное, что их интересует при разработке продукта.

Примеры темных паттернов дизайна

Темные паттерны можно найти повсюду. Они так распространены, что вы даже не можете знать об их существовании. Ниже приведены некоторые примеры.

1. Запрос кредитной карты при бесплатном пробном периоде использования продукта

Предположим, что вы ищете приложение для управления проектами в Интернете. После того, как вы проверили несколько вариантов, вы нашли подходящий, и решили протестировать пробную версию. Во время настройки аккаунта вам предлагают предоставить данные кредитной карты. Вы не думаете, что это проблема, так как форма регистрации имеет большой текст с надписью «FREE TRIAL». Вы охотно предоставили данные своей кредитной карты и создали пробную учетную запись. После 14-дневного бесплатного пробного периода компания тайно изменила ваш пробный аккаунт на обычный платный и каждый месяц снимает плату с вашего банковского счета. Вы не узнаете об этом, пока не получите выписку из банка.

Вам знаком этот пример? Возможно, это случилось с вами или вашими друзьями?

Некоторые технологические компании используют вышеупомянутый прием, чтобы преобразовать потенциальных клиентов в платных пользователей. Они позволяют легко зарегистрировать учетную запись, указывая подробные условия мелким шрифтом. Все подчинено законам. Хуже всего то, что пользователям сложно отменить подписку.

2. Автоматическая подписка на рассылку рекламных сообщений

Новый европейский Генеральный регламент о защите персональных данных (GDPR) требует, чтобы компании получили явное согласие своих пользователей, прежде чем отправлять им любые маркетинговые материалы. Тем не менее, по-прежнему часто наблюдается этап проверки на сайте электронной коммерции, например:

Несмотря на то, что клиенты могут снять флажок, из-за того, что текст настолько мал, большинство клиентов не заметят эту возможность, и как только они нажмут «Check Out», компания получит еще один email в свой постоянно растущий список рассылки.

3. Обманчивое всплывающее окно

Обманчивое всплывающее окно – еще один трюк, который обычно используют для сбора адресов электронной почты. Всплывающее окно, подобное приведенному выше, имеет очевидную кнопку призыва к действию «Зарегистрироваться», но кнопка «Нет, спасибо» едва заметна. Большинство посетителей просто предоставят свой email, чтобы избавиться от всплывающего сообщения. Лучший дизайн должен иметь кнопку «Нет, спасибо» рядом с кнопкой «Зарегистрироваться», чтобы обе были одинаково доминирующими и заметными.

4. Незаметное добавление лишнего товара в корзину

Некоторые сайты электронной коммерции тайно добавляют дополнительный товар в процессе оформления заказа. В большинстве случаев цена на дополнительный товар настолько мала, что клиенты не заметят его, особенно когда в их заказе много товаров. Дополнительным товаром может быть услуга – экспресс-доставка, дополнительная страховка при покупке авиабилета и так далее. Хитрость обычно заключается в добавлении дополнительного товара по умолчанию, как на скриншоте выше или, когда кнопка призыва к действию с дополнительным товаром, более заметна, чем та, которая без него:

5. Получение доступа к вашим контактам при помощи туманного запроса

Этот трюк обычно можно найти в приложениях. После того, как вы создали учетную запись, приложение предложит вам пригласить контакты из вашего телефона использовать приложение. Поскольку это часть процесса настройки профиля, пользователи просто будут нажимать кнопку «Далее» (это подразумевает «Да»), и приложение легко получает доступ к вашим контактам и начнет рассылать им спам автоматическими электронными сообщениями.

Знаменитое приложение социальной сети Linkedin собирает контакты своих пользователей, используя темный паттерн дизайна, и отправляет автоматические электронные письма собранным контактам без предварительного согласия. Linkedin был привлечен к суду за это, и они проиграли процесс в 2015 году. Урегулирование судебного дела обошлось компании в 13 миллионов долларов.

6. Добавление дополнительных сервисов в продукт

Продажа нескольких продуктов в комплекте не кажется неэтичной, на самом деле это разумная бизнес-стратегия. Вспомните McDonald’s – вы можете купить гамбургер, картофель-фри и напиток по более низкой цене, чем при покупке всех трех товаров отдельно. Если вы хотите, McDonald’s дает вам возможность покупать их отдельно. Некоторые компании продают свою продукцию в комплекте, не предлагая раздельный вариант покупки. Их клиенты вынуждены покупать дополнительные предметы или услуги, потому что они являются частью сделки. Кажется, что это не проблема дизайна, но давайте рассмотрим приведенный ниже пример.

Android – это операционная система с открытым исходным кодом. Она отлично работает без каких-либо сервисов Google. Однако Google добавил браузер Chrome и поиск Google в Android и заставил производителей предварительно установить поиск Google и браузер Chrome в качестве условия на право использование Google Play. Они также запретили производителям предлагать развитую версию Android. В 2018 году, Google был оштрафован европейскими антимонопольными регуляторами на сумму около 5 млрд. долларов.

При разработке своего продукта подумайте о том, действительно ли дополнительные функции создают лучший пользовательский опыт или это просто бизнес-решения, которые повышают доход. Дополнительные функции могут быть хорошим вариантом, но дайте возможность своим пользователям приобретать их отдельно. Google объединил свои услуги в Android, и эти службы могут собирать персональные данные, которые выгодны для бизнеса в Google Ads, и многое другое. Это разумное бизнес-решение, но вы считаете его этичным?

7. Злоупотребление стимулирующими сообщениями

Некоторые сайты бронирования билетов для путешествий злоупотребляют стимулирующими сообщениями в дизайне интерфейса. Например, «5 других людей смотрят на это сейчас», «Этот товар был продан 10 минут назад», «20% скидки только сегодня», «Последнее место по этой цене» и так далее. Когда пользователи видят такие сообщения, обычно они думают, что, если они не забронируют номер или билет сейчас, они потеряют сделку. Подобный дизайн, похоже, помогает пользователям экономить деньги, но должны ли пользователи видеть такие сообщения, как «Это было продано 10 минут назад»? Не лучше ли просто удалить это объявление из результатов поиска? Пытается ли сайт или приложение манипулировать своими пользователями?

8. Бесконечные уведомления

Приложения социальных сетей, фитнес-приложения и многие другие имеют функцию «push-уведомлений». У этой функции хорошие намерения: приложение уведомляет вас немедленно, когда вы получаете новое сообщение, напоминание или обновление. Однако вы понимаете, что подобные уведомления заставляют вас полностью пристраститься к приложению? Вы заметили, что все время проверяете свой телефон, независимо от того, на работе вы или в спортзале? Вы можете подумать, что сейчас так делают все нормальные люди, но так ли это?

Бизнес манипулирует своими пользователями, поскольку он точно знает, как мы себя ведем. Мы чувствуем себя особенными, когда наши сообщения в социальных сетях получают много лайков, больше уведомлений означает больше лайков, больше сообщений и больше внимания. Мы все любим внимание, и это нормально. Что не нормально, так это проверять телефон 150 раз в день = 6,25 раза в час = один раз в 10 минут. Что получает бизнес от нашей «наркомании»? Вовлечение. Лучшее вовлечение пользователя означает увеличение доходов от рекламы. Вы можете подумать, что это наша вина, что мы проверяем уведомления каждые 10 минут, но давайте подумаем немного глубже. Разве ваши бабушка и дедушка проверяли свой почтовый ящик, также же часто, когда приложений и мобильных телефонов не было?

Как создавать этичный дизайн

Теперь вы ознакомились с некоторыми примерами темных паттернов дизайна, помимо того, чтобы не повторять вышеуказанный дизайн, что еще вы можете сделать, чтобы ваш дизайн был этичным? Ответ прост – спросите себя, почему вы разрабатываете продукт или функцию таким образом, зачем вам нужна эта информация и т. д. Если ваш ответ – что-то вроде, дать пользователям более удобный пользовательский интерфейс – вы очень этичный дизайнер. Дизайнера делает хорошим не то, сколько денег он приносит бизнесу, а то, насколько дизайнер заботится о пользователях. Если ваш продукт действительно ценит пользователей, то они будут им пользоваться, и они будут рассказывать о вашем продукте своим знакомым, и в итоге ваш бизнес будет расти честным образом.

В заключение

В повседневной жизни у вас есть стимул вести себя неэтично, но в долгосрочной перспективе этичное поведение всегда окупается. – Хорхе Пауло Леманн

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

Примечание: Спасибо Ainsley за вклад в написание статьи. Первоначально опубликовано на Medium

Как темные UX-паттерны заставляют вас делать то, чего вы не хотите – Сей-Хай

Темный паттерн – это не dark mode, о котором вы могли подумать. Это обман и нечестность намерений. Если говорить немного глубже, то темный паттерн представляет представляет собой пользовательский интерфейс, тщательно разработанный для того, чтобы  уловками заставить пользователей действовать по выгодному компании сценарию. Например, покупать страховку для своих товаров или подписываться на регулярные платные услуги.

Темный паттерн представляет собой пользовательский интерфейс, тщательно разработанный для того, чтобы уловками заставить пользователей действовать по выгодному компании сценарию.

Обычно, когда вы думаете о «плохом дизайне», вы представляете невнимательного или ленивого дизайнера, но даже не догадываетесь о наличии злого умысла. Темные паттерны – это далеко не ошибка дизайнера. Наоборот, это тщательно продуманный дизайн с глубоким пониманием человеческой психологии. Такой дизайн разрабатывается для выгоды бизнеса, а не пользователей.

Этот термин был придуман еще в 2010 году британским UX дизайнером Гарри Бригнуллом, который руководит DarkPatterns.org. Это сайт посвящен брендам и позорным веб-сайтам, которые используют обманчивые и неэтичные пользовательские интерфейсы.

Бригнулл утверждает, что «темные паттерны очень хорошо показывают себя в A/B и многовариантных тестах потому, что дизайн, который обманывает пользователей, заставляя их действовать, приведет к большему количеству конверсий, чем тот, который позволяет пользователям принимать обдуманное решение».

Хотя это и работает, UX сообщество было категорически против использования темных паттернов в дизайне.

Они обычно воспринимаются как неэтичные методы дизайна, которые наносят ущерб UX и подрывают доверие людей и семей к продукту, веб-сайту или бренду.

Разница между плохим UX и темным UX

В отличие от плохого UX, темный UX – это продуманная тактика дизайна. Такие сайты или продукты не были разработаны для того, чтобы приносить людям пользу или ставить их потребности на первое место. Это совершенно противоположно тому, что дизайнеры продукта должны стремиться сделать, а именно – создавать прозрачные, ориентированные на пользователя дизайны.

Как работают темные паттерны

Вы когда-нибудь чувствовали, что вас побуждают согласиться с тем, чего вы не хотите, и при этом нет вариантов получше? Если да, то скорее всего это и был темный паттерн.

Темные паттерны – это проекты, которые намеренно заставляют делать то, чего хочет компания. Они всегда считались плохими методами дизайна. Такие проекты чаще всего наносят ущерб бизнесу и пользователям, а не помогают им.

Хотя многие люди считают, что темные паттерны – это психологические уловки, большинство из них не имеют ничего общего с психологией. Это просто дешевые уловки, которые используют тот факт, что люди не читают все слова на каждой странице сайта или приложения. Они читают выделяющиеся слова и делают предположения.

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

Суть темных паттернов в том, что они создаются их из тех же самых сводов правил, которые используют для повышения удобства использования.

10 эвристик Нильсена – это, вероятно, один из самых известных гайдов юзабилити – относятся к началу 1990-х годов. Если вы берете эвристики и инвертируете их в пользу компаний, вы на темной стороне UX. Давайте рассмотрим несколько примеров и попытаемся понять, как это происходит.

Темные паттерны, которые никогда не нужно использовать в своих цифровых продуктах

1. Принудительная подписка

Этот шаблон можно найти во многих сервисах на основе подписки, предлагающих бесплатную пробную версию. Когда пользователи подписываются на бесплатную пробную версию, их просят ввести данные их кредитной карты. Когда пробная версия заканчивается, с карты пользователя автоматически снимается определенная сумма, если он не забыл отказаться от подписки. Также, в большинстве случаев пользователя не уведомляют о снятии средств.

Усугубляет ситуацию то, что пользователям даже не предоставляется простого способа отменить подписку. Часто для отмены подписки пользователь вынужден звонить в офис или же отправлять запрос по обычной почте.

Звучит коварно? В этом и суть.

2. Заманить и подменить

Возможно, самым известным примером «заманить и подменить» является ошибочный подход Microsoft к тому, чтобы заставить людей обновить свои Windows OS до Windows 10. Вы намереваетесь сделать что-то одно, но вместо этого происходит другое, нежелательное.

Microsoft применили этот трюк, когда усердно продвигали Windows 10. В какой-то момент они предложили две кнопки: обновить сейчас или обновить сегодня вечером.

Скажем, вы не хотите устанавливать Windows 10, какую кнопку в этом случае нажать? После этого инцидента многие люди случайно установили Windows 10.

Это достаточно подло, но после стало еще хуже. В какой-то момент даже закрытие окна, предлагающего обновление, вызывало установку обновления. Поэтому многие установили Windows 10 лишь из-за этого, что было почти невозможно отказаться.

3. Roach Motel

Этот дизайн паттерн назван в честь ловушки тараканов «Roach Motel».

Это происходит, когда сайт или приложение позволяют очень легко создать учетную запись (или подписаться), которую невероятно сложно потом удалить. Для удаления неожиданно запрашивают некоторые вопросы безопасности, старый пароль, который никто не помнит, и так далее.

Например, вы когда-нибудь пытались закрыть свою учетную запись Amazon? Следующее видео демонстрирует сложный процесс удаления, без которого у вас ничего не получилось бы. Большинство пользователей не смогут удалить свои учетные записи без помощи службы поддержки. Также это касается отмены премиум подписок.

Легко войти, но очень трудно выйти …

4. Тайна Цукерберга

Гарри Бригнулл назвал этот темный паттерн в честь генерального директора Facebook Марка Цукерберга. Проблема возникает, когда продукт собирает и передает больше информации о пользователях, чем они когда-либо собирались поделиться.

Тайна Цукерберга – это то, что заставляет пользователя делиться бОльшим количеством личной информацией, чем он того хотел. Facebook делает управление конфиденциальностью общеизвестно сложным процессом. Информация о том, что компания может сделать с личной информацией пользователя, находится в Условиях обслуживания, и почти никто не тратит время на ее чтение.

Facebook и проблема конфиденциальности данных. Изображение предоставлено: Джереми Бурге

5. Вопросы с уловкой

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

6. Прокрасться в корзину

Вы пытаетесь что-то купить, но где-то в процессе покупки сайт забрасывает дополнительный товар в вашу корзину. Часто это либо раннее просмотренный, либо товар, отмеченный вами как “избранный”.

7. Предотвращение сравнения цен

Продавец затрудняет вам сравнение цен товаров, поэтому вы не можете принять обоснованное решение.

8. Введение в заблуждение

Дизайн целенаправленно фокусирует ваше внимание на одной вещи, чтобы отвлечь от другой.

9. Скрытые расходы

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

10. Пристыживание пользователя

Использования чувства вины пользователя или чувства собственного достоинства. Вариант отклонения сформулирован таким образом, чтобы пристыдить пользователя и принудить к принятию нужного компании решения.

11. Замаскированная реклама

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

12. Дружеский спам

Продукт запрашивает ваши права доступа к электронной почте или социальным сетям под предлогом, что он будет использоваться для желаемого результата (например, поиска друзей). Затем рассылает спам всем вашим контактам в сообщении, которое, как они утверждают, было прислано вами.

Читайте также:

6 лучших инструментов для удаленного тестирования юзабилити

Как перестать бояться тестировать свой дизайн

OnePlus разработал смартфон, который может просвечивать пластик (кажется, и одежду)

Источник

20 примеров крутых геометрических паттернов, и как их использовать в дизайне

Формы – основа большинства изображений и дизайнов. Но долгое время я об этом не задумывался. Мое мнение изменилось после анализа покемона по имени N. Первая часть анализа была сосредоточена на разложении персонажа на основные фигуры – треугольник, квадраты и круги.

Исходя из этого, авторы исследования сделали несколько выводов о его характере. Например, предсказали его мотивы. Эти прогнозы оказались абсолютно верными, когда игра вышла. Излишне говорить, что это заставило меня задуматься о важности форм немного больше.

У каждой формы свое значение. Самые популярные можно выделить в следующие категории:

  • Прямоугольники/квадраты: баланс и традиции;
  • Круги: бесконечность, защита и женственность;
  • Треугольники: стабильность, энергия и агрессия;
  • Ромб: яркость и современность;
  • Шестиугольник: единство и баланс.

Объединение этих форм различными способами может создать совершенно новые значения. Например, предмет из прямоугольников и треугольников может подчеркнуть призыв вернуться к традиции.

Но, возможно, вы хотите начать с чего-то попроще. Если это так, геометрические паттерны – то, что вам нужно. Ниже мы рассмотрим 20 примеров, которые помогут вам в создании собственных идей, и советы о том, как их применять.

1. Создавайте из паттернов изображения

Простые формы сами по себе могут быть привлекательными; однако использование различных форм для создания целого изображения может работать еще лучше. Работы Лиама Брэйзера хорошо иллюстрируют эту идею. Если вы правильно определите, какие формы подойдут вашей «картине», то получите отличный результат.

2. Используйте к свету и тени креативно

Тени и блики можно использовать для улучшения фигур, а иногда и для их создания. Это показывает Сет Никерсон. Благодаря толике креатива мы можете создать трехмерную фигуру или привлечь внимание к определенным частям изображения.

3. Объедините формы нестандартным образом

То, как формы соединяются, может создавать новые и интересные эффекты. Например, Work Hard использует различные геометрические фигуры и создает плавное изображение, соединяя их различными способами.

4. Создайте коллаж

Попробуйте создать коллаж из разных форм – ярких форм, которые привлекут внимание пользователей. Neo Lab, например, использует ромбы разных размеров, которые прикасаются друг к другу.

5. Попробуйте изометрические паттерны

Изометрические паттерны – или паттерны, которые кажутся трехмерными – могут действительно сделать изображение броским. Isometric Exhibition – отличный пример этого правила. Обратите внимание на то, как формы и буквы взаимодействуют – так же и вы сможете привлечь внимание к важным деталям.

6. Используйте паттерны с шрифтами

Если вы действительно хотите расширить свои творческие возможности, попробуйте использовать гарнитуру для создания паттернов. Next Level, например, использует различные треугольники и жесткие линии, чтобы создать неровный, резкий эффект.

7. Поиграйте с симметрией

В то время как асимметрия создает более плавный, свободный вид, симметрия может использоваться в геометрических паттернах для создания чего-то более элегантного. ICP отлично это демонстрирует, особенно на примере выше, где верх отражает нижнюю половину.

8. Используйте паттерны в паттернах

Если вы хотите что-то более сложное, использование паттернов внутри других паттернов может стать крутым решением. Левый верхний и правый нижний примеры на риснуке выше – отличный пример.

9. Создайте тему

Паттерны сами по себе великолепны; паттерны, используемые для соединения изображений, еще лучше. Особенно если все эти паттерны связаны друг с другом. Взять, к примеру, ADMCi. Все изображения связаны через схожие цвета и паттерны. Выбор шаблона и его правильное применение могут связать ранее разрозненные объекты и идентифицировать продукты как «ваши».

10. Свяжите узоры с предметом

Постарайтесь дать своему паттерну цель, связав его непосредственно с предметом. Например, La Fete du Citron a Menton использует узор листьев, чтобы окружить лимон, таким образом подчеркивая предмет.

11. Используйте шаблоны в буквах

Вы можете создавать шаблоны внутри букв, если создание шаблонов с буквами слишком затратно для вас. Например, можно просто создать линии на одной стороне буквы.

12. Используйте паттерн для изменения изображений

Вы можете использовать шаблоны, чтобы изменить части уже существующего изображения. Geometric Photography, например, использует формы для переворачивания отдельных частей изображения. Такой «сдвиг» может создать необычный эффект и создать нечто совершенно оригинальное.

13. Создайте уникальные эффекты

Вы можете использовать множество различных стилей и форм, чтобы создать что-то свое. Например, вы можете использовать формы, которые создают иллюзию отражения, как в этом случае. Сочетание разных форм, освещения и цветов может создавать различные эффекты и иллюзии, а также дает вам много материала для работы.

14. Добавьте простую анимацию

Благодаря технологиям мы можем улучшать различные паттерны. Например, добавить простую анимацию, в которую чередуются два геометрических паттерна. Noir – отличный пример такого подхода.

15. Используйте шаблоны, чтобы сегментировать информацию

Паттерны – отличный способ разделения и классификации информации, который облегчает поиск для зрителей. Renováveis, например, размещает каждый блок информации между диагональными линиями. Nasty Creatures использует немного другой подход, каждая ссылка находится в отдельном блоке «монстра».

16. Создавайте нарисованные от руки паттерны

Традиционное искусство вызывает ностальгию и позволяет создавать что-то более личное. Эти черно-белые векторы – отличный пример.

17. Комбинируйте паттерны

Вам не нужно придерживаться одного шаблона – использование нескольких делает изображение более привлекательным. Showreel предлагает отличный вариант использования нескольких паттернов в рамках одного проекта.

18. Выбирайте необычные фигуры

Никто не говорит, что вы должны использовать только стандартные круги, квадраты и треугольники. На самом деле, дизайн может работать лучше, используя менее традиционные формы. Fenix Music, например, использует речевые пузыри и молнии для выделения определенных элементов.

19. Создавай сложные паттерны

Сложные паттерны хороши, но с ними важно не переборщить. Fiore представляет интересный пример: здесь используют в качестве паттерна высокодетализированные растения. Знайте, как и где использовать ваш шаблон, и вы с большей вероятностью будете привлекать внимание своих зрителей.

20. Используйте паттерны экономно

Наверное, самый простой совет, но чаще всего о простых забывают. Чем меньше, тем лучше. Геометрические паттерны не должны быть размазаны по всей вашей странице. The Tea Factory – отличный пример экономии в паттернах.

Фото на главной: Andrew Ridley

Шаблоны в проектировании интерфейсов — Telegraf — журнал дизайнерів.

Один из базовых инструментов эффективного проектирования рабочих интерфейсов – это паттерны, они же шаблоны. Как только вы поймете, какой шаблон решает определенную проблему – начнете экономить время, работая эффективно. Катерина Витковская раскладывает паттерны по полочкам и объясняет, что с ними делать на практике.

Для того чтобы понять, что такое паттерн в дизайне пользовательского взаимодействия, достаточно провести аналогию с объектами реального мира. Повторяющиеся узоры в природе, декорировании помещений и одежды или паттерны поведения человека (привычка) имеют элементы, которые повторяются предсказуемо. Так и при проектировании пользовательского интерфейса существуют повторяющиеся решения типичных проблем. Около 99% дизайн-проблем решаются при помощи уже давно придуманных КАК.

Как только вы поймете, какой шаблон решает ту или иную проблему, начнете экономить время, работая эффективно. На ранних стадиях творческого пути дизайнеры часто совершают ошибку – тратят много времени на поиск уникальных решений вместо того, чтобы искать правильные. Уникальное, в данном случае, – не всегда лучшее. Много хороших решений уже было использовано коллегами по цеху и весьма успешно. Думаю, не нужно стесняться учиться у лучших и проверять себя каждый раз – превышает ли ценность от внедрения затраты на реализацию.

Еще часто дизайнеры применяют тот ли иной прием без глубокого понимания проблемы. В результате – решение неуместно. Это вызывает цепную реакцию проблем, которые трудно решить на следующих этапах разработки.

А также следует помнить о тех, кто будет дальше работать с вашим дизайном – разработчики, служба поддержки и, разумеется, – пользователи. Они будут вам благодарны.

И еще одна небольшая ремарка о важности паттернов. Помните этот момент, когда вы приходите домой и включаете свет? Я – нет. Это действие уже настолько отлажено, что переместив выключатель, по инерции все равно рука будет тянуться к привычному месту какое-то время после. Тоже самое с вашим дизайном. Незачем лишний раз усложнять жизнь пользователям. Все мы уже привыкли к крестику в правом углу модального окна. Не отвлекайте пользователя от решения его проблем, если только вы не поставили себе такую цель. Но и в этом случае нужно понимать «ЧТО» и «ЗАЧЕМ».

 

Углубляясь в теорию

Если стало понятно, зачем исследовать паттерны, – предлагаю пройтись по основным моментам дизайн-паттернов пользовательского интерфейса.

Паттерны принято разделять на 3 уровня организации:

  • Контекст (Context)
  • Сценарий (поток) (Flow)
  • Внедрение (Implementation)

«Контекст», верхний уровень, опирается на общую направленность ресурса – это может быть сайт здравоохранения или для бизнеса, может стимулировать совершить покупку или быть информационным ресурсом. Исследование целевой аудитории дает представление об уместности стилей.

На среднем уровне «Сценарий» рассматриваются типичные пользовательские сценарии и последовательность действий, необходимых для достижения целей. Например – навигация, регистрация или заполнение форм.

На нижнем уровне «Внедрения» решаются точечные вопросы, связанные с размещением элементов на экране, выбор цвета (красный – опасно, зеленый – благоприятно) в рамках вашего продукта.

Широко используемые паттерны

Более детально рассмотрим уровень «Сценарий», где совершается большое количество ошибок.

Паттерны навигации (Navigation)

Позволяют пользователю ориентироваться в продукте, быстро находить то, что нужно. Примеры: меню, вкладки, «хлебные крошки».

dribbble.com

Паттерны ввода (Getting input)

Эти паттерны позволяют пользователю взаимодействовать с системой посредством ввода информации и получения обратной связи. Примеры: текстовые поля, ячейки выбора, флажки, раскрывающиеся списки, поля для загрузки и др.

Facebook registration form

dribbble.com

Подача контента (Dealing with data)

Каким образом подается контент для быстрого просмотра, поиска и работы с ним. Примеры: галереи, таблицы, карточки.

Pinterest

Социальные (Social)

Как пользователь будет связываться и общаться с другими онлайн. Примеры: чаты, система баллов, доски, отзывы.

Facebook

Что теперь с этим делать на практике?

Нужно проверить, соответствует ли конкретный шаблон вашим потребностям:

  1. Проблема. Какую проблему, связанную с использованием системы, необходимо решить.
  2. Ситуация. Что приводит к тому, что возникает проблема.
  3. Принцип. Паттерн основан на одном или большем количестве эргономических принципах.
  4. Решение. Описывает только суть проблемы, которую можно решить разными способами.
  5. Почему. Почему данный шаблон может быть применен к решению данной проблемы и как это повлияет на удобство использования.
  6. Пример. Примеры удачного применения шаблона.
  7. Внедрение. Как применить этот шаблон к текущей проблеме.

Рассмотрим на примере 7 компонентов модели использования паттерна.

В чем заключается проблема?

Пользователи вводят неправильные данные в формы, что приводит к ошибкам и невозможности дальнейшей обработки информации.

dribbble.com

Что приводит к проблеме?

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

dribbble.com

Какой принцип применить?

Предотвращение ошибок ( Я. Нельсон).

dribbble.com

dribbble.com

Как решить проблему?

Свести к минимуму количество условий, в которых могут быть допущены ошибки. Ограничить ввод неправильных данных. Предусмотреть качественные сообщения об ошибке.

Зачем решать эту проблему?

Устранение неконтролируемых ошибок приводит к ощущению доверия к системе и лояльности пользователей.

Какие примеры решения подобной проблемы уже существуют?

Google использует подсказки, чтобы сократить количество неверно введенных данных.

В калькуляторе используются только цифровые символы.

dribbble.com

Или использовать маски ввода, как в следующем примере.

dribbble.com

Как внедрить данный шаблон?

Предусмотреть блокировку символов клавиатуры, которые не являются допустимыми, использование масок ввода.

После сказанного

На самом деле, так или иначе мы принимаем дизайн-решения, основываясь на своем предыдущем опыте, что и является классическим примером использования паттернов. Но, научившись понимать свои мотивы и уместность этих самых решений, можно качественно изменить как сам продукт, над которым вы работаете, так и поднять свой профессиональный уровень. Это как сороконожка, которая научилась бегать после того, как поняла, как ходить.

Так что, всем успехов в этом марафоне.

И на дорожку несколько ресурсов, которые дадут еще немного более глубокое понимание темы.

  1. www.interaction-design.org
  2. ui-patterns.com
  3. ui-patterns.com

Ранее Telegraf.Design писал о том, как анимировать интерфейсы быстро и просто.

Как уловки в дизайне могут обманывать пользователей

Рассказываем, что такое темные паттерны и как компании заставляют пользователя совершать определенное действие, даже если он этого не хочет

Dark patterns или «темные паттерны», — это вид пользовательского интерфейса, который создан для того, чтобы обмануть или получить желаемый результат вопреки интересам пользователя.

Темные паттерны используются повсюду: от сайтов знакомств и агрегаторов авиабилетов, до подписок на email-рассылку.

Массово темные паттерны начали использовать после того, как произошел взрывной рост индустрии e-commerce. Компании поняли, что при таком обилии выбора просто предлагать хороший продукт и выделяться недостаточно. В начале 2010-х годов компании стали использовать разные трюки, чтобы обманом заставить пользователей сделать то, чего хочет компания или дизайнер.

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

Важно отметить, что темные паттерны — это не просто непродуманный дизайн. Такой интерфейс создается специально для того, чтобы ввести пользователя в заблуждение. А, чтобы сделать интерфейс максимально «темным» и эффективным, дизайнеры даже прибегают к человеческой психологии.

Виды темных паттернов

Вопреки распространенному мнению, темные паттерны используются не только сайтами с сомнительной репутацией, но и крупными компаниями.В 2010 году дизайнер Гарри Брингул создал сайт DarkPatterns.org, где начал собирать виды темных паттернов и перечень сайтов, компаний и сервисов, использующих их.

«Бесплатная» подписка на сервис

Один из самых известных примеров темного паттерна в дизайне — принудительная подписка. Почти каждый стриминговый сервис предлагает бесплатный пробный период, для подключения которого требуется указать номер вашей банковской карты. Эти данные нужны для того, чтобы по окончанию пробного периода деньги с карты снялись автоматически.
Например, «Кинопоиск»:

Лишние товары в корзине

Знакомая каждому ситуация: вы захотите на сайт, добавляете товар в корзину, но на этапе оформления заказа обнаруживаете, что общая сумма увеличилась.

Хотите узнать, почему так произошло и понимаете, что сервис без вашего ведома добавил к заказу несколько позиций.

Известный пример: сайт РЖД и «галочки» напротив страховок, которые прибавляют к цене билета ₽200–500:

Подобный паттерн используют в том числе авиакомпании. Например, когда лоукостер предлагает вам выбрать место в самолете за дополнительную плату, убирая кнопку «продолжить без выбора места» подальше

Отвлечение внимания

Сайты с пиратским контентом часто используют еще один темный паттерн, вводящий в заблуждение.

Вы собираетесь загрузить программу, переходите на страницу скачивания и видите большую кнопку «скачать». Нажимая на нее, вас может перебросить на другой сайт (в случае, если эта кнопка — лишь реклама стороннего ресурса), или предложить ввести свои личные данные (например, номер телефона или банковской карты) в выпадающем окне.
Большой баннер «скачать» на подобных сайтах просто отвлекает внимание, а реальная ссылка для скачивания контента находится в другом месте. Например, подписана более мелким шрифтом.

Запутанная навигация и уговоры остаться

Еще один пример темного паттерна, который особенно заметен в Facebook — невозможность совершить простое действие. Например, удалить свой аккаунт.Если вы захотите деактивировать аккаунт на Facebook, вам придется разобраться в запутанной навигации и несколько раз подтвердить свое решение (несмотря на то, что случайно удалить аккаунт в Facebook невозможно).

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

Выбрав «Я не считаю платформу Facebook полезной», вы сразу же увидите всплывающее окно, которое пытается удержать вас на платформе, объясняя, что на Facebook можно найти друзей. Возможно, вы просто не разобрались со всеми функциями социальной сети.

Даже если вы нажали «закрыть», Facebook все равно не отпустит вас, еще раз показав всплывающее окно, выделенное желтым. Видимо, для того, чтобы вы еще раз обдумали свое решение.

Только с премиум-аккаунтом

Это темный паттерн, который использует, например, платформа для социальной журналистики Medium. Если вы являетесь активным пользователем платформы, то могли заметить, что Medium ввел систему премиум-аккаунтов.

Сейчас если у вас нет платного аккаунта на платформе, Medium постоянно сообщает о том, что читать статьи пользователей без ограничений можно только с премиум-аккаунтом.

Надпись сверху: «Это последняя бесплатная статья для вас в этом месяце. Получите безграничный доступ»

Если вы решите прочесть другую статью от определенных авторов, сделать этого не получится. Лимит бесплатных статей исчерпан.

На самом деле подобное ограничение применимо только к определенным авторам, а чтение статей других людей (например, тех, у кого не так много подписчиков) осталось бесплатным для всех.

Можно читать статьи и вполне популярных авторов. Например, у серийного предпринимателя Гэри Вайнерчука 289 тыс. подписчиков на платформе

Несмотря на такую возможность, Medium использует темный паттерн, который вводит людей в заблуждение, давая понять, что теперь платформа стала платной.

Игра на чувствах

Пример, который часто используется при предложении подписаться на рассылку — своего рода игра на чувствах, когда пользователю предлагается указать свою почту в выпадающем окне, а если он отказывается, ему нужно кликнуть на «нет, я не хочу получать выгодные предложения».

Арт-директор веб-отдела коммуникационного агентства SETTERS Сергей Борцов объясняет: «Действительно, может показаться, что большинство описанных примеров выглядят как ошибки при разработке интерфейса. Но эти ошибки являются следствием образования как раз тех самых темных UX-паттернов. Задача таких «ошибок» — сделать опыт использования вашего сервиса для пользователя максимально неуютным. Подменить, вызвать чувство вины, ввести в заблуждение. Создатели темных интерфейсов точно знают, что делают».

Как соблюсти баланс

В зависимости от того, как выстроен баланс между потребностями бизнеса и пользователя, дизайн пользовательского опыта (UX-дизайн) можно разделить на три категории: белый, серый и темный.

  1. В белом UX пользователь в приоритете, а компания получит выгоду, но в долгосрочной перспективе.
  2. Серый UX предполагает использование уловок в дизайне, но только тех, что действительно необходимы бизнесу для получения выгоды. Пользователь важен, но бизнес не всегда действует в его интересах.
  3. Темный UX путает пользователя, задерживает его на сайте и делает опыт общения неприятным. Но бизнес получает быструю выгоду.

Задача-максимум для компании — соблюсти баланс между собственными потребностями и запросами пользователей. Сделать это довольно сложно, поскольку цели бизнеса и клиентов разные.

Сергей Борцов: «Утрируя, можно сказать, что компании все равно, как она получит деньги: через скрытые покупки или показывая клиенту лишнюю порцию рекламы. У пользователя другая цель — он желает разрешить свою задачу как можно более коротким, быстрым и безболезненным (особенно, для кошелька) путем. Здесь важно соблюдать баланс. В выборе между черным и белым UX дизайнер или компания должны выбирать серое (желательно, светло-серое)».

Зачем это крупным компаниям

В список сайта DarkPatterns, созданный дизайнером Гарри Брингулом, сразу же попали большие корпорации вроде Amazon, Netflix и Facebook.

Последняя даже получила отдельный вид темного паттерна, названный в честь основателя социальной сети Марка Цукерберга — «privacy zuckering». Подобный паттерн означает уловку, когда пользовательское соглашение либо скрыто от глаз людей, либо написано настолько непонятно, что большинству не захочется вдаваться в подробности. При этом соцсеть, например, может оставлять за собой возможность собирать личные данные пользователей и передавать их третьим лицам.

В странах, где с защитой персональных данных все сложно, использование таких паттернов может стать угрозой для пользователей.

По мнению Сергея Борцова, крупные компании используют темные и серые паттерны, потому что являются монополистами на рынке: «Крупным компаниям-монополистам это выгодно, так как аналогов их продукту нет. Люди будут продолжать пользоваться Facebook и Google, даже несмотря на то, что те собирают данные «в тихую». Все к такому привыкли, а сами корпорации являются иконами для веб-индустрии».

Запрет использования темных паттернов

Поскольку темные паттерны в дизайне не только помогают компаниям зарабатывать и продвигать свои услуги, но и ставят под угрозу безопасность пользователей, индустрия и правомерность использования темных паттернов заинтересовала регуляторов по всему миру. В 2019 году в США генеральный прокурор Калифорнии Ксавьер Бессера добавил в закон о безопасности потребителей несколько пунктов, позволяющих регулировать темные паттерны. Действия регулятора запретили компаниям использовать уловки в дизайне, позволяющие продавать данные пользователей. Например, просматривая длинные соглашение о конфиденциальности и невозможность отказаться от передачи личных данных.

Вопрос ограничения использования темных паттернов обсуждается в США и на федеральном уровне. В конце апреля 2021 года Федеральная торговая комиссия провела семинар, где в том числе обсуждалось то, как темные паттерны манипулируют потребителями, какие группы людей могут быть особенно уязвимы и какие правила нужно разработать.

Сергей Борцов отмечает: «Так как государственные органы постепенно приходят к регулированию использования темных паттернов, сейчас компаниям особенно важно думать о пользователе. Выход тут один: нужно быть бдительными при использовании таких дизайнерских уловок, не перебарщивать, и в целом стараться соблюдать этику при разработке пользовательских интерфейсов»

Навигация мобильного приложения: 5 паттернов UX-дизайна

Пожалуй, наиболее важная вещь в дизайне мобильного приложения – это понимание того, что он должен быть одновременно практичным и интуитивно понятным. Если приложение не несет никакой пользы, оно не имеет дополнительной ценности, следовательно, нет причины использовать его. Если приложение полезно, но требует обучения, чтобы его использовать, люди не будут беспокоить себя этим обучением. Хороший UI-дизайн должен учитывать названные проблемы, а для их решения используют всем известные дизайнерские паттерны (шаблоны). Понимание и признание новейших и наиболее трендовых паттернов позволит вам значительно продвинуться в сфере разработки мобильных приложений, и ваше следующее приложение будет современным и конкурентоспособным.

Данная статья содержит информацию о паттернах, которые используются для навигации мобильных приложений. Независимо от того, какое приложение вы разрабатываете, вы должны быть заинтересованы в том, чтобы пользователь мог эффективно использовать поиск различных функций приложения. От того, как пользователь использует навигацию по вашему приложению, можно определить, будет ли он пользоваться им, приложением, в дальнейшем. 
 

1. Подсказки и графические указатели (Walkthroughs&CoachMarks)



Успешное приложение должно быть полезным. Иногда это означает, что приложение может иметь сложную структуру с различными типами инструментов и контентом. Одним из способов решения этой проблемы является использование подсказок или инструкции, объясняющей, как работает каждая функция. Некоторые приложения, например Youtube, подчеркивают важные разделы при помощи графических указателей с пояснениями, другие (Carousel и Duolingo) демонстрируют слайд-шоу, которое проигрывается через обыкновенный пользовательский интерфейс. Этот паттерн может быть использован для сбора дополнительной информации от пользователя для более быстрой и легкой регистрации.

Если различные функции вашего приложения не сразу понятны пользователю, подсказки и графические указатели являются отличным паттерном, чтобы упростить интерфейс и приложение в целом. 
 

2. Навигация, основанная на контенте




Независимо от того, какой контент вы хотите включить в дизайн вашего приложения, вы всегда хотите, чтобы пользовательский интерфейс и поток данного контента был как можно более гладким. Навигация, основанная на контенте, – это паттерн в дизайне, который используется при плавном переходе между состояниями общего обзора и при детализации.

Tinder — отличный пример применения данного паттерна, в нем вы можете переключаться между двумя состояниями в профиле пользователя — главным состоянием обзора, что является, по сути, картинкой, которая заполняет большую часть экрана, и детальным видом, который лишь немного уменьшает картинку и содержит небольшое количество фактической информации. Вы можете переходить от состояния к состоянию при помощи простого нажатия на экран либо просто пролистните через картинку, независимо от того, какое состояние вы выбираете.
 

3. Слайдеры



В приложении Uber есть четыре типа услуг передвижения, и вместо того, чтобы создавать четыре отдельных экрана для передачи необходимой информации, Uber использует в дизайне слайдеры, что позволяет быстро переключаться на каждую из услуг. Это также способствует плавному переходу между опциями (используется простое перелистывание пальцем), и, таким образом, функции воспринимаются пользователем на подсознательном уровне.
 

4. Всплывающие сообщения (Popovers)



Иногда сообщения или дополнительные сведения могут помочь пользователям лучше взаимодействовать с приложением. В этом случае пользователь может захотеть просмотреть соответствующую информацию, не меняя при этом своего положения в пользовательском интерфейсе. Всплывающее сообщение как один из паттернов в дизайне может решить эту проблему несколькими способами:
 

  • Сообщения всплывают, когда пользователь выполняет определенное действие или когда попадает в определенный раздел в приложении, при этом указывается соответствующая информация, связанная с определенным действием (или местом) в UI.
     

  • Изначальный контент или раздел в приложении по-прежнему виден в фоновом режиме, но всплывающее сообщение дает вам возможность настраивать определенные вещи и изучать новые разделы в приложении. 
     

  • Всплывающие сообщения привлекают внимание пользователя и сообщают важные данные там, где это необходимо. В то же время пользователь может легко отключить уведомление при помощи простого нажатия или перелистывания на экране.

 

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

5. Скользящие элементы и боковые панели (Slideouts, Sidebars, Drawers)




По сравнению с компьютерами и телевизорами мобильные телефоны имеют относительно небольшие экраны, это означает, что одной из проблем мобильного дизайна является размещение большого объема информации на маленьком UI. Чтобы избежать беспорядочного скопления информации на одном экране, можно использовать скользящие элементы или боковые панели для навигации между различными разделами приложения. Эти паттерны являются вторичными разделами таких приложений, как карты, чаты, профили пользователей и т.д., и они обычно спрятаны в выскальзывающих кнопках со стрелками или в боковых разделах. Таким образом, пользователь может взаимодействовать с наиболее важной информацией на каждом экране, выбрав необходимый раздел на этих самых скрытых панелях. 
 

Данная информация взята из раздела книги «Mobile UI Design Patterns 2014: A Deeper Look at the Hottest Apps Today».


Не забудьте приобрести свою собственную копию, чтобы узнать об остальных основных паттернах в дизайне, которые содержатся в самых успешных на сегодняшний день мобильных приложениях.
 

Источник

Что такое шаблон (шаблон проектирования)?

В разработке программного обеспечения шаблон (или шаблон проектирования ) — это письменный документ, описывающий общее решение проблемы проектирования, которая неоднократно повторяется во многих проектах. Разработчики программного обеспечения адаптируют шаблонное решение к своему конкретному проекту. Шаблоны используют формальный подход к описанию проблемы проектирования, ее предлагаемого решения и любых других факторов, которые могут повлиять на проблему или решение. Успешный паттерн должен был зарекомендовать себя как ведущий к хорошему решению в трех предыдущих проектах или ситуациях.

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

Методология шаблонов проектирования становится все более популярной среди разработчиков программного обеспечения с начала 1990-х годов, в основном благодаря некоторым новаторским презентациям и книгам по этой теме, выпущенным для объектно-ориентированного мира на выставках и конференциях, в частности, OOPSLA ’94 (объект -Конференция по системам программирования, языкам и приложениям).Книга Э. Гаммы, Р. Хелма, Р. Джонсона и Дж. Влиссидеса « Шаблоны проектирования: элементы многоразового объектно-ориентированного программного обеспечения » (известная в отрасли как «Банда четырех» или GOF) является общепринятой. с пробуждением растущего интереса к шаблонам проектирования для использования в объектно-ориентированном программировании. Книга содержит двадцать три шаблона, каждый из которых предлагает решение повторяющейся проблемы, с которой сталкивается объектно-ориентированный дизайн.

Шаблоны проектирования включают в себя следующие типы информации:

  • Имя, описывающее узор
  • Задачу решаемую выкройкой
  • Контекст или настройки, в которых возникает проблема
  • Силы, которые могут повлиять на проблему или ее решение
  • Решение проблемы
  • Контекст решения
  • Обоснование решения (здесь часто приводятся примеры и истории прошлых успехов или неудач)
  • Известные применения и связанные модели
  • Информация об авторе и дате
  • Ссылки и ключевые слова, использованные или используемые в поиске
  • Пример кода, относящийся к решению, если это помогает

Считается, что концепция использования общих шаблонов для решения других подобных проблем возникла в области проектирования и архитектуры зданий и из опубликованных работ архитектора Кристофера Александра.Одной из его книг в значительной степени приписывают эту концепцию, A Pattern Language: Towns, Buildings, Construction , Oxford University Press, 1977.

Builder Design Pattern

Намерение

  • Отделите построение сложного объекта от его представления, чтобы один и тот же процесс построения мог создавать разные представления.
  • Разобрать сложное представление, создать одну из нескольких целей.

Проблема

Приложение должно создавать элементы сложного агрегата.Спецификация агрегата существует на вторичном хранилище, и одно из многих представлений должно быть построено в первичном хранилище.

Обсуждение

Отделить алгоритм интерпретации (т. Е. Чтения и синтаксического анализа) хранимого механизма сохранения (например, файлов RTF) от алгоритма построения и представления одного из многих целевых продуктов (например, ASCII, TeX, текстового виджета). Основное внимание уделяется созданию сложных агрегатов.

«Директор» вызывает службы «построителя», поскольку он интерпретирует внешний формат.«Строитель» создает часть сложного объекта каждый раз, когда он вызывается, и поддерживает все промежуточное состояние. Когда продукт готов, клиент получает результат от «строителя».

Позволяет более точно контролировать процесс строительства. В отличие от шаблонов создания, которые создают продукты за один раз, шаблон Builder создает продукт шаг за шагом под контролем «директора».

Конструкция

Читатель инкапсулирует анализ общего ввода.Иерархия Builder делает возможным полиморфное создание множества своеобразных представлений или целей.

Пример

Шаблон Builder отделяет построение сложного объекта от его представления, так что один и тот же процесс построения может создавать разные представления. Этот шаблон используется ресторанами быстрого питания для создания детских блюд. Детское питание обычно состоит из основного блюда, второстепенного блюда, напитка и игрушки (например, гамбургера, картошки фри, колы и игрушечного динозавра).Обратите внимание, что состав детского обеда может быть разным, но процесс изготовления остается прежним. Заказывает ли клиент гамбургер, чизбургер или курицу, процесс остается неизменным. Сотрудник за стойкой приказывает команде собрать основной предмет, побочный предмет и игрушку. Затем эти предметы помещаются в сумку. Напиток помещается в чашку и остается вне пакета. Тот же процесс используется в конкурирующих ресторанах.

Контрольный список

  1. Решите, является ли проблема общим входом и множеством возможных представлений (или выходов).
  2. Инкапсулирует синтаксический анализ общего ввода в классе Reader.
  3. Разработайте стандартный протокол для создания всех возможных выходных представлений. Запишите шаги этого протокола в интерфейсе Builder.
  4. Определите производный класс Builder для каждого целевого представления.
  5. Клиент создает объект Reader и объект Builder и регистрирует последний с первым.
  6. Клиент просит Читателя «построить».
  7. Клиент просит Строителя вернуть результат.

Эмпирические правила

  • Иногда шаблоны создания дополняют друг друга: Builder может использовать один из других шаблонов, чтобы реализовать, какие компоненты будут построены. Abstract Factory, Builder и Prototype могут использовать Singleton в своих реализациях.
  • Builder ориентирован на пошаговое построение сложного объекта. Абстрактная фабрика подчеркивает семейство объектов продукта (простых или сложных). Builder возвращает продукт в качестве последнего шага, но что касается абстрактной фабрики, продукт возвращается немедленно.
  • Builder часто строит Composite.
  • Часто проекты начинаются с использования фабричного метода (менее сложный, более настраиваемый, количество подклассов увеличивается) и эволюционируют в абстрактную фабрику, прототип или конструктор (более гибкий, более сложный) по мере того, как дизайнер обнаруживает, где требуется большая гибкость.

Поддержите наш бесплатный веб-сайт и приобретите электронную книгу!

  • Подробное объяснение 22 шаблонов проектирования и 8 принципов
  • 406 хорошо структурированных, удобных для чтения страниц без жаргона
  • 228 наглядных и полезных иллюстраций и схем
  • Архив с примерами кода на 4 языках
  • Все поддерживаемые устройства: форматы EPUB / MOBI / PDF