Главный принцип в проектировании любого интерфейса: изучить потребности пользователей, их целей при использовании программного продукта и особенностях взаимодействия с разными устройствами.
Подход подойдет при проектировании интерфейса в любой сфере бизнеса, если соблюсти все этапы:
- Проанализировать цели пользователей и сценарии для каждого устройства
- Спроектировать UX основного для пользователей интерфейса
- Перепроектировать под разные устройства, сохранив основную логику
- Подготовить UI-кит и рекомендации для разработчиков
Предыстория о проекте
Так как принципы мы разбираем на примере одного из наших проектов, коротко познакомим с ним. Подробнее читайте в портфолио.
Создание набора пользовательского интерфейса для веб-приложений в Adobe Photoshop
Как быстро сделать графический интерфейс на Python
Tomas Laurinavicius Last updated Sep 22, 2014
Read Time: 11 min
Разработка, с применением руководства по стилю, это чрезвычайно гибкий подход к современному веб-дизайну. В этом уроке я расскажу вам о разработке пользовательского интерфейса (User Interface), в то же время объясняя решения, которые позволят нашему интерфейсу быть максимально совместимым и универсальным.
Материалы урока
Для того, чтобы продолжить, вам понадобятся следующие (бесплатные) материалы:
- Шрифт Open Sans из Font Squirrel или Google Fonts
- Стоковое фото с Unsplash
- Faces из UI Faces
- Значок стрелки из Iconfinder
Подготовка документа Photoshop
Шаг 1
Откройте Photoshop и создайте новый документ (File > New…) используя настройки, показанные ниже. Вы можете использовать холст любых размеров, которые вы предпочитаете — в конце концов, интернет не имеет размеров.
Шаг 2
Давайте зададим несколько правил, чтобы наш интерфейс был организован и красив. Я не всегда использую сетку, но установка некоторых ограничений обеспечит аккуратность и согласованность. Перейдите в меню View > New Guide… и определите некоторые правила. Обычно я выбираю размер 1000px как начальную ширину веб-сайта, поэтому давайте сохраним наш набор с этими размерами.
Примечание: Наводящие линии, используемые в нашем уроке: по вертикали 100 пикселей, 600 пикселей и 1100 пикселей.
Совет: Вы также можете использовать плагин GuideGuide для Photoshop, чтобы сделать этот процесс еще быстрее.
Шаг 3
Придерживаясь правил для Photoshop, мы будем организовывать материалы для того, чтобы легко ориентироваться и редактировать. В рабочей среде нам понадобится этот набор UI, который будет использоваться много раз в качестве ориентира и ресурса для разработки, поэтому вам нужно его организовать (разработчики будут вам за это благодарны). Давайте создадим шесть групп слоев с именем Typography, Buttons, Forms, Avatars, Images и Colors.
Чтобы создать группы, перейдите в Layer > New > Group… и укажите для каждой из них название. Для быстрого создания группы просто щелкните на значок.
Определение типографии
Как сказал Оливер Райхенштейн, «веб-дизайн — это 95% типографии», это нужно запомнить. Прежде всего, нам нужно создать идеальную среду для нашей типографии; фон, который является нейтральным и легким для восприятия. Фон и типография должны иметь приемлимый уровень контрастности для чтения. Для этого урока давайте использовать тонкий светло-серый – это нейтральный цвет, но достаточно сильный, чтобы придать вашему приложению индивидуальность. Я установил цвет переднего плана на #e9eeef и нажал Alt+Backspace для установки фона.
Шаг 1
Откройте группу Typography , выберите инструмент Horizontal Type Tool (T) и выберите шрифт Open Sans. Open Sans — это современный шрифт, который имеет множество разных вариантов толщины и имеет профессиональный, но приветливый вид. Он достаточно стильный для заголовков, но и также достаточно практичен в качестве основного текста в Интернете.
Open Sans имеет множество вариантов, но для нашего UI я буду использовать только один шрифт. Имейте в виду, что вы должны быть осторожны при использовании более двух шрифтов для ваших проектов, поскольку можно быстро запутаться.
Я установил цвет переднего плана на черный #000000 , затем с помощью инструмента Horizontal Type Tool (T) и ранее упомянутого шрифта Open Sans с параметром Light и размером 55px вписал заголовок раздела. Мы будем использовать тот же размер и стиль для будущих заголовков, чтобы сохранить согласованность.
Шаг 2
Теперь нам нужно создать иерархию для нашей типографии. Пожалуйста, ознакомьтесь с этой статьей как создать модульную типографическую шкалу Яна Йетса, чтобы лучше понять науку и значение типографии в Интернете.
HTML (HyperText Markup Language) имеет множество разных тегов, которые помогают браузерам интерпретировать содержимое страницы. Многие из этих тегов специально используются для веб-типографии, таких как , , и т. д. Они описывают заголовки, являются наиболее важными. После этого используется тег
, используемый для абзацев. Не вдаваясь в подробности о HTML, мы определим внешний вид этих элементов.
Используя инструмент Horizontal Type Tool (T), введите три заголовка. Я использовал Open Sans (Light) 55px для h1, 44px для h2 и 32px для h3, оставляя промежуток в 30px между ними. Промежуток между символами — еще одна важная вещь, о которой нужно помнить. Оставляйте достаточно места, чтобы ваш шрифт был легко читаемым и выглядел сбалансированным.
Примечание: Я использовал толщину Regular для h3. По мере уменьшения шрифта вариант Light может стать менее разборчивым.
Шаг 3
Поскольку наши заголовки готовы, давайте перейдем к копии контента. Рассмотрите все возможные варианты копирования и отобразите их в своем наборе пользовательского интерфейса, чтобы разработчики могли реализовать то, что вы запланировали. Подумайте о стиле заголовка внутри абзаца, толщине шрифта, курсиве и ссылках.
Для основного цвета я выбрал серый #838383 , для заголовка — черный #000000 и синий #006ee3 для цвета ссылок.
Примечание: Установите шрифт заголовка и ссылки на толщину Semibold, чтобы они выглядели больше и значимее.
Создаём кнопки
Кнопки очень важны для веб-проектов. Они бывают простыми ссылками или кнопками отправки формы по большей части, но они может также выполнять функцию призыва к действию (CTA), ведя людей через всю страницу, позволяя принимать решения быстрее. Крайне важно определить последовательный вид кнопок, чтобы пользователь узнавал их по всему приложению.
Шаг 1
Сверните группу Typography , щелкнув маленькую стрелку рядом с названием группы и откройте группу Buttons . После этого создайте несколько новых вертикальных наводящих линий, чтобы разделить нашу область содержимого на три равные области с промежутками 35 пикселей. Перейдите в меню View > New Guide. и установите следующие вертикальные линии: 410px, 445px, 755px и 790px. Здесь мы будем размещать наши кнопки так, чтобы все они были одинаковыми.
Шаг 2
Перейдите обратно в группу Typography , найдите слой заголовка раздела и продублируйте его, нажав CMD+J, затем переместите его в группу Buttons и измените его имя на «Buttons».
После этого введите три названия состояний кнопок: Normal, Hover и Active. Разместите их слева от наших трех равных секций, сохраняя промежуток 35px между первой, второй и третьей областями.
Шаг 3
Теперь установите цвет переднего плана на ранее используемый синий #006ee3 и создайте новую группу под названием Primary Normal . Затем возьмите Rounded Rectangle Tool (U), установите Radius на 3px и нарисуйте прямоугольную форму прямоугольника размером 310×44 пикселей. Поместите его между первыми двумя направляющими в заголовке «Normal». Завершая создание кнопки, напишите на ней текст белым цветом #ffffff , чтобы он был легко читаемым.
Шаг 4
Теперь продублируйте группу Primary Button , нажав CMD+J и переименуйте эти группы в Primary Hover и Primary Active . После этого разместите их под двумя разделами, которые мы создали раньше.
Вы можете спросить, что значит hover и active? Hover описывает состояние кнопки, как только вы наводите на неё курсор мыши, поэтому нам нужно проиллюстрировать реакцию кнопки. Когда вы нажмете на него, активируется ссылка.
Для стилизации состояний наведения и нажатия на кнопку мы их просто затемним. Создайте новый слой над формой кнопки и заполните его черным #000000 . После этого удерживая нажатой клавишу Alt и перемещайте мышку над слоем, пока не увидите значок со стрелкой вниз. Отпустите его, чтобы создать обтравочную маску. Наконец уменьшите прозрачность слоя до 10%.
Примечание: для активного состояния кнопки увеличьте прозрачность черного слоя до 20%.
Шаг 5
Теперь продублируйте все предыдущие группы кнопок и измените их заголовки и цвет на вторичный. В этом уроке мы будем определять цвета набора пользовательских интерфейсов, а теперь просто выберите один цвет и замените предыдущий синий цвет. Я использовал зеленый #36c265 .
Оформляем формы
Формы — очень важный элемент веб-приложения, поскольку они позволяют пользователям вводить информацию и взаимодействовать с приложением. Мы разработаем несколько простых форм, чтобы разработчики могли придерживаться одного и того же стиля и поддерживать согласованный дизайн.
Шаг 1
Сверните группу Buttons и откройте группу Forms . Снова продублируйте заголовок раздела из предыдущей группы и переименуйте его в «Формы». Мы создадим некоторые поля ввода, включая текстовое поле, поле пароля, раскрывающийся список или поле выбора и поле отправки (простая кнопка).
При разработке форм ясность и узнаваемость являются ключевыми факторами. Не пытайтесь изобретать велосипед. Создайте новую группу и назовите ее Name . Затем выберите Horizontal Type Tool (T) и введите метку для поля ввода, в моем случае это «Имя», используя тот же черный шрифт 18px черного цвета #000000 Open Sans (Regular).
Теперь продублируйте один из слоев формы кнопки и переместите это в группу Name . После этого измените цвет фона на белый #ffffff и добавьте 1px серую #d5d5d5 внутреннюю обводку. Наконец, поместите пример текста внутри белого закругленного прямоугольника. Для моего примера я использовал 16px Open Sans (Regular) и цвет серый #838383 , который ранее использовался для основного текста.
Шаг 2
Создайте ещё поля с названиями, просто дублируя первое поле ввода. Традиционно для поля пароля используются точки • или звездочки *. Пример дополнительных полей показан ниже.
Продублируйте нажатием CMD+J одну из групп кнопок, переместите ее в группу Forms и поместите ее под недавно созданные поля. Еще раз напомню, что важно оставаться последовательным и повторно использовать ранее созданные элементы.
Шаг 3
В этом уроке мы придерживаемся очень простого пользовательского интерфейса, который может использоваться для очень простого веб-приложения. Теперь создадим еще один тип поля ввода; .
Продублируйте одну из групп полей и поместите ее между третьим и четвертым вертикальными направляющими линиями, убедитесь, что все выровнено. Измените значение на все, что хотите, и добавьте простой значок стрелки, чтобы указать, что это поле выпадающего списка. Значки стрелок можно найти на сайте Iconfinder.
Шаг 4
Чтобы упростить работу разработчикам, убедитесь, что вы добавили активное состояние. Подумайте, как выпадающее меню будет выглядеть, когда пользователь нажмет на него? Задача дизайнера — помочь разработчику создать последовательный и универсальный опыт.
Продублируйте недавно созданную группу с выпадающим списком. Используя Direct Selection Tool (A), нажмите на угол фигуры, чтобы увидеть граничные точки, затем, удерживая Shift, выберите четыре нижних точки и несколько раз нажмите вниз их, чтобы расширить форму. Этот способ сохранит вектор вашей формы и удержит углы нетронутыми.
После этого продублируйте возможные варианты и поместите остальные ниже первого. Используйте Line Tool (U) 1px в высоту для создания простых разделителей и, наконец, измените цвет стрелки на тот, который используется для кнопок. Это поможет показать, что поле активно.
Шаг 5
Вы создадите простой сценарий сообщений об ошибках, например, если кто-то ввел слишком слабый пароль.
Продублируйте нажав CMD+J ранее созданное поле пароля и поместите его ниже выпадающие поля. После этого измените границу поля на тонкий красный (я использовал #eb8686 ) и фон до серого красного #e9dde3 . Наконец, выберите более сильный красный #b63131 и введите простое сообщение об ошибке.
Это вся работа с нашими формами! Я рассказал основы, но этого достаточно, чтобы приступить к разработке более сложных форм.
Аватары
Аватары практически стандарт в любом современном приложении, поэтому это будет правильно создать некоторые визуальные эффекты для упрощения связи и идентификации пользователей.
Шаг 1
Сверните ненужные группы и откройте группу Avatars. Выберите инструмент Ellipse Tool(U) и, удерживая Shift, нарисуйте круг 80x80px. Перейдите на сайт uifaces.com и выберите изображение. Скопируйте его и вставьте в недавно созданный круг. Удерживайте Alt и наведите указатель мыши на миниатюру изображения, пока не увидите небольшую стрелку, затем отпустите мышь, чтобы создать обтравочную маску.
Шаг 2
Важно подумать о том, как будут использоваться аватары и включить несколько разных размеров для использования разработчиками. Например, большие изображения аватаров могут быть использованы на странице профиля, а более мелкие в разделе комментариев
Просто дублируйте аватар и уменьшайте его нажав CMD+T, удерживая клавишу Shift, чтобы сохранить пропорции.
Изображения
Мне действительно нужно создать образец того, как изображения будут отображаться в нашем приложении. Я поставлю только одно изображение внутри закругленного прямоугольника, чтобы показать, что изображения должны иметь закругленные углы.
Шаг 1
Выберите Rounded Rectangle Tool(U) и нарисуйте прямоугольную форму между вертикальными направляющими линиями ниже группы Avatars . После этого выберите изображение, я использовал одно из сайта unsplash.com, измените размер, если нужно, с помощью сочетания клавиш CMD+T и создайте обтравочную маску.
Определяем цвета
Наконец, мы рассмотрим цвета. Хорошая цветовая палитра имеет решающее значение, и вы должны изучить теорию цвета, чтобы лучше понять смысл и важность цветов, которые вы используете. Мы выбираем цвета сразу в конце процесса, потому что теперь у нас есть понимание какие элементы нам нужно оформить.
Шаг 1
Откройте группу Colors и выберите один из цветов, который вы использовали для лицевой стороны кнопок. После этого, используя Rounded Rectangle Tool (U), нарисуйте прямоугольник. Затем выберите инструмент Horizontal Type Tool (T) и запишите название цвета, или то, для чего он будет использоваться, например. Primary Color и укажите цветовые коды в HEX, RGB или любом другом формате. Создайте новую группу, дайте ей имя и поместите в него все слои.
Шаг 2
Теперь продублируйте с помощью CMD+J группу цветов и сделайте столько образцов, сколько вам нужно. Обычно лучше ограничиться четырьмя или пятью цветами, так как больше цветов может быть слишком наляписто. Посмотрите на сайт Kuler и COLOURlovers есть потрясающие палитры.
Для этого урока, как вы видите, я использовал цвета Primary и Secondary, один цвет для основного текста и один для заголовков, также белый для фона полей ввода. Все это показано ниже.
Поздравляем! Вы это сделали!
Итак, у вас всё получилось. Руководство стиля пользовательского интерфейса для простого веб-приложения. Надеюсь, вы узнали и поняли основы создания руководства стилю, почему были приняты некоторые решения и как они принесут пользу проекту.
Если у вас есть какие-либо вопросы или возникают трудности, пожалуйста, не стесняйтесь задавать вопросы в разделе комментариев!
Источник: webdesign.tutsplus.com
Урок #22 – Создание интерфейсов
Интерфейсы очень схожи с абстрактными классами. Между ними есть всего несколько отличий. За урок мы научимся использовать интерфейсы на практике, а также узнаем где и зачем их можно использовать.
Видеоурок
Во многих языках программирования реализована возможность множественного наследования, когда один класс имеет несколько классов родителей. В языке C# такой функциональности нет и чтобы решить эту проблему можно использовать интерфейсы.
Что такое интерфейс?
Интерфейсы очень схожи с абстрактными классами и предоставляют лишь методы без реализации.
В интерфейсах можно записать методы, что должны реализовываться во всех классах, использующих интерфейс. Это удобно, ведь за счёт такого функционала мы можем быть уверены в классах и будем знать что они реализовывают все те функции, что мы предусмотрели заранее.
Как создать интерфейс?
Для создания интерфейса используется ключевое слово Interface :
interface ISomeOne
В интерфейсе можно не прописывать модификаторы доступа и по-умолчанию будет проставлен модификатор public.
Для реализации функционала в интерфейсе необходимо создать класс и указать что он является классом, реализующим определенный интерфейс. Для этого после названия класса пропишите слово : :
class Person : ISomeOne < string name; float happiness; int age; public Person(string name, float happiness, int age) < this.name = name; this.happiness = happiness; this.age = age; >public void Change (string val) < this.name = val; Console.WriteLine(«Now his name is — » + val); >>
Источник: itproger.com