ланч-тайм
Ланч-тайм 118: краткий
перевод свежих статей
о digital
перевод свежих статей
о digital
В номере: разграничители элементов в мобильном приложении, фразы, которыми можно сорвать сделку и трендовый дуотон.
#539
Визуальные разделители контента в мобильном UI
Visual Dividers in Mobile UI Design
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3739-6433-4536-b066-393866656234__-__empty__10.png)
Фото: beachcamera.com
Дизайн мобильного приложения только на первый взгляд кажется простым. Столкнуться с трудностями можно уже на визуальном разделении блоков. Рассмотрим, какие бывают варианты.
Традиционные разделители
Такими считаются прямые горизонтальные или вертикальные линии, которые служат границей между блоками и создают иерархию на странице. К ним относятся Full-bleed и Inset разделители.
Full-bleed разделители: такой способ разделения информации подходит, когда вам нужно четко отделить блоки друг от друга — как в примере ниже. Используйте Full-bleed разделители в случаях, когда элементы содержат не привязанный к контексту контент: биографические детали в контактной информации, письма и т.д.
Традиционные разделители
Такими считаются прямые горизонтальные или вертикальные линии, которые служат границей между блоками и создают иерархию на странице. К ним относятся Full-bleed и Inset разделители.
Full-bleed разделители: такой способ разделения информации подходит, когда вам нужно четко отделить блоки друг от друга — как в примере ниже. Используйте Full-bleed разделители в случаях, когда элементы содержат не привязанный к контексту контент: биографические детали в контактной информации, письма и т.д.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3365-6237-4636-b462-613835393465__-__empty__12.png)
Inset разделители: подходят, когда элементы со схожим контентом можно объединить в группы. Как в телефонной книге, где контакты сгруппированы и помечены иконкой или буквой алфавита. Элементы в группе не разделены, идут непрерывным потоком и мотивируют пользователя скроллить страницу.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3437-6661-4761-a138-313037663639__-__empty__13.png)
Альтернативные способы рисовать разделитель
Традиционные разделители подходят для мониторов, но на экране мобильного телефона занимают слишком много места. Пользователям нравится легкий интерфейс, поэтому избавляйтесь от лишних элементов и линий, разделяя контент отступами.
Белое пространство: с использованием белого пространства интерфейс станет привлекательнее и проще. Пространство вокруг элементов служит разделителем и делает интерфейс менее захламленным.
Традиционные разделители подходят для мониторов, но на экране мобильного телефона занимают слишком много места. Пользователям нравится легкий интерфейс, поэтому избавляйтесь от лишних элементов и линий, разделяя контент отступами.
Белое пространство: с использованием белого пространства интерфейс станет привлекательнее и проще. Пространство вокруг элементов служит разделителем и делает интерфейс менее захламленным.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3666-3435-4564-b866-313731383763__-__empty__114.png)
Цветовой контраст: цвет — мощный инструмент дизайна, используйте его умело. Выберите два контрастных цвета и выделите ярким то, к чему хотите привлечь внимание пользователей.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3231-3933-4335-b864-363631323161__-__empty__115.png)
Тени и высота: с помощью теней добавьте глубины приложению и визуально отделите элементы друг от друга. Приложение Google Календарь — отличный пример использования теней вместо линий.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3466-6562-4662-a631-383536333734__-__empty__16.png)
Для разделения изображений линии не нужны
Изображения не нуждаются в разделителях, потому что сама сетка создает визуальное разграничение. Достаточно добавить отступы между элементами и заголовки для групп.
Изображения не нуждаются в разделителях, потому что сама сетка создает визуальное разграничение. Достаточно добавить отступы между элементами и заголовки для групп.
Вывод: Юзабитили кроется в таких мелочах, о которых даже не думаешь, что нужно думать. Зато теперь вы в курсе. И сэкономили 10 минут.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3263-6639-4334-b237-613733396635__-__empty__20.png)
Топовые продажники обращают внимание на детали. Они внимательно слушают, предлагают решения проблемы и просят о помощи, когда она действительно нужна. И знают, что в разговоре важно тщательно подбирать слова.
Вот пять фраз, которые не должен произносить продажник.
1. «Поверьте мне»
Лучше сразу напишите клиенту на лбу: «Я дурак». Эта избитая фраза из телемагазинов и рекламы моющего средства. Говоря так, вы как будто требуете доверия пассивно-агрессивным способом.
Если вы уже выстроили доверительные отношения с клиентом, такая фраза вам не нужна. В таком случае она даже звучит как оскорбление. Клиент может подумать, что ему не доверяют. А вы будто уклоняетесь от ответа или что-то скрываете. Это вызывает подозрения.
2. «Если честно...»
Все, что написано выше, относится и к этой фразе. Но если вы скажете: «Честно говоря...» — будет гораздо хуже.
«Подождите… То есть он врал мне первые 25 минут?» — Подумает клиент.
Доверие и честность не нужно подавать как что-то особое. Они должны быть в разговоре всегда, с самого начала.
Вот пять фраз, которые не должен произносить продажник.
1. «Поверьте мне»
Лучше сразу напишите клиенту на лбу: «Я дурак». Эта избитая фраза из телемагазинов и рекламы моющего средства. Говоря так, вы как будто требуете доверия пассивно-агрессивным способом.
Если вы уже выстроили доверительные отношения с клиентом, такая фраза вам не нужна. В таком случае она даже звучит как оскорбление. Клиент может подумать, что ему не доверяют. А вы будто уклоняетесь от ответа или что-то скрываете. Это вызывает подозрения.
2. «Если честно...»
Все, что написано выше, относится и к этой фразе. Но если вы скажете: «Честно говоря...» — будет гораздо хуже.
«Подождите… То есть он врал мне первые 25 минут?» — Подумает клиент.
Доверие и честность не нужно подавать как что-то особое. Они должны быть в разговоре всегда, с самого начала.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3261-3764-4164-a430-303161353630__-__empty__21.png)
3. «Хм… Я думаю, мы можем это сделать»
Так можете или нет?
Сомнения — это нормально. Но не нормально уходить от ответа. Признайте, что клиент задал хороший вопрос. Прям так и скажите: «Хороший вопрос!». И дайте ему понять, что ответите, но позже.
Не давайте ответ, в котором сомневаетесь. Неверный ответ гораздо хуже для репутации и доверия, чем ожидание ответа.
4. «Вы принимаете решение?»
Это просто оскорбление! Если тот, с кем вы ведете переговоры, не принимает решения — не ставьте его в неудобное положение. Более того, не заставляйте говорить об этом вслух.
5. Использование профессиональных терминов
Вы, как профессионал, по уши в своей сфере и понабрались профессиональных словечек. Но помните, что они не знакомы клиентам. Старайтесь не употреблять профессионализмы в разговоре. Чтобы вас понимали, говорите на языке клиента.
Велика вероятность потерять сделку, использовав в разговоре не те слова. Будьте честны и открыты и избегайте фраз, которые ставят под угрозу вашу репутацию и успешность переговоров.
Так можете или нет?
Сомнения — это нормально. Но не нормально уходить от ответа. Признайте, что клиент задал хороший вопрос. Прям так и скажите: «Хороший вопрос!». И дайте ему понять, что ответите, но позже.
Не давайте ответ, в котором сомневаетесь. Неверный ответ гораздо хуже для репутации и доверия, чем ожидание ответа.
4. «Вы принимаете решение?»
Это просто оскорбление! Если тот, с кем вы ведете переговоры, не принимает решения — не ставьте его в неудобное положение. Более того, не заставляйте говорить об этом вслух.
5. Использование профессиональных терминов
Вы, как профессионал, по уши в своей сфере и понабрались профессиональных словечек. Но помните, что они не знакомы клиентам. Старайтесь не употреблять профессионализмы в разговоре. Чтобы вас понимали, говорите на языке клиента.
Велика вероятность потерять сделку, использовав в разговоре не те слова. Будьте честны и открыты и избегайте фраз, которые ставят под угрозу вашу репутацию и успешность переговоров.
Вывод: Не наглейте и не ждите от клиента, что он будет с вами на одной волне с первой минуты разговора. Будьте гибкими, белыми и пушистыми. Вы сэкономили: 15 минут.
#541
Тренд в дизайне — двухцветные изображения: советы и примеры
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3738-6663-4733-a233-636637366336__-__empty__30.png)
Благодаря Spotify двухцветный дизайн с каждым днем набирает популярность. С таким эффектом фото сразу бросается в глаза!
Что такое дуотон?
Дуотон — использования двух цветов в изображении. Название и техника появились в полиграфии, где для печати использовали только 2 цвета.
Дуотон визуально интересен и делать его — элементарно. Эффект создается в Фотошопе или с помощью приложения по типу Colofilter.css.
Так полиграфическая техника нашла место в интернете. Возможно, вы уже заметили эту тенденцию в сети.
Заглавное фото
Используйте двухцветное фото на главной странице — как New Deal Design, которые выбрали смелые цвета и смешные образы. Не бойтесь выйти из зоны комфорта — используйте несочетаемые цвета. Главное — создать контрастное изображение, притягивающее внимание пользователей.
Чтобы достичь максимального эффекта:
Что такое дуотон?
Дуотон — использования двух цветов в изображении. Название и техника появились в полиграфии, где для печати использовали только 2 цвета.
Дуотон визуально интересен и делать его — элементарно. Эффект создается в Фотошопе или с помощью приложения по типу Colofilter.css.
Так полиграфическая техника нашла место в интернете. Возможно, вы уже заметили эту тенденцию в сети.
Заглавное фото
Используйте двухцветное фото на главной странице — как New Deal Design, которые выбрали смелые цвета и смешные образы. Не бойтесь выйти из зоны комфорта — используйте несочетаемые цвета. Главное — создать контрастное изображение, притягивающее внимание пользователей.
Чтобы достичь максимального эффекта:
- Выберите два контрастных цвета. Круто, если это будут цвета бренда.
- Возьмите фото с объектами, на которых можно сфокусироваться. Пейзажи сложнее использовать.
- Используйте качественные изображения. Блёр и низкое качество — не вариант.
- Создайте контраст.
- Определите место для кнопок и текста.
- Выбирайте цвета, которые отражают настроение фотографии.
- Добавьте цветную рамку или параллакс-эффект.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3261-6130-4261-a232-333538343539__-__empty__32.png)
Простая цветовая палитра
Дуотон — не обязательно что-то сложное. Иногда яркие примеры просты по своей природе.
Assurity Life Insurance используют два оттенка красного и простой шрифт. По скролу появляется еще несколько полутонов. Красный привлекает внимание пользователей.
Хитрость в том, что сайт слишком прост, чтобы быть не эффектным. Пользователи не перегружены элементами и сосредоточены на тексте. Этот тип дуотона подходит для формальных сайтов.
Дуотон — не обязательно что-то сложное. Иногда яркие примеры просты по своей природе.
Assurity Life Insurance используют два оттенка красного и простой шрифт. По скролу появляется еще несколько полутонов. Красный привлекает внимание пользователей.
Хитрость в том, что сайт слишком прост, чтобы быть не эффектным. Пользователи не перегружены элементами и сосредоточены на тексте. Этот тип дуотона подходит для формальных сайтов.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild6435-6164-4837-a134-663335326337__-__empty__33.png)
Повышенная читабельность
С помощью дуотона можно создать приглушенное изображение для фона. Текст на нем можно поместить в любое место. Чтобы повысить читабельность, сделайте однотонную подложку для надписей.
С помощью дуотона можно создать приглушенное изображение для фона. Текст на нем можно поместить в любое место. Чтобы повысить читабельность, сделайте однотонную подложку для надписей.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3538-3437-4461-a264-353334383630__-__empty__34.png)
Акцент
Двухцветные изображения работают и в небольшом пространстве. Используйте тренд для оформления навигации, дополнительных изображений или для отдельного типа контента.
Плюс использования техники в маленьком пространстве — здесь больше свободы. Можно экспериментировать, даже если вы не уверены, что дуотон будет работает.
Двухцветные изображения работают и в небольшом пространстве. Используйте тренд для оформления навигации, дополнительных изображений или для отдельного типа контента.
Плюс использования техники в маленьком пространстве — здесь больше свободы. Можно экспериментировать, даже если вы не уверены, что дуотон будет работает.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3064-3035-4238-b436-396639393261__-__empty__35.png)
Фон
Это идеальный способ использовать фирменные цвета. И еще дуотон поможет сделать сайт современнее без кардинальных изменений.
Join Radio использует чуть заметный градиент для фона. Цвета гармонируют с пользовательским интерфейсом. Простая анимация и переход от светлого цвета к темному побуждают скроллить страницу.
Это идеальный способ использовать фирменные цвета. И еще дуотон поможет сделать сайт современнее без кардинальных изменений.
Join Radio использует чуть заметный градиент для фона. Цвета гармонируют с пользовательским интерфейсом. Простая анимация и переход от светлого цвета к темному побуждают скроллить страницу.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project960686_1710323253/tild3438-3563-4265-a132-376639633863__-__empty__36.png)
Дуотон — возможность экспериментировать, соединять несовместимые цвета. А результат всегда выглядит классно и работает.
Вывод: Оригинальное — не значит сложное. Особенно в эпоху минимализма. Берите фотошоп (или даже приложение для телефона) и креативьте трендовый дизайн. Вы сэкономили: 15 минут.
Поздравляем, вы стали мудрее на целый ланч-тайм. Храните секрет своей мудрости и никому не говорите, откуда вы все знаете. А за новой порцией свежих статей возвращайтесь через неделю. Чао!