Головач Владислав. Три правила дизайна элегантных интерфейсов
Подождите немного. Документ загружается.
41
Из грязи в князи: три правила дизайна элегантных интерфейсов
41
Из грязи в князи: три правила дизайна элегантных интерфейсов
Особо крупная сетка
Пропорции × , и × ,
(желтые) тоже не нужно
трогать (дальше покажу
почему).
× (голубая) тоже
трогать не нужно
(уже хорошо получилось).
1 × 3,4
1 × 3,4
1 × 3,4
1 × 3,4
1 × 6
1 × 1,6
1,8 × 1
1 × 1,6
1 × 3,4
42
Из грязи в князи: три правила дизайна элегантных интерфейсов
42
Из грязи в князи: три правила дизайна элегантных интерфейсов
Особо крупная сетка
Оставшиеся пропорции
можно и нужно улучшать
(кстати, пропорция самой
вкладки × ,).
, × должно стать
× , а × , должно
превратиться в × ,
или × .
1 × 1,7
1,8 × 1
43
Из грязи в князи: три правила дизайна элегантных интерфейсов
43
Из грязи в князи: три правила дизайна элегантных интерфейсов
Особо крупная сетка
Вот так.
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
44
Из грязи в князи: три правила дизайна элегантных интерфейсов
44
Из грязи в князи: три правила дизайна элегантных интерфейсов
Особо крупная сетка
На этом кадре оригинал.
Попереключайтесь
между этим и
предыдущим кадром.
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
45
Из грязи в князи: три правила дизайна элегантных интерфейсов
45
Из грязи в князи: три правила дизайна элегантных интерфейсов
Особо крупная сетка
А вот снова
переделанная версия.
Проблема с сеткой
в том, что оптимизация
пропорций –
комбинаторная задача
непредсказуемой
продолжительности.
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
46
Из грязи в князи: три правила дизайна элегантных интерфейсов
46
Из грязи в князи: три правила дизайна элегантных интерфейсов
Особо крупная сетка
Я привел внутренности
окна к внятным
пропорциям, но теперь
то же самое я должен
сделать с пропорцией
самого окна.
Но ведь при этом
изменятся и пропорции
содержимого!
Это что же, по второму
разу оптимизировать?
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
47
Из грязи в князи: три правила дизайна элегантных интерфейсов
47
Из грязи в князи: три правила дизайна элегантных интерфейсов
Особо крупная сетка
Так вот, мастерство здесь,
с моей точки зрения,
состоит не только в
том, чтобы сразу видеть,
что требует оптимизации,
но и в том, чтобы видеть,
что оптимизировать
нерационально.
Да, окно будет лучше
выглядеть квадратным,
а не почти квадратным,
как сейчас, но – черт
с ним.
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
48
Из грязи в князи: три правила дизайна элегантных интерфейсов
48
Из грязи в князи: три правила дизайна элегантных интерфейсов
Гармоничные
пропорции
Не только целые
пропорции ( × и т.п.)
выглядят гармонично.
Существует еще много
других гармоничных
пропорций, не
являющихся целыми.
Самыми важными,
вероятно, стоит
считать Золотое
сечение, значения π, e
и квадратный корень
из двух.
49
Из грязи в князи: три правила дизайна элегантных интерфейсов
49
Из грязи в князи: три правила дизайна элегантных интерфейсов
Гармоничные
пропорции
Золотым сечением
называется деление
отрезка на две части,
при которой сумма
двух частей относится
к большей части так
же, как большая часть
относится к меньшей.
a b
(a + b) / a = a / b
50
Из грязи в князи: три правила дизайна элегантных интерфейсов
50
Из грязи в князи: три правила дизайна элегантных интерфейсов
Гармоничные
пропорции
В математике золотое
сечение обозначают
символом φ.
Выраженная численно,
φ составляет ~ × ,.
Геометрическое постро-
ение φ очень просто –
из центра стороны
квадрата строят круг,
стороной касающийся
противоположного угла
квадрата.
φ