Документация AOW/Разработка под iPhone и Android/Дизайнеру

Материал из AOW

Перейти к: навигация, поиск
Помните!

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

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

Важная фишка рисования под айфон — это ретина… Разрешение экрана у ретины в 2 раза больше чем у айфона, но физический размер — такой же. Посему имеет смысл рисовать сразу под ретину, а потом уменьшить макет в 2 раза для айфона (ниже есть статья на англ. про ретину, там ещё и айпад упоминается…).

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

Иконка приложения… Её нужно отрисовать в нескольких размерах, для всяческих вариантов использования в аппстор и пр. Именно отрисовать, тк простого масштабирования явно недостаточно…

Рудомётов Илья: «57 px для старого-доброго iPhone и iPod touch с обычным дисплеем. 72 px для iPad. 114 px — двойной размер — для iPhone 4, чтобы значок «сиял» на ретина-дисплее. 512px иконка используется для отображения в iTunes, в том числе, для CoverFlow, и App Store, где она уменьшается почти в 3 раза до 175 px. 29 px для приложения Настроек на iPhone и iPad, а также для Spotlight на iPhone. Несмотря на свой небольшой размер, они очень важны. 48 px для Spotlight на iPad. Здесь есть небольшой нюанс: в информации для разработчиков на сайте Apple говорится об иконках размером в 50 px, но на самом деле, конечный размер составляет 48 х 48 точек. Просто iOS «отрезает» по одному пикселю с каждой стороны и добавляет туда тень. Немного странное решение, но его стоит учитывать при рисовании значка. 58 px для приложения Настроек и Spotlight в iPhone 4. Все верно, вы должны сделать две иконки практически идентичного размера (57 и 58 px). Особенно возрадуются дизайнеры, у которых по середине проходит вертикальная линия 64 px для значка документа. Кто не знает, мобильные приложения в iOS могут предоставлять иконку документа. Примечание: закруглять иконку и накладывать глянец нет необходимости - это будет сделано автоматически.»


От себя: важно помнить следующее:
— вместо курсора — палец, он толстый, в 16*16 иконку не попадёт... пальцем можно тыкать, тягать, слайдить (slide), тыкать дважды, удерживать палец и тд. Будь юзером или спроси у юзера айфона.
— у приложения может быть как вертикальная (исходная) ориентация, так и горизонтальная.
— айфон — это глянец/блики и скругления.
— айфон-юзеры привыкают к стандартным элементам и структурам интерфейса, нужно или анализировать приложения, или читать гайдлайны эппла — и применять, это юзер-френдли...
— экран, в общем-то, небольшой — нужно целесообразно использовать граф. элементы интерфейса.
— не стоит рисовать всё с нуля, есть готовые псд-шаблоны с отрисованными стандартными элементами.
— основное требование пользователя к приложению — это удобство использования. об этом стоит помнить не только при проектировании интерфейса, но и при отрисовке элементов, при их компоновке. нужно следовать общим принципам хорошего дизайна...


Содержание

Статьи

http://devmac.ru/2011/11/07/vvedenie-v-dizajn-prilozhenij-dlya-iphone-i-ipad/ — Введение в дизайн приложений для iPhone и iPad (умерла)

http://ios.biomsoft.com/2012/03/16/vvedenie-v-dizajn-prilozhenij-dlya-iphone-i-ipad/ - Введение в дизайн приложений для iPhone и iPad

http://www.iphone3gua.com/articles/18.html — Ошибки дизайнеров при создании приложений для iPhone: Перегруженный дизайн

http://devmac.ru/2011/12/06/dizajn-navigationbar-i-tabbar-v-iphone/ — Дизайн NavigationBar и TabBar в iPhone

http://ruseller.com/lessons.php?rub=29&id=1077 — советы по дизайну для мобилок

http://ipadstory.ru/luchshie-prilozheniya-dlya-ipad.html — список популярных приложений для iPad с обзорами, скриншотами. Можно изучить граф. приёмы, UI решения

http://lopanism.livejournal.com/217196.html - про мобильные интерфейсы, видео и слайды

http://www.androiduipatterns.com/ - андроид паттерны

Презентации и вебинары

http://www.slideshare.net/fullscreen/jvetrau/user-experience-2011-android-iphone-windows-phone-7/8 - Кросс-платформенное проектирование для мобильных — Android, iPhone (очень хорошо отражены типы экранов и компановка)

http://www.youtube.com/playlist?list=UUjEJglC0Ab_zMU0i5-qCNTg&feature=plcp - на канале можно найти обсуждения мобильных приложений

На английском

http://developer.android.com/design/index.html — Систематизированные рекомендации от гугла (en).

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html — генератор иконки приложения.

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html —собственно эппловские гайдлайны по дизайну айфон-приложения (en)

http://www.leemunroe.com/designing-iphone-apps-photoshop/ — полезные советы дизайнеру приложения (en)

http://www.onextrapixel.com/2012/01/02/design-best-practices-for-the-mobile-web/ — общие советы по дизайну мобильных приложений (en)

http://littlebigdetails.com/ — обзор маленьких удобных фишечек, есть и для приложений

http://upstageapp.com/resources — на этой страничке полезная таблица со стандартными размерами граф. элементов для iphone/retina/ipad. справа — ссылки на не менее полезные тематические статьи (en)

http://tapfancy.com/ — галерея скринов удачного дизайна для iPhone (en)

http://landingpad.org/ — то же для iPad (en)

http://bjango.com/articles/designingforretina/ — обширная статья про особенности дизайна под ретину, ещё не читал (en)

UI Паттерны

http://inspired-ui.com/

http://patterntap.com/?sort_by=count&platform[]=7

Личные инструменты

Разработка веб-сайтов, автоматизация.
По всем вопросам обращайтесь по телефонам:

+7 495 640 29 90
http://artofweb.ru