Beauty

1,706 views

Published on

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,706
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Beauty

  1. 1. 1 Из грязи в князи: три правила дизайна элегантных интерфейсов Из грязи в князи: три правила дизайна элегантных интерфейсов Владислав Головач www.usethics.ru Последнее обновление  июля 
  2. 2. 2 Из грязи в князи: три правила дизайна элегантных интерфейсов Этот скриншот (драйвер видеокарт ATI), по-видимому, является красивым. Во всяком случае, если бы он не был красив, заказчик бы его не принял. Несомненно, однако, что этот интерфейс не элегантен.
  3. 3. 3 Из грязи в князи: три правила дизайна элегантных интерфейсов Т.е. слезу гонит.
  4. 4. 4 Из грязи в князи: три правила дизайна элегантных интерфейсов Кошмар, короче.
  5. 5. 5 Из грязи в князи: три правила дизайна элегантных интерфейсов Дальше я покажу как сделать этот интерфейс элегантным, используя всего три правила. Эти шаги и правила, которые я буду применять, подходят к любым интерфейсам; в разных интерфейсах различается только важность каждого шага и правила.
  6. 6. 6 Из грязи в князи: три правила дизайна элегантных интерфейсов Я не буду специально изменять интерфейс; его эргономические качества меня сейчас не волнуют.
  7. 7. 7 Из грязи в князи: три правила дизайна элегантных интерфейсов Но перед этим я перерисую этот интерфейс в векторной форме: растровая картинка скриншота сама по себе убого выглядит, будучи вставлена в презентацию. Кроме того, перерисо- вывать вектор удобнее. Кое-какие детали будут потеряны, но не думаю, что это существенно изменит мой экспери- мент или сделает его менее достоверным.
  8. 8. 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. 9. 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. 10. 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. 11. 11 Из грязи в князи: три правила дизайна элегантных интерфейсов Предуведомление: На кадрах с желто-серой полоской сверху (таких как этот) идет речь о правилах, которые надо исполнять безусловно. На кадрах с серой по- лоской я буду расска- зывать о правилах, выполнять которые не получается, если делать это формально – просто потому, что на эту работу не хватает времени.
  12. 12. 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. 13. 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. 14. 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. 15. 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. 16. 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. 17. 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. 18. 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. 19. 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. 20. 20 Из грязи в князи: три правила дизайна элегантных интерфейсов Нужна сетка, по которой будут выстроены все элементы. Если у нас есть сетка и если при рисовании интерфейса мы привязываем все элементы к ней, такого рода ошибки сами исчезнут начисто.
  21. 21. 21 Из грязи в князи: три правила дизайна элегантных интерфейсов Как будет выглядеть это диалоговое окно, если перерисовать его по сетке?
  22. 22. 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. 23. 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. 24. 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. 25. 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. 26. 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. 27. 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. 28. 28 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Назначение сетки – × × × не только выравнивать элементы. Сетка (теоретически) помогает делать объекты × пропорциональными, т.е. обладающими четкими и заметными глазу пропорциями. Например, два к трем. Или один к одному (квадрат).
  29. 29. 29 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Как правило, если пропорции выдерживаются всюду, картинка выглядит лучше, × чем когда пропорции не выдерживаются. Т.е. прямоугольник с пропорцией  ×  выглядит не сильно лучше прямоугольника  × , пропорции  × , (хотя всё-таки немного лучше)...
  30. 30. 30 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  ...но объектов-то в интерфейсах много! И если все они обладают выдержаными пропорциями, картинка сильно выигрывает. Например, набор прямоугольников с пропорциями x, х, х и х (сверху) выглядит лучше внешне похожего набора произвольных пропорций (снизу).
  31. 31. 31 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Причем количество заметных глазу объектов гораздо больше, чем количество объектов функциональных – пустое пространство между прямоугольника- ми тоже воспринимается взглядом как объект и тоже требует пропорций.
  32. 32. 32 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Например, здесь прямоугольники одинаковы, но изначальное расстояние между ними, равное 1⁄2, не выдерживается в нижнем варианте.
  33. 33. 33 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  А если не выдерживаются и пропорции объектов и пропорции интервалов, вообще получается ужас.
  34. 34. 34 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Есть два исключения из этого правила. Глазу труднее заметить непропорциональность: • Oчень широких и очень узких объектов. Так,  ×  фактически выглядит неразличимо лучше, чем, к примеру,  × ,. • Крупных объектов. Так, красная рамка на этом слайде не является квадратом, но внешне это не очень заметно.
  35. 35. 35 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Вернемся к проблеме сетки с мелкими ячейками. Такая сетка не позволяет автоматически строить такого рода целые , ×  пропорции. Просто потому, × что при мелкой сетке (как была в примере) вполне возможен объект (или пустота) высотой  и шириной  ячеек (т.е. с пропорциями , × ).
  36. 36. 36 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Если же у сетки будут крупные ячейки (например, по высоте вдвое большие высоты текстового поля), дробные пропорции не будут получаться вовсе. Все значения будут целыми, во всяком случае для взгляда.
  37. 37. 37 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Проблема в том, что более-менее сложный интерфейс нельзя рисовать по сетке с крупными ячейками. Не получается. Времени не хватает.
  38. 38. 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. 39. 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. 40. 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. 41. 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. 42. 42 Из грязи в князи: три правила дизайна элегантных интерфейсов Особо крупная сетка  Оставшиеся пропорции можно и нужно улучшать (кстати, пропорция самой вкладки  × ,). , ×  должно стать  × , а  × , должно 1,8 × 1 превратиться в  × , 1 × 1,7 или  × .
  43. 43. 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

×