https://ux.pub/osnovy-ierarhii-v-dizayne-interfeysa-ui/
Понятие, ресурсы и значение иерархии для дизайна.
Визуальная иерархия – это порядок, в котором пользователь обрабатывает информацию согласно ее важности. В дизайне интерфейса, как и в любой другой форме дизайна, эта концепция должна быть функциональной с первого взгляда. При правильном использовании иерархии разум может группировать элементы и определять их приоритетность, чтобы придать им определенный порядок. Это облегчает понимание информации, которую вы хотите сообщить, и обеспечивает пользователю чувство удовлетворения достигнутым.
Распространенной проблемой в дизайне интерфейса является чрезмерное использование элементов или компонентов, разбросанных по экрану. Если их не поместить в правильную иерархию, они создадут беспорядок и потребуют больше усилий при навигации. Чтобы избежать этой проблемы важно упорядочить приоритетность этих элементов.
В этом примере такие средства, как размер, форма и цвет используются для направления взгляда на конкретный элемент
Среднестатистический пользователь имеет тенденцию «сканировать» весь контент на экране. Таким образом, основные элементы должны дать четкое представление, о чем сайт или приложение.
Подобная расстановка приоритетов должна рассматриваться не только как эстетическая проблема, но и как важная часть опыта пользователя. Многие из добавленных элементов, особенно в мобильных устройствах, будут иметь отношение к навигации по сайту. В то время, как иерархия в графическом дизайне существует годами, в дизайн интерфейса добавляется постоянный фактор взаимодействия. Тот факт, что пользователи взаимодействуют с элементами, делает его более актуальным для разработки интуитивно понятного интерфейса.
Существует семь средств, которые необходимо учитывать для создания правильной иерархии:
Чем больше элемент, тем больше он привлечет внимание. Это факт, люди сначала видят большие объекты, в том числе текст и изображения. Идея использования иерархии размеров заключается в том, чтобы дать точку фокуса для начала визуального путешествия.
На этом снимке приложения Google Arts & Culture заголовок «Pawtraits: Our Changing Relationship…» намного больше по размеру, чем подзаголовок «How do we really feel…». Установленный порядок чтения позволяет избежать путаницы
Если сделать переход от одного текста к другому небольшим, скажем, от 32pt до 24pt, это может усложнить порядок чтения при отправке двух сообщений одновременно. Быть может это и небольшая проблема, но вы должны иметь в виду, что это может создать менее эффективную иерархию.
Важные элементы не обязательно должны быть слишком большими. Создание ненужного дисбаланса может в конечном итоге омрачить остальную часть дизайна и привести к потере другой информации при чтении. Как и все остальное в дизайне, баланс необычайно важен.
Яркие цвета выделяются больше, чем приглушенные тона. Цвет является мощным визуальным средством, его правильное использование может эффективно разделять элементы на экране, чтобы расставлять приоритеты. В дизайне интерфейса, часто самый сильный цвет используется для взаимодействия, из-за потребности пользователя действовать или получать обратную связь от системы.
На этом скриншоте приложения Cabify использует фиолетовый в качестве основного цвета. Маршрут поездки и кнопка «Continue» – это первая иерархия, за которой следуют карта и машина. Гармоничное использование оттенка и насыщенности отделяет эти элементы от менее насыщенного и менее важного фона