10 полезных методов нанесения веб-интерфейс

Все больше и больше приложений в эти дни переходят в Интернете.

Без платформы ограничений или требований к установке, программное обеспечение как услуга модель выглядит очень привлекательно.Веб-приложение дизайн интерфейса является, по своей сути, веб-дизайн, однако его внимание в основном на функции.Чтобы конкурировать с настольными приложениями, веб-приложения должны предложить простой, интуитивно понятный и отзывчивый пользовательский interfaces, которые позволяют своим пользователям добиться своей цели с меньшими усилиями и time.

В прошлом мы didn’ T крышку веб-приложений, как надо, и теперь it’ пора внимательнее взглянуть на некоторые полезные приемы и дизайнерские решения, которые делают веб-приложения более удобным и красивым.Данная статья представляет собой первую часть нашего обширного исследования о шаблонах проектирования и полезные дизайнерские решения в современных веб-приложениях.Ниже you’ найдете коллекцию 10 полезных дизайн интерфейса методы и наилучшие practices используется во многих успешных веб-applications.

Пожалуйста, не стесняйтесь предлагать новые идеи, подходы и кодирования решений в комментариях к этому посту.Во второй части нашего исследования будут опубликованы в ближайшее время. Следите за обновлениями через RSS и Twitter

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

1.Элементы интерфейса на demand

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

Когда вы нажимаете на ссылку в поисках Kontain’s окно поиска, аналогичный выпадающего меню.Так что, если вам нужно, чтобы сузить область поиска, вы можете использовать меню для выбора рода контента, который вы ищете.Подобрав эти варианты далеко упрощает поиск box.

Один способ сделать вещи проще, чтобы скрыться или скрыть расширенный functionality.Найти наиболее часто используемым функциям интерфейса и спрятать остальные.Вы можете сделать это с помощью всплывающих меню и элементы управления, которые очень распространены на программное обеспечение для рабочего стола.Например, если ваша панель поиска имеет расширенные фильтры, спрятал их в специальном выпадающем меню в конце.Если пользователям нужны эти фильтры, они могут позволить им с помощью всего нескольких щелчков мыши.Решив, что оставить, а что скрыть это не простой задачей, хотя и будет зависеть от того, насколько важны и как часто используемым каждого элемента управления is.

Когда вы нажимаете на ссылку в поисках CollabFinder Вы не принимаются на другую страницу.Вместо этого, в окне поиска, контролирует падение вниз, позволяющий начать поиск прямо away.

2.Специализированная controls

Это важно выбрать право управления интерфейсом для situation.Разные ситуации могут быть обработаны по-разному, и некоторые элементы управления лучше их прямому задачи, чем others.

Backpack имеет компактный календарную дату и время выбора для выбора напоминание date.

Например, вы можете выбрать дату, используя выпадающие списки за день, месяц и год.Раскрывающиеся не очень эффективны, однако, по сравнению с выбора календарь, где вы можете нажать непосредственно на день, когда вы хотите.Календарь сборщики также поможет вам увидеть, дней, недель и месяцев (и особенно будни и выходные) более легко и таким образом позволит вам сделать более информированные decision быстрее, чем можно было бы с простого выпадающего list.

MyBankTracker’s APY калькулятор особенности easy- to- контроля за использованием ползунок для быстрого пробуя различные projections.

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

3.Отключить нажатии buttons

Одна из проблем, веб-приложений встреч с формами представления процесса.С очень простой формы, если вы нажмете на кнопку “Отправить” дважды или более очень быстро, форма будет представлен два или более раз.Очевидно, что это проблематично, потому что это создаст дубликаты одного и того же item.Предотвращение дубликатов представлениях не очень трудно, и очень важно сделать это для большинства веб-apps.

Есть два уровня этой гарантии: client- side и server- side.Мы не будем проходить через серверный защитить здесь, потому что это будет меняться в зависимости от используемого языка программирования и фоновых архитектуры.Что вы должны сделать, это по существу положили в проверку, чтобы убедиться в стадии обработки, что все представляется не является дубликатом, и если он является блокирование it.

Yammer отключает кнопку “Обновить” в то время как ваше новое сообщение в настоящее время submitted.

Стороне клиента стадии гораздо проще.Все, что вам нужно сделать, это отключить кнопку “Отправить” в тот момент, это clicked.Самый простой способ сделать это, чтобы добавить кусочек JavaScript на кнопку “Отправить” вроде этого:

<input type="submit" value="Submit" onclick="this.disabled=true" />

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

4.Тени вокруг модального windows

Тени вокруг всплывающие меню и окна не только глаз конфеты.Они помогают меню или окна Стенд out от фона путем укрепления его размеры.Они также блокируют шум содержания под окном, затемняя области вокруг него с shadow.

Эта техника шляпу своими корнями в традиционные настольные приложения и позволяет пользователю сосредоточиться его / ее внимание на появившемся окне.Так как большинство модальных окон aren’ T так же легко отличить от основного содержания, как и в настольных приложениях, тени помочь им появиться ближе к читателю, потому что окно будет трехмерной и лежали выше остальных page.

Digg’s log- в окно имеет густую тень вокруг него, чтобы перекрыть шум страницы beneath.

Кдостичь такого эффекта, дизайнеры часто создают контейнер с прозрачными PNG-изображения в качестве фона и поместить содержимое внутри контейнера – с равноотстоящими обивка на всех сторонах коробки.Другим вариантом является использование фонового изображения с прозрачными границами и положение содержание окна в этом окне с помощью абсолютного позиционирования.Это именно то, что делает Digg — this есть образ, которые они используют (dialog.png).И это разметка и CSS-стилей, которые они используют:

(X) HTML:

	<div id="container">
		<div style="display: block; top: 236px; opacity: 1;" class="dialog">
			<div class="body">
        		<div class="content">
        			...
        		</div>
        	</div>
        </div>
      </div>

CSS:

.dialog {
    position: absolute;
    left: 50%;
    margin-left: -315px;
    width: 630px;
    z-index: 100001;

}
.dialog .body {
    background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
    padding: 40px 13px 10px 40px;
}

Кроме того, вы также можете использовать JavaScript на основе лайтбокс, или тени, используя CSS3-атрибуты we’ ве описано earlier, но вы должны знать, что Internet Explorer won’ T поддержке them.

Basecamp’s проект переключатель окно имеет большие мягкие тени, которая помогает стенде области меню out.

…

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

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