Кнопки такие маленькие Думаю, большинство видели клавиатуру мобильного устройства.
Что-то вроде этого:
Если экран маленький, то без стилуса или длинных ногтей ввести текст очень сложно.
Да, конечно, были попытки сделать ввод данных чуть удобнее - убрали ряд цифр и клавиш выше - но что делать, если пользователь привык к qwerty-раскладке, в которой сверху 10 символов ряд (о русском языке есть особый разговор).
Существует также вариант полноэкранной клавиатуры, когда экран поворачивается в альбомный режим, а клавиатура разворачивается на весь экран, но у этого решения есть огромный недостаток — места для отображения реального текста очень мало.
Что нужно каждому
Поэтому я предлагаю решение, которое позволит: 1. Увеличьте размер области, в которую вам нужно попасть 2. Уменьшите размер клавиатуры.
3. Избавьтесь от ошибок, когда палец скользит в сторону
Концепция (нажмите и перетащите)
Суть рецепта можно выразить двумя словами – тапай и перетаскивай.В стандартной клавиатуре обрабатываются только нажатия.
Если к этому добавить движение, то в целом получим 5 возможных символов на область.
Конкретный пример
Я сделал пример реализации qwerty-клавиатуры, используя этот подход в матрице 5x2. Для ввода «Q» нужно нажать на область «1» и перетащить вправо, для ввода «a» нужно нажать 1 и перетащить вниз, для ввода «1» нужно нажать и отпустить.
Ширина картинки примерно соответствует ширине экрана смартфона, вы можете приложить палец к экрану и сами убедиться, что на первой клавиатуре очень сложно куда-либо попасть, а вот по тапу и перетаскиванию вполне удобно, а на при этом размер самой клавиатуры меньше.
Дополнительные возможности
1. Верхний регистр – в левой области клавиатуры перетащите его вверх, над клавиатурой.
2. Включить ввод символов - по центру клавиатуры провести вверх, над клавиатурой.
3. Переключить раскладку - в правой области клавиатуры провести вверх, над клавиатурой.
4. Удаление – перемещение справа налево более 3-х участков.
5. Пространство – движение слева направо более чем в 3-х областях.
6. Enter – правый верхний угол вниз и влево.
Что еще
Русская раскладка
Специальная раскладка ввода символов
Английская раскладка 6х2 п.
с.
Рисунки сделаны в Excel, обрезаны и преобразованы в Paint, а в графическом дизайне я не силен.
Теги: #дизайн интерфейса #клавиатура #сенсорный экран #Чулан
-
Ши Сан Цзин
19 Oct, 24 -
Выпуск Пи-Программы Пиратской Партии России
19 Oct, 24 -
Будущее Искусственного Интеллекта В Играх
19 Oct, 24 -
Создайте Экземпляр Нереализованного
19 Oct, 24 -
Насколько Важна Для Вас Личная Хабракарма?
19 Oct, 24 -
Crysis Теперь Официально
19 Oct, 24