Monday, May 07, 2007

Четыре правила UI дизайна

Как построить хороший дизайн? Почему один дизайн хорош, а другой плох? С чего начать?
Эти и масса других вопросов возникает в голове молодых дизайнеров на начальном этапе. Самое смешное, что ответить на них в двух словах невозможно.


Для начала рассмотрим четыре золотых правила дизайна (к слову говоря, правила могут чуть-чуть менять свою суть, если речь идет о специализированной ветке дизайна, например, об UI дизайне).
Сравните:

    Приминительно к дизайну в целом:
  • 1. Proximity
  • 2. Repetition
  • 3. Arranging
  • 4. Contrast
    Приминительно к UI дизайну:
  • 1. Organizing and Grouping
  • 2. Consistency
  • 3. Alignment
  • 4. Whitespace
Остановимся подробнее на правилах UI дизайна. И сразу начнем с картинок. Этот немного упрощенный пример, который был продемонстрирован на Конференции по разработке ПО в EPAM Systems, хорошо иллюстрирует все правила. Исходный вайфрэйм:
process-1.gif 
I. Элементы формы организованы. Под организацией понимается логическое структурирование элементов на экране. Посмотрите на форму и подумайте, на какие части или смысловые группы можно ее разбить.
process-2.gif 
II. Элементы формы сгруппированы. Группировка, вдобавок к организации, хорошо работает в формах, логически объединяя связанные элементы.
process-3.gif 
III. Элементы формы выровнены. Выравнивание — очень мощный прием. Невозможно создать удобную форму, если пропущен данный этап.
process-4.gif 
IV. Элементы формы приведены к одному стилю. Приведение к общему знаменателю позволяет решить ряд задач, таких, например, как узнаваемость и типизация блоков. Согласитесь, что при прочих равных поля формы и их названия должны выглядеть одинаково.
process-5.gif 
V. В элементы формы добавлено пространство. Добавление пространства позволяет рассредоточить информацию на экране и сосредоточится не на форме в целом, а на отдельных ее элементах. С приходом моды на Web 2.0 методика особенно популярна :)
process-6.gif Итак, применив все правила на практике, имеем неплохой вайфрэйм, готовый к употреблению :)


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , ,

0 Comments:

Post a Comment

<< Home