Рубрика «интерфейсы» - 140

RE: Как бороться с низкокачественными Android приложениямиВ ответ на: habrahabr.ru/post/178673/

Я год просидел на Windows Phone и избавился от этого телефона при первой возможности. Теперь у меня Nexus 4.
Windows Phone функционально ужасен. Да и стиль Metro мне не то, чтобы близок.

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

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

Обратите внимание на скрин слева. Это стартовый экран LG Nexus 4. Небольшое упражнение:

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

Серьёзно. По-моему, это вовсе не разработчики превратили платформу Андроид в кучу яркого хлама без всякого намёка на интерфейсную общность. Это всё сделал сам Гугл.

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

Новая разработка MIT позволяет «накладывать» интерфейс на объекты реального мира

Smarter Objects — проект лаборатории MIT Media lab в рамках которого инженеры разрабатывают AR технологию взамодействия с объектами реального мира.

Проект «Smarter Objects» исследует новый способ взаимодействия с повседневными объектами. Система связывает виртуальный объект с физическим чтобы предоставить простой способ модификации и поведения этого физического объекта а так же взаимодействия с другими подобными объектами. Как только пользователь наводит смартфон или планшет на объект, приложение дополненной реальности распознает его и предоставляет интуитивный графический интерфейс для программирования его поведения и взаимодействия с другими объектами. Как только он запрограммирован, с объектом возможно взаимодействовать с помощью простого интерфейса, состоящего из кнопок, крутилок и т.п. Таким образом, Smarter Object сочетают в себе адаптивность цифровых объектов с простым интерфейсом физических.

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

3500 иконок готово. Можно сказать спасибо. После выпуска 3000 иконок FatCow прошел почти год, страницу посетило 700к посетителей. Пошел пятый год рисования. Находить удачные метафоры становится сложнее. Пытаемся охватить набор метафор, который нужен для специфичного софта и узконаправленных сайтов.
Чтобы дойти до 4000 иконок, работы хватит до апреля 2014 года. Потом укрупняем палитру или уходим в 5000. То есть по многочисленным запросам пользователей помимо 16-го и 32-го размера намерены освоить 48x48 и 96x96. В таком случае до середины 2015-го года нарисуем первую «крупную» тысячу.

Пак ольдскульных пиксельных иконок, скоро 4000

Пятилетку за четыре года, кота за день. Чтобы понять, какие именно 500 метафор было положено в основе дополнительной эмиссии, смотрим сотканный kreol2013 надстройкой над программой KhodeN «ковер»…
Читать полностью »

Как-то раз передо мной встала задача сделать в приложении на Android поддержку тем оформления. Что хотелось получить:

  1. Возможность переключить оформление — изменить некоторые цвета и графику
  2. Смена должна происходить “на лету”, для пользователя должно измениться только оформление, все остальное (содержание полей ввода, позиция элементов в списке и т.п.) меняться не должно
  3. В перспективе хотелось бы, чтобы тема могла изменяться и без участия пользователя, например по времени суток
  4. Не хотелось бы в значительной степени изменять уже существующий код или разметку. В идеале хотелось бы просто как-то пометить элементы в разметке
  5. Было бы здорово уметь подгружать новые темы без обновления приложения.

О том, чего удалось добиться и как это было реализовано — под катом.

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

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

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

7. Карта ума.

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

Для создания карты ума (её чаще называют английским термином «Mind map»), мы можем использовать специальное ПО, я рекомендую Xmind.

Для начала нужно взять несколько наших документов с идеями, которые мы сделали на прошлых этапах, их мы будем систематизировать. Все идеи необходимо разбить на глобальные блоки (разделы). Например, представим, что мы проектируем портал недвижимости, глобальными блоками которого могут быть: каталог недвижимости; сообщество; статьи-новости; база знаний и т.д. Все идеи мы должны распределить по этим глобальным блокам. Взаимоисключающие идеи объединяем или выбираем одну из них. По принципам мозгового штурма отбрасываем малополезные идеи, вернее оставляем до лучших времен. Общее количество блоков должно соответствовать будущим разделам сайта, у каждого из разделов могут быть подразделы. В идеале количество разделов не должно превышать 7-8 для большого портала, если мы проектируем, например, СМИ, там может быть много разделов, которые по сути отличаются только тематикой контента, но имеют одинаковое назначение, такие варианты тоже допустимы, но с ними нужно быть очень осторожным, важно, чтобы пользователь не запутался.

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

Оглавление

  1. Введение
  2. Инициализация приложений Prism
  3. Управление зависимостями между компонентами
  4. Разработка модульных приложений
  5. Реализация паттерна MVVM
  6. Продвинутые сценарии MVVM
  7. Создание пользовательского интерфейса
    1. Рекомендации по разработке пользовательского интерфейса
  8. Навигация
  9. Способы коммуникации между слабосвязанными компонентами

Рекомендации по разработке пользовательского интерфейса

Целью этого раздела является предоставление поверхностного руководства для XAML дизайнеров и программистов, создающих приложения с использованием WPF, Silverlight, или Windows RT и библиотеки Prism. В этом разделе описывается компоновка пользовательского интерфейса, визуальное представление, привязка данных, ресурсы и модель отображения данных. После прочтения этого раздела, вы получите поверхностное понимание того, как создавать пользовательский интерфейс с использованием библиотеки Prism, а так же, как применять техники, которые могут помочь вам создать поддерживаемый UI в модульном приложении.
Читать полностью »

«44 пикселя – не физический размер… Мы не можем даже привести 44 пикселя или поинта к единому однозначному размеру»

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

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

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

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

И еще статья описывает технологию проектирования, однако она не учитывает специфики подходов waterfall и agile. С waterfall данную технологию проектирования можно применять без изменений, а вот для agile придется оптимизировать.

Вступление

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

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

Процесс проектирования

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

Оглавление

  1. Введение
  2. Инициализация приложений Prism
  3. Управление зависимостями между компонентами
  4. Разработка модульных приложений
  5. Реализация паттерна MVVM
  6. Продвинутые сценарии MVVM
  7. Создание пользовательского интерфейса
    1. Рекомендации по разработке пользовательского интерфейса
  8. Навигация
  9. Способы коммуникации между слабосвязанными компонентами

Существует несколько парадигм создания пользовательского интерфейса:

  • Все элементы управления содержатся в одном XAML файле и объединяются во время проектирования формы.
  • Форма разделяется на логические части, обычно — пользовательские элементы управления. Форма создаётся во время проектирования, ссылаясь на эти части.
  • Форма, как и в предыдущем варианте, разделяется на логические части, но не ссылается на них напрямую. Части добавляются на форму во время выполнения. Такие приложения известны, как составные.

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

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

Приложение Stock Trader Reference Implementation (Stock Trader RI) производит композицию пользовательского интерфейса во время выполнения, загружая представления из различных модулей в регионы, объявленные в оболочке (Shell), как показано на иллюстрации ниже.

Stock Trader RI регионы и представления

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


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