Такой непростой минимализм. Секреты дизайна Apple. Инструкции по Упрощению Интерфейса. Минималистичные обои для iPhone

Минимализм уже довольно долго и успешно царит в мире дизайна, но что же ждёт всех нас в будущем?

На протяжении последних нескольких месяцев, ведущие специалисты инновационного дизайна вывели «минималистичный дизайн» на следующий уровень. Facebook, Airbnb и Apple всегда придерживались общей тактики, когда дело касалось упрощения выдающихся продуктов, дабы донести до людей новый тренд «Упрощения Интерфейса» в мобильном дизайне.

Что же такое Упрощение Интерфейса (с англ. – Complexion Reduction)?

Скажете, что никогда не слышали про «Упрощение Интерфейса»? Что же, это всё потому, что я только что придумал это словосочетание. Дело в том, что не так давно я заметил новый тренд, который нельзя отнести ни к плоскому, ни к минималистичному дизайну – он живёт собственной жизнью прогрессирующего сокращения. Некоторые скажут, что сей феномен – не что иное, как следующий шаг в развитии минимального дизайна, применяемый в царстве мобильных приложений, но всё же я бы отнёс его к отдельной, независимой ветви. Поэтому я решил дать этому явлению название – ведь мне это позволено, не так ли?

Итак, отличительные характеристики этого горячего тренда, захватившего уже всю Кремниевую Долину:

1. Заголовки больше и жирнее
2. Иконки проще и более обобщены
3. Избавление от цветов

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

Доказательство

Впервые я стал замечать появление этого тренда в начале мая, когда Instagram сделал редизайн их пользовательского интерфейса (UI).

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

Medium

Приложение Medium всегда эффективно смотрелoсь в чёрно-белых тонах с тех пор как оно запустилось в 2012, постепенно упрощая пользовательский интерфейс и с каждым редизайном непроизвольно становясь основоположником CR (Упрощения Интерфейса). Так держать!

После того как народ стал обсуждать в Facebook новоиспечённый облик Instagramа вдоль и поперёк, я открыл приложение Airbnb и меня зацепило поразительное сходство двух приложений. Это был первый раз, как я взглянул на их продукт со времён редизайна приложения в апреле. Тем не менее, меня не покидало чувство, будто я уже видел всё это раньше.

Редизайн UI Airbnb не получил широкой огласки, в отличие от Instagramа месяц спустя, (отчасти оттого, что не стал сопровождаться новым сверкающим логотипом приложения), но как бы то ни было, в дизайне были применены те же самые тактики.

Редизайн включил в себя такие черты, как более жирные и крупные заголовки, отсутствие не столь нужных визуальных объектов и цветов, и максимальное упрощение иконок, чтобы сделать их наиболее универсальными и узнаваемыми. Что осталось, так это чёрно-белый пользовательских интерфейс с выделяющимся контентом и максимально простой функциональностью.

Apple – недавний пример дизайнеров, вдохновлённых движением Упрощения Интерфейса. Ранее в этом месяце, на знаменитой конференции Apple’s WWDC, техно-гигант провозгласил о ряде потрясающих функций, которые станут доступны пользователям в ближайшем будущем. Среди них – выпуск iOS 10, который обещает быть «Самым грандиозным выпуском iOS в истории!» (по крайней мере, со времён выпуска iOS 8, по отношению к которому было сказано то же самое).

Но какое объявление, в частности, захватило мое внимание, так это редизайн Apple Music. Несмотря на то, что самой важной частью считается редизайн UX обновлений и дополнительных черт, первое, что мне бросилось в глаза, это эстетический аспект. Кейтлин Макгэрри (Gaitlin McGarry), журналистка и писательница в Macworld, пояснила так же обновлённый внешний вид:

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

Звучит знакомо? Дизайн слегка отличается от тактики, применённой в Instagram и Airbnb (они используют однотонные иконки! Какого чёрта Apple?), но ключевые элементы остались прежними – увеличенные жирные заголовки, и чёрно-белый интерфейс.

Что я всем этим хотел сказать?

Как я уже ранее отметил, это означает, что всеми нами любимые приложения становятся похожими друг на друга. Почему? Так же как и NFL, tech – это подражание. Эти редизайны в целом были встречены с положительными отзывами. Хотя находятся те, кто утверждает что в этой чёрно-белой суете была потеряна индивидуальность, но вскоре они с этим смирятся. Ведь в приложении нам всем нужна функциональность, а вовсе не индивидуальность. Так что я ожидаю в ближайшем будущем скачка под эту гребёнку и от остальных приложений.

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

Так что, нравится вам эта монохромная вакханалия или нет, это, безусловно, верный признак прогресса. Процесс дизайна приложений совершенствуется и развивается, отодвигая в сторону старые нормы с набором излишних элементов и заменяя его более целостным процессом, который максимально сконцентрирован вокруг пользователя. Прежний процесс продукт дизайна загонял UI дизайнеров в жёсткие рамки «сделать это красивым», установленные дизайнерами. Таким образом, дизайнер мог часами, а то и днями напролёт перебирать всевозможные комбинации цветов, их подборку, удаление, изменение, пока не нарисуется таки конечный результат… ох уж эти жёсткие рамки!

Так как границы между UX и UI дизайнерами постепенно стираются в сегодняшнем более интегрированном процессе, нынешних дизайнеров всё менее заботят их специфичные обязанности (такие как сделать что-либо красивым), что позволяет им сконцентрироваться на таких важных аспектах, как создание лучшего продукта для своих пользователей.

Инструкции по Упрощению Интерфейса:

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

1. Уберите цвета. Один цвет всё же допустим, но используйте его максимально экономно, исключительно для обозначения определённого действия. Всему остальному лучше быть в чёрно-белых тонах. Пусть единственным носителем цветов будет ваш контент.
2. Больше, жирнее, чернее заголовки. Видите этот заголовок? Задайте его размеры от 20 до 30 пикселей, а главное сделай его Жирным.
3. Простые, тоненькие, узнаваемые иконки. Им лучше быть универсальными, без каких бы то ни было оттенков тоже. А для бонуса, расположите их слева направо в таком порядке: home, search, primary action, secondary action, profile.
4. Удвойте, нет, утройте ваше белое пространство. Может даже сделайте его вчетверо больше. Здесь невозможно переборщить, поверьте.
5. Сделайте логотип приложения поярче. Где и блистать креативом и цветами, так это здесь. Сделайте его выделяющимся!

Рабочий стол моего iPhone когда-то напоминал катастрофу. Все эти программы, которые я отбираю для вероятных обзоров, раздувают его до 4–5 экранов, а в сочетании с пёстрыми обоями их перелистывание могло вызвать эпилептический припадок:)

Проблема давно требовала решения, и выработал приемлемый вариант, который может пригодиться и вам. С выходом iOS 12 методика усовершенствовалась, поэтому я и решил ещё разок поднять эту тему и рассказать вам, как настроен мой iPhone.

1. Удаляем все ненужные приложения

Банальное правило, которое само по себе не работает. Все, что мне периодически приходится использовать, уже само по себе создаёт беспорядок. Но, все же пройдитесь по списку и удалите сомнительные ПО.

2. Убираем с Рабочего стола ненужные иконки

В iOS 7 больше нет ограничений на количество приложений в папках, поэтому можно создать какое-то хранилище Мусор и спрятать туда все то, что вам не надо. Первым делом, под нож попали стандартные приложения, которыми я не пользуюсь: Часы, Акции, Погода, Напоминания и т.п. Также я спрятал туда все то, что используется редко: клиенты Webmoney, Ebay, Privat24 и т.п.

При необходимости все эти программы всегда быстродоступны из Spotlight.

Только в результате этих действий я смог избавится от 17 (!) иконок, то есть освободил больше одного экрана.

3. Оставляем последнюю строку пустой

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

4. Сортировка по цветам

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

5. Минималистичные обои для iPhone

В последнее время я облюбовал программу , которая генерирует в стиле iOS из любой фотографии на вашем телефоне. Она также автоматом подгружает случайные снимки из Flickr, что даёт просто неограниченный возможности.

В итоге

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

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

Вконтакте

Если вы дизайнер, то, наверное, уже встречались с термином squircle (сквиркл, суперэллипс), а если вы промышленный дизайнер, то вам наверняка понятно, что этот термин является отличительной чертой «яблочных» продуктов.

С релизом iOS 7, значки приложений перестали быть скругленными квадратами и превратились в нечто более сложное и утонченное. Все знают, что Apple уделяет огромное внимание мелочам, но только немногие понимают логику этих на первый взгляд незначительных изменений. Если вы потратите время на установку кривых в Autodesk Alias Studio (ПО, используемое Apple), то сразу поймете суть происходящего. Она заключается в последовательности. Apple создает унифицированный дизайн как для программных, так и для аппаратных продуктов.

Иконки Apple не скругленные квадраты, так как форма «яблочных» аппаратных продуктов - не скругленный квадрат.

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

Секрет физических устройств Apple заключается в том, что у них нет точки «касания» (где радус встречается с линией в одной точке), а все поверхности создаются в так называемой «непрерывной кривизне».

Руководство по хорошим поверхностям

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

MacBook Pro справа — продукт с двумя угловыми поверхностями, соединенными заокругленной поверхностью. Видите, как мягко падает свет?

Почему они отличаются?

Взгляните на гребенки (радиусы) кривизны (это способ визуализации кривизны). Каждая линия гребенки представляет собой величину кривизны в точке изгиба. Слева искривление мгновенно возрастает с нуля до определенного радиуса кривизны. Внезапные изменения кривизны = внезапный эффект.

Дизайнеры Apple создают эффект, за ним следует форма

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

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

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

Если вы хотите углубиться в вопрос, прочитайте соответствующую техническую литературу и вы узнаете, что на самом деле существует два уровня непрерывной кривизны. Подробнее об этом написано в руководстве по Autodesk Alias (один из многих инструментов, позволяющих работать с непрерывной кривизной).

«Если вы никогда не сталкивались с дизайном iOS-иконок - взгляните на них, и вы увидите, что по форме они представляют собой квадрат с закруглёнными краями. Если вы дизайнер интерфейсов, то знаете, что такая форма называется squircle - гибрид квадрата и круга. Если же вы промышленный дизайнер, то знаете, что именно такая форма является отличительным знаком продукции Apple», - пишет Марк Стэнтон.

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

Иконки Apple не обладают формой прямоугольников с закруглёнными углами. Как и её устройства.

«Apple придерживается минималистичного дизайна, но не стоит путать минимализм с простотой. В дизайне от Apple нет простоты», - объясняет автор материала. «Секрет аппаратных продуктов от компании заключается в том, что дизайнеры избегают форм, в которых скругление переходит в прямую линию грани в одной точке - и создают плавные переходы между гранями». Этот принцип называется Curvature Continuity.

В качестве примера Стэнтон приводит два устройства со скруглёнными краями. «Обратите внимание, насколько резким выглядит угол у первого гаджета. Это результат как раз такого перехода от скругления к самой грани», - объясняет он.

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

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

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

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

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

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

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