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

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

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

Продукты, особенно те, что построены на базе iOS — операционной системы Apple для мобильных устройств, больше не следуют хорошо известным и устоявшимся принципам дизайна, разработанного несколько десятилетий назад. Эти принципы, основанные как на экспериментальной науке, так и на здравом смысле, открыли мощь компьютерных технологий нескольким поколениям и создали «яблочной» продукции отменную репутацию за счет её понятности и простоты использования.

К сожалению, сейчас Apple постепенно отказывается от этих идей. Их дизайнерские руководства по iOS и Mac OS X все еще включают в себя подобные концепции, однако внутри корпорации многие из них вообще не практикуются. Apple сбились со своего пути, и теперь, акцентируя внимание на стиле и внешнем виде, они действуют в ущерб ценностям, которые когда-то были их главным козырем в борьбе с конкуренцией.

Apple уничтожают дизайн. Более того, своими действиями они вновь заставляют людей поверить в то, что хороший дизайн опирается лишь на красивую обертку. Но ведь это не так! Дизайн — это образ мышления: сперва вы определяете фундаментальные потребности вашей аудитории, а затем удовлетворяете их за счет продуктов и услуг. Эта дисциплина требует от разработчиков понимания людей, технологий, общества и бизнеса.

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

Apple, вы всегда были лидерами. Почему сейчас вы действуете столь эгоцентрично? Но что еще важнее, почему Google следует всем вашим худшим примерам?

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

Тем не менее, когда компания перешла на жестовые интерфейсы с появлением первого iPhone и планшетов, ее руководство намерено отказалось от многих ключевых принципов, которые соблюдались ранее. Больше никакой очевидности действий — нам остались лишь жалкие обрывки обратной связи. Почему? Apple совершили радикальный шаг в сторону визуальной простоты и элегантности, и тем самым нанесли серьезный удар по обучаемости, юзабилити и продуктивности своих решений.

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

Сегодняшние iPhone’ы и iPad’ы представляют собой целый трактат по визуальной простоте. Прекрасные шрифты. Чистый макет, свободный от посторонних слов, символов или меню. И неважно, что многие люди не могут прочитать текст. Зато он красивый.

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

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

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

От отмены отказались. И знаете, что случилось? Поступило множество жалоб, поэтому они вернули данную функцию в несколько ином формате: все, что вам нужно было сделать, чтобы отменить действие, это сильно потрясти телефон или планшет. Тем не менее, отмена так и не была реализована универсально, и узнать о ней можно было, только встряхнув девайс. Более того, в случае несрабатывания функции пользователи не знали, в чем состоит проблема: в том, что гаджет трясли недостаточно сильно, или в том, что отмена не была предусмотрена для этой конкретной ситуации.

На сенсорных экранах, особенно на относительно небольших устройствах, многое может пойти не так, когда к активной ссылке или кнопке случайно прикасаются. Эти случайные касания направляют пользователя к новому назначению. Стандартный, простой способ устранения подобных промашек заключается в наличии кнопки «назад»: в смартфонах, работающих на базе ОС Android, эта функция встроена как универсальный контроллер, который всегда доступен, однако Apple ее не задействует. Почему? Неизвестно. Возможно, они пытаются избежать применения кнопок или меню? В результате, они получают чистый и элегантный внешний вид, но эта визуальная простота обманчива, ибо она повышает сложность интерфейса.

Apple размещают стрелку «назад» в некоторых местах, но в отличие от Android’а, где она доступна повсеместно, их кнопки «отменить» и «назад» внедряются на усмотрение разработчика. Далеко не все, включая и Apple, реализуют эти возможности.

Как человек может узнать, в какую сторону ему нужно свайпить, сколько пальцев использовать и с какой частотой или продолжительностью касаться экрана при отсутствии каких-либо указателей на дисплее? Люди должны запомнить эти жесты, услышав о них от друга, «прочитав инструкцию» (которой нет) или обнаружив их совершенно случайным образом.

«Яблочная» продукция красива и привлекательна! Именно поэтому, сталкиваясь со сложностями, ее пользователи склонны винить себя. Это хорошо для Apple, но абсолютно нечестно по отношению к клиентам.

