Шаблоны для проектирования приложения от руки

    Приветствую, хабрасообщество.

    imageРечь пойдет о проектировании графического интерфейса приложений для iPhone. Уверен, что многие из вас частенько предпочитают пачку листов A4 и простой карандаш, вместо сложных программных сред. Конечно при таком подходе тоже надо иметь некоторую системность, но в любом случае тут свой шарм, гибкость и естественность, ведь каждый творил мелом на стене дома, забора или комнаты в своем советском детстве.

    Конкретнее, я просто хочу поделится своими шаблонами, полученными по ходу работы над разными приложениями:

    image

    Немного опишу, что для чего использую:
    • Первые два — простые линейные. На них широкие экраны телефона, что удобно для отображения деталей. Например, игры часто имеют мелкие детали.
    • 3й имеет больше экранов на листе. С его помощью описываю интерфейс, не требующий много деталей. Использую для расположения основных элементов навигации и их связей, к примеру.
    • 4й использую, как и третий. Единственное усовершенствование это смешение горизонтальных и вертикальных экранов. Помогает, когда нужно разное отображение данных в горизонтальном и вертикальном положении телефона. Например, во встроенном приложение iPod есть альбомный режим просмотра (cover flow).
    • На последнем листе изображаю совсем общие вещи. Удобно рисовать переходы между «страницами» приложения. Внутри экранов часто рисую основную характерную черту страницы или просто название.


    Скачать или сразу распечатать шаблоны можно из Google Docs.

    Английская версия статьи
    Оригинальный источник изображения iPhone

    В заключение короткий обзор других вспомогательный и альтернативных инструментов:


    Успехов в рисовании!
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 23

      +2
      А я просто фотку с реальными размерами нашел, экран «очистил» и распечатал, 4 «айфона» на лист влезло. Теперь рисуем прототипы ))
        +1
        точно так же делал раньше, но лучше когда iPhone схематично нарисован. Так меньше отвлекает и сосредотачиваешься на своей работе.
        0
        А для PC шаблоны есть? :)))))
          0
          Это же PDF. Думаю сумеете открыть файл даже там. Или что имеете в виду рисунок какого ни будь WinMobile девайса?
          +9
          Можно распечатать и iPhone себе склеить:)
            0
            Кстати, хорошая мысль. Но вы не первые.
            Планирую распечатать цветные элементы интерфейса наклеить на картон и пробовать лепить интерфейс из такого себе «2д лего».
              +1
              … и не зыбыть купить фотоаппарат. Чтобы снимать ролики, как что должно происходить :)
              Со всеми анимациями перехода между окнами :)
                0
                Спасибо за под**б ;)
                Но перформанс может получится интересным.
                  0
                  зачем покупать? можно из спичечного коробка слепить
                    0
                    не понял юмора? расшифруйте.
              +1
              iphonemockup.lkmc.ch/ — может тоже кому пригодится
                0
                Как разработчику, рисованные мокапы не нравятся и плохо воспринимаются. Лучше использовать стандартные элементы и тогда заказчик будет меньше выходить за рамки стандартного UI, чего не любит apple

                Найду, обязательно тут ссылочку осталю
                  0
                  ой, извеняюсь, в «Шаблоны контролов для Keynote и PowetPoint» очень даже суперские элементы интерфейса
                    0
                    Согласен, заказчику будет легче стандартные. Но мне самому легче экспериментировать на бумаге. Хотя, уверен что можно сделать отличную тулзу онлайн, например, развить ту китайскую наработку.(последняя в списке)
                      0
                      К тому же и так много сидим за монитором, глаза устают. За столом в кресле с чашкой чая||морса||кофе||пива много приятнее.
                  0
                  Добавил в ссылки. Примного благодарен.
                    +1
                    Отличная подборка! А нет ли у кого подобного в векторном формате EPS/AI?
                      +1
                      Спасибо, очень полезная подборка.
                        +1
                        Есть еще такой инструмент — www.balsamiq.com/
                          0
                          Как то не возникло желание этим пользоваться. Не красиво и не специфично для iPhone.
                          0
                          а где можно найти шаблоны для nokia n97?
                            0
                            Не думаю, что есть настолько специфичные вещи.
                            Попробуйте нарисовать или заказать фрилансерам. Это просто нарисовать вектор поверх ровной фотографии телефона.
                            0
                            В этих шаблонах не хватает сетки элементов.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое