Как улучшить интерфейс — всё по этой теме для программистов
Как улучшить интерфейс — всё по этой теме для программистов
Данная тема предназначена для помощи программистам графикой:
баннерами, иконками, элементами интерфейса, мокапами и т.д.
Уважаемые разработчики, в этой теме по мере своих сил Вам помогут с графическим содержанием Ваших приложений и дадут советы по косметическим улучшениям. Чаще всего к нам обращаются за помощью в изготовлении иконок, feature- и promo-графики для Google Play, тех или иных элементов интерфейса приложения. Пожалуйста, не ждите, что Вам помогут бесплатно, если вы размещаете заказ наподобие «мне нужен редизайн всех экранов приложения с нарезкой по всем dpi» или «сделайте интерфейс социальной сети». Это объемная работа, требующая много времени и сил и соответствующего вознаграждения. С такими заказами лучше идти на биржу фриланса, если такой возможности нет, то в случае размещения подобных заказов просьба указывать, что работа будет поощрена материально, иначе Вы вряд ли получите отклик профессионалов. Спасибо за понимание.
Ниже представлен список наиболее активных дизайнеров этой темы
(если Ваш заказ остается без внимания продолжительное время, можете написать в QMS одному из этих людей)
Внимание Если Ваш заказ был выполнен, напишите об этом в теме, чтобы остальные зря не трудились.
Все замечания и предложения по теме направлять в QMS куратору
Сообщение отредактировал mr_johnnysniper — 26.03.19, 15:11
Как улучшить любой интерфейс: выпадающие списки
29 Ноя 2013, 13:00, написал Максим Шайхалов в разделе «Интерфейс»
Прогресс не стоит на месте и все движется с космической скоростью. Интерфейсы не отстают и постепенно эволюционируют становясь сложней и одновременно удобней (но это уже разговор для отдельной статьи). В этой серии статей я бы хотел рассказать как можно улучшить большинство типовых интерфейсных элементов используя нехитрые техники.
Выпадающие списки
Выпадающие списки или дропдауны (dropdown) — один из самых неудобных и неэффективных элементов интерфейса. Но несмотря на это, их продолжают применять во всех местах интерфейса. «Почему?» — спросите вы. Ответ прост: дропдауны экономят пространство и помогают спрятать большие списки (вне зависимости насколько это нужно было делать).
Правила использования и альтернативы
На самом деле, в большинстве случаев, выпадающий список можно заменить на достойную альтернативу. Но если все-таки беретесь использовать выпадающий список, то запомните несколько правил.
1. Не используйте выпадающие списки для маленьких списков.
Раскройте выпадающий список и используйте радиобаттоны. Это упростит выбор. Пользователь просто пробежит глазами пункты и кликнет в нужный. В случае с выпадающим списком он не увидит сразу всю полноту выбора. Для этого список нужно сначала открыть, потом только сделать выбор. Раскрыв маленький выпадающий список — мы сократим количество кликов и упростим интерфейс.
Выбор руля в расширенном поиске на Авто E1.ru.
Попробуем поменять на радиобаттоны. Стало лучше, не правда ли?
2. Не используйте выпадающие списки для больших списков.
Выбор даты рождения на Хабре
При использовании большого количества пунктов в выпадающих списках пользователю приходится пользоваться прокруткой и изучать весь список целиком. Это довольно сильно тормозит заполнение форм.
Часто дропдауны используют для выбора даты рождения, что я считаю категорически неправильным. Я допускаю использование выпадающего списка для месяца. Но для числа и года можно использовать простое текстовое поле. Для выбора дат придуман специальный элемент datepicker. При всем их многообразии можно подобрать самый удобный, совместив его с полем ввода.
Выбор даты в Бутстрапе совмещает текстовое поле и datepicker.
3. Используйте выпадающий список с вводом и автозаполнением.
Настоящим полезным и применимым выпадающим списком я считаю такой
Выпадающий список для выбора страны Вконтакте
Такой список позволяет выбрать самые популярные варианты парой кликов, отфильтровать нужную страну из списка и не вводить полное название вручную (как в случае с традиционным полем ввода).
4. Подставляйте по умолчанию самое частое значение.
Подставляйте вариант по умолчанию, если его выбирает большинство пользователей или вы можете спрогнозировать выбор. Например, в предыдущем примере с выбором страны можно подставить Россию по умолчанию основываясь на данных о местоположении пользователя.
Вывод
В большинстве случаев улучшить интерфейс с выпадающим списком довольно просто: нужно подумать как можно решить существующую задачу без использования выпадающего списка. Единственным оправданием дизайнеру использующему дропдауны может служить тотальная нехватка места и погоня за компактностью интерфейса.
В следующих сериях
- Чекбоксы. Или как научить пользователя ставить в маленькую галочку.
- Радиобатонны. Простой выбор без выбора.
- Поля ввода. Как должны работать поля ввода с разными типами данных.
Если вам понравилась статья и интересны дальнейшие темы, то следите за моим твиттером , подписывайтесь на RSS или рассылку новых постов по почте .
10 правил хорошего пользовательского интерфейса
Сайты и приложения сегодня динамичны и интерактивны. Задача дизайнеров — сделать так, чтобы интерфейс сайта был максимально близок к идеалу. К счастью, существуют правила, которые помогают достичь этого.
Десять универсальных правил хорошего пользовательского интерфейса
1. Сделайте все, что нужно пользователю, легко доступным
Если пользователь не может найти то, что нужно, он откажется от вашего программного обеспечения. Вкладки делают интерфейс более доступным. Ярлыки и всплывающие подсказки тоже.
Например, мы решили использовать вкладки для организации WordPress-темы Divi. В ней все инструменты находятся прямо в конструкторе и разделены по категориям.
Также доступны панели инструментов. В WordPress панель администрирования позволяет быстро перейти к редактору записей, настройщику тем, плагинов и т.д.
Другой пример – разделы Справка / Поддержка / Контакты. Пользователям всегда должна быть доступна кнопка «Справка» или «Обратиться в службу поддержки». Вот почему необходимо располагать кнопки помощи вверху.
2. Будьте последовательны
Нужно быть последовательным в размещении функций в пользовательском интерфейсе. При этом пользовательский интерфейс должен работать и выглядеть одинаково во всех разделах сайта.
Не располагайте меню в верхней части одной страницы и в нижней части другой. Не переставляйте пункты меню каждый раз, когда оно загружается. Если вы размещаете контактную форму под постами в блоге, не скрывайте ее на других страницах сайта.
Дизайн должен быть согласованным во всех публикациях ресурса. Не меняйте шрифты заголовков и контента на разных страницах.
Принцип наименьшего удивления гласит, что если пользователь удивляется тому, как что-то работает… переделайте это, чтобы оно стало интуитивно понятным.
Также нужно убедиться, что пользовательский интерфейс соответствует основной платформе. Например, приложения для iOS работают не так, как для Android. Десктопные сайты предъявляют требования, отличающиеся от требований мобильных ресурсов.
3. Будьте предельно ясными
Пользователи должны ясно понимать, как получить доступ к тому или ному функционалу. Следование этому принципу подразумевает доработку UX. Это увеличивает время просмотра и снижает показатель отказов.
Одним из способов достижения ясности является переход от одного шага к другому на разных страницах. Предложите пользователям возможность перейти со страницы продукта в корзину, страницу оформления заказа, оплаты, страницу подтверждения. Эту технику практикует Amazon.
Пользователи будут точно знать, где они находятся, что устраняет неопределенность. Это особенно важно для мобильных пользователей, поскольку пространство экрана на их устройствах ограничено .
4. Предоставляйте обратную связь
Пользователи должны понимать, что происходит. Если они нажимают кнопку, укажите, что кнопка была нажата. Вы можете сделать это несколькими способами. Например, анимировать кнопку. Иконки загрузки (например, MacOS Rainbow Wheel) обеспечивают обратную связь: пользователи понимают, что вы работаете над их запросом.
Если разрешаете пользователям загружать файлы, укажите оставшееся время до окончания загрузки. Добавьте всплывающее или модальное окно, которое сообщит, что их действие было успешным.
5. Используйте распознавание, а не запоминание
В первую очередь оптимизируйте интерфейс, чтобы каждая его часть была интуитивно понятной. Это можно сделать с помощью иконок. Люди привыкают к иконкам, обозначающим конкретный функционал.
Это также можно сделать с помощью виртуальных туров, которые позволяют направлять пользователей. Они распознают процесс, как только появится первое модальное окно.
Также можно реализовать это с помощью сообщений. Мы делаем это с помощью простых всплывающих подсказок. Даже если кто-то не помнит, что делает та или иная иконка, мы описываем пользователю ее функцию.
6. Выберите модель взаимодействия
Хуже всего пытаться открывать на себя дверь, которая открывается в обратном направлении. Особенно, когда предыдущая дверь открывалась на себя. Дизайнер этого здания сделал пользовательский интерфейс несогласованным, поэтому вы понятия не имеете, как правильно открыть дверь.
На сайте может быть кнопка, которая таковой не является, но вы все равно будете ждать результата от ее нажатия. И все потому, что дизайнеры не продумали модель взаимодействия с продуктом.
На мобильных устройствах это может вводить в заблуждение. Посмотрите на Snapchat. Практически каждое отдельное действие выполняется , включая доступ к настройкам и профилю.
В Snapchat выбрали механизм взаимодействия с продуктом, и разработали пользовательский интерфейс на его основе. А не наоборот.
Когда разрабатываете пользовательский интерфейс, выберите основные инструменты для взаимодействия: меню, касания, иконки, жесты или что-то еще. Alexa и Siri используют голосовой ввод в качестве основного интерфейса. Способ, которым они предоставляют информацию и выполняют задачи, основан на этом подходе. Поэтому пользователь интуитивно понимает что делать.
7. Следуйте стандартам дизайна
Старая поговорка гласит: не исправляйте то, что работает . Действительно нет необходимости изменять что-то, если стандарт работает. Вы ведь не хотите идти вразрез с тем, чего ожидают пользователи?
Например, пользователи знают, что вопросительные знаки (?) указывают на раздел справки. Поэтому не используйте для его обозначения восклицательный знак (!) . Если хотите, чтобы пользователи находили мобильное меню, используйте значок «гамбургера» (три горизонтальные линии), а не сетку.
Как правило, панель поиска на сайтах располагается в верхней части боковой панели, в конце меню или в центре верхней части страницы. Если вы решите разместить поле поиска в нижней части боковой панели, в футере страницы или под текстом записей, пользователи не будут знать, где его искать. Даже если вы обозначите его с помощью стандартного значка.
8. Иерархия элементов
Элементы интерфейса на веб-страницах должны иметь четкую иерархию. Нужно, чтобы самые важные функции находились вверху веб-страниц. Кроме этого, подобная иерархия позволяет органично вести пользователя вниз по странице.
Большие элементы, размер которых уменьшается по мере прохождения страницы, указывают на важность и порядок. Использование пробелов также важно, так как беспорядок может замедлить продвижение пользователя и отвлечь его внимание. Чистые линии, много места и четко определенные элементы могут визуально указывать пользователям, как перемещаться по интерфейсу.
9. Будьте проще
Посмотрите на эту контактную форму:
А теперь на эту:
Обе формы предназначены для отправки пользовательского запроса. Одна из них не является трудной для заполнения, а другая вызывает головную боль. Помимо того, что нижняя форма является правительственной, она еще и разработана не для пользователя , а для администратора. Лучший подход — сделать все максимально удобным для пользователя . И один из эффективных способов достичь этого – вырезать все, что не является необходимым.
10. Подарите пользователям удобство управления и ощущение свободы
Предоставьте пользователям удобство управления, чтобы они не чувствовали себя ограниченными или скованными дизайном. Интерфейс должен позволять им выполнять те действия, которые они хотят. Это правило состоит из двух частей: контекста и доступа.
Любое действие, которое может предпринять пользователь, должно быть расположено рядом с элементом, с которым он хочет взаимодействовать. Если нужно отредактировать сообщение, кнопка редактирования должна находиться рядом с кнопками сохранения , публикации / отправки , предварительного просмотра .
Лучший вариант — контекстные меню для действий, которые пользователь может выполнить над конкретным элементом (или страницей). Если вы последовательны в своем пользовательском интерфейсе, то пользователи поймут, что контекстные меню или панели инструментов всегда содержат полный список действий для любого элемента.
Интерфейс всегда должен вызывать у пользователя ощущение, что он может выйти или отменить любое действие, которое он предпринимает. Это можно сделать, добавив кнопку « Отмена» на каждую страницу интернет-магазина. Потому что нажатие кнопки «Назад», доступной в браузере, может привести к потере введенных данных.
Или же это может быть функция отмены изменений , чтобы пользователи чувствовали, что могут экспериментировать без каких-либо опасений. А также история изменений для крупных проектов.
Завершен ли ваш интерфейс?
Следуя перечисленным выше правилам, вы будете готовы к следующему проекту веб-дизайна. И помните, что хороший пользовательский интерфейс ведет к хорошему пользовательскому опыту. Но это тема для совершенно другой статьи.
Данная публикация представляет собой перевод статьи « 10 Rules of Good UI Design to Follow On Every Web Design Project » , подготовленной дружной командой проекта Интернет-технологии.ру
Улучшить интерфейс за счёт мелочей: 7 хитростей
Перевод материала разработчика Адама Ватана и дизайнера Стива Щёгера, который сделал наш читатель, Виталий Асташкин.
Каждый веб-разработчик неизбежно приходит к моменту, когда приходится принимать важные решения по визуальному дизайну. Может быть, в вашей компании нет дизайнера на полную ставку, и поэтому вам приходится самостоятельно внедрять интерфейс новой функциональности. А может, вы взялись за сторонний проект и хотите, чтобы он выглядел лучше, чем ещё один сайт, созданный с помощью Bootstrap. Легко сдаться и сказать, что вы неспособны это сделать, потому что вы не художник. Но, оказывается, существует множество приёмов, которые не требуют опыта в графическом дизайне. Ниже приведены семь простых идей, которые помогут улучшить дизайн веб-страницы.
1. Используйте цвет и толщину шрифта для передачи иерархической структуры текста
Распространённая ошибка — слишком сильно полагаться на размер шрифта, работая с иерархией при стилевом оформлении текста. «Текст важный? Давайте сделаем его покрупнее». «Это второстепенный текст? Давайте уменьшим шрифт». Вместо того чтобы всю самую тяжёлую работу перекладывать только на шрифт, попробуйте выполнить ту же работу за счёт цветов или толщины шрифта. «Текст важный? Давайте сделаем шрифт потолще». «Это второстепенный текст? Давайте возьмём более светлый цвет». Попробуйте придерживаться двух или трёх цветов:
• Тёмный (но не чёрный) цвет для основного текстового контента (например, заголовок статьи).
• Серый для второстепенного текстового контента (дата публикации статьи).
• Светло-серый для вспомогательного контента (пример — предупреждение об авторском праве в сноске). В работе веб-интерфейсом полезно играть с толщиной шрифта:
• Шрифт нормальной толщины (400 или 500, зависит от начертания) — для основной части текста.
• Более толстый шрифт (600 или 700) — для текста, который вы хотите выделить. Не берите шрифты толщиной меньше 400 для работы с пользовательским интерфейсом. Они могут неплохо работать с крупными буквами заголовка, но если буквы маленькие, их сложно читать. Если надо показать незначительность текста, не уменьшайте его толщину — лучше используйте светлый оттенок или шрифт меньшего размера.
2. Не делайте серый текст на цветном фоне
Светло-серый текст на белом фоне хорошо подходит, если вы хотите, чтобы текст не привлекал внимание читателя. Но на цветном фоне светло-серый текст уже смотрится плохо. Так происходит из-за уменьшения контраста. Выстроить иерархию в тексте позволяет приближение цвета текста к цвету фона, а не светло-серый цвет. Уменьшить контраст при работе с цветным фоном можно двумя способами.
Уменьшить прозрачность белого текста
Сделайте текст белым и увеличьте степень его прозрачности. Фон в таком случае будет немного просвечивать, а значит, текст не будет привлекать внимание читателя и не будет конфликтовать с фоном.
Вручную подобрать цвет, который будет основан на цвете фона
Этот способ работает лучше, чем увеличение степени прозрачности, если фон — это фотография или рисунок, или если увеличение прозрачности текста делает его слишком мрачным либо размытым. Выберите цвет того же оттенка, что и фон, а дальше настраивайте насыщенность и яркость, пока цвет не покажется вам правильным.
3. Смещайте тени
Чтобы тени были заметнее, вместо blur и spread добавьте вертикальное смещение. Такой эффект смотрится более естественно, потому что симулирует источник света, расположенный сверху. Мы привыкли к такому освещению в реальном мире. Это работает и со встроенной тенью, которую можно использовать в ячейках или формах ввода: Если хотите узнать больше о дизайне с тенью, Material Design Guidelines — прекрасный учебник для начинающих.
4. Меньше используйте границы
Если нужно разделить два элемента, не хватайтесь за границы, будто это единственный способ. Слишком частое использование границ может перегрузить дизайн. В следующий раз, когда решите воспользоваться границами, вспомните про одну из следующих идей.
Использовать тень в ячейке
Тень в ячейке отлично оттеняет элемент, как это сделала бы и граница, но смотрится неброско, достигает той же цели, но не так сильно отвлекает внимание.
Использовать два различных цвета фона
Чтобы разделить два расположенных рядом элемента достаточно даже небольшого отличия в цвете фона хватит. Если вы уже используете разный цвет фона в дополнение к границе, попробуйте её удалить — возможно, она вам и не нужна.
Добавить дополнительное пространство
Размещение элементов на большем расстоянии друг от друга — прекрасный способ разделить их и при этом обойтись совсем без новых деталей в интерфейсе.
5. Не увеличивайте иконки, которые должны быть маленькими
Если вы работаете над чем-то, где можно использовать большие иконки (пример — раздел «Функциональные возможности» на лендинге»), возможно, вы инстинктивно берёте бесплатный набор иконок (например, Font Awesome или Zondicons) и увеличиваете размер, пока он не покажется вам подходящим. Это векторные изображения, так что качество при масштабировании не страдает, так? Но если размер иконок был 16—24 px, после трёхкратного или четырёхкратного увеличения они не будут смотреться профессионально. У них не будет нужной детализации, так что они всегда будут казаться непропорциональными и грубыми. Если у вас есть только маленькие иконки, попробуйте вставить их в фигуру другого цвета: С одной стороны, сама иконка будет ближе к своему размеру, с другой, она займёт больше пространства на странице. А если позволяет бюджет, вы можете воспользоваться премиум-набором иконок, изначально созданных большими. Попробуйте Heroicons или Iconic.
6. Используйте цветную границу, чтобы добавить цвета в спокойный дизайн
Если вы не графический дизайнер, как добавить веб-интерфейсу визуальную изюминку, которая у дизайнеров появляется благодаря красивым фотографиям или цветным иллюстрациям? Очень простой способ — с помощью цветных границ добавить акцент в те части интерфейса, которые иначе бы смотрелись слишком бледно. Например, сбоку от предупреждения:
Или чтобы подчеркнуть активный пункт навигации:
Или даже по всей ширине вверху макета: Чтобы добавить в UI цветной прямоугольник, не нужен талант графического дизайнера. Но такой прямоугольник может придать вашему сайту более профессиональный вид. Сложно выбрать цвета? Попробуйте начать с ограниченной палитры Color Search от Dribbble, чтобы не попасть под влияние бесконечных возможностей обычной палитры цветов.
7. Не каждой кнопке нужен цветной фон
Когда пользователь может произвести много разных действий на странице, очень легко попасться в ловушку и сделать дизайн этих действий, опираясь исключительно на семантику. Шаблоны сервисов вроде Bootstrap даже поощряют это — предоставляют меню семантических стилей при выборе кнопки: «Это положительное действие? Сделайте кнопку зелёной». «Это удаление данных? Сделайте кнопку красной». Но существует более важный момент, о котором обычно забывают, — иерархия. Каждое действие на странице имеет своё место в пирамиде важности. На большинстве страниц есть одно главное действие, пара менее важных второстепенных действий и несколько редко используемых действий третьестепенной важности. Дизайн должен отражать место действий в этой иерархии:
• Основные действия должны быть очевидными. Здесь хорошо использовать высококонтрастные и ровные цвета фона.
• Второстепенные действия должны быть ровными, но не яркими. Здесь лучше всего применить стиль внешней границы элемента (Outline styles) или цвета фона с меньшей контрастностью.
• Третьестепенные действия должны быть заметны, но не навязчивы. Лучше всего здесь применить стиль ссылок. «А что с деструктивными действиями? Разве не нужно их всегда выделять красным?». Необязательно. Если деструктивное действие не является главным на этой странице, лучше сделать его в стиле второстепенного или третьестепенного действия. Приберегите такое стилевое оформление — жирный шрифт, красный цвет — для тех случаев, когда негативное действие является основным действием в интерфейсе. Например, в диалоговом окне подтверждения:
Перевод материала разработчика Адама Ватана и дизайнера Стива Щёгера, который сделал наш читатель, Виталий Асташкин.
Каждый веб-разработчик неизбежно приходит к моменту, когда приходится принимать важные решения по визуальному дизайну. Может быть, в вашей компании нет дизайнера на полную ставку, и поэтому вам приходится самостоятельно внедрять интерфейс новой функциональности. А может, вы взялись за сторонний проект и хотите, чтобы он выглядел лучше, чем ещё один сайт, созданный с помощью Bootstrap. Легко сдаться и сказать, что вы неспособны это сделать, потому что вы не художник. Но, оказывается, существует множество приёмов, которые не требуют опыта в графическом дизайне. Ниже приведены семь простых идей, которые помогут улучшить дизайн веб-страницы.
1. Используйте цвет и толщину шрифта для передачи иерархической структуры текста
Распространённая ошибка — слишком сильно полагаться на размер шрифта, работая с иерархией при стилевом оформлении текста. «Текст важный? Давайте сделаем его покрупнее». «Это второстепенный текст? Давайте уменьшим шрифт». Вместо того чтобы всю самую тяжёлую работу перекладывать только на шрифт, попробуйте выполнить ту же работу за счёт цветов или толщины шрифта. «Текст важный? Давайте сделаем шрифт потолще». «Это второстепенный текст? Давайте возьмём более светлый цвет». Попробуйте придерживаться двух или трёх цветов:
• Тёмный (но не чёрный) цвет для основного текстового контента (например, заголовок статьи).
• Серый для второстепенного текстового контента (дата публикации статьи).
• Светло-серый для вспомогательного контента (пример — предупреждение об авторском праве в сноске). В работе веб-интерфейсом полезно играть с толщиной шрифта:
• Шрифт нормальной толщины (400 или 500, зависит от начертания) — для основной части текста.
• Более толстый шрифт (600 или 700) — для текста, который вы хотите выделить. Не берите шрифты толщиной меньше 400 для работы с пользовательским интерфейсом. Они могут неплохо работать с крупными буквами заголовка, но если буквы маленькие, их сложно читать. Если надо показать незначительность текста, не уменьшайте его толщину — лучше используйте светлый оттенок или шрифт меньшего размера.
2. Не делайте серый текст на цветном фоне
Светло-серый текст на белом фоне хорошо подходит, если вы хотите, чтобы текст не привлекал внимание читателя. Но на цветном фоне светло-серый текст уже смотрится плохо. Так происходит из-за уменьшения контраста. Выстроить иерархию в тексте позволяет приближение цвета текста к цвету фона, а не светло-серый цвет. Уменьшить контраст при работе с цветным фоном можно двумя способами.
Уменьшить прозрачность белого текста
Сделайте текст белым и увеличьте степень его прозрачности. Фон в таком случае будет немного просвечивать, а значит, текст не будет привлекать внимание читателя и не будет конфликтовать с фоном.
Вручную подобрать цвет, который будет основан на цвете фона
Этот способ работает лучше, чем увеличение степени прозрачности, если фон — это фотография или рисунок, или если увеличение прозрачности текста делает его слишком мрачным либо размытым. Выберите цвет того же оттенка, что и фон, а дальше настраивайте насыщенность и яркость, пока цвет не покажется вам правильным.
3. Смещайте тени
Чтобы тени были заметнее, вместо blur и spread добавьте вертикальное смещение. Такой эффект смотрится более естественно, потому что симулирует источник света, расположенный сверху. Мы привыкли к такому освещению в реальном мире. Это работает и со встроенной тенью, которую можно использовать в ячейках или формах ввода: Если хотите узнать больше о дизайне с тенью, Material Design Guidelines — прекрасный учебник для начинающих.
4. Меньше используйте границы
Если нужно разделить два элемента, не хватайтесь за границы, будто это единственный способ. Слишком частое использование границ может перегрузить дизайн. В следующий раз, когда решите воспользоваться границами, вспомните про одну из следующих идей.
Использовать тень в ячейке
Тень в ячейке отлично оттеняет элемент, как это сделала бы и граница, но смотрится неброско, достигает той же цели, но не так сильно отвлекает внимание.
Использовать два различных цвета фона
Чтобы разделить два расположенных рядом элемента достаточно даже небольшого отличия в цвете фона хватит. Если вы уже используете разный цвет фона в дополнение к границе, попробуйте её удалить — возможно, она вам и не нужна.
Добавить дополнительное пространство
Размещение элементов на большем расстоянии друг от друга — прекрасный способ разделить их и при этом обойтись совсем без новых деталей в интерфейсе.
5. Не увеличивайте иконки, которые должны быть маленькими
Если вы работаете над чем-то, где можно использовать большие иконки (пример — раздел «Функциональные возможности» на лендинге»), возможно, вы инстинктивно берёте бесплатный набор иконок (например, Font Awesome или Zondicons) и увеличиваете размер, пока он не покажется вам подходящим. Это векторные изображения, так что качество при масштабировании не страдает, так? Но если размер иконок был 16—24 px, после трёхкратного или четырёхкратного увеличения они не будут смотреться профессионально. У них не будет нужной детализации, так что они всегда будут казаться непропорциональными и грубыми. Если у вас есть только маленькие иконки, попробуйте вставить их в фигуру другого цвета: С одной стороны, сама иконка будет ближе к своему размеру, с другой, она займёт больше пространства на странице. А если позволяет бюджет, вы можете воспользоваться премиум-набором иконок, изначально созданных большими. Попробуйте Heroicons или Iconic.
6. Используйте цветную границу, чтобы добавить цвета в спокойный дизайн
Если вы не графический дизайнер, как добавить веб-интерфейсу визуальную изюминку, которая у дизайнеров появляется благодаря красивым фотографиям или цветным иллюстрациям? Очень простой способ — с помощью цветных границ добавить акцент в те части интерфейса, которые иначе бы смотрелись слишком бледно. Например, сбоку от предупреждения:
Или чтобы подчеркнуть активный пункт навигации:
Или даже по всей ширине вверху макета: Чтобы добавить в UI цветной прямоугольник, не нужен талант графического дизайнера. Но такой прямоугольник может придать вашему сайту более профессиональный вид. Сложно выбрать цвета? Попробуйте начать с ограниченной палитры Color Search от Dribbble, чтобы не попасть под влияние бесконечных возможностей обычной палитры цветов.
7. Не каждой кнопке нужен цветной фон
Когда пользователь может произвести много разных действий на странице, очень легко попасться в ловушку и сделать дизайн этих действий, опираясь исключительно на семантику. Шаблоны сервисов вроде Bootstrap даже поощряют это — предоставляют меню семантических стилей при выборе кнопки: «Это положительное действие? Сделайте кнопку зелёной». «Это удаление данных? Сделайте кнопку красной». Но существует более важный момент, о котором обычно забывают, — иерархия. Каждое действие на странице имеет своё место в пирамиде важности. На большинстве страниц есть одно главное действие, пара менее важных второстепенных действий и несколько редко используемых действий третьестепенной важности. Дизайн должен отражать место действий в этой иерархии:
• Основные действия должны быть очевидными. Здесь хорошо использовать высококонтрастные и ровные цвета фона.
• Второстепенные действия должны быть ровными, но не яркими. Здесь лучше всего применить стиль внешней границы элемента (Outline styles) или цвета фона с меньшей контрастностью.
• Третьестепенные действия должны быть заметны, но не навязчивы. Лучше всего здесь применить стиль ссылок. «А что с деструктивными действиями? Разве не нужно их всегда выделять красным?». Необязательно. Если деструктивное действие не является главным на этой странице, лучше сделать его в стиле второстепенного или третьестепенного действия. Приберегите такое стилевое оформление — жирный шрифт, красный цвет — для тех случаев, когда негативное действие является основным действием в интерфейсе. Например, в диалоговом окне подтверждения:
Арсенал программиста. 7 инструментов для эффективной работы
Работа программиста очень сложна. Поэтому любой инструмент, который ее облегчает, следует только приветствовать. Теоретически можно кодить, имея под рукой только блокнот и компилятор, но на практике программист пользуется специальными инструментами для ускорения работы.
Разберем семь инструментов программиста, которые нужны для повседневной работы.
1. Интегрированная среда программирования (IDE)
Среда разработки — это основной инструмент, который программист запускает сразу же, как только приходит на работу. Типовая среда включает:
- Редактор с подсветкой кода
- Компилятор
- Отладчик
- Управление проектами
Существуют универсальные IDE, которые поддерживают много языков программирования:
Существуют специализированные IDE, которые нацелены на один язык программирования:
К сожалению, практика работы программиста такова, что знания одного языка программирования и одной среды программирования явно недостаточно. Постоянно приходится использовать разные языки или среды в зависимости от задачи. Поэтому рекомендую пробовать и изучать разные IDE. Вы никогда не знаете, где это может пригодиться.
Есть много сравнительных таблиц IDE. Например, здесь. Ниже фрагмент сравнительной таблицы IDE для C/C++.
В качестве основного IDE лучше выбрать ту среду разработки, которая вам наиболее комфортна и удобна. И ее уже изучить досконально. Это существенно повысит вашу производительность.
2. Профилировщик кода (профайлер, профилер)
Профилировщик кода, или как часто на жаргоне его называют профилер (от слова profiler) — это инструмент, который собирает информацию о работе программы. Как правило, профилер требуется в тех случаях, когда ваша программа работает не так быстро, как хотелось бы.
Чтобы найти узкое место программы запускают профилер, который фиксирует время выполнения различных фрагментов программы.
Существует много профилеров, как универсальных, так и специализированных. Большой список можно найти здесь (en).
Но самым популярным профилером является GNU Gprof. Он есть в сборке Си-экспресс. Чтобы его использовать, нужно сделать следующие действия:
1. Включить профилирование в параметрах сборки проекта. Щелкнуть правой кнопкой на проекте и выбрать соответствующий пункт меню.
2. Перекомпилировать и запустить программу.
3. Запустить профилер. Меню — Модули — Code profiler
3. Система контроля версий
Часто бывает, что программист внес правки в исходный код и программа перестала работать. Для быстрого возврата к работающей версии используются системы контроля версий (SVN). Они ведут учет изменений в файлах и позволяют откатить изменения до нужной точки.
Наиболее популярными являются:
Раньше SVN работали на компьютере разработчика, но в последнее время используются веб-серверы для SVN. Это дает много преимуществ, можно работать на разных компьютерах и иметь копию программы в облаке.
Существенных отличий между этими системами нет. Базовый функционал одинаковый, разница только в способах реализации. Поэтому можете выбрать ту систему, которая вам больше понравится.
Самыми популярными серверами SVN являются:
- GitHub (сервис платный, но бесплатен для проектов с открытым исходным кодом).
- Bitbucket (бесплатный сервис)
4. Визуальный редактор интерфейса
Хотя интерфейс программы можно полностью написать в коде, но это подходит только для совсем простых программ. Программирование интерфейса вручную — это чрезвычайно долгий и трудоемкий процесс.
Есть еще одна причина, чтобы это процесс сильно ускорить — общение с заказчиком. Самый первый разговор с заказчиком станет намного продуктивнее, если вы сможете быстро набросать макет программы. Заказчики ничего не понимают в программировании, но интерфейс понимают все. Чем более быстро вы покажет макет будущей программы, тем быстрее получите заказ.
Существуют множество редакторов интерфейса, которые помогают набросать внешний вид программы простым перетаскиванием виджетов. Другое их название GUI-конструкторы. Они могут как отдельными программами, например, Glade. А могут быть плагинами к IDE, как, например wxSmith для CodeBlocks.
Как правило, задача визуального редактора — задать расположение элементов интерфейса, а код обработки сообщений программист пишет уже в программе.
5. Редактор баз данных
Для прикладных программ работа с базами данных (БД) является обязательным условием. Если вы пишете программу для автоматизации бизнеса, то вам потребуются работа с базами:
- Сотрудников
- Товаров
- Покупателей
- Счетов и т.д.
Базы данных — это основа автоматизации любой компании. Поэтому программисту в той или иной форме нужно будет взаимодействовать с базами данных. В этом ему помогают редакторы БД, которые позволяют управлять информацией в базах данных.
Самым мощной и удобной системой управления базами данных (СУБД) является Microsoft Access, который входит в состав Microsoft Office. Возможности Access очень велики. Эта СУБД позволяет разработать автоматизацию небольшую компании. Но полученный продукт не очень удобно тиражировать из-за особенностей лицензирования Microsoft Office.
Самыми распространенными редакторами БД являются:
- PhpMyAdmin
- He >6. Инструмент тестирования ПО
Как только программист написал программу, то нужно убедиться в том, что она работает. Для этого существует отдельный процесс, который называется тестирование ПО.
Суть тестирования состоит в том, что тестировщик выполняет пакет тестов и проверяет соответствие реального поведения программы с заданным.
Проблема тестирования заклюается в том, что предвидеть заранее все возможные варианты использования программы невозможно. Поэтому тестирование ПО — это больше искусство, чем наука.
Пока программы были не очень сложными, использовалось так называемое «исчерпывающее тестирование», то есть проверялась работа программы на всех возможных ветках в ыполнения. Но очень скоро количество комбинаций веток стало превышать возможности тестировщиков, и сейчас проводится выборочное тестирование. Выбирается некоторый основной вариант использования программы и для него пишутся тесты.
Трудно найти универсальные инструменты автоматического тестирования. Как правило, программист ищет инструмент тестирования под конкретную задачу. Если же такого инструмента не находится, то приходится его писать самому.
7. Фреймворк
Многие программы имеют общие модули. Отсюда приходит желание не писать каждый раз программу с нуля, а использовать какой-нибудь каркас. Так появилось понятие фреймворка, что в переводе означает «каркас».
Фреймворк отличается от библиотеки тем, что библиотека никак влияет на работу программиста. Ему достаточно подключить библиотеку и он может произвольно вызывать функции библиотеки.
Фреймворк диктует принцип построения программы. Обычно при работе с фреймворком сразу генерится некоторый прототип программы, а программист должен развивать этот прототип до готовой программы.
Так как принципы разработки едины, то на фреймворке можно достаточно быстро построить вполне рабочую программу. Но есть и серьезный недостаток в использовании фреймворка.
Если функционал программы сильно отличается от тех принципов, которые использует фреймворк, то программисту приходится постоянно изобретать разные приемы, чтобы согласовать требования заказчика и ограничения фреймворка. Иногда бывает, что использование фреймворка не только ускоряет, а, наоборот, замедляет программирование.
Форум разработчиков: игровой интерфейс
Когда очередной академик с экрана телевизора начинает стонать по поводу засорения русского языка англоязычными словами, очень хочется спросить, как бы он перевел слово «интерфейс»? «Стык»? «Смычка»? Или, может быть, «междумордие»? Мало кто понял бы академика, попробуй он описать проблемы игрового интерфейса «по-русски». Во-первых, интерфейсов в игре много. Каждый игрок видит их как минимум два: интерфейс оболочки (различные меню: настройки, загрузка, сохранение, выход, выбор уровня сложности и т.п.) и внутриигровой интерфейс (элементы управления, которые выводятся на экран во время игры). Еще одним люди обязательно пользуются, но чаще всего не знают об этом: системой управления (персонажем, юнитами, производством ресурсов).
Как утверждают авторы умных книг, например Брент Фокс в очень популярном среди западных разработчиков труде «Дизайн игрового интерфейса» (Game Interface Design), плохой интерфейс способен испортить любую игру. Важность его не вызывает у девелоперов сомнений. Однако замечено, что геймеры, ругая или нахваливая игру, практически никогда не упоминают удобство или неудобство интерфейса. Кто-то его не замечает, некоторые же вообще не догадываются, что именно включает в себя это понятие. Давайте поговорим, что это за зверь, заодно попробуем выяснить, что такое хороший, а что такое плохой интерфейс. В этом нам помогут:
tool — Алексей Пациорковский, менеджер внешних проектов фирмы «1С»;
amicus — Петр Прохоренко, руководитель проектов и ведущий геймдизайнер Lesta Studio;
AG — Макс Тумин, менеджер и геймдизайнер GFI Russia;
Brent Fox — Брент Фокс, проектировщик интерфейсов в компании Wahoo Studios, автор широко известного учебника «Дизайн игрового интерфейса»;
Erno — Эрлинг Эллингсен, пиар-менеджер датской компании Funcom (разработчики Anarchy Online и Age of Conan);
ChS — Михаил Пискунов, ведущий сценарист KDV Games;
Rai — Михаил Матвиенко, разработчик интерфейсов в Targem Games;
Айвен — Иван Магазинников, геймдизайнер Katauri Interactive.
Blizzard — основа основ
[Игромания]: Игровые журналисты, разбирая игры по косточкам, обычно довольно много внимания уделяют интерфейсу, а вот геймеры очень редко обращают на него внимание. Как вы считаете, не преувеличивают ли журналисты важность интерфейса?
[AG]: Скорее наоборот, важность интерфейса обычно недооценивают. Причем чаще всего не журналисты и геймеры, а сами разработчики. Делают наспех, потом многократно переделывают, дополняют, и получается, простите за грубость, черт-те что, привинченное к игре непонятно как.
Девелоперы слишком мало времени уделяют движку интерфейса (да, да, не удивляйтесь, есть и такой движок), его удобству и гибкости. И мало кто понимает, что криво скроенный интерфейс в итоге приводит к ограничениям в геймплее. И вот игрок, скрипя зубами, лавирует между двумя кнопками, чтобы добраться до меню. Нет, есть игры, которым это не мешает, например пошаговые тактики, там можно сесть и подумать. Но в экшенах или в RTS, где скорость решает все, ошибки в интерфейсе смерти подобны.
Графический интерфейс в Gears of War сведен к минимуму. О том, что персонажу нехорошо, напоминает лишь подрагивание экрана да красная пелена перед глазами.
[Brent Fox]: Зайду издалека. В самом широком смысле игровой интерфейс — это способ передачи информации геймерам для взаимодействия с игрой. Когда говорят об интерфейсе, чаще вспоминают полоски здоровья и мини-карты, ведь именно они помогают понять, что же происходит в игре. Все элементы внутриигрового интерфейса выводятся на экран в виде HUD, поскольку это самый очевидный и привычный способ передачи информации о состоянии и положении дел в игре.
То же самое можно было бы сделать по-другому. Например, игрок может догадаться о состоянии своего здоровья без помощи лайфбара. Вспомните, например, Gears of War, там никакого точного индикатора уровня здоровья нет. Зато, когда персонажу становится плохо, перед глазами появляется кровавая дымка, начинает раскачивать из стороны в сторону. А ведь для разработчика подобное представление здоровья с помощью анимации — все тот же пользовательский интерфейс, и работают над ним те же люди, которые в других играх рисовали красные полоски здоровья.
Теперь почувствовали важность интерфейса? Он есть, даже если геймеры его вообще не видят.
[ChS]: Чуть-чуть истории. Если верить старым техническим словарям, интерфейс — это устройство сопряжения человека и машины. Или же зона контакта человека и игры, где геймер получает данные о ходе игрового процесса и отдает управляющие этим процессом команды.
Хороший контакт — незаметный контакт, он не должен искрить и греться. Управляющие и информационные импульсы должны пролетать с минимальными задержками и потерями (нервов игрока и его внимания). В противном случае что-то может перегореть. Все это относится к области юзабилити (от англ. usability — удобство применения), искусству зачищать подобные контакты.
[Erno]: Хороший интерфейс не бросается в глаза, но четко выполняет свое предназначение — передает рычаги управления игрой. Я считаю, что дефекты интерфейса не могут убить хорошую игру, но они проводят четкую грань между просто замечательной и великой игрой.
Да, есть отдельные жанры, которые сильно зависят от интерфейса, — в первую очередь стратегии. Там игроку приходится регулировать множество параметров, постоянно что-то выбирать. За невзрачными кнопками скрыты океаны игровой статистики: чем проще доступ к данным, тем лучше. Однако управление при этом не должно пострадать. Это сложно, но у некоторых получается.
[Айвен]: Как ни грустно это признавать, но во многих играх роль интерфейса настолько преуменьшена, что плакать хочется. Порой возникает ощущение, что сляпал его один человек, да еще и по принципу «чтобы было». Или взял и скопировал элементы интерфейса у похожих игр, но при этом умудрился позаимствовать самые неудачные моменты.
Так и хочется спросить: играл ли проектировщик в собственную игру? Видел ли он когда-нибудь игры с хорошим интерфейсом? Иначе как объяснить отсутствие стиля и атмосферы (хайтек-интерфейс в фэнтези-игре, например), слабое графическое исполнение и кнопку выхода из игры в труднодоступном контекстном меню с названием «Закрыть текущую сессию»?
[tool]: Создание адекватных механизмов взаимодействия между геймером и игрой — одна из самых важных задач разработки. И дело не только в графическом интерфейсе, это лишь часть общей системы. Лучшая похвала для интерфейсов — это простота и незаметность. Потому в хороших играх его и не замечают, зато если уж интерфейс не задался, то обязательно скажут что-нибудь про «кошмарное управление».
При желании интерфейс EVE Online можно разложить вот в такое вот чудовище, которое будет занимать весь экран. Но во время космических перелетов и баталий он занимает совсем немного места.
[Игромания]: Насколько субъективны впечатления от интерфейса?
[amicus]: Ощущения от вида интерфейса обычно субъективны. Одному нравится зеленый и в крапинку, а другому — стилизованный под рококо и с праздничными ленточками. Впрочем, стиль чувствуют все.
Что же касается юзабилити, тут строго обратная ситуация — если плохо, то плохо для всех. Кривая организация интерфейса заставляет мозг пользователя скрежетать, а это мало кому по душе. Приведу пару конкретных примеров — Age of Wonders 2. Кнопку «Включить автоповтор последнего заказа» в меню города я нашел через несколько месяцев игры — это такой крохотный чекбоксик (окошко, где нужно поставить галочку) в уголке. При этом функция одна из важнейших, она очень сильно упрощает и ускоряет игру.
Недосмотрели один момент в «Агрессии», там в окне строительства зданий продублирована функция прокрутки по городам (переход к следующему или предыдущему городу). Вышло так, что сначала эту функцию (а она важная) сделали почему-то только для меню строительства. А позже ей нашли место под «портретом» города и она превратилась в стандартное решение для всех типов объектов в игре. Вроде бы мелочь, но жить мешает.
Хороший пример — почти все игры от Blizzard, их вообще можно в качестве учебника использовать, вот только даже банально скопировать у многих не получается.
[Айвен]: Да, в Blizzard умеют делать интерфейсы. Приведу другой пример, когда не самая лучшая реализация интерфейса почти не навредила игре — «Ведьмак». В целом интерфейс там удобный и функциональный, но, чтобы нормально им пользоваться, надо потратить довольно много времени на изучение и привыкание. И визуально он выполнен странно. Мне кажется, что при такой же компоновке и функционале, но в другом визуальном исполнении, он был бы гораздо приятнее и дружелюбнее.
[Brent Fox]: Я снова буду говорить банальности, но интерфейс — сердце игры. Ведь что нужно геймеру? Чтобы игра его не напрягала, а если и напрягала, то делала это приятно. Вся важная информация, необходимая для принятия решений, должна находиться под рукой, чтобы можно было вовремя реагировать на любые изменения игровой ситуации.
Представьте себе, что вы заходите на кухню налить себе чашку чая, и тут оказывается, что у вас нет рук, чтобы это сделать, а рядом с чайником висит табличка «Наливай ногами». Заманчивая перспектива? Вот в играх точно так же: для любого очевидного действия должен быть простой и логичный интерфейс. Если его не будет, геймер будет разражен и уйдет в игру, где чай наливают руками.
[ChS]: Я скажу больше: интерфейс — это и есть игра. Вернее, он целиком отражает игровой процесс. Вот есть рычаг переключения скоростей в полу машины — это элемент интерфейса для отдачи команды «Сменить передачу». Но почему именно рычаг и почему именно снизу? Такова конструкция и сама логика автомобилей — расположение коробки передач внизу и необходимость двигать в ней шестеренки вручную. Тут прослеживается технология, по которой машина сделана, и механика, благодаря которой она работает.
Игры со схожим геймплеем имеют схожие интерфейсы. Это же естественный отбор! Все, что плохо, отсеивается. Кстати, геймплей и интерфейс — вещи взаимосвязанные, и, изменяя одно, можно влиять на другое. Допустим, создавать эдаких геймплейных мутантов. Оставляем только две клавиши управления, и смысл игры меняется.
Вот и получается, что, с одной стороны, требование к интерфейсу вроде бы одно — юзабилити. Чтобы не рябило в глазах, чтобы все кнопки на месте и никаких лишних движений. А с другой стороны, на интерфейсе висит столько разных задач, что без геймдизайнера его делать никак нельзя.
Реальный подход
[Игромания]: Кто создает игровой интерфейс?
[AG]: Для разработки полноценного интерфейса нужны три человека: дизайнер, художник и программист. При наличии гибкого движка интерфейса, к которому есть инструментарий, от программиста можно отказаться. Или привлекать его по мере необходимости, когда нужно добавить новые функции. При удачном стечении обстоятельств дизайнер и художник могут быть одним человеком.
[amicus]: У нас этим занимаются геймдизайнер, художник, программист, тестер — примерно в такой последовательности. Обычно дизайнер (иногда не один, а 2-3 человека) придумывает интерфейсное решение, рисует прототип, который отдает художнику. Пока делается арт, работа над логикой продолжается. В результате художник время от времени получает лист с исправлениями. Да и графическое решение немного меняет интерфейс, потом оно еще раз меняется в процессе «монтажа» в игру. А потом еще немного в ходе тестирования. Ошибка на любом этапе может быть фатальной.
[Rai]: Интерфейсы делают те, кто может их делать. Многое зависит от технологий: двухмерный или трехмерный интерфейс, анимированный или нет, существует ли инструментарий или требуется помощь программиста. Допустим, нам требуется двухмерный анимированный интерфейс. Кто его будет делать?
1. Геймдизайнер формирует функциональное описание интерфейса: где, что и на каком экране происходит, как на это будет реагировать пользователь.
2. Проектировщик делает сетку интерфейсов, задает правила, по которым интерфейс компонуется, определяет размеры элементов. Все это на основе описания, полученного от геймдизайнера.
3. Художник в рамках заданного стиля рисует все, что заказано первыми двумя коллегами, от общих элементов до уникальных.
4. Верстальщик режет текстуры, делает текстовые описания экранов для программиста, вылавливает грубые ошибки, появившиеся на предыдущих этапах.
5. Аниматор придумывает и реализует анимации в интерфейсах. За ним следят художник, верстальщик и программист, чтобы анимации не было слишком много.
6. Программист пишет код, пытаясь понять логику, которой руководствовались все остальные члены команды.
Все это в идеале, на деле один человек может работать по нескольким направлениям, а где-то потребуются 2-3 человека. Зависит от ситуации.
У нас практикуется поэкранное разделение описания функционала, то есть геймдизайнеры расписывают отдельные экраны. Причем одно из требований — отсутствие привязки к конкретным элементам управления. Никаких кнопок «Просмотреть все» или «Ползунок яркости», только описание действий. А уже потом я решаю, какие элементы интерфейса будут выполнять эти задачи.
Эволюция интерфейса RTS. Каких-то концептуальных изменений со времен Dune 2 не произошло.
[ChS]: Наши программисты давно освобождены от работы над интерфейсами конкретных проектов. Потому что в свое время они сделали универсальный движок. Теперь сборка от и до происходит в редакторе Vista Engine. Этим занимаются контент-менеджеры по схеме, составленной главным геймдизайнером игры (он, кстати, назначает все клавиши управления). Концепт-дизайнер может потребовать, чтобы сделали какой-то дополнительный элемент интерфейса, и это обязательно будет учтено.
[Айвен]: У нас сначала геймдизайнер составляет список требований по функционалу интерфейса. Потом он же проводит анализ существующих игр и выдает целую кучу набросков с макетами. Все это дело обдумывается, согласовывается с главным геймдизайнером и передается дизайнеру интерфейсов (специальный «умный» художник, который на них собаку съел). Он уже видит функционал, знает пожелания геймдизайнеров, но не обязан им жестко следовать.
От него геймдизайнеры получают уже графические варианты интерфейсов. И они не всегда соответствуют представленным ранее макетам. Из множества вариантов выбирается оптимальный по удобству, функциональности и красоте. Выслушиваются любые мнения, в том числе и пробегавших мимо программистов, возмущенных тем, что «кнопку юзать неудобно, передвиньте; и грифон на ней некрасивый!».
По финальному макету дизайнер готовит отдельные элементы для программиста интерфейсов и художников, которые отрисовывают особо сложные картинки. После сборки все это многократно тестируется геймдизайнерами и дорабатывается. Иногда некоторые окна, благополучно просуществовавшие в игре года два, вдруг переделываются с нуля. А потом еще раз.
Концептомания | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Правила хорошего интерфейса | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
19.04.2011, 20:51 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Как создать интерфейс шахматной программы без движка через С++ Как проще всего сделать интерфейс для программы на С++? Как создать интерфейс для заполнения двумерного массива Интерфейс для программы Интерфейс для программы Английский для IT. Как учиться программисту + 79 ресурсовПо статистике, более 75% заказов на разработку программного обеспечения поступает к отечественным специалистам от иностранцев и почти все заказчики предпочитают общаться на английском языке. Именно поэтому каждый IT-специалист должен владеть им на хорошем уровне. В этой статье мы расскажем, как английский поможет вам в работе и какие ресурсы нужно использовать при изучении английского для программистов. Зачем программисту английский языкЕсли вы уже начали работу в IT-сфере, то прекрасно понимаете, что без английского программистам не обойтись. Однако некоторые люди считают, что технический английский можно и не учить: почти вся терминология произошла из английского, поэтому все будет понятно и так. Тем, кто не уверен, стоит ли тратить время на изучение иностранного языка, мы приведем несколько весомых аргументов.
Большинство языков программирования основано на ключевых словах на английском языке. В некоторых из них отсутствует русифицированный интерфейс. Практически все справочные материалы и технические задания пишутся на английском (если вас интересуют заказы из заграницы). Многие зарубежные компании активно пользуются услугами русских «айтишников», и, чтобы точно понимать нужды клиентов, вам нужно хорошо знать английский. Новейшие книги и статьи в IT-сфере публикуются на английском языке. Программистам нужно постоянно быть в курсе всех новостей и обновлений, поэтому стоит учить английский. В Интернете можно найти сотни обучающих бесплатных курсов от гуру программирования. А на платных курсах вы сможете получить диплом международного образца — большой плюс к резюме. В своей работе вы периодически сталкиваетесь со сложными задачами и некоторыми проблемами, решение которых можно найти в англоязычной части Интернета. Не секрет, что почти все IT-гиганты находятся в США. В такие фирмы постоянно требуются грамотные специалисты, но, чтобы общаться с коллегами и дирекцией, необходимо знать английский язык. Хотите работать в Силиконовой долине? Учите английский. Ваши сильные и слабые стороны: как учить английский программистуВ изучении английского, как и в любом другом деле, следует использовать свои сильные стороны и стараться работать над слабыми. Давайте выясним, над чем вам предстоит трудиться.
Как использовать: грамматика — логичная структура, поэтому при условии постоянных занятий вам будет несложно ее изучить. Как использовать: вам будет проще изучать английский для IT, ведь у вас уже есть хорошая база лексики. При изучении слов вы заметите, что многие знакомые вам «технические» слова имеют другое значение в общеразговорном английском. Ваши слабые стороны:
Причина: в технических текстах, как правило, используется сложная терминология, но очень простые грамматические конструкции, поэтому вы могли не уделять должное внимание грамматике. Все решается изучением конструкций и выполнением практических упражнений. Причина: у вас было очень мало или вообще не было разговорной практики. Из-за этого развивается так называемый «синдром собаки», то есть вы все понимаете, но не можете сами сказать. Практика устной речи решит эту проблему. Причина: программистам нечасто приходится воспринимать информацию на английском на слух, поэтому у вас могут быть проблемы с пониманием речи собеседника. Работа с аудиоматериалами избавит вас от этого. Мы выяснили ваши слабые и сильные стороны, а теперь надо решить, каким же образом учить английский для программистов. Исходя из нашего опыта, начинать изучать специализированный английский для IT следует после того, как вы закончили курс Pre-Intermediate. До этого лучше изучать общий разговорный английский, чтобы заложить прочный базис для профессиональных знаний. Где лучше изучать язык? Найти специальные курсы для изучения английского для разработчиков практически невозможно, поэтому лучшим решением будут индивидуальные занятия с преподавателем. А еще удобнее будет изучать английский без отрыва от любимого компьютера, и мы предлагаем вам делать это на уроках английского по Скайпу. Если вы хотите изучать именно английский для IT, рекомендуем вам персональный курс английского языка, в таком случае на уроках вы будете изучать материалы вашей тематики, то есть учить только то, что вам нужно. Базовый английский словарь для программистаВ этом разделе мы хотели бы представить вам базовые понятия на английском языке, которые пригодятся почти каждому «айтишнику». Для удобства мы выделили набор глаголов IT-тематики, а также слова, связанные с Интернетом, аппаратным и программным обеспечением. Полезные глаголы
Hardware — аппаратное обеспечение
Software — программное обеспечение
Internet — Интернет
Немаленькая подборка, не правда ли? Но для того, чтобы научиться хорошо говорить по-английски, недостаточно знать слова, необходимо учить грамматику, развивать навык восприятия речи на слух и т. д. Поэтому в следующей главе нашей статьи мы приведем 79 ресурсов для совершенствования английского. Выберите несколько из них и штурмуйте вершины знаний. Как учить английский для программистов самостоятельноУчебники по английскому языку для программистовДля начала мы представим хорошо зарекомендовавшие себя учебники по английскому языку для программистов. Наши преподаватели успешно используют материалы, разработанные на основе этих пособий, для обучения «айтишников». Для начального уровня:
Для среднего уровня:
Словари технического английского языка для программистовАнгло-русский и русско-английский словарь также пригодится вам для перевода. Чтобы получить правильный перевод термина, смотрите перевод слова рядом с примечанием «комп.» (компьютерные термины). Простой и удобный англоязычный словарь, в котором можно прослушать звучание каждого слова. Там же составлены предложения со всеми словами, их тоже можно прослушать. Словарь компьютерных терминов на английском языке. Введите незнакомое слово в строку поиска и узнайте его значение. Англоязычный словарь технических терминов. Все слова сортируются по категориям, а также можно искать значение слова через систему поиска на сайте. Здесь есть подробное разъяснения для каждого понятия. Кроме того, можно проходить тесты из раздела Quizzes, чтобы проверять свои знания. В разделе Dictionary этого сайта вы найдете англоязычный словарь технических терминов, в котором дано подробное пояснение каждого понятия. Кроме того, вам предложат почитать полезную статью, связанную с тем термином, определение которого вы искали. IT-словарь на английском языке. К каждому понятию дано краткое понятное пояснение. Ресурсы для изучения новых слов
Ресурсы для изучения грамматикиРазработчики могут учить грамматические конструкции по обычным материалам общей тематики, ведь правила не зависят от вашей профессии. Пока никакой специальной грамматики английского языка для программистов не существует, рекомендуем использовать следующие ресурсы:
Как научиться говорить по-английски ИТ-специалистуВ развитии этого навыка все логично: чтобы заговорить, надо говорить. Некоторые люди полагают, что развивать устную речь можно с помощью пособий и онлайн-упражнений, однако это не так. Представьте, что вы полностью прочли самоучитель по Python, но не пробовали программировать на нем. Получится ли у вас сразу написать качественную программу? Скорее всего, она будет работать с ошибками, и только после продолжительной практики вы научитесь писать что-то толковое на этом языке. С английским ситуация аналогичная: никакой учебник или самоучитель не заменят вам разговорной практики с собеседником. Поэтому ищите себе партнера для разговоров на английском. Причем можно развивать устную речь не выходя из дома. Воспользуйтесь сайтом italki.com или polyglotclub.com и общайтесь с носителем языка онлайн. Еще больше ресурсов для поиска собеседника вы найдете в статье «Где можно поговорить на английском языке». Подкасты для разработчиковПодкасты незаменимы для развития навыка восприятия английской речи на слух, а также из них вы узнаете много полезной профессиональной информации. Мы рекомендуем два вида материалов:
Сериалы и фильмы для программистовСериалы и фильмы, близкие к вашей тематике, будут развивать восприятие английского языка на слух. Любой из эпизодов можно смотреть с субтитрами, установив расширение для браузера hamatata, а также воспользовавшись сайтами ororo.tv или show-english.com. Программистам можно порекомендовать смотреть следующее:
Если вы будете смотреть эти фильмы с субтитрами, то можно выписывать незнакомые слова и учить их, так вы пополните свой словарный запас. Хотите, чтобы просмотр видео приносил максимум пользы вашему английскому? Читайте нашу статью «Как учить английский язык по фильмам и сериалам». Форумы на английском языке для «айтишников»На форумах можно потренироваться читать и писать по-английски. К тому же сообщества — ценный источник знаний, где можно получить бесплатную консультацию у более опытных коллег. Рекомендуем обратить внимание на следующие форумы:
Кстати, если вам срочно нужно сформулировать предложение или текст на английском языке, но вы не можете этого сделать, предлагаем воспользоваться программой imtranslator.net . Введите в окно предложение или текст по-русски, и программа переведет вам его на выбранный язык, например, английский. Причем переведенный текст можно будет прослушать с помощью встроенного модуля TTS (text to speech). Однако старайтесь нечасто пользоваться этим сайтом: машинный перевод не всегда бывает правильным. Видеоролики общей тематикиЧтобы научиться хорошо разговаривать на английском и понимать его, вам нужно знать и понимать не только профессиональную лексику, но и общеразговорные фразы. Именно поэтому в процессе изучения английского для IT мы рекомендуем смотреть видео непрофессиональной тематики на следующих сайтах: Знаменитый проект TED — источник вдохновения и уникальных идей. Выбирайте интересные вам темы лекций, при необходимости пользуйтесь субтитрами и учите английский! Видеоролики от Englishcentral — хороший обучающий материал для тех, кому сложно воспринимать английскую речь на слух, ведь все видео снабжены субтитрами. Кроме того, работа с этим сайтом не отнимет много времени: большинство роликов занимает не более 2-3 минут. На сайте представлены видеоролики и подкасты с транскриптами (текстами записей). Большой охват тем позволит без труда выбрать интересный для вас материал. Обучающие видеоканалы на YouTube для программистовВидео, обучающие новичков основам программирования в различных средах. Обучающие видео для тех, кто работает на Python. Канал для обучения программированию на Java и C++ для начинающих и совершенствующихся. Видеопрезентации для программистов C++. Различные профессиональные видео для программистов. Обучающие видео для работы в разных средах программирования. Разнообразные обучающие видео для профессионалов. Канал для тех, кто делает первые шаги в программировании. Видео для разработчиков на UNIX. Обучающие курсы на английском языке для программистовВсевозможные обучающие программы и вебинары — источник профессиональных знаний и отличный ресурс для совершенствования английского языка. Попробуйте поучиться бесплатно у зарубежных экспертов. Один из самых популярных за рубежом сайтов с обучающими курсами для программистов. Вся информация представлена только на английском языке, обучение бесплатное. Образовательный портал с курсами на английском, предназначенными для работников IT-сферы. Программы обучения можно посмотреть тут . Coursera — подборка курсов от более чем 120 университетов и образовательных организаций. Большинство материалов представлено на английском языке, но есть и на русском. Многие обучающие программы можно пройти бесплатно. Посмотрите, какой выбор курсов предлагает Coursera в разделе « Компьютерные науки ». Аналогичный Coursera сайт, предлагающий большой выбор курсов на разных языках, однако на русском пока не представлено ни одного курса. Каталог уроков для IT-области можно увидеть тут . В основном обучение бесплатное. Необходимо будет внести оплату, если вы захотите получить сертификат о прохождении конкретного курса. Большой каталог платных и бесплатных курсов на разных языках, в том числе есть материалы и на русском. Программы обучения для IT можно увидеть на этой странице . На этом сайте также можно подписаться и пройти бесплатный или платный курс обучения на английском языке. Программы, связанные с IT, можно найти тут . Сайты с новостями для программистов на английском языкеРесурс, на котором пользователи оставляют ссылки на интересные новости по темам, связанным с IT. Тут вы найдете новую информацию со всего Интернета. Агрегатор новостей, аналогичный предыдущему ресурсу: все самое свежее об IT на англоязычных сайтах. Профессиональный онлайн-журнал для разработчиков программного обеспечения и веб-дизайнеров. Авторы излагают информацию о новых техниках, лайфхаках и полезных ресурсах в области IT. Ресурс со статьями и новостями из области информационных технологий. Материалы изложены довольно простым языком, без обилия специальных терминов. Один из самых посещаемых сайтов, который публикует статьи о новых технологиях, новостях мира бизнеса и культуры. Русскоязычные ресурсы, где вам могут дать советы по изучению английского для ITВы можете использовать и русскоязычные ресурсы, чтобы изучать английский язык. Например, можно задавать вопросы по изучению языка своим коллегам на профессиональном форуме, они точно порекомендуют вам что-то практичное и полезное. Также посещайте сайты, посвященные обучению английскому, там могут ответить на любой вопрос, касающийся изучения языка. Популярное сообщество русскоговорящих программистов и системных администраторов. Воспользуйтесь поиском, чтобы найти темы, связанные с изучением английского языка. Например, пользователи составили словарь-базу английских слов , которая будет полезна «айтишникам». Еще один популярный форум, на котором вы можете задавать свои вопросы по изучению языка. Коллеги точно дадут вам профессиональный ответ. Наши ресурсы хоть и не ориентируются исключительно на IT-область, но будут полезны любому изучающему английский язык, будь то ИТ-специалист или менеджер. У вас есть вопросы по изучению языка? Задавайте их нам в комментариях, чтобы получить ответ от наших преподавателей — «разработчиков» сферы изучения английского. Мы постарались составить для вас наиболее полное руководство о том, как учить английский язык программисту, исходя из опыта наших преподавателей и учеников. Выберите удобные для работы сайты и старайтесь посвящать им хотя бы 30 минут в день, чтобы ваш уровень английского постепенно повышался. Если у вас есть вопросы по этой теме, пишите их в комментариях, мы обязательно ответим на них. А если вы чувствуете, что вам нужна помощь в учебе, обращайтесь к нашим преподавателям английского языка, которые научат вас всем премудростям английского для IT. Мы составили для вас документ, в котором собраны все слова по данной теме. Вы можете скачать его по ссылке ниже. |