Рассказ о “ Вернуться к Top” Ссылки

Часто пристальное внимание на малый details, что делает дизайн выдающимся.

При разработке веб-сайта, дизайнеры стремятся поскорее забыть о мелких деталях и сосредоточиться на основных элементов дизайна, таких как навигация, оформление и макет.Если все сделано правильно, то результат, как правило, твердые, впечатляющее и очень профессиональный дизайн, который передает информацию.Тем не менее, это не запоминающимся.Причина в том, что такие проекты часто не имеют незабываемый голос: они могут выглядеть визуально привлекательным, но они don’ T обеспечивают яркое якорь для пользователей, чтобы помнить сайта после ухода it.

Таким образом, мелкие детали важны, потому что они могут помочь дизайн выделиться.Задумывались ли вы о дизайне вашей корзине?Что о дизайне теги, штампы с датой, “ Previous” и “ Next” ссылки?Все эти маленькие детали не важны для навигации по сайту, но они складываются в более удобной для пользователей, более удобный, а иногда и более сложные конструкции.И именно поэтому мы сосредоточили внимание наших читателей на такие вещи, как изображение captions блок quotes Дата stamps торговые carts pagination < hr> lines теги clouds и favicons.

Screenshot - Top Link

В этой статье мы представляем разработка “ Вернуться к top” links, забытые и редко используется ссылка, которая позволяет пользователям перейти к верхней части данной страницы.Посетитель может достичь такого эффекта, нажав на “ Home” кнопку на своем клавиатурой, однако, не каждый пользователь знает, что ярлык, и наиболее вероятно, использовать вертикальную полосу прокрутки в браузере для этой цели.Как дизайнеры, мы можем помочь нашим пользователям, добавив автономного “ top” ссылка на наш designs.

Когда “ Вернуться к Top” Ссылки являются Useful

К сожалению, это вежливое обслуживание — позволяя пользователям перейти в началона странице — Предлагается очень редко.Большинство дизайнеров don’ T включить его, поэтому нам потребовалось более 5 недель, чтобы собрать по крайней мере, несколько десятков хороших примеров для этой post.

В самом деле, “ Вернуться к top” ссылки не всегда полезно.Например, они могут оказаться ненужными для сайтов, которые имеют довольно короткий страниц или статей.В таких случаях нет необходимости для пользователей, чтобы перейти к главе страницу, потому что вся страница полностью видна в любом случае, если “ top” Ссылка находится на такие страницы, нажав на нее не даст никакого эффекта,довольно раздражающим.Это еще одна причина, почему многие дизайнеры don’ т использовать его: разнообразие имеющихся в настоящее время разрешение экрана составляет “ top” Ссылка непригодных и ненужных.That’ поэтому использование “ Вернуться к top” ссылки за сравнительно короткий страниц не является хорошим idea.

Тем не менее, веб-сайты с длинными pages может предложить посетителям отличная функция, которая экономит время и позволяет избежать необходимости для вертикальной прокрутки с mouse.

Где должны “ Top” Link размещаемых

Наиболее очевидное и общее место для “ Вернуться к top” ссылка колонтитула.Это где она принадлежит, и должен быть помещен.Мы weren’ т возможность определить общую схему дизайна для выравнивания “ Вернуться к top” ссылки.Некоторые дизайнеры поместить его на левой части подвала, другие поместить его в середине и еще другие положил его на правой стороне нижнего колонтитула.Это также очень распространенная разместить “ top” Ссылка на левой части области содержимого, прямо под article.

Screenshot - Top Link Познакомьтесь с дружественным “ top” Ссылка: он часто помещаются в нижней части страницы и почти всегда оказывается очень скромной и почти bashful.

“ Вернуться к top” ссылки также часто используются в часто задаваемые вопросы, разделы справки и карты сайта, где они помогают разрыва главы или параграфы и предоставить пользователям быстрый способ, чтобы перейти к началу страницы, где главной навигацииplaced.

Как создать “ Top” Link

Чтобы указать ссылку на верхнюю часть страницы, в большинстве случаев этого достаточно, чтобы определить пустой якорь и поставить его сразу после < body> теги:

<div id="footer">
<!-- footer goes here -->

<a href="#">top</a>

</div>

Тем не менее, старые браузеры и, в частности, устаревшие браузеры имеют проблемы интерпретации этой разметке.Альтернативным решением является использование реальный якорь, который явно определен и помещен сразу после < body> теги:

<body>

	<a name="top"></a>
	
	<!-- content goes here -->
	
	<a href="#top">top</a>
	
</body>

Update: еще один метод, который позволяет избежать ненужной разметки и, следовательно, должны быть предпочтительным является использование ID-оболочки или заголовка для той же цели.Например, если вы используете DIV-контейнер с идентификатором “ wrapper”, вы можете использовать следующую разметку:

<body>
	<div id="wrapper">
	
	<!-- content goes here -->
	
	<a href="#wrapper">back to top</a>

	</div>
</body>

Конечно, саму ссылку doesn’ т должны быть текст, онтакже могут быть изображения, кнопки или любой другой элемент вашего выбора (использование изображений может иметь некоторые вопросы удобства использования — см. ниже).

Wording

Не важно, что вы на самом деле фраза использовании: нужно просто убедитесь, что посетителям понять функции link и aren’ T раздражали его.Например, it’ наверное, не очень хорошая идея использовать слово “ Return” потому что это не сразу понятно, если пользователь будет принято на главную страницу, на предыдущую страницу browser’ история с или в верхней частиpage.

Используйте четкие и краткие terms, такие как “ Наверх, ” “ Вернуться к началу, ” “ Вернуться к …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.