Выравнивание значка по тексту. Выровнять по заглавным буквам, высоте x или базовой линии?

Питер

Выравнивание значка по тексту. Выровнять по заглавным буквам, высоте x или базовой линии?

Я разрабатываю пользовательский интерфейс для настольного приложения. У меня есть боковая панель с меню (значок + ярлык, оба кликабельны). Я отцентрировал значки по первым заглавным буквам. Должен ли я использовать другое выравнивание? Существуют ли какие-либо рекомендации по выравниванию текста по значку?

введите описание изображения здесь

мужественный

Я думаю, что это действительно сводится к вопросу личных/художественных предпочтений, но я бы сделал именно так.

Эшли Палка

Ответ на ваш вопрос: это зависит.

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

Тем не менее, существует множество стилей дизайна. Я делал проекты, в которых общий стиль требовал, чтобы значки и текст имели «базовую линию» (если хотите), на которой они сидели. Значит, они были не по центру.

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

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

Взгляните также на пользовательский интерфейс Spotify. У них есть значки разных размеров, и они центрированы по вертикали друг к другу, а иногда и к тексту разного размера. Это немного «менее очевидный» подход, чем у Google, поэтому он может дать вам несколько хороших идей.

Надеюсь, это поможет вам :)

Джейкоб Кэмпбелл

Если вы используете какую-либо «линию» или элемент шрифта для содержания чего-либо, лучше всего использовать все эти элементы для его содержания. По сути, если вы используете базовую линию, используйте также высоту кепки, зажим, планку и т. д.

Анатомия шрифта: http://www.typographydeconstructed.com/category/anatomy-of-type/