Файл: Разработка навигации по мобильной версии сайта для интернет – магазина Vzlate.ru.pdf

Чистые, Геометрические Конструкции. Они визуально интересны и имеют острый, современный вид. На них легко сфокусировать взгляд. Линии и перспектива, используемые в геометрическом дизайне, также могут работать вместе, чтобы нарисовать глаза, где вы хотите, чтобы они шли.

Отличный пример геометрического дизайна, который использует перспективу, находится на странице дизайнера Брэдли Манковица. Жесткие линии дизайна и мягкие лучи света привлекают ваше внимание к центру страницы (см. рис. 1.3).

Рис. 1.3. Четкие геометрические линии

Дизайн уличного искусства стремительно возвращается в популярный бренд–дизайн, и это неудивительно. Они не только выглядят оригинально, они также звонят в колокол подлинности. Дизайн в стиле стрит-арта выглядит по-разному и оригинально, и он выделяется в море стандартного графического дизайна (см. рис. 1.4). минималистский дизайн

Рис. 1.4. Дизайн в стиле уличного искусства

Включение уникальных, забавных шрифтов в дизайн бренда - это верный способ встряхнуть визуальные эффекты в 2020 году. Вы можете передать так много о вашем бренде и его эволюции через ваш шрифт, что является плюсом, ведь можно сэкономить денег на дизайне. Выбор новых шрифтов в новом году может дать бренду новые визуальные эффекты.

Чистый, минималистский взгляд - это современный, популярный фирменный стиль. Часто мы видим изображения и графические элементы дизайна, которые на самом деле являются только текстом на твердых или минимально оформленных фонах. В других случаях мы можем видеть одно изображение в минималистичном дизайне, но оно может отображаться только как небольшая часть графики (см. рис. 1.5)

.

Рис. 1.5. Минималистичный дизайн

Интересные, Причудливые Иллюстрации. Иллюстрации могут позволить добавить свой собственный уникальный стиль в дизайн. Использование иллюстраций в дизайне–особенно на целевой странице-может помочь описать свой процесс или продукт в фирменном стиле (см. рис. 1.6.).

Рис. 1.6. Необычные иллюстрации

Движущиеся изображения, такие как GIF-файлы, штурмуют интернет, и мы начинаем видеть все больше и больше GIF-файлов в наших лентах новостей и электронных письмах. GIF по существу состоит из нескольких изображений, которые объединяются вместе, чтобы создать короткий цикл визуальных элементов. Очень похоже на Vine, но с изображениями вместо видео.

---

Изображение, имеющее движущиеся компоненты, обычно классифицируется как синемографы. Их часто можно увидеть на визуальных платформах, таких как Instagram. Это уникальный подход к дизайну и объединяет видео и аутентичные изображения в один визуальный элемент.

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

ГЛАВА 2. ПОЛЬЗОВАТЕЛЬСКОЕ МЕНЮ

2.1 Элементы графического меню

Меню сайта — это сгруппированный набор ссылок с названиями разделов, облегчающий переход на другие страницы.

Уникальные, Веселые Шрифты

Они называются пунктами меню и могут обозначаться текстом или графическими значками — иконками.

Меню должно быть у каждого сайта. Оно дает возможность попасть из одного раздела на другой, узнать, какая еще есть информация, и что интересного можно почитать. Современный пользователь привык все получать быстро, и продуманные ориентиры на сайте — залог того, что он останется с вами дольше.

Главная задача разработчиков — оптимально проработать структуру и сделать удобную навигацию. Поэтому часто используют термин навигационное меню сайта в контексте его основного предназначения.

Меню — один из важных структурных и навигационных элементов web-сайта. Оно должно обладать набором качеств и характеристик, удовлетворяющих потребности посетителей и решающих задачи интернет-ресурса.

Основные правила и ошибки:

- Меню должно быть заметным. Это может быть выделение оформлением или цветом. Ссылки, иконки должны контрастировать с фоном настолько, чтобы при считывании не возникло проблем. Откажитесь от скрытого или недостаточно контрастного меню, даже если очень хочется воплотить оригинальную дизайнерскую мысль. Если реализовали, оцените по счетчикам аналитики показатель отказов, просмотрите по вебвизору, как люди ведут себя на сайте. И расставьте приоритеты: супер-креатив или понятный дружелюбный интерфейс.

- Дизайн. Разные средства: цвет, шрифты, тени— помогают добиться удобства восприятия. При этом помните, что нужно сделать элемент заметным, а не пестрым и аляповатым.

- Единство оформления. На всех страницах ресурса стиль меню должен оставаться неизменным. Разные варианты будут сбивать пользователя, ухудшать восприятие информации.

---

- Стандарты верстки. Располагайте меню в общепринятых местах: вверху, справа, слева. Внизу в футере могут быть дублирующие ссылки, но никак не единственный элемент навигации. Пользователи не будут его искать, они просто уйдут. Был пример размещения элемента Корзина на сайте не в стандартном правом верхнем углу, а в левом нижнем. Результат — ее просто не находили.

- Тестирование. Если на старте трудно оценить, какой вариант будет оптимальным, подсмотрите у лидеров в топе. При вводе серьезных многоуровневых веб-проектов полезно проводить тесты на предмет доступности, удобства и т.д.

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

Рис. 2.1. Выделение активного пункта цветом

- Четкие ориентиры. Люди приходят не всегда сразу на главную, могут начинать с любого подраздела. Грамотное навигационное меню должно показать, где они сейчас и как попасть в раздел любого уровня. Размещение ссылки/иконки на главную страницу на каждом URL в заметном месте обязательно.

- Меню должно быть понятным. Не пишите неизвестные аббревиатуры, сокращения, иностранные аналоги только потому, что они короче и оригинальнее смотрятся. Посетитель не должен догадываться, что скрывается в разделе Print: печатная продукция или размещение в прессе. Если рассчитываете таким образом заинтриговать, чтобы человек перешел и посмотрел, получите процент отказов под 100.

- Удобство. Если ваше меню многоуровневое с выпадайками, позаботьтесь о настройке, приемлемой скорости отображения вспомогательных секций. Иногда очень сложно со скоростью света уловить всю цепочку из 4 подразделов. Ставьте себя на место ваших клиентов. Даже если пунктов много, оставьте только основные.

- Не мельчите, шрифт должен быть хорошо читаемым, высота и ширина плашек достаточной для комфортного попадания по ним курсором. Выпадающий список должен уместиться в высоту одного экрана. В противном случае не все будут напрягаться, пытаясь одновременно удерживать его открытым и осуществлять прокрутку.

- Сегодня правило хорошего тона – верстать сайты с учетом адаптивных версий под мобильные устройства с отличными разрешениями.

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

---

На итоговые результаты выдачи в поиске могут влиять следующие критерии:

- Удачная навигация и грамотная внутренняя перелинковка являются факторами внутренней оптимизации. Это удобство для людей и положительная оценка от поисковиков. Понятная перелинковка поможет пользователю сориентироваться, увидеть ссылки на интересные разделы. Удобным считается такой вариант, когда добраться до нужного материала можно в 3 клика.

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

-Есть еще один важный момент. В web-разработке при проектировании сайтов правильным считается разрабатывать структуру на основе семантического ядра. То есть, сначала нужно собрать и структурировать информацию обо всех тематических поисковых запросах. Самые высокочастотные лягут в основу заголовков разделов. Соответственно, названия пунктов меню лучше не изобретать с креативным копирайтером, а согласовывать с seo-специалистом. Он подскажет, насколько часто люди ищут ту или иную информацию, это поможет сформировать интуитивно понятные названия.

- Если ссылки оформлены в виде графических элементов, нужно прописывать alt и title к ссылкам. Тогда роботы при индексации смогут учесть эти пункты.

Реализацию меню может быть разной, важно соблюдать принципы четкой структуры и понятной навигации. Это ускорит поиск информации и заодно улучшит поведенческие факторы вашего веб-ресурса.

2.2. UI\UX дизайн

UX — это User Experience (дословно: «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.

А UI — это User Interface (дословно «пользовательский интерфейс») — то, как выглядит интерфейс и то, какие физические характеристики приобретает. Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку попадать пальцем в кнопочки, читабельным ли будет текст и тому подобное.

Разница между UX и UI — в том, что UX-дизайнер планирует, как пользователь будет взаимодействовать с интерфейсом, какие шаги ему нужно предпринять, чтобы достичь цели. А UI-дизайнер продумывает, как будут выглядеть эти шаги и путь к цели в целом.

На деле UX и UI так тесно связаны, что иногда грань между понятиями размывается. Поэтому обычно проектированием интерфейсов занимается один дизайнер и его профессия пишется через слеш.

---

ГЛАВА 3. РАЗРАБОТКА И СОЗДАНИЕ ДИЗАЙНА САЙТА

3.1. Проблематика

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

С ростом числа мобильных устройств, адаптировать дизайн является более важным, чем когда-либо. Аудитория будет получать доступ к сайту с различных устройств, включая смартфоны, планшеты и настольные компьютеры. Если мы хотим, чтобы люди посещали сайт, то нужно убедится, что каждому удобно заходить на него с разных устройств.

Адаптивный дизайн гарантирует, что аудитория имеет хороший опыт работы на сайте, независимо от устройства, которое они используют. Сайт будет адаптироваться к устройству, чтобы гарантировать, что он имеет размер, соответствующий их устройству.

Сам сайт, на мой взгляд, удачный и удобный в эксплуатации. Все разделы четко распределены, легко найти раздел с интересующим сегментом изделий (см. рис. 3.1). Объектом для проектирования навигации я выбрала мобильную версию сайта (см. рис. 3.2).

В наше время чаще всего все заказы делаются через телефон, не всегда есть время смотреть сайт на экране компьютера. Сайт магазина Vzlate удобен, если его смотреть через монитор, но оказывается совершенно не комфортный, если делать заказ через мобильник.

Рис. 3.1. Сайт ювелирного интернет – магазина Vzlate.ru

Рис. 3.2. Мобильная версия сайта

Рассмотрев сайт с полноэкранного режима и с мобильного, я ставлю перед собой цель, сделать мобильную версию сайта удобной в использование. Нужно, чтобы не возникало проблем в выборе раздела, все было хорошо видно и кликабельно.

3.2. Техническое задание

Структура сайта. Сайт должен состоять из следующих разделов:

− Главная страница (на ней должны располагаться основные разделы каталога и статьи)

− Каталог (при переходе в интересующий раздел, должны быть фильтры и сортировка изделий)

− В нижней части должны располагаться кнопки для перехода в личный кабинет, корзину, понравшиеся товары и информация о магазине.

---