Что следует знать о плоском дизайне

Original author: Joey Cofone
  • Translation
Дорогой дизайнер и недизайнер!

Эта статья для вас обоих. Дизайнеру она послужит хорошим напоминанием, на что нужно обращать внимание прежде всего. Недизайнеру она поможет понять произошедший сдвиг от объемного к плоскому дизайну, а так же что это значит с технической точки зрения.

Плоский и минималистичный дизайн — это то, чем я зарабатываю свой хлеб. С тех пор, как я стал работать с дизайном, я всё время упрощаю объем, минимизирую отдельные элементы и увеличиваю пустое пространство. В данный момент эти два стиля слились воедино и вышли на передовую мобильного дизайна. И я хотел бы поделиться тем, чему научился.



Внезапно повсюду


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

image

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

Также есть ощущение, что Apple донёс плоский дизайн до самой широкой аудитории, и она полюбила такой дизайн. Как и ожидалось, обновление iOS7 в плоском дизайне было преподнесено как «новое» и «свежее», в то время как это ново и свежо для Apple. Всё это уже давно нас окружает.

Дизайн как мода


Дизайнерская эстетика, как и мода, тоже следует трендам: какие-то вещи становятся крутыми на некоторое время, затем уходят, а затем — часто через большой промежуток времени — возвращаются вновь. Любой, кто говорит вам что-то другое, просто глупый гном (правда, без этой огромной остроконечной красной шляпы, конечно).

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

Одно измерение


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

image

До iOS 7: много градиентов, отбрасываемых теней, фасок и лежащих друг над другом уровней. После iOS 7: только один уровень (одно измерение), никаких теней, тонких градиентов, ничего.

Основная проблема при переходе от объемного к плоскому дизайну — это работа только на одном уровне. До появления iOS 7 у нас были такие эффекты для передачи объема как отбрасываемые тени, текстуры, градиенты и т.п. Сегодня же всё существует в единой плоскости. Это и есть плоский дизайн.

Три принципа, которыми необходимо овладеть


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

1. Иерархия

В iOS 6 и более ранних версиях иерархия элементов строилась в том числе на различиях в объеме. Вы могли применить отбрасываемую тень к блоку меню, «приподняв» его таким образом над всем остальным контентом и заявляя тем самым о его более «высоком» уровне в иерархии. Теперь такого нет.

image

Чем более важен элемент, тем больше внимания пользователя он должен привлекать.

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

Это нас подводит ко второму принципу.

2. Блочность

Самое первое, чему учат в школах дизайна — отойти на шаг от своей работы и посмотреть на неё, прищурившись. Этот приём смазывает все элементы, позволяет увидеть их в менее детализированном виде и помогает таким образом увидеть и оценить более общие формы. Блочность проистекает из того же самого метода оценки.

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

image

Иерархия структуры на макро уровне. Отдельные элементы образуют микро уровень.

Как только вы поняли, какие общие блоки у вас есть, вы можете дальше применить принцип иерархии к каждому из них, всё более устраняя необходимость в устаревших искусственных тенях и текстурах. Это достигается теми способами, о которых мы говорили про иерархию: размер, цвет, вес, местоположение и т.д.

Последний и самый важный элемент в наших трёх принципах — это зритель.

3. Линия взгляда

Если сервис запускается в центре леса, и никто вокруг не видит его, существует ли он? Зритель — это неконтролируемая контрольная группа, это лакмусовая бумажка, с помощью которой мы как дизайнеры можем всё оценить и спланировать. Короче, это то, как воспринимается то, что мы делаем, над чем мы работаем, что оптимизируем.

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

image

Держите в голове естественную склонность зрителя, когда занимаетесь проектированием. У вас нет 100% контроля над линией взгляда, который не столь гибок, как наша иерархия.

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

Как три капли воды


Я думаю, для всех довольно очевидно, что все три разобранных нами принципа пересекаются друг с другом. Иерархия и блочность — это микро и макро методы по управлению линией взгляда. А линия взгляда — это полугибкое правило, которое помогает располагать элементы в нашей иерархии и блочности. Правильно всегда иметь в виду все три принципа, включая их техники и ограничения, чтобы создавать дизайн, который эффективно взаимодействует с пользователем.
Студия дизайна Genue
56.19
Company
Share post

Comments 51

    +68
    Это оказывается эпл донес плоский дизайн до аудитории? Это видимо в параллельной реальности где американцы победили Гитлера
      +33
      конечно, Microsoft и Google не в счет, да и здоровый кусок интернета тоже не учитываем.
        +36
        Для меня первым серьезным проектом в стиле плоского дизайна был анонсированный майкрософтом «метро». Напомню, что это было задолго до выхода Windows 8, там был документ, достаточно грамотно описывающий все особенности плоского стиля. Тогда меня это немало поразило — не так просто создать новый тренд, да еще и такой продуманный.

        А теперь оказалось что это все Apple придумала…
          +6
          Вообще-то, автор немного иначе преподносит, он говорит:
          — Как и ожидалось, обновление iOS7 в плоском дизайне было преподнесено как «новое» и «свежее», в то время как это ново и свежо для Apple. Всё это уже давно нас окружает.

          Т.е. плоский дизайн уже был раньше. Но Эппл преподнесли его как новую моду, благодаря статусу своего бренда.
            +1
            Сами Apple ничего не сказали про «моду» :) Более того, у них в гайдлайнах написано «думайте в первую очередь о контенте, а не о графическом оформлении, уберите лишнее оформление, чтобы помочь пользователю сконцентрироваться на информации».

            Люди из Microsoft уже давно писали про это в ранних концептах Metro UI.

            Но многие дизайнеры из этого всего поняли только наиболее простую для понимая часть — «уберите оформление». Из-за информации и «фокусироваться на контенте» париться не стали. Ведь проще рисовать плоские кнопки, чем об информационном наполнении переживать :)
              +1
              Я думаю, все заметили этот дисклеймер, но весь остальной текст статьи противоречит ему.
          +2
          Лидеры рынка как и победители войн как раз и пишут историю, кто был первым, а кто вовсе не участвовал. Я устаю иногда отвечать на удивление своих друзей, почему у меня до сих пор нет айфона. Типа само собой разумеется, что он должен у тебя быть, иначе ты какой-то не такой (=
            +1
            Тссс, ни слова более, а то ща набегут макофаги и польют вас свежей порцией помоев.
              0
              Не польём. Метро рулит :)
            +53
            image
              +9
              Это не плоский дизайн, тут тени есть и элементы не в одной плоскости)
                +2
                за то цветов всего 6
                  +3
                  Но я так понял, что плоский дизайн как раз увеличивает число одновременно используемых цветов. Как раз из-за того, что лишает себя такого выразительного инструментария как объем.
                    +1
                    Вот по этому поводу вопрос. А что делать людям, не способным различать некоторые цвета?
                      0
                      Там еще используют контраст по яркости цветов.

                      2 нижних — эмуляция 2-ух видов дальтонизма:
                      image

                      Флет выглядит интересно, но иногда не поймешь, где кнопка, поле ввода, а где просто картинка.
                        0
                        Ну т.е. скорее не цвета используются в более широко, а контраст.

                        С учетом того, что с помощью объема можно сделать бесконечную вложенность элементов, а с помощью контраста — все-таки конечную, то мы усложняем разработку дизайна.

                        Если мы усложняем — тратим больше ресурсов на дизайн. Надо понять, а что же мы получаем взамен? Что нам такого дает плоский дизайн, чего мы не можем получить от объемного?
                          0
                          Используется контраст цветов по цветовому оттенку, насыщенности и яркости самого цвета.

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

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

                          P.S. Мне вообще плоские дизайны иногда напоминают скучные и стерильные больничные палаты. Нечем полюбоваться. Спасают только необычная типографика и иллюстрации.

                            +1
                            Идея идеологов «плоского дизайна» состояит в том, чтобы спасали не необычная типографика и иллюстрации, а легкий для восприятия текст и информативные иллюстрации :)

                            «Сплющили» его не потому, что тени надоели, а потому, что отказ от излишнего оформления позволяет пользователю сосредоточиться на информации. Посмотрите на обычные книги — там точно так же есть некий «интерфейс» — заголовки, подписи, номера страниц… если книга хорошо сверстана, то все эти элементы органично дополнят информацию.

                            Ну а перегибать палку не стоит. Когда из-за «отказа от оформления» человек не может понять, где кнопка, а где текст или где подрисуночная подпись в тексте, а где текст абзаца — это перебор.
                0
                Я на эту же тему периодически вспоминаю Norton Commander :)
                +3
                Но до этого дизайн был менее плоским.
                  +2
                  Но тень…
                    +1
                    > GRAPHICS_MODE=800x600
                    Пан буржуй с SVGA?
                  +1
                  Из всего выше прочитанного не понял одно. Почему в примере интерфейса элемент, с наивысшим приоритетом важности ("+"), справа вверху, а на самом «главном» месте элемент с приоритетом 6?
                    +2
                    Думаю, это не «важность», а «различимость», как-то так.

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

                    ИМХО так.
                      +2
                      Автор статьи как раз и говорит, что у дизайнера есть сила перепрограммировать привычную «линию взгляда». В данном примере дизайнер условного интерфейса ведет глаз пользователя из правого верхнего угла, подчиняя своей логике. И опровергая логику «естественного» взгляда, который должен идти из верхнего левого угла.
                      +4
                      Гм, а разве это apple а не ms его донес?
                        +1
                        А я думал google…
                          +1
                          Но похоже ми оба ошибались. Все крутое уже придумал apple. И принес в массы.
                        +15
                        Также есть ощущение, что Apple донёс плоский дизайн до самой широкой аудитории, и она полюбила такой дизайн
                        А я разлюбил эту аудиторию, которой нравятся плоский дизайн, глянцевые мониторы и дохлые аккумы в телефонах…
                          +2
                          95% людей любят глянцевые мониторы.
                            0
                            Моя девушка не знала о существовании матовых мониторов, пока я с ним ей ноутбук не подарил.
                            Она была в восторге от того как теперь удобно смотреть сериалы под любым углом.
                              0
                              Да, но отчего же производитель так не любит матовые экраны? С глянцевым модели всех линеек, а матовый еще поискать.
                          +3
                          Мне в этой статье, которую я перевёл, понравилось вот что.

                          1. Понравились три базовых принципа дизайна, которые имеют отношение к дизайну вообще, а не только к плоскому

                          2. А по теме плоского дизайна мне понравилось мнение о том, что это очередная мода. Раньше я никогда не видел эти два понятия вместе: дизайн и мода. Ну типа я из тех гномов, о которых говорит автор, и которые считают, что нужно просто делать хороший дизайн. А что еще есть тенденции в моде, к которым тоже стоит прислушиваться, это я только недавно начал чувствовать, ну точнее сознательно к этому относиться как-то. Потому и решил этим переводом поделиться.
                            +3
                            Позвольте не согласиться насчёт линии взгляда. Это верно только для человека, держащего смартфон в руках в первый раз. Человек привычный уже не замечает даже рекламу на сайтах и в приложениях. Его восприятие так эффективно фильтрует эту информацию, что иногда он даже не осознаёт, что она там есть. И наоборот: некоторые элементы для него как красная тряпка. Например, знак шестерёнки сразу вызывает ассоциацию «настройки». Это очень давная и глубокая аналогия и андроидовские три точечки или три полосочки ещё не успели её вытеснить.

                            Прелесть минималистичного дизайна в том, что он лаконичен. Экзюпери говорил: «совершенство это не когда нечего прибавить, а когда нечего убавить». И минимализм позволяет сосредоточиться на сути и мгновенно найти то, что надо. В т.ч. засчёт своей схематичности. Измените старые символы, механику интерфейса и никакой минимализм не поможет — люди будут тыкаться в ваше приложение как мухи в стекло.
                              +2
                              Плоский дизайн давно стучался в головы, сначала логотипы стали плоскими, потом иконки, это был вопрос времени. люди мыслят фигурами и не объемами.
                                +4
                                Также есть ощущение, что плоский дизайн у автора — это только мобильные приложения и только на платформе iOS.
                                  +1
                                  Не понимаю дизайны некоторых Flat иконок, они плоские, но отдают тень, значит есть что-то в них объемное??
                                  image
                                    +16
                                      0
                                      как для меня то бред. Ну на вкус…
                                        +2
                                        Всё стало на свои места. Я больше не смогу смотреть на эти длинные тени по-прежнему…
                                        0
                                        Иконки страшные то
                                        0
                                        Apple, хватит делать вид что ты трендсеттер в дизайне, когда ты менял свой интерфейс в плоскоту, такой уже была половина веба.
                                          +11
                                          Мода, мода, мода… Ради бога.
                                          Плохо что уже из-за этой моды не можешь отличить в интерфейсе текст от кнопки,
                                          а шрифты такие тонкие, что скоро просто испарятся.
                                          Но, блядь, так красиво и минималистично…
                                            +2
                                            Да если бы ещё красиво было… Firefox вот сделал себе «плоскую» иконку по умолчанию недавно, так приходится при каждом обновлении вручную заменять её старой, потому что это «плоское» говнище в панели задач натурально режет глаз и мешает работать.
                                              0
                                              Просто ради интереса, а в каком приложении у вас не получилось отличить текст от кнопки?
                                                0
                                                Вопрос не только в том, получилось у кого-то различить текст и кнопку. Надо еще учесть затраченные на это усилия и вероятность ошибки. Кроме того, если человек постоянно путает текст и кнопки или постоянно вынужден тратить на распознавание кнопок дополнительные усилия, его общее впечатление от продукта будет снижаться. И другим он такой продукт уже не посоветует.
                                              0
                                              Лично я считаю, что на 100% поддаваться тренду и моде не совсем правильно.

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

                                              То есть, добавить объема кнопке в плоском дизайне не так уж плохо, если это помешает пользователю заблудиться.
                                                0
                                                Стремится стоит к чистоте дизайна, но никак не к минимализму и к флету.

                                                Only users with full accounts can post comments. Log in, please.