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

Процесс такой:

  • [Ожидание клавиши клавиатуры] (Показывает пустую клавишу)
  • Нажмите клавишу клавиатуры (теперь пустая клавиша имеет то, что было нажато)
  • [Ожидание нажатия внешней клавиши] (Показать пустую кнопку, и что они не связаны)
  • Нажмите внешнюю клавишу (теперь пустая кнопка показывает, что было нажато)
  • [Показать, что они связаны]

Вот макет, показывающий пустые и непустые кнопки:

Mockup

Мне нужно что-то между этими объектами.

Таким образом, пользователь увидит светло-серое, затем светло-серое с буквой А и темно-серое, а затем нижнее изображение.

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

Еще лучше, если «связь» показывает, что круг соединен с квадратом, поскольку нажатие на то, чему соответствует круг, равносильно нажатию на то, чему соответствует квадрат.

Спасибо.

2
David 16 Май 2015 в 03:42
Добро пожаловать в UX, внешнее устройство похоже на геймпад или контроллер?
 – 
Frank Visaggio
16 Май 2015 в 05:22
@BobSinclar, да.
 – 
David
16 Май 2015 в 05:31

1 ответ

Что бы я сделал, это показать контроллер или что-то вроде внешнего устройства. Затем закрасьте каждую кнопку серым цветом, за исключением той кнопки, которую вы наносите на карту. Затем покажите клавиатуру под ним. Когда вы анимируете нажатие кнопки 0 на внешнем устройстве/контроллере, анимируйте нажатие кнопки A на клавиатуре, чтобы все было выделено серым цветом.

Сделайте то же самое для всех кнопок на внешнем устройстве.

К сожалению, это может быть больше работы, но я думаю, что отображение очень ясное, и мало что осталось для интерпретации.

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

1
Frank Visaggio 16 Май 2015 в 05:50
На данный момент я не знаю, как будет выглядеть контроллер, отсюда и очень простой дизайн.
 – 
David
16 Май 2015 в 05:35
Это очень сложно без специального сопоставления. Я мог бы вернуться к этому, как только вы это сделаете. Возьмите n64, говорящий им, что кнопка Z сопоставляется с клавишей пробела, будет почти бесполезно, потому что как пользователь узнает, что контроллер должен быть перевернут, так как он находится сзади.
 – 
Frank Visaggio
16 Май 2015 в 05:49
Смотрите мою редакцию моего ответа, хотя я предпочитаю свою первоначальную идею, хотя она может не сработать в вашей ситуации.
 – 
Frank Visaggio
16 Май 2015 в 05:50