Поговорим про элементы интерфейса в типографике. Мы с вами уже говорили о геометрии в типографике и о трёх элементах — точке, линии, прямоугольнике. Те или иные интерфейсные элементы могут быть представлены в виде таких примитивов.
Вот перед нами экран Айфона. По‑моему, это почта. Здесь можно настраивать ящики, которые показываются по умолчанию. Посмотрите, из чего состоит экран:
Какие‑то чекбоксы с галочками — это точки бескомпромиссные, без вопросов. У каждого ящика есть иконки — тоже точки. Есть мини‑гамбургеры, за которые можно таскать, порядок ящиков менять, — это тоже точки. А если посмотреть на каждую строчку в отдельности, то это линии.
Первая штука, которая выступает в интерфейсе в роли точки, — это всегда иконка. Иконки можно ставить по тем правилам, которые мы проговорили для точек.
Вот ещё пример:
Телевизионная приставка, которую я вам уже показывал, тоже состоит из точек. Кнопка поиска — точка, кнопки «Плей» в углах своих прямоугольников — точки. И внизу иконки разделов — тоже точки:
Вот ещё пример интерфейса биржевого трейдера — прямо весь обвешан точечными элементами:
Поле поиска, какая‑то бирка «Демо», карандаши, плюсы, логотипы «Эпла» и «Фейсбука». Со всех сторон на нас смотрят точечные элементы, которые умеют встраиваться в строку или, если они достаточно массивные или важные, вставать где‑нибудь в углах своих модулей и т. д.
Ещё пример — приложение «Рук» для Айфона:
Здесь точечные элементы выступают в роли мощных якорных объектов — эти большие иконки стоят в центре своих прямоугольников. Ещё посмотрите на меню внизу, стандартное айфоновское меню, тоже состоит из точек со своими подписями:
При этом важно помнить, что точка — элемент, который не любит конкуренцию. И если им злоупотреблять, вы можете получить что‑то в духе Ворда:
Из точечных элементов набрали огромное количество функциональных возможностей: «Давай, дорогой пользователь, разбирайся, помни, где какая иконка, прицеливайся, попадай». Выглядит очень хаотично, сложно. А ещё можно под себя настроить и вывести сюда ещё больше тулбаров с иконками. Тогда вообще будет полный хаос.
В новой версии Ворда стало лучше, но всё равно, если посмотреть, здесь точки, точки, точки. Интерфейсные элементы с точками довольно сильно похожи друг на друга, поэтому разобраться тяжеловато. Кстати, выглядит при этом всё равно мусорно:
Гугль с аналогичной историей справился чуть‑чуть получше:
Во‑первых, нет нагромождения огромного количества этажей из точечных элементов. Во‑вторых, точечные элементы стремятся быть очень похожими друг на друга и сгруппированы по подобию. Вначале серия иконок, связанных с настройкой зума и отображения текста, потом жирность, курсив, подчёркивание, цвета, отдельно иконки выравнивания текста. Но с ними Гугль как раз допустил, на мой взгляд, небольшую ошибку: рядом поставили и иконки выравнивания текста, и иконки, связанные с настройкой расстояния между строками и списками. А они очень похожи между собой, хотя отвечают за принципиально разные вещи. Я, например, постоянно хочу поменять расстояние между строками или настроить список, а вместо этого жму на кнопку, которая выравнивает текст по обоим краям. И всё равно это выглядит лучше, чем было у Микрософта в Ворде.
Пример линий в интерфейсе — очередной интерфейс Айфона. Линия наверху с тулбаром, линия с контактами, линия внизу меню, которая, в свою очередь, состоит из точечных элементов:
Классический пример линии в интерфейсе — это поле ввода и лейбл к нему:
Когда вы такое делаете, следите чтобы лейбл и содержимое поля, которое пользователь может ввести, были соразмерны и по возможности максимально совпадали. Когда вы делаете вот так, это обычно выглядит фигово, неаккуратно, может быть, даже непонятно для пользователя. Может быть, изредка это сработает в специфическом дизайне, но по умолчанию так лучше делать не надо. Лучше делать как на примере справа: лейбл и текст в поле выровнены, совпадают по кеглю. Всё выглядит гораздо приятнее. Плюс нет проблем с внутренним и внешним в поле ввода.
Кнопка — это тоже линейный элемент. Очень сложно представить себе какой‑либо интерфейс, в котором нет кнопок. Когда делаете кнопки, следите, чтобы они были достаточно большие, чтобы в них было легко попасть или курсором, или пальцем. Но не забывайте про правило внутреннего и внешнего, чтобы надписи на кнопках у вас не влезали в края этой кнопки.
Очень часто бывает так, что размер кнопки подстраивается под надпись на ней. И нередко бывает, что надпись может быть довольно короткая. Вот здесь слева, например, просто «ОК» — выразили согласие:
Если это какая‑то второстепенная кнопка и, скорее всего, на ней кегль маленький, то в результате, если вы подстроите размер кнопки под надпись, кнопка получится очень маленькая. И она будет плохо заметна, в неё будет сложно попадать, внешний вид будет сомнителен.
В этой ситуации правило можно нарушить. И сделать поля и боковые, и, может быть, если требует дизайн, и верхнее, и нижнее побольше. В случае с кнопкой «ОК» более широкая выглядит гораздо лучше и работает гораздо лучше.
Вот ещё пример такой формы. Здесь я предлагаю обратить внимание на то, что иногда в интерфейсе уместно в линию вытянуть сразу несколько полей ввода:
Можно вспомнить какие‑нибудь сложные поля. Например, на «Айрбиэнби» форма поиска жилья вытянутая и состоит сразу из трёх полей, вытянутых в одну линию. Так иногда можно делать. Главное, следить за тем, чтобы эти поля, всё содержимое этой формы было как‑то объединено одной штукой и было понятно пользователю.
В форме записи на приём к врачу поля, вытянутые в строку, я примерно могу понять. Но дальше тут фигня. Это то, что мы в бюро называем «раком формы». Здесь просто запихнули в пространство все возможные контролы, совершенно не думая о том, в каком порядке пользователь это будет читать и заполнять. Порядок чтения всё время меняется. То мне надо идти слева направо, то вниз. Где‑то мне надо заполнить поле, потом какие‑то кучи колонок. Форма очень сложная и на вид, и для заполнения, потому что она нелинейная.
Когда вы делаете какие‑нибудь экранные формы, стремитесь к тому, чтобы они были линейные. Лучше всего — лейбл, справа от него поле, ниже следующий лейбл, справа от него поле, лейбл и поле, лейбл и поле и так далее. Если сначала приходится слева направо, потом вниз, потом, может быть, ещё вниз, потом слева направо — это фигово.
Теперь про прямоугольники в интерфейсе. Без них в интерфейсе никуда. Прямоугольники очень хорошо помогают организовывать пространство и связи между элементами. Вот, например, перед нами скриншот окна настройки вайфая на Маке:
С помощью прямоугольника здесь всё очень хорошо объяснено. Слева — стакан способов подключения к интернету, а справа — конкретные настройки того или иного способа. Я выбрал вайфай, и здесь у меня всё поменялось. Я понимаю, как это всё организовано, именно с помощью прямоугольников.
Ещё пример — интерфейс биржевого трейдера. Информационная панель, где с помощью прямоугольников пространство разграничено на какие‑то логические блоки:
Обратите внимание, что абсолютно не обязательно все блоки ставить на прямоугольники. В прошлый раз мы с вами говорили, что прямоугольник может получиться просто за счёт того, что вокруг него есть другие прямоугольники. Например, список справа совершенно спокойно живёт без плашки, потому что он и так ограничен со всех сторон другими прямоугольниками. И всё без проблем считывается.
Ещё пример прямоугольника в интерфейсе — панель выбора цвета в Фотошопе. Прямоугольники сочетаются с какими‑то линейно‑точечными элементами:
Кнопка может стать настолько важным элементом, например с точки зрения бизнеса, что её надо сделать очень большой и она становится прямоугольником:
Вот перед нами скриншот низа промостраницы «Редимага». И заканчивается эта страница огромной кнопкой «Зарегистрироваться и начать дизайнить». Это суперпуперкнопка, она по сути прямоугольная, конечно, скруглённая, но по смыслу это прямоугольник. И к ней соответствующее отношение. Она, как большой якорный объект на странице, находится внизу и встала по центру своего модуля — чёрного подвала. Всё внимание на ней.
Ещё пример такой же истории на сайте «Рук»:
Здесь тоже есть самая главная кнопка на странице — синяя кнопка «Выбрать услугу» внизу. Точно так же она не болтается, а заняла стратегическое место в левом нижнем углу и ещё сопровождается вот такой подписью с шагами типа инструкции.