Когда-то давным-давно компания 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!». По их мнению, такой ответ должен дать исполнителю исчерпывающую информацию, сходу расставить все точки над «i» и исключить какую-либо неоднозначность. Но на деле всё, конечно, сложнее. Ведь впечатлить человека в стилистике Apple может что угодно — презентация нового планшета, простая белая коробка iPhone или сам сайт Apple. И ведь самое обидное, вполне вероятно, говоря «сделайте в стиле Apple», сам клиент попросту не знает, что это значит на самом деле. Как же быть несчастному исполнителю, который, возможно, просто не догадывается, чего от него в итоге ждут?
Попробуем разобраться!
Принцип AppleВ основе подхода компании Apple лежит очень простой принцип — нельзя сделать по-настоящему качественный продукт, не взяв на себя все участки работы над ним. Всё необходимо выполнить на самом высоком уровне. При выпуске нового телефона нельзя надеяться на феноменальное качество его экрана и низкую цену, если в его аляповатом корпусе мелькают щели, а рекламный слоган на огромном рекламном щите написан с ошибками.
«Ну, сэкономили на копирайтинге — мы же не тексты продаем, а телефон», — подумает большинство.
Но в том-то вся штука! С точки зрения Apple, опыт владения их продукцией появляется ещё до того, как вы выложили за какой-нибудь iPod свои кровные, а потому малозначительных элементов в этой цепи нет. Это не только технология, не только упаковка, но и реклама, и витрина, и веб-сайт, и тексты на сайте. Незначительных элементов здесь нет. А «упаковка сама по себе может рассказать целую историю». Соответственно, первое, что стоит уяснить о «стиле Apple» — это скрупулезное внимание ко всем участкам работы.
Второй важно особенностью продукции Apple является элегантная простота. Она у Apple играет очень важную роль.
«Почему мы считаем, что простота — это хорошо? Потому что когда мы имеем дело с предметами, нам важно чувствовать, что мы управляем ими».
Ну а третьей критически важной особенностью являются детали. Все те мелочи, которых вы не замечаете, но которые создают тот будничный комфорт от использования продуктов Apple — анимации переходов, звуки, щелчок, который вы слышите, регулируя громкость, чувство плавности, с которым вы пролистываете страницу и многое-многое другое.
Но всё, что я пока что описывал, касалось всё же продукции. А в нашем изначальном примере речь шла о создании веб-сайта. Как же применить эти подходы в веб-дизайне? Чтобы ответить на этот вопрос, давайте-ка взглянем на веб-сайт Apple и попытаемся понять, какие стилистические приёмы использованы в нём.
Подходы Фотографии и иллюстрацииПервое, что бросается в глаза при посещении сайта Apple, — качественные фотографии продуктов. По правде говоря, я считаю, что эти фотографии берут на себя половину работы по вызову протяжного «Вау!» у посетителя. Все они крупные, яркие, выполнены в одном стиле и позволяют рассмотреть все детали.
Та самая магия фотографий. По словам некоторых — «обычный брусок со скругленными углами», но на таких фотографиях он вызывает восхищение.
Следующим пунктом у нас будет идти воздушность — всем элементам на странице очень комфортно и свободно, белый фон области контента придает ощущение легкости. А чтобы не возникало впечатления, что вся страница рассыпается — ее собирает светло-серый фон с легкой рамкой.
ШрифтыНа сайте Apple используется всего две гарнитуры Adobe Myriad для заголовков и стандартный шрифт системы MacOS X — Lucida Grande. Обе гарнитуры — строгие и современные рубленые шрифты, которые только поддерживают общий минималистичный стиль. Что характерно, стремление к высокому качеству присутствует и здесь — из-за желания, чтобы большие заголовки на сайте выглядели гарантированно красиво в любых условиях, Apple использует для надписей изображения, а не текст.
Трепетному отношению к шрифтам в Apple тоже обязаны Стиву Джобсу — уже после того, как он ушел из колледжа, он посещал различные курсы, в том числе — курс лекций по каллиграфии.
Скругленные углыТакже на сайте присутствуют знаменитые (куда уж без них!) скругленные углы. Они буквально повсюду! Чего греха таить — иногда кажется, что iPhone был придуман только для того, чтобы продолжить традицию использования скругленных уголков.
Скругленные уголки везде — в корпусе телефона, иконках приложений и даже на кнопке «Home».
Следующий пункт — тоже знаменитые эффекты бликов и градиентов Aqua. За последнее время их количество на сайте заметно уменьшилось. Часто они используются, чтобы сделать акцент на каком-нибудь отдельном элементе.
Главное меню на сайте Apple. Дань уважения знаменитому стилю Aqua — после отставки Скотта Форстолла минимализм все больше преобладает на скеоморфизмом и карамельными эффектами.
КонтентНе меньше внимания Apple уделили и наполнению сайта, тексту и его подаче. Интересной особенностью можно посчитать отсутствие столь любимого многими раздела «О компании», потому что главными на этом сайте являются продукты.
Современные эффектыВсе чаще на сайте начинают использовать анимацию или другие подобные эффекты — они добавляют динамики, показывают преимущества в новом свете или помогают понять принцип работы какой-нибудь детали.
И это все?Очевидно, что такой подход нельзя использовать для всех сайтов без разбора. Ему самое место в презентационных или промосайтах. А самое главное — нельзя повторить стиль, руководствуясь лишь визуальными ориентирами. Сайт — это целостный, законченный продукт, каждый этап создания которого должен выполняться на высоком уровне, с любовью и идеей.
Недостаточная проработка всего лишь одного из этапов моментально разрушит хрупкую магию «стиля Apple».
Использование приемов, описанных выше, поможет вам сделать красивый, аккуратный и современный дизайн, но не освободит от остальных этапов создания — написания грамотных текстов и использования их в нужных количествах, создания видео-презентаций и высококачественных фотографий.
Великий Стив Джобс
, чье имя сегодня не сходит с уст как поклонников продукции Apple
, так и ее противников, стал новатором, настоящим революционером, изменившим мир персональных компьютеров и телекоммуникаций к лучшему. Созданные им устройства считаются культовыми, а логотип в виде надкушенного яблока - легендарным. Поэтому неудивительно, что дизайнеры и изобретатели по всему миру вдохновляются "яблочным лого" и создают самые разные устройства и аксессуары в этом стиле, украшают яблоками свои тела и прически, не говоря уже о миллионах юмористических iШтук в стиле Apple logo
. Сегодняшний обзор посвящен самым интересным решениям, способным порадовать любого Apple-фаната.
Разумеется, первые в нашем списке - гаджеты, выполненные хоть и не по образу и подобию iPhone или iPad, но в виде знаменитого "яблочного" логотипа. Здесь и усыпанные стразами флешки в виде Apple logo, и деревянные колонки в виде маленьких яблочек, и даже зарядное устройство для Apple-техники в виде все того же надкушенного фрукта.
Украшения в виде логотипа Apple
Чтобы порадовать девушек, фанаток iPhone и iPad, не обязательно дарить им чехлы или аксессуары для любимой техники. Можно обойтись украшениями и аксессуарами для самой девушки. Индустрия, производящая разнообразные вещи в Apple-style, позаботилась о том, чтобы в ассортименте были серьги и кулоны, браслеты и брошки в виде знаменитого яблока с надкушенным боком.
Кстати, эта индустрия позаботилась и о мужских аксессуарах в Apple-style.
Мебель в виде логотипа Apple
Впрочем, настоящему Apple-фану мало украсить себя и свою девушку соответствующими аксессуарами. В квартиру тоже нужно добавить "яблочной" эстетики. Как вам нравится, к примеру, этот стол? На нем будет отлично смотреться какой-нибудь MacBook или iPad.
Еда в виде логотипа Apple
Ну и, разумеется, "съедобный" логотип фанаты просто обязаны были обыграть в продуктовом ключе! Трудно представить себе лого, более подходящее для того, чтобы выпекать торты и пирожные, кексы и пудинги в его форме. Отличный подарок Apple-фану ко дню рождения, дню свадьбы, да и в любой другой, непраздничный день.
Дизайнерский креатив на тему Apple
Сногсшибательной популярности, которой пользуется продукция , можно только позавидовать. Хотя, можно ею вдохновляться, чтобы творить свое собственное творчество, взяв за основу знаменитый логотип в виде надкушенного яблочка. Ну или же стать юмористическим подражателем, выдумывая всевозможные фейковые iШтуки, вроде тех, которые представлены в этом разделе.Apple logo в современном искусстве
Продолжая тему дизайнерского креатива с логотипом компании Apple, нельзя не вспомнить о необычных произведениях искусства, чье вдохновение связано с яблоками. Так, к примеру, в Японии ученые придумали, как выращивать яблоки с "татуировками" в виде логотипа Apple и "яблочной" продукции, что наверняка порадует настоящих фанатов не только Apple, но и яблока как сочного фрукта.
А мастера компьютерной графики используют это вдохновение для создания о коллажей, рисунков и фотоарта.
Настольный сувенир, статуэтка в виде Стива Джобса
Веб-дизайн в стиле Apple развивался и эволюционировал на протяжении нескольких лет, начиная с 1996 года. Как следует из названия, идея дизайна принадлежит корпорации Apple: в таком стиле оформлялся сайт и интерфейсы продуктов. Дизайн сайта в стиле Apple приобрел широкую популярность благодаря минималистичности и акцентуации внимания пользователя на конкретном продукте.
Характерные особенности дизайна сайта в стиле AppleВ стиле Apple - идеальный способ презентовать товар или услугу. Такой стиль часто используют при оформлении интернет-магазинов, промо-сайтов, посвященных любому виду продукции: от обучающих курсов до продажи недвижимости.
Вот так выглядит дизайн в стиле Apple для сайтов, посвященных программному обеспечению:
- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/
Для оформления этих сайтов использованы характерные цвета стиля - серый, черный, белый. Благодаря этому навигационное меню практически незаметно. Внимание пользователя приковано к продукту, презентованному ярким, красочным изображением. С помощью контрастов выделены кнопки для скачивания, покупки. Контент подан кратко, структурировано, в сопровождении иконок и изображений. Дизайн объемный, присутствуют зеркальные эффекты, тень.
Не подойдет Apple-стиль для информационных порталов, блогов, портфолио, а также сайтов, посвященных творчеству.
Здравствуйте, уважаемые читатели a! Веб-дизайн и веб-разработка очень быстро развиваются. Мы каждый день видим все больше и больше новинок, будь то приложения или новые сервисы, которые делают нашу жизнь в сети более продуктивной и удобной. А веб-дизайн это просто безграничное пространство, ограниченное только талантом и умениями «художника» (дизайнера). Так вот, поговорим же мы сегодня о LESS
— динамическом языке стилевой разметки, который упростит написание стилей CSS.
LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS коде. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в . Он вводит переменные, операции, элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.
LESS существенно облегчает написание стилей. Например, применяя примешивания (mixins), мы создаем что-то на подобии функций, которые могут принимать аргументы. Mixins — позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.
1 | Rounded-corners
(@radius
:
5px
)
{
|
А скомпилированный CSS будет выглядеть так:
1 | #header
{
|
Загружаем библиотеку prefix-free.js и подцепляем ее к index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
На этом с подготовкой закончим и перейдем непосредственно к созданию меню в стиле Apple.com
Разметка HTMLРазметка меню довольно проста. Меню сделано на основе не упорядоченного списка. Открываем HTML-редактор и вставляем такой вот код:
1 |
В этом разделе мы начнем написание кода меню на LESS языке. Для тех, кто новичок в программировании, как в написание так и в синтаксисе LESS, не волнуйтесь, постараюсь разложить все по полочкам, чтобы было понятно. Возможно даже кому-то такой способ написания стилей для сайта понравится, ведь он действительно более продуктивный.
Давайте рассмотрим из каких составных частей будет состоять меню:
Как мы можем видеть на скриншоте выше, навигация Apple.com имеет следующие 6 основных частей:
- Используется тень;
- Граница;
- Разделитель между пунктами меню;
- Градиент для фона;
- Эффект затемнения при наведении мыши;
- Текст меню.
Использовать написанные стили можно двумя способами:
- Crunch
Важно:
при использовании первого способа чтобы подключение styles.less
происходило до подключения библиотеки less.js
! Также остается не забыть подключить prefix-free
.
Таким образом подключение стилей выглядит так:
1 |
|
Будем использовать 2 файла: config.less в нем определим все переменные, примешивания и тд., после чего импортируем его во второй (styles.less ) в котором уже сформируем стили для элементов меню.
Сейчас разберем код в config.less . Определим базовый цвет меню с помощью переменных. Переменная в LESS объявляется с помощью символа @ .
В приведенном выше коде я не включил префикс для box-shadow , библиотека prefix-free автоматически добавит его. Кроме того, цвет тени наследуется от цвета переменной @theme .
Определим стиль для границ меню используя mixins с параметромДля нашего меню понадобится граница с закругленными углами. Mixins с параметром — на самом деле имеет такую же функциональность как и простое примешивание, единственным отличием является то, что он также имеет изменяемый параметр.
1 | Border(@radius
:
3px
)
{
|
В приведенном выше примере, мы установили закругление по умолчанию @radius в 3 пикселя и, как мы уже говорили, это значение может быть изменено.
Определим градиент, разделитель и стиль при наведении мыши с помощью операцийВ LESS с помощью операций можно увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами, чтобы получить желаемый результат. Давайте взглянем на следующий код, который задает свойства для разделителя в меню:
1 | Divider
{
|
В приведенном выше примере мы вычитаем из переменной @theme цвет #111 , таким образом, левая часть разделителя будет немного темнее чем базовый цвет, а правая светлее. Вот такие манипуляции мы можем делать с HEX-цветом.
Для большей понятности манипуляций с цветом, давайте рассмотрим цветовую схему:
Максимальная темный цвет #000 (черный), а максимальный светлый цвет #FFF (белый) и базовый цвет #555 . Таким образом, если мы хотим получить цвет на три уровня темнее, то вычитаем #333 .
Теперь стили градиента:
1 | Gradient
{
|
Мы планируем использовать 2 цвета текста и цвета теней текста. Один вариант используется если фон меню будет светлым то цвет текста темный и наоборот.
Во-первых, если цвет текста на имеет яркость равную или больше чем 50%, то тень должна потемнеть, в данном случае принять цвет #000000 .
На этом этапе заканчиваем создание файла config.less и переходим к созданию файла styles.less
Импорт config.lessДавайте создадим файл с названием styles.less и первым делом прицепим к нему уже созданный config.less , следующим способом:
На данный момент результат нашей работы выглядит так.
Пока не очень привлекательно. Но все еще впереди.
Основной стиль для меню с вложенными правиламиВ LESS мы можем вкладывать стили какого-либо элемента, непосредственно в стиль родителя.Навигационные тег nav спецификация HTML5, который содержит все необходимые элементы для навигации. Вот его стили:
1 | nav {
|
Обратите внимание, что вместо того, чтобы писать кучу правил CSS, определили только высоту, ширину и отступы. В то время как границу и ее стиль, а также тень мы подцепляем с помощью примешивания (mixins), указываем имя класса .border
и .shadow
и к классу nav
добавляются правила этих классов, которые мы писали в файле config.less
.
1 | nav {
|
Однако в LESS наследование происходит иначе, пойму проще и логичней:
1 | nav {
|
Как видно на картинке, элементы списка li расположены вертикально, а нам надо чтобы они располагались горизонтально. Для этого зададим свойство display:inline;
1 | nav {
|
1 | nav {
|
В приведенном выше примере мы применяем шестнадцатеричный цвет #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
;
}
}
}
Ну вот и все, написание apple.com на этом можно завершить. Остается решить каким способом мы будем присоединять написанные стили к веб-странице. Как я уже упоминал выше, использовать написанные стили можно двумя способами:
- подключить styles.less и библиотеку less.js ;
- либо скомпилировать styles.less в программе Crunch и уже присоединить к странице обычный styles.css
Конечно более второй вариант лучше, зачем присоединять 2 файла и выполнять двойную работу на стороне клиента, поэтому скомпилируем написанные стили LESS в обычный статический CSS.
Для этого надо нажать на большую кнопку Crunch It
! И сохранить обычный styles.css
На этом, урок завершаю.
P.S.: Такое простое меню сможет сделать каждый, но если вам нужен по настоящему крутой сайт с красивыми эффектами, то могу порекомендовать вам одну из лучших веб студий Украины . Ребята смогут сделать вам действительно уникальный дизайн, выполнить поисковую оптимизацию и раскрутить ваш сайт!
