Разработка привлекательных реалистичных пользовательских интерфейсов

Original author: Mike Rundle
  • Translation
Cекрет разработки привлекательных интерфейсов заключается в реализме. Ваша задача — придать плоским элементам объём, используя свойства реальных объектов, вроде неровностей и шероховатостей, бликов и теней, различных текстур поверхностей. В идеале они должны выглядеть как предметы на вашем столе. Создавая классный интерфейс, в первую очередь нужно думать не «как», а «почему».


Объёмное мышление


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



Кнопка нарисована так, что выглядит немного приподнятой, у неё матовая поверхность, небольшая выпуклость и тонкий контур. В трехмерном пространстве источник света подсвечивает края объекта (чуть ярче на верхней кромке), а выпуклость даёт небольшое затемнение в нижней половине кнопки. Элемент совсем немного возвышается над поверхностью, поэтому тень у него небольшая.

В Pastebot — приложении от Tapbots — используются панельки похожие на пример кнопки выше и расположенные одна за другой:



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

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

Материал и поверхность


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

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



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



В новых версиях iTunes многие элементы вроде скроллбаров и кнопок были заменены на новые матовые.

Apple также стал использовать матовые текстуры в других своих разработках, особо это заметно в Final Cut Server. В интерфейсе этого приложения Apple отказался от блеска и добавил объёма элементам, чуть приподняв их над поверхностью. Иконки на кнопках тоже выглядят объёмными, благодаря минимальной тени. Панель интерфейса похожа на поверхность тёмного текстурированного металла и всё приложение выглядит как панель управления высокотехнологичного оборудования.



Вот несколько примеров, показывающих, как разные типы поверхности влияют на внешний вид предмета:



Когда вы в следующий раз захотите нарисовать какой-нибудь блестящий объект, задумайтесь, с каким материалом вы работаете: пластик, стекло, алюминий? Если рисуете предмет с матовой поверхностью, подумайте насколько она будет текстурирована и зерниста: бумага, наждачка, картон или алюминий как на Маке? Есть ли прозрачность? Вам хочется нарисовать гиперреалистичный материал или имитацию?

Несколько трюков


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

Noize Layer (Слой с шумом)
Ключевая деталь в матовых поверхностях — зернистость. Простейший способ сделать такую текстуру это создать слой с однотонной заливкой, а затем добавить шума, используя фильтр Noize. Важно не переборщить и сделать ёё едва заметной.



Radial Highlights (Круговое освещение)
Главный источник света, как правило, находится сверху, но это не значит, что вы не можете добавить ещё один источник для придания большей выразительности. Ниже показана нарисованая мною панель навигации для iPhone-приложения, в которой используется лёгкая круговая подсветка для придания объёма. Blend Mode (Режим смешивания) был установлен на Overlay для высветления и повышения насыщенности фона. Прозрачность слоя уменьшена, чтобы не получилось излишне ярко. Также заметьте, что верхняя кромка панели дополнительно подсвечена для создания эффекта объемной поверхности.



Layer Styles (Стили слоёв )
Стили — ключевая часть моего рабочего процесса, я использую их везде. Обычно я рисую векторный объект, устанавливаю параметр Fill на 0% и начинаю использовать стили. Любой сможет добавить простую тень при помощи Drop Shadow, но если вы проявите изобретательность в работе со стилями, вы сможете делать по-настоящему интересные вещи. Например, можно использовать всего один Stroke, но эффект обводки можно несколько раз сымитировать с помощью Inner Glow и Outer Glow, воспользовавшись свойствами Spread и Choke и превратив свечение в четкие линии.

Пользуясь этим приёмом вы сможете с минимальными усилиями добиться множества эффектов. Ниже представлены несколько стилей для скругленных прямоугольников с использованием однопиксельных свечений и теней. PSD-файл с примерами распространяется по лицензии Creative Commons.



Действуйте тоньше


Когда в интерфейсе что-то режет глаз, он выглядит как подделка, нечто, чего не может быть в реальности. Напоследок несколько советов, которые помогут вам избежать многих ошибок при разработке реалистичных интерфесов:
  • Всё должно быть четко. Никакого мыла в линиях и на кромках объектов.
  • Всегда используйте прозрачность. Не бывает ничего абсолютно черного или белого, темного или светлого.
  • Старайтесь используйте вектор, когда это возможно, т.к. растеризовать вы всегда успеете. Не используйте Free Transform для векторных объектов, только Direct Selection Tool чтобы двигать отдельные узлы.
  • Экспериментируйте с Layer Styles. Например, чисто белое внутренне свечение излишне грубо и выпячивает объект. Но используя режим смешивания Overlay, вы оживите объект, повысив насыщенность цвета.
  • Тени разрушат ваш дизайн, если не использовать их с умом. Элементы интерфейса должны быть вплотную к поверхности, поэтому используйте размер тени в 1-3 пикселя и расстояние от объекта 0-3 пикселя. Это не WordArt.
  • Чтобы сохранить объект в формате PNG или GIF, сперва конвертируйте слой в Smart Object, а затем растеризуйте его. Это сохранит установленные режимы смешивания цвета.
  • При добавлении текста на элемент, он должен быть либо выпуклым (с тёмной однопиксельной тенью), либо вдавленным (белая однопиксельная тень), но никогда не на одном уровне с поверхностью кнопки.
  • Объекты из реального мира редко имеют идеально прямые углы. Используйте слегка скругленные уголки, чтобы добавить реализма.
  • В реальности все предметы отбрасывают тень. Если только вы не рисуете вампиров и хотите, чтобы ваш объект выглядел объёмным, добавьте ему тень, пусть даже и почти незаметную.
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 49

    0
    Прям в тему, как раз искал подобную статью. Спасибо)
      +3
      А почему нельзя использовать Free Transform для векторных объектов?
        +3
        В пиксел не попадешь
          +14
          В пиксель не попадёте.
            +3
            Ну нельзя же так критично, а то новички примут на веру и никогда этого делать не будут. Да, при ресайзе не попадешь в пиксель, но кто потом мешает передвинуть отдельные узлы так, чтобы все встало ровно?

            Я к тому, что ресайзить можно, но только с умом.
              +5
              С умом все можно
            –1
            Почему же нельзя, можно, но, например, бокс со скругленными углами растянется неправильно. Давно жду когда Adobe добавит эту фичу в фотошоп как и иллюстраторе, чтобы углы не деформировались.
              0
              Шифт?
                0
                Shift нажми
                  +2
                  Окей, равномерно — да, можно, а если только по горизонтали или только по вертикали — нет?
                      0
                      а для илюстратора можно сделать сетку для 9slice scale…
                      0
                      Есть инструмент «Стрелка». Выделяйте ей нужные точки фигуры и двигаете их по горизонтали. Хотя, тоже надо быть внимательным, чтобы полупрозрачного пикселя не осталось.

                        0
                        Благодарю)
                          –10
                            +1
                            Есть маленький хак. Чтобы не осталось полупрозрачного пикселя нужно двигать точки при масштабе отображения 100%
                            А при зажатом Shift в любом масштабе не будет пикселить, но двигает сразу на 10px =)
                        0
                        в фотошопе я пользуюсь белой стрелкой, чтобы у шейп-лейеров края пиксель в пиксель подгонять.

                        А в иллюстраторе есть небольшая хитрость: для прямоугольника со скругленными углами я никогда не пользуюсь инструментом Rounded rectangle, а рисую простой прямоугольник и применяю в нему эффект Effect > Stylize > Round Corners..., где вы в режиме превью можете задавать абсолютно любой радиус скругления, и, что самое важное, ваш прямоугольник, а точнее, его углы скругленные, будут трансформироваться пропорционально. Потом, при необходимости, эффект можно разобрать.
                      +4
                      Класс, давно заметил, всё строится на мельчайших деталях, если не лениться и учитывать их, то гарантированно получишь хороший результат. Это относится не только к построению реалистичных интерфейсов. Я даже думаю, что все люди умеют рисовать, просто ленятся, т.к. рисунок — это просто куча мелочей соединённых воедино.
                        +11
                        Ага, философ
                        0
                        Отличная статья! Много интересных, и на мой взгляд, правильных заметок. Привычное глазу, всегда воспринимается лучше.
                          +1
                          Мое мнение, интерфейс в первую очередь должен быть удобным и только потом красивым. Без должного проектирования и продумывания интерфейс не получится привлекательным.
                            +7
                            Должное проектирование и продумывание + грамотное графическое исполнение = действительно хороший Интерфейс
                              0
                              Ну почему же, мне кажется, при должных навыках можно достаточно быстро набросать привлекательный на глаз интерфейс, и с ним даже можно будет работать. Проблемы появятся, если с этим интерфейсом прийдётся работать много и часто! Тут я с вами согласен, в первую очередь интерфейс должен быть удобен.
                                0
                                поэтому, чтобы все по феншую было, надо сначала прототип сделать в индизайне, у которого есть многостраничность, инструменты рисования и возможность использования интерактивных кнопок и ссылок внутри документа и на урлы. а потом уже шкурку для интерфейса рисовать. Часто, к сожалению, дизайнеры задумываются только о внешней части интерфейса, забывая, что удобство пользователя стоит во главе угла.
                                0
                                Может кому пригодится, создание реалистичных кнопок на CSS3.
                                0
                                Очень здорово, спасибо, крайне пригодится для разработки интерфейсов, пусть не приложений, а курсов дист. обуч, но тут тоже полезно)))
                                  +1
                                  Блин, всегда завидовал людям, которые умеют так рисовать!

                                  Обожаю подобные статьи со вкусными картинками — очень вдохновляет! Спасибо.
                                  *ушел рисовать*
                                    +1
                                    Хорошая статья приятно иллюстрирована. Думаю, что тем, кто изучал «основы дизайна» в Вузе тоже будет полезно соотнести свои знания именно с веб-средой. В общем, спасибо автору. :)
                                      0
                                      Автор. Спасибо! Статья супер. В закладки! Жду ещё :)
                                        +2
                                        Ну вот, всем все рассказал :)
                                          +10
                                          365psd.com/
                                          Каждый день новый пример в psd.

                                          По исходникам многое становится очевидным.
                                            0
                                            Ох, это-ж гениальный сайт. А я коллекцию свою собирал таких частей
                                            +1
                                            Черт, а этот приём с шумом хорош!
                                              +1
                                              прерватив свечение в четкие линии.


                                              превратив, все-таки )
                                                0
                                                В разделе «Действуйте тоньше» первый абзац лучше не включать в список ) Судя по контексту.
                                                  0
                                                  О, действительно, проглядел. Спасибо)
                                                  –1
                                                  Спасибо, очень полезная статья. Я хоть и программист, а рисовать приходится довольно часто. Теперь не страшно будет смотреть на свои работы:)
                                                    0
                                                    Очень полезный совет о конвертировании слоя в SmartObject с последующей его растеризацией для сохранения режима смешивания цвета при сохранении в PNG.
                                                    Не знал об этом, спасибо!
                                                      0
                                                      Тоже не знал.

                                                      А я перед сохранением склеиваю слои. Кустарно, но эффект тот же :)
                                                        0
                                                        А если нужно сохранить какое-то полупрозрачное свечение с нестандартным режимом смешивания цвета?
                                                          0
                                                          и я не знал, склеивать тоже нужно, чтобы что то на нижнем слое было… не удобно (
                                                          теперь буду SmartObject пользоваться, спасибо :)
                                                        –2
                                                        Спасибо за перевод, но не плохо бы было добавить ссылку на оригинал flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php
                                                          +1
                                                          Все достаточно верно написано, хотя ничего принципиально нового тут не исследовано, но новичкам будет полезно.
                                                          Я тоже плотно занимаюсь интерфейсами, сейчас осваиваю iPhone 4 с новым разрешением и iPad — там вообще все дико интересно. обычные айфоны, Blackberry и Android уже освоены — с ними проблем нету. Кнопочки-фусечки получаются нормуль…
                                                          кстати, для того, чтоб заслайсить кнопку, я не растеризую ее, а создаю новый слой поверх, выделяю нужные мне слои вместе с этим пустым (например, слой самой векторной кнопки, иконка и текст на ней), Cmd+E сливаю в один слой, все эффекты, тени и прочая — растеризуются корректно. далее Cmd+щелчок на имени этого слоя, чтобы выделить все его составляющие (включая едва видимые прозрачности от теней), Image > Crop, чтобы отсечь все ненужное. И далее Cmd-щелчок на иконке глаза в палитре слоев, чтобы сделать невидимыми все слои, кроме этого одного. И далее — File > Save for Web, PNG-24 = уже на автомате делаю все такие операции (надо будет экшен написать), и любую кнопку перегоняю в полупрозрачный PNG за считанные секунды.
                                                            +1
                                                            Сложно как-то :)
                                                            Попробуйте выделить все слои -> Duplicate Layers… -> File — New, и в новом документе Image -> Trim -> Transparent pixels
                                                            Ну и всё, отдельный документ, обрезанный до непрозрачных пикселей и со всеми слоями.
                                                            Если в экшн эти два действия записать, вообще моментом получается.

                                                            Возможно, мне изменяет память, но при сливании эффекты нижнего слоя применяются ко всему объединённому изображению. Поправьте, если не так.
                                                              +1
                                                              Если выделяете верхний и нажимаете Ctrl+E — то применятся эффекты нижнего. Если выберете оба — эффекты останутся, как есть, но если под ними фон, увидите, что слетели режимы наложения. По возможности лучше оставить все с эффектами до конца, а потом выделить все слои и слить.
                                                                +1
                                                                Спасибо.
                                                                Собственно, поэтому и стараюсь копировать все слои без слияния.
                                                            0
                                                            Чтобы сохранить объект в формате PNG или GIF, сперва конвертируйте слой в Smart Object, а затем растеризуйте его. Это сохранит установленные режимы смешивания цвета.

                                                            Можете объяснить/проиллюстрировать в чем тут смысл? Я всегда без зазрения совести использовал Save For Web и не замечал никаких искажений.
                                                              +1
                                                              666

                                                              Омен?

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