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

Дизайнер Джонсон Лу в своем блоге рассказал о способах проектирования интерфейсов — от описания проекта на бумаге до создания работающего прототипа.

В рубрике «Интерфейсы» — перевод заметки. 

Сервисы прототипирования

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

Примеры приложений для протипирования: Invision App, Blueprint, Marvel App и Balsamiq Mockups.

Прототипирование на бумаге

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

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

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

Диаграмма связей

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

Метод применяется для определения целей создания интерфейса — таким образом дизайнер может сразу расставить правильные приоритеты.

Стенография переходов

Метод заключается в построении карты переходов, которая поможет дизайнерам наиболее точно определять поведение пользователя на странице. Впервые такой прием описал Раян Сингер в блоге Signal v. Noise.

Дизайнер выписывает основные элементы интерфейса на странице, а затем составляет цепочку действий, которые совершает пользователь на пути к цели.

Словесное описание проекта

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

Это как бизнес-план для бизнеса, считает дизайнер: «Возможно, поначалу это может показаться бесполезным занятием, однако спустя какое-то время преимущества метода покажут себя».

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

Черновой макет

Один из первых прототипов Wii U Miiverse

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

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


Присылайте свои интерфейсные кейсы на interface@siliconrus.com
0
10 комментариев
Популярные
По порядку
Написать комментарий...

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

2

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

Находил в интернете блокноты с сетками, но жаба задушила покупать и решил сделать себе библиотечку с сетками и печатать их на обычном принтере по мере необходимости. Вот версия на данный момент: gridprint.in

Сайт без коммерческой выгоды, так что не сочтите за рекламу ;)

2

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

1

Не понимаю честно говоря как рисование на бумаге может быть быстрее того же axure. Вот это оригами из видео в акшуре делается минут за 20 вместе со всей интерактивностью, при этом тестируется на мониторе и мышкой, как и финальная версия. А с бумагой ребята заморочились на полдня, и тыкают в кнопки пальцами, что несколько странно для вебсервиса.

1

А это уже кому как легче. Все зависит от привычек.

0

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

А нужно быстро посмотреть и проверить идеи, для чего достаточно максимально общего подхода.

В любом случае, если вам удобнее и эффективнее работать с Axure, плохая затея использовать что-то другое.

0

Пользуюсь flinto.com

1

https://popapp.in - весьма добен

1

Методы: 6 окон и Сетка
http://romanakamagician.tumblr.com/post/105583503506

0

Ни слова про верстку, маки, скетчи и шрифты? автор лох и не шарит.

0

Комментарий удален

Читать все 10 комментариев
Сайты в 2021 году
USM Усманова вышла из капитала VK. Что важно знать о сделке
Обзор глобальных сделок: неделя от 29 ноября 2021

Традиционный недельный обзор глобальных сделок.

Сберлогистика и потерявшаяся посылка

Добрый вечер, господа и господессы. Хочу поделиться своей историей случайной (и, вероятно, последней) связи со Сберлогистикой.

И сотрудников тоже касается: кибербуллинг на рабочем месте
Design vector created by pikisuperstar - www.freepik.com
Продавец eBay из Кургана стала победителем в финале Всероссийского конкурса «Молодой предприниматель России 2021»

27 ноября в Москве состоялся финал ежегодного конкурса «Молодой предприниматель России 2021». В нём приняли участие предприниматели и самозанятые в возрасте до 35 лет. Всего было подано более 300 заявок из 43 регионов страны.

«Вещи должны быть не только функциональными, но и красивыми»: как устроена ландшафтная архитектура Карла Сёренсена

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

Овальные садовые участки в Неруме Metropolis
SkillFactory раздает подарки: повышенная ставка и новогодний марафон для вебмастеров

В преддверии Нового года мы решили порадовать своих настоящих и будущих партнеров — участников партнерской программы школ Skillfactory, Contented и Product LIVE. Это возможность получить денежный бонус и заодно увеличить прибыль от продажи наших курсов.

Автор огромного дополнения к игре Red Alert 2 завершил работу над проектом
Сбербанк компрометирует код CVC при выдаче карты

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

Откуда берут взрослые деревья для парков и улиц

А также сколько они стоят и почему выращивать их — неплохой бизнес.

null