Connect with us

Дизайн и прототипирование

Sketch туториал для iOS разработчиков

Готовьтесь улучшить свои дизайнерские навыки!

SwiftBook

Опубликовано

/

     
     

Будучи iOS разработчиком, я работал в нескольких проектах без дизайнера, и это, надо сказать, очень тяжело.

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

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

Выбираете безопасный подход? Сначала определитесь с дизайном, потом пишите код.

Но как вы можете создать дизайн без дизайнера?! Отличный вариант – это Sketch (Скетч).

Sketch – отличный инструмент для создания логотипов и пользовательских иконок. Он векторный, а значит вы можете изменять размер без потери качества. Так как он включает Artboards (полотна) по размеру устройств iPhone и встроенный шаблон UIKit, то вы можете также использовать Скетч для создания макетов для итерации дизайна. Кроме того, Скетч достаточно прост для того, чтобы занятый разработчик быстро ухватил его суть.

В этом туториале вы узнаете, как:

  • Создать макет, используя шаблон UIKit.
  • Создать иконки с помощью Vector Tool.
  • Создать иконки, комбинируя основные фигуры.
  • Экспортировать изображения в Xcode.

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

2

Поехали!

Перво-наперво, вам нужен будет Sketch. Скачайте 14-дневную пробную версию на www.sketchapp.com. Активация лицензии стоит $99.

После того как вы установите Sketch, откройте его и расслабьтесь, вам предстоит интересное путешествие!

Далее я покажу вам, как использовать различные элементы пользовательского интерфейса в Sketch и вы сможете создавать различные элементы. Обратите внимание, что все, что вы делаете – это только обучение. После того, как вы создали что-то, вы можете это безопасно удалить, ведь дальше в туториале вам это уже не понадобится.

Итак приступим!

Шаблоны

Шаблон iOS UI Design представляет собой коллекцию компонентов UIKit в векторном формате. У него есть Tab Bar, Nav Bar, Table View, и многое другое. Вы можете использовать его в качестве “плацдарма” для создания макетов.

Давайте приступим. Выберите File\New From Template\iOS UI Design , и вы увидите следующее:

3

Обратите внимание, что существует опция Material Design для пользователей Android.

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

Artboards

Вы можете рисовать в любом месте бесконечного полотна Скетча, но если вы создаете тестовый шаблон приложения с несколькими экранами, то вам нужно использовать Artboards. Artboards организует слои внутри зафиксированного фрейма. Когда вы экспортируетеArtboards, все внутренние слои объединяются в один файл. Представляйте их как сцены View Controller на Storyboard.

Давайте протестируем Artboards. Выполните следующие шаги, чтобы создать новый Artboards:

  • С зажатым пробелом перетаскивайте курсор до тех пор, пока у вас не появится чистая площадь холста на экране.
  • Нажмите кнопку Insert и выберите Artboard из списка.
  • На правой панели выберите iPhone 6.
[icon-box icon=star-full width=1] Данное изображение и некоторые другие изображения в этой статье взяты из старой версии шаблона iOS UI. Хотя расположение элементов пользовательского интерфейса может поменяться, но инструкции туториала применимы.
[/icon-box]

4

Вы должны увидеть пустую Artboard под названием “iPhone 6” в портретном формате. По умолчанию, вновь созданная Artboard охватывает любые свободно плавающие элементы, которые она перекрывает. Если вам это не нужно, просто очистите холст.

Вы можете добавить столько Artboard, сколько вам нужно. У Скетча есть размеры для iPhone, Apple Watch, и даже для iPad Pro. Если вам когда-нибудь понадобится избавиться от Artboard, просто нажмите на название и нажмите “удалить”.

[icon-box icon=star-full width=1] Если вам нужна Artboard произвольного размера, вы выбираете Insert\Artboard , а затем растягиваете границы на любую длину на вашем холсте.
[/icon-box]

Скопировать и вставить

Теперь, когда у вас есть Artboard, перетащите несколько элементов из шаблона UIKit. Начните с Navigation Bar (панели навигации), Tab Bar (панели вкладок) и Table View Cell (ячейки таблицы).

Хотя в Скетче вы можете просто скопировать и вставить (⌘C и ⌘V), трудно предсказать, где вставленный элемент будет в конечном итоге. Вместо этого Option-Drag элемент, и ваша копия будет там, где ваша мышка ее оставит.

5

[icon-box icon=star-full width=1]

Сочетание клавиш ⌘D дублирует предыдущее действие. Option-Drag с ⌘D удобная комбинация для создания нескольких копий:

  • Option-Drag -ячейки таблицы непосредственно под собой
  • Спамьте ⌘D для создания оставшихся ячеек.
[/icon-box]

Основные фигуры

Во-первых, создайте для работы новую Artboard при помощи Insert\Artboard и нарисуйте квадрат в любом месте на холсте.

Теперь, давайте создадим несколько фигур! Нажмите Insert\Shape, чтобы открыть меню доступных опций.

6

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

  • L : линия
  • O : овал
  • T : текст
  • R : прямоугольник

Сможете ли вы нарисовать, зная все это, такого робота (вам, возможно, придется изменить настройки шрифта, чтобы получить такой же вид):

7

[icon-box icon=star-full width=1] Удерживайте клавишу Shift при перетаскивании, чтобы пропорционально растягивать фигуры, например квадраты и круги.
[/icon-box]

Стилизация формы

Фигуры готовы, но клиент не будет впечатлен, если они красиво не оформлены! Вы можете использовать Inspector справа для изменения свойства слоя, например его цвета и радиуса границы. Инспектор можно сравнить с Attributes Inspector в Xcode.

8

Вот некоторые опции, с которыми вы познакомитесь в этом уроке:

  • Position/Size (Положение / Размер): Когда трудно перетащить мышкой в какое-то конкретное место, введите точное число. Нажмите на иконку замка, чтобы сохранить пропорциональность.
  • Radius (Радиус): Это слайдер для регулировки углового радиуса прямоугольника.
  • Opacity (Непрозрачность): Полезная фишка, помогающая отследить изображения. Подробнее поговорим об этом позже!
  • Fills (Заливка): Используйте “пипетку” для выбора цвета, чтобы изменить цвет заливки слоя, или снимите флажок и у вас будет прозрачная заливка.
  • Borders (Границы): Установите толщину и цвет границы, или отключите эту опцию полностью.
[icon-box icon=star-full width=1] Скетч имеет встроенную “пипетку” для выбора цвета, ее можно активировать с помощью Control-C. Она работает не только за пределами окна в Скетче, она автоматически устанавливает цвет выбранного фигуры.

9

[/icon-box]

 

Две иконки этого туториала используют pill shape (форму таблетки) в качестве строительного блока. Попробуйте создать сами одну из прямоугольника:

  • Создайте прямоугольник, используя горячую клавишу R.
  • Скруглите углы, установив Radius (радиус) на большое значение, например 100

10

Вы также можете изменить некоторые другие настройки, как упоминалось выше.

Список слоев

Laye List в левой части панели содержит все слои в файле. Слои, которые появляются в списке выше, перекрывают нижние. Это похоже наView Hierarchy в Storyboard.

Groups организуют слои логически. Вы также можете переместить несколько слоев, как единое целое, если они сгруппированы вместе. Вы также можете экспортировать группу слоев в одном изображении. В Layer List, группы представлены в виде иконок папок.

Вот список наиболее распространенных сочетаний клавиш для управления Layer List:

  • ⌘G : Группирует фигуры вместе. Используйте ⌘-Shift-G для их разгруппировки.
  • ⌘R : Переименовывает выбранный элемент.
  • ⌘-Option-Up/Down : Перемещает элемент вверх или вниз в списке слоев.
  • ⌘-Shift-L : Блокирует слой для того, чтобы он стал некликабельным. В следующем разделе мы покажем его пользу.

11

[icon-box icon=star-full width=1] Считается хорошей привычкой переименовывать слои в нечто значимое, например “Tab Bar”. После того, как он будет завален другими слоями, вы сможете легко найти его в списке слоев. Вы можете использовать ⌘-Option-Up для того, чтобы переместить его на передний план. Старайтесь не пользоваться простым перетаскиванием, потому что это может перемешать порядок слоев и вы непреднамеренно можете их сгруппировать. Поверьте, иногда это случается
[/icon-box]

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

Vector Tool

Рисование кругов, квадратов и линий — это, конечно, весело, но довольно ограничивающе. Но с Vector Tool вы сможете нарисовать любую форму, которую вы захотите!

Фигуры с прямыми линиями

Вы можете нарисовать любой многоугольник, просто “кликом”: точки, там где вы кликаете будут углами фигуры.

Давайте сделаем многоугольник:

  1. Нажмите V для активации Vector Tool.
  2. Начните, кликая там, где будут углы трапеции.
  3. Закройте контур фигуры, кликнув на исходную точку.
  4. Нажмите кнопку Edit, и передвигайте точки индивидуального вектора так как вам нравится, чтобы изменить фигуру.
  5. Добавьте Fill.
  6. Удалите Border.

12

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

Вращение копии

Обычная трапеция – простая фигура, но вы можете использовать ее, чтобы получить другие фигуры с помощью функции Rotate Copies(вращать копии). Rotate Copies создает несколько копий фигуры и располагает их вееером по кругу, как лепестки цветка. Давайте попробуем:

  1. Выберите Layer\Paths\Rotate Copies.
  2. Создайте 3 копии (вместе с первоначальной их должно быть 4).
  3. Перетащите белую точку, которая представляет собой центр круга, чтобы создать иконки такие как банковские логотипы, сюрикены, или вертушки.

13

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

Ножницы

Прямо над Rotate Copies есть еще одна дополнительная опция в меню, которая называется Scissors (ножницы). Здесь вы можете посмотреть, как легко можно создать индикатор активности WatchKit с помощью инструмента Ножницы:

  1. Создайте круг (для его создания используйте клавишу O удерживайте Shift + клик).
  2. Удалите Fill (Заливку).
  3. Увеличьте толщину Border (рамки) до 25.
  4. Выберите Layer\Paths\Scissors.
  5. Отрежьте сегмент круга, нажав на его верхнюю левую часть.
  6. Рядом с Borders, нажмите на кнопку Gear (шестеренка), чтобы увидеть всплывающее меню.
  7. Выберите опцию rounded ends (закругленные края).

14

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

[icon-box icon=star-full width=1] Вы можете сделать длину кольца любой, просто добавив дополнительную точку на окружности, прежде чем отрезать. Чтобы сделать это, нажмите кнопку Edit и однократно кликните в любом месте по направляющей круга.
[/icon-box]

Режимы и рычажки

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

Но постойте – прямоугольник также имеет четыре векторные точки. Что происходит? Разница между ними состоит в использовании кривых Безье.

15

Bezier Curves – это линии, которые вы можете согнуть в кривые, используя control points (контрольные точки). Скетч называет эти контрольные точки handles(рычажки). Каждая векторная точка идет с двумя рычажками, которые контролируют кривизну каждой стороны. Это означает, что кривизна линии определяется рычажком на каждом из ее концов. Это не так сложно, как кажется: в Скетче вы просто двигаете рычажки, пока кривая не будет выглядеть как вам нужно.

Скетч определяет четыре различных Modes (режимы) на основе положений рычажков векторной точки.

16

  • Straight (Прямой): Рычажки идут по сторонам от векторной точки, как если бы их не было совсем. Нет рычажков – нет кривизны.
  • Mirrored (Зеркальный): Рычажки имеют одинаковую длину и образуют прямую линию, как крылья самолета. Используйте это режим, чтобы создавать симметричные кривые.
  • Asymmetric (Асимметричный): Рычажки образуют прямую линию, но они могут быть разной длины.
  • Disconnected (Несвязанный): Рычажки расположены независимо друг от друга.

На практике создать кривые довольно просто. Просто дважды щелкните на векторную точку и кликните на Disconnected. И теперь играйтесь с каждым рычажком, как с рогами антенны, пока кривая не будет выглядеть правильно.

Теория Кривых Безье

Вам действительно не нужно знать всю “математику” кривых Безье, чтобы использовать Vector Tool – я в этом уверен! :] Но у меня есть без совершенно нематематическая аналогия, которая помогает мне понять, как компьютер рисует все это на экране.

Представьте большой шлем в бейсболе, но судья не смотрит и бегуны не добегают до углов. Следите за красной дорожкой.

17

Первая база и основная база представляют собой векторные точки. Вторая и третья это рычажки. Путь от первой базы до главной базы и есть кривая Безье.

18

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

Векторные рычажки в действии

Меньше слов, больше дела. Давайте используем наши новые навыки и создадим значок-маркер на карту:

  1. Создайте круг.
  2. Увеличение толщину Border до 15.
  3. Нажмите кнопку Edit и выберите нижнюю векторную точку.
  4. Измените режим с Mirrored на Straight .
  5. Перетащите нижнюю точку вниз, чтобы растянуть ее.
  6. Перетащите ползунок Corners на 35, чтобы закруглить углы.

19

Форма иконки – маркера на самом деле это просто круг с углом в качестве одной из своих точек. Легко! Вы еще встретитесь с этой иконкой дальше в туториале.

Создание пользовательских иконок

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

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

  1. Скачайте версию логотипа прямо из Интернета с низким разрешением.
  2. Перетащите логотип на Sketch.
  3. Выбрав изображение, с помощью инспектора уменьшите непрозрачность до 20%, чтобы его было легче обводить.
  4. Заблокируйте слой, нажав Command-Shift-L, чтобы вы случайно не сдвинуть его. Вы должны увидеть значок замка рядом с именем слоя.
  5. Нажмите V для активации Vector Tool.
  6. Кликните на все углы логотипа. Вам не нужно нажимать на кривую “R”, но в конце снова кликните на первый угол, чтобы закрыть векторный контур.
  7. Дважды щелкните в любом месте вдоль пути для редактирования (Edit).
  8. Поправьте те точки, которые не стоят точно на месте. Щипком вы можете увеличить масштаб.

20

Чтобы создать кривую буквы “R”, мы применим все наши полученные знания о векторных точках и модах.

  1. Дважды щелкните на верхний левый угол, и он изменится с Straight на Mirrored.
  2. Изменените его на Disconnected.
  3. Потяните изогнутую кривую вправо.
  4. Подтяните другой рычажок к векторной точке.
  5. Найдите векторную точку на другом конце кривой “R” и дважды щелкните по ней.
  6. Измените ее снова на Disconnected и подвигайте рычажки. Вам, возможно, придется поработать с двумя точками кривой, прежде чем у вас получится правильно.

21

К счастью, логотип RW имеет только одну кривую. Вы можете использовать этот способ для более сложных логотипов — у вас просто будет больше кривых для работы. Проект, который вы позже скачаете, включает в себя грубую попытку создать логотип птицы Swift. Я использую Tab для переключения между векторными точками, чтобы показать положение рычажков.

22

Комбинируем фигуры

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

В программировании есть логические операторы AND, OR, и XOR. В Скетче есть нечто подобное и называются они Boolean Operators, хотя и используют другую терминологию: такую как Union (объединение), Subtract (вычитание), Intersect (пересечение) и Difference (разница).

Union (объединение)

Union объединяет фигуры. Давайте используем эту функцию и объединим фигуры “таблетка” и “круг” для того, чтобы у нас получилось “облако”.

  1. Создаем “таблетку”, увеличив максимально Radius (радиус) прямоугольника.
  2. Создаем круг.
  3. Перемещаем круг так, чтобы он перекрыл таблетку.
  4. Выбираем оба изображения, и нажимаем кнопку Union.

23

Обратите внимание, как очертания двух фигур сливаются вместе. Вуаля! Получилось облако :]

Subtract (вычитание)

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

Иконка – маркер для карты из нашего предыдущего примера выглядит нормально, но все крутые ребята в настоящее время делают отверстие в виде пончика внутри. Вы можете сделать то же самое с помощью кнопки Subtract:

  1. Создаем иконку-маркер, но на этот раз убедитесь, что снята галочка с Border.
  2. Создаем небольшой круг и перетаскиваем его на маркер.
  3. В списке слоев перетащите слой с кругом на слой с маркером для того, чтобы объединить фигуры.
  4. Растяните треугольник на этом объединенном слое.
  5. Убедитесь, что слой с отверстием располагается над слоем с маркером.
  6. Нажмите на boolean-operator icon справа от имени слоя, чтобы увидеть всплывающее меню.
  7. Выберите в меню Subtract.
  8. Выберите подслой с отверстием в виде дырки от бублика и используйте клавиши со стрелками для того, чтобы выбрать точную позицию.

24

Вот так! Вычитание, конечно, сложнее. Но есть несколько важных моментов:

  • Вы можете ставить слои друг над другом, чтобы объединять их. Круто?
  • При объединении фигур, Скетч выдвигает предположение, какой именно оператор вы намеревались использовать. Если вы видите, что выбран вариант None (никакой не выбран), то Скетч автоматически выбирает какой-то один самостоятельно.
  • Для вычитания важен порядок. Убедитесь, что слой с отверстием всегда самых верхний. Если ваши фигуры исчезают, попробуйте изменить порядок подслоев в Layer List.

Заливка против Обводки

В этой части урока вам понадобится начальный проект для Sketch. Дважды щелкните по нему, чтобы открыть. Вы должны увидеть следующее:

25

Этот стартовый проект включает в себя одностраничный макет и несколько пользовательских векторных иконок — внимательно рассмотрите, как они были сделаны. Есть также несколько Artboards “до и после”, в том числе несколько иконок для tab bar, которые вы будете использовать в этом разделе.

Иконки для tab bar меняют цвет в зависимости от выбранного состояния, но у некоторых иконок много пустого пространства, и изменение цвета будет не явным. В таких ситуациях Apple Human Interface Guidelines рекомендует использовать выбранную версию иконки с заливкой как selectedImage. Макет приложения RWDevCon содержит иконки для Tab Bar как с заливкой, так и просто обведенные.

26

В стартовом файле проекта для Скетча, который вы уже загрузили, есть Artboard под названием Calendar Starter с несколькими “строительными” блоками, совместив которые, вы получите иконку календаря. Эти “строительные” блоки – прямоугольники и таблетки, и вы уже знаете, что нужно делать.

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

  1. Откройте файл и раскройте Calendar Starter Artboard в списке слоев.
  2. Выберите Calendar Body и подслои Separator.
  3. Нажмите на Subtract.
  4. Выберите Shift-ом слой Right Hole и Subtract его из приведенной выше фигуры.
  5. Также Subtract вычтите слой Left Hole.
  6. Выберите Shift-ом слой Right Ring и нажмите на Union.
  7. Добавьте слой Left Ring, используя Union.

27

Вы должны в конечном итоге получить одну фигуру, содержащую все подслои иконки календаря. Вся иконка должна быть зеленой, кроме областей, которые мы вычленили, эти области должны быть пустыми. Если у вас возникли вопросы, используйте Calendar FillArtboardприведенный ниже для сравнения.

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

  1. Найдите на холсте Calendar Fill Artboard.
  2. Раскройте Calendar Fill Artboard в списке слоев.
  3. Раскройте слой Calendar Body и выберите слой Separator.
  4. Увеличьте высоту Separator до 35.

28

Все, что нужно было сделать, чтобы создать версию иконки календаря-это изменить разделительную линию на квадрат. Если Скетч не позволяет вам перемещаться на точную высоту, вы можете просто ввести цифру в Inspector.

Круглые аватарки

В макете RWDevCon у каждого спикера круглая картинка в профиле. Для получения такого эффекта, вам нужно использовать функцию Mask, очень похожую на Subtract. Но вместо того, чтобы проделывать дырки, Mask обрезает то, что снаружи.

Давайте создадим аватарку:

  1. Раскройте Greg Before Artboard в списке слоев.
  2. Внутри этого Artboard создайте круг, достаточно большой, чтобы уместить его на лицо.
  3. Выберите слой greg и слой oval, который вы только что создали.
  4. Убедитесь, что маска слоя (в данном случае, овал) находится в самом низу.
  5. Нажмите на кнопку Mask.
  6. Раскройте только что объединенный слой greg и выберите слой Mask.
  7. Добавите Border, и с помощью клавиш со стрелками отрегулируйте положение.

29

Убедитесь, что masking layer самый нижний. Это противоположно действие вычитанию, когда слой с “дыркой” самый верхний.

Экспорт изображения

Вы можете экспортировать только один слой, нажав Make Exportable в правом нижнем углу экрана.

Если вы хотите экспортировать несколько слоев, есть несколько способов сделать это:

  • Group: Когда слои группируются вместе, вы можете экспортировать группу как единое изображение.
  • Artboard: Все слои внутри Artboard экспортируется как единое изображение. Размер изображения основывается на фрейме Artboard.

Прежде чем экспортировать, проверьте ширину (Width) и высоту (Height) в Inspector. Эти размеры определяют @1x размер экспортируемого изображения.

Подсказка: Вместо того, чтобы изменять размера фигуры через нижний правый угол, используйте кнопку Scale (Масштаб). Scale гарантирует, что свойства стиля, такие как ширина границы и угловой радиус, останутся пропорциональными после изменения размера.

30

PNG

Скетч позволяет легко экспортировать изображения в различных форматах:

  1. В правом нижнем углу нажмите на Make Exportable.
  2. Нажмите на Plus, чтобы добавить копию @2x.
  3. Нажмите снова на Plus для того, чтобы добавить копию @3x.
  4. Нажмите на кнопку Export для того, чтобы сохранить файл в формате PNG на диск.

31

PDF

Вы, наверное, привыкли использовать копии @2x и 3x@ каждого изображения, но Скетч-это векторная программа, так что воспользуйтесь этим. Xcode принимает векторные изображения в формате PDF, которые похожи на SVG, но с информацией о размере.

  1. Нажмите на Make Exportable.
  2. Оставьте размер на 1x.
  3. Выберите PDF в качестве Format, и нажмите на Export.

32

Вы можете импортировать эту единственную иконку в PDF в Asset Catalog.

  1. Из Xcode откройте Images.xcassets.
  2. Создайте New Image Set.
  3. В Attributes Inspector изменените Scale Factors с Multiple на Single Vector.
  4. Сохраните вашу иконку в PDF в All изображения.

33

Xcode создаст соответствующие копии @2x и 3x@ PNG файлов во время билд-фазы. Вы также получите PNG файлы, что в конечно счете, облегчит управление меньшим количеством файлов.

Что дальше?

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

SwiftBook
Комментарии Facebook
Продолжить чтение
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Snapchat ждет редизайн

Чтобы справиться с замедлением Эван Шпигель объявил о планах сделать редизайн приложения.

Леонид Боголюбов

Опубликовано

/

Snap Inc. сегодня объявил о результатах работы в третьем квартале 2017 года. Они ниже ожиданий – за три месяца прибавилось 4.5 миллиона пользователей (против ожидаемых 8), а рекламные ставки снизились на 60% по сравнению с прошлым годом. Snap заработал 207.9 миллиона, что заметно меньше прогнозируемых 235.5 миллионов. На Spectacles компания потеряла 40 миллионов долларов.

Чтобы справиться с замедлением Эван Шпигель объявил о планах сделать редизайн приложения. Он наконец признал то, что Snapchat трудно использовать и отметил, что сейчас компания уже работает над значительным упрощением социальной сети:

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

Компания объясняет, что редизайн, скорее всего, будет «разрушительным» для бизнеса в краткосрочной перспективе, так как сейчас невозможно предсказать, как пользователи адаптируются к нему. Шпигель однако говорит, что Snap готов принять этот риск из-за потенциальных долгосрочных преимуществ.

 

 

Леонид Боголюбов
Комментарии Facebook
Продолжить чтение

Дизайн и прототипирование

11 оптических иллюзий в визуальном дизайне

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

Анна Гуляева

Опубликовано

/

Product-дизайнер и разработчик Балрадж Чана рассказал об оптических иллюзиях, которые часто можно наблюдать в продуктах.

За годы работы дизайнером продуктов я нашел множество визуальных аспектов, которые меня сильно удивляют. Я написал эту статью, чтобы помочь вам понять причины, почему некоторые из этих повседневных трюков оставляют вас озадаченными. Вы могли не понять этого сначала, но многие из методов работы с интерфейсами, логотипами или иллюстрациями являются оптическими иллюзиями. Без дальнейших объяснений рассказываю вам об 11 оптических иллюзиях, с которыми часто сталкиваются визуальные дизайнеры.

1. Иллюзия деления треугольника пополам

Выравнивание треугольника по центру тяжести

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

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

Которая версия математически центрирована?

Существует две теории этой занимательной иллюзии:

  • Неправильное масштабирование по постоянству. Иллюзия содержит элементы перспективы, которые увеличивают в нашем восприятии размеры более удаленных объектов, например, равносторонний треугольник может восприниматься как плоская картинка дороги в перспективе, когда верхняя вершина уходит в бесконечность, а нижнее основание выглядит как ближняя часть дороги.
  • Центр гравитации/центр области. Если зрителя просят найти точку середины, в конечном счете они найдут центр тяжести с равным распределением частей над ним и под ним. Центр тяжести равностороннего треугольника лежит ниже его середины, и существуют доказательства того, что люди выбирают в качестве центра нечто среднее между этими точками.

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

Шучу, эта статья не посвящена геометрии (но формула все равно верна). Центр тяжести может быть расположен на 1/3 расстояния от каждой стороны до противоположной вершины. Этот метод можно применить и к другим формам.

2. Вертикальная горизонтальная иллюзия

Это прямоугольник? Это самолет? Нет… это квадрат?!

Квадраты являются фундаментальными блоками любой системы дизайна. Их можно найти в карточках материального дизайна, пинах на Pinterest и снимках Dribbble.

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

Изображение в этом посте Facebook имеет соотношение сторон 1:1

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

3. Полосы Маха

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

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

4. Иллюзия Геринга

Оно живое!

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

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

5. Сетка Германна

Появляться или не появляться, вот в чем вопрос.

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

На пересечении линий появляются серые точки

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

6. Иллюзия одновременного контраста

Если два объекта одного цвета разместить на фонах разной контрастности, объекты будут выглядеть, как будто они разного цвета. Контраст – это король мира визуального дизайна, и этот эффект может отличаться для некоторых людей.

Текст на разных сторонах имеет одинаковый цвет

К сожалению, пока точно не выяснены причины этой иллюзии, но существует несколько теорий, одна из которых – латеральное торможение.

7. Иллюзия Манкера-Уайта

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

Причина иллюзии Манкера-Уайта… вы догадались, латеральное торможение.

8. Акварельная иллюзия

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

Это визуальное явление, известное как акварельная иллюзия, зависит от сочетания яркости и контрастности контура, которое приводит к эффекту распространения цвета.

Белый цвет внутри кнопки словно приобретает легкий оттенок цвета границы.

Я признаю, что эта иллюзия вводила меня в ступор несколько раз, и мне приходилось проверять цвет при помощи палитры.

9. Иллюзия Ястрова

Размер имеет значение?

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

Благодаря этой иллюзии мы воспринимаем одинаково изогнутые края разными

Как это возможно? Нет определенного объяснения тому, почему мы воспринимаем эти предметы как объекты разного размера. Одно из объяснений заключается в том, что мозг озадачен разницей в размере между большим и меньшим радиусами. Другими словами, из-за короткой стороны длинная сторона кажется длиннее, а из-за длинной стороны короткая сторона кажется ещё короче.

10. Иллюзия Корнсвита

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

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

Эта иллюзия создает похожий эффект, как и две вышеупомянутые, но кое в чем она отличается:

  • В примере полос Маха эффект возникает в зонах, близких к краю каждого оттенка. Иллюзия Корнсвита влияет на восприятие всей фигуры.
  • В иллюзии Корнсвита светлый край кажется светлее, а темный край – темнее. Это противоположно обычным эффектам контраста.

11. Иллюзия Мюллера-Лайера

Отклонение для оптимального визуального восприятия

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

Без отклонения буква e в LinkedIn и буква z в Amazon кажутся несбалансированными

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

Зачем нам нужно отклоняться от высоты в типографике?

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

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

Другие значимые иллюзии:

Анна Гуляева
Комментарии Facebook
Продолжить чтение

Дизайн и прототипирование

Год работы над дизайном WhatsApp

Несмотря на то, что WhatsApp принадлежит компании Facebook, он работает достаточно обособленно. Дизайнер Чарли Дитс рассказал о подходе WhatsApp к созданию дизайна продукта.

Анна Гуляева

Опубликовано

/

Несмотря на то, что WhatsApp принадлежит компании Facebook, он работает достаточно обособленно. Дизайнер Чарли Дитс рассказал о подходе WhatsApp к созданию дизайна продукта.

Я работаю дизайнером продуктов в Facebook почти четыре года. Я работал во многих командах: Groups, Sharing и Privacy. В прошлом году я получил прекрасную возможность начать работать над WhatsApp. Я знал, что создание дизайна WhatsApp будет немного отличаться от создания дизайна для Facebook. Но эта работа научила меня большему, чем я ожидал – я начала подходить к проблемам с разных сторон.

Я много узнал за последний год и хочу поделиться своими наблюдениями за дизайном Facebook и WhatsApp.

Сильные принципы

Продукт WhatsApp создается на основе специфических принципов. Они лежат в основе процесса принятия решений. Вот несколько примеров таких ценностей:

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

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

Если я рассказываю это дизайнерам из Facebook, они бурно реагируют. Они говорят что-то вроде: “Меня бы это злило!”, “Кто принимает решения о развитии продукта?”, “Не кажется ли, что у тебя нет контроля?”, “Можешь ли ты предлагать новые идеи?”

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

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

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

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

Вовлечение через пользу против пользы через вовлечение

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

WhatsApp подходит к проблеме другим образом. Мы пытаемся создавать функции, которые будут очевидно полезными. Если функция требует пояснения, то она не готова.

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

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

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

Инструменты и дизайнерские навыки

Мне действительно не хватает дизайнерских инструментов, которые используются при работе над продуктом Facebook. Их созданием занимается целая команда, чья единственная цель – сделать работу дизайнеров проще и эффективнее.

Для прототипирования я часто использую Origami, но в работе в Facebook мне помогали инструменты, которые не так подходят к моей текущей работе, так как у WhatsApp нет формализованного набора элементов интерфейса, и в нем не используется API Facebook Graph.

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

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

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

Уникальные проблемы

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

В Facebook одной из основ дизайна выступает идентичность пользователя. В WhatsApp мы не требуем использовать фотографию профиля. Мы не требуем имя пользователя. Когда вы не можете положиться на реальную личность, некоторые проблемы становятся менее упорядоченными.

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

Медленно и обдуманно

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

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

Ценность Facebook – “Двигаться быстро”. Создание проекта в Facebook может быть очень быстрым, но процесс его развертывания может занять время. Если бы у WhatsApp был похожий девиз, он звучал бы как “Двигаться медленно и обдуманно”. Мы тратим больше времени на стадии дизайна, потому что мы не поддерживаем внесение изменений на фазе разработки. Когда мы передаем дизайн инженерам, мы пытаемся отдать им как можно больше конечных спецификаций и прототипов. Поэтому стадия разработки проходит спокойно, что нравится инженерам. Потенциальный минус такого подхода – разработчики могут чувствовать себя менее вовлеченными в процесс создания продукта и более изолированными от принятия решений.

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

Итог

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

Анна Гуляева
Комментарии Facebook
Продолжить чтение

Календарь

ноябрь

17ноя - 19Весь деньТИЛТЕХ МЕДХАК

24ноя - 26Весь деньWhat the hack?!

25нояВесь деньSmart Taler 2017

25нояВесь деньLadies Code: время технологий

30нояВесь деньSmart Cars & Roads 2017

декабрь

5дек18:30- 22:00Яндекс изнутри: глазами iOS-разработчика

8дек - 9Весь деньКубок СTF России

9дек - 10Весь деньGames Gathering 2017

9декВесь деньЛекционный день по игровой индустрии

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков веб и мобильных приложений!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Наш Facebook

Популярное

X

Спасибо!

Теперь редакторы в курсе.