Предварительный обзор Yoga Tablet. Новый дизайн планшетов. Дизайн планшетов


Полезные советы новичкам в дизайне под Android / Хабр

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

Долгое время back была аппаратной кнопкой Android устройств, не было смысла добавлять программный аналог в пользовательский интерфейс. Сейчас модно использовать кнопку back для навигации внутри приложений. Если говорить о кнопке “назад” пользовательского интерфейса (её называют “up button”), то между хардварной back и up есть небольшая разница. Up производит переход на один экран, в рамках приложения, в то время как back к любому приложению или контенту. Параметры разрешений под Android немного путают — xhdpi (2x), hdpi (1.5x) и mdpi (1x).

Звучит крайне технически. Когда год назад я начинал работать, никто толком не мог мне объяснить какое соотношение сторон межу ними. После многих расспросов и поисков, оно составило 720×1280, 540×960 и 360×640. Проектируя дизайн макет, не забывайте учитывать хардварные кнопки и статус бар.

От переводчика: На самом деле то, что описано в этом абзаце, не совсем верно. По ссылке и в таблице вы найдете более точное описание.

Таблица Джереми Салли, дизайнер из Telly, графически наглядно показал соотношение этих трех разрешений. Вам пригодится Android Action Bar Style Generator для работы с темами по умолчанию. Он позволит задать базовые параметры цвета, стиля и сохранить настройки в Zip файл для всех всех трех разрешений. Лучший способ наглядно поэкспериментировать.

В Android есть своеобразный способ масштабирования графических ресурсов, который не похож на CSS. 9-slicing позволяет вам указать, какую именно часть картинки вы хотите масштабировать. Остальная часть, такая как закругленные углы, остается фиксированного размера даже при масштабировании всего ресурса. Для этого в файле картинки необходимо нарисовать черные линии шириной в 1px в следующих областях:
  • Top: область, которая может быть растянута по горизонтали.
  • Left: аналогично по вертикали
  • Right: Область по вертикали, в которой будет расположено содержимое. Этот параметр может использоваться для задания отступов.
  • Bottom: аналогично по вертикали

В отличие от iPhone, где название обычно находится в середине заголовка, на Android название в левом верхнем углу, рядом с логотипом приложения. Нажатие на логотип обычно вызывает боковое меню или возвращает вас “назад”, к предыдущему экрану.

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

Наконец, если вы серьезно относитесь к гайдлайнам, все элементы управления должны быть в правом верхнем углу. Это относится и к функции обновить (потянуть, чтоб обновить как на iPhone, очень редко используются в Android), поиск, и печально известные кнопки “действия” которые в идеале дожны быть в виде трех точек. Точки используются для тех действий, которые не смог вместить Action Bar.

Шрифты, к сожалению, зависят от специфики устройства, так что будьте готовы к казусам. Не расстраивайтесь если вам придется протестировать дизайн на старом устройстве. Были и куда худшие дни — вспомните IE6. Самый популярный шрифт на данный момент Droid Sans. Впрочем Roboto набирает популярность, так как присутствует на новых устройствах. Начиная с Android 2.x, минимальный размер элемента должен быть: 28px для текста, 96px для меню и заголовка, 116px для нижнего колонтитула. Это немногим больше чем в iOS (24px, 88px и 100px). Если говорить о соотношении 116% Android к iOS. Роман Нурик из Google разработал очень полезный инструмент Android Design Preview. Инструмент поможет дизайнеру посмотреть, как нарисованный в графическом редакторе на компьютере макет приложения будет выглядеть на реальном устройстве.

Программу Android Design Preview можно установить на Windows, Mac OS X или практически любую из операционных систем семейства *nix. Приложение написано на Java и представляет собой обычный JAR-файл. Работает Android Design Preview следующим образом: разработчик подключает смартфон к компьютеру по USB (На ПК должны быть установлены ADT), запускает Design Preview, нажимает «Select Mirror Region» в этой программе и видит перед собой рамку. Эту рамку он устанавливает на макет и видит его на экране смартфона.

habr.com

Предварительный обзор Yoga Tablet. Новый дизайн планшетов

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

Дизайн

Форм-фактор гаджета, как Вы наверное заметили по фотографиям, очень сильно отличается от стандартного для планшетов. Все производители тянутся к тому, что бы сделать свой девайс как можно тоньше и компактнее, а вот Lenovo поступили немного иначе и прикрутила к нижнему торцу планшета довольно толстую часть, которая вместила в себя некоторое железо и батарею. Благодаря этому изменению планшет не кажется таким компактным и удобным. Его будет тяжелее положить в сумку или держать в руке, но обновленный дизайн так же имеет и свои плюсы. Например можно просто положить планшет на стол и он будет без всяких чехлов лежать под нужным углом для чтения или набора текста, а если решите посмотреть фильм можно просто высунуть подставку из нижней части и поставить его в нужное положение опять таки без чехлов-книжек. Так что с одной стороны мы потеряли легкость и удобство при транспортировке, но получили больше удобства на месте.

Начинка

Железо этого гаджета пусть и не тянет на флагманское, но его будет вполне достаточно для тех задач, для которых планшет и предназначается - для чтения, просмотра интернета и фильмов, набора текста в текстовых редакторах и для парочки простых игр. Развлекаться ведь все хотят вне зависимости от планшета или телефона. Компания Lenovo выпустила два планшета на 8 и 10 дюймов диагонали, но железо у них одинаковое. В стандартной комплектации установлен процессор MediaTek 8125, в максимальной комплектации же установлен четырех ядерный процессор 8389 с тактовой частотой 1,9 гигагерца. Количество оперативной памяти не уточняется , зато флеш-памяти 16 или 32 гигабайта.

Плюшки

Планшеты хотя и имеют разные диагонали, но разрешение у них одинаковое - 1280 на 800 точек, что далеко от идеала, но жить можно. Есть слот под карту памяти и бояться о малом количестве флеш-накопителя не стоит. Максимальная комплектация планшетов поддерживает не только беспроводную сеть Wi-Fi, но и сотовых операторов третьего поколения. Но это все мелочи, ведь самым главным плюсом планшетов является автономность работы - 18 часов в режиме веб-серфинга по Wi-Fi. Это уже крутой показатель, согласитесь.

Итог

Планшет, без сомнения, является чем-то совершенно новым на рынке, ведь ничего нового в этой сфере не происходит уже много лет. Банальная гонка за минимальной толщиной и ядрами, гонка разрешений, а про удобство никто не думает. Теперь же есть возможность купить реально удобный планшет для простых и повседневных задач, с которыми он справиться лучше любого другого представителя. Да и с такой автономностью работы можно легко не заряжать его неделю и читать новости каждый день не думая о батарее. Цена на 10 дюймовый планшет составляет 14000 рублей, на 8 дюймовый 12000. Недорого.

megaobzor.com

Дизайн планшета iPad 5

Пожалуй, никакая другая линейка продуктов компаний, производящих мобильные устройства, не способна потягаться с ажиотажем, которым сопровождаются слухи о новых изделиях Apple. И без того распаленный интерес дополнительно подогревают появившиеся в сети фотографии, предположительно содержащие изображение следующей модели iPad.

 

Темная лошадка

О дизайне следующего устройства, которое может выпустить известная во всем мире «яблочная» компания, практически ничего не известно. Если быть точным, достоверной информации на эту тему пока нигде не появлялось. И так не отличающаяся тенденцией распространяться о продуктах, компания Apple традиционно хранит свои секреты. Конечно, речь не идет о красочной презентации, во время которой надо максимально продемонстрировать плюсы и преимущества очередной новинки. Уж в этом-то случае представители информационного гиганта не скупятся на эпитеты и красивые фразы.

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

История со снимками потенциального iPad’а в точности такова: на ресурсе 9 to 5 Mac были выложены фотоснимки, якобы предоставленные неизвестным сотрудником компании, занимающейся именно подготовкой аксессуаров для новинки. На предоставленных фотографиях можно рассмотреть очень схожий с iPad mini силуэт. Более того, он настолько похож на него, что это можно воспринять как знак существенных перемен в дизайне серии.

Поклонники наверняка вспомнят, как долго сохранялись принципиальные особенности внешнего вида линейки планшетов. Теперь все может поменяться в одночасье. И новый планшет iPad 5 будет как родной брат похож на выпущенный раньше mini вариант. Анализ фотографий показывает, что в таком случае следует ожидать изменения толщины рамок. Ведь если их не менять, то окажется, что экран у пятого поколения устройств может оказаться меньше, чем у предшественника. А это уже совсем не укладывается ни в какую логику. Остается предположить, что узкие рамки устройства спасут ситуацию.

Умельцы, владеющие Photoshop, уже соорудили картинки возможного вида лицевой стороны устройства. Понятно, что судить о новинке по ней невозможно. Данных о дисплее новинки или иных характеристиках пока нет. Конечно, если не считать слухи об использовании 128 гигабайтного накопителя.

По-прежнему загадочный

Ресурс, первым опубликовавший снимки возможного iPad’а, не смог установить их подлинность. А жаль, ведь в таком случае можно было бы практически наверняка оценить толщину новинки, которая стала бы практически равной толщине мини-варианта.

www.1smartphone.ru

Правильно выбираем планшет

выбираем планшет

выбираем планшетВ современном мире планшетные компьютеры используются в самых различных целях, кто-то любит смотреть кино, кто-то предпочитает читать, а кто-то играет в игры. Стоимость планшета весьма не дорогая и если у вас не позволяют средства купить дорогую модель, то есть более дешевые альтернативные варианты.

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

Есть модели, которые имеют экран более 7 дюймов и есть меньше. Небольшой планшет удобно брать с собой на работу, на учебу или в поездку. Модели с большими экранами, хоть и смотрятся очень привлекательно, но стоят намного дороже. Они намного удобнее в использовании и качество определенно лучше. Из 7 дюймовых и недорогих можно взять например планшеты wexler http://comp.ua/i/planshet-pk/wexler/ — достаточно функциональные устройства.

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

Также внимательно ознакомьтесь с программными характеристиками и операционной системой. Сначала определитесь, для какой цели вы будете использовать планшет, потому что большинство программ вам нужно будет скачать самостоятельно. Отличным выбором может быть OC Android, ведь в магазине Android Маркет можно приобрести множество программ, причем большинство из них абсолютно бесплатно. Установка происходит мгновенно и уже через несколько секунд, вы сможете насладиться скаченной игрой или приложением.

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

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

design-mania.ru

Четыре приложения для планшетов, которые должны быть у каждого архитектора

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

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

1. На последнем, четвертом, месте рейтинга находится iRhino 3D. Эта программа позволяет с легкостью просматривать модели благодаря интуитивно понятному тач-интерфейсу, при этом возможно масштабировать, перемещать и вращать загруженную трехмерную модель. Также присутствует возможность загрузки моделей из сети при помощи Google Docs, DropBox или во вложениях к почте. Естественно, программа также может корректировать и передавать документы. При этом ее стоимость в долларах составляет 3,99. Данная программа доступна только для владельцев планшетов от Apple.

2. Лучший по результатам голосований проект программы для быстрого создания эскизов Sketchbook Mobile от Autodesk позволяет рисовать, чертить и создавать эскизы, причем в программе есть возможность работы со слоями, что дает ей преимущество перед многими аналогами. Ее цена в долларах США для iOS составляет 1,99, а для Android 0,25. Sketchbook Mobile находится на третьем месте в нашем рейтинге.

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

4. Первое место в рейтинге занимает AutoCad WS, причем его лидерство является неоспоримым. Почему? Возможно благодаря тому, что проекты можно прямо на ходу исправлять и оставлять аннотации, после чего легко можно передавать результаты в сеть. Может также благодаря тому, что в программе есть поддержка просмотра в полноценном 3D-режиме и интеграция функциональности GPS. А скорее всего, потому что все это сочетается с удачной ценой, а точнее ее отсутствием как таковой – программа распространяется бесплатно, и она доступна для Android и iOS.

umods.ru

Оптимизация сайта для планшетов / Хабр

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

А при вводе адреса электронной почты меняем символы на необходимые:

Стандартная клавиатура:

<input type="text"> URL-параметры:<input type="url"> Email-символы:<input type="email"> Цифровая клавиатура:<input type="text" pattern="[0­9]*">
Отключение автокоррекции и начальных заглавных букв

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

<input type="text" autocapitalize="off" autocorrect="off">
Правильное расположение блоков
Логика взаимодействия пользователя с сайтом на планшете отличается от десктопного. При проектировании интерфейса это необходимо учитывать, делая акцент на самых важных элементах. Вот один пример, где была изменена форма поиска на сайте интернет-магазина.

Слишком мелко:

Хорошо:

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

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

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

Тач-карусели
Если на сайте используется карусель изображений, она должна управляться тачем:

Отключение a:hover
В тач-устройствах отсутствует возможность удобного наведения курсора на объект, поэтому не стоит использовать такой способ взаимодействия с пользователем (На Хабре, кстати, это еще имеет место — всплывающие подсказки при наведении на оценку топика или комментария для просмотра баланса голосов)
Проектирование для альбомной и портретной ориентации экрана
Пользователи могут пользоваться планшетом и в альбомной, и в портретной ориентации при взаимодействии с сайтом. Поэтому необходимо это принимать во внимание при проектировании интерфейса.
Использование камеры
Планшеты открывают нам новые возможности: например при заполнении профиля можно предлагать пользователю сделать фото для аватара камерой планшета:<input type="file" accept="image/*" capture="camera">
Скрытие адресной строки
При использовании планшета на счету каждый пиксель, поэетому можно скрыть адресную строку (в Safari) для увеличения полезной площади экрана:<meta name="apple-mobile-web-app-capable" content="yes" />
Полезное чтиво и использованный материал
.

habr.com


Смотрите также