Проектирование лучших графических интерфейсов?

Я уже некоторое время использую С#, но на самом деле не уверен в своих навыках проектирования пользовательского интерфейса. В то время, когда я их проектирую, я наслаждаюсь дизайном, но позже я оглядываюсь назад и вижу ужасную работу. Пример приходит в голову из моего проекта на работе, где мне пришлось использовать 127 кнопок для представления 127 компьютеров в нашей лаборатории.:/

Мне было интересно, может ли кто-нибудь направить меня на сайт или книгу, которые будут преподавать хороший дизайн пользовательского интерфейса?

Спасибо!

Ответ 1

Я считаю, что наблюдение и инстинкты очень помогают.

Играйте с приложениями и углубляйтесь в функциональность, которую они реализовали. Особенно посмотрите на Apple, так как они вращаются вокруг эстетики. Что сработало? А что нет? Почему это сработало? Начните задавать себе вопросы, когда вы возитесь с веб-сайтами и программным обеспечением.

Тогда я бы поиграл и разработал некоторые концепции. Покажите эти понятия друзьям, как техническим, так и нет. Задайте им такие вопросы, как "Добавить новый напиток в список" или "Найти x для меня". Посмотрите, как они реагируют и отличаются друг от друга. Кто-нибудь, у кого есть технические справочные кнопки, быстрее, чем нетехники? Следует ли объединить элементы вместе?

Этот материал должен быть забавным. В конце концов, это похоже на создание полного набора Lego и показ его вашему другу. Он/она может видеть, прикасаться и играть с вашим творением.

Ответ 2

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

Ответ 3

Дизайн повседневных вещей Дональд А. Норман

Гуманный интерфейс Джеф Раскин

Ответ 4

Самое главное сосредоточиться на первом - это поток работы вещей. Попытайтесь найти цели, которые есть у пользователя, и создать модель, максимально эффективную для достижения этой цели. Также читайте много об этой одной из лучших книг, чтобы начать с Thea Заключенные управляют убежищем

Я бы предложил множество эскизов. Удостоверьтесь, что вы держите его упрощенным, чтобы сосредоточиться на том, что и где вещи размещены, и меньше на том, как они выглядят. Инструмент типа balsamiq отлично подходит для быстрых макетов UI. Также пройдите через шаблоны пользовательского интерфейса здесь, чтобы придумать концепции, которые работают, книга Tidwells "Проектирование интерфейсов" - это замечательно, а также Infragistics new сайт шаблонов - отличные ресурсы

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

И не всегда следуйте рекомендациям по пользовательскому интерфейсу, это нормально, если вы не ошиблись. И последнее, вы получите только один свободный несвязанный 3D-эффект в интерфейсе:)

Ответ 5

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

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

Ответ 6

Я прочитал книгу Спольского "Интерфейс пользовательского интерфейса для программистов", а также классику "Руководства по интерфейсу Windows для разработки программного обеспечения и пользовательский интерфейс Windows". Последние два являются хорошими справочниками. Книга Spolsky - это удивительно интересное чтение и учит, как думать о дизайне пользовательского интерфейса.

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

Что касается механизма , убедитесь, что ваш пользовательский интерфейс работает так, как люди ожидают его работы. Например, если у вас есть дерево, убедитесь, что стрелки клавиатуры работают для навигации. Если ваша форма имеет полосу прокрутки, убедитесь, что она отвечает на колесо прокрутки мыши. По большому счету, элементы управления .NET обеспечивают стандартное поведение по умолчанию, но вам, возможно, придется настроить некоторые свойства времени разработки для полного достижения этого. У меня была библиотека управления, над которой я работал несколько лет назад, где был стандартный текстовый ящик. Однако я обнаружил, что текст не был автоматически подсвечен при вводе в элемент управления. Я добавил это поведение, потому что он, как я (и мои пользователи), ожидал, что элемент управления будет работать. Цитируя Spolsky, "последовательность приводит к простоте использования, что, в свою очередь, вызывает хорошие чувства..." Другими словами, если механизмы вашего пользовательского интерфейса не соответствуют ожиданиям ваших пользователей, ваш пользовательский интерфейс будет источником разочарования для вашего пользователей.

Что касается эстетики, я обнаружил, что сосредоточен на таких вещах, как шрифты, значки, расстояние между элементами и выравнивание элементов управления, выборочное использование цвета (я люблю использование градиентов) и т.д. может пойти LONG способ добавить это чувство пользы к вашему пользовательскому интерфейсу. Я, как известно, использовал растровые снимки экрана в Paint для измерения заполнения между элементами управления, чтобы имитировать дополнение в приложениях Microsoft. Когда я разглашаю эту информацию сотрудникам, большинство из них смотрит на меня так, как будто я потерял рассудок. Но я не могу сказать вам, сколько успехов пользовательского интерфейса я использовал, просто сосредоточившись на том, что все остальные считают незначительными. Я делаю это так, чтобы просто использовать все исследования, которые Microsoft когда-либо делала, делая их приложения визуально привлекательными.

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

Ответ 7

Потратьте некоторое время и посмотрите на другие программные продукты. Каждый год такие компании, как Google и Microsoft, сбрасывают миллионы долларов в юзабилити-тестирование. Возьмите то, что они узнали о взаимодействии с пользователем, и примените его к своим собственным продуктам/проектам.

Infragistics также просто создала хорошую ссылку для шаблонов проектирования пользовательского интерфейса, ее можно найти в http://quince.infragistics.com/.

Ответ 8

Вы можете обратиться к руководству пользователя UI или рекомендациям Mac UI.

Руководства для Mac UI доступны на http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html

Руководства пользователя UI для Windows доступны на http://msdn.microsoft.com/en-us/library/aa511258.aspx

EDIT: Всем нравится пользовательский интерфейс Google, вот ссылка .

Ответ 9

Думаю, лучшая идея - практиковать. Мне нравится сначала создавать окна на бумаге (пустая или графовая бумага). Используйте линейку и убедитесь, что все выровнено и чистое.

Пример приходит в голову из моего проекта на работе, где мне пришлось использовать 127 кнопок для представления 127 компьютеров в нашей лаборатории.:/

Задавайте себе вопросы здесь, что мне не понравилось? как это может быть улучшено? Мне нужно выпадающее меню или окно списка для компьютеров?

Также знайте свой виджеты GUI.

Ответ 10

В ответах уже есть несколько замечательных книг о том, как конкретно разрабатывать интерфейсы. Я хотел бы помочь с некоторыми предложениями, которые помогут вам улучшить свой нос для дизайна. Некоторые из них могут быть дешево доступны вторые руки или что-то, что вы можете брать на месте (я всегда готов предоставить книги людям в Перте, Западная Австралия):

Билл Бакстон Набросок пользовательских впечатлений - купите его, прочитайте рассказы и начните практиковать эскизы.
Натаниэль Боренштейн (из печати) Программирование, как будто люди заняты - превосходная маленькая книга анекдотов
Jeff Johnson GUI Bloopers, который поможет вам с большим количеством прагматических примеров дизайна пошло не так, как в дизайне рабочего стола, так и в веб-приложении.