[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Равиль Хабибуллин", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435_\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430_\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432"], "comments": 11, "likes": 14, "favorites": 19, "is_advertisement": false, "section_name": "default", "id": "7175" }
Равиль Хабибуллин
5 749

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Присылайте свои интерфейсные кейсы на interface@siliconrus.com

#Интерфейсы #мобильные_приложения #интерфейсы #разработка_интерфейсов

Статьи по теме
10 полезных ресурсов для разработчиков интерфейсов
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

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

0 новых

Популярные

По порядку

Прямой эфир

Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления