Как начать делать программы с интерфейсом


Проектирование графического интерфейса пользователя

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

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

Ниже я постараюсь ответить на эти вопросы.
Общие принципы
  • Интерфейс должен быть интуитивно понятным. Таким, чтобы пользователю не требовалось объяснять как им пользоваться.
  • Для упрощения процесса изучения необходима справка. Буквально — графическая подсказка, объясняющая значение того или иного ЭИ. Полное руководство должно быть частью интерфейса, доступной в любой момент.
  • Возвращайте пользователя в то место, где он закончил работу в прошлый раз. Зачем нажимать все заново?
  • Чаще всего, пользователи в интерфейсе сначала ищут сущность(существительное), а затем действие(глагол) к ней. Следуйте правилу «существительное -> глагол». Например, шрифт -> изменить.
  • Чем быстрее человек увидит результат — тем лучше. Пример — «живой» поиск, когда варианты, в процессе набора поискового запроса. Основной принцип: программа должна взаимодействовать с пользователем на основе наименьшей значимой единицы ввода.
  • Используйте квазирежимы. Например, ввод заглавных букв с зажатой клавишей shift — это квазирежим. С включенным capslock — режим. Основное отличие в том, что человек может забыть в каком режиме он находится, а в квазирежиме(с зажатой доп. клавишей) это сделать гораздо сложнее.
  • Следует с осторожностью предоставлять пользователю возможность, по установке личных настроек. Представьте, сколько времени потратит сотрудник настраивая Word, если его интерфейс был полностью переделан предыдущим.
  • Чем больше пользователь работает с какой-то конкретной задачей, тем больше он на ней концентрируется и тем меньше перестает замечать подсказки и сообщения, выводимые программой. Чем более критической является задача, тем меньше вероятность того, что пользователь заметит предупреждения относительно тех или иных потенциально опасных действий.
Какие ЭИ создать?
  • Разработка интерфейса обычно начинается с определения задачи или набора задач, для которых продукт предназначен
  • Простое должно оставаться простым. Не усложняйте интерфейсы. Постоянно думайте о том, как сделать интерфейс проще и понятнее.
  • Пользователи не задумываются над тем, как устроена программа. Все, что они видят — это интерфейс. Поэтому, с точки зрения потребителя именно интерфейс является конечным продуктом.
  • Интерфейс должен быть ориентированным на человека, т.е. отвечать нуждам человека и учитывать его слабости. Нужно постоянно думать о том, с какими трудностями может столкнуться пользователь.
  • Думайте о поведении и привычках пользователей. Не меняйте хорошо известные всем ЭИ на неожиданные, а новые делайте интуитивно понятными.
  • Разрабатывайте интерфейс исходя из принципа наименьшего возможного количества действий со стороны пользователя.
Какой должен быть дизайн ЭИ?
На самом деле, дизайн ЭИ — тема отдельной статьи. Тут нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:
  • Цвет. Цвета делятся на теплые(желтый, оранжевый, красный), холодные(синий, зеленый), нейтральные(серый). Обычно для ЭИ используют теплые цвета. Это как раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.
  • Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Полностью прямоугольные ЭИ, лично мне нравятся меньше. Возможно из-за своей «остроты». Опять же, форма как и цвет достаточно субъективна.
  • Основные ЭИ(часто используемые) должны быть выделены. Например размером или цветом.
  • Иконки в программе должны быть очевидными. Если нет — подписывайте. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.
  • Старайтесь не делать слишком маленькие элементы — по ним очень трудно попасть.
Как правильно расположить ЭИ на экране?
  • Есть утверждение, что визуальная привлекательность основана на пропорциях. Помните известное число 1.62? Это так называемый принцип Золотого сечения. Суть в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина сайта 900px, делим 900 на 1.62, получаем ~555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части:
  • Перед расположением, ЭИ следует упорядочить(сгруппировать) по значимости. Т.е. определить, какие наиболее важны, а какие — менее.
  • Обычно(но не обязательно), элементы размещаются в следующей градации: слева направо, сверху вниз. Слева в верху самые значимые элементы, справа внизу — менее. Это связано с порядком чтения текста. В случае с сенсорными экранами, самые важные элементы, располагаются в области действия больших пальцев рук.
  • Необходимо учитывать привычки пользователя. Например, если в Windows кнопка закрыть находится в правом верхнем углу, то программе аналогичную кнопку необходимо расположить там же. Т.е. интерфейс должен иметь как можно больше аналогий, с известными пользователю вещами.
  • Размещайте ЭИ поближе там, где большую часть времени находится курсор пользователя. Что бы ему не пришлось перемещать курсор, например, от одного конца экрана к другому.
  • Соблюдайте пропорции
  • Элемент интерфейса можно считать видимым, если он либо в данный момент доступен для органов восприятия человека, либо он был настолько недавно воспринят, что еще не успел выйти из кратковременной памяти. Для нормальной работы интерфейса, должны быть видимы только необходимые вещи — те, что идентифицируют части работающих систем, и те, что отображают способ, которым пользователь может взаимодействовать с устройством.
  • Делайте отступы между ЭИ равными или кратными друг-другу.
Как ЭИ должны себя вести?
  • Пользователи привыкают. Например, при удалении файла, появляется окно с подтверждением: «Да» или «Нет». Со временем, пользователь перестает читать предупреждение и по привычке нажимает «Да». Поэтому диалоговое окно, которое было призвано обеспечить безопасность, абсолютно не выполняет своей роли. Следовательно, необходимо дать пользователю возможность отменять, сделанные им действия.
  • Если вы даете пользователю информацию, которую он должен куда-то ввести или как-то обработать, то информация должна оставаться на экране до того момента, пока человек ее не обработает. Иначе он может просто забыть.
  • Избегайте двусмысленности. Например, на фонарике есть одна кнопка. По нажатию фонарик включается, нажали еще раз — выключился. Если в фонарике перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или нет. Поэтому, вместо одной кнопки выключателя, лучше использовать переключатель(например, checkbox с двумя позициями: «вкл.» и «выкл.»). За исключением случаев, когда состояние задачи, очевидно. Такой переключатель напрямую отражает состояние ЭИ
  • Делайте монотонные интерфейсы. Монотонный интерфейс — это интерфейс, в котором какое-то действие, можно сделать только одним способом. Такой подход обеспечит быструю привыкаемость к программе и автоматизацию действий.
  • Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не несколько. Пример — стартовая страница браузера Chrome.
  • Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмотрена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (status bar).
  • ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.
В заключении
Эта статья не претендует на самый полный справочник принципов проектирования интерфейса. Графический интерфейс пользователя — это обширная тема, тесно переплетенная с психологией, занимающая умы ученых и сотни страниц книг и исследований. В столь малом формате, никак не выразить всю полноту затронутой темы. Однако, соблюдение базовых принципов, позволит строить интерфейсы более дружелюбными к пользователю, а так же упростить сам процесс проектирования. Спасибо за внимание.
Литература
Джеф Раскин, «Интерфейс: новые направления в проектировании компьютерных систем» Алан Купер, «Об интерфейсе. Основы проектирования взаимодействия» Алан Купер, «Психбольница в руках пациентов» Теги:
  • графический интерфейс пользователя

habr.com

❶ Как написать интерфейс

Вам понадобится

  • - среда программирования Borland C++ Builder или Borland Delphi;

Инструкция

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

Установите и запустите среду программирования. Откроется окно программы, в нем вы увидите серый прямоугольник. Это окно дизайнера форм, а проще заготовка интерфейса вашей будущей программы, она обозначена как Form1. Щелкнув на заголовке формы, вы можете в левой части программы, в окне инспектора объектов, задать ей нужное название. В данном случае вам надо будет вписать название программы в строку Caption.

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

Расположите кнопку в нужном месте формы. Измените, при необходимости, ее размер. Теперь дайте кнопке название – например, Open. Для этого щелкните кнопку мышкой и в окне инспектора объектов введите в строку Caption название кнопки – Open.

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

Существует ряд компонентов, которые вы часто будете использовать, то есть перетаскивать на форму, но которые не будут отображаться в окне готовой запущенной программы. Например, перетащите из вкладки Dialogs компоненты Open Dialog и Save Dialog. Расположите их где-нибудь в нижней части окна – так, чтобы они не мешали. С помощью этих компонентов мы сможете реализовать процедуру открытия файлов и их сохранения. Подобных компонентов много, вы будете часто их использовать.

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

Видео по теме

Источники:

  • Программирование: Borland C++ Builder

www.kakprosto.ru

7 правил создания красивых интерфейсов

Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Именно поэтому мы решили её перевести. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #[email protected]

Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:
  • разработчиков, которые хотят уметь делать хорошие интерфейсы для себя, если вдруг прижмёт;
  • UX-дизайнеров, которые знают, что хороший UX-дизайн продаётся лучше в красивой UI-упаковке.
Если вы ходили в художественную школу или считаете себя хорошим дизайнером интерфейсов, то скорее всего это руководство покажется вам а) скучным, б) неправильным или даже в) вызывающим раздражение. Это нормально. Просто закройте эту вкладку и двигайтесь дальше. А пока давайте я расскажу, что вы найдёте в этой статье. Раньше я был UX-дизайнером без каких-либо навыков графического дизайна. Я обожал просто проектировать интерфейсы, но вскоре я понял, что есть куча причин научиться делать это ещё и красиво:
  1. Моё портфолио выглядело ужасно и едва отражало мой рабочий процесс и ход мыслей.
  2. Клиенты, с которыми я работал, с большей готовность заплатили бы тому, кто умеет рисовать не только прямоугольники и стрелочки.
  3. Хотел ли я в какой-то момент присоединиться к стартапу на ранней стадии? Тогда лучше мне освоить эти навыки уже сейчас.
Я всегда находил себе оправдание:Я ничего не понимаю в эстетике. Я закончил инженерно-технический факультет. Я не должен делать вещи красивыми. В конце концов, я научился дизайну так же, как и любому другому мастерству: путём холодного, жёсткого анализа, бессовестно копируя то, что работает. Я тратил по 10 часов на проект, а брал деньги всего за час. Остальные 9 я учился. Отчаянно разыскивая в Google, Pinterest и Dribbble то, что можно скопировать. Эти «правила» — это уроки, которые я вынес для себя за это время.

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

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

А есть крав-мага, которую изобрели евреи в борьбе против нацистов на улицах Чехословакии в 1930-х годах. Там нет искусства. На уроках крав-маги вы научитесь тычкам в глаза с помощью ручки.

Эта статья — крав-мага для экранов. Вот они:
  1. Свет падает сверху.
  2. Сначала черное и белое.
  3. Увеличьте белое пространство.
  4. Изучите принципы наложения текста на картинки.
  5. Научитесь выделять и утапливать текст.
  6. Используйте только хорошие шрифты.
  7. Крадите как художник.
Перейдём к делу. Тени лучше всего помогают мозгу понять, на какой элемент интерфейса мы смотрим.

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

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

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

Возьмём кнопки. Даже в этой относительно «плоской» кнопке есть множество деталей, связанных со светом.
  1. В ненажатом состоянии (вверху) у неё тёмный нижний край. Ведь туда не падает солнечный свет.
  2. Верхняя часть ненажатой кнопки чуть светлее, чем нижняя. Это потому что она имитирует слегка изогнутую поверхность. Как, чтобы увидеть солнечный свет, вам нужно было бы направить зеркало вверх, так и изогнутая поверхность отражает чуууууть больше солнечного света.
  3. Ненажатая кнопка слегка отбрасывает тень — её можно увидеть в увеличенном виде.
  4. Нажатая кнопка сверху темнее, чем снизу. Потому что она находится на уровне экрана, и на неё попадает меньше солнечного света. В реальной жизни нажатые кнопки тоже темнее, потому что мы блокируем свет рукой.
Это всего лишь кнопка, но на ней уже есть 4 небольших эффекта от света. Это и есть главный урок. А теперь мы будет применять его ко всему.

Вот пара настроек из iOS 6 — «Не беспокоить» и «Уведомления». Она немного устарела, но может многому нас научить.
  • Верхняя часть контрольной панели (inset control panel) отбрасывает небольшую тень.
  • Проём для слайдера «On» располагается ещё глубже.
  • Он имеет вогнутую форму, поэтому нижняя часть отражает больше света, чем верхняя.
  • Иконки, наоборот, выпуклые. Видите яркий участок в верхней части иконок? Он представляет собой поверхность перпендикулярную к солнечному свету, следовательно, он поглощает и отражает его.
  • У разделителя (divider notch) тень там, где не попадает солнечный свет, и наоборот.
Вот ещё один пример из моей старой работы.

Элементы, которые обычно имеют вогнутую форму:

  • поля для ввода текста,
  • нажатые кнопки,
  • проёмы для слайдеров,
  • радио-кнопки (неактивные),
  • чекбоксы.
Элементы, которые обычно имеют выпуклую форму:
  • кнопки (в ненажатом виде),
  • сами слайдеры,
  • контроллеры выпадающих меню,
  • карточки,
  • сама кнопка выбранной радио-кнопки,
  • всплывающие окна.
Теперь когда вы знаете, вы будете везде это замечать. iOS 7 наделала много шума благодаря своему «плоскому дизайну». Он в буквальном смысле плоский. В нём нет никаких углублений или выступов — только линии и фигуры сплошного цвета.

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

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

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

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

Нельзя сказать, что он не имитирует физический мир, но в то же время он не похож на веб-дизайн 2006 года. В нём нет текстур, градиентов или отблесков. Я думаю, будущее за «полу-плоским» дизайном. А дизайн в стиле flat — это просто часть истории. Создавая дизайн в чёрно-белой палитре, до добавления цвета, вы сможете максимально упростить самые сложные визуальные элементы и сфокусироваться на макете и расположении.

В наши дни многие UX-дизайнеры увлечены подходом «сначала мобильные». Это значит проектировать страницы и взаимодействия для мобильных устройств до больших экранов с ретиной.

Такой вид ограничений прекрасен. Это очищает сознание. Вы начинаете с более сложной проблемы (удобное приложение на маленьком экране), а затем адаптируете решение к проблеме полегче (удобное приложение на большом экране).

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

Только так можно создать «чистый» и «простой» интерфейс. А обилием цветов в разных местах его, наоборот, очень легко испортить. Чёрно-белый дизайн заставляет вас сфокусироваться на расстояниях, размерах и макете. Именно это является основой хорошего дизайна.

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

Самое простое — это добавить только один цвет.

Один цвет на чёрно-белом сайте просто и эффективно притягивает взгляд.

Можно пойти ещё дальше и добавить два цвета или несколько оттенков одного тона. Коды цветов на практике — что такое тон (hue)?

В большинстве случаев на вебе используются HEX-коды цветов модели RGB. Для нас они являются абсолютно бесполезными. RGB плохо подходит для подбора цветов. Лучше использовать HSB (почти тоже самое что HSV или HSL).

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

Если вы впервые об этом слышите, то вот хороший путеводитель по HSB цветам.

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

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

Цвет — это самая сложная часть графического дизайна. И хотя большинство статей о цвете недалёкие и вряд ли помогут вам в работе, есть несколько очень полезных инструментов:
  • Никогда не используйте чёрный. Эта статья о том, что чистый чёрный цвет практически не встречается в реальной жизни. Увеличивая насыщенность серых оттенков, особенно тёмных, вы добавите живости вашему дизайну. К тому же, насыщенные серые тона ближе всего к реальной жизни, что само по себе хорошо.
  • Adobe Color CC. Отличный инструмент для того, чтобы подобрать подходящий цвет, изменить его или составить палитру.
  • Поиск в Dribbble по цвету. Ещё один классный способ найти, что работает с определённым цветом. Например, если вы уже нашли один цвет, посмотрите, какие цвета сочетают с ним лучшие дизайнеры в мире.
Чтобы интерфейс выглядел красиво, позвольте ему дышать. В Правиле № 2 я говорил, что чёрно-белая палитра заставляет дизайнеров думать о макете и расположении элементов прежде, чем добавить цвет, и это хорошо. Теперь пришло время поговорить собственно о макете. Если вы когда-нибудь писали HTML-страницу с нуля, то скорее всего знакомы с тем, как HTML выглядит по умолчанию.

Если коротко, то всё сбито к верху экрана. Шрифт мелкий, между строчками нет никакого пространства. Между абзацами расстояние чуть-чуть побольше, и они растянуты на весь экран независимо от того, сколько он пикселей, 100 или 10 000.

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

Иногда даже слишком много. Белое пространство, HTML и CSS

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

Звучит как дзэн? Я думаю, именно поэтому люди продолжают делать наброски.

Начать с чистого листа значит начать именно белого пространства. Думайте об отступах и полях с самого начала. Всё, что вы рисуете, — это ваше сознательное решение по уменьшению белого пространства.

Если вы начнёте с кучи неотформатированного HTML, то о белом пространстве вы будете думать в последнюю очередь.

Вот концепт музыкального плеера от Piotr Kwiatkowski.

Обратите внимание на меню слева.

Вертикальное пространство между ссылками в меню в два раза больше самого текста. Это шрифт размером 12px, с такими же отступами сверху и снизу.

Или посмотрите на заголовки списков. Между словом «PLAYLISTS» и его подчёркиванием расстояние в 15px. Это больше, чем высота заглавной буквы шрифта! Я уже молчу о 25px между самим списками.

В верхнем правом углу тоже достаточно пространства. Текст «Search all music» занимает 20 % высоты панели навигации. У иконок похожие пропорции. Пётр сознательно добавил сюда много белого пространства, и это окупилось сполна. Хотя это просто концепт, но в плане дизайна этот интерфейс мог бы посоперничать с лучшими музыкальными плеерами, которые сейчас есть. Даже такие интерфейсы, как форумы, могут выглядеть красивыми и простыми благодаря белому пространству.

Или Википедия.

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

Анализируйте, что работает, а что нет.

В следующей части я расскажу об остальных 4 правилах красивых интерфейсов:
  1. Как накладывать текст на картинки.
  2. Как выделять и утапливать текст.
  3. Используйте только хорошие шрифты.
  4. Крадите как художник

habr.com

Работа с формой. Создание интерфейса приложения. Создание эскиза интерфейса За основу можно взять стандартный калькулятор Windows).

Составляем список элементов интерфейса приложения:

  • типы элементов (кнопки, окна ввода-вывода, надписи)

  • количество элементов каждого типа;

  • размер и форма элементов;

  • оформление, надписи, цвет;

  • взаимное расположение элементов;

Оформление окна ввода-вывода

Вставка окна редактора.

Для ввода и вывода данных используем компонент Edit – готовый однострочный редактор.

находим среди палитры компонентов окошечко ab (Edit)

щелкаем на нем мышкой

ставим курсор мышки на то место формы, где должна быть окно для ввода текста

щелкаем мышкой - вставляем окно редактора

передвигаем окно редактора

изменяем размер окна редактора

Определение свойств окна ввода-вывода в инспекторе объектов

Выделяем в окне формы окно редактора Edit1 щелчком мыши. При этом в окне Инспекторе объектов появляется имя этого компонента, например Edit1.

Переходим в инспектор объектов для определения свойств кнопки. Должна быть выделена закладка Properties (Свойства).

находим строку Text | Edit1.

вместо Edit1 оставляем пустое место.

находим строку +Font | (Tfont) (Шрифт) и дважды щелкаем на TFont

в открывшемся окне устанавливаем параметры шрифта: тип шрифта, размер, цвет.

В окно редактора должны вводиться только цифры с клавишей калькулятора. Ввод других символов с клавиатуры компьютера приведет к сбою программы. Поэтому ввод с клавиатуры компьютера должен быть заблокирован. Для этого в окне инспектора объектов находим строку ReadOnly | False и меняем значение False на True.

Оформление клавиатуры калькулятора

Для определения событий типа нажатия клавиши, используются объекты Button (кнопка)

Вставка кнопок калькулятора.

находим в палитре компонентов в линейкеStandart кнопку OK (Button)

щелкаем на ней мышкой

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

щелкаем мышкой - вставляем кнопку

передвигаем кнопку

изменяем размер кнопки

Определение свойств кнопок в инспекторе объектов

Выделяем в окне формы кнопку, например Button1 щелчком мыши. При этом в окне Инспекторе объектов появляется имя этого компонента Button1 .

Переходим (щелкаем) в инспектор объектов Закладка Properties

находим строку Caption и редактируем строку с надписью Button1

вместо Button1 пишем «1»

находим строку Font (Шрифт) и дважды щелкаем на TFont

в открывшемся окне устанавливаем параметры шрифта.

Переходим в инспектор объектов (Закладка Events).

В строке Action, действию OnClick должно соответствовать значение Button1Click, т.е. кнопке Button1 соответствует одиночный щелчок мыши.

Оформление надписей в окне приложения.

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

Вставка вспомогательных надписей .

Находим среди компонентов значок надписи : (Label)

щелкаем на нем мышкой

затем перемещаем курсор мышки на то место формы, где должна быть надпись

щелкаем мышкой - вставляем надпись с первичным текстом

передвигаем надпись на нужное место

Определение свойств надписи в инспекторе объектов

Выделяем в окне формы надпись, например Label1 щелчком мыши. При этом в окне Инспекторе объектов появляется имя этого компонента Label1 | TLabel.

Переходим (щелкаем) в инспектор объектов Закладка Properties

находим строку Caption | Label1 и печатаем вместо Label1 нужный текст, например: «Калькулятор Для научных расчетов»

находим строку Font (Шрифт) и дважды щелкаем на TFont

в открывшемся окне устанавливаем параметры шрифта: тип, размер, жирность.

Группи ровка элементов интефейса.

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

Примерный вид окна формы с интерфейсом приложения «Калькулятор».

Написание кода программы

Основная программа генерируется автоматически и выводится в окне редактора кода с первичным именем Unit1.pas.

Начальный текст программы:

unit Unit1;

interface

uses

Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs;

type

TForm1 = class(TForm)

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.dfm}

end.

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

Объявления переменных вставляем в программу вручную. После раздела uses и имен подключаемых модулей пишем

var x,y,z,x,y: real;

op:char;

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

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

Просле этого в разделе type появляются строки

Button1: TButton;

procedure Button1Click(Sender: TObject);

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

procedure TForm1.Button1Click(Sender: TObject);

begin

end;

Код программы - обработчика события, размещаемую между begin и end; программист должен написать самостоятельно.

studfiles.net

9 бесплатных инструментов для дизайна интерфейсов

Pixate — платформа для прототипирования приложений, которая обладает большим набором функций. Вы можете создавать слои, добавлять интерактив и анимации и, что самое главное, — посмотреть, как будет выглядеть ваш дизайн в жизни. С помощью плеера Pixate вы сможете полистать готовый прототип и покликать по нему на смартфоне (поддерживаются платформы Android и iOS). Ещё один плюс программы — научиться работать в ней довольно просто. В итоге вы сможете создать дизайн приложения, не написав ни строчки кода.

Pixate →

2. Marvel

Можно создавать дизайн приложения сразу в Marvel или экспортировать свои макеты из Photoshop или Sketch. С готовым оформлением можно сделать прототип (добавить анимации и переходы), чтобы посмотреть, как приложение или веб-страница будет выглядеть для пользователя. Есть возможность делиться проектами и получать обратную связь в режиме реального времени.

Marvel →

3. iPhone Mockup

Поможет быстро и просто создать иллюстрацию или скетч мокапа iPhone. Всё, что нужно сделать, — методом drag-and-drop перетащить необходимые элементы интерфейса. Сервис не годится для серьёзной разработки, но если вы хотите быстро зафиксировать свою идею или поделиться с кем-то набросками, iPhone Mockup для этого вполне подойдёт.

iPhone Mockup →

4. Pencil Project

Pencil Project — бесплатный инструмент для прототипирования с открытым исходным кодом. Позволяет создавать макеты веб-страниц и мобильных приложений. Есть встроенные коллекции с популярными формами, блок-схемами и элементами интерфейсов.

Pencil Project →

5. Form

Приложение для создания прототипов и их просмотра на iPhone или iPad через Wi-Fi или USB.

Form →

6. Use Your Iinterface

Огромная коллекция анимированных интерфейсов. Заходим, вдохновляемся интересными решениями и применяем идеи на практике.

Use Your Iinterface →

7. UX Myths

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

UX Myths →

8. Mobile Patterns

Подборка дизайнерских решений для мобильных интерфейсов. Поможет справиться с творческим кризисом. Большой плюс — всё разбито по категориям: календари, списки, карты, настройки и так далее.

Mobile Patterns →

9. Good UI

Ещё один полезный ресурс с теорией дизайна интерфейсов (одно «но» — все материалы на английском). Здесь собрано 75 идей по оформлению веб-страниц. Все рекомендации проверены A/B-тестированием.

Good UI →

lifehacker.ru

11 бюджетных инструментов дизайнера для создания интерфейсов и макетов

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

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

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

PowerMockup — плагин для PowerPoint

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

PowerMockup работает с Office 2007, 2010 и 2013. Однопользовательская лицензия на PowerMockup стоит $59,95; стоимость лицензии для рабочей группы зависит от количества человек в ней.

Moqups — онлайн-инструмент для создания макетов и прототипов

Moqups — интерактивное приложение на HTML5, позволяющее разрабатывать векторные прототипы.

Сервис разработан 6 увлеченными программистами из Румынии, бесплатен и не требует регистрации.

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

Fluid UI — средство разработки прототипов для  iOS- , Android- и  Windows приложений

Fluid UI — онлайн средство для прототипирования мобильных приложений. Может быть использован как для создания простых макетов, так и сложных высококачественных макетов и прототипов. Сервис содержит библиотеки с элементами интерфейсов для iOS, Android и Windows 8 приложений.

Аккаунт для одного проекта с ограничением в 10 экранов доступен бесплатно. Платные планы начинаются с $29 в месяц.

Wireframe.cc — минималистичный бесплатный онлайн-сервис для прототипирования

Wireframe.cc отличается от других инструментов прототипирования чрезвычайно простым интерфейсом без огромного количества наворотов. Когда вы заходите на сайт сервиса wireframe.cc, вы сразу же можете начать рисовать, перетаскивая элементы мышью по рабочей области. Чтобы сохранить макет достаточно нажать кнопку «Save», после чего сервис сгенерирует уникальный URL, которым вы сможете поделиться с другими людьми или добавить его в закладки.

Wireframe.cc на данный момент бесплатен, премиум-версия с доп. функциями ожидается в ближайшее время.

Axure RP

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

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

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

Axure — это десктопное ПО, доступное для Mac OS X и Windows.

Balsamiq Mockups — инструмент для быстрого прототипирования на основе Flash

Balsamiq Mockups — чуть ли не самый известный инструмент для прототипирования.

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

Balsamiq Mockups стремится передать опыт рисования макетов на бумаге, поэтому прототипы выглядят не так формально, как в других программах.

Вы можете использовать Balsamiq Mockups непосредственно в браузере (потребуется Flash) или загрузить в качестве приложения Adobe AIR. Однопользовательская лицензия стоит $79.

Pencil — инструмент для прототипирования с открытым кодом

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

Вы также можете скачать пользовательские коллекции элементов из раздела Download на сайте Pencil. Инструмент доступен как автономная версия для Linux, Windows и Mac OS X. Также может быть использован в качестве расширения Firefox.

UXToolbox — инструмент для прототипирования под Windows

С помощью UXToolbox вы сможете создавать макеты и  интерактивные прототипы для мобильных приложений, веб-сайтов и десктопного ПО. 

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

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

UXToolbox работает с Windows XP и с более поздними версиями и стоит £159 (около $240) за копию.

Mockups.me — инструмент для создания пользовательских интерфейсов

Mockups.me очень похож на Balsamiq Mockups, но имеет ряд преимуществ. В частности у Mockups.me есть приложения для IOS и Android. Кроме того, Mockups.me включает в себя встроенные коммуникационные системы для сбора обратной связи через аннотации и комментарии.

Стоимость десктопной версии Mockups.me — $49, версия для планшета доступна за $19,99, а цены за веб-версию начинается от $99 за год.

Live Wires — приложение для создания прототипов под iPad

Live Wires поможет вам протестировать и создать прототипы непосредственно на iPad. Приложение может быть использовано для создания интерактивных прототипов  приложений для iPhone и iPad.

Live Wires включает в себя большую коллекцию легко настраиваемых элементов упрвления.

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

Live Wires сейчас доступен по специальной начальной цене в $9,99.

HotGloo

Мой любимый инструмент для прототипирования. Ему посвящена отдельная статья.

Резюме

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

Использовали ли вы какой-то из них? Если да, пожалуйста, поделитесь своим опытом в комментариях.

lifehacker.ru


Смотрите также