Историята на корпоративния дизайн в новата книга на Apple. Какво е "стил на Apple"? И това е всичко

Въведение

Що се отнася до дизайна, има една компания, която е невъзможно да не запомните. Това е компанията Apple - всеки техен продукт е резултат от работата на екип от дизайнери. Уебсайтът на тази компания също винаги е привличал внимание.

В този урок ще направим галерия - слайдшоу „a la“ 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( /* Нулиране на страницата */ margin:0px; padding:0px; ) body( /* Задаване на цвета на текста по подразбиране, фон и набор от шрифтове */ цвят:#444444; размер на шрифта:13px; фон: #f2f2f2; семейство шрифтове: Arial, Helvetica, sans-serif; ) /* Стилове на галерия */ #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 заоблени ъгли */ -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; /* Ширината на галерията */ width:920px; overflow:hidden; ) #slides( /* Това е областта на слайда */ height:400px; /* jQuery променя ширината по-късно на сумата от ширините на всички слайдове. */ width:920px; overflow:hidden; ) .slide( float:left; ) #menu( /* Това е контейнерът за миниатюрите */ height:45px; ) ul( margin:0px; padding:0px; ) li( /* Всяка миниатюра е li елемент */ width:60px; display:inline -block; list-style:none; height:45px; overflow:hidden; ) li.inact:hover( /* Неактивното състояние, маркирано с мишката над */ background:url(img/pic_bg.png) repeat; ) li .act,li.act:hover( /* Активното състояние на палеца */ background:url(img/active_bg.png) no-repeat; ) li.act a( cursor:default; ) .fbar( /* най-лявата вертикална лента, до първата миниатюра */ width:2px; background:url(img/divider.png) без повторение вдясно; ) 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 тук), размазване (3px в нашия пример) и цвят на сянката;
* border-radius, кръгли граници в долната част на галерията.

За съжаление в момента тези свойства работят само в Safari, Chrome и Firefox.

Сега е време за магията на jQuery.

СТЪПКА 3 - jQuery

Ще ни трябва следният код:

$(документ).готов(функция())(
/* Този код се изпълнява, след като DOM е напълно зареден */

var totWidth=0;
променливи позиции = нов масив();

$("#slides .slide").each(function(i)(
/* Преминете през всички слайдове и запазете техните натрупващи се ширини в totWidth */
позиции[i]= totWidth;
totWidth += $(this).width();

/* Масивът с позиции съдържа комулативно отместване на всеки слайд от лявата част на контейнера */

if(!$(this).width())
{
alert("Моля, попълнете ширина и височина за всички ваши изображения!");
връща невярно;
}
});

$("#слайдове").width(totWidth);

/* Промяна на ширината на div на cotnainer до точната ширина на всички комбинирани слайдове */

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

/* Щракнете върху миниатюра */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");

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

$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* Стартиране на плъзгащата се анимация */

e.preventDefault();
/* Предотвратяване на действието по подразбиране на връзката */
});

$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* При зареждане на страницата маркирайте първата миниатюра като активна */
});

Основната идея е, че слайдовете се повтарят циклично, ширината на слайдовете се сумира и тази ширина се присвоява на контейнера. Тъй като слайдовете са подравнени вляво, те имат достатъчно място да седят един до друг.

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

Само 40 реда код и нашата галерия със слайдшоу е готова!

Заключение

Отне ни само три стъпки, за да създадем супер красива галерия в стил Apple. Може да украси всеки уебсайт.

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

Но всичко това свърши. Въпреки че продуктите на Apple сега изглеждат още по-привлекателни, това външна красотаимаше своята цена. Изчезнаха основните принципи на добрия дизайн: яснота, обратна връзка, възстановяване и други.

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

Продуктите, особено тези, изградени на iOS, операционната система на Apple за мобилни устройства, вече не следват добре познати и установени принципи на дизайн, разработени преди десетилетия. Тези принципи, базирани както на експерименталната наука, така и на здравия разум, представиха силата на компютърната технология на няколко поколения и дадоха на продуктите на Apple отлична репутация за тяхната яснота и лесна употреба.

За съжаление, сега Apple постепенно изоставя тези идеи. Техните насоки за дизайн за iOS и Mac OS X все още включват подобни концепции, но много от тях изобщо не се практикуват вътрешно. Apple изгубиха пътя си и сега, наблягайки на стила и външния вид, те действат за сметка на ценностите, които някога са били основният им коз в борбата с конкуренцията.

Apple унищожава дизайна.Нещо повече, с действията си те отново карат хората да вярват, че добрият дизайн разчита само на красива обвивка. Но това не е така! Дизайнът е начин на мислене: първо идентифициране на основните нужди на вашата аудитория и след това тяхното задоволяване с продукти и услуги. Тази дисциплина изисква от разработчиците да разбират хората, технологиите, обществото и бизнеса.

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

Apple, вие винаги сте били лидери. Защо се държиш толкова егоцентрично сега? Но по-важното е защо Google следва всички ваши най-лоши примери?

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

Въпреки това, когато компанията премина към интерфейси с жестове с появата на първия iPhone и таблети, нейното ръководство възнамеряваше да изостави много от ключовите принципи, които са били спазвани преди това. Няма повече очевидност на действието - оставаме само с жалки откъси от обратна връзка. Защо? Apple направи радикална стъпка към визуална простота и елегантност и по този начин нанесе сериозен удар върху възможностите за обучение, използваемостта и производителността на техните решения.

Те започнаха да прилагат системи за доставка, които клиентите имаха трудности при използването и научаването, но им се размина, защото хората не разпознаха подобни проблемидокато не стане твърде късно и парите вече са преведени. Но дори и тогава, за недостатъците на техните устройства: „Само да не бях толкова глупав...“.

Днешните iPhone и iPad са трактат за визуална простота. Страхотни шрифтове. Чисто оформление, без излишни думи, символи или менюта. Няма значение, че много хора не могат да прочетат текста. Но той е красив.

В едно проучване една жена твърди, че е трябвало да използва помощните инструменти на Apple, за да направи техните малки шрифтове достатъчно големи и достатъчно контрастни, за да бъдат четими. Тя обаче също така се оплака, че в много секции на приложението тази опция прави шрифтовете толкова големи, че текстът просто не се побира на екрана. Като се има предвид фактът, че тя нямаше проблеми със зрението, тя вероятно щеше да може да чете същия текст с лекота, преди Apple да премине към типове шрифтове с по-фини щрихи и по-малко визуален контраст.

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

Но още по-лошото е, че помощните инструменти унищожават самата красота, на която компанията Apple разчита толкова много, защото понякога заради тях текстът не се побира на екрана. Ако шрифтът беше малко по-широк, с по-висок контраст и малко по-малко антиалиас, Apple щеше да запази не само красотата си, но и четливостта си.

Анулирането беше отказано. И знаете ли какво стана? Имаше много оплаквания и се върнаха тази функцияв малко по-различен формат: всичко, което трябваше да направите, за да отмените действието, беше силно да разклатите телефона или таблета си. Отмяната обаче никога не е била прилагана универсално и можете да разберете за това само като разклатите устройството си. Освен това, ако функцията не работи, потребителите не знаят дали проблемът е, че притурката не е била разклатена достатъчно силно или че анулирането не е предвидено за тази конкретна ситуация.

На сензорни екрани, особено относително малки устройства, много неща могат да се объркат, когато случайно докоснете активна връзка или бутон. Тези произволни докосвания насочват потребителя към нова дестинация. Стандартният, лесен начин за премахване на подобни грешки е да имате бутон „назад“: в смартфони, работещи с Android OS, тази функция е вградена като универсален контролер, който винаги е наличен, но Apple не го използва. Защо? неизвестен Може би се опитват да избегнат използването на бутони или менюта? Резултатът е чист и елегантен външен вид, но тази визуална простота е измамна, защото увеличава сложността на интерфейса.

Apple поставя стрелката назад на някои места, но за разлика от Android, където тя е достъпна навсякъде, техните бутони за отмяна и връщане назад са имплементирани по преценка на разработчика. Не всички, включително Apple, прилагат тези възможности.

Как може човек да знае в каква посока да плъзне, колко пръста да използва и колко често или за колко време да докосва екрана при липса на показалци на дисплея? Хората трябва да запомнят тези жестове, като чуят за тях от приятел, като „четат инструкциите“ (които няма) или като ги открият напълно случайно.

Продуктите на Apple са красиви и привлекателни! Ето защо, когато се сблъскат с трудности, потребителите му са склонни да обвиняват себе си. Това е добре за Apple, но е напълно несправедливо към клиентите.

Добрият дизайн трябва да бъде визуално забележим и приятен за използване. Приятността обаче изисква устройството да е разбираемо и удобно. То трябва да се придържа към основни психологически принципи, които водят до чувство на разбиране, контрол и удоволствие. Те включват яснота, обратна връзка, правилно показване, подходящо използване на ограничения и, разбира се, възможността да отмените вашите действия. Тези основни дизайнерски концепции се преподават преди всичко на бъдещи UX професионалисти и ако Apple бяха включени в подобно обучение, те биха се провалили.

По-привлекателен, но по-труден за използване

Какви са последствията от избягването на подходяща методология за проектиране? По-високи разходи за поддръжка и поддръжка. И в крайна сметка, „дезертирането“ на недоволни клиенти, които могат открито да хвалят простия интерфейс на Apple, но в същото време ще спестят пари за телефон от друга марка, с надеждата, че ще бъдат достатъчно умни, за да управляват всичките му възможности.

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

Нова генерация софтуернаправи огромен скок в привлекателността и мощността на обработка, като в същото време стана по-сложен за използване.

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

Та какъв е проблема? Въпросът е, че дизайнът се предлага в много версии, точно както всяка дисциплина има няколко разновидности. Когато създава софтуер, водещият програмист не разбира непременно интерактивното програмиране, а разработчикът на ядрото може да не знае нищо за телекомуникационното кодиране. От друга страна, дизайнерите на взаимодействие с опит в психологията познават принципите на концептуалните модели, яснотата и разбираемостта, докато за експертите по компютърни науки това е „тъмната гора“. Професионалистите по дизайн обаче са склонни да мислят, че дизайнът на взаимодействие означава уебсайтове и често не разбират тънкостите на програмирането и взаимодействието човек-компютър.

Това е важно, защото хората в крайна сметка се съмняват в себе си, защото не могат да използват интерфейс, който е проектиран да изглежда напълно ясен, когато не е такъв. Това е важно, защото авангардни технологични продукти регресират както в използваемостта, така и в полезността.

Нещо се обърка?

Един от партньорите на Nielsen Norman Group, Брус Тоняцини, работи със Стив Джобс в ранните дни на Apple. Експерт по използваемост (Доналд Норман) се присъединява към компанията малко след като Джобс напуска и след това напуска след завръщането на Стив през 1996 г. Те не са видели прехода от лесни за използване и разбираеми продукти (когато Apple всъщност се хвалеше, че няма нужда от инструкции) към днешните устройства, които не идват с ръководства, но въпреки това често се нуждаят от тях.

Според тях, преди Джобс да се завърне, Apple е подходила към разработването на продукти, като е имала предвид три фактора - потребителски опит, инженеринг и маркетинг - всеки от които участваше в цикъла на проектиране от първия ден до изпращането на стоките.

Днес Apple вече не се опитва да направи своите продукти разбираеми и полезни. Вместо това тя ги проектира етично. За съжаление, както показват изследвания от академични списания за взаимодействието човек-компютър и човешките фактори, визуално простият външен вид не се превръща в лесна употреба.

Apple умишлено крие сложността на своите продукти, като крие или дори премахва важни контроли. Изглежда, че какво може да бъде по-просто от контролер с един бутон? Да, това е много просто решение, но с един бутон вашите възможности за използване на системата са изключително ограничени, освен ако няма определени режими. Те ви позволяват да зададете контрола на различни стойности по различно време, но това обърква потребителите и води до грешки.

Алтернативно, един контролер може да има множество скрити функции, което прави бутона (или тъч скрийн) може да извършва различни операции с еднократно, двойно или тройно натискане при докосване с един, два или три пръста. Или може би чрез използване на определен брой пръсти, определен брой пъти, в дадена посока: просто отворете „панела“ Системни настройки» на Macintosh и проучете избора (и разликите) в значението на докосванията и жестовете на мишка или тракпад на Apple.

Опростеният външен вид може да направи контролите по-сложни, по-произволни, по-трудни за запомняне и по-податливи на грешки. Всъщност в ранните дни на компютрите Lisa и Macintosh слоганът на Apple беше „Без режими“. Единствения начинизоставянето на модовете означава използването на специални контролери, всеки от които винаги трябва да изпълнява една и съща задача.

Принципът на режимите и компромисът между привидната простота и истинската простота в действие се преподават в началните курсове по интерактивен дизайн. Но защо Apple не искат да приложат това знание?

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

Този пълен набор от концепции на Apple е резултат от проекта на Tognasini, който изучава основните принципи на интерфейса на техния Macintosh. Преди това те бяха известни само на тесен кръг от хора, занимаващи се с разработването на UI. Благодаря за писането това ръководство, обучението на нови служители стана много по-лесно и броят на разработчиците за продукти на Macintosh започна значително да нараства.

При създаването на принципите екипът разчита до голяма степен на изследвания, проведени от новосформираната общност за взаимодействие човек-компютър (HCI). Фокусиран върху работата на Доналд Норман и неговите студенти в Калифорнийския университет в Сан Диего, която е публикувана в доклади на PCI конференции в началото на 80-те години и в книга, озаглавена User Centered System Design, редактирана от Норман и Стивън Дрейпър през 1986 г.

Важно е да се отбележи, че тези основи отразяват нуждите, желанията и способностите на хората, а не машините, които използват. Те се отнасят за днешните интерфейси точно толкова, колкото и за ранните версии от 80-те години на миналия век и ще останат така, докато потребителите се развият.

Модерното Ръководство за потребителски интерфейс на iOS на Apple за разработчици очертава много подходящи принципи, но акцентът все още е върху простотата (по-конкретно, външния вид на простота) и удовлетворението и удоволствието на потребителите като цяло. Тези атрибути играят важна роля, но далеч не са решаващи.

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

Това е наистина добра идея. Трябва да провеждате тестове с хора, които са представителни за вашата очаквана аудитория за покупки, а не само с няколко колеги, както предлага Apple.

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

Тази таблица описва еволюцията на насоките за потребителски интерфейс на Apple от 1995 г. до 2015 г. Тъй като устройствата с жестове използват операционна системаНасоките за iOS се намират отляво на насоките за 2015 г. за по-традиционната OS X.

Както виждате, усещането за стабилност и безрежимност изчезна някъде след 2008 г. Прошката и умствените модели бяха загубени при прехода към iOS, заедно с оценката на изричните и очаквани действия. See-and-Point беше премахнат от ръководствата за iOS в края на 2010 г. с пускането на iOS 4. През 1995 г. естетическата цялост беше един от най-малко важните фактори, но през 2015 г. тя е от решаващо значение. Заедно с това метафорите и потребителският контрол загубиха няколко позиции и се спуснаха надолу.

Липсващи принципи

Най-важните принципи, които са напълно или частично игнорирани в iOS, са яснота, обратна връзка, възстановяване, последователност и насърчаване на растежа:

Яснота

Яснотата или способността да се разгледа системата и незабавно да се открият всички предложени действия, винаги е била ключов елемент от успеха на дизайна на Apple. В ранните етапи този принцип се наричаше „виж и посочи“, тъй като всички налични операции бяха представени под формата на бутони, икони или елементи от менюто, видими за потребителя: виждате действието, което искате да извършите, преместете курсора върху съответния обект и кликнете върху него веднъж.

Просто казано, яснотата включва запълване на интерфейса с по-видими и разбираеми елементи, така че хората да не се налага да ги запомнят. Менютата на традиционните компютри следват добре тази идея. Икони с надписи също. Немаркираните икони се провалят най-често, но липсата на намек за интерактивност е виновна. Моля, обърнете внимание, че яснотата вече не се споменава в ръководствата на Apple.

Обратна връзка

Обратната връзка и нейната „приятелска“ обратна връзка позволяват на човек да разбере какво се е случило след извършване на дадено действие или да разбере какво ще се случи, ако действието бъде избрано.

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

Възстановяване

Случват се грешки. Принципът на възстановяване гласи, че трябва да бъде толкова лесно да отмените операция, колкото и да я извършите. Наричана снизходителност, тя също е изчезнала от настоящите насоки и таблицата по-горе. Възстановяването е осъществено с помощта на бутона "отмяна", който е изобретен през 1974 г. в изследователския център на Xerox Corporation в Пало Алто (PARC), вероятно от Уорън Теителман. Както знаете, компютрите Lisa и Macintosh са заимствали основните си структури от ранните разработки на PARC ( Apple закупи правата от Xerox).

Командата Cancel може да бъде отменена с помощта на бутона Redo. Отмяната и повторението помагат на хората не само да коригират собствените си грешки, но и да експериментират с нови неща по-свободно.

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

Браузъри, които поддържат навигационна системаИнтернет предоставя бутон за връщане назад, така че потребителите да могат да се върнат към предишни етапи от своето пътуване. iOS не предоставя такъв обобщен инструмент, така че ако случайно щракнете върху връзка в приложение, например, то ще ви насочи към Safari или Youtube или каквото и да е друго, без да ви предоставя никакъв маршрут за бягство. Бутоните за връщане назад и напред трябва да бъдат стандартни в iOS, така че интерфейсът да прощава на хората случайното навигиране, вместо да ги наказва за това.

Последователност

Повечето съвременни потребители имат множество устройства, но операциите на тези различни джаджи често се припокриват. Дори в рамките на един Apple устройствауспя да наруши последователността: завъртете iPhone и клавиатурната подредба се променя, завъртете iPad и иконите на началния екран се пренареждат по непредвидими начини.

Последователността все още е посочена в насоките, но този принцип почти не се следва. Magic Mouse работи по различен начин от тракпада и нейните контроли на свой ред се различават от жестовете, използвани на iPhone или таблет. Защо? Подобни противоречия обикновено възникват, когато дизайнерите работят изолирано, без да обменят идеи с колегите си.

Насърчаване на растежа

Добрият дизайн насърчава хората да учат и да растат, като поемат нови и по-сложни задачи, веднага щом усвоят основите. Любителите на моментни снимки се развиват, за да станат фотографи, автори лични дневницисе превръщат в блогъри, а децата се опитват в програмирането и в крайна сметка се опитват да изградят кариера в областта Информатика. От десетилетия насърчаването на растежа е основен принцип за Apple, който винаги е бил приеман от потребителите.

Здравейте, скъпи читатели! Уеб дизайнът и уеб разработката се развиват много бързо. Всеки ден виждаме все повече и повече нови продукти, било то приложения или нови услуги, които правят нашия онлайн живот по-продуктивен и удобен. А уеб дизайнът е просто неограничено пространство, ограничено само от таланта и уменията на „художника“ (дизайнера). И така, днес ще говорим за LESS - динамичен език за маркиране на стил, който ще опрости писането на CSS стилове.

LESS е надмножество на CSS. Това означава, че всеки CSS код е валиден LESS, но допълнителни LESS елементи няма да работят в обикновен CSS код. Това е чудесно, защото съществуващият CSS вече е валиден LESS код, което намалява бариерата за навлизане в новата технология.

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

LESS прави стиловете на писане много по-лесни. Например, използвайки миксини, създаваме нещо като функции, които могат да приемат аргументи. Mixins - позволяват ви да включите всички свойства на клас в друг клас чрез просто включванеимето на класа като стойност на едно от свойствата.

И компилираният CSS ще изглежда така:

Заредете библиотеката prefix-free.js и я свържете към index.html:

Нека завършим подготовката тук и преминем директно към създаването на меню в стил Apple.com

Оформлението на менюто е доста просто. Менюто е базирано на неподреден списък. Отворете HTML редактора и поставете този код:

В този раздел ще започнем да пишем код на менюто на LESS език. За тези, които са нови в програмирането, както писането, така и синтаксиса LESS, не се притеснявайте, ще се опитам да разбия всичко, за да стане ясно. Може би дори някой ще хареса този начин на писане на стилове за сайт, защото е наистина по-продуктивен.

Нека да разгледаме от какви компоненти ще се състои менюто:

Както можем да видим на екранната снимка по-горе, навигацията на Apple.com има следните 6 основни части:

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

Можете да използвате писмени стилове по два начина:

• хрускам

Важно: когато използвате първия метод, трябва да се включи styles.less преди библиотеката less.js! Също така не забравяйте да свържете префикс без .
По този начин свързващите стилове изглеждат така:

Ще използваме 2 файла: config.less в него ще дефинираме всички променливи, миксини и т.н., след което ще го импортираме във втория (styles.less), в който вече ще създаваме стилове за елементите на менюто.

Сега нека да разгледаме кода в config.less. Нека да дефинираме основния цвят на менюто с помощта на променливи. Променлива в LESS се декларира с помощта на символа @.

В кода по-горе не съм включил префикс за box-shadow, библиотеката без префикс автоматично ще го добави. Освен това цветът на сянката се наследява от цвета на променливата @theme.

Нашето меню ще се нуждае от рамка със заоблени ъгли. Миксини с параметър - всъщност има същата функционалност като обикновен миксин, единствената разлика е, че той също има променлив параметър.

В горния пример задаваме @radius по подразбиране на 3 пиксела и, както казахме, тази стойност може да бъде променена.

В LESS можете да използвате операции за увеличаване, намаляване, деление и умножаване както на стойностите на свойствата, така и на цветовете, което ви позволява да укажете сложни връзки между свойствата, за да постигнете желания резултат. Нека да разгледаме следния код, който задава свойствата за разделителя на менюто:

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

За да направим манипулирането на цветовете по-ясно, нека разгледаме цветовата схема:

Максималният тъмен цвят е #000 (черен), максималният светъл цвят е #FFF (бял), а основният цвят е #555. Така че, ако искаме цвят с три нива по-тъмен, ще извадим #333.

Сега градиентните стилове:

Планираме да използваме 2 цвята на текста и цветове на сенките на текста. Едната опция се използва, ако фонът на менюто е светъл, тогава цветът на текста е тъмен и обратното.

Първо, ако цветът на текста няма яркост, равна или по-голяма от 50%, тогава сянката трябва да потъмнее, в този случай цветът #000000.

На този етап завършваме създаването на файла config.less и преминаваме към създаването на файла styles.less

Нека създадем файл, наречен styles.less и първо да прикачим вече създадения config.less към него по следния начин:

В момента резултатът от нашата работа изглежда така.

Все още не е много привлекателен. Но все още предстои.

В LESS можем да вложим стиловете на всеки елемент директно в стила на родителя.Навигационният таг е nav HTML5 спецификация, която съдържа всички необходими елементи за навигация. Ето неговите стилове:

Забележете, че вместо да пишем куп CSS правила, ние просто дефинирахме височината, ширината и подложката. Докато избираме границата и нейния стил, както и сянката с помощта на mixins, ние указваме името на класа .border и .shadow и правилата на тези класове, които написахме във файла config.less, се добавят към nav клас.

Въпреки това, в LESS наследяването се случва по различен начин, по-лесно и по-логично е да се разбере:

Както можете да видите на снимката, елементите на списъка li са разположени вертикално, но трябва да са разположени хоризонтално. За да направите това, задайте свойството display:inline;

В горния пример използваме шестнадесетичен цвят #f2f2f2, този цвят има яркост над 50%, така че сянката автоматично ще бъде настроена на черно. Сигурен съм, че останалата част от кода е доста очевидна.

ли (
дисплей: вграден;
а (
текст-декорация: няма;
дисплей: inline-block;
поплавък: наляво;
ширина: 156px;
височина: 45px;
подравняване на текст: център;
височина на реда: 300%;

.разделител;
.градиент;
}
}
li: първо дете a (
border-left: няма;
}
li: 50px автоматично 0;
ширина: 788px;
височина: 45px;
.граница;
.сянка;
ул(
подплата: 0;
марж: 0;
ли (
дисплей: вграден;
а (
текст-декорация: няма;
дисплей: inline-block;
поплавък: наляво;
ширина: 156px;
височина: 45px;
подравняване на текст: център;
височина на реда: 300%;
.textcolor(#f2f2f2) ; // Можете да промените този ред
.разделител;
.градиент;
&:задръжте(
.hoveeffect;
}
}
}
li: първо дете a (
border-left: няма;
}
li: последно дете a (
border-right: няма;
}
}
}

Е, това е всичко, писането на 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. Нашият редактор е създаден специално, за да можете да направите хубав уебсайт за всякакъв вид дейност и да добавите някакъв модерен ефект към него, например паралаксово превъртане или видео като фон. Можете да направите текуща „дълга“ страница и да я допълните с „плоски“ дизайнерски елементи*.

Смятаме, че на този етап няма да ви навреди да посетите уебсайтове за дизайнери и да почерпите малко вдъхновение. Нашите препоръки: сп Уеб вдъхновение, блог Лопарти списание за дизайн Дежурна стая; Ако английски езикняма проблем за вас, прочетете Vandelay Design , Списание SmashingИ Депо за уеб дизайн .

*Не разбирате какво означават всички тези думи? Така че трябва да прочетете нашите.

Големите компании имат разпознаваема корпоративна идентичност и много ясно позициониране. Използват строго определени шрифтове, цветове и слогани. Безпогрешно ще разпознаете червеното лого на Coca-Cola, независимо дали е на уебсайта, бутилки или билбордове по улицата.

И какво, ако вашата компания не е толкова голяма, колкото Coca-Cola? Това не означава, че не е необходимо да правите брандиране. Важна е добре обмислената корпоративна идентичност. Благодарение на него хората ще могат бързо да идентифицират вашия продукт и след това е на един хвърлей разстояние, преди да направят покупка. Затова нарисувайте хубаво лого, измислете слоган, изберете брандирани шрифтове, цветове и проектирайте страниците си в социалните медии по съответния начин. Още съвети в нашата статия за.

Разбираме, че искате да говорите подробно за вашия продукт и бизнес, но не препоръчваме да претоварвате сайта и да отегчавате посетителите. Сайтът се зарежда много слабо, трудно се чете и отблъсква посетителите. Най-доброто е враг на доброто, така че трябва да се научите да спирате навреме.

Нека помислим какво може да бъде премахнато от вашия сайт. Ако текстовете са пълни с технически и професионални термини, отървете се от тях. Мислите ли, че посетителите наистина трябва да знаят подробни биографии на всички ваши служители? Малко вероятно. Някои неща, разбира се, не могат да бъдат съкратени, напр. Подробно описаниестоки или услуги, но това е нормално, тази информация е полезна. Дори си струва да го преместите на място, където определено няма да остане незабелязано. И всичко, което забавя процеса на покупка, може да бъде премахнато без ни най-малко съжаление.

Сега нека да разгледаме дизайна. Намалете броя на цветовете до три или четири, премахнете всички допълнителни снимкии обърнете внимание на типографията. Не забравяйте да оставите достатъчно свободно пространство, известно още като „въздух“. Когато има много „въздух“ на даден сайт, хората забелязват всички критични елементи, като тези, които са необходими, за да накарат посетителите да купуват, да се абонират, да се регистрират и т.н.

Искате ли да увеличите броя на поръчките? Така че, уверете се, че хората виждат продукта ви веднага. Разгледайте сайтовете на известни марки. Виждате ли, те поставят продукти не само на страницата за пазаруване, но и на главната страница, така че хората със сигурност да ги забележат. Ако имате и мислите как да увеличите продажбите, не се колебайте да копирате тази техника.

Разбира се, снимките на продуктите трябва да са големи и с много високо качество. Не забравяйте, че това се случва в онлайн магазин, където не можете да пипнете или пробвате нищо, така че хората вземат решения за покупка, като гледат снимката. Ако нямате пари за професионален фотограф, прочетете нашата статия за. Малко практика - и всичко ще се получи! И не забравяйте за възможностите на нашия редактор; можете да добавите приложение към сайта, така че клиентът да може да увеличи изображението на обекта, който ви интересува, и да го разгледа добре.

Смятаме, че някога сте попадали на лошо проектиран уебсайт и сте се лутали напред-назад объркано в търсене на правилната страница. Като правило, ние напускаме такива места с празни ръце и с желание никога да не се връщаме. И всичко това се дължи на лошо замислена навигация. Не повтаряйте тази грешка и се уверете, че всичко е ясно на посетителя още от първите секунди.

Ако ви питат едно и също нещо отново и отново, направете страница с отговори на често задавани въпроси. Можете да използвате приложението ЧЗВ за Wix. Предимството му е, че хората получават информацията, от която се нуждаят, а вие не се разсейвате от други въпроси.

Искате ли да покажете, че вашата компания е отзивчива и приятелска? Добавете приложението " Чат на живо Tidio”, за да отговаряте на въпроси в реално време. Можете да го инсталирате на вашия смартфон и да не седите на компютъра цял ден, а да се занимавате с работата си и да останете свързани.

Хубаво е, че се опитвате да поддържате връзка и да отговаряте навреме на въпроси, но това не е достатъчно, за да изградите доверие у клиентите. За да направите това, трябва отново да работите върху сайта. Направете отделен раздел с историята на компанията, говорете за това кой сте, в какво вярвате и какво смятате за важно. Няма нужда от твърде много информация: текстът трябва да е кратък, искрен и разбираем. Доста е трудно да покажеш какъв човек си в интернет, но смятаме, че страница като тази ще свърши идеална работа.

Също така препоръчваме да добавите клиентски отзиви към сайта - на начална страницаили в отделен раздел. Четейки ги, хората ще разберат, че вашият продукт заслужава доверие. Между другото, Yandex и Google също обръщат внимание на прегледите, което означава, че те влияят.

Повече от половината потребители на интернет имат достъп до мрежата от таблети и смартфони. Означава, че мобилна версияуебсайтът не е прищявка, а необходимост. За щастие не е нужно да се притеснявате как да го направите. В редактора на Wix мобилна версиясе генерира автоматично, просто трябва да го тествате и да промените няколко неща. Не забравяйте, че мобилната версия не е точно копие на настолната версия, така че премахнете всички ненужни елементи и направете бутоните и контактите видими.

Обърнете внимание как по-възрастните и по-опитни колеги управляват страниците си в социалните мрежи. Да, за да достигнете по-пълно до вашата аудитория, имате нужда както от уебсайт, така и от страници във Facebook, VKontakte, Instagram и др. Социалните мрежи са идеални за публикуване на новини, писане за продукт и отговаряне на въпроси. Важно е не просто да се говори за работа, а да се формира имидж и да се изградят нормални, доверителни отношения. Ако наистина не знаете какво да правите, прочетете статията и следвайте всички наши препоръки.

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

Готови ли сте да се изравните с големите марки? направете го сами на Wix - лесно е и безплатно!

Култът към Apple не оставя никого безразличен и нека си признаем: един от ключовите фактори за популярността на Apple е техният уникален дизайн. Проектиран от Apple в Калифорния илюстрира как дизайнерите третират продуктите си като изкуство.

Купертино, Калифорния – На 16 ноември Apple обяви издаването на нова книга с твърди корици, озаглавена „Проектирано от Apple в Калифорния“. Две десетилетия иновации в дизайна са запечатани в 450 снимки на минали и настоящи продукти на компанията, от iMac (1998) до Apple Pencil (2015). Създаването на книгата отне 8 години и беше посветено на паметта на Стив Джобс.

„Идеята за създаване на нещо важно за човечеството мотивира Стив от самото начало, тази идея е нашият етос и целта, с която Apple се движи в бъдещето“, казва Джони Айв.

„Проектиран от Apple в Калифорния“ е резултат от тясно сътрудничество между много екипи от дизайнери и специалисти от напълно различни области. Всички те споделят надеждата, че книгата ще даде на хората разбиране за това как и защо продуктите на Apple са създадени и съществуват. Всички снимки са направени от Андрю Зукерман в техника, която той описва като „съзнателно скромен стил“. Снимките илюстрират детайлите от процеса на проектиране, както и самите готови продукти.

Това е книга за дизайна, но не за самите дизайнери, творческия процес или разработването на продукта. Той обективно отразява стила, имиджа и дизайнерската идеология на Apple. Много продукти изглеждат толкова ясни, прости и логични, че сякаш нямат разумна алтернатива. За всяко устройство е обмислен дори дизайнът на инструмента, с който е направен.

„Като дизайнери живеем в бъдещето, обичаме това, което вече сме направили, и сме обсебени от това, което все още не сме направили.“

„Едно от най-важните неща, които научихме през нашите 20 години съвместна работа, е необходимостта да се изслушваме един друг, защото най-ярките идеи често са тези, които говорят много, много тихо.“

Проектирано от Apple в Калифорния е ограничено издание на книга, предлагано в два формата: малък (25,9 x 32,4 cm) за $199 и голям (33 x 40,6 cm) за $299. Отпечатан е върху специално произведена хартия със специално оцветяване и матово сребристи ръбове. Продава се ексклузивно на Apple.com в САЩ, Австралия, Обединеното кралство, Германия, Хонг Конг, Корея, Франция, Япония и Тайван, както и в избрани магазини на Apple.