Там какой-либо CSS дополняет эвристику, за которой я могу следовать?
У меня есть простая проблема:
- У меня есть изображение в отделении.
- Для создания страницы более эстетически приятной, я собираюсь добавить некоторое дополнительное дополнение к изображению.
Вместо глазного яблока это, я хотел бы знать:
Там какой-либо CSS дополняет эвристику, за которой я могу следовать?
Я думал, что кто-то калибра Jakob Nielsen, возможно, установил некоторые лучшие практики о макете страницы и дополняющий (т.е. минимальное пиксельное дополнение или пропорциональность).
- Я не утверждаю, что это - особенно трудная проблема для решения.
- Но это - проблема, которая, вероятно, подойдет снова.
- И я хотел бы, чтобы некоторая эвристика вела мой дополнительный выбор в будущем.
Любая справка ценилась бы.
3 ответа
На самом деле существуют некоторые стандартные формулы для такого рода вещей.
- Закон третей. Если сомневаетесь, разделите на три части. Делите на три, пока не получите что-то разумное.
- Золотое сечение - это немного сложнее, и вам действительно нужна программа типа Golden Section, чтобы правильно ее использовать, но основная идея заключается в том, что ваша набивка должна быть кратна золотому сечению. Золотое сечение - это
((a+b)/a) = (a/b))или около 1,618. - Соотношение А4. Я не знаю, как оно называется, но оно равно 1,414 - это отношение листа бумаги формата А4.
- Почти при любом соотношении ваша сетка будет выглядеть сбалансированной, если вы будете его придерживаться.
Если ширина вашего изображения 100 пикселей, вы делите на золотое сечение до тех пор, пока не получите что-то не слишком большое.
Итак, золотое сечение для 100 пикселей - это 62, 38, 24, 15, 9, 6, 4, 3, 2, 1. В ems вы можете использовать дробную ширину, так что в итоге вы получите 14.5, 9, 5.6 и т.д.
Единицы em являются функцией ширины "m" в шрифте, поэтому в CSS они могут меняться на протяжении всей страницы.
Мера" - это ширина строки текста. Вы хотите, чтобы ваша мера была меньше, чем 2-2,5 алфавита. (Вы измеряете алфавит, набирая abcdefg... дважды.)
В брошюре/книге Колина Уилдона Communicating or Just Making Pretty Shapes есть несколько отличных советов по компоновке типографики и изображений. Она в основном ориентирована на печать, но большинство тех же принципов применимы.
думали ли вы об использовании фреймворка css, например:
- BluePrintCSS
- YAML
- YUI Grids CSS
- 960 CSS Grid System
- и так далее (см. Это хорошая статья )
мне больше всего нравится blueprint, он не слишком раздут, как YAML или YUI, и дает вам прекрасное начало для нового проекта. Насколько я знаю, он добавляет отступы 1.5em к коробкам и тому подобному. кроме того, его легко адаптировать. посмотрите :)
Трудно дадут вам общий ответ, потому что общий вид страницы влияет на этот выбор. Какая плотность текста? Сколько белого пространства? Сколько столбцов? Сколько изображений на одной странице? и т. д.
Я думаю, вам следует поэкспериментировать сами, и вы быстро найдете свой собственный типичный размер или диапазон отступов, с которыми вы можете начать и изменять для каждого проекта.
Просто взгляните на веб-сайт Якоба Нильсена. Меня не волнует его калибр, вы не хотите получать от него советы по эстетике. Конечно, многие из его советов по юзабилити ценны, но относитесь ко всему с недоверием.