Гарний слайдер в стилі Apple. CSS-кнопки в стилі Apple Дизайн в стилі 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-культ не залишає байдужим нікого, і варто поглянути правді в очі: один з ключових чинників популярності компанії Apple - їх унікальний дизайн. Книга «Designed by Apple in California» наочно ілюструє, що дизайнери відносяться до своїх продуктів як до мистецтва.



Купертіно, Каліфорнія - 16 листопада компанія Apple анонсувала реліз нової книги в твердій палітурці під назвою «Designed by Apple in California». Два десятиліття інновацій в дизайні відображені на 450 фотографіях минулих і нинішніх продуктів компанії, починаючи з iMac (1998 г.) і закінчуючи Apple Pencil (2015 г.). Книгу створювали 8 років і присвятили її пам'яті Стіва Джобса.


«Ідея про створення чогось важливого для людства мотивувала Стіва з самого початку, ця думка - наш ідеал і мета, з якою Apple рухається в майбутнє», - стверджує Джоні Айв.



«Designed by Apple in California» - результат тісної співпраці багатьох груп дизайнерів і фахівців абсолютно різних сфер. Всіх їх об'єднує надія на те, що книга дасть людям розуміння, як і чому продукти Apple створені і існують. Всі фотографії зроблені Ендрю Цукерманом в техніці, описаної їм як «нарочито скромний стиль». Знімки ілюструють деталі процесу дизайну так само добре, як і самі готові продукти.



Це книга про дизайн, але мова в ній йде не про самих дизайнерів, творчому процесі або розвитку продукту. Вона об'єктивно відображає стиль, образ і ідеологію дизайну Apple. Багато продуктів виглядають настільки зрозумілими, простими і логічними, ніби не мають розумної альтернативи. Для кожного пристрою продуманий навіть дизайн інструменту, яким він зроблений.

«Як дизайнери ми живемо в майбутньому, любимо те, що вже зробили, і схиблені на тому, що зробити ще не встигли»



«Одна з найважливіших речей, які ми засвоїли за 20 років спільної роботи - необхідність слухати один одного, тому що найяскравіші ідеї часто подають ті, хто говорить дуже-дуже тихо»




Книга «Designed by Apple in California» випускається обмеженим тиражем в двох форматах: small (25,9 x 32,4 см) за ціною $ 199 і large (33 x 40,6 см) за $ 299. Вона надрукована на спеціально виготовленій папері особливої ​​забарвлення з матовими посрібленими краями. Продається ексклюзивно на сайті Apple.com в США, Австралії, Великобританії, Німеччини, Гонконгу, Кореї, Франції, Японії та Тайвані, а також в деяких магазинах Apple Store.

Колись давним-давно компанія 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 найважливішим принципом, Який завжди приймався користувачами.

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

Що таке LESS?

LESS - це надбудова над CSS. Це означає, що будь-який CSS код - це валідний LESS, але додаткові елементи LESS не працюватимуть в простому CSSкоді. Це чудово, тому що існуючий CSS вже є працездатним LESS кодом, що зменшує поріг входження в нову технологію.

LESS додає багато потрібних динамічних властивостей в. Він вводить змінні, операції, елементи і домішки. Можливість писати таблиці стилів модульно позбавить вас від багатьох клопоту.

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

1
2
3
4
5
6
7
8
9
10
11

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

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

1
2
3
4
5
6
7
8
9
10

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


Завантажуємо бібліотеку prefix-free.js і підчіплюємо її до index.html:

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

На цьому з підготовкою закінчимо і перейдемо безпосередньо до створення меню в стилі Apple.com

розмітка HTML

Розмітка меню досить проста. Меню зроблено на основі не впорядкованого списку. Відкриваємо HTML-редактор і вставляємо такий ось код:

1
2
3
4
5
6
7
8
9

LESS стилі

У цьому розділі ми почнемо написання коду меню на LESS мовою. Для тих, хто новачок в програмуванні, як в написання так і в синтаксисі LESS, не хвилюйтеся, постараюся розкласти все по поличках, щоб було зрозуміло. Можливо навіть комусь такий спосіб написання стилів для сайту сподобається, адже він дійсно більш продуктивний.

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

Як ми можемо бачити на скріншоті вище, навігація Apple.com має наступні 6 основних частин:

  • Використовується тінь;
  • кордон;
  • Роздільник між пунктами меню;
  • Градієнт для фону;
  • Ефект затемнення при наведенні миші;
  • Текст меню.

Використовувати написані стилі можна двома способами:

  • Crunch

важливо:при використанні першого способу щоб підключення styles.less відбувалося до підключення бібліотеки less.js! Також залишається не забути підключити prefix-free.
Таким чином підключення стилів виглядає так:

1
2
3
4
5


Поділитися
Copyright 2021. shongames.ru. Андроїд. Операційна система. Мультимедіа. Соціальні мережі. Інструменти. Кодеки. Графіка. Всі права захищені.