Beauty

1
Из грязи в князи: три правила дизайна элегантных интерфейсов

Из грязи
в князи:
три правила
дизайна
элегантных
интерфейсов

Владислав Головач
www.usethics.ru
Последнее обновление  июля 

2

Этот скриншот
(драйвер видеокарт ATI),
по-видимому, является
красивым.
Во всяком случае,
если бы он не был
красив, заказчик бы
его не принял.

Несомненно, однако,
что этот интерфейс
не элегантен.

3

Т.е. слезу гонит.

4

Кошмар, короче.

5

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

6

Я не буду специально
изменять интерфейс;
его эргономические
качества меня сейчас
не волнуют.

7

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

8

Я не ставил себе целью
CATALYST® Control Center

нарисовать  к одному.
View HotKeys Profiles Preferences Help

Graphics Settings

Например, я просто
POWERPLAY™
Welcome
Information Center
воспользовался
Displays Manager
Graphics Adapter:
Display Options 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
нашей библиотекой
Notebook Panel Properties
3D POWERPLAY™ Status
интерфейсных элементов
Standard Settings
Power Source: High Battery Preffered Setting: Disabled
Anti-Aliasing

для Adobe InDesign
Anisotropic Filtering Battery Level: 100% Active Setting: Optimal Performance
CATALYST® A.I.

(а она специально
Mipmap Detail Level POWERPLAY™ Settings
All Settings Use POWERPLAY™ to adjust your graphics processor settings for higher

сделана непохожей
API Specific performance or longer battery life.
Color
Enable POWERPLAY™
внешне на интерфейсы
Video
POWERPLAY™

Windows).
VPU Recover
When the power source is: My preferred setting is:
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |

Low Battery settings apply when battery level is below 25 %

Basic Ok Apply Discard Defaults

9

В то же время я сохранил

все пропорции исходного

Graphics Settings
интерфейса.
POWERPLAY™
Welcome
Information Center
Displays Manager
Graphics Adapter:
Standard Settings
Anti-Aliasing
CATALYST® A.I.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |



10

По-моему, получилось

довольно похоже.

Graphics Settings

POWERPLAY™
Welcome
Information Center
Displays Manager
Graphics Adapter:
Standard Settings
Anti-Aliasing
CATALYST® A.I.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |


А теперь, собственно,
практика улучшения.

11

Предуведомление:
На кадрах с желто-серой
полоской сверху (таких
как этот) идет речь
о правилах, которые надо
исполнять безусловно.
На кадрах с серой по-
лоской я буду расска-
зывать о правилах,
выполнять которые
не получается, если
делать это формально –
просто потому, что на
эту работу не хватает
времени.

12

Правило 


Все размеры и все
Graphics Settings

пропорции должны
POWERPLAY™
Welcome
Information Center
быть взаимосвязаны.
Displays Manager
Graphics Adapter:
Standard Settings
Anti-Aliasing
CATALYST® A.I.
Color
Enable POWERPLAY™
Video
POWERPLAY™

На следующих
VPU Recover

кадрах я выделю
Optimal Performance
Plugged In:
| | |

фрагменты этого
Optimal Performance
High Battery:
| | |

окна с пропорциями
Optimal Performance
Low Battery:
| | |

и размерами,
выбивающимися
из общего ряда.

13

Отступ от заголовка

вкладки (красный)

Graphics Settings
отличается от отступа
POWERPLAY™
Welcome
рамки группировки
Information Center
Displays Manager

(и справа тоже, кстати).
Graphics Adapter:
Standard Settings
Anti-Aliasing
CATALYST® A.I.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |



14

Отступ между кнопками

и границами вкладки/

Graphics Settings
окна разный сверху
POWERPLAY™
Welcome
и снизу.
Information Center
Displays Manager
Graphics Adapter:
Standard Settings
Anti-Aliasing
CATALYST® A.I.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |



15

Отступ фрейма

с вкладками отличается

Graphics Settings
от фрейма с логотипом
POWERPLAY™
Welcome
(здесь красный
Information Center
Displays Manager

прямоугольник).
Graphics Adapter:
Standard Settings
Anti-Aliasing
CATALYST® A.I.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |



16

Верхний и левый

отступы внутри

Graphics Settings
рамок группировки
POWERPLAY™
Welcome
не выдержаны.
Information Center
Displays Manager
Graphics Adapter:
Имеем  разных отступа.
Standard Settings
Anti-Aliasing
CATALYST® A.I.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |



17

Полоска отступает

от левого края рамки

Graphics Settings
сильнее, чем текст.
POWERPLAY™
Welcome
Information Center
Displays Manager
Graphics Adapter:
Standard Settings
Anti-Aliasing
CATALYST® A.I.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |



18

Это не ошибки

интерфейса.

Graphics Settings

Это брак.
POWERPLAY™
Welcome
Information Center
Displays Manager
Graphics Adapter:
Standard Settings
Anti-Aliasing
CATALYST® A.I.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |



19

Брак, потому

что поштучно

Graphics Settings
исправлять такие
POWERPLAY™
Welcome
ошибки интерфейса
Information Center
Displays Manager

бессмысленно.
Graphics Adapter:
Нужно изъять саму
Standard Settings
Anti-Aliasing

причину появления таких
CATALYST® A.I.

мелочей, чтобы они

стали вовсе невозможны.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |



20

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

21

Как будет выглядеть
это диалоговое окно,
если перерисовать его
по сетке?

22

А вот как.

HotKeys Profiles Preferences
View Help

Graphics Settings

POWERPLAY™
Welcome
Information Center
Displays Manager
Graphics Adapter:
Standard Settings
Anti-Aliasing
Anisotropic Filtering Active Setting: Optimal Performance
Battery Level: 100%
CATALYST® A.I.
All Settings
Use POWERPLAY™ to adjust your graphics processor settings for higher
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |

25
Low Battery settings apply when battery level is below %

Apply Discard Defaults
Basic Ok

23

Здесь все статические

размеры и интервалы
View Help

Graphics Settings
привязаны к ячейкам
POWERPLAY™
Welcome
одной сетки.
Information Center
Displays Manager
Graphics Adapter:
Standard Settings
Anti-Aliasing
Battery Level: 100%
CATALYST® A.I.
All Settings
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |

25

Basic Ok

24



На этом кадре
Graphics Settings

под увеличением
POWERPLAY™
Welcome
показаны некоторые
Information Center
Displays Manager
новые привязки.
Display Options Graphics Adapter: 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
Standard Settings
Anti-Aliasing
Battery Level: 100%
CATALYST® A.I.
All Settings
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |

25


25

Даже терминальные

кнопки (снизу) по ширине
View Help

Graphics Settings
и высоте выровнены
POWERPLAY™
Welcome
по сетке.
Information Center
Displays Manager
Display Options
Ну и название
1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
Graphics Adapter:
3D
POWERPLAY™
POWERPLAY™ Status
Standard Settings
Anti-Aliasing
в заголовке вкладки.
Battery Level: 100%
CATALYST® A.I.
All Settings
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |

25

Basic Ok

26

Еще раз покажу, как было

раньше, чтобы легче

Graphics Settings
было заметить разницу
POWERPLAY™
Welcome
в картинке.
Information Center
Displays Manager
Graphics Adapter:
Рекомендую
попереключаться между
Standard Settings
Anti-Aliasing

этой и предыдущей
CATALYST® A.I.

страницей.
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |



27

Но этого мало. CATALYST® Control Center

Интерфейс стал HotKeys Profiles Preferences
View Help

Graphics Settings
чистеньким, но не более.
POWERPLAY™
Welcome
Information Center
Сделать его сильно Displays Manager
Display Options
лучше сетка сама 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
Graphics Adapter:
3D
по себе не сможет. POWERPLAY™ Status
Standard Settings
Anti-Aliasing
Battery Level: 100%
CATALYST® A.I.
All Settings
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Чтобы выжать из него When the power source is: My preferred setting is:
Optimal Performance
Plugged In:

максимум, понадобятся: | | |

Optimal Performance
High Battery:
| | |

• Особо крупная сетка Optimal Performance
Low Battery:
| | |

25

• Гармоничные
пропорции. Apply Discard Defaults
Basic Ok

28

Особо крупная сетка 
Назначение сетки – × × ×
не только выравнивать
элементы.
Сетка (теоретически)
помогает делать объекты
×
пропорциональными,
т.е. обладающими
четкими и заметными
глазу пропорциями.

Например, два к трем.
Или один к одному
(квадрат).

29

Особо крупная сетка 
Как правило,
если пропорции
выдерживаются всюду,
картинка выглядит лучше, ×
чем когда пропорции не
выдерживаются.
Т.е. прямоугольник
с пропорцией  × 
выглядит не сильно
лучше прямоугольника  × ,
пропорции  × , (хотя
всё-таки немного лучше)...

30

Особо крупная сетка 
...но объектов-то в
интерфейсах много!
И если все они
обладают выдержаными
пропорциями, картинка
сильно выигрывает.
Например, набор
прямоугольников с
пропорциями x, х, х
и х (сверху) выглядит
лучше внешне похожего
набора произвольных
пропорций (снизу).

31

Особо крупная сетка 
Причем количество
заметных глазу объектов
гораздо больше, чем
количество объектов
функциональных –
пустое пространство
между прямоугольника-
ми тоже воспринимается
взглядом как объект и
тоже требует пропорций.

32

Особо крупная сетка 
Например, здесь
прямоугольники
одинаковы, но
изначальное расстояние
между ними, равное 1⁄2,
не выдерживается
в нижнем варианте.

33

Особо крупная сетка 
А если не выдерживаются
и пропорции объектов
и пропорции интервалов,
вообще получается ужас.

34

Особо крупная сетка 
Есть два исключения
из этого правила. Глазу
труднее заметить
непропорциональность:
• Oчень широких и очень
узких объектов. Так,  × 
фактически выглядит
неразличимо лучше,
чем, к примеру,  × ,.
• Крупных объектов. Так,
красная рамка на этом
слайде не является
квадратом, но внешне
это не очень заметно.

35

Особо крупная сетка 
Вернемся к проблеме
сетки с мелкими
ячейками.
Такая сетка не позволяет
автоматически строить
такого рода целые , × 
пропорции.
Просто потому, ×
что при мелкой сетке
(как была в примере)
вполне возможен объект
(или пустота) высотой
 и шириной  ячеек
(т.е. с пропорциями , × ).

36

Особо крупная сетка 
Если же у сетки будут
крупные ячейки
(например, по высоте
вдвое большие высоты
текстового поля),
дробные пропорции
не будут получаться
вовсе.
Все значения будут
целыми, во всяком
случае для взгляда.

37

Особо крупная сетка 
Проблема в том,
что более-менее
сложный интерфейс
нельзя рисовать по сетке
с крупными ячейками.
Не получается.
Времени не хватает.

38

Особо крупная сетка  CATALYST® Control Center

View Help

Мастерство дизайнера Graphics Settings

здесь видно просто –
POWERPLAY™
Welcome
Information Center
он сразу видит Displays Manager
Display Options
объекты не вполне 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
Graphics Adapter:
3D
гармоничных пропорций POWERPLAY™ Status
Standard Settings
Anti-Aliasing
и, соответственно, Anisotropic Filtering Active Setting: Optimal Performance
Battery Level: 100%
CATALYST® A.I.
способен быстро править Mipmap Detail Level POWERPLAY™ Settings
All Settings
их на ходу, уже не глядя Use POWERPLAY™ to adjust your graphics processor settings for higher
Color

на сетку. Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |

25

Basic Ok

39

Особо крупная сетка 
1 × 15,7

На этом кадре показаны
все обладающие 1 × 9,2
заметными пропорциями
объекты этого окна
и приведены эти
пропорции. 1×6
1,8 × 1

Само окно имеет
пропорцию  × ,.

1 × 1,6

1 × 1,6

1 × 3,4 1 × 3,4 1 × 3,4 1 × 3,4 1 × 3,4

40

Особо крупная сетка 
1 × 15,7

Пропорции сверх-
широких элементов 1 × 9,2
(желтые) незначимы,
так как их пропорции
глаз все равно не
воспринимает. 1×6
1,8 × 1

1 × 1,6

1 × 1,6

1 × 3,4 1 × 3,4 1 × 3,4 1 × 3,4 1 × 3,4

41

Особо крупная сетка 
Пропорции  × , и  × ,
(желтые) тоже не нужно
трогать (дальше покажу
почему).
 ×  (голубая) тоже 1×6

трогать не нужно 1,8 × 1

(уже хорошо получилось).

1 × 1,6

1 × 1,6

1 × 3,4 1 × 3,4 1 × 3,4 1 × 3,4 1 × 3,4

42

Особо крупная сетка 
Оставшиеся пропорции
можно и нужно улучшать
(кстати, пропорция самой
вкладки  × ,).
, ×  должно стать
 × , а  × , должно 1,8 × 1

превратиться в  × , 1 × 1,7
или  × .

43

Особо крупная сетка  CATALYST® Control Center

View HotKeys Profiles Help
Preferences

Вот так. Graphics Settings

POWERPLAY™
Welcome
Information Center
Displays Manager
Display Options Graphics Adapter: 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
Standard Settings
Anti-Aliasing
Battery Level: 100%
CATALYST® A.I.
All Settings
Color
Enable POWERPLAY™
Video
POWERPLAY™
VPU Recover
Optimal Performance
Plugged In:
| | |

Optimal Performance
High Battery:
| | |

Optimal Performance
Low Battery:
| | |

25


Beauty

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (7)

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie Beauty

Ähnlich wie Beauty (20)

Mehr von Alexander Sergeev

Mehr von Alexander Sergeev (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Beauty