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

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

План

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

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

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

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

Графика

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

Вот некоторые примеры:

http://www.istockphoto.com/vector/education-infographics-vector-37457426?st=98492d9

http://www.istockphoto.com/vector/vector-image-of-infographic-elements-35677988?st=98492d9

http://www.istockphoto.com/vector/business-infographic-elements-37428886?st=98492d9

http://www.123rf.com/photo_12837356_ Different-indicators-collection.html?term=infographic

http://www.123rf.com/photo_17533676_infographic-elements-pack.html?term=infographic

http://www.123rf.com/photo_10933489_set-of-infographic-charts-icons-and-design-elements.html?term=infographic

http://www.123rf.com/photo_13219642_elements-of-infographics-with-buttons-and-menus.html?term=infographic

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

Планировка в целом

Что касается макета, он должен быть похож на любой макет и должен быть сбалансирован. Если вы используете базовый стиль с 1-2-3 столбцами, вам должно быть легко вписаться в меню, таблицы и графики.

Вот пример для баланса (извините, фотошоп сделал очень быстро):

3 столбца:

4 столбца:

Как видите, я всегда использую одну и ту же логику с 3 и 4 столбцами, как если бы моя страница была сделана из 9 или 12 квадратов, и просто добавляла свои блоки в зависимости от ширины или высоты, которые мне нужны. Вы можете использовать 2-3-4-5-6 столбцов, это зависит от вас, но в целом такой макет из 3-4 столбцов легко сбалансировать и визуализировать, когда вы делаете свой макет. Если у вас много мелких элементов, возможно, лучше использовать больше столбцов. Принцип аналогичен тому, что используется для создания рубрики объявлений в газетах.

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

Пример без меню:

Пример с меню:

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

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

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

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

Если вам нужны идеи для цвета, вы можете найти хорошие цветовые палитры в Интернете или вы можете использовать схему, которая поставляется с примерами инфографики, которые я упоминал ранее. Вы также можете взглянуть на « Kuler », который доступен, например, как цветовая палитра в вашем Illustrator. Некоторые красивые цветовые схемы уже были созданы другими пользователями Adobe и могут вас вдохновить.

Просто мнение: серый очень хорошо сочетается с красным, зеленым, синим и очень классический. Но вы также можете использовать разные оттенки синего, например, цвета вашей компании или цвета клиента вашего начальника. Это действительно окажет на них положительное влияние. Не обязательно использовать стандартные яркие красно-зелено-синие цвета, вместо них можно использовать какие-то «размытые» тона, это может выглядеть более современно.

Красный, зеленый, синий пример:

Различные тона, более коммерческий/медицинский стиль:

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

Доказательство

После того, как вы составили план, выбрали стили графика и цвета, вы можете создать пробную версию, чтобы показать ее своему начальнику. Как вы сказали, пруфы должны быть очень красивыми и максимально отражать конечный результат (и сделать так, чтобы начальство захотело вас обнять). Что вы можете сделать, так это создать элементы графического интерфейса в файле Photoshop или Illustrator и показать их плоскими, например. как JPG. Но в вашем случае вы, возможно, захотите добавить немного динамизма.

Если это то, что вы можете сделать, у меня есть 2 предложения, которые могут быть лучше для этого:

1) Создайте анимированный gif , который покажет, как работает каждый элемент и что он делает при активации. Поскольку вы, вероятно, будете показывать это на ноутбуке или настольном компьютере, размер файлов на самом деле не важен, и вы действительно можете легко сделать красивую анимацию с помощью временной шкалы в Photoshop. Если у вас много «стадий» в вашем графическом интерфейсе, может быть немного сложно четко показать, что каждая из них делает.

2) Создайте очень простое доказательство в базовом HTML с помощью Adobe Dreamweaver, Adobe Muse или чего-то еще, что вы предпочитаете для этого. Вы действительно можете быстро создать что-то с помощью Muse, и он работает так же, как Photoshop и Illustrator, но имеет гораздо меньше инструментов.

Все, что вам нужно сделать, это подготовить изображение для кнопок или графиков по отдельности в формате .png и добавить их поверх фона (также в формате png или цветного прямоугольника в Muse) в программе Muse. А потом добавить какие-то гиперссылки на графику, кнопки и т.д. Каждая страница должна быть новым «этапом» или результатом действия. Когда вы закончите добавлять графику и гиперссылки, чтобы связать все страницы вместе, вы можете просто экспортировать этот пакет в формате HTML и разместить его где-нибудь или показать своему начальнику, перетащив файл index.html в веб-браузер на своем компьютере.

Основы Adobe Muse не очень сложны в освоении, и в нем есть несколько приятных небольших функций для создания фальшивых «всплывающих окон», ролловеров или полей, например. Вы можете добавлять в него текст, рисовать простые фигуры, линии и т. д. Это очень простой графический способ создания простых веб-страниц. Если у вас есть такие элементы, как меню навигации (или их много), вы можете просто создать разные мастер-страницы, которые можно применить к каждой странице. Если вы еще не использовали Muse, возможно, вам придется немного поэкспериментировать с функциями и инструментами, но для простых страниц кривая обучения невелика. Вы действительно можете создать хорошие быстрые доказательства с его помощью, и на самом деле это может быть быстрее, чем плоский JPG или анимированный gif, если у вас много «этапов».

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

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

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

Я не знаю, что это такое, но один из способов, которым я бы сфокусировал элементы, - это так или похоже (сторона не имеет значения). Я разделил области на 5 зон:

А здесь с 6 зонами:

Надеюсь, это поможет!

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

Способ получить «ресурс» для дизайна — просто посмотреть на другие примеры (фильмы, дизайнеры, видеоигры и т. д.), затем вы можете попробовать сделать набросок на бумаге и посмотреть, как это выглядит, попробуйте использовать максимум 3 цвета, так как это HUD, по моему опыту, это лучший способ что-то сделать. Во-первых: проанализируйте все элементы, которые требуются для HUD. Во-вторых: найдите идею, посмотрите различные концепции и попытайтесь ее набросать. буду рад помочь).