Метка «интерфейс» - 5

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

Хороший пример правильного использования жестов — набирающая популярность боковая навигация. На Хабре ранее публиковалась статья о боковой навигации как паттерне, но в ней ничего не было сказано о реализации.

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

Изначально я хотел в этой статье расписать как и способ открытия бокового меню по клику, так и способ открытия меню жестом. Однако ближе к концу статьи стало очевидно, что обработка жестов и открытие навигации по ним достаточно объемный вопрос, в котором также следует учесть множество особенностей. Статья в таком случаем получается настолько огромная, что читать ее просто неудобно.
Поэтому я решил описать пока лишь реализацию бокового меню по клику.
Читать полностью »

Наткнулся недавно на один интересный проект в основе которого лежит Twitter Bootstrap, а так как сейчас делаю интерфейс и в основе именно Bootstrap, то некоторые элементы мне будут очень полезны, я решил поделиться находкой с хабросообществом.
Fuel UX представляет собой набор скриптов и стилей для легких современных интерфейсов. А именно для создания удобных элементов управления.
Fuel UX
Читать полностью »

Дата — крайне неудобная штука для работы с ней в плане создания UI.

Мало того, что она составная (год, месяц, день), и ее компоненты не кратны между собой. Так она еще и довольно велика, но при этом требует претенциозной точности — ввод года рождения в выпадающем списке, если вам больше 8 лет — задача на тренировку силы воли.

Мой вариант решения проблемы

DatePalette — фреймверк, создающий UI для работы пользователя с датой в браузере

Для самых нетерпеливых — да, есть функционирующее демо — jsfiddle.net/Meettya/aDAsa/embedded/result/

Читать полностью »

Ну вот нельзя просто так добавить, и все тут!

Мне тут пришлось вспомнить, как же все таки надо писать на С, хотя работаю С++ программистом. И мне так не хватало классов и методов, что я стал думать, как можно приблизить С к С++. Зачем? Просто так, мозги размять.
Основное пожелание было следующим: хочется, чтобы в С работал примерно такой код

void print_name( Iface* ptr )
{
    ptr->print_name();
}

void main()
{
    A a;
    B b;

    print_name( &a );    // выдаст "This is A object"
    print_name( &b );    // выдаст "This is B object"
}

По сути, A и В наследуют один и тот же (а может и несколько) интерфейс(ов). При этом можно на этих объектах вызывать виртуальные методы, действующие в зависимости от того, какой указатель был подан.

Кому интересно, что получилось в итоге (а в каком-то виде задача была решена) и кому интересно, как примерно в С++ реализуются виртуальные методы, прошу под кат.
Читать полностью »

Японская NTT DoCoMo на выставке CEATEC показала действительно инновационные интерфейсы взаимодействия с пользователем для мобильных устройств – это планшет i beam, который управляется взглядом, и концепт Grip UI, который работает со сдавливаниями.

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

Железная часть Grip UI это чувствительные к нажатию боковины телефона, которые могут различать до 5 степеней давления. Смартфон можно запрограммировать на выполнение определенных действий и, таким образом, управление одной рукой может стать вполне удобным процессом — например ту же кнопку «Назад» в Android можно будет повесить на сжатие.

Будущее мобильного UI: взгляд и сдавливанияЧитать полностью »

Японская NTT DoCoMo на выставке CEATEC показала действительно инновационные пользовательские интерфейсы для мобильных устройств – это планшет i beam, который управляется взглядом и концепт Grip UI, который работает со сдавливаниями.

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

Железная часть Grip UI это чувствительные к нажатию боковины телефона, которые могут различать до 5 степеней давления. Смартфон можно запрограммировать на выполнение определенных действий и, таким образом, управление одной рукой может стать вполне удобным процессом.

Будущее: NTT DoCoMo управляется взглядом и сдавливаниемЧитать полностью »

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

Про сториборды я в первый раз услышала на курсе Human Computer Interaction

Проектирование с помощью сторибордов
Преподаватель курса Скотт Клеммер рисует сториборд

Я не встречала ничего похожего в отчетах наших проектировщиков, а Клеммер говорил об этом, как о широко распространенной, всем известной практике.
Как оказалось, на западе этот инструмент довольно популярен, если интересно кем, как и зачем его используют, добро пожаловать под кат.
Читать полностью »

Разработчики одного из самых популярных облачных хранилищ представили новый дизайн меню своего клиента.

Dropbox обновил интерфейс
У версий для Windows и Mac OS X одинаковый внешний вид

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

Как выглядит современная юзабилити лаборатория

Многие представляют себе юзабилити-лабораторию как пространство, где людям показываются прототипы продуктов, всё записывается и на основе полученных данных вносятся изменения в интерфейс. Да, это есть в лаборатории, но в то же время — это только вершина айсберга. Непосредственно тестирование — это уже зрелищный финал. До того, как вообще начнётся разработка первого прототипа продукта нужно сделать огромное количество разных вещей.

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

Как выглядит современная юзабилити лаборатория
Помещения лаборатории Читать полностью »

image
Здравствуйте! Представляю вам фреймворк для работы с хеш-частью URL marinad.js! Благодаря ему создание сайтов на ajax-технологиях упростится в разы, ведь теперь можно будет обновлять URL и получать оттуда переменные без перезагрузки страницы! О том, как сие чудо работает подробно расписано под катом:
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js