• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Beauty
 

Beauty

on

  • 2,092 views

 

Statistics

Views

Total Views
2,092
Views on SlideShare
1,577
Embed Views
515

Actions

Likes
1
Downloads
43
Comments
0

9 Embeds 515

http://guicci.ru 482
http://lj-toys.com 12
http://www.linkedin.com 9
http://www.netvibes.com 3
http://feeds.feedburner.com 3
http://static.slideshare.net 3
http://romver.ru 1
http://s3.amazonaws.com 1
http://www.romver.ru 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Beauty Beauty Presentation Transcript

    • 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 Из грязи в князи: три правила дизайна элегантных интерфейсов В то же время я сохранил 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 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™ 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
    • 10 Из грязи в князи: три правила дизайна элегантных интерфейсов По-моему, получилось 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 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™ 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 практика улучшения.
    • 11 Из грязи в князи: три правила дизайна элегантных интерфейсов Предуведомление: На кадрах с желто-серой полоской сверху (таких как этот) идет речь о правилах, которые надо исполнять безусловно. На кадрах с серой по- лоской я буду расска- зывать о правилах, выполнять которые не получается, если делать это формально – просто потому, что на эту работу не хватает времени.
    • 12 Из грязи в князи: три правила дизайна элегантных интерфейсов Правило  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 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™ На следующих 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 из общего ряда.
    • 13 Из грязи в князи: три правила дизайна элегантных интерфейсов Отступ от заголовка 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 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™ 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
    • 14 Из грязи в князи: три правила дизайна элегантных интерфейсов Отступ между кнопками 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 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™ 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
    • 15 Из грязи в князи: три правила дизайна элегантных интерфейсов Отступ фрейма 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 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™ 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
    • 16 Из грязи в князи: три правила дизайна элегантных интерфейсов Верхний и левый 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 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™ 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
    • 17 Из грязи в князи: три правила дизайна элегантных интерфейсов Полоска отступает 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 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™ 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
    • 18 Из грязи в князи: три правила дизайна элегантных интерфейсов Это не ошибки 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 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™ 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
    • 19 Из грязи в князи: три правила дизайна элегантных интерфейсов Брак, потому 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 причину появления таких 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™ 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
    • 20 Из грязи в князи: три правила дизайна элегантных интерфейсов Нужна сетка, по которой будут выстроены все элементы. Если у нас есть сетка и если при рисовании интерфейса мы привязываем все элементы к ней, такого рода ошибки сами исчезнут начисто.
    • 21 Из грязи в князи: три правила дизайна элегантных интерфейсов Как будет выглядеть это диалоговое окно, если перерисовать его по сетке?
    • 22 Из грязи в князи: три правила дизайна элегантных интерфейсов А вот как. 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: Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 23 Из грязи в князи: три правила дизайна элегантных интерфейсов Здесь все статические 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: Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 24 Из грязи в князи: три правила дизайна элегантных интерфейсов CATALYST® Control Center View HotKeys Profiles Preferences Help На этом кадре Graphics Settings под увеличением POWERPLAY™ Welcome показаны некоторые Information Center Displays Manager новые привязки. Display Options Graphics Adapter: 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ] Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Basic Ok Apply Discard Defaults
    • 25 Из грязи в князи: три правила дизайна элегантных интерфейсов Даже терминальные 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: Notebook Panel Properties 3D POWERPLAY™ POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 26 Из грязи в князи: три правила дизайна элегантных интерфейсов Еще раз покажу, как было 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 этой и предыдущей 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™ 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
    • 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: Notebook Panel Properties 3D по себе не сможет. POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % • Гармоничные пропорции. Apply Discard Defaults Basic Ok
    • 28 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Назначение сетки – × × × не только выравнивать элементы. Сетка (теоретически) помогает делать объекты × пропорциональными, т.е. обладающими четкими и заметными глазу пропорциями. Например, два к трем. Или один к одному (квадрат).
    • 29 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Как правило, если пропорции выдерживаются всюду, картинка выглядит лучше, × чем когда пропорции не выдерживаются. Т.е. прямоугольник с пропорцией  ×  выглядит не сильно лучше прямоугольника  × , пропорции  × , (хотя всё-таки немного лучше)...
    • 30 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  ...но объектов-то в интерфейсах много! И если все они обладают выдержаными пропорциями, картинка сильно выигрывает. Например, набор прямоугольников с пропорциями x, х, х и х (сверху) выглядит лучше внешне похожего набора произвольных пропорций (снизу).
    • 31 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Причем количество заметных глазу объектов гораздо больше, чем количество объектов функциональных – пустое пространство между прямоугольника- ми тоже воспринимается взглядом как объект и тоже требует пропорций.
    • 32 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Например, здесь прямоугольники одинаковы, но изначальное расстояние между ними, равное 1⁄2, не выдерживается в нижнем варианте.
    • 33 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  А если не выдерживаются и пропорции объектов и пропорции интервалов, вообще получается ужас.
    • 34 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Есть два исключения из этого правила. Глазу труднее заметить непропорциональность: • Oчень широких и очень узких объектов. Так,  ×  фактически выглядит неразличимо лучше, чем, к примеру,  × ,. • Крупных объектов. Так, красная рамка на этом слайде не является квадратом, но внешне это не очень заметно.
    • 35 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Вернемся к проблеме сетки с мелкими ячейками. Такая сетка не позволяет автоматически строить такого рода целые , ×  пропорции. Просто потому, × что при мелкой сетке (как была в примере) вполне возможен объект (или пустота) высотой  и шириной  ячеек (т.е. с пропорциями , × ).
    • 36 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Если же у сетки будут крупные ячейки (например, по высоте вдвое большие высоты текстового поля), дробные пропорции не будут получаться вовсе. Все значения будут целыми, во всяком случае для взгляда.
    • 37 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Проблема в том, что более-менее сложный интерфейс нельзя рисовать по сетке с крупными ячейками. Не получается. Времени не хватает.
    • 38 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  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: Notebook Panel Properties 3D гармоничных пропорций POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults 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 ] Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Basic Ok Apply Discard Defaults
    • 44 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  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: Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 45 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  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 ] Notebook Panel Properties в том, что оптимизация 3D POWERPLAY™ Status Standard Settings пропорций – Power Source: High Battery Preffered Setting: Disabled 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 API Specific продолжительности. performance or longer battery life. 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 Low Battery settings apply when battery level is below % Basic Ok Apply Discard Defaults
    • 46 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  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 ] Notebook Panel Properties 3D сделать с пропорцией POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific изменятся и пропорции performance or longer battery life. 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 Low Battery settings apply when battery level is below % Basic Ok Apply Discard Defaults
    • 47 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  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 ] Notebook Panel Properties 3D что требует оптимизации, POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Basic Ok Apply Discard Defaults
    • 48 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции  Не только целые пропорции ( ×  и т.п.) выглядят гармонично. Существует еще много других гармоничных пропорций, не являющихся целыми. Самыми важными, вероятно, стоит считать Золотое сечение, значения π, e и квадратный корень из двух.
    • 49 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции  Золотым сечением называется деление отрезка на две части, при которой сумма двух частей относится к большей части так же, как большая часть относится к меньшей. a b (a + b) / a = a / b
    • 50 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции  В математике золотое сечение обозначают символом φ. Выраженная численно, φ составляет ~  × ,. φ Геометрическое постро- ение φ очень просто – из центра стороны квадрата строят круг, стороной касающийся противоположного угла квадрата. 
    • 51 Из грязи в князи: три правила дизайна элегантных интерфейсов  Гармоничные пропорции  Другое удивительное число – π (пи), т.е. длина окружности, чей диаметр равен единице. Выраженная численно, π составляет ~  × ,.
    • 52 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции  Затем идет основа натуральных логарифмов е, составляющая пропорцию ~  × ,.
    • 53 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции  Наконец, крайне важный для древних землемеров квадратный корень из двух, т.е. длина диагонали квадрата  .  со стороной, равной единице (~ ,). Кстати, древние вавилоняне пытались посчитать его как  минимум   лет назад, и их расчеты даже сохранились.
    • 54 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции   × , Все эти числа важны для нас вот почему: природа, зараза такая, экономит  × , константы, так что эти пропорции встречаются в структурах огромного множества природных  × , объектов. Например, цветов, кристаллов и даже  × , животных.
    • 55 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции   × , Мы, люди, также часть природы, поэтому пропорции, основанные  × , на этих константах, кажутся приятными всем нам, независимо от расы, пола и культуры.  × ,  × ,
    • 56 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции  Так, Парфенон очень красив несмотря на то, что мы не древние и не греки (т.е. бессмысленно думать, что древние греки строили в рассчете на наши вкусы). Красив частично потому, что его фасад (похоже) сознательно строили на основе золотого сечения.
    • 57 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции   × , Так что сетка сеткой, но настоящая сила в этих пропорциях.  × , Их надо знать наизусть и пользоваться ими всюду.  × ,  × ,
    • 58 Из грязи в князи: три правила дизайна элегантных интерфейсов Гармоничные пропорции  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
    • 59 Из грязи в князи: три правила дизайна элегантных интерфейсов Правило  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 ] Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Basic Ok Apply Discard Defaults
    • 60 Из грязи в князи: три правила дизайна элегантных интерфейсов Юноша может сказать девушке* просто Я тебя люблю. А может сказать иначе – Ну, это, короче... Типа я тебя... Это... Ну ты понимаешь... Как бы люблю... Оба сообщения несут одинаковый смысл, но, будь я адресатом, я бы предпочел четкий и решительный вариант. Думаю, я не один такой. * Или девушка юноше.
    • 61 Из грязи в князи: три правила дизайна элегантных интерфейсов Это вообще общая черта Бла бла всех сообщений – если хотите быть услышаными и воспринятыми серьезно, передавайте бла! Бла свое сообщение четко и смело. Мямлить – не нужно. бла бла! Бла бла!
    • 62 Из грязи в князи: три правила дизайна элегантных интерфейсов Первое же сообщение, которое интерфейс передает своему пользоватетелю, это Я есть вот это. Сайт знакомств передает сообщение Это я, сайт знакомств. С: Бухгалтерия между делом замечает, что Это я, С: Бухгалтерия. Пасьянс Косынка восклицает Это я, Пасьянс Косынка!
    • 63 Из грязи в князи: три правила дизайна элегантных интерфейсов Это сообщение чрезвычайно важно, во-первых, поскольку оно первое, а во- вторых, потому что оно освобождает пользователя самому догадываться о том, что это за штука такая появилась на экране.
    • 64 Из грязи в князи: три правила дизайна элегантных интерфейсов Хоть пользователь и инициировал появление интерфейса сам, он не уверен, что открылось именно то, что ему нужно. Это все равно что газетный лист, покрытый заметками, но совершенно без заголовков – вся информация на месте, но читать неприятно.
    • 65 Из грязи в князи: три правила дизайна элегантных интерфейсов Так что же говорит этот CATALYST® Control Center интерфейс? View HotKeys Profiles Help Preferences Graphics Settings POWERPLAY.™ POWERPLAY™ Welcome Information Center Информативность Displays Manager Display Options Graphics Adapter: 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ] Notebook Panel Properties этого сообщения 3D POWERPLAY™ Status Standard Settings не особо велика. Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Basic Ok Apply Discard Defaults
    • 66 Из грязи в князи: три правила дизайна элегантных интерфейсов Самый простой способ сделать адекватное первое сообщение – снабдить интерфейс заметным и визуально значимым заголовком. Посмотрим, как с ним обстоят дела у подопытного интерфейса.
    • 67 Из грязи в князи: три правила дизайна элегантных интерфейсов Строка заголовка окна CATALYST® Control Center реально не читается, поскольку она есть у всехHelp View HotKeys Profiles Preferences интерфейсов и взгляд ее уже рефлекторно Graphics Settings пропускает. POWERPLAY™ Welcome Кроме того, для экономии места она Information Center сделана маленькой, Displays Manager а 1.ATI MOBILITY RADEON X700 [ D значит – визуально Display Options Graphics Adapter: малозначимой. Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Anti-Aliasing Anisotropic Filtering Active Setting: Battery Level: 100% CATALYST® A.I. Mipmap Detail Level POWERPLAY™ Settings All Settings Use POWERPLAY™ to adjust your graphics processor se API Specific performance or longer battery life.
    • 68 Из грязи в князи: три правила дизайна элегантных интерфейсов Название вкладки CATALYST® Control Center (Graphic Settings), тоже не может служить HotKeys Profiles Preferences View Help нормальным заголовком. Graphics Settings Визуальная важность этого объекта (т.е. POWERPLAY™ Welcome степень, с которой он бросается в глаза) Information Center совершенно мизерная. Displays Manager Display Options Не говоря уж о том, что X700 [ D 1.ATI MOBILITY RADEON Graphics Adapter: Notebook Panel Properties использовать элементы 3D управления в качестве POWERPLAY™ Status Standard Settings оформительского Power Source: High Battery Preffered Setting: средства изначально Anti-Aliasing бессмысленно –Active Setting: они Anisotropic Filtering Battery Level: 100% изначально уродливы. CATALYST® A.I. Mipmap Detail Level POWERPLAY™ Settings All Settings Use POWERPLAY™ to adjust your graphics processor se API Specific performance or longer battery life.
    • 69 Из грязи в князи: три правила дизайна элегантных интерфейсов Элементы управления Чо за фигня?! Где перстень проектируются на курсоре? Бедно, брателло! в расчете на скорость взаимодействия Чо пацаны скажут? Давай с ними и на визуальную перерисовывай! разборчивость. Только потом стараются навести визуальный глянец. Если бы это не было так, все указатели, к примеру, выглядели бы, как фигуристые девушки в купальниках.
    • 70 Из грязи в князи: три правила дизайна элегантных интерфейсов А что же мы видим 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 ] Notebook Panel Properties 3D бы некрасиво... POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % не позволяла нарисовать границы вкладки без хотя бы Basic Ok Apply Discard Defaults одной вкладки.
    • 71 Из грязи в князи: три правила дизайна элегантных интерфейсов Попробуем 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 ] Notebook Panel Properties 3D Получается... POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Basic Ok Apply Discard Defaults
    • 72 Из грязи в князи: три правила дизайна элегантных интерфейсов ...например, так. CATALYST® Control Center View HotKeys Profiles Preferences Help Graphics Settings POWERPLAY™ Welcome Information Center Displays Manager Display Options Graphics Adapter: 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ] Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 73 Из грязи в князи: три правила дизайна элегантных интерфейсов Правило  CATALYST® Control Center View HotKeys Profiles Preferences Help На самом деле это, Graphics Settings конечно, не правило, POWERPLAY™ Welcome но меня сейчас Information Center Displays Manager (когда я готовлю эту Display Options Graphics Adapter: 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ] Notebook Panel Properties презентацию) ужасно 3D POWERPLAY™ Status Standard Settings раздражают жуткие Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 74 Из грязи в князи: три правила дизайна элегантных интерфейсов Гораздо, гораздо лучше. 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: Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 75 Из грязи в князи: три правила дизайна элегантных интерфейсов Правило  Есть всего два цвета фона – белый и черный. Остальные цвета (включая серый) – для неудачников.
    • 76 Из грязи в князи: три правила дизайна элегантных интерфейсов Тому есть много причин, но главными из них следует признать: • Недостаток контраста у интерфейсов с фоном • Потерю выделительного цвета • Избыточность фонового цвета вообще • Отсутствие в природе монотонных цветов.
    • 77 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Существует общее правило: контрастность приводит к красоте (конечно, контрастность не единственная предпосылка красоты). Из этого правила есть исключения, например, книги (в ориентированных на продолжительное чтение книгах верстку намеренно делают неконтрастной, чтобы не утомлять глаза). Фрагмент страницы из Гутенберговской Библии
    • 78 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Изобразительный эффект «Мао» Энди Уорхола обеспечивается сильнейшим контрастом между объектом и фоном.
    • 79 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Нежно любимая турагентами картинка с пляжем, помимо своей эмоциональной привлекательности, красива контрастом между небом, морем и зеленью.
    • 80 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Картина художника Пластова «Фашист пролетел» просто безобразна. Единственное, что в ней эстетически хоть сколько- нибудь хорошо... Фрагмент
    • 81 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  ...так это контраст.
    • 82 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Проблема в том, что это был в основном цветовой контраст, при котором различаются цвета, а не яркость композиционных элементов. Например, здесь все цвета различаются по цвету, а не по яркости. Если убрать цветовую составляющую, картинка окрасится в серый цвет.
    • 83 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Стоит убрать цвет, как пролетевший фашист превращается в практически равномерное, крайне уродливое пятно.
    • 84 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Именно это нам и грозит: интерфейсы, как правило, не могут содержать много цветового контраста. Просто потому, что для цветового контраста нужно много цвета, а много цвета (в особенности множество разных цветов) сильно утомляет глаз при длительном взаимодействии с интерфейсом.
    • 85 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Соответственно, все, чем может располагать дизайнер интерфейса, это цвет фона, основной цвет (например, цвет текста), и один выделительный цвет.
    • 86 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Основной цвет Основной цвет И чем сильнее будут Основной цвет Основной цвет различаться цвет фона и основной цвет (точнее, Основной цвет Основной цвет не цвета, а значения Основной цвет Основной цвет яркости), тем больше контраста будет в интерфейсе. Именно поэтому по Основной цвет Основной цвет степени контрастности Основной цвет Основной цвет нет альтернатив произвольному темному Основной цвет Основной цвет цвету на белом фоне или Основной цвет Основной цвет произвольному светлому цвету на черном фоне .
    • 87 Из грязи в князи: три правила дизайна элегантных интерфейсов Недостаток контраста у цветного фона  Основной цвет Основной цвет Важное уточнение: Основной цвет Основной цвет мониторы сами испускают Основной цвет Основной цвет цвет, так что контраст Основной цвет Основной цвет может оказаться избыточным, особенно Основной цвет Основной цвет при длительной работе с Основной цвет Основной цвет интерфейсом. Допустимо снижать контраст, Основной цвет Основной цвет делая цвет фона более Основной цвет Основной цвет нейтральным (например, для ЖК-мониторов это Основной цвет Основной цвет примерно  черного). Основной цвет Основной цвет Основной цвет Основной цвет Выглядит хуже, работается лучше.
    • 88 Из грязи в князи: три правила дизайна элегантных интерфейсов Потеря выделитель- ного цвета  Один цвет интерфейса обязательно должен быть выделительным. Например, в Windows по умолчанию синий используется как выделительный.
    • 89 Из грязи в князи: три правила дизайна элегантных интерфейсов Потеря выделитель- ного цвета  Чтобы выделительный цвет выделял (буквально бросался в глаза), он должен сильно отличаться от цвета фона. Например, выделяется ли выделительный цвет сейчас? Это риторический вопрос.
    • 90 Из грязи в князи: три правила дизайна элегантных интерфейсов Потеря выделитель- ного цвета  Таким образом, цвет фона сокращает выбор выделительного цвета. Так, розовый фон помешает сделать красный выделительным. А синий фон панели инструментов не позволит выжать максимум контраста из пиктограмм на ней, поскольку в них не удастся полноценно использовать синий.
    • 91 Из грязи в князи: три правила дизайна элегантных интерфейсов Избыточность фоно- вого цвета вообще  Крупные предметы однородного цвета окрашивают окружающее их пространство.
    • 92 Из грязи в князи: три правила дизайна элегантных интерфейсов Избыточность фоно- вого цвета вообще  Например, возле зеленого дерева всё становится немного зеленым, а возле кирпичной стены всё становится розоватым.
    • 93 Из грязи в князи: три правила дизайна элегантных интерфейсов Избыточность фоно- вого цвета вообще  Можем воспользоваться этим принципом и мы. Достаточно активно использовать выделительный цвет на нейтральном (белом или черном) фоне, и этот цвет зрительно окрасит окружающее пространство.
    • 94 Из грязи в князи: три правила дизайна элегантных интерфейсов Избыточность фоно- вого цвета вообще  Сравните этот кадр и следующий.
    • 95 Из грязи в князи: три правила дизайна элегантных интерфейсов Избыточность фоно- вого цвета вообще  Сравните этот кадр и следующий.
    • 96 Из грязи в князи: три правила дизайна элегантных интерфейсов Избыточность фоно- вого цвета вообще  Сравните этот кадр и следующий.
    • 97 Из грязи в князи: три правила дизайна элегантных интерфейсов Избыточность фоно- вого цвета вообще  Видали? Маленький объект зрительно окрашивает весь кадр.
    • 98 Из грязи в князи: три правила дизайна элегантных интерфейсов Избыточность фоно- вого цвета вообще  В этом смысле использование фонового цвета кажется* мне признаком творческой импотенции дизайнера. Зачем красить всё, когда того же результата можно добиться, покрасив только часть? * Подчеркиваю, это моё личное мнение.
    • 99 Из грязи в князи: три правила дизайна элегантных интерфейсов Отсутствие в природе монотонных цветов  Наконец, в пользу белого и черного цветов фона говорит и тот факт, что это единственные чистые цвета в природе.
    • 100 Из грязи в князи: три правила дизайна элегантных интерфейсов Отсутствие в природе монотонных цветов  В мире все имеет какую- никакую, а текстуру (как минимум, налипшую грязь).
    • 101 Из грязи в князи: три правила дизайна элегантных интерфейсов Отсутствие в природе монотонных цветов  Даже ясное небо на самом деле не имеет четкого цвета – цвет неба это тончайший градиент, поскольку ближе к горизонту небо имеет другой оттенок, чем в зените.
    • 102 Из грязи в князи: три правила дизайна элегантных интерфейсов Отсутствие в природе монотонных цветов  Только ровные белый и черный можно найти без специальной подготовки. Снег на ярком солнце выглядит белым (жители жарких краев для получения этого эффекта могут хорошенько стукнуться глазом обо что-нибудь твердое). Спрятавшись ночью в шкафу, можно увидеть лишенный текстуры черный.
    • 103 Из грязи в князи: три правила дизайна элегантных интерфейсов Отсутствие в природе монотонных цветов  В таких условиях ровный цветной фон кажется чем-то совершенно ненатуральным.
    • 104 Из грязи в князи: три правила дизайна элегантных интерфейсов Отсутствие в природе монотонных цветов  Столь же ненатуральным кажется мне и желание дизайнеров протаскивать такие фоны в интерфейсы.
    • 105 Из грязи в князи: три правила дизайна элегантных интерфейсов Отсутствие в природе монотонных цветов  Разумеется, можно использовать фоны с текстурами. Например, это давно и с успехом делает Apple.
    • 106 Из грязи в князи: три правила дизайна элегантных интерфейсов Отсутствие в природе монотонных цветов  Но только такой фон задача технически неординарная. По- хорошему, фон должен затрагивать и элементы управления. Например, стандартная кнопка на текстурированном фоне выглядит довольно убого, а значит, требует собственной картинки.
    • 107 Из грязи в князи: три правила дизайна элегантных интерфейсов Отсутствие в природе монотонных цветов  Т.е. текстурированный фон штука безусловно хорошая, только очень уж дорогая (в особенности для программ; с сайтами немного проще). Дешевле использовать чистый белый или черные фоны; по эстетичности результат будет таким же.
    • 108 Из грязи в князи: три правила дизайна элегантных интерфейсов Так что же нам делать с CATALYST® Control Center этим интерфейсом? Preferences View HotKeys Profiles Help Graphics Settings В принципе, если POWERPLAY™ Welcome позволяет бюджет, Information Center Displays Manager можно рассматривать Display Options 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ] Graphics Adapter: Notebook Panel Properties текстурный фон 3D POWERPLAY™ Status Standard Settings и соответствующую Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 109 Из грязи в князи: три правила дизайна элегантных интерфейсов ...черным... 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: Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 110 Из грязи в князи: три правила дизайна элегантных интерфейсов ...или белым. 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: Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 111 Из грязи в князи: три правила дизайна элегантных интерфейсов Мне больше нравится CATALYST® Control Center View HotKeys Profiles Preferences Help белый вариант, но это Graphics Settings POWERPLAY™ Welcome вкусовое (черный Information Center Displays Manager Display Options Graphics Adapter: 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ] Notebook Panel Properties вариант выглядит 3D POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled Anti-Aliasing Anisotropic Filtering Active Setting: Optimal Performance Battery Level: 100% CATALYST® A.I. драматичнее, что, Mipmap Detail Level POWERPLAY™ Settings CATALYST® Control Center All Settings Use POWERPLAY™ to adjust your graphics processor settings for higher API Specific performance or longer battery life. View HotKeys Profiles Preferences Help Color пожалуй, лучше для Enable POWERPLAY™ Graphics Settings Video POWERPLAY™ VPU Recover When the power source is: My preferred setting is: POWERPLAY™ Welcome программы такого типа). Optimal Performance Plugged In: Information Center | | | Displays Manager Optimal Performance High Battery: Display Options Graphics Adapter: 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ] | | | Notebook Panel Properties Optimal Performance Low Battery: 3D POWERPLAY™ Status | | | В любом случае, черный Standard Settings Power Source: High Battery Preffered Setting: Disabled Low Battery settings apply when battery level is below 25 % Anti-Aliasing Anisotropic Filtering Active Setting: Optimal Performance Battery Level: 100% CATALYST® A.I. и белые интерфейсы Mipmap Detail Level Basic Ok Apply Discard Defaults POWERPLAY™ Settings CATALYST® Control Center All Settings Use POWERPLAY™ to adjust your graphics processor settings for higher API Specific performance or longer battery life. View HotKeys Profiles Preferences Help Color Enable POWERPLAY™ Graphics Settings Video привлекательнее вялого POWERPLAY™ VPU Recover When the power source is: My preferred setting is: POWERPLAY™ Welcome Optimal Performance Plugged In: Information Center серенького варианта. | | | Displays Manager Optimal Performance High Battery: Display Options Graphics Adapter: 1.ATI MOBILITY RADEON X700 [ DEFAULT LCD ] | | | Notebook Panel Properties Optimal Performance Low Battery: 3D POWERPLAY™ Status | | | Standard Settings Power Source: High Battery Preffered Setting: Disabled Low Battery settings apply when battery level is below 25 Именно поэтому % Anti-Aliasing Anisotropic Filtering Active Setting: Optimal Performance Battery Level: 100% CATALYST® A.I. Mipmap Detail Level Basic Ok Apply Discard Defaults 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™ VPU Recover When the power source is: My preferred setting is: Optimal Performance Plugged In: | | | Optimal Performance High Battery: | | | Optimal Performance Low Battery: | | | 25 Low Battery settings apply when battery level is below % Basic Ok Apply Discard Defaults
    • 112 Из грязи в князи: три правила дизайна элегантных интерфейсов Как видите, всего три 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: Notebook Panel Properties 3D • интерфейсы лучше POWERPLAY™ Status Standard Settings Power Source: High Battery Preffered Setting: Disabled 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 API Specific • фон может быть любого performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 113 Из грязи в князи: три правила дизайна элегантных интерфейсов Конечно, дизайн 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: Notebook Panel Properties Но дальше уже четких, 3D POWERPLAY™ Status Standard Settings легких в применении, Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % Apply Discard Defaults Basic Ok
    • 114 Из грязи в князи: три правила дизайна элегантных интерфейсов На этом кадре 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 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™ 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
    • 115 Из грязи в князи: три правила дизайна элегантных интерфейсов Я не берусь утверждать, 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: лучше оригинала. Notebook Panel Properties 3D POWERPLAY™ Status Standard Settings Ч.Т.Д. Power Source: High Battery Preffered Setting: Disabled 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 API Specific performance or longer battery life. 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 Low Battery settings apply when battery level is below % плашку со словом Apply Discard Defaults Basic Ok POWERPLAY™.
    • 116 Из грязи в князи: три правила дизайна элегантных интерфейсов Конец. И спасибо за внимание. Примечание: Диалоговое окно драйвера ATI было пользоваться ей и в дальнейшем (надеюсь, впрочем, очевидно, что разбираемый интерфейс совершенно выбрано всего лишь потому, что оно попалось что они сделают свой драйвер более привлекательным реален. К счастью, авторские и иные права ATI мне первым, когда я искал интерфейс для примера. внешне). Я мог убрать все упоминания ATI не распространяются на случаи критического анализа Я уважаю продукцию ATI, пользуюсь ей сам и планирую из скриншота, но не сделал этого, чтобы вам было (как в данной презентации).