В номере: разграничители элементов в мобильном приложении, фразы, которыми можно сорвать сделку и трендовый дуотон.
Ланч-тайм 118: краткий перевод свежих статей о digital
Сибирикс
ланч-тайм

Ланч-тайм 118: краткий
перевод свежих статей
о digital

В номере: разграничители элементов в мобильном приложении, фразы, которыми можно сорвать сделку и трендовый дуотон.
#539
Визуальные разделители контента в мобильном UI
Visual Dividers in Mobile UI Design
Фото: beachcamera.com
Дизайн мобильного приложения только на первый взгляд кажется простым. Столкнуться с трудностями можно уже на визуальном разделении блоков. Рассмотрим, какие бывают варианты.

Традиционные разделители

Такими считаются прямые горизонтальные или вертикальные линии, которые служат границей между блоками и создают иерархию на странице. К ним относятся Full-bleed и Inset разделители.

Full-bleed разделители: такой способ разделения информации подходит, когда вам нужно четко отделить блоки друг от друга — как в примере ниже. Используйте Full-bleed разделители в случаях, когда элементы содержат не привязанный к контексту контент: биографические детали в контактной информации, письма и т.д.
Inset разделители: подходят, когда элементы со схожим контентом можно объединить в группы. Как в телефонной книге, где контакты сгруппированы и помечены иконкой или буквой алфавита. Элементы в группе не разделены, идут непрерывным потоком и мотивируют пользователя скроллить страницу.
Альтернативные способы рисовать разделитель

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

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

Изображения не нуждаются в разделителях, потому что сама сетка создает визуальное разграничение. Достаточно добавить отступы между элементами и заголовки для групп.
Вывод: Юзабитили кроется в таких мелочах, о которых даже не думаешь, что нужно думать. Зато теперь вы в курсе. И сэкономили 10 минут.
#540
5 фраз, которые сорвут сделку
Топовые продажники обращают внимание на детали. Они внимательно слушают, предлагают решения проблемы и просят о помощи, когда она действительно нужна. И знают, что в разговоре важно тщательно подбирать слова.

Вот пять фраз, которые не должен произносить продажник.

1. «Поверьте мне»

Лучше сразу напишите клиенту на лбу: «Я дурак». Эта избитая фраза из телемагазинов и рекламы моющего средства. Говоря так, вы как будто требуете доверия пассивно-агрессивным способом.

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

2. «Если честно...»

Все, что написано выше, относится и к этой фразе. Но если вы скажете: «Честно говоря...» — будет гораздо хуже.

«Подождите… То есть он врал мне первые 25 минут?» — Подумает клиент.

Доверие и честность не нужно подавать как что-то особое. Они должны быть в разговоре всегда, с самого начала.
3. «Хм… Я думаю, мы можем это сделать»

Так можете или нет?

Сомнения — это нормально. Но не нормально уходить от ответа. Признайте, что клиент задал хороший вопрос. Прям так и скажите: «Хороший вопрос!». И дайте ему понять, что ответите, но позже.

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

4. «Вы принимаете решение?»

Это просто оскорбление! Если тот, с кем вы ведете переговоры, не принимает решения — не ставьте его в неудобное положение. Более того, не заставляйте говорить об этом вслух.

5. Использование профессиональных терминов

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

Велика вероятность потерять сделку, использовав в разговоре не те слова. Будьте честны и открыты и избегайте фраз, которые ставят под угрозу вашу репутацию и успешность переговоров.
Вывод: Не наглейте и не ждите от клиента, что он будет с вами на одной волне с первой минуты разговора. Будьте гибкими, белыми и пушистыми. Вы сэкономили: 15 минут.
#541
Тренд в дизайне — двухцветные изображения: советы и примеры
Благодаря Spotify двухцветный дизайн с каждым днем набирает популярность. С таким эффектом фото сразу бросается в глаза!

Что такое дуотон?

Дуотон — использования двух цветов в изображении. Название и техника появились в полиграфии, где для печати использовали только 2 цвета.

Дуотон визуально интересен и делать его — элементарно. Эффект создается в Фотошопе или с помощью приложения по типу Colofilter.css.

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

Заглавное фото

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

Чтобы достичь максимального эффекта:

  • Выберите два контрастных цвета. Круто, если это будут цвета бренда.
  • Возьмите фото с объектами, на которых можно сфокусироваться. Пейзажи сложнее использовать.
  • Используйте качественные изображения. Блёр и низкое качество — не вариант.
  • Создайте контраст.
  • Определите место для кнопок и текста.
  • Выбирайте цвета, которые отражают настроение фотографии.
  • Добавьте цветную рамку или параллакс-эффект.
Простая цветовая палитра

Дуотон — не обязательно что-то сложное. Иногда яркие примеры просты по своей природе.

Assurity Life Insurance используют два оттенка красного и простой шрифт. По скролу появляется еще несколько полутонов. Красный привлекает внимание пользователей.

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

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

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

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

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

Join Radio использует чуть заметный градиент для фона. Цвета гармонируют с пользовательским интерфейсом. Простая анимация и переход от светлого цвета к темному побуждают скроллить страницу.
Дуотон — возможность экспериментировать, соединять несовместимые цвета. А результат всегда выглядит классно и работает.
Вывод: Оригинальное — не значит сложное. Особенно в эпоху минимализма. Берите фотошоп (или даже приложение для телефона) и креативьте трендовый дизайн. Вы сэкономили: 15 минут.
Поздравляем, вы стали мудрее на целый ланч-тайм. Храните секрет своей мудрости и никому не говорите, откуда вы все знаете. А за новой порцией свежих статей возвращайтесь через неделю. Чао!