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