Веб-дизайн в стиле Apple развивался и эволюционировал на протяжении нескольких лет, начиная с 1996 года. Как следует из названия, идея дизайна принадлежит корпорации Apple: в таком стиле оформлялся сайт и интерфейсы продуктов. Дизайн сайта в стиле Apple приобрел широкую популярность благодаря минималистичности и акцентуации внимания пользователя на конкретном продукте.
Характерные особенности дизайна сайта в стиле Apple
- Строгая иерархия в композиции элементов. Основной приоритет – изображение продукта. Фотография высокого качества, четкая, крупная, размещается в центе страницы и окружается белым пространством. В лучших традициях минимализма.
- Цветовая палитра, как правило, состоит из трех оттенков: черный, белый, серый. При этом, в отличие от плоского стиля, широко применяются градиенты, тени, способы передачи объема.
- Характерные шрифты. Заголовки оформляются Adobe Myriad, обычный текст – Lucida Grande.
- Контент. На главной странице сайта – минимум информации. Подробное описание вынесено на отдельные страницы. Отсутствует эффект перенасыщения. Пользователь сам выбирает информацию, которая его интересует.
- Технические особенности. Apple-дизайн ориентирован на формат HTML 5, использование современных стандартов в дизайне. На официальном сайте Apple принципиально не используется Flash.
Для каких сайтов подходит?
в стиле Apple – идеальный способ презентовать товар или услугу. Такой стиль часто используют при оформлении интернет-магазинов, промо-сайтов, посвященных любому виду продукции: от обучающих курсов до продажи недвижимости. Вот так выглядит дизайн в стиле Apple для сайтов, посвященных программному обеспечению:- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/
Вступление
Когда речь заходит о дизайне, существует одна компания, которую невозможно не вспомнить. Это компания 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 славилась своим умением разрабатывать простые и легкие для восприятия продукты. Она была поборником графического интерфейса, в пределах которого пользователи интуитивно могли понять, какие действия им доступны и каким образом их можно выбрать. Совершив ту или иную операцию, люди всегда получали вразумительный фидбек и имели возможность все отменить, если результат не оправдывал их ожиданий.
Но всему этому пришел конец. Несмотря на то что теперь продукты 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.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 - . Я и моя команда сделаем вам всё на лучшем уровне.