Хороший дизайн должен быть визуально заметным и приятным для использования. Однако приятность требует, чтобы устройство было понятным и удобным. Оно должно соблюдать базовые психологические принципы, которые приводят к чувству понимания, контроля и удовольствия. К ним относится ясность, фидбек, надлежащее отображение, соответствующее использование ограничений, и конечно же, возможность отменить свои действия. Эти элементарные концепции дизайна объясняются будущим UX-специалистам в первую очередь, и если бы Apple принимали участие в подобном обучении, они бы не справились.

Более привлекательный, но более сложный для использования

Чем может обернутся избежание правильной методологии дизайна? Более высокими затратами на обслуживание и поддержку. И в конечном итоге, «отступничеством» несчастных клиентов, которые могут в открытую восхвалять простой интерфейс Apple, но в то же время будут копить деньги на телефон другого бренда, в надежде на то, что им хватит ума распорядиться всеми его возможностями.

В данном случае, истории о бабушках и дедушках, которые не могли освоить компьютер, но теперь с легкостью пользуются такими технологическими девайсами, как планшеты, будут неуместны. Просто подумайте, в какой степени они освоили новые технологии? Да, жестовые устройства, планшеты и телефоны отличаются более низким порогом входа для изначального использования, но овладеть их продвинутыми функциями (к примеру, отправкой трех фотографий в одном email’e, форматированием определенного текста или комбинированием результатов нескольких разных операций) гораздо сложнее. Выполнять эти и многие другие действия на традиционных компьютерах можно намного проще и эффективнее.

Новое поколение программного обеспечения сделало гигантский скачок в сторону привлекательности и вычислительной мощности, и в то же время стало более сложным для использования.

Эта проблема не ограничивается компанией Apple. Google Maps также развиваются по такому же принципу и становятся все более запутанными с каждой итерацией. Тоже самое касается и Android’а. Операционная система Windows 8 от Microsoft отличается довольно грамотным дизайном для устройств, работающих на основе жестов, что решает множество описанных выше проблем, но она не может интегрировать другой стиль работы, необходимый для настольных компьютеров, которые предназначены для продуктивной работы.

Так в чем же проблема? В том, что дизайн создается во многих версиях точно так же, как и каждая дисциплина имеет несколько разновидностей. При создании софта ведущий программист не обязательно разбирается в интерактивном программировании, а kernel-девелопер может ничего не знать о телекоммуникационном кодинге. С другой стороны, дизайнеры взаимодействий, знакомые с психологией, знают принципы концептуальных моделей, ясности и понятности, тогда как для экспертов в области информатики это «темный лес». Вместе с тем, специалисты в сфере дизайна склонны думать, что под интерактивным дизайном подразумеваются веб-сайты, и они часто не понимают тонкостей программирования и человеко-компьютерного взаимодействия.

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

Что пошло не так?

Один из партнеров Nielsen Norman Group, Брюс Тогназини (Bruce Tognazzini), работал со Стивом Джобсом (Steve Jobs) на заре Apple. Эксперт в области юзабилити (Donald Norman) присоединился к компании вскоре после того, как Джобс ушел, а затем покинул ее после возвращения Стива в 1996 году. Они не стали свидетелями перехода от простых для использования и понятных продуктов (когда Apple действительно могли похвастаться тем, что в инструкции не было необходимости) к нынешнем устройствам, которые не сопровождаются руководствами, но все же часто в них нуждаются.

По их словам, до возвращения Джобса Apple подходили к разработке продуктов с мыслью о трех факторах — пользовательском опыте, инженерии и маркетинге — каждый из которых был задействован в дизайнерском цикле с самого первого дня до момента отправки товара.

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

Apple намерено скрывает сложность своей продукции, утаивая или даже удаляя важные элементы управления. Казалось бы, что может быть проще, чем однокнопочный контроллер? Да, это весьма простое решение, но с одной кнопкой ваши возможности использования системы крайне ограничены, если только в ней не предусмотрены определенные режимы. С их помощью вы можете задавать управлению различные значения в разное время, однако это сбивает пользователей с толку и приводит к ошибкам.

В качестве альтернативы, один контроллер может иметь несколько скрытых функций, благодаря чему кнопка (или сенсорный экран) способна выполнять разные операции при одинарном, двойном или тройном нажатии, при касании одним, двумя или тремя пальцами. Или, возможно, при использовании заданного количества пальцев, заданное количество раз, в заданном направлении: просто откройте панель «Системные настройки» в Macintosh’e и изучите варианты выбора (и различия) в значениях касаний и жестов на мышке Apple или трекпаде.

Простой внешний вид может сделать управление более сложным, более произвольным, требующим запоминания и уязвимым к различным ошибкам. На самом деле в первые дни компьютеров Lisa и Macintosh компания Apple руководствовалась лозунгом «Никаких режимов» (No Modes). Единственный способ отказаться от модов заключается в использовании специальных контроллеров, каждый из которых должен всегда выполнять одну и ту же задачу.

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

Все современные компьютерные компании выпускают руководства по пользовательскому интерфейсу для своих девелоперов. Apple были первыми, кто создал такую инструкцию, и она служила прекрасным описанием для принципов хорошего, понятного дизайна. Самое раннее издание Apple Human Interface Guidelines было написано в 1978 году Брюсом Тогназини. К моменту его выхода 1987 года, а оно создавалось в течение двух лет (1985-1986), все ключевые принципы современных интерфейсов были инкорпорированы. Когда Стив Джобс вернулся в компанию в 1996 году, они все еще соблюдались.

Тот полный набор концепций Apple был результатом проекта Тогназини, который изучал основные принципы интерфейса их Macintosh’а. До этого они были известны лишь узкому кругу людей, занимающихся разработкой UI. Благодаря написанию данного руководства, готовить новых сотрудников стало намного проще, а количество девелоперов для продуктов Macintosh начало существенно расти.

При создании принципов команда в значительной степени полагалась на исследование, проведенное только что сформированным сообществом человеко-компьютерного взаимодействия (ЧКВ). Основное внимание уделялось работе Дональда Нормана и его студентов в Калифорнийском университете в Сан-Диего, которая публиковалась в докладах ЧКВ конференций в начале 1980-х и в книге под названием «Ориентированный на пользователя системный дизайн» (User Centered System Design), отредактированной Норманом и Стефеном Дрейпером (Stephen Draper) в 1986 году.

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

В современном руководстве по интерфейсу iOS от Apple для разработчиков действительно изложено множество релевантных принципов, но акцент здесь все равно делается на простоте (в частности, на видимости простоты), а также на удовлетворенности пользователя и удовольствии в целом. Эти атрибуты играют важную роль, но далеко не решающую.

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

Это действительно хорошая идея. Вы должны проводить тесты с участием людей, которые представляют вашу ожидаемую покупательскую аудиторию, а не с несколькими коллегами, как предполагает Apple.

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

Эта таблица описывает эволюцию руководств по пользовательскому интерфейсу Apple с 1995 года до 2015. Поскольку жестовые устройства используют операционную систему iOS, принципы, касающиеся ее, расположены слева от гайдлайнов 2015 года для более традиционной OS X.

Как видите, воспринимаемая стабильность и безрежимность исчезли где-то после 2008 года. Снисходительность (forgiveness) и ментальные модели потерялись при переходе на iOS, вместе с оценкой явных и ожидаемых действий. See-and-Point («Смотри-и-Указывай») убрали из руководств по iOS в конце 2010 года, с появлением iOS 4. Еще в 1995 году эстетическая целостность (aesthetic integrity) была одним из наименее важных факторов, но в 2015 она имеет решающее значение. Наряду с этим, метафоры и пользовательское управление утратили несколько позиций и скатились вниз.

Недостающие принципы

Наиболее важными принципами, которые полностью или частично проигнорированы в iOS, являются ясность, фидбек, восстановление, согласованность и поощрение роста:

Ясность

Ясность, или возможность взглянуть на систему и мгновенно обнаружить все предложенные действия, всегда была ключевым элементом успеха дизайна Apple. На ранних этапах этот принцип был назван «see and point», так как все доступные операции были представлены в виде кнопок, иконок или пунктов меню, заметных для пользователя: вы видите действие, которое хотите совершить, наводите курсор на соответствующий объект и кликаете по нему один раз.

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

Фидбек

Фидбек и его «друг» предуправление (feedforward) позволяют человеку узнать, что произошло после выполненного действия или понять, что произойдет, если действие будет выбрано.

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

Восстановление

Ошибки случаются. Принцип восстановления гласит, что отменить операцию должно быть также легко, как и выполнить ее. Именуемый снисходительностью, он также исчез из нынешних руководств и размещенной выше таблицы. Восстановление было реализовано при помощи кнопки «отменить», которая была придумана в 1974 году в Xerox Corporation"s Palo Alto Research Center (PARC), вероятно, Уорреном Тейтельманом (Warren Teitelman). Как известно, компьютеры Lisa и Macintosh позаимствовали свои базовые структуры в ранних разработках PARC (Apple купили права у Xerox).

Команду отмены можно аннулировать с помощью кнопки «Повторить». Отмена и повтор помогают людям не только исправлять собственные просчеты, но и экспериментировать с новыми вещами более свободно.

Отмена позволяла пользователям восстанавливать контент, а кнопка «назад» представляла собой вспомогательную команду, за счет которой они могли вернуться к предыдущей локации навигационной системы. Оригинальные графические интерфейсы избавили людей от потребности в резервном копировании, исключив навигацию. Вместо этого до пользователей доносились все документы и инструменты. Браузеры и iOS являются пережитком ранних навигационных интерфейсов, где люди блуждали по лабиринту переходов, ведущих к модальным экранам.

Браузеры, поддерживающие навигационную систему Интернета, предоставляют кнопку «назад», чтобы пользователи могли возвращаться к пройденным этапам своего путешествия. В iOS такой обобщенный инструмент не предусмотрен, поэтому если вы, к примеру, случайно кликните по ссылке внутри приложения, она направит вас в Safari или на Youtube, или в любое другое место, не обеспечив вам никаких путей отхода. Кнопки «назад» и «вперед» должны быть стандартными в iOS, чтобы интерфейс прощал людям случайные переходы, а не наказывал их за это.

Согласованность

Большинство современных пользователей имеют несколько девайсов, но операции этих различных гаджетов часто пересекаются. Даже в пределах одного устройства Apple умудрились нарушить согласованность: поверните iPhone, и макет клавиатуры изменится, поверните iPad, и иконки на главном экране перестроятся непредсказуемым образом.

Согласованность все еще числится в руководствах, но этот принцип практически не соблюдается. Magic Mouse работает не так, как трекпад, а его управление в свою очередь отличается от жестов, применяемых в iPhone или планшете. Почему? Такие противоречия обычно прослеживаются, когда дизайнеры работают в изоляции, не обмениваясь идеями со своими коллегами.

Поощрение роста

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

Вступление

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

В этом уроке мы сделаем галерею - слайдшоу "а ля" Apple. Примерно такая же используется на сайте Apple для представления продуктов компании. Для создания нам не понадобится PHP или база данных.

ШАГ 1 - XHTML

Давайте подробнее взглянем на XHTML разметку:

• 
• 
• 

Идея очень проста - существует два главных контейнера DIV - один с id=”menu” содержит миниатюры, второй “slides” содержит непосредственно слайды.

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

Вы также можете вставлять любой HTML-код. К примеру, Вы можете сделать определенный слайд ссылкой в виде картинке.

Очень важно, чтобы у слайдов были прописаны высота и ширина - они используется jQuery для определения зоны прокрутки.

Также обратите внимание на элементы миниатюр LI. Первому присвоен класс fbar для отображения вертикальной разделяющей полосы. Другим элемента присвоен класс menuItem - и они используются в качестве кнопок управления слайдшоу.

Давайте перейдем к следующему шагу.

Шаг 2 - CSS

Давай взглянем на нашу таблицу стилей.

Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* Page reset */ margin:0px; padding:0px; } body{ /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; } /* Gallery styles */ #gallery{ /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; /* The width of the gallery */ width:920px; overflow:hidden; } #slides{ /* This is the slide area */ height:400px; /* jQuery changes the width later on to the sum of the widths of all the slides. */ width:920px; overflow:hidden; } .slide{ float:left; } #menu{ /* This is the container for the thumbnails */ height:45px; } ul{ margin:0px; padding:0px; } li{ /* Every thumbnail is a li element */ width:60px; display:inline-block; list-style:none; height:45px; overflow:hidden; } li.inact:hover{ /* The inactive state, highlighted on mouse over */ background:url(img/pic_bg.png) repeat; } li.act,li.act:hover{ /* The active state of the thumb */ background:url(img/active_bg.png) no-repeat; } li.act a{ cursor:default; } .fbar{ /* The left-most vertical bar, next to the first thumbnail */ width:2px; background:url(img/divider.png) no-repeat right; } li a{ display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px; } a img{ border:none; }

В этой таблице стилей мы использовали несколько CSS3-свойств:

* box-shadow, по углам галереи небольшая тень. Использование этого свойства - необходимо предоставить координаты X и Y (0 0 here), размывание (3px в нашем примере) и цвет тени;
* border-radius, круглые границы снизу галереи.

К сожалению, эти свойства работают только в Safari, Chrome и Firefox на данный момент.

Теперь пришло время магииjQuery.

ШАГ 3 - jQuery

Нам понадобится следующий код:

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

var totWidth=0;
var positions = new Array();

$("#slides .slide").each(function(i){
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();

/* The positions array contains each slide"s commulutative offset from the left part of the container */

if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});

$("#slides").width(totWidth);

/* Change the cotnainer div"s width to the exact width of all the slides combined */

$("#menu ul li a").click(function(e){

/* On a thumbnail click */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");

var pos = $(this).parent().prevAll(".menuItem").length;

$("#slides").stop().animate({marginLeft:-positions+"px"},450);
/* Start the sliding animation */

e.preventDefault();
/* Prevent the default action of the link */
});

$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* On page load, mark the first thumbnail as active */
});

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

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

Всего 40 строк кода и наша слайдшоу - галерея готова!

Заключение

Всего три шага нам понадобилось для создания супер красивой галереи в стиле Apple. Она способна украсить любой сайт.

Яблоковский дизайн всегда был весьма популярен среди моих клиентов. Когда дело доходит до оформления, мне часто говорят: «нужен простой дизайн со светло-серым фоном» и приводят в пример apple.com

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

Итак выкладываю кнопки на чистом CSS:

Apple-button { cursor : pointer ; padding : 3px 10px; text-decoration : none ; color : #fff ; font-size : 13px; text-shadow : 0 -1px 1px rgba(0 , 0 , 0 , .3) ; background-image :-webkit-linear- gradient(#52A8E8 , #377 AD0 #377 AD0 , #52A8E8 ) ; background-image : -o-linear-gradient(rgb (82 , 168 , 232 ) , rgb (55 , 122 , 208 ) ) ; background-color : #52A8E8 ; -moz-border-radius : 23px; -webkit-border-radius : 23px; border-radius : 23px; border : 1px solid #205 59A ; box-shadow : 0 1px 2px rgba(0 , 0 , 0 , .5) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; } .apple-button :hover , .apple-button :focus { background-image :-webkit-linear- gradient(#54A1D8 , #196 7CA ) ; background-image :-moz-linear- gradient(0 % 100 % 90deg, #196 7CA , #54A1D8 ) ; background-image : -o-linear-gradient(rgb (84 , 161 , 216 ) , rgb (25 , 103 , 202 ) ) ; background-color : #52A8E8 ; box-shadow: 0 1px 0 rgba(255 , 255 , 255 , .6) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; } .apple-button :active { background-color : #2D7CD1 ; box-shadow : 0 1px 1px rgba(255 , 255 , 255 , .5) , inset 0 2px 5px rgba(0 , 0 , 100 , .5) ; }

Демо: живой пример (попробуйте навести на него курсор и понажимать)

Пару слов о кроссбраузерности. Так как мы использовали CSS-свойство gradient, то могут возникнуть некоторые проблемы при отображении в старых версиях браузера Opera, ну и box-shadow — это свойство CSS 3.

Миша

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

Сам же я впервые познакомился с WordPress в 2009 году. Организатор . Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce - . Я и моя команда сделаем вам всё на лучшем уровне.

Здравствуйте, уважаемые читатели a! Веб-дизайн и веб-разработка очень быстро развиваются. Мы каждый день видим все больше и больше новинок, будь то приложения или новые сервисы, которые делают нашу жизнь в сети более продуктивной и удобной. А веб-дизайн это просто безграничное пространство, ограниченное только талантом и умениями «художника» (дизайнера). Так вот, поговорим же мы сегодня о LESS — динамическом языке стилевой разметки, который упростит написание стилей CSS.

Что такое LESS?

LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS коде. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.

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

LESS существенно облегчает написание стилей. Например, применяя примешивания (mixins), мы создаем что-то на подобии функций, которые могут принимать аргументы. Mixins — позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.

1 2 3 4 5 6 7 8 9 10 11

Rounded-corners (@radius : 5px ) { border-radius : @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px ) ; }

А скомпилированный CSS будет выглядеть так:

1 2 3 4 5 6 7 8 9 10

#header { border-radius : 5px ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; } #footer { border-radius : 10px ; -webkit-border-radius: 10px ; -moz-border-radius: 10px ; }

Загружаем библиотеку prefix-free.js и подцепляем ее к index.html:

< script src= "prefix-free.js" type= "text/javascript" >

На этом с подготовкой закончим и перейдем непосредственно к созданию меню в стиле Apple.com

Разметка HTML

Разметка меню довольно проста. Меню сделано на основе не упорядоченного списка. Открываем HTML-редактор и вставляем такой вот код:

1 2 3 4 5 6 7 8 9

Главная Новости Уроки Скачать Контакты

LESS стили

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

Давайте рассмотрим из каких составных частей будет состоять меню:

Как мы можем видеть на скриншоте выше, навигация Apple.com имеет следующие 6 основных частей:

• Используется тень;
• Граница;
• Разделитель между пунктами меню;
• Градиент для фона;
• Эффект затемнения при наведении мыши;
• Текст меню.

Использовать написанные стили можно двумя способами:

• Crunch

Важно: при использовании первого способа чтобы подключение styles.less происходило до подключения библиотеки less.js ! Также остается не забыть подключить prefix-free .
Таким образом подключение стилей выглядит так:

1 2 3 4 5

Определение переменной базового цвета

Будем использовать 2 файла: config.less в нем определим все переменные, примешивания и тд., после чего импортируем его во второй (styles.less ) в котором уже сформируем стили для элементов меню.

Сейчас разберем код в config.less . Определим базовый цвет меню с помощью переменных. Переменная в LESS объявляется с помощью символа @ .

В приведенном выше коде я не включил префикс для box-shadow , библиотека prefix-free автоматически добавит его. Кроме того, цвет тени наследуется от цвета переменной @theme .

Определим стиль для границ меню используя mixins с параметром

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

1 2 3 4

Border(@radius : 3px ) { border-radius : @radius; border : 1px solid @theme - #050505 ; }

В приведенном выше примере, мы установили закругление по умолчанию @radius в 3 пикселя и, как мы уже говорили, это значение может быть изменено.

Определим градиент, разделитель и стиль при наведении мыши с помощью операций

В LESS с помощью операций можно увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами, чтобы получить желаемый результат. Давайте взглянем на следующий код, который задает свойства для разделителя в меню:

1 2 3 4 5

Divider { border-style : solid ; border-width : 0 1px 0 1px ; border-color : transparent @theme - #111 transparent @theme + #333 ; }

В приведенном выше примере мы вычитаем из переменной @theme цвет #111 , таким образом, левая часть разделителя будет немного темнее чем базовый цвет, а правая светлее. Вот такие манипуляции мы можем делать с HEX-цветом.

Для большей понятности манипуляций с цветом, давайте рассмотрим цветовую схему:

Максимальная темный цвет #000 (черный), а максимальный светлый цвет #FFF (белый) и базовый цвет #555 . Таким образом, если мы хотим получить цвет на три уровня темнее, то вычитаем #333 .

Теперь стили градиента:

1 2 3 4 5 6

Gradient { background : linear-gradient(to bottom , @theme + #252525 0% , @theme + #171717 50% , @theme - #010101 51% , @theme + #151515 100% ) ; } .hovereffect { background : linear-gradient(to bottom , @theme - #010101 0% , @theme - #121212 50% , @theme - #222222 51% , @theme - #050505 100% ) ; }

Определения стиля текста меню на примесях (mixins) с предохранителями

Мы планируем использовать 2 цвета текста и цвета теней текста. Один вариант используется если фон меню будет светлым то цвет текста темный и наоборот.

Во-первых, если цвет текста на имеет яркость равную или больше чем 50%, то тень должна потемнеть, в данном случае принять цвет #000000 .

На этом этапе заканчиваем создание файла config.less и переходим к созданию файла styles.less

Импорт config.less

Давайте создадим файл с названием styles.less и первым делом прицепим к нему уже созданный config.less , следующим способом:

На данный момент результат нашей работы выглядит так.

Пока не очень привлекательно. Но все еще впереди.

Основной стиль для меню с вложенными правилами

В LESS мы можем вкладывать стили какого-либо элемента, непосредственно в стиль родителя.Навигационные тег nav спецификация HTML5, который содержит все необходимые элементы для навигации. Вот его стили:

1 2 3 4 5 6 7

nav { margin : 50px auto 0 ; width : 788px ; height : 45px ; .border; .shadow; }

Обратите внимание, что вместо того, чтобы писать кучу правил CSS, определили только высоту, ширину и отступы. В то время как границу и ее стиль, а также тень мы подцепляем с помощью примешивания (mixins), указываем имя класса .border и .shadow и к классу nav добавляются правила этих классов, которые мы писали в файле config.less .

1 2 3 4 5 6

nav { ... } nav ul { ... }

Однако в LESS наследование происходит иначе, пойму проще и логичней:

1 2 3 4 5 6 7 8 9 10 11

nav { margin : 50px auto 0 ; width : 788px ; height : 45px ; .border; .shadow; ul { padding : 0 ; margin : 0 ; } }

Как видно на картинке, элементы списка li расположены вертикально, а нам надо чтобы они располагались горизонтально. Для этого зададим свойство display:inline;

1 2 3 4 5 6 7 8 9 10 11 12 13 14

nav { margin : 50px auto 0 ; width : 788px ; height : 45px ; .border; .shadow; ul { padding : 0 ; margin : 0 ; li { display : inline ; } } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

nav { margin : 50px auto 0 ; width : 788px ; height : 45px ; .border; .shadow; ul { padding : 0 ; margin : 0 ; li { display : inline ; a { text-decoration : none ; display : inline-block ; float : left ; width : 156px ; height : 45px ; text-align : center ; line-height : 300% ; .textcolor(#f2f2f2 ) ; .divider; .gradient; } } } }

В приведенном выше примере мы применяем шестнадцатеричный цвет #f2f2f2 , этот цвет имеет яркость более 50%, поэтому тень будет установлена автоматически черным цветом. Остальная часть кода я уверен, вполне очевидна.

li {
display : inline ;
a {
text-decoration : none ;
display : inline-block ;
float : left ;
width : 156px ;
height : 45px ;
text-align : center ;
line-height : 300% ;

.divider;
.gradient;
}
}
li: first-child a {
border-left : none ;
}
li: 50px auto 0 ;
width : 788px ;
height : 45px ;
.border;
.shadow;
ul {
padding : 0 ;
margin : 0 ;
li {
display : inline ;
a {
text-decoration : none ;
display : inline-block ;
float : left ;
width : 156px ;
height : 45px ;
text-align : center ;
line-height : 300% ;
.textcolor(#f2f2f2 ) ; // You can change this line
.divider;
.gradient;
&: hover {
.hovereffect;
}
}
}
li: first-child a {
border-left : none ;
}
li: last-child a {
border-right : none ;
}
}
}

Компилируем LESS в CSS

Ну вот и все, написание apple.com на этом можно завершить. Остается решить каким способом мы будем присоединять написанные стили к веб-странице. Как я уже упоминал выше, использовать написанные стили можно двумя способами:

• подключить styles.less и библиотеку less.js ;
• либо скомпилировать styles.less в программе Crunch и уже присоединить к странице обычный styles.css

Конечно более второй вариант лучше, зачем присоединять 2 файла и выполнять двойную работу на стороне клиента, поэтому скомпилируем написанные стили LESS в обычный статический CSS.

Для этого надо нажать на большую кнопку Crunch It ! И сохранить обычный styles.css

На этом, урок завершаю.

P.S.: Такое простое меню сможет сделать каждый, но если вам нужен по настоящему крутой сайт с красивыми эффектами, то могу порекомендовать вам одну из лучших веб студий Украины . Ребята смогут сделать вам действительно уникальный дизайн, выполнить поисковую оптимизацию и раскрутить ваш сайт!

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

Не знаете, каким должен быть такой сайт? Не волнуйтесь, сейчас мы все объясним и расскажем, как действовать. Если вы воспользуетесь нашими советами, то вам больше не придется горестно вздыхать, глядя на сайты Apple, Nike или L’Oreal, потому что ваш собственный будет ничуть не хуже. Итак, вот несколько рекомендаций по созданию солидного, профессионального сайта.

Следите за трендами в веб-дизайне

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

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

Думаем, на данном этапе вам не помешает походить по сайтам для дизайнеров и хорошенько вдохновиться. Наши рекомендации: журнал Web Inspiration , блог Lopart и дизайн-журнал Дежурка ; если английский язык для вас не помеха, читайте Vandelay Design , Smashing Magazine и Webdesign Depot .

*Не понимаете, что означают все эти слова? Значит, вам нужно прочитать нашу .

Займитесь брендингом

У больших компаний узнаваемый фирменный стиль и очень четкое позиционирование. Они используют строго определенные шрифты, цвета и слоганы. Вы безошибочно узнаете красный логотип «Кока-Колы», будь он на сайте, бутылках или рекламных щитах, развешанных вдоль улицы.

Ну и что, что ваша компания не такая большая, как «Кока-Кола»? Это не означает, что вам не нужно заниматься брендингом. Продуманный фирменный стиль - это важно. Благодаря ему люди смогут быстро опознать ваш продукт, а там уже рукой подать до покупки. Поэтому нарисуйте симпатичный логотип, придумайте слоган, выберите фирменные шрифты, цвета и оформите страницы в соцсетях соответствующим образом. Больше советов - в нашей статье о том, .

Лучше меньше

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

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

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

Покажите продукт на главной странице

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

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

Сделайте хорошую навигацию

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

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

Хотите показать, что ваша компания - отзывчивая и дружелюбная? Добавьте приложение «Живой чат Tidio », чтобы отвечать на вопросы в реальном времени. Можно установить его на смартфон и не сидеть целый день за компьютером, а ходить по делам и быть при этом на связи.

Покажите, что люди вам доверяют

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

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

Сделайте мобильную версию сайта

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

Не забывайте про социальные сети

Обратите внимание на то, как старшие и более опытные коллеги ведут свои страницы в соцсетях. Да, для более полного охвата аудитории вам нужен и сайт, и страницы в Фейсбуке, «Вконтакте», Инстаграме и т.д. Соцсети идеально подходят для того, чтобы публиковать новости, писать про продукт и отвечать на вопросы. Важно не просто рассказывать о работе, а формировать имидж и выстраивать нормальные, доверительные отношения. Если вы не очень представляете, что нужно делать, прочитайте статью о и выполните все наши рекомендации.

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

Готовы встать в один ряд с большими брендами? сами на Wix - это просто и бесплатно!