Как сделать красивый интерфейс
Обновлено: 05.07.2024
На то, чтобы создать красивый, удобный и полезный пользовательский интерфейс, уходит много времени, и на этом пути в дизайн вносится множество изменений. Происходит постоянная подгонка ради того, чтобы создать нечто, что действительно понравится клиентам, пользователям и вам самим. Я знаю. Я сам проходил через это.
Но вот что я обнаружил за эти годы: сделав всего несколько простых настроек, вы можете быстро улучшить дизайн, над которым работаете.
В этой статье я составил небольшую подборку легких для практического применения советов, которые не только помогут улучшить ваши проекты прямо сейчас, но и, надеюсь, принесут вам немного пользы, когда вы начнете свой следующий проект.
Давайте нырнем за чуточкой хорошего UI&UX…
1. Осветлите текст, если он выглядит немного тяжеловесно
Когда речь заходит о длинных фрагментах текста, некоторые шрифты обычной жирности могут всё же выглядеть слишком массивно и контрастно.
2. Меньше размер шрифта — больше высота строки
По мере уменьшения размера шрифта увеличивайте высоту строки для лучшей удобочитаемости.
То же самое относится и к увеличению размера шрифта. Просто уменьшите высоту строки.
3. Выберите основной цвет, а затем используйте оттенки и полутона, чтобы добавить единообразия
Не всегда нужно делать дизайн многоцветным.
Если проект позволяет, используйте ограниченную палитру красок. Выбрав основной цвет, а затем меняя оттенки, можно самым простым способом добавить единообразия дизайну.
4. Выделяйте существенные элементы
Комбинируя размер шрифта, жирность и цвет , вы можете легко выделить наиболее важные элементы пользовательского интерфейса.
Пара простых настроек — и пользователю станет гораздо удобнее взаимодействовать с сайтом.
5. Придерживайтесь последовательного подхода: все иконки — в одном стиле
Включая в пользовательский интерфейс иконки, будьте последовательны . Убедитесь, что все они в одном визуальном стиле , одинаковой жирности , и либо очерчены , либо заполнены .
Не нужно смешивать и сочетать.
6. Всегда делайте “призыв к действию” самым заметным элементом на экране
Вы думаете, что это банальный здравый смысл? Увы. Боюсь, не для всех.
Убедитесь, что “призыв к действию” как можно более заметен — для этого можно использовать контрастные цвета , изменение размера и подписи . По возможности не полагайтесь на одни только иконки. Если вы можете вдобавок использовать текстовые подписи, используйте их, чтобы пользователю было понятнее.
7. Добавьте наглядности для ошибок в форме
Всё сгодится в дело, верно?
8. Выделите то действие в меню, которое используется чаще всего
При разработке меню для использования внутри приложения убедитесь, что действие, к которому прибегают чаще всего (например, загрузить изображение, добавить файл и т.д.), занимает самое важное место на экране.
Загрузки всякие
Связь
Содержание
1: Свет падает сверху
Тени лучше всего помогают мозгу понять, на какой элемент интерфейса мы смотрим.
Пожалуй, это самое важное неочевидное правило, которое нужно усвоить в дизайне интерфейсов: свет падает сверху. В жизни свет чаще всего падает с неба или сверху. Если это не так, то это выглядит странно.
Когда свет падает сверху, он освещает верхнюю часть и отбрасывает тень на нижнюю. Верх будет светлее, а низ темнее.
Обычно мы не особо замечаем тень на нижних веках, но если их осветить, то перед вами предстанет девочка, похожая на демона.
Наши экраны плоские, но мы прилагаем все усилия, чтобы любой элемент на нём выглядел трёхмерными.
Элементы, которые обычно имеют вогнутую форму:
Элементы, которые обычно имеют выпуклую форму:
Теперь когда вы знаете, вы будете везде это замечать.
А как же дизайн в стиле flat?
Я, как и все, люблю чистый и простой дизайн, но я не думаю, что этот тренд на долго. Легкие трёхмерные эффекты в интерфейсах выглядят слишком естественно, чтобы от них полностью отказаться.
Скорее всего, в ближайшем будущем мы увидим полу-плоские интерфейсы (именно в них я рекомендую вам развиваться профессионально). Такие же чистые и простые, но с небольшими тенями, подсказывающими, что можно нажать или кликнуть.
В то время как я пишу эту статью, Google выпустила Material design. Это единый визуальный язык для всех продуктов компании, который, по своей сути, пытается имитировать физический мир.
Эта иллюстрация из руководства Material design показывает, как передать разную глубину с помощью разных теней. Именно в этом направлении будет развиваться дизайн. Используя тонкие подсказки, чтобы передать информацию. Ключевое слово здесь — тонкие.
2: Сначала чёрное и белое
Создавая дизайн в чёрно-белой палитре, до добавления цвета, вы сможете максимально упростить самые сложные визуальные элементы и сфокусироваться на макете и расположении.
Такой вид ограничений прекрасен. Это очищает сознание. Вы начинаете с более сложной проблемы (удобное приложение на маленьком экране), а затем адаптируете решение к проблеме полегче (удобное приложение на большом экране).
Шаг 2: Как добавить цвет
Самое простое — это добавить только один цвет. Один цвет на чёрно-белом сайте просто и эффективно притягивает взгляд.
Можно пойти ещё дальше и добавить два цвета или несколько оттенков одного тона.
Коды цветов на практике — что такое тон (hue)?
В большинстве случаев на вебе используются HEX-коды цветов модели RGB. Для нас они являются абсолютно бесполезными. RGB плохо подходит для подбора цветов. Лучше использовать HSB (почти тоже самое что HSV или HSL).
HSB лучше, чем RGB, потому что эта модель ближе к тому, как мы воспринимаем цвет, и мы можем предсказывать, как изменение значений HSB повлияет на цвет.
Если вы впервые об этом слышите, то вот хороший путеводитель по HSB цветам.
Изменяя насыщенность и яркость одного и того же тона, можно создать палитру из множества цветов — тёмных, светлых, для фона, выделения и привлечения внимания. При этом они не будут рябить в глазах.
Использовать несколько оттенков одного или двух основных цветов — это самый лучший способ подчеркнуть или утопить отдельные элементы в дизайне, не испортив его.
Ещё несколько заметок о цвете
Цвет — это самая сложная часть графического дизайна. Есть несколько очень полезных инструментов:
Никогда не используйте чёрный. Эта статья о том, что чистый чёрный цвет практически не встречается в реальной жизни. Увеличивая насыщенность серых оттенков, особенно тёмных, вы добавите живости вашему дизайну. К тому же, насыщенные серые тона ближе всего к реальной жизни, что само по себе хорошо.
Adobe Color CC. Отличный инструмент для того, чтобы подобрать подходящий цвет, изменить его или составить палитру.
Поиск в Dribbble по цвету. Ещё один классный способ найти, что работает с определённым цветом. Например, если вы уже нашли один цвет, посмотрите, какие цвета сочетают с ним лучшие дизайнеры в мире.
3: Увеличьте белое пространство
Чтобы интерфейс выглядел красиво, позвольте ему дышать.
Если вы хотите, чтобы интерфейс выглядел красиво, вам нужно добавить много белого пространства.
Иногда даже слишком много.
Если вы, как и я, привыкли форматировать в CSS, где по умолчанию нет белого пространства, то пришло время отучиться от этой ужасной привычки. Начните думать, что белое пространство — первично. В самом начале есть только оно, и вы уменьшаете его, добавляя элементы на сайт.
Звучит как дзэн? Я думаю, именно поэтому люди продолжают делать наброски.
Начать с чистого листа значит начать именно с белого пространства. Думайте об отступах и полях с самого начала. Всё, что вы рисуете, — это ваше сознательное решение по уменьшению белого пространства.
Если вы начнёте с кучи неотформатированного HTML, то о белом пространстве вы будете думать в последнюю очередь.
Добавьте белое пространство между линиями.
Добавьте белое пространство между элементами.
Добавьте белое пространство между группами элементов.
Анализируйте, что работает, а что нет.
4: Научитесь накладывать текст на изображения
Если вы хотите быть хорошим дизайнером интерфейсов, вам нужно научиться накладывать текст на изображения так, чтобы это выглядело красиво. Это то, что умеет делать каждый хороший дизайнер интерфейсов, и не умеет плохой.
Метод № 0: Наложение текста напрямую на фотографию
В этом способе есть множество проблем и рисков:
Понятно? Отлично! Теперь никогда не меняйте текст или фотографию, и всё будет хорошо.
Я не помню, чтобы я хоть раз использовал этот способ в своей профессиональной деятельности. Но с его помощью можно добиться действительно классного результата, только будьте аккуратны.
Метод № 1: Затемните всю картинку
Наверное, самый простой способ наложить текст на фотографию — это затемнить её. Если оригинальная фотография недостаточно тёмная, вы можете наложить на неё полупрозрачный слой чёрного цвета (например, 35%).
Чёрный фильтр самый простой и универсальный, но вы также можете использовать и цветные фильтры.
Метод № 2: Текст-на-фоне
Это ещё один простой и надёжный способ. Начертите слегка прозрачный чёрный прямоугольник и расположите на нём белый текст. Если прямоугольник будет достаточно тёмным, то снизу у вас может быть практически любая фотография и текст всё равно будет хорошо читаться. Здесь также можно использовать цвет, но в пределах разумного.
Метод № 3: Размойте изображение
Как ни странно, хороший способ сделать текст читабельным — это размыть часть картинки.
Вместо размытия также можно использовать часть фотографии, которая находится не в фокусе. Но будьте осторожны — этот вариант не такой динамичный. Если картинка вдруг изменится, убедитесь, что фон остался размытым.
Метод № 4: Затемните низ
В этом варианте изображение слегка затемняется к низу и сверху располагается белый текст.
Случайному наблюдателю может показаться, что в коллекциях Medium белый текст нанесён напрямую на изображение. Но это не так! Здесь есть едва заметный градиент чёрного цвета с середины изображения к низу (с прозрачностью от 0 до примерно 20 %).
Его не так просто заметить, но он определённо там есть, и это совершенно точно улучшает читаемость текста.
Вы спросите, почему изображение нужно затемнять книзу? Ответ на этот вопрос читайте в Правиле № 1 — свет всегда падает сверху. Чтобы выглядеть наиболее естественно для наших глаз, изображение должно быть немного темнее книзу, так же как и любой другой предмет, который мы видим.
Ещё один продвинутый способ: затемнение и размытие…
Бонус — Метод маскировки
Почему в блоге Elastica получаются читабельные заголовки на каждой картинке? Картинки при этом:
Ответ — маскировка (scrim).
Если уменьшить масштаб браузера на странице блога Elastica, то можно увидеть, что там происходит.
Вокруг заголовка есть полупрозрачный фон с небольшим затемнением. Его легче заметить на сплошном синем фоне, чем на контрастных фотографиях.
Это, пожалуй, самый деликатный способ наложения текста, и я больше нигде его не встречал (к тому же, он достаточно хитрый). Но отметьте его для себя, вдруг он вам когда-нибудь пригодится.
5: Научитесь выделять и утапливать текст
Секрет того, чтобы текст выглядел одновременно красиво и уместно, заключается в применении контраста. Например, вы можете сделать его больше, но при этом тоньше.
Я думаю, что дизайн текста — это одна из самых сложных частей в создании красивого интерфейса. Но отнюдь не из-за недостатка возможных вариантов. Если вы уже закончили начальную школу, то наверняка знакомы со всеми способами для выделения текста. Это:
Поля (технически они не относятся к самому тексту, но могут применяться для привлечения внимания, поэтому тоже включены в этот список).
Есть и другие способы, но я бы не стал их особенно рекомендовать:
Цветной фон. Этот способ встречается не так часто, но 37signals какое-то время использовали его также для обозначения ссылок.
Выделение и утапливание
Все способы выделения текста можно разделить на две группы:
Способы, которые увеличивают видимость текста. Это увеличение размера, насыщенности, использование прописных букв и т. д.
Заголовок - Он большой, очень контрастный и выделен болдом.
Текст в футере, наоборот, утоплен. Он маленький, неконтрастный и более тонкого начертания.
А сейчас самое важное.
Название страниц — это единственный элемент на сайте, который нужно только выделять. Остальные элементы нужно выделять и утапливать одновременно.
Если вам нужно выделить какой-то элемент, используйте одновременно способы для выделения и утапливания текста. Это поможет не перегружать интерфейс, но в то же время придаст разным элементам тот визуальный вес, который им необходим.
Баланс визуальных стилей.
Сайт Blu Homes — пример безукоризненного дизайна. Там есть большой заголовок, но слово, на котором делается акцент, написано строчными буквами — слишком много выделений выглядело бы избыточно.
Цифры привлекают к себе внимание с помощью размера, цвета и расположения — но заметьте, что они одновременно утоплены с помощью более тонкого шрифта и менее контрастного цвета, чем тёмно-серый.
Подписи под цифрами, несмотря на то что они серые и маленькие, набраны прописными буквами и более жирным шрифтом.
Всё дело в балансе.
Активные и выбранные элементы
Выделение активных элементов — это более сложный раунд всё той же игры.
Обычно, если менять размер шрифта, его начертание или строчные буквы на прописные, то изменится площадь, которую занимает текст. А это может привести к непредвиденным результатам.
Что же тогда делать?
Вот один проверенный способ: попробуйте сделать белые элементы цветными или цветные элементы белыми, но затемнив при этом фон.
Вывод такой: научиться выделять текст очень сложно. Каждый раз, когда у меня что-то не получалось, я понимал, что мне нужно стать лучше. А чтобы стать лучше, нужно пробовать.
6: Используйте только хорошие шрифты
Внимание: в этом разделе вы не найдёте никаких секретов. Я просто перечислю несколько хороших бесплатных шрифтов, которые можно использовать.
Сайты с очень отличительным характером могут использовать отличительные шрифты. Но для большинство интерфейсов нужно что-то чистое и простое.
Я рекомендую только бесплатные шрифты. Почему? Потому что эта статья для тех, кто учится. А среди бесплатных шрифтов есть много достойных вариантов. Почему бы их не использовать?
Ubuntu имеет множество начертаний. Для некоторых приложений он слишком специфичен, для других — подходит идеально.
Open Sans — популярный шрифт, легко читается. Хорошо подходит для основного текста.
Bebas Neue отлично подходит для заголовков. Состоит только из прописных букв. Можно скачать на сайте Fontfabric и там же посмотреть примеры использования.
Montserrat доступен только в двух начертаниях, но этого достаточно. Этот шрифт — лучшая бесплатная альтернатива Gotham и Proxima Nova, но он далеко не так хорош, как они. Можно скачать на Google Fonts.
Cabin можно скачать на Google Fonts.
Lato можно скачать на Google Fonts.
PT Sans можно скачать на Google Fonts.
Вот ещё несколько ресурсов:
Красивые сочетания шрифтов из Google Fonts. Это шикарная галерея того, как красиво могут выглядеть шрифты Google. Я постоянно захожу на этот сайт в поисках вдохновения.
7: Крадите как художник
Когда я впервые пытался делать дизайн интерфейса — будь то кнопка, таблица, график или что-то ещё — я понимал, насколько ничтожны мои знания, чтобы сделать элементы красивыми.
Но к счастью, мне ни разу не пришлось изобретать элементы интерфейса, которых ещё не было. Это значит, я всегда могу посмотреть, что делают другие, и выбрать самое лучшее.
Но где же искать эти примеры? Вот несколько сайтов, которые оказались для меня самыми полезными. В порядке убывания.
1. Dribbble
Это сайт-портфолио для дизайнеров, куда можно попасть только по приглашению. Здесь вы найдёте работы самого высокого качества. И практически любые примеры.
Вот моё портфолио на Dribbble. И ещё пара человек, на которых стоит подписаться.
Victor Erixon. У него очень особенный стиль — и это круто! Красивый, чистый дизайн в стиле flat. Он занимается дизайном всего три года и уже является одним из лучших.
Cosmin Capitanu. Ещё один классный дизайнер. Его работы выглядят супер футуристично, но при этом не безвкусно. Он очень хорошо работает с цветом. Но не слишком сосредотачивается на UX — хотя это проблема dribbble в целом.
2. Flat UI Pinboard
3. Pttrns
Это галерея скриншотов мобильных приложений.
Я глубоко убеждён, что каждый художник должен копировать до тех пор, пока он не сможет имитировать самые лучшие работы. И только потом можно искать свой стиль и создавать новые тренды.
А пока крадите как художник.
Название этого раздела, кстати, взято из одноименной книги, которую я не читал, так как подозреваю, что в заголовке уже раскрыта её основная мысль.
Заключение
Я написал эту статью, потому что сам хотел бы её прочесть пару лет назад. Надеюсь, она вам поможет. Если вы UX-дизайнер, то сделайте красивый макет после того, как набросаете прототип. Если вы разработчик, то перейдите на следующий уровень и сделайте так, чтобы ваш проект выглядел красиво. Для этого не нужно заканчивать институт искусств. Достаточно наблюдать, имитировать и рассказывать друзьям, что работает, а что нет.
Улучшить интерфейс приложения, сделать прототип сайта, сэкономить время и ресурсы поможет обновленная подборка бесплатных приложений для веб-дизайнеров и разработчиков.
Собрали качественные, бесплатные и простые в использовании инструменты, чтобы веб-мастеры могли сэкономить время и силы в создании и улучшении пользовательских интерфейсов, комплексных приложений и сайтов.
В статье:
Создать прототип сайта
Бесплатные сервисы для создания прототипа сайта перед отрисовкой дизайна и программированием
Создание прототипов в Figma
Известный бесплатный инструмент для отрисовки наглядных интерактивных прототипов страниц сайта.
Позволяет создавать прототип с адаптивной сеткой для просмотра на мобильных, настраивать внутреннюю перелинковку между шаблонами страниц, сделать разворачивающиеся списки, попапы, настроить анимацию на блоки и внедрить другие фишки, с которыми прототип выглядит как настоящий сайт.
Настройка всплывающего окна заявки
Клиент может прямо на прототипе оставлять комментарии к элементам.
Создание прототипов в Lucidchart
Lucidchart — инструмент для создания диаграмм, блок-схем, алгоритмов, диаграмм кадров организации, планировок этажей, диаграмм Венна, SWOT-анализов и макетов сайтов, так что он подходит и для прототипирования сайтов и приложений. Полный список инструментов.
Фрагмент демонстрационного прототипа
Система облачная, так что платная версия позволяет нескольким людям работать над одним проектом одновременно. В бесплатной можно работать одному и проекты ограничены 60 элементами.
У инструмента есть расширение для Google Chrome, так что с его помощью можно быстро добавить диаграммы из Lucidchart в документы и таблицы Google.
Рисование прототипа веб-страницы в Pencil
Бесплатная программа с открытым исходным кодом для рисования прототипов страниц сайта.
В программе есть шаблоны страниц для десктопа, Android и iOS, шаблоны для разных интерфейсных элементов, возможность искать клипарты из интернета, функции рисования диаграмм. Между отрисованными в программе страницами можно сразу настраивать внутренние ссылки, чтобы нагляднее представлять навигацию по сайту.
Отрисовка страницы сайта в программе
Выравнивание текста по сетке с помощью Sassline
Перед разработкой дизайна проекта составляют его прототип — схематичный рисунок страницы с указанием пропорций и расположения всех элементов навигации и контента. Можно отрисовывать страницы вручную в редакторах, но быстрее и проще будет использовать специальные инструменты.
Сервис Sassline помогает составить прототип страниц будущего сайта, гармонично разместить элементы, легко выровнять их расположение по базовой сетке.
Фрагмент примера страницы с линейками
PSD-шаблон для посадочной страницы
К примеру, мы нашли бесплатный psd-шаблон для одностраничного сайта, которым поделился дизайнер Arifur Rahman Tushar.
Внешний вид страницы
Вы можете взять его за основу и отредактировать под свой проект — поменять местами блоки, добавить свой текст и иллюстрации.
Мы проверили файл в Adobe Photoshop 2017: открывается, слои на месте, но скорее всего понадобится докачать шрифты.
Улучшить интерфейс сайта или приложения
Сервисы для работы с внешним видом интерфейса проекта: анимация элементов, настройка блоков навигации.
Коллекция решений для интерфейса CodyHouse Framework
Библиотека компонентов HTML, CSS, JavaScript для оформления интерфейса сайта. Все предложенные решения легкие, не требуют переопределения существующих правил CSS и адаптированы под мобильные.
В коллекции есть варианты для интересной настройки фона, оформления кнопок, меню, иллюстраций, веток комментариев, навигации, статей и других элементов, плагины для карусели и слайдшоу.
Интерфейс каталога
Элементы можно отредактировать, к примеру, заменить цветовое оформление и изображения. На страницах сайта есть подробное объяснение для установки и редактирования элементов. Как установить фреймворк
Есть много бесплатных вариантов, платные доступны в Pro-версии, она стоит 89 долларов в год
Улучшенный MV-фреймворк JSBlocks beta
В работе над простым или сложным приложением с анимациями разработчики используют фреймворки. Эти платформы позволяют упростить работу и автоматизировать часть действий, чтобы сэкономить силы и допускать меньше ошибок.
Обычно фреймворки обрабатывают только клиентскую часть, но есть платформа JSBlocks beta — комплексный улучшенный фреймворк, который работает еще и с базами данных и службами.
JSBlocks beta данных подходит для создания проектов любой сложности — простых пользовательских интерфейсов и комплексных приложений, за это отвечает модуль jsblocks MVC (Model-View-Collection). Примеры проектов на GitHub: TodoMVC и E-shopping.
Код запросов пишется на HTML, так что не надо изучать новый синтаксис. JSBlocks beta легко освоить, для использования достаточно скопировать и вставить код элемента, продолжить работу с документацией и стартовым шаблоном. Есть API.
Как работать в JSBlocks beta: обучение.
Product Tour — отзывчивый тур по сайту или приложению для пользователей
Перед покупкой программы или сервиса пользователь ищет информацию: что его ждет после приобретения, какие функции доступны, как выглядит интерфейс, как этим пользоваться. На основе найденного он будет решать, стоит ли вообще делать покупку.
Лучший способ познакомить пользователя с продуктом — наглядно показать, как он работает. При этом может быть недостаточно просто записать гифку с тем, как вы кликаете по разделам приложения — часто нужны подписи, пояснения и возможность поставить демонстрацию на паузу.
Для этой цели существует Product Tour — инструмент для создания пошагового руководства по использованию сайта или приложения. Он реализован с помощью CSS и JQuery, подстраивается под размер устройства пользователя.
Пример механики демонстраций
Отрисовать дизайн сайта или приложения
Интересные решения для оформления: дизайнерские иконки, подбор цветов и стилей.
След от курсора
Креативный разработчик и 3D-дженералист Натан Гордон поделился своей разработкой — фреймворком OGL. Это библиотека кодов WebGL, которая избавляет от необходимости писать сложные коды вручную. Библиотека легкая, например, классы OGL, которые нужны для этого эксперимента, в сжатом виде весят 13kb.
С помощью этой библиотеки можно настроить анимационный след от курсора мыши, которой пользователь водит по вашему сайту. Это не сделает сайт удобнее, но у сайта появится интересная фишка. Пользователи наверняка залипнут на странице, играя с курсором, так что увеличится время сеанса и улучшатся поведенческие факторы.
Не перестарайтесь с анимациями и украшениями на странице — если скорость загрузки сайта значительно увеличится, пользователи не будут долго ждать и уйдут.
Деформация надписи или фона
По такому же принципу, как работает интерактивный след от курсора, можно настроить деформирование фона или надписи курсором мыши. Цель такая же — заинтересовать пользователя, чтобы он какое-то время играл с надписью или фоном, задержать его на сайте и запомниться интересной фишкой.
В этом примере настроили неподвижный фон и деформирование надписи от движений курсора:
Демонстрационный пример
Полезная подборка CSS хаков
В подборку попали интересные фишки для дизайна интерфейсов, которые можно настроить с помощью стилей CSS. К примеру, в списке есть коды для настройки скругленных кнопок, меню, прокрутки, выравнивания, сбора e-mail, анимации для кнопок и других возможностей сделать дизайн интереснее и нагляднее.
Варианты на сайте оформлены в удобных окошках: можно сразу посмотреть результат и скопировать варианты в HTML, SCSS, JS.
Демонстрация интерактивных кнопок
Определение цветов по картинке
Демонстрация работы
Инструмент использует Vibrant.js от Jari Zwarts для извлечения цветов из изображений.
Бесплатный набор иконок для фитнес-проекта
Дизайнер Jacek Janiczak выложил набор иконок, который он разработал под фитнес-проект, с разрешением использовать их в коммерческих целях. Иконки хоть и сделаны для фитнес-тематики, но выглядят вполне универсально.
Демонстрация иконок из набора
Бесплатный набор иконок в разных цветах
В наборе 48 иконок в разных цветовых вариациях, в сумме получается 144 значка. Иконки можно редактировать и использовать для личных и коммерческих проектов.
Демонстрация набора
Бесплатный сет иконок Smart House на Dribbble
Примеры доступных иконок
Стикеры из набора
Расскажите, какую подборку инструментов, идей или шаблонов вам было бы интересно увидеть в блоге?
-Вот и я не вижу. А он есть.
Так и с прорисовкой интерфейса в 1С, она тоже есть, но на нее никто не обращает внимание.
Что такое дизайн интерфейса?
Итак, дизайн интерфейса – это процесс создания внешнего вида сайтов, приложений, компьютерных программ так, чтобы они были удобны и интуитивно понятны.
В рамках данной статьи – это процесс рисования или прототипирования форм будущих объектов в 1С (примечание: прототипирование, прорисовка интерфейса, разработка интерфейса, создание макета – это синонимы).
Во всем ИТ мире дизайн интерфейсов имеет две специализации: UI и UX-дизайн.
User Experience (UX) – пользовательский опыт. Цель UX-дизайнера — сделать так, чтобы пользователь быстро и легко получил от программы то, зачем он её использует;
User Interface (UI) – пользовательский интерфейс. Цель UI-дизайнера — создать эстетичный дизайн интерфейса продукта.
В среде 1С никакой подобной закрепленной специализации разработки интерфейса нет, технологии UX/UI используются аналитиками крайне редко. Это является проблемой, так как возможности для прототипирования интерфейса есть, и они могут сделать работу аналитика и пользователя удобнее и быстрее. Вопрос: как? Ответ очевиден: понятный интерфейс делает процесс согласования новых форм объекта быстрее. Пользователь принимает непосредственное участие в проектировании, снижает уровень недопонимания, уменьшается вероятность переделок и не нужно тратить много времени на обучение.
Типичные требования к качественному UX/UI-дизайну:
Ясность – понятный интерфейс без двусмысленностей;
Лаконичность – интерфейс не перегружен составными элементами;
Узнаваемость – элементы дизайна легко распознать, даже если пользователь видит ваш макет впервые;
Отзывчивость – хороший интерфейс реагирует на действия пользователя мгновенно. Он должен понимать, что происходит на экране прямо сейчас;
Постоянство – соблюдение постоянства для всего документа или макета;
Эстетика – интерфейс должен быть визуально привлекательным, чтобы пользователю было приятно работать;
Эффективность – качественный интерфейс экономит время пользователя и доставляет его в нужную точку с минимальными усилиями;
Снисходительность –даже при самом продуманном интерфейсе ни один пользователь не застрахован от ошибки, не стоит забывать об этом.
Этап создания макетов интерфейсов давно используется в других областях разработки. Например, в web, где есть полноценная методология ведения проектов и соответствующий инструментарий.
Методология основывается на предоставлении пользователю возможности взаимодействовать с прототипом еще до начала разработки первой версии. На этом этапе можно выявить до 80% всех неудобных мест будущего решения. На этом этапе пользователь может сам лично пощупать интерфейс, что неминуемо ускоряет сдачу результата заказчику.
Классический ситуация, когда заказчик, консультант и разработчик говорят на разных языках, и в итоге получается результат, которым все недовольны.
Сейчас большинство проектов ведется в удаленном формате и согласовывать требования становится сложнее, поэтому нужно двигаться в направлении развития прототипирования при разработке интерфейсов в 1С и вовлекать заказчика в разработку.
Как сейчас рисуется интерфейс на проектах?
Можно, конечно же, последовать примеру разработчиков и напрямую рисовать прототипы в конфигураторе, но:
это не сделаешь быстро, и сам заказчик уже не сможет протестировать макет;
потребуется установка, лицензии 1С и хорошие ресурсы компьютера.
Нужен специальный инструмент для бизнес-аналитика, консультанта или руководителя проектов. Ведь, как правило, именно этими людьми происходит обсуждение и согласование целей, задач и ожидаемых результатов проекта вместе с заказчиком.
Сама фирма 1С не предоставляет стандартов использования инструментов формализации бизнес-процессов и уж тем более правил рисования макетов и прототипов.
Как это должно и может работать. Обзор инструментов проектирования.
Опыт показывает, что для комфортной и качественной разработки интерфейсов на базе 1С не хватает:
Инструмента, в котором необходимый вариант будущей формы можно сделать быстро и вместе с заказчиком;
Регламентации по созданию интерфейсных форм с учётом особенностей платформы 1С;
Соответствующих учебных материалов.
Ниже представлены сервисы, которые можно использовать для прототипирования интерфейсов на базе 1С.
Сервис создан одинесниками для одинесников.
Не нужно уметь программировать;
Есть возможность комментировать и описывать элементы, их назначения и возможности, это поможет точнее составить ТЗ, сэкономить своё время и время программиста;
Создатели посчитали, что в среднем, на корректировку до желаемого состояния уходит 3-3,5 итерации, 1CMaker помогает это время сократить в 2 раза;
В бесплатном режиме вполне удобно работать. Есть встроенные элементы для составления макета, их немного, но они есть.
Сервис позволяет сделать прототип внутри 1С, на борту довольно большой инструментарий и возможности.
Сервисы, зарекомендовавшие себя в web-разработке
Figma
Доступна версия для Windows;
Работа прямо из браузера - в ней доступны все инструменты и возможности;
Есть командный режим работы, несколько человек могут онлайн работать с одним документом (например, заказчик и консультант), тут же можно общаться внутри проекта. Есть инструменты коммуникации, которые позволяют, не прерывая работы, обсуждать все текущие вопросы в Figma. Наличие отдельного канала связи позволяет не отвлекаться на сторонние коммуникации вроде телефона или скайпа;
Собственное облачное хранилище (в бесплатной версии история хранится 30 дней);
Режим презентации макета;
Нет русского языка;
Легко экспортировать в самые разные форматы.
AdobeXD
Большая экосистема взаимосвязанных продуктов от Adobe;
Возможность работы с рабочего стола или браузера;
Есть русский язык;
Совместная работа в реальном времени;
Простота в использовании, если вы знакомы с другими продуктами Adobe;
Отдельная номинация:
Draw IO – легкий сервис, в котором можно нарисовать какую угодно диаграмму и не только:
Настолько дешево, что аж бесплатно;
Небольшой набор инструментов;
Есть возможность совместной работы;
Есть как браузерная, так и десктопная версия;
Есть русская версия.
Другие популярные сервисы:
И многие другие.
С каждым годом проблема разработки интерфейса в среде 1С становится актуальнее;
Софт, который подходит для проектирования дизайна форм 1С, преимущественно платный, но все же он есть;
Есть возможность адаптировать софт из других областей разработки. Не нужно заново придумывать велосипед;
Фирма 1С пока не хочет заниматься вопросами дизайна форм, текущие справочные материалы бесполезны;
Уже прямо сейчас каждый может выбрать для себя сервис и использовать его;
Использование технологий проектирования - это еще один шаг к развитию ведения проектов, который может повысить эффективность и презентабельность перед клиентом.
Физиологических реакций никто не отменял. Сложные интерфейсы перегружают психику, и мозгу становится тяжело обрабатывать информацию. Как только тебе становится трудно что-то делать, это бессознательно трансформируется в негативную эмоцию. Мышление — очень энергозатратный процесс. Если приходится думать больше, тебе сразу перестаёт нравиться то, что ты делаешь.
Структурируйте информацию
Система должна находиться в равновесии. Если нужно привлечь внимание к определённым местам на странице, то, на первый взгляд, это просто: делаем, например, всё чёрным, активный элемент — оранжевым. Но в подавляющем количестве случаев на одном экране — множество точек входа, и выпячивать одну из них значит терять остальные. В такой ситуации нужно дать пользователю возможность воспринять элементы обособленно: не сваливать их в кучу, а понять, по какому принципу он делает выбор, и помочь ему в этом выборе. В психофизиологии есть известное правило: человек не может удержать в кратковременной памяти более пяти-девяти предметов, поэтому, если меню будет состоять из 15 пунктов, ему будет тяжело сделать выбор.
Преодолевайте инерцию
Но будьте готовы к сопротивлению. Однажды я разговаривал с разработчиками, которые занимались обновлением Microsoft Office в 2007 году. Раньше обычные люди редко добирались до нужных им инструментов и пользовались от силы 5% функционала. Они собрали данные о 3 млрд пользовательских сессий и разработали новый интерфейс, который частично решил эту проблему: каждая панель теперь превратилась в группу сценариев, которые направляли пользователя к цели. Однако даже такое полезное нововведение вызвало множество нареканий и жалоб. И это понятно: люди привыкли. Старые пользователи часто будут против новшеств. И иногда, кстати, их мнение должно перевесить.
Используйте игру для мотивации
Когда проектируешь новый интерфейс, нужно учитывать не только интересы заказчика, у которого в основном одна цель — обеспечить финансовый поток, но и мотивацию пользователей. Когда ты понимаешь, что твой пользователь — не абстрактный бухгалтер, а женщина 60-ти лет, которая хочет пораньше уйти c работы и не учить ничего нового, это сильно влияет на интерфейс. Ты учитываешь, что она не захочет делать, и как её можно заставить — кнутом или пряником — всё-таки сделать то, что необходимо.
Не пытайтесь сделать всё удобным
Распространено мнение, что юзабилисты — это адвокаты пользователей, которые делают всё возможное, чтобы тем было удобно и комфортно. Это не так. Наша цель — сделать интерфейс эффективным. Эти задачи часто идут рука об руку. Но бывают и исключения. Например, если мы знаем, что цикл жизни продукта — полгода, а затраты на новую версию не окупятся в первые месяцы его работы, мы просто исправим мелкие ошибки в старом интерфейсе и не будем ничего кардинально менять.
Отличный пример из прошлого: известно, что танки Т-34 были неудобными. Когда стали решать, стоит ли в них что-то менять, то поняли, что делать это бессмысленно. Среднее время участия танка в бою — 11 минут, и за это время танкисты не успевают устать. В остальное время экипаж редко находится внутри танка: он едет на броне. Задача сделать всё максимально удобным стоит не всегда.
Следите за людьми
Три основных показателя юзабилити: эффективность, продуктивность и удовлетворённость. Эффективность — процент успешно завершённых сценариев. Продуктивность — сколько времени, внимания пользователь потратил на это. Субъективная удовлетворённость определяет, насколько комфортен этот процесс для него. Первые два фактора можно измерить напрямую, а последний пока только косвенно — через анкеты.
Смотрите на всё глазами пользователя
Одно из главных правил хорошего интерфейса: нужно ориентироваться на ментальную модель пользователя, а не на реальную структуру системы. Ментальная модель — это то, как он представляет себе систему. Чаще всего он воспринимает её упрощённо. Например, когда мы говорим по телефону, мы представляем, как радиоволны бегут от одного к другому. В реальности всё сложнее, но для разговора нам знать об этом не нужно. Люди ожидают от системы определённого поведения, и на это стоит ориентироваться.
Не бойтесь стать цифровыми
Мне нравится концепция MetroUI, которая уловила важный тренд: люди перестали бояться быть цифровыми. Раньше многим интерфейсам была свойственна метафоричность. Мы с помощью объектов на экране изображали объекты из реальной жизни — только так можно было дать представление об их функциях. Люди видели кнопку и понимали, что на неё можно нажать, видели корзинку и понимали, что в неё можно выбросить ненужные документы. Сейчас настал момент, когда можно отказаться от искусственной связи с реальным миром и делать чисто цифровые интерфейсы. Дети знакомятся с компьютером раньше, чем с корзиной для бумаг.
Занимайтесь сервисом, а не картинкой
Проектировать нужно не интерфейс, а сервис, где продукт является лишь одной из точек контакта с пользователем. Это может быть и реклама на радио, и офис, и сайт. Все они имеют смысл, если помогают пользователю решить его проблему, удовлетворить потребность. Сам по себе интерфейс никому не нужен, потому что он самостоятельно не решает никакую задачу. Так же, как и продукт. Сайт банка без банка — бред. Я заполняю анкету на сайте, и мне предлагают после этого прийти в отделение — это вроде бы нормально и современно. Но на деле даже этот момент — точка разрыва сервиса с пользователем. Чтобы не оставлять его предоставленным самому себе, можно предложить выбрать ближайшее к нему отделение, назначить удобное время визита или напомнить о документах, которые нужно принести. Не говоря уж о постоянном ведении клиента с использованием смартфона.
Ещё нужно учитывать, что люди используют несколько устройств для работы с одним и тем же контентом. Сначала ищут информацию на телефоне, а потом читают об этом подробнее на компьютере. В скором времени можно будет параллельно с просмотром футбольного матча на ТВ смотреть составы команд и повтор голов на вашем планшете.
Работайте для реальных людей
Пользователей часто представляют людьми, которых нет в природе: счастливыми, здоровыми, подкованными в технологиях. В первых интерфейсах платёжных автоматов вместо кнопок в качестве активных элементов использовали ссылки с текстом. И (внезапно!) оказалось, что у половины населения страны они не вызывают никаких ассоциаций с функциональными элементами, потому что она не пользуется интернетом. Чтобы сделать хороший интерфейс, надо чётко понимать, кто твой пользователь, навыками работы с какими программами он обладает, к каким паттернам поведения он привык. Знаете, что он знаком с клавиатурными сокращениями, — добавляйте эту функцию в свой интерфейс. Нет — водите его за курсор от кнопки к кнопке.
Читайте также: