Головач Владислав. Три правила дизайна элегантных интерфейсов
Подождите немного. Документ загружается.
61
Из грязи в князи: три правила дизайна элегантных интерфейсов
Бла бла
бла! Бла
бла бла!
Бла бла!
Это вообще общая черта
всех сообщений – если
хотите быть услышаными
и воспринятыми
серьезно, передавайте
свое сообщение четко
и смело.
Мямлить – не нужно.
62
Из грязи в князи: три правила дизайна элегантных интерфейсов
Первое же сообщение,
которое интерфейс
передает своему
пользоватетелю, это
Я есть вот это.
Сайт знакомств передает
сообщение Это я, сайт
знакомств.
С: Бухгалтерия между
делом замечает, что
Это я, С: Бухгалтерия.
Пасьянс Косынка
восклицает Это я,
Пасьянс Косынка!
63
Из грязи в князи: три правила дизайна элегантных интерфейсов
Это сообщение
чрезвычайно важно,
во-первых, поскольку
оно первое, а во-
вторых, потому что
оно освобождает
пользователя самому
догадываться о том,
что это за штука такая
появилась на экране.
64
Из грязи в князи: три правила дизайна элегантных интерфейсов
Хоть пользователь
и инициировал
появление интерфейса
сам, он не уверен,
что открылось именно то,
что ему нужно.
Это все равно что
газетный лист,
покрытый заметками,
но совершенно
без заголовков – вся
информация на месте,
но читать неприятно.
65
Из грязи в князи: три правила дизайна элегантных интерфейсов
CATALYST
®
Control Center
Help
View
HotKeys
Profiles
Preferences
Basic
O
k
A
pply
Dis
card
De
faults
POWERPLAY™ Status
POWERPLAY™ Settings
Graphics Adapter:
Enable POWERPLAY™
When the power source is: My preferred setting is:
Plugged In:
High Battery:
Low Battery:
| | |
| | |
| | |
Optimal Performance
Optimal Performance
Optimal Performance
Low Battery settings apply when battery level is below
25
%
1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
Use POWERPLAY™ to adjust your graphics processor settings for higher
performance or longer battery life.
POWERPLAY™
Power Source:
Battery Level:
High Battery
100%
Preffered Setting:
Active Setting:
Disabled
Optimal Performance
Welcome
Information Center
Displays Manager
Display Options
Notebook Panel Properties
3D
Standard Settings
Anti-Aliasing
Anisotropic Filtering
CATALYST
®
A.I.
Mipmap Detail Level
All Settings
API Specific
Color
Video
POWERPLAY™
VPU Recover
POWERPLAY™
Graphics Settings
Так что же говорит этот
интерфейс?
POWERPLAY.™
Информативность
этого сообщения
не особо велика.
66
Из грязи в князи: три правила дизайна элегантных интерфейсов
Самый простой способ
сделать адекватное
первое сообщение –
снабдить интерфейс
заметным и визуально
значимым заголовком.
Посмотрим, как
с ним обстоят дела
у подопытного
интерфейса.
67
Из грязи в князи: три правила дизайна элегантных интерфейсов
Строка заголовка окна
реально не читается,
поскольку она есть у всех
интерфейсов и взгляд
ее уже рефлекторно
пропускает.
Кроме того, для
экономии места она
сделана маленькой,
а значит – визуально
малозначимой.
CATALYST
®
Control Center
Help
View
HotKeys
Profiles
Preferences
POWERPLAY™ Status
POWERPLAY™ Settings
Graphics Adapter:
1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
Use POWERPLAY™ to adjust your graphics processor settings for higher
performance or longer battery life.
POWERPLAY™
Power Source:
Battery Level:
High Battery
100%
Preffered Setting:
Active Setting:
Welcome
Information Center
Displays Manager
Display Options
Notebook Panel Properties
3D
Standard Settings
Anti-Aliasing
Anisotropic Filtering
CATALYST
®
A.I.
Mipmap Detail Level
All Settings
API Specific
Color
Video
POWERPLAY™
VPU Recover
Graphics Settings
68
Из грязи в князи: три правила дизайна элегантных интерфейсов
Название вкладки
(Graphic Settings), тоже
не может служить
нормальным заголовком.
Визуальная важность
этого объекта (т.е.
степень, с которой
он бросается в глаза)
совершенно мизерная.
Не говоря уж о том, что
использовать элементы
управления в качестве
оформительского
средства изначально
бессмысленно – они
изначально уродливы.
CATALYST
®
Control Center
Help
View
HotKeys
Profiles
Preferences
POWERPLAY™ Status
POWERPLAY™ Settings
Graphics Adapter:
1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
Use POWERPLAY™ to adjust your graphics processor settings for higher
performance or longer battery life.
POWERPLAY™
Power Source:
Battery Level:
High Battery
100%
Preffered Setting:
Active Setting:
Welcome
Information Center
Displays Manager
Display Options
Notebook Panel Properties
3D
Standard Settings
Anti-Aliasing
Anisotropic Filtering
CATALYST
®
A.I.
Mipmap Detail Level
All Settings
API Specific
Color
Video
POWERPLAY™
VPU Recover
Graphics Settings
69
Из грязи в князи: три правила дизайна элегантных интерфейсов
Чо за фигня?! Где перстень
на курсоре? Бедно, брателло!
Чо пацаны скажут? Давай
перерисовывай!
Элементы управления
проектируются
в расчете на скорость
взаимодействия
с ними и на визуальную
разборчивость. Только
потом стараются навести
визуальный глянец.
Если бы это не было так,
все указатели, к примеру,
выглядели бы, как
фигуристые девушки
в купальниках.
70
Из грязи в князи: три правила дизайна элегантных интерфейсов
А что же мы видим
здесь? Вкладка
используется фактически
как заголовок.
Это не то что
бы некрасиво...
...Но красивым это
тоже не назовешь.
Справедливости ради должен
заметить, что, возможно, это
решение вызвано тем, что
среда разработки просто
не позволяла нарисовать
границы вкладки без хотя бы
одной вкладки.
CATALYST
®
Control Center
Help
View
HotKeys
Profiles
Preferences
Basic
O
k
A
pply
Dis
card
De
faults
POWERPLAY™ Status
POWERPLAY™ Settings
Graphics Adapter:
Enable POWERPLAY™
When the power source is: My preferred setting is:
Plugged In:
High Battery:
Low Battery:
| | |
| | |
| | |
Optimal Performance
Optimal Performance
Optimal Performance
Low Battery settings apply when battery level is below
25
%
1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ]
Use POWERPLAY™ to adjust your graphics processor settings for higher
performance or longer battery life.
POWERPLAY™
Power Source:
Battery Level:
High Battery
100%
Preffered Setting:
Active Setting:
Disabled
Optimal Performance
Welcome
Information Center
Displays Manager
Display Options
Notebook Panel Properties
3D
Standard Settings
Anti-Aliasing
Anisotropic Filtering
CATALYST
®
A.I.
Mipmap Detail Level
All Settings
API Specific
Color
Video
POWERPLAY™
VPU Recover
POWERPLAY™
Graphics Settings