Содержание
- Визуальные разделители контента в мобильном UI
- 5 фраз, которые сорвут сделку
- Тренд в дизайне — двухцветные изображения: советы и примеры
#539. Визуальные разделители контента в мобильном UI
Visual Dividers in Mobile UI Design
Фото: beachcamera.com
Дизайн мобильного приложения только на первый взгляд кажется простым. Столкнуться с трудностями можно уже на визуальном разделении блоков. Рассмотрим, какие бывают варианты.
Традиционные разделители
Такими считаются прямые горизонтальные или вертикальные линии, которые служат границей между блоками и создают иерархию на странице. К ним относятся Full-bleed и Inset разделители.
Full-bleed разделители: такой способ разделения информации подходит, когда вам нужно чётко отделить блоки друг от друга — как в примере ниже. Используйте Full-bleed разделители в случаях, когда элементы содержат не привязанный к контексту контент: биографические детали в контактной информации, письма и т.д.
Inset разделители: подходят, когда элементы со схожим контентом можно объединить в группы. Как в телефонной книге, где контакты сгруппированы и помечены иконкой или буквой алфавита. Элементы в группе не разделены, идут непрерывным потоком и мотивируют пользователя скроллить страницу.
Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*
Как получить измеримые результаты в фарммаркетинге.
Показываем на примерах →
Спецпроект
Альтернативные способы рисовать разделитель
Традиционные разделители подходят для мониторов, но на экране мобильного телефона занимают слишком много места. Пользователям нравится легкий интерфейс, поэтому избавляйтесь от лишних элементов и линий, разделяя контент отступами.
Белое пространство: с использованием белого пространства интерфейс станет привлекательнее и проще. Пространство вокруг элементов служит разделителем и делает интерфейс менее захламлённым.
Цветовой контраст: цвет — мощный инструмент дизайна, используйте его умело. Выберите два контрастных цвета и выделите ярким то, к чему хотите привлечь внимание пользователей.
Тени и высота: с помощью теней добавьте глубины приложению и визуально отделите элементы друг от друга. Приложение Google Календарь — отличный пример использования теней вместо линий.
Для разделения изображений линии не нужны
Изображения не нуждаются в разделителях, потому что сама сетка создает визуальное разграничение. Достаточно добавить отступы между элементами и заголовки для групп.
Вывод: Суть юзабитили — в мелочах, о которых даже не думаешь, что нужно думать. Зато теперь вы в курсе.
Вы сэкономили 10 минут.
#540. 5 фраз, которые сорвут сделку
5 Phrases That Will Kill Your Sales Deal
Топовые продажники обращают внимание на детали. Они внимательно слушают, предлагают решения проблемы и просят о помощи, когда она действительно нужна. И знают, что в разговоре важно тщательно подбирать слова.
Вот пять фраз, которые не должен произносить продажник.
1. «Поверьте мне»
Лучше сразу напишите клиенту на лбу: «Я дурак». Эта избитая фраза из телемагазинов и рекламы моющего средства. Говоря так, вы как будто требуете доверия пассивно-агрессивным способом.
Если вы уже выстроили доверительные отношения с клиентом, такая фраза вам не нужна. В таком случае она даже звучит как оскорбление. Клиент может подумать, что ему не доверяют. А вы будто уклоняетесь от ответа или что-то скрываете. Это вызывает подозрения.
2. «Если честно…»
Все, что написано выше, относится и к этой фразе. Но если вы скажете: «Честно говоря…» — будет гораздо хуже.
«Подождите… То есть он врал мне первые 25 минут?» — подумает клиент.
Доверие и честность не нужно подавать как что-то особое. Они должны быть в разговоре всегда, с самого начала.
Фото: thisismoney.co.uk
3. «Хм… Я думаю, мы можем это сделать»
Так можете или нет?
Сомнения — это нормально. Но не нормально уходить от ответа. Признайте, что клиент задал хороший вопрос. Прям так и скажите: «Хороший вопрос!». И дайте ему понять, что ответите, но позже.
Не давайте ответ, в котором сомневаетесь. Неверный ответ гораздо хуже для репутации и доверия, чем ожидание ответа.
4. «Вы принимаете решение?»
Это просто оскорбление! Если тот, с кем вы ведете переговоры, не принимает решения — не ставьте его в неудобное положение. Более того, не заставляйте говорить об этом вслух.
5. Использование профессиональных терминов
Вы, как профессионал, по уши в своей сфере и понабрались профессиональных словечек. Но помните, что они не знакомы клиентам. Старайтесь не употреблять профессионализмы в разговоре. Чтобы вас понимали, говорите на языке клиента.
Велика вероятность упустить сделку, использовав в разговоре не те слова. Будьте честны и открыты и избегайте фраз, которые ставят под угрозу вашу репутацию и успешность переговоров.
Вывод: Не наглейте и не ждите от клиента, что он будет с вами на одной волне с первой минуты разговора. Будьте гибкими, белыми и пушистыми.
Вы сэкономили: 15 минут.
#541. Тренд в дизайне — двухцветные изображения: советы и примеры
Duotone Color: Tips & Examples for This Vibrant Trend
Благодаря Spotify двухцветный дизайн с каждым днём набирает популярность. С таким эффектом фото сразу бросается в глаза!
Что такое дуотон?
Дуотон — использования двух цветов в изображении. Название и техника появились в полиграфии, где для печати использовали только 2 цвета.
Дуотон визуально интересен и делать его — элементарно. Эффект создается в Фотошопе или с помощью приложения по типу Colofilter.css.
Так полиграфическая техника нашла место в интернете. Возможно, вы уже заметили эту тенденцию в сети.
Заглавное фото
Используйте двухцветное фото на главной странице — как New Deal Design, которые выбрали смелые цвета и смешные образы. Не бойтесь выйти из зоны комфорта — используйте несочетаемые цвета. Главное — создать контрастное изображение, притягивающее внимание пользователей.
Чтобы достичь максимального эффекта:
- Выберите два контрастных цвета. Круто, если это будут цвета бренда.
- Возьмите фото с объектами, на которых можно сфокусироваться. Пейзажи сложнее использовать.
- Используйте качественные изображения. Размытые фотографии низкого качества — не вариант.
- Создайте контраст.
- Определите место для кнопок и текста.
- Выбирайте цвета, которые отражают настроение фотографии.
- Добавьте цветную рамку или параллакс-эффект.
Простая цветовая палитра
Дуотон — не обязательно что-то сложное. Иногда яркие примеры просты по своей природе.
Assurity Life Insurance используют два оттенка красного и простой шрифт. По скроллу появляется ещё несколько полутонов. Красный привлекает внимание пользователей.
Хитрость в том, что сайт слишком прост, чтобы быть не эффектным. Пользователи не перегружены элементами и сосредоточены на тексте. Этот тип дуотона подходит для формальных сайтов.
Повышенная читабельность
С помощью дуотона можно создать приглушенное изображение для фона. Текст на нём можно поместить в любое место. Чтобы повысить читабельность, сделайте однотонную подложку для надписей.
Акцент
Двухцветные изображения работают и в небольшом пространстве. Используйте тренд для оформления навигации, дополнительных изображений или для отдельного типа контента.
Плюс использования техники в маленьком пространстве — здесь больше свободы. Можно экспериментировать, даже если вы не уверены, что дуотон будет работает.
Фон
Это идеальный способ использовать фирменные цвета. И еще дуотон поможет сделать сайт современнее без кардинальных изменений.
Join Radio использует чуть заметный градиент для фона. Цвета гармонируют с пользовательским интерфейсом. Простая анимация и переход от светлого цвета к темному побуждают скроллить страницу.
Дуотон — возможность экспериментировать, соединять несовместимые цвета. А результат всегда выглядит классно и работает.
Вывод: Оригинальное — не значит сложное. Особенно в эпоху минимализма. Берите фотошоп (или даже приложение для телефона) и креативьте трендовый дизайн.
Вы сэкономили: 15 минут.
Поздравляем, вы стали мудрее на целый ланч-тайм. Храните секрет своей мудрости и никому не говорите, откуда вы все знаете. А за новой порцией свежих статей возвращайтесь через неделю. Чао!
Читать по теме: Ланч-тайм: краткий перевод свежих статей о Digital (все выпуски)
Источник:
