Создание приложения Marvel для iOS с нуля .. Часть 4 | Скетч для разработчиков ..

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

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

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

Ниже вы можете увидеть другую картинку. Вторая версия немного лучше, правда? =) В этом посте мы расскажем, как этого добиться с помощью скетча.

Ресурсы ..

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

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

Первые шаги …

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

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

Конфигурация, плагины и приложения ..

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

Плагины:

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



Создавайте приложения для iOS 10 с помощью Sketch и Swift 3
Создавайте приложения для iOS с помощью Swift. Создайте приложение для чтения новостей из Sketch в App Store. designcode.io



Еще одна вещь, прежде чем мы начнем. Наш скетч становится необычным со всеми этими плагинами! Чего-то не хватает, крутого. Иконки! Иконки - это такие вещи, которые на протяжении всего жизненного цикла проекта могут стать беспорядочными, правильное обращение с элементами - это то, с чем нам может помочь IconJar.

Проэкт ..

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



Coolors
Создавайте идеальные цветовые комбинации для своих дизайнов. coolors.co



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

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

Создание нашего AppIcon ..

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

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

Вы можете выделить текст и фон и выровнять их с помощью верхней панели инструментов справа.

Далее всплеск !!

По значку мы можем легко получить наш экран-заставку. Создайте новую страницу в своем эскизном проекте, щелкнув знак + на панели инструментов страниц. Дважды щелкните, чтобы изменить имя, назовите его: экраны. Щелкните белый холст и нажмите A. Откроется меню монтажной области. Это меню содержит предварительно настроенный холст, позволяет выбрать iphone 7. Щелкните новую монтажную область, нажмите cmd + R, переименуйте ее в Splash.

Не забудьте переключить Цвет фона и Включить в экспорт и добавить наш красный цвет .

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

Экран символов…

Это самый сложный экран в проекте, но волноваться не о чем. Итак, приступим.

Как и раньше, нажмите A, выберите iPhone 7 и назовите новый артборд Герои ». На этом экране будет использоваться несколько компонентов Apple, например : панель навигации и строка состояния. Для этого давайте скопируем компоненты из эскиза шаблона ios Design.

Просто скопируйте и вставьте панель навигации и строку состояния в новую монтажную область. Как Беллоу.

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

Символ становится группой, состоящей из разных вещей. Избавимся от некоторых из них. Нам не нужны Закрепить влево или Редактировать.

Давайте изменим цвет фона нашей монтажной области, переместим навигацию и строку состояния на y = 0 и изменим цвет элемента Панель внутри группы Панель навигации / Черный на наш красный. Пока мы так выглядим.

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

Значки сетки и строк

  • Создайте прямоугольник, нажав R. Дайте ему ширину 26 пикселей и высоту. Вы можете удерживать shift при создании формы, чтобы сделать ее ровной.
  • Увеличьте масштаб с помощью cmd + и добавьте другие прямоугольники. Поиграйте с этим, придавая форму, которая вам нравится.

  • Убедитесь, что все правильно выровнено.
  • После небольшой игры вы создадите что-то похожее на это.

  • После этого давайте сгруппируем все вместе с помощью cmd + g. Следующим шагом после группировки, в данном случае, является нажатие на значок «создать символ» на верхней панели инструментов.

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

Завершение панели навигации ..

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

После группировки создайте символ.

Это позволит нам теперь размещать эту панель навигации на любом другом артборде, просто щелкнув по вставке ›символ› navigationBar. Потрясающие!!

Tableview Row ..

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

  • Создайте прямоугольник R.
  • Измените его имя на Row, cmd + r.
  • Добавить изображение персонажа в проект
  • Измените его форму, чтобы он выглядел как изображение большого пальца
  • Поместите внутри строки, как показано ниже:

  • Добавьте заголовок с помощью T
  • Добавьте краткую биографию, снова используя T
  • Добавьте разделительную линию с помощью R, задайте для нее высоту 1 пиксель и ширину экрана.
  • Сгруппируйте все элементы вместе.
  • Выберите новую группу, удерживайте опцию и перетащите ее. Это скопирует группу. Легко, правда? После этого у вас должно получиться что-то подобное.

Сделай сам ...!

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

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

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

Дорожная карта для этой публикации постоянно растет, и в ближайшем будущем появится отличный контент, следите за обновлениями!

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

Ps: Если вам понравился этот пост, поделитесь им в твиттере, порекомендуйте на medium или и то, и другое =). Это действительно помогает мне привлечь больше людей. Большое спасибо ..