Недавно в компании, где я работаю, разрабатывали софтину с интерфейсом «заточенным» под сенсорные экраны. UI мы делали с нуля и, потому, смогли дать волю фантазии, не ограничивая себя существующими подходами, кодовой базой и «привычками» пользователей. По логике в нашей программе должно было присутствовать стандартное окно настроек из серии «Да/Нет/Отмена», но, для поставленной задачи, хотелось сделать его красиво, удобно и понятно.
Во-первых, мы сразу отказались от окошек из серии Да/Ок, так-как настройки либо применяются, либо отменяются — третьего не дано. Теперь, когда кнопок осталось две, стало возможным разнести их по разным углам экрана, сделав их концептуально близкими к софт-клавишам мобильных телефонов. После этого стало возможным вплотную прижать их к краям окна, облегчив попадание пальцами.
Во-вторых, решили вовсе не делать окна, а отображать фрейм настроек во весь экран, как и саму программу. Благодаря этому максимальная площадь экрана отводится под полезную информацию и элементы управления.
В-третьих, чтобы человек не забывал, где он находится были сделаны эффекты переходов между фреймами:
Основной фрейм «уступает» место настройкам сдвигаясь влево.
Кнопка «Отмена» приводит к сдвигу экрана в обратном направлении, как бы возвращая на прежнее место.
Кнопка «Применить», наоборот, сдвигает экран дальше влево. При этом человек видит тот-же фрейм, но с новыми данными.
Сами кнопки расположены у того края экрана, за которым «находится» следующий фрейм.
Дизайн-проект, графика и немного xaml-я — fo2rist, кодинг и много-много xaml-я — Евгений «enemy» Коваленок.
P.S. Если появится возможность, к релизу выложу видео и расскажу о других интересных решениях.
Во-первых, мы сразу отказались от окошек из серии Да/Ок, так-как настройки либо применяются, либо отменяются — третьего не дано. Теперь, когда кнопок осталось две, стало возможным разнести их по разным углам экрана, сделав их концептуально близкими к софт-клавишам мобильных телефонов. После этого стало возможным вплотную прижать их к краям окна, облегчив попадание пальцами.
Во-вторых, решили вовсе не делать окна, а отображать фрейм настроек во весь экран, как и саму программу. Благодаря этому максимальная площадь экрана отводится под полезную информацию и элементы управления.
В-третьих, чтобы человек не забывал, где он находится были сделаны эффекты переходов между фреймами:
 |
| Главное окно: меню. |
Основной фрейм «уступает» место настройкам сдвигаясь влево.
 |
| Показ настроек — сдвиг влево |
Кнопка «Отмена» приводит к сдвигу экрана в обратном направлении, как бы возвращая на прежнее место.
Кнопка «Применить», наоборот, сдвигает экран дальше влево. При этом человек видит тот-же фрейм, но с новыми данными.
 |
| Сохранение настроек |
 |
| Подтверждение настроек — дальше влево |
Сами кнопки расположены у того края экрана, за которым «находится» следующий фрейм.
Дизайн-проект, графика и немного xaml-я — fo2rist, кодинг и много-много xaml-я — Евгений «enemy» Коваленок.
P.S. Если появится возможность, к релизу выложу видео и расскажу о других интересных решениях.
