Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Команда удаленных разработчиков и дизайнеров
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
26
Битрикс24

Битрикс24

www.bitrix24.ru

16
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

14
myPreza

myPreza

mypreza.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

10
YAGLA

YAGLA

yagla.ru

10
Reader

Reader

Интернет-журнал о современных технологиях.

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

7 правил создания привлекательного интерфейса

2 214 22 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Сегодня предлагаем подборку правил, которые помогут как начинающим, так и опытным дизайнерам в создании привлекательного интерфейса.

Правило 1. Не замусоривайте интерфейс

Чем больше вариантов вы предложите посетителю, тем сложнее ему сделать выбор в пользу чего-то определённого.

Физиолог Вильям Эдмунд Хик ещё в 1950 году экспериментально доказал: время принятия решения пропорционально количеству предлагаемых вариантов. Пользователи хотят разные варианты, но не слишком много!

Например, посмотрите на Amazon: на странице имеются лишь несколько навигационных кнопок наверху, а остальное пространство заполнено привлекательными картинками.

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

Правило 2. Используйте правильные обозначения

Значки могут стать лучшими друзьями дизайнера, если он понимает их значение.

Явные – четкие обозначения, например, слова или картинки, показывающие функцию.

Картинки, паттерны — это значки настолько употребимые в сети, что их значение стало общеизвестным, например, знак плейера.

Спрятанные — обозначения, которые попадают в поле зрения при определенных условиях, например, «падающее вниз» меню.

Метафоричные — часто комбинируются с другими типами обозначений. Они показывают функцию метафорой. Например, ручка – написание текста.

Негативные — эти значки показывают недоступную функцию (обычно имеют серый цвет).

Обозначения сделают ваш сайт эстетичным и лёгким в использовании.

Правило 3. Грамотно используйте силу цвета

Красный – опасность, сила, страсть – в действительности стимулирует кровоток, когда мы смотрим на него.

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

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

Зеленый – рост, баланс, достаток.

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

Пурпурный, фиолетовый – таинственный, роскошный, творческий – этот королевский цвет по прежнему содержит в себе дух декадентства.

Белый - виртуальный, чистый, простой, ассоциируется с докторами и честностью. Он подходит для ненавязчивого заднего фона.

Чёрный - Черный – насыщенный, доминирующий. Наиболее мощный цвет. Если его использовать слишком много, то будет впечатление подавления от вашего сайта.

Правило 4. Изучите и используйте разные типы симметрии.

Горизонтальная – стандартная форма симметрии, которая приходит на ум: обе половинки экрана имеют равный вес и распределение элементов – безопасный выбор.

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

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

Правило 5. Используйте фото реальных людей

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

Правило 6. Поддерживайте согласованность

Обратите внимание на следующие моменты:

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

Унификационные элементы, иконки – они должны быть унифицированными во всем сайте и по желанию, уникальными.

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

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

время на изучение сайта.

Используйте белое пространство наилучшим образом:

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

Правило 7. Не забывайте о факторах доверия

Описание продукта должно соответствовать картинке.

Включайте благодарности от клиентов, фото своей команды.

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

Автор статьи: Алёна Ивахненко из команды Montless

0
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Ilya Chikildin
1. Кто такой Уильям ("Вильям") Эдмунд Хикк? Ничего про него не нашел.
2. Правило 3 про психологию цвета - бред.
3. Типография - полиграфическое предприятие.
Ответить
Montless
Команда удаленных разработчиков и дизайнеров
Konstantin Shcherbina
1. William Edmund Hick - или закон Хика, и всё найдёте.
2. О влиянии цветов - Миронов, "Цветоведение", 1984, и ещё множество исследований
3. Типографика - опечатка затесалась
Ответить
SPARK
Помогаем стартапам 24х7
Пётр Савченко
Исправите опечатку в тексте?
Ответить
Montless
Команда удаленных разработчиков и дизайнеров
Konstantin Shcherbina
Исправили :)
Ответить
Pragmatika
Продуманные и понятные сайты для продажи товаров и услуг в интернете.
Николай Яковенко
Нельзя просто взять и создать интерфейс, используя эти правила.
Ответить
Показать предыдущие комментарии
Taras Nikitin
Давайте сойдёмся на том, что красный - это "цвет вызова".
И у меня альфабанк не ассоциируется с инновациями и уж тем более стабильностью, может потому, что я редко смотрю рекламу, помню как этот банк колбасило в 2004 году. Да и если быть совсем точным (придираться), цвет у альфабанка не красный, а "Глубокий карминно-розовый".
Ответить
Медиа Масс.Штаб
мобильные приложения
Yuri S Timoshenkov
В маркетинге уже некоторое время сложилось, что красный (с белым и некоторыми другими цветами) – цвет розницы, распродаж, акций.
Ответить
Pragmatika
Продуманные и понятные сайты для продажи товаров и услуг в интернете.
Николай Яковенко
К сожалению, сойдись с вами в любом клише по цвету я не могу. Профессия обязывает быть беспристрастным
Ответить
Taras Nikitin
Хорошо, то есть получается: "цвет это просто цвет и ничего более". Тогда и всё остальное можно рассмотреть с этой позиции: "Альфабанк это просто банк и ничего более". Да и статья, это просто статья и ничего более. Это наверно и правильно, потому что интерфейс интерфейсу рознь - есть интерфейсы управления ядерным реактором, а есть интерфейс игрушки тамогочи и загнать всё в единые правила, пожалуй невозможно, а порой и вредно.
Ответить
Konstantin Boldovskiy
С правилами все нормально.
Третье значение из словаря Ушакова: "Принцип поведения, тот или иной образ мыслей, то или иное обыкновение."
Ответить
Taras Nikitin
Если отбросить некоторые ляпы вроде опечаток, то статья на мой взгляд, в целом полезная.
Ответить
Магазин Таобао
Cайт (движок) с товарами Taobao на русском языке
Магазин Таобао
Теория без практики тяжело усваивается... Хорошо бы примеры с картинками добавить в статью
Ответить
Montless
Команда удаленных разработчиков и дизайнеров
Konstantin Shcherbina
Учтём в следующих наших статьях ;)
Ответить
Alexey Petrov
Интересный материал)
Ответить
Алексей Сироткин
Разумнее никогда, нигде, ни при каких обстоятельствах не упоминать Амазон.
Амазон - не тот сайт, на который стоит ориентироваться в любом из аспектов.
Если в статье упоминается Амазон - сразу ясно, что это рерайт перевода. Читать смысла нет.
Ответить
Konstantin Boldovskiy
Смысл будет, если в поисковике набрать "William Edmund Hick Amazon" и по второй ссылке посмотреть хороший перевод авторской (Jerry Cao) статьи с иллюстрациями и сноской на оригинал.
И не стоит называть пустое пространство белым (на сером сайте оно серое). В оригинале стоит "white space" или "negative space" и пояснение этого термина - просто отсутствие других элементов.
Ответить
Алёна Ивахненко
Алексей, спасибо за ваш отзыв. Учту это на будущее!
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать