10 шаблонов дизайна пользовательского интерфейса вы должны обращать внимание на

Дизайн patterns впервые были описаны в 1960 году Кристофер Александр, архитектор, который заметил, что многие вещи в нашей жизни происходят по шаблонам.

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

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

Вы можете быть заинтересованы в следующих связанные должности:

1.Ленивые Registration

Чтобы в полной мере оценить проблемы регистрации, мы должны рассмотреть досады, что привело к мнению, что формы подписки должна die.Это, конечно, doesn’ T означает, что они должны быть полностью опущено а то, что они должны быть только одна часть в процессе введения пользователей в системе, и должен прийти в конце process.Такой подход называется “ ленивых registration” и относится к регистрации учетной записи pattern.

Когда вы на самом деле использовать ленивые регистрации?Хотя это может показаться ленивым регистрации можно использовать все время, некоторые обстоятельства являются идеальными:

. Когда пользователи могут попробовать ваш продукт или услугу сайта, прежде чем принимать решение (которое не каждый разрешений на веб-сайте, однако)
Когда это важно, чтобы знакомить пользователей с системой, прежде чем подписать, которая может быть важным шагом в процессе принятия решения о register.

Amazon позволяет просматривать и добавлять продукцию вкорзина до подписания up.

Эта модель предназначена, чтобы позволить пользователям использовать вашу систему и предпринять действия до того registering.Если вы согласны с вашим услугам до сих пор, пользователи будут рассматривать это быстро акта регистрации в качестве просто еще один маленький шаг во всем процессе, а не обязанность.Корзина является хорошим примером этой модели: пользователи могут просматривать и выбирать продукты и только зарегистрироваться, когда они идут, чтобы проверить out.

Picnik является еще одним хорошим примером ленивый регистрации.Пользователи могут использовать все service’ функций с редактировать свои фотографии в Интернете.Они просят зарегистрировать только перед сохранением их work.

2.Прогрессивная Disclosure

Эта модель используется, чтобы показать только ту информацию, или функции, имеющие отношение к user’ текущую деятельность с и задержать другую информацию, пока она не просила.По скрывается более сложная или редко используемых функций, вы де-беспорядок пользовательский интерфейс;, открывая их только по мере необходимости, вы помогаете пользователям выполнять сложный, многоступенчатый процесс на одном page.

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

Digg использует прогрессивные раскрытия информации в разделе комментариев.Пользователи могут читать комментарии и, нажав на “ Replies” ссылке, чтобы увидеть из ответов на этот комментарий.Ссылка также говорит вам, сколько ответов будет shown.

После ответов показал, пользователи могут не толькочитать их, но и отвечать на них и скорость.Комментарии ниже просмотре порога по умолчанию свернута и показал, нажав “ Show.”

Примеры прогрессивного раскрытия везде.Простой “ Показать more” ссылка, которая показывает больше информации является одной из простейших форм прогрессивного раскрытия информации.Но она может быть использована для более сложных случаев, таких, как заполнение веб-форм.Попробуйте открыть счет на Picnik (о котором мы говорили в ленивой шаблон регистрации), чтобы увидеть, как прогрессивное раскрытие информации может использоваться в более сложных level.

YouTube использует прогрессивные раскрытия, когда пользователям настраивать внешний вид проигрывателя видео.Когда пользователь щелкает по иконке, возможности настройки открыть below.

3.Прощать Format

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

Yahoo погода поиска позволяет пользователям искать по городу или почтовый code.

Чтобы передать, какие форматы поддерживаются, дать пользователям подсказки о том, как искать, будь то путем перечисления всех доступных форматов, как в примере выше, или путем предоставления ссылки на странице помощи, как в примере below.

Карты Google позволяет пользователям вести поиск по городу, улица, почтовый индекс и даже по широте и долготе values.

Прощает шаблон формата значительно упрощает пользовательский интерфейс.Тем не менее, он может потребовать много работы с фоновым разработчиков.Чем больше вариантов у пользователей, тем сложнее разбора becomes.

4.Очистите первичный Actions

Простой веб-формы часто позволяют одним действием (“ Submit, ”“ Save” или “ Send”).Пользователь точно знает, что их окончательное решение в заполнении формы будет, потому что у них есть только один вариант.Тем не менее, пользователи иногда сталкиваются с несколько вариантов и должны различать первичный и вторичный actions.

Clearleft делает различие между первичными и вторичными действия с color.

Что такое первичные и вторичные действия?Первичные действия приводят к завершению форме, например, нажав “ Save” или “ Send.” Вторичный действия обычно не приводят к form’ завершения с; они включают нажав “ Cancel.” Есть исключения, однако.Какие первичные и вторичные действия, когда вы видите “ Save, ” “ Сохранить и continue” и “ Publish” кнопки все подряд?Когда пользователи имеют несколько вариантов, выделив первичные actions и де-подчеркивая вторичные действия хорошо practice.

Это можно сделать двумя способами:

По давая первичные и вторичные действия разных цветов, например, дав первичные дейс� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Вебдизайн → 23.06.2009 by Newsbot

bot.kz — Новости IT