tag:blogger.com,1999:blog-88134019422150875302024-11-06T09:59:09.581+07:00Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.comBlogger23125tag:blogger.com,1999:blog-8813401942215087530.post-62397893712841224832011-10-18T10:28:00.004+08:002011-10-18T10:39:35.667+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><h4 style="text-align: center;">Возможности поиска</h4><div style="text-align: justify; text-indent: 3em;"><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;">Мои наблюдения показали, что пользователей можно разделить на три категории: более половины интересуется, в основном, функцией <strong>поиска</strong>, для одной пятой наиболее важными являются ссылки, остальные же демонстрируют смешанное поведение. Пользователи, для которых важнее <strong>поиск</strong>, едва попав на сайт, сразу же направляются к кнопке <strong>поиск</strong>. Они не отвлекаются на изучение сайта, у них есть задача и им нужно найти конкретную информацию как можно скорее. Напротив, пользователи, предпочитающие ссылки, исследуют сайт, переходя исключительно по ссылкам. Даже если им нужна какая-то конкретная информация, они сначала попробуют найти ее, следуя ссылкам с главной страницы. И лишь когда надежда уже полностью потеряна, они признают свое поражение и воспользуются функцией поиска. Пользователи со смешанным поведением применяют обе возможности, в зависимости от того, какая из них в данной ситуации кажется им наиболее многообещающей, но постоянных предпочтений у них нет.<br /> <div style="text-align: justify; text-indent: 3em;"><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;">Несмотря на первенство поиска, <strong>веб-дизайн</strong>, тем не менее, должен базироваться на четкой структуре и поддержке навигации. Всегда должно быть понятно, как данная страница соотносится с общей схемой сайта. Во-первых, это необходимо для тех, кто не любит поиск, и для пользователей со смешанным поведением. А во-вторых, и тем пользователям, которые предпочитают поиск, нужно понимать, как страница соотносится с остальной частью сайта. Им также потребуется возможность навигации для перемещения по сайту в окрестности страницы, которую они нашли с помощью поиска. В редких случаях одна страница может дать ответ на все вопросы, поэтому обычно пользователи просматривают и родственные страницы.<br /> Поиск должен быть легко доступен на каждой странице сайта. Пользователи, предпочитающие поиск, скорее всего, воспользуются им уже на первой странице, но вот остальные могут побродить некоторое время, прежде чем окончательно потеряются. Когда же это произойдет, нельзя заставлять их “ разыскивать поиск”, он должен быть прямо перед глазами - то есть на каждой странице, ведь невозможно заранее предугадать, где посетитель закончит навигацию и перейдет к поиску.<br /> <div style="text-align: justify; text-indent: 3em;"><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;">Иногда некоторые области сайта являются достаточно согласованными и отличаются от остальной части сайта настолько, что представляется разумным организовать внутренний поиск, ограниченный пределами этого конкретного подсайта. В общем же случае я выступаю против такого поиска, поскольку наши наблюдения показали, что пользователи часто не понимают структуры сайтов. Они, как правило, думают, что ответ на их вопрос находится на подсайте, который не найти при помощи внутреннего поиска. Бывает и так, что пользователи не осознают, где они находятся и в каких пределах проводится их поиск. Они могут думать, что ищут по всему сайту или по подсайту, на котором они на самом деле сейчас не находятся.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;">В раздумьях о возможности локального поиска дизайнерам следовало бы приучить себя отказываться от этого. Если сайт в действительности содержит подсайты, для которых необходим внутренний поиск, то все страницы такого поиска должны делать две вещи:<br /> <br /> <ul style="text-align: left;"><li>Явно сообщать, в каких пределах будет осуществляться поиск. Эта информация должна быть указана в верхней части как страницы запроса, так и страницы с результатами поиска.</li> <li>Содержать ссылку на страницу поиска по всему сайту. Эта ссылка, опять же, должна быть как на странице запроса, так и на странице результатов. Причем на странице с результатами поиска она должна скрываться под вопросом типа: «Не нашли то, что искали? Попробуйте расширить границы поиска до размеров всего сайта». Переход по этой ссылке должен активизировать тот же самый запрос, но уже для всего сайта.</li> </ul><br /> Предыдущая&nbsp;статья:<br /> <a href="http://web-dizain.blogspot.com/2011/10/podsait.html">Веб-дизайн - Подсайты</a><br /> <br /> Следующая статья:<br /> <br /> </div></div></div></div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com2tag:blogger.com,1999:blog-8813401942215087530.post-68356553531193998132011-10-12T15:47:00.000+08:002011-10-18T10:35:41.483+08:00<div dir="ltr" style="text-align: left;" trbidi="on"> <h4 style="text-align: center;"> Подсайты</h4> <br /> <div style="text-align: justify; text-indent: 3em;"> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> Пользователям нужна структура, которая делала бы осмысленной их навигацию по различным информационным пространствам. Фундаментальная особенность <b>Интернета</b> состоит в отсутствии поддержки какой-либо структуры за пределами отдельной страницы, которая и является единственной распознаваемой единицей информации.</div> <div style="text-align: justify; text-indent: 3em;"> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> Но, конечно же, отдельные страницы — недостаточный структурный механизм, и еще с ранних дней Интернета я выступал сторонником выделения сайта в качестве дополнительной фундаментальной структурной единицы. Один единственный щелчок мышью может перенести нас на другой конец света, так что каждая страница должна обеспечивать пользователей пониманием своего местоположения.</div> <div style="text-align: justify; text-indent: 3em;"> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> Явное осознание сайта как структурного механизма важно для удобства использования, но многие сайты слишком велики, чтобы представлять собой всего одну структурную единицу. Большая часть информации может быть организована иерархически, и представление этой иерархии добавлено в верхнюю часть страницы для обеспечения дополнительных связей и навигационных опций. Например, внутренняя сеть гипотетической компании “Рыбный Восторг” могла бы иметь следующий список вложенной иерархии, приводящий к первой странице офиса в Красноярске:</div> <div style="text-align: justify; text-indent: 3em;"> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> <b>Рыбный Восторг - Купить =&gt; Регион - Красноярский край =&gt;Красноярск</b></div> <div style="text-align: justify; text-indent: 3em;"> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> Каждый из элементов этого иерархического списка должен являться ссылкой на верхнюю страницу данного уровня. Заметьте, что название последнего уровня (в данном случае Красноярск) не должно являться ссылкой, если текущая страница это главная страница данного уровня. Однако на неглавной странице того же нижнего уровня его название должно быть ссылкой.</div> <div style="text-align: justify; text-indent: 3em;"> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> В информационных пространствах, которые непросто структурировать иерархически, в качестве дополнительного структурного механизма можно использовать <strong>подсайт</strong>. <strong>Подсайт</strong> может использоваться и в иерархической структуре, чтобы придать особую важность некоторому уровню иерархии (который используется как указатель подсайта).</div> <div style="text-align: justify; text-indent: 3em;"> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> Под <strong>подсайтом</strong> я подразумеваю некоторый набор веб-страниц в пределах сайта с общим стилем и общим навигационным механизмом. Этот набор может быть плоским, а может иметь некоторую внутреннюю структуру, но в любом случае какая-то страница подсайта должна быть спроектирована как главная. Каждая страница должна иметь ссылку и на эту главную страницу, и на главную страницу всего сайта. Кроме того, в дополнение к локальному навигационному механизму, подсайт должен иметь и глобальные навигационные опции (например, ссылки на главную страницу сайта и на поиск по всему сайту).</div> <div style="text-align: justify; text-indent: 3em;"> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> <strong>Подсайты</strong> - это способ упростить работу со сложными сайтами, состоящими из тысяч или даже сотен тысяч страниц. Подсайт, предоставляя более локализованную структуру в уголке большого информационного пространства, может помочь пользователям почувствовать себя желанными посетителями той части сайта, которая им наиболее интересна. К тому же, большой сайт часто содержит неоднородную информацию, которая не может быть вся сжата в одну стандартную структуру. Подсайт -это среда для определенного класса пользователей или определенного типа использования внутри большего сайта.</div> <div style="text-align: justify; text-indent: 3em;"> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> Существует некоторое противоречие между желанием создателя подсайта полностью оптимизировать его для нужд локальной информации и необходимостью согласованности всех частей сайта. Подсайтам не следует пытаться стать независимыми, не связанными с родительским сайтом, частью которого они являются.</div> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> <br /></div> <div style="text-align: left;"> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Предыдущая&nbsp;статья:</span></div> <div style="text-align: left;"> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://web-dizain.blogspot.com/2011/10/navigaciy.html">Веб-дизайн - Навигация</a></span></div> <div style="text-align: left;"> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div> <div style="text-align: left;"> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Следующая статья:</span></div> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;"> <div style="text-align: left;"> <a href="http://web-dizain.blogspot.com/2011/10/vozmoshnosti-poiska.html">Веб-дизайн - Возможности поиска</a></div> <br /></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com1tag:blogger.com,1999:blog-8813401942215087530.post-13817180713613461732011-10-01T10:58:00.000+08:002011-10-12T15:56:39.467+08:00<div dir="ltr" style="text-align: left;" trbidi="on"> <h4 style="text-align: center;"> <br /> &nbsp;Навигация</h4> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> Интернет - <strong>это навигационная система:</strong> основное взаимодействие пользователя с ней заключается в щелчках мышью по гиперссылкам для перемещения по информационному пространству. Из-за огромных размеров этого пространства навигация достаточно сложна, и необходимо обеспечить пользователям поддержку, выходящую за рамки простой ссылки «goto».<br /> Интерфейс должен помочь пользователю ответить на три фундаментальных вопроса навигации:<br /> <ul> <li>Где я нахожусь?</li> <li>Где я уже побывал?</li> <li>Куда я могу пойти?</li> </ul> <h5 style="text-align: left;"> Где я?</h5> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> Возможно, самый важный вопрос навигации: «Где я нахожусь?», потому что у пользователей не будет никакой возможности понять структуру сайта, если они не понимают, где они находятся в данный момент. Ну а если вы не понимаете, где находитесь, у вас нет возможности понять смысл ссылки, по которой вы только что перешли.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> Текущее местонахождение пользователя должно быть показано на двух уровнях:<br /> <ul> <li>относительно всего Интернета в целом</li> <li>относительно структуры сайта</li> </ul> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> Вы должны идентифицировать ваш сайт на каждой его странице, потому что все они входят в сообщество Интернет. С точки зрения пользователя, все сайты одинаковы; они используют технологию интерактивности, они загружаются (медленно) из Интернета и имеют приблизительно одинаковое строение. Эти сходства на самом деле хороши тем, что они позволяют людям переносить свои знания с одного сайта на другой. Мои исследования показали, что пользователи часто жалуются на сайты, в которых задействованы навигационные интерфейсы, отличные от представленных на большинстве веб-узлов.<br /> Интернет в целом доминирует в опыте, потому что пользователи имеют тенденцию просматривать не больше 4-5 страниц на сайте за один раз. И проблема состоит в том, что пользователи не узнают, на каком сайте они находятся, до тех пор пока вы не скажете им об этом. Таким образом, правило номер один — это помещать логотип (или другой идентификатор сайта) на каждой странице. Логотип должен иметь постоянное местоположение (желательно в левом верхнем углу, если язык сайта предполагает чтение слева направо) и должен быть организован как ссылка на первую страницу.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> Местоположение посетителя на сайте обычно указывается следующим образом: изображается структура сайта и выделяется тот сектор, в котором расположена текущая страница. Также очень важно иметь понятный заголовок страницы, представляющий ее имя или основное содержание. Наконец, название страницы в <strong>HTML-заголовке</strong> должно быть значимым и индивидуальным для каждой страницы, чтобы пользователи без труда могли обнаружить их в своем списке закладок.<br /> <h5 style="text-align: left;"> Где я был?</h5> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> В силу обезличенности стандартной веб-технологии сайту довольно сложно ответить на вопрос; «Где я уже побывал?», потому что сайт не знает этого, если не использует механизм записи в cookie или другие способы слежения за пользователем. К счастью, навигационные механизмы современных браузеров предоставляют некоторую помощь в этом вопросе. Кнопка Назад (Back) отправляет на предыдущую страницу, список History показывает страницы, которые вы посетили последними, а ссылки, по которым вы уже ходили, отмечаются другим цветом.<br /> Я бы рекомендовал не изменять стандартные цвета ссылок, потому что пользователи поймут только те цвета, к которым они привыкли. Я протестировал множество сайтов с нестандартными цветами ссылок, и там пользователи никак не могли разобраться с тем, какие ссылки они уже использовали.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> Знать, какие ссылки ведут к уже виденным страницам, полезно по двум причинам: это помогает пользователям понять структуру сайта и позволяет не ходить бесконечно на одни и те же страницы.<br /> <h5 style="text-align: left;"> Куда я могу пойти?</h5> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> На этот вопрос нетрудно ответить, используя представленные возможности навигации и ссылки. Кроме того, если пользователь поймет структуру сайта, у него появится общее представление о страницах, которые он не видит в настоящий момент и куда может попасть. Так как нельзя показать все возможные места назначения на каждой странице, то очевидно, что хорошая структура сайта - это главное преимущество для как можно более полного ответа на вопрос:&nbsp;«Куда я могу пойти?»<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> Существует три вида которые могут быть использованы на странице:<br /> <ul> <li><strong>Встроенные ссылки</strong> - это традиционный подчеркнутый текст, указывающий, что по вопросу, обсуждаемому в данном месте, есть дополнительная информация.</li> <li><strong>Структурные ссылки</strong> - это ссылки, которые указывают на другие уровни структуры сайта, а также на «братьев-сестер» или «детей» в иерархии. Важно, чтобы одни и те же структурные ссылки присутствовали на всех страницах, в этом случае пользователь понимает, чего ждать от структурной навигации. Естественно, конкретный пункт назначения каждой из структурных ссылок будет меняться от страницы к странице. Поэтому часто бывает лучше использовать ссылки, которые указывают имя конкретного места в дополнение к представлению структурного отношения между текущей страницей и страницей назначения. Проще говоря, лучше иметь ссылку «Вверх к Widget Product Family», чем просто ссылку «Переход на один уровеньвверх».</li> <li><strong>Ассоциативные ссылки</strong> используются, чтобы дать пользователю совет типа «смотри также», относительно страниц, которые могут быть ему интересны, так как они похожи или связаны с текущей страницей.</li> </ul> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> Лучше всего показывать ссылки как подчеркнутый текст стандартного синего цвета для ссылок на еще не посещенные страницы и фиолетового цвета для ссылок на страницы, которые пользователь уже посетил. Любой человек узнает об этом условном соглашении в первый же день пребывания в Интернете, и дальше у него не будет уже никаких сомнений в том, что подчеркнутый текст означает «щелкни здесь». И, поскольку теперь подчеркивание воспринимается как возможность щелчка, не стоит подчеркивать текст, не являющийся ссылкой.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"> Проблемы удобства использования возникают и из-за ссылок, которые представлены иначе, чем в форме простого подчеркнутого текста. Раскрывающиеся меню и графика должны использоваться для навигации с большой осторожностью, потому что они ведут себя не так, как стандартный подчеркнутый цвет. В частности, они не меняют цвет на фиолетовый, если указывают на то место, где пользователь уже был.<br /> <br /> Предыдущая статья:<br /> <a href="http://web-dizain.blogspot.com/2011/09/glavnay-stranica-s-vnutreney.html">Веб-дизайн - Главная страница в сравнении с внутренними</a><br /> <br /> Следующая статья:<br /> <a href="http://web-dizain.blogspot.com/2011/10/podsait.html">Веб-дизайн - Подсайты</a><br /> <br /> <br /> <div> <br /></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com2tag:blogger.com,1999:blog-8813401942215087530.post-15158194830746050882011-09-24T10:54:00.005+08:002011-09-26T11:07:37.916+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><h4 style="text-align: center;">Главная страница в сравнении с внутренними</h4><div><br /> </div><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Самым ярким элементом <strong>веб-дизайна</strong> первой страницы должно быть название компании или сайта. Название не обязательно должно быть самым крупным элементом, но, по крайней мере, оно должно находиться в левой верхней части экрана или каком-то другом месте, где его легко заметить. Кроме того, название сайта должно присутствовать на всех внутренних страницах, потому что пользователь может попасть на любую страницу сайта, минуя первую. Людям, которые приходят с поисковых систем или идут по ссылкам с других сайтов нужно просто и ясно сказать о том, на какой сайт они попали. В то же время, внутренние страницы должны, в первую очередь, сосредоточить внимание на конкретной информации, а общее приветственное сообщение и обзор сайта имеют лишь вторичное значение.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Существует конфликт между необходимостью обслуживания людей, которые могут попасть сразу на какую-то внутреннюю страницу, и необходимостью ограничить размещение общей информации и навигации первой страницей. Решение этой проблемы зависит от того, как часто посетители входят на сайт через страницы нижнего уровня, и от того, насколько ваш сайт известен и узнаваем. Если большинство пользователей сразу же опознают сайт, тогда не стоит беспокоиться о размещении большого количества общей информации на каждой странице. Достаточно иметь единственную ссылку на первую страницу. Я рекомендую поместить такую ссылку в левый верхний угол страницы, это и лучшее место для названия сайта и логотипа. Естественно, сайт на языке, в котором читают справа налево, должен использовать для этих целей правый верхний угол.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Важно сделать первую страницу доступной по единственному щелчку мыши с любой внутренней страницы, вне зависимости от того, как пользователь вошел на сайт. На всех внутренних страницах должен присутствовать логотип, щелкнув по которому, посетитель попал бы на первую страницу. Правда, надо признать, что не все понимают смысл использования логотипа таким образом, и пройдет еще некоторое время, прежде чем это соглашение будет принято повсеместно. То есть в ближайшие несколько лет необходимо будет на каждой странице иметь явную ссылку «На главную».<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Менее известные сайты, которые не так легко опознаются пользователями, нуждаются в представлении некоторого количества дополнительной идентифицирующей информации на каждой странице. Им также необходимо сделать свое название и логотип более крупными, чем у сайтов известных компаний.<br /> <h4 style="text-align: center;">Ссылки вглубь сайта</h4><div><br /> </div><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Заставлять пользователей входить на сайт только через <strong>главную страницу</strong> — ошибочная стратегия. Так называемые «ссылки вглубь» deep linking позволяют другим сайтам направлять пользователя в конкретную точку, представляющую интерес именно для него. Каждый сайт - словно дом с тысячей дверей: есть масса возможностей попасть внутрь. Весьма гостеприимное место, не так ли?<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Если же открыт только один парадный вход, а все остальные заблокированы, пользователи попадут на первую страницу, не имея четкого представления о том, как ваш сайт соотносится с их целям или их отправной точкой. Это объясняется тем, что первая страница никогда не может быть настолько же отвечающей конкретному запросу или полезной, как та страница, которая описывает продукт или отвечает на вопрос. Итак, 1:0 не в вашу пользу идем дальше: вы вынуждаете пользователей выучить вашу навигационную систему, специальные условные обозначения и каламбуры, прежде чем они смогут попасть туда, куда им нужно. Еще одно очко не в вашу пользу. Кто-нибудь из новых клиентов еще остался на сайте? Вероятно, нет.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Гораздо лучше предоставить возможность ссылаться вглубь. На самом деле вы должны поддерживать такие ссылки. Например, в электронной торговле для этой цели используются специальные партнерские программы.<br /> <br /> <br /> <br /> </div></div></div></div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com5tag:blogger.com,1999:blog-8813401942215087530.post-65501819404032181872011-09-11T16:57:00.002+08:002011-09-20T14:14:03.801+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><h4 style="text-align: center;">Главная страница</h4><br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"><strong>Главная (или домашняя) страница</strong> - это флагман сайта, и ее <strong>дизайн</strong> должен отличаться от дизайна всех остальных страниц. Конечно, первая и остальные страницы должны быть выдержаны в одном стиле, но есть и различия. Например, на <strong>главной странице</strong> не должно быть кнопки «На главную» (Ноте), так как не очень-то приятно нажимать на кнопку для того, чтобы попасть на ту же самую страницу. Также на <strong>главной странице</strong> обычно представлен более крупный логотип компании, ее название и название сайта. Первая непосредственная цель любой главной страницы - ответить на вопросы: «Где я нахожусь?» и «Что делает этот сайт? » - и оба они требуют прямого указания полного имени. Ответы не должны быть представлены в форме устрашающих официальных формулировок, которые можно встретить на чрезмерно бюрократичных сайтах. Лучше, если и по дизайну будет понятно, какой цели может служить этот сайт для нового пользователя.<br /> Для нового пользователя, вероятно, самая важная функция первой страницы - это ответ на вопрос «Что же этот сайт делает?», а для большинства остальных первая страница - отправная точка для навигации по сайту. Обычно эта задача выполняется в виде списка разделов верхнего уровня иерархии, но особенности информационной архитектуры могут потребовать организовать входы верхнего уровня и по-другому.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Например, посетители сайта путешествий, нередко хотят заказать авиабилет, поэтому хорошей точкой входа для верхнего уровня такого сайта было бы определение мест отправления и прибытия.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"><strong>Первая страница</strong> - это также место для представления новостей или специальных предложений, которым вы хотите привлечь внимание всех посетителей. Но помните, основная масса приходит на сайт, чтобы сделать нечто конкретное. Очень редко люди хотят просто посмотреть, что происходит вашей компании и какие продукты вы намереваетесь выставить на продажу. Поэтому область новостей должна быть достаточно ограниченной оставлять большую часть страницы доступной для навигации. Исключением из этого правила служат специальные сайты новостей, на которые пользователи действительно часто приходят «посмотреть, что происходит», не имея никакой заранее определенной цели. Но и новостным сайтам важно помнить: посетители приходят сюда, чтобы узнать о текущих событиях и интересных историях, либо ищут старые статьи, уже давно убранные с главной страницы. Навигация остается приоритетной в любом случае. Возможность поиска необходима на первых страницах, так как многие пользователи не хотят бесконечно ходить по ссылкам, чтобы попасть туда, куда им нужно. Для сайтов, на которых первичным механизмом доступа является поиск, представляется разумным поместить окно поиска прямо в верхней части главной страницы. Для других сайтов может быть достаточно простой (но заметной) ссылки на страницу поиска. <br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Итак, <strong>главная страница</strong> должна предоставлять три следующие возможности: каталог основных содержательных разделов сайта (возможность навигации), краткую сводку основных новостей или специальных предложений и возможность поиска. Если все это хорошо сделано, то каталог и новости помогут пользователю, пришедшему на сайт в первый раз, понять, о чем же, собственно говоря, этот сайт рассказывает. Всегда смотрите на главную страницу именно под таким углом: она должна отвечать на вопрос: «Что этот сайт может для меня сделать? И не забудьте о названии компании и логотипе.<br /> <br /> <br /> </div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com5tag:blogger.com,1999:blog-8813401942215087530.post-23940228884527665672011-09-09T12:49:00.002+08:002011-09-19T12:52:02.780+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><h4 style="text-align: center;">Разработка сайта</h4><br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Обычно основное внимание уделяют <strong>дизайну страницы</strong>. Как-никак в современных веб-браузерах мы видим только одну страницу за один раз. Сам сайт никогда явно не представлен на экране. Разработка архитектуры сайта - более сложная задача и имеет более важное значение, чем разработка <strong>дизайна страницы</strong>.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Обычно, попадая на страницу, пользователь уже спустя короткое время понимает, что там можно сделать (согласен, пользователи не тратят время на то, чтобы внимательно изучать страницы, поэтому и возникают проблемы с удобством использования именно на уровне страниц). Но перенести пользователя на нужную страницу уже не так просто.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Проблема в том, что удобство использования сильно страдает, как только пользователь уходит с первой страницы и начинает перемещаться по сайту, решая свои задачи. Интернет был спроектирован как среда для простого чтения, и удобство его использования не улучшилось в ответ на все возрастающий уровень сложности задач, с которыми пользователям приходится справляться. Поэтому дизайн сайта должен быть, в первую очередь,&nbsp;простым, с как можно меньшим количеством элементов, отвлекающих внимание, должен иметь четкую информационную структуру и соответствующие инструменты навигации.<br /> <br /> <br /> <br /> </div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com0tag:blogger.com,1999:blog-8813401942215087530.post-44508621627986229432011-09-07T14:02:00.002+08:002011-09-19T16:59:45.410+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <h4 style="text-align: center;">Рисунки и фотографии</h4><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Количество графической информации на веб-страницах необходимо максимально ограничивать, поскольку загрузка графики требует значительного времени. От излишней графики следует попросту отказаться. В разряд такой графики попадает любая текстовая информация, представленная в графическом формате, за исключением текста, тесно связанного с общей концепцией оформления узла, включение которого в состав изображения обусловлено необходимостью.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Несмотря на это, пользователям нужно видеть фотографии образцов предлагаемой продукции, поскольку это является единственным способом познакомиться с ней воочию. На персональной странице целесообразно помещать фотографию или текст, говорящие о личности автора. Старая поговорка «лучше один раз увидеть, чем сто раз услышать» справедлива и для Интернета.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Устранить противоречия между этими двумя требованиями помогают гипертекстовые возможности Интернета. Количество графической информации на страницах верхних уровней следует сводить к минимуму, при просмотре этих страниц пользователь еще не успевает выбрать материалы, которые представляют для него интерес и нуждаются в иллюстрациях. На страницах, посвященных более узкий вопросам, количество иллюстративного материале&nbsp;может быть увеличено. На странице верхнего уровня, посвященной определенной продукции, можно поместить небольшую фотографию образца этой продукции, однако основной объем информации по-прежнему должен быть представлен текстом и&nbsp;табличными данными. Если пользователь действительно заинтересовался описываемым образцом, он может воспользоваться ссылками на странице описания для просмотра других фотографий этого образца. Эти фотографии должны быть достаточно крупными, чтобы давать потенциальному покупателю максимально полное представление о предлагаемой продукции.<br /> <br /> <h4 style="text-align: center;">Уменьшение размера изображения</h4><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Традиционным способом создания небольших версий изображений является уменьшение исходного изображения в графическом редакторе с помощью масштабирования.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">К сожалению, при изменении масштаба изображения уменьшаются настолько, что могут становиться абсолютно неразборчивыми. Применение кадрировки (обрезки краев изображения) позволяет&nbsp;сохранить детализацию на исходном уровне, однако при этом утрачивается определенная часть содержащейся в изображении информации. Оптимальным выходом в данной ситуации может стать совместное использование обоих указанных методов. Например, для получения уменьшенного образца, размер которого составляет 10% от размера исходного изображения, вначале следует обрезать изображение до 32% относительно исходного размера, а затем уменьшить его масштаб до 32% от размера версии после кадрировки. Размер полученного в результате этого варианта изображения составляет 0,32 хО,32=0,1 от исходного.<br /> <div style="margin-left: -20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcd8ve2NlfnN_hVv33mvSJfYWjVa6VWwOi4LD_xpEjrU1IDobbDKWz9cqvDiLC9b1rCCWOGL06LxyuhioXCdW6S5-dL1XwvJOyopvMf43KXyBRZEXYOXjICvdItzg3E_YbSFjXmUv_UAI/s1600/00008027.gif" imageanchor="1" style="margin-bottom: 1em; margin-right: 1em;"><img border="0" height="371" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcd8ve2NlfnN_hVv33mvSJfYWjVa6VWwOi4LD_xpEjrU1IDobbDKWz9cqvDiLC9b1rCCWOGL06LxyuhioXCdW6S5-dL1XwvJOyopvMf43KXyBRZEXYOXjICvdItzg3E_YbSFjXmUv_UAI/s400/00008027.gif" width="480" /></a></div><br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">В отдельных случаях исходный размер изображения слишком велик, чтобы оно могло быть размещено на основной веб-странице.<br /> <table><tbody> <tr> <td><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrFrHNXcvyt8X7xNg-baGWTMdLhlBxMYr8zXIAf9kLL3QIcT0JEtCaTJTPvNOYec8KDxiCBKS9lX6070aKlLl_f3V0B6IwmYwYz03WvH2u2j4oTxZ38egxOhrkIS39iNhzwBZvk2n1vw/s1600/00008027-2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrFrHNXcvyt8X7xNg-baGWTMdLhlBxMYr8zXIAf9kLL3QIcT0JEtCaTJTPvNOYec8KDxiCBKS9lX6070aKlLl_f3V0B6IwmYwYz03WvH2u2j4oTxZ38egxOhrkIS39iNhzwBZvk2n1vw/s200/00008027-2.gif" width="200" /></a></div><br /> </td> <td></td> <td><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrFrHNXcvyt8X7xNg-baGWTMdLhlBxMYr8zXIAf9kLL3QIcT0JEtCaTJTPvNOYec8KDxiCBKS9lX6070aKlLl_f3V0B6IwmYwYz03WvH2u2j4oTxZ38egxOhrkIS39iNhzwBZvk2n1vw/s1600/00008027-2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrFrHNXcvyt8X7xNg-baGWTMdLhlBxMYr8zXIAf9kLL3QIcT0JEtCaTJTPvNOYec8KDxiCBKS9lX6070aKlLl_f3V0B6IwmYwYz03WvH2u2j4oTxZ38egxOhrkIS39iNhzwBZvk2n1vw/s200/00008027-2.gif" width="200" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><br /> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIT4gLFA5N4JnGzUfAMSY-vuH5VZwl0V5cW5rq3EVCqF79xozpj09VO4pysffSB3qcn9F5Tgxy2X8GTHxLxi4-Fo3_8qI2yGmkh3uBg23MLm3KDQd5NX-Fvip_qWDcxlo643p29JWUbEw/s1600/00008027-11.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIT4gLFA5N4JnGzUfAMSY-vuH5VZwl0V5cW5rq3EVCqF79xozpj09VO4pysffSB3qcn9F5Tgxy2X8GTHxLxi4-Fo3_8qI2yGmkh3uBg23MLm3KDQd5NX-Fvip_qWDcxlo643p29JWUbEw/s1600/00008027-11.gif" /></a></div><br /> </td> <td></td> <td><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtnuFTehrK8hLTS0Aq2gWXYql0S_yD2KR5_04P83xVScrRZu7S58ImO5ywmr7TaExGivCHw6SEoPMk3LHm9V39IXzNphI1NAXLT_5zzMBAtAW9v0gFA4piTQ6jaJBCYI1OeOUYsM8Hhls/s1600/00008027-1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtnuFTehrK8hLTS0Aq2gWXYql0S_yD2KR5_04P83xVScrRZu7S58ImO5ywmr7TaExGivCHw6SEoPMk3LHm9V39IXzNphI1NAXLT_5zzMBAtAW9v0gFA4piTQ6jaJBCYI1OeOUYsM8Hhls/s1600/00008027-1.gif" /></a></div><br /> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUGoBpLgP_-K7955ay-H0ChDtHOcYoMd2WD5zM42JRt_f8Vl4WRMEJ9KVBfLzeusLtcg9fxzLSfb4HmO851MFYep5tK7EBOBlBCBKX84NzrN51CihucAsOOFaoMkLA0Ut1b0DUYRB5hE/s1600/00008027-22.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUGoBpLgP_-K7955ay-H0ChDtHOcYoMd2WD5zM42JRt_f8Vl4WRMEJ9KVBfLzeusLtcg9fxzLSfb4HmO851MFYep5tK7EBOBlBCBKX84NzrN51CihucAsOOFaoMkLA0Ut1b0DUYRB5hE/s1600/00008027-22.gif" /></a></div><br /> </td> <td></td> <td><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhcz2foe_dXXu4vag3REtu3tfUD3XAbWzBmPKyyZINCPJo8MD0g9gmjddHn926F4G5DAWxrgGAOQ_Lm5BXQCt5Er9bKyGdCMz0FKkJ1DGlCQXKniYfIjuisPuxcpvA3cRa4KWav33InEE/s1600/00008027-3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhcz2foe_dXXu4vag3REtu3tfUD3XAbWzBmPKyyZINCPJo8MD0g9gmjddHn926F4G5DAWxrgGAOQ_Lm5BXQCt5Er9bKyGdCMz0FKkJ1DGlCQXKniYfIjuisPuxcpvA3cRa4KWav33InEE/s1600/00008027-3.gif" /></a></div><br /> </td> </tr> </tbody></table><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Два традиционных способа уменьшения размера изображения предполагают его кадрировку (рисунок слева) или масштабирование (рисунок справа). <br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">К сожалению, кадрировка изображения приводит к потере контекста, особенно в случае, когда требуется значительное уменьшение его размера. При масштабировании утрачиваются мелкие детали изображения, в результате чего становится сложно разобраться в его содержании.<br /> <br /> <div style="margin-left: -20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcd8ve2NlfnN_hVv33mvSJfYWjVa6VWwOi4LD_xpEjrU1IDobbDKWz9cqvDiLC9b1rCCWOGL06LxyuhioXCdW6S5-dL1XwvJOyopvMf43KXyBRZEXYOXjICvdItzg3E_YbSFjXmUv_UAI/s1600/00008027.gif" imageanchor="1" style="margin-bottom: 1em; margin-right: 1em;"><img border="0" height="371" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcd8ve2NlfnN_hVv33mvSJfYWjVa6VWwOi4LD_xpEjrU1IDobbDKWz9cqvDiLC9b1rCCWOGL06LxyuhioXCdW6S5-dL1XwvJOyopvMf43KXyBRZEXYOXjICvdItzg3E_YbSFjXmUv_UAI/s400/00008027.gif" width="480" /></a></div><br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_3O66cwZJVW4M8h1KZBk-ipbo67KPE_4m-Q8xEpfixqlUhCwNT6rNBGIBrkGMO2AMX9_T26lWEnS5YQqluEJJXRATOKI8np1ANWc25_H8XybrZa1bw71kQ_Bojv9MR6_822NKi10F4E/s1600/00008027-11.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_3O66cwZJVW4M8h1KZBk-ipbo67KPE_4m-Q8xEpfixqlUhCwNT6rNBGIBrkGMO2AMX9_T26lWEnS5YQqluEJJXRATOKI8np1ANWc25_H8XybrZa1bw71kQ_Bojv9MR6_822NKi10F4E/s1600/00008027-11.gif" /></a></div><br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTlT5qBeqREZCL9Rb99inaUx_vVwLpNJE6owwsUNAPATTjqBce-qALCu76JcplBskn5lDBSkfTyHl7l9M5x1hCW3ivzq_9LQmRtf5pQkyNPQN5fW5TztVWVuXBxCnGRfSkfESqneIul70/s1600/00008027-33.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTlT5qBeqREZCL9Rb99inaUx_vVwLpNJE6owwsUNAPATTjqBce-qALCu76JcplBskn5lDBSkfTyHl7l9M5x1hCW3ivzq_9LQmRtf5pQkyNPQN5fW5TztVWVuXBxCnGRfSkfESqneIul70/s1600/00008027-33.gif" /></a></div><br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Использование смешанного метода позволяет сохранить как контекст, так и степень детализации изображения даже при значительном уменьшении его размера. В показанных примерах уменьшение изображения выполнялось наполовину за счет кадрировки (с сохранением центра области кадрировки в центре действия представленной изображением сцены) и наполовину - за счет масштабирования.<br /> <br /> </div></div></div></div></div></div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com2tag:blogger.com,1999:blog-8813401942215087530.post-63564684656397596712011-09-06T11:12:00.004+08:002011-09-19T16:59:56.278+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><h4 style="text-align: center;">Удобочитаемость</h4><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Если пользователь оказывается не в состоянии прочитать текст, все остальное — дизайн, быстрота загрузки, информационное наполнение — не имеет никакого смысла. Существует ряд основных правил, которых следует придерживаться для обеспечения разборчивости при публикации материалов.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"><strong>Фон и текст</strong> страницы должны быть оформлены контрастными цветами. Наилучшая разборчивость обеспечивается при использовании черных символов на белом фоне (так называемого позитивного текста). Также хорошо воспринимается белый текст на черном фоне (негативный текст). Несмотря на то что уровень контрастности в последнем случае аналогичен позитивному тексту, негативная цветовая схема способствует некоторому рассеянию внимания читателя и несколько замедляет чтение. <strong>Разборчивость</strong> еще больше страдает, если цвет текста несколько светлее черного, в особенности, если при этом фоновый цвет несколько темнее белого. Наиболее неудобны для чтения такие цветовые схемы, как розовый цвет на зеленом фоне: эта схема характеризуется слишком низкой контрастностью и, кроме того, не позволяет читать текст пользователям, страдающим нарушением восприятия красного и зеленого цветов.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">В качестве фона страницы следует использовать либо однотонный цвет, либо узор, имеющий минимальную контрастность. Фоновые изображения затрудняют распознавание текста глазу человека.<br /> Текст должен быть набран достаточно крупным шрифтом, чтобы его могли читать даже пользователи с ослабленным зрением. Текст, набранный мелким шрифтом, может быть воспринят как сноска или примечание, которые, как правило, остаются без внимания посетителей.<br /> Текст должен быть статичным. Движущийся, мерцающий или изменяющийся в размерах текст воспринимается значительно хуже, нежели статичный.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">В большинстве случаев текст должен быть выровнен по левому краю. Если начало всех строк находится на одном уровне по горизонтали, чтение текста значительно ускоряется в сравнении с текстом, выровненным по центру или по правому краю. Конечно, выравнивание по правому краю или по центру отдельных небольших фрагментов текста вполне допустимо, однако основной текст должен быть выровнен по левому краю. Аналогично, восприятие списков значительно облегчается при выравнивании первого слова каждого из элементов списка по левому краю вдоль одной линии.<br /> Поскольку современные мониторы имеют сравнительно низкую разрешающую способность, текст, набранный мелким шрифтом, воспринимается значительно лучше при оформлении его с использованием рубленых шрифтов, таких как Verdana.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Для четкого отображения засечек шрифта размером 10 пунктов попросту не хватает пикселов. В тоже время, большинство людей предпочитает читать текст, набранный шрифтами с засечками (таким шрифтом набрана большая часть текста этой статьи, включая текст, который вы сейчас читаете), таким образом, мы оказываемся перед лицом своего рода парадокса. Разборчивость должна быть определяющим критерием в случае очень мелких шрифтов (9 пунктов и менее). Такой текст должен набираться с использованием рубленого шрифта.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">И НАКОНЕЦ, НЕ СЛЕДУЕТ НАБИРАТЬ ТЕКСТ ПРОПИСНЫМИ БУКВАМИ. ЧТЕНИЕ ТАКОГО ТЕКСТА ВЫПОЛНЯЕТСЯ ПРИМЕРНО НА 10% МЕДЛЕННЕЕ. ЧЕМ ТЕКСТА, НАБРАННОГО С ИСПОЛЬЗОВАНИЕМ СТРОЧНЫХ БУКВ, ПОСКОЛЬКУ ВОСПРИЯТИЕ СИМВОЛОВ, ИМЕЮЩИХ ОДИНАКОВУЮ ВЫСОТУ, НЕСКОЛЬКО ЗАТРУДНЕНО. ЭТОГО СЛЕДУЕТ ИЗБЕГАТЬ.<br /> <br /> <br /> <br /> </div></div></div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com4tag:blogger.com,1999:blog-8813401942215087530.post-10511530360349818112011-09-04T11:02:00.001+08:002011-09-19T17:00:07.180+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><h4 style="text-align: center;">Написание заголовков</h4><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Требования, предъявляемые к <strong>заголовкам</strong> в Интернете, коренным образом отличаются от требований к заголовкам в печатных изданиях, поскольку их предназначение также различно. Ниже описываются два основных различия в использовании заголовков этих типов.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"><strong>Заголовки в Интернете</strong> нередко используются в отрыве от контекста: в рамках списков статей, в результатах поиска и в меню закладок браузера или другого средства просмотра. В ряде случаев заголовки могут быть абсолютно не привязаны к контексту. Заголовок страницы отображается в результатах поиска по любой теме, следовательно, использование в заголовке различной рода иносказаний может привести к неправильному пониманию его истинного смысла.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Даже в том случае, если заголовок отображается в соответствующем контексте, трудности, сопряженные с чтением текста в электронном виде, и ограниченный объем информации, которая может быть отображена на экране в определенный момент времени, не позволяют пользователям досконально изучать приводимую на веб-страницах информацию. В печатных изданиях заголовки тесно связаны с фотографиями, элементами оформления, подзаголовками и основным текстом, которые могу восприниматься читателем в совокупности. Электронное представление позволяет одновременно отображать значительно меньшие объемы информации, причем восприятие этой информации затруднено, отчего многие люди и избегают читать тексты с экрана монитора. При просмотре списка материалов на начальной страниц или странице пресс-релиза пользователи нередко обращают внимание только на выделенные заголовки, не изучая описания статей.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">В свете вышесказанного тексты заголовков должны быть самодостаточными и обеспечивать точную! передачу смысла даже в том случае, когда сопутствующая им информация недоступна. Конечно, для ознакомления с полным текстом стать: достаточно щелкнуть по заголовку, однако пользователи, как правило, не могут позволить себе щелкать по каждому отдельному заголовку в Сети. Могу предсказать, что в ближайшее время пользователи будут перегружены информацией настолько что будут удалять без прочтения все получаемы сообщения электронной почты, темы которых не заинтересовали их.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">При создании списков ресурсов, созданных другими авторами, как правило, имеет смысл переписывать заголовки этих материалов самостоятельно. В настоящее время лишь немногие понимают искусство написания текстов для Сайтов, поэтому для обеспечения удобства использования авторам списков ресурсов стоит проделывать эту работу самостоятельно.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">При создании заголовков в Интернете необходимо руководствоваться приводимыми ниже принципами.<br /> • Заголовок должен четко описывать содержание соответствующей ему статьи, представляя собой предельно краткую выдержку из нее.<br /> • Заголовок должен быть написан понятным языком; необходимо избегать каких бы то ни было иносказаний и «эффектных» формулировок.<br /> • Следует избегать формулировок, предлагающих пользователю щелкнуть по заголовку, чтобы ознакомиться с содержанием статьи. Пользователи слишком часто попадались на подобные уловки и потратят время на загрузку страницы, только если будут уверены, что приводимые на этой странице материалы представляют для них интерес. В печатных изданиях, увидев такой заголовок, читатель может ознакомиться с содержанием статьи из любопытства. В Интернете же это сопряжено с дополнительными накладными расходами.<br /> • Первое слово должно быть наиболее информативным, что будет способствовать оптимальному позиционированию в алфавитных списках и облегчит беглое ознакомление. Например, можно начинать заголовки с названия организации, имени автора или понятия, представляющего собой предмет обсуждения статьи.<br /> • Названия страниц не должны начинаться с одного и того же слова. Такие названия будет сложно различать при беглом просмотре списка. Общие слова лучше всего помещать в конец названий.<br /> <br /> <br /> <br /> </div></div></div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com2tag:blogger.com,1999:blog-8813401942215087530.post-62575549345636708172011-09-03T10:43:00.002+08:002011-09-19T17:00:13.621+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><h4 style="text-align: center;">Названия страниц</h4><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">При подготовке информации для Интернета значительное внимание следует уделять вопросам, имеющим отношение к последующему поиску этой информации. Посетители любят пользоваться поисковыми системами как для поиска материалов в пределах текущего узла, так и для поиска в Интернете в целом. Для людей, использующих поисковые системы, тот или иной сайт существует исключительно в виде названия, отображаемого в результатах поиска.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"><strong>HTML</strong> позволяет указывать в разделе заголовка страницы ее название. <strong>Названия веб-страниц</strong> имеют большое значение, поскольку они нередко выступают в виде ссылок на соответствующие страницы. Кроме того, названия страниц отображаются во всевозможных меню навигации в браузерах, таких как списки закладок (избранные сайты) или ранее посещенные сайты. Во многих из перечисленных ситуаций названия веб-страниц рассматриваются в отрыве от основного контекста. Таким образом, необходимо, чтобы названия страниц были достаточно информативными и позволяли правильно судить о характере содержащихся на этих страницах материалов. С другой стороны, слишком длинные названия также неудобны, поэтому оптимальное количество слов в названии должно составлять от 2 до 6. Название домашней страницы может состоять даже из одного слова.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"><strong>Название страницы</strong> также можно отнести к разряду информационного наполнения веб-пространства. Каждое название должно представлять собой образец четкости формулировки. Автор должен объяснить потенциальному посетителю, какую ин формацию можно найти на соответствующей странице, причем в его распоряжении имеется всего 40-60 символов. Если название недостаточно четко описывает содержание страницы, пользователь никогда не откроют ее.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Каждая из страниц должна иметь <strong>уникальное название</strong>. Представьте себе ситуацию, когда вы посетили, скажем, семь страниц с одинаковыми названиями, а затем пытаетесь вернуться к одной из них, используя список посещенных страниц. Кроме того, серьезные неудобства возникают при создании закладок на несколько различных страниц подобного узла, поскольку при этом меню закладок (избранных страниц) будет содержать несколько идентичных элементов.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">И наконец, названия должны быть приспособлены для беглого ознакомления. С этой целью следует помещать наиболее информативные фразы в начало названия, причем предпочтительнее всего начинать название со слова, которое с наибольшей вероятностью будет отражать потребности потенциального посетителя. Весьма часто встречается ошибка, когда в качестве названия используются такие фразы, как «Добро пожаловать на узел ААА». Гораздо лучшим вариантом было бы использование в качестве названия просто «ААА». Названия не обязательно должны представлять собой законченные грамматические структуры - скорее они должны быть выдержаны в духе рекламных слоганов.<br /> </div></div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com2tag:blogger.com,1999:blog-8813401942215087530.post-27600538349677860982011-09-02T16:31:00.004+08:002011-09-19T17:00:27.956+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">В конечном итоге, основной целью посещения любого сайта является получение определенной <strong>информации</strong>. Все остальное - лишь дополнение, и смысл <strong>дизайна</strong> оказать людям необходимую помощь в получении доступа к этой <strong>информации</strong>. Посещение сайта можно сравнить с походом в театр: вы ведь хотите, чтобы зрители, покидая зал, обсуждали достоинства спектакля, а не восхищались костюмами актеров.</div><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Конечно, хорошие костюмы в немалой степени определяют успех представления и помогают донести до зрителя идею автора и режиссера. Однако, в конечном счете, самое важное - сам спектакль.<br /> Исследования показывают, что большинство пользователей уделяет основное внимание информационному наполнению. Попадая на новую страницу они немедленно обращаются к той ее области, которая содержит полезную информацию, просматривают заголовки и другие элементы, указывающие на содержание страницы. И лишь затем, если они приходят к заключению, что содержащаяся в странице информация не достойна внимания, они обращаются к области навигации, чтобы перейти на какой-либо другой странице.<br /> Информация прежде всего.</div><br /> <br /> <h4 style="text-align: center;">Создание текстов</h4><div style="text-align: justify; text-indent: 3em;"><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;">Характер текста веб-страницы определяет не только ее содержание, но и впечатление, производимое на пользователя, поскольку посетители в первую очередь обращают внимание на текст и заголовки. Отсутствие в тексте грамматических ошибок имеет большое значение, однако также немаловажно представлять информацию в форме, позволяющей акцентировать внимание посетителя на наиболее существенных моментах повествования.</div><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;">При создании текстов нужно придерживаться трех основных рекомендаций:</div><br /> <ul><li><span style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Следует соблюдать лаконичность. На страница должно размещаться не более 50% текста, который может быть использован для передачи топ материала в печатном издании. </span></li> <li><span style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Текст должен быть удобным для беглого ознакомления. Не следует заставлять посетителя читать крупные абзацы текста. Вместо этого лучше использовать небольшие абзацы, подзаголовки и маркированные списки.<br /> </span></li> <li><span style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Информацию значительного объема следует разбивать на несколько страниц, связанных между собой гиперссылками.<br /> </span></li> </ul><br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal;">И четвертое правило (относится скорее к руководству проекта) необходимо пользоваться услугами редактора. Для создания качественного информационного наполнения требуется наличие квалифицированного персонала, специализирующегося на вопросах представления текстовой информации в Интернете и способного подготовить эту информацию для оформления в соответствии с принятыми в организации стандартами.<br /> </div></div><br /> <br /> <h4 style="text-align: center;">Кратность</h4><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Исследования показали, что чтение текста с экрана монитора происходит приблизительно на 25% медленнее, чем чтение печатного текста. Даже те пользователи, которые не знакомы с результатами подобных исследований, отмечают, что они испытывают некоторые неудобства при чтении информации, представленной в электронном виде. В результате этого люди избегают чтения больших объемов текста с экрана монитора. Таким образом, объем текста следует снижать на 50% (снижение объема на 25% оказывается недостаточным), поскольку в данном случае значение имеет не скорость чтения, но и удобство восприятия информации. Также известно, что пользователи не любят прибегать к прокрутке, что является еще одной причиной для сокращения объема страниц.<br /> </div><br /> </div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com0tag:blogger.com,1999:blog-8813401942215087530.post-8806100605553804162011-08-29T11:36:00.026+08:002011-09-19T17:00:31.283+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><h4 style="text-align: center;">Ссылки на ваш сайт</h4><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"><strong>Ссылки</strong> на ваш сайт (входящие ссылки) могут стать одним из самых значительных источников трафика. Когда другие помещают ссылки на вас, они тем самым высказывают вам одобрение и обеспечивают бесплатную рекламу (если владелец внешнего сайта следует моим советам и аккуратно подбирает ссылки на другие сайты). Вы должны быть благодарны за такие ссылки и сделать все, что только возможно, для их поддержки.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Самый простой способ обеспечить <strong>ссылки на ваш сайт</strong> - это иметь постоянный адрес для каждой страницы. Когда пользователи видят URL вашей страницы, у них должна быть возможность скопировать его на собственную страницу в качестве ссылки на ваш сайт, при этом они должны быть уверены, что ссылка будет работать постоянно. Если у вас есть страницы, которые «исчезнут» в конкретный день, скажите об этом; те, кто помещает у себя ссылки на ваш сайт, не будут сбиты с толку.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Иногда у страницы может быть временный URL помимо постоянного. Например, «текущая» версия колонки может быть виртуальным адресом и каждый раз указывать на страницу, которая в этот момент является текущей. В таком случае можно использовать оба адреса в качестве ссылки на вашу страницу, потому как одни захотят поместить ссылку на текущую колонку, а другие - на определенные колонки по заданной теме.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Лучший способ получения входящих ссылок - создание настолько хорошей страницы, что все захотят поместить на нее ссылку. Кроме того, гораздо проще ссылаться на ваши страницы, если они сфокусированы на определенных понятиях, так что другим авторам удобно будет показать эту информацию своим читателям. Вряд ли кто-то поместит ссылку на страницу, где перемешаны различные темы; к тому же это может поставить в тупик тех, кто придет на такую страницу по ссылке - они просто не смогут понять, почему тут оказались.<br /> <br /> <h4 style="text-align: center;">Ссылки на подписку и регистрацию</h4><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Вы можете распрощаться с новыми пользователями, приходящими к вам, по ссылкам, если будете требовать от них подписки или регистрации. Не важно, будут ли ссылаться на вашу страницу другие, если для того чтобы прочитать какую-то информацию, надо будет сначала подписаться. Даже регистрация пользователей может стать помехой для навигации, что сократит число ссылок на ваш сайт - пользователь, пришедший за информацией, но получивший вместо этого экран с требованием о регистрации, вряд ли будет обрадован.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Если на вашем сайте требуется подписка или регистрация, я рекомендую сделать страницы для свободного доступа с определенными адресами; на эти страницы пользователи будут попадать, минуя окно входа. Если ваши свободно доступные страницы будут описывать предоставляемые вами услуги и представлять интерес для других авторов, то тогда вы сможете привлечь много новых пользователей, некоторые из которых могут стать вашими постоянными клиентами. Вы должны сделать такие страницы доступными для создания ссылок на них и установить простой механизм, позволяющий другим авторам получать адрес, который они смогут использовать в качестве ссылки.<br /> <br /> <h4 style="text-align: center;">Рекламные ссылки</h4><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"><strong>Реклама</strong> - особый источник входящих ссылок, потому как вы контролируете ссылки сами, если платите за рекламу. Я рекомендую в рекламном сообщении помещать ссылки на бесплатные страницы (продолжающие мысль, начатую в рекламе), а не ссылку на главную страницу сайта.<br /> Исследования рекламы в Интернете показали, что около 20-30% пользователей, которые щелкают по рекламному баннеру, сразу же нажимают кнопку « Назад», как только понимают, что попали на корпоративную страницу. Я удивился только тому, что эти цифры не больше. В конце концов, если пользователи попадают на вашу главную страницу, остается надеяться только на их собственные способности в поиске ценной информации, которая имеет отношение к причине, заставившей их щелкнуть по баннеру. Учитывая, что на большинстве сайтов навигация очень сложна, это не самая лучшая идея.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Некоторые дают ссылку на центральную страницу в баннере, так как они хотят заставить потенциальных клиентов обойти весь сайт. Что ж, вы можете так поступать, если вам это нравится, но у пользователей вряд ли будут мотивы «сражаться» с вашим сайтом. Ваш сайт для них отнюдь не центр вселенной. Пользователи в Сети хотят получить информацию сразу же, не больше чем через пять щелчков кнопкой мыши. Тогда и только тогда, когда на странице, куда приводит рекламный баннер, заинтересовавший пользователя, можно найти ценную информацию, они могут уделить вашему сайту больше внимания.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Что касается самого рекламного баннера, то он должен разрабатываться как гиперссылка. То есть он должен ясно давать понять пользователям, что они смогут найти на странице, на которую он приведет, и зачем пользователям надо туда идти. Слишком много баннеров просто кричат: «Посмотрите на меня!», надоедая при этом анимацией. Такие баннеры не вызывают желания щелкнуть по ним, поскольку никакой значимой информации, кроме как «Щелкните здесь!», они не содержат.<br /> <br /> <br /> <br /> </div></div></div></div></div></div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com0tag:blogger.com,1999:blog-8813401942215087530.post-15153105487577065782011-08-24T10:43:00.006+08:002011-09-19T17:00:45.290+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><h4><br /> Графический дизайн</h4><div><br /> </div></div><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">При разработке традиционного <strong>графического интерфейса</strong> пользователя (GUI) вы контролируете каждый пиксел на экране: если вы выводите на экран окно, то можете быть уверены, что на экране всех пользователей это окно будет выглядеть точно так же, как и у вас. Вы знаете, для какой системы проектируете свои разработки, вы знаете, какие шрифты там установлены, какие размеры экрана чаще всего встречаются, кроме того, у вас есть руководство по стилю оформления от производителя, предписывающее правила оформления элементов окна. Вы можете затенить те пункты меню, которые не используются, или вывести диалоговое окно, которое заблокирует ввод до тех пор, пока пользователь не ответит на поставленный вопрос.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">В <strong>Интернете</strong> же навигацией по страницам полностью управляет пользователь. Он может пойти таким путем, о котором дизайнеры даже и не задумывались. Например, он может сразу же попасть в недра сайта с каких-нибудь поисковых систем, минуя главную страницу. Пользователь может настроить собственное меню закладок и тем самым создать интерфейс для вашего сайта.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;"><strong>Веб-дизайнеры</strong> должны приспособиться и поддержать навигацию, контролируемую пользователем. В некоторых случаях можно насильно направить пользователей по установленным путям и предотвратить переход сразу к конкретным страницам, однако сайты с такой навигацией выглядят слишком строго и довлеют над пользователем. Гораздо лучше обеспечить свободу перемещения по сайту и, например, на каждой странице поместить небольшой логотип компании со ссылкой на начальную страницу (чтобы обеспечить возможность перейти к содержимому сайта и элементам навигации для тех, кто попал сразу на внутреннюю страницу).<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-align: justify; text-indent: 3em;">Последнее различие между двумя интерфейсами скорее организационное и историческое, нежели техническое. Когда речь идет о графическом интерфейсе пользователя, мы можем вспомнить множество исследований, проведенных в крупных компаниях по-настоящему грамотными специалистами, наподобие <strong>Брюса Тогнацини</strong> (Bruce Tog-nazzini) в Apple и целой команды мастеров в <strong>Xerox PARC</strong>. В результате плохие идеи были отвергнуты, а хорошие - воплощены в виде общих принципов еще задолго до того, как графический интерфейс стал доступен среднему пользователю. Интернет же, напротив, развивается прямо по ходу нашего с вами разговора, все эксперименты проводятся непосредственно внутри него (а не в лаборатории с включенной видеозаписью), а нам с вами уготована почетная роль подопытных кроликов.<br /> <br /> <br /> <br /> </div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com2tag:blogger.com,1999:blog-8813401942215087530.post-35288560441571495432011-08-23T15:31:00.005+08:002011-09-19T17:00:48.003+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-indent: 3em; text-align:justify;"><strong>Дизайн страницы</strong> - это то, что видно сразу же. С современной технологией браузеров пользователи могут видеть только одну страницу в определенный момент времени (или, в крайнем случае, две или три, если размер экрана позволяет увидеть несколько одновременно открытых окон). Эта глава посвящена простоте использования видимой (поверхностной) части сайта - тому, что находится на отдельных страницах.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-indent: 3em;text-align:justify;"><strong>Дизайн сайта</strong>, тем не менее, зачастую более важен для обеспечения простоты, так как пользователи никогда даже не приблизятся к нужным страницам, если только сайт не спроектирован в соответствии с их нуждами, и если его схема навигации не позволяет найти то, что нужно. Вопросы, связанные с <strong>дизайном сайта</strong> как структурой содержимого каждой страницы, будут рассмотрены в далее.<br /> <br /> <div style="text-align: center;"><h4>Неподвижные области экрана</h4></div><div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-indent: 3em;text-align:justify;">На странице должна преобладать информация, представляющая интерес для пользователя. К сожалению, очень часто встречаются сайты, где элементам навигации отводится места больше, чем информации, которая предположительно может оказаться интересной для пользователя. Элементы навигации - это необходимость, но их использование не должно стать самоцелью; более того, надо постараться как можно сильнее сократить их использование.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-indent: 3em;text-align:justify;">В качестве интересного упражнения попробуйте посмотреть на основные области страницы и прикинуть, какая доля пространства используется для различных целей. В примерах, приведенных на рисунках, я учитывал место, занимаемое браузером и операционной системой. И даже если веб-дизайнеры обычно не могут повлиять на это пространство, пользователям нет до этого дела. Все, что знает пользователь - это то, что на экране у него определенное количество областей, и только 20% или 14% из них используется для отображения информации, представляющей интерес для пользователя. Исходя из этой схемы, становится понятно, что незаполненное пространство не так бесполезно, как это может показаться, и что было бы ошибкой создавать страницы с компактной информацией. Белые пространства на странице помогают зрительно разбить информацию на отдельные группы. Если вы можете выбирать, что использовать в качестве разделителя для двух групп информации, то лучше выбрать пустой белый промежуток, нежели сплошную линию. В большинстве случаев это выглядит лучше, и, к тому же, страница с таким разделителем загружается быстрее.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-indent: 3em;text-align:justify;">Я не считаю, что белые области - это напрасная трата пространства, если они являются частью дизайна навигации или содержания сайта. Разумеется, нельзя полностью избежать пустых пространств, так как практически невозможно создать страницу, которая отображалась бы идеальным прямоугольником во всех браузерах и при любых обстоятельствах. Все равно будут возникать некоторые промежутки.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-indent: 3em;text-align:justify;">Как правило, содержательная информация должна занимать, по крайней мере половину страницы, лучше всего, если под нее отведено до 80% пространства страницы. Элементы навигации не должны занимать больше 20% пространства страницы. Тем не менее, эти пропорции могут меняться для начальных страниц и промежуточных страниц навигации. С точки зрения улучшения эксплуатационных характеристик, оптимальным решением был бы отказ от рекламы. Если реклама вам действительно нужна, то лучше расположить ее в верхней части страницы, вместе с элементами навигации, уменьшая тем самым долю, занимаемую элементами навигации на странице.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-indent: 3em;text-align:justify;">Общий принцип для дизайна любого пользовательского интерфейса - просмотреть все элементы дизайна и по очереди удалять их. Если дизайн не нарушается без определенных элементов, значит, от них надо отказаться. Простота всегда побеждает сложность, особенно в Интернете, где лишние 5 байт — это дополнительная миллисекунда, загрузки страницы.<br /> <div style="font-family: Arial, Helvetica, sans-serif; line-height: normal; text-indent: 3em;text-align:justify;">Когда речь идет об Интернете, невозможно предсказать, какой монитор будет у пользователя и какого размера окно будет отведено для отображения страницы. В будущем будут преодолены проблемы взаимодействия браузеров и серверов, в результате страница будет оптимизирована для вывода на каждом конкретном мониторе. Например, картинки будут уменьшаться, если они выводятся на мониторе с маленьким разрешением. Или, например, листы стилей с более плотным расположением информации будут посылаться, если используется монитор с маленьким разрешением, и, напротив, с более свободным расположением, если доступно больше места для отображения информации. Но на сегодня такое предсказание остается всего лишь мечтой, и поэтому необходимо обеспечить работоспособность одного и того же дизайна страницы на различных мониторах.<br /> <br /> <br /> </div></div></div></div></div></div></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com2tag:blogger.com,1999:blog-8813401942215087530.post-85213653182614772052011-08-19T12:32:00.009+08:002011-09-19T17:01:01.278+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div class="Style3" style="line-height: normal; margin-right: .7pt; mso-pagination: widow-orphan; text-indent: 42.55pt;"><div style="text-align: justify;"><span class="FontStyle23"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Есть два основных подхода к <b>дизайну</b>: артистичес­кий, позволяющий вам выразить себя, и техничес­кий, когда все усилия направлены на решение проблем пользователя. В этом блоге рассматрива­ется технический подход. Я понимаю, что в Сети есть потребность и в <b>искусстве</b>, и в юморе, но счи­таю, что основной целью большинства сетевых про­ектов должно быть обеспечение пользователей прос­тым механизмом для решения их задач.<o:p></o:p></span></span></div></div><div class="Style3" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: .7pt; margin-right: .95pt; margin-top: 0cm; mso-pagination: widow-orphan; text-indent: 42.55pt;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="FontStyle23">Я описываю весьма систематизированный подход к проектированию, состоящий из последователь­ности методов, которые может использовать лю­бой, чтобы выяснить потребности пользователей и распознать сложности, возникающие при работе с сайтом. Рассматривая сетевой проект как программ­ный продукт, гораздо проще составить график ра­бот и одновременно улучшить качество сайта. На самом деле применение методов, позволяющих об­легчить использование сайта, иногда приводит к последовательному улучшению всего сайта в целом, это касается как первоначального </span><span class="FontStyle17">дизайна </span><span class="FontStyle23">так и последующих доработок.<o:p></o:p></span></span></div></div><div class="Style3" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: .7pt; margin-right: 4.3pt; margin-top: 0cm; mso-pagination: widow-orphan; text-indent: 42.55pt;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="FontStyle23">В этой блоге вы найдете множество правил, принципов, советов и методов. Все они получены в результате применения того, что по настоящему работает, когда пользователи пытаются выполнить в Сети реальные </span><span class="FontStyle17">задачи</span><span class="FontStyle17">. </span><span class="FontStyle23">Начиная с первых дней я наблюдал за сотнями </span><span class="FontStyle17">пользо</span><span class="FontStyle23">вателей, пользующихся сотнями сайтов, плюс, конечно же, за сотнями пользователей различных типов информационных систем, доступных в Сети.<o:p></o:p></span></span></div></div><div class="Style3" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: .95pt; margin-right: 2.15pt; margin-top: 0cm; mso-pagination: widow-orphan; text-indent: 42.55pt;"><div style="text-align: justify;"><span class="FontStyle23"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Я не утверждаю, что всем моим советам надо следовать, воплощая их в жизнь с точностью до последней запятой. Опытный специалист знает, когда надо следовать правилам, а когда нет. Но суметь отклониться отправил, твердо зная, что это только улучшит проект, можно, лишь выучив назубок эти правила. Кроме того, основной принцип таков — через правила можно перешагнуть только в том случае если для этого есть хорошо обоснованная причина,<o:p></o:p></span></span></div></div><div class="Style3" style="line-height: normal; margin-right: .25pt; mso-pagination: widow-orphan; text-indent: 42.55pt;"><div style="text-align: justify;"><span class="FontStyle23"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">У <b>технического</b> подхода есть одно большое преиму­щество: когда вы не знаете, какой вариант дизайна предпочесть, вы можете поставить этот вопрос пе­ред посетителями вашего сайта и выбрать ответ, исходя из реальных данных. Можно ли найти нуж­ную информацию быстрее, если использовать ва­риант А? Какие мнения у посетителей по поводу дизайна А и дизайна Б? Получив ответы на эти и подобные им вопросы, выбирайте тот вариант, ко­торый набрал больше голосов, а не тот, который нравится лично вам.<o:p></o:p></span></span></div></div><div class="Style3" style="margin-left: 0.95pt; text-indent: 42.55pt;"><div style="text-align: justify;"><span class="FontStyle23"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Конечно же, применяя только научные методы, вы далеко не уйдете. Вдохновение и творческий под­ход не менее нужны при проектировании. Исполь­зование только технического подхода, которому может последовать каждый, поможет вам обнару­жить, что пользователи сталкиваются с&nbsp;проблемами&nbsp;при навигации или не могут найти кнопку поис­ка на вашей домашней странице. Вооружившись этими сведениями для улучшения схемы навигации или перемещения кнопки поиска на более подходящее место, не думайте, что все сделано. Вам нужно еще немножко вдохновения. Имейте в виду, что нововведение состоит на 10% из вдохновения и на 90% из стараний. Чтобы найти подходящий вариант&nbsp;<b style="line-height: normal;">дизайна</b>, а отнюдь не идеи о красивом&nbsp;дизайне, который не пригоден для использования, надо понаблюдать за пользователями, выяснить, что им нра­вится, что кажется простым, что заводит в тупик. Лучшие результаты достигаются при&nbsp;использовании&nbsp;<b style="line-height: normal;">технического</b> подхода и усиленном внимании к реакции пользователей.</span></span></div></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com2tag:blogger.com,1999:blog-8813401942215087530.post-20041877110547729642011-08-11T16:35:00.005+08:002011-09-19T12:27:00.433+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglg6xDxCcKgTJZnLqy5Oh1hjxN-hFqtHzzawhLSVVONGzPHa9Ic16HEiGNrHx3NB4kJokDUAyMWQkBIb7b3U3rAdDq4M2BNisIQKIjDFdvIcy2yLwY8Bfrzr34KhcNOVa_Iw58Ay_csNo/s1600/Fonopci1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglg6xDxCcKgTJZnLqy5Oh1hjxN-hFqtHzzawhLSVVONGzPHa9Ic16HEiGNrHx3NB4kJokDUAyMWQkBIb7b3U3rAdDq4M2BNisIQKIjDFdvIcy2yLwY8Bfrzr34KhcNOVa_Iw58Ay_csNo/s320/Fonopci1.jpg" width="320" /></a></div><span style="color: black;"><span class="Apple-style-span" style="font-family: &quot;Arial&quot;, &quot;Helvetica&quot;, sans-serif;"></span></span><br /> <div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span style="color: black;"><span class="Apple-style-span" style="font-family: &quot;Arial&quot;, &quot;Helvetica&quot;, sans-serif;">Настройка блика. Тут я думаю все и так понятно, позиция дает нам выбор, с какого края он будет высвечиваться, прозрачной без комментариев.<br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62iHheyukh1zmgSYAg7G9EM3uVzeGvc3NIxKe-czrM6kdjEnDsRuYwrZtbmBMZcVhPPgt9R6r9NxOMlV7AHGDswS_vn5dfiVOHq5e1bLKcC7R37HoYs81eUrgOVW1x9Mn3wYUfgn9QoI/s1600/Fonopci2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62iHheyukh1zmgSYAg7G9EM3uVzeGvc3NIxKe-czrM6kdjEnDsRuYwrZtbmBMZcVhPPgt9R6r9NxOMlV7AHGDswS_vn5dfiVOHq5e1bLKcC7R37HoYs81eUrgOVW1x9Mn3wYUfgn9QoI/s320/Fonopci2.jpg" width="320" /></a></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Настройка изображение и текстура. Вот тут уже сложнее.<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Повторение текстуры на выбор:<br /> &nbsp; &nbsp; • заливка – закрасит весь фон повторяя изображение по вертикали и горизонтали.<br /> &nbsp; &nbsp; • горизонталь или вертикаль – повторение изображения по горизонтали или вертикали.<br /> &nbsp; &nbsp; • без заливки<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Расположение работает, если были выбраны опции – горизонталь, вертикаль или без заливки.<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Прокрутка:<br /> &nbsp; &nbsp; • фиксированная – фон фиксируется на месте.<br /> &nbsp; &nbsp; • скроллировать – фон движется вместе с продвижением страницы вверх или вниз.<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Флип – отразить изображение по вертикали или горизонтали.<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Повернуть изображение на 90 градусов вслево или вправо.<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Режим смещения – нормальный, мягкий или перекрытие.<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Прозрачность и контраст без комментариев.<br /> <br /> Настройка градиента без комментариев.<br /> <o:p></o:p></span></span><br /> </div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com0tag:blogger.com,1999:blog-8813401942215087530.post-84392747115771311132011-08-08T11:55:00.000+08:002011-09-19T12:27:00.433+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ynQupwJzU3qA0tvzOkta0EiTCb8WTVcE5s35ztugEaZpclJEhFH-x1BXcEvXlL56o_ST7L1KNlbDx3ecGy7lCo8Nl96OdS0_MH_zLPTnlJgay767KIrqoiRLJTTzobl29JHphCuqhjg/s1600/Fon.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ynQupwJzU3qA0tvzOkta0EiTCb8WTVcE5s35ztugEaZpclJEhFH-x1BXcEvXlL56o_ST7L1KNlbDx3ecGy7lCo8Nl96OdS0_MH_zLPTnlJgay767KIrqoiRLJTTzobl29JHphCuqhjg/s320/Fon.jpg" width="320" /></a></div><br /> <div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span style="color: black;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «предложить фон» в автоматическом режиме будут подбирать фон для вашего шаблона.<o:p></o:p></span></span></div><div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span style="color: black;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «выбор фонового изображения» в выпадающем списке вам будут предложен набор фоновый изображений на выбор, это самые популярные изображения на усмотрения создателей программы.<o:p></o:p></span></span></div><div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span style="color: black;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «блик» в выпадающем списке вам будут предложен набор бликов для фона, там же в низу вы можете загрузить свой блик и настроить его как вам нужно. <o:p></o:p></span></span></div><div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span style="color: black;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «изображение или текстура» тоже самое что и выбор фонового изображения, только с у четом того что здесь собраны все текстуры и изображения, так же вы можете вставить свое изображение или текстуру и настроить его.<o:p></o:p></span></span></div><div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span style="color: black;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «градиент» настройка градиентного изображения вашего фона, так же его можно настроить и вручную. <o:p></o:p></span></span></div><div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span style="color: black;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Все настройки мы рассмотрим в следующем уроки.</span><span class="Apple-style-span" style="font-family: Arial; font-size: 15pt;"><o:p></o:p></span></span></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com0tag:blogger.com,1999:blog-8813401942215087530.post-87411035386280387812011-08-05T10:08:00.000+08:002011-09-19T12:27:00.434+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJzNnCK0OgqGLVMHqUZne9thn0lXUhffcdwDZSzdYb05meZjrlCjfqsTu3bqG1HWPzhE_Hztv3nIIKqW9g-lTzP6680qe9k6gGa6fUrrh4KWMAPr8qU7BVNICFnwaU6qj152v718XhiZY/s1600/Maket.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJzNnCK0OgqGLVMHqUZne9thn0lXUhffcdwDZSzdYb05meZjrlCjfqsTu3bqG1HWPzhE_Hztv3nIIKqW9g-lTzP6680qe9k6gGa6fUrrh4KWMAPr8qU7BVNICFnwaU6qj152v718XhiZY/s320/Maket.jpg" width="320" /></a></div><br /> <div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;">Кнопка «предложить макет» в автоматическом режиме будут подбираться макеты для вашего шаблона.</span><span style="color: black;"><o:p></o:p></span></span></div><div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span style="color: black;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «макет страницы» в выпадающем списке вам будут предложены макеты страницы на ваше усмотрение.<o:p></o:p></span></span></div><div class="MsoNormal" style="line-height: 20.0pt; text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;">Кнопка «макет страницы» выбор расположения колонок, с какой стороны они будут располагаться.</span><span style="color: black;"><o:p></o:p></span></span></div><div class="MsoNormal" style="text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Далее идут кнопки расположения поиска, архива и обо мне, то же самое, на ваш выбор. Экспериментируйте и у вас получится то, что вы хотели.</span><span class="Apple-style-span" style="font-family: Arial; font-size: medium;"><o:p></o:p></span></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com0tag:blogger.com,1999:blog-8813401942215087530.post-37105783597501290512011-08-04T10:06:00.000+08:002011-09-19T12:27:00.434+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjvbFP4t-UYpk9WrhymKmIuXQ7KJfVtCvPUTkjOxU7f0n406QU6Wo9xpZ8P_S8KnbcJwfOXptpxM7ucMbtTVZMPZhmI3H2ofwbmrrOToHQzVjDAzmcRSW_BkNiZ-O-67SlsW4nX-PlJzQ/s1600/color.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjvbFP4t-UYpk9WrhymKmIuXQ7KJfVtCvPUTkjOxU7f0n406QU6Wo9xpZ8P_S8KnbcJwfOXptpxM7ucMbtTVZMPZhmI3H2ofwbmrrOToHQzVjDAzmcRSW_BkNiZ-O-67SlsW4nX-PlJzQ/s400/color.jpg" width="400" /></a></div><br /> <div class="MsoNormal" style="text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «предложить цвета» в автоматическом режиме будут подбираться цветовые схемы для вашего шаблона. <o:p></o:p></span></div><div class="MsoNormal" style="text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «цветовые схемы» в выпадающем списке вам будут предложены цветовые схемы на выбор, все схемы там подобраны идеально для человеческого восприятия. Единственное их можно подкорректировать по яркости кнопка «коррекция».<o:p></o:p></span></div><div class="MsoNormal" style="text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «предложить шрифты» в автоматическом режиме будут подбираться шрифты для вашего шаблона.<o:p></o:p></span></div><div class="MsoNormal" style="text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «набор шрифтов» в выпадающем списке вам будут предложены наборы шрифтов на выбор, мое мнение надо выбирать классический набор шрифтов.<o:p></o:p></span></div><div class="MsoNormal" style="text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «типографика» как будут отображаться шрифты.<o:p></o:p></span></div><div class="MsoNormal" style="text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Кнопка «размер шрифтов» и так все понятно.<o:p></o:p></span></div><div class="MsoNormal" style="text-indent: 42.55pt;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Экспериментируйте со схемами с шрифтами, подберите для себя идеальный вариант, я параллельно с вами тоже делаю себе шаблон в конце посмотрим что у кого получилось.&nbsp;</span><span class="Apple-style-span" style="font-family: Arial; font-size: medium;"><o:p></o:p></span></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com0tag:blogger.com,1999:blog-8813401942215087530.post-8764719550328010872011-08-02T11:34:00.001+08:002011-09-19T12:09:06.368+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div class="MsoNormal" style="text-indent: 42.55pt;"><span class="apple-style-span"><span style="color: black; font-family: Arial;"></span></span><br /> <span class="apple-style-span"><span style="color: black; font-family: Arial;">Ну что, приступим к первым шагам создания нашего шаблона. Для этого нам понадобиться программа Artisteer <a href="http://www.artisteer.com/">www.artisteer.com</a>.</span></span><br /> <span class="apple-style-span"><span style="color: black; font-family: Arial;">Запускаем программу и выбираем для какой СMS мы будем создавать шаблон:<br /> </span></span><br /> <div class="separator" style="clear: both; text-align: center;"><span class="apple-style-span"><span style="color: black; font-family: Arial;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTAQm3_TngkV4KwuIMuOUIHIeDgtkSjlz6Lu2u7WQDKhCS8qVEHzFl4JKUtdUGIr3fL83NMGRD1_gD7tuDDxYdZz5Nb_4xF013yjtYE18epk5qdGPfVT_Pul-hoAfJA5voxJ1tSsbF58/s1600/Untitled-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTAQm3_TngkV4KwuIMuOUIHIeDgtkSjlz6Lu2u7WQDKhCS8qVEHzFl4JKUtdUGIr3fL83NMGRD1_gD7tuDDxYdZz5Nb_4xF013yjtYE18epk5qdGPfVT_Pul-hoAfJA5voxJ1tSsbF58/s320/Untitled-2.jpg" width="320" /></a></span></span></div><span class="apple-style-span"><span style="color: black; font-family: Arial;">Выбор у нас очевиден т.к. мы находимся на Blogger мы его и выбираем.</span></span><br /> <span class="apple-style-span"><span style="color: black; font-family: Arial;">У нас загрузился демонстрационный шаблон. В верхнем меню, оно очень похоже на меню MS Office, мы видим вкладки: Идеи, Цвета и шрифты, Макет, Фон, Лист, Верхний колонтитул, Меню, Статьи, Блоки, Кнопки и Нижний колонтитул.</span></span><br /> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoTLXBrEf4ruBbLueS0mQhuqA1miSEYBslNJmSRQpgdTC8r413jhA6spr0PdmJJTL58svi0zq098PBWrJbiGqqANf0EMIxUY82oABbvPXG8l-F01MgXSWQr0N4BShB2Fx8831cTjR_Y8/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="49" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoTLXBrEf4ruBbLueS0mQhuqA1miSEYBslNJmSRQpgdTC8r413jhA6spr0PdmJJTL58svi0zq098PBWrJbiGqqANf0EMIxUY82oABbvPXG8l-F01MgXSWQr0N4BShB2Fx8831cTjR_Y8/s320/2.jpg" width="320" /></a></div>Как вы понимаете это и есть вся настройка нашего шаблона.<br /> Но все по порядку, вкладка Идеи, в этой вкладке программа вам автоматически будет предлагать варианты всех вкладок меню, поэкспериментируйте. В принципе вас может устроить тот вариант, который вам предложит и автомат, но мы здесь, что бы своими руками создать наш шаблон. <br /> <br /> <br /> <br /> <br /> <br /> </div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com1tag:blogger.com,1999:blog-8813401942215087530.post-28762422126995691712011-07-28T14:41:00.000+08:002011-08-23T16:28:03.295+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div class="MsoNormal" style="text-indent: 1.0cm;">Ну что начнем создавать, творить наш первый шаблон для нашего блога.<br /> Во первых, Вы должны пердставить его визуально в своей голове, с верху вниз прокручивая каждую деталь (шапку, тело, подвал), рисуем это все на листочке например так:<br /> <div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGfojHUi_DtuAwHwTJyUBZwNvvirG4oJdFr7qcnFZ-5UoaL8xagRqexS85xGQZtHMsNXy9dDqTlY-0Ls-k_JOafjd90XPy3sVVmlVtDNXwp6YR6xwep75E2Yg82I3bsWx8-3nO2oQe5pc/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGfojHUi_DtuAwHwTJyUBZwNvvirG4oJdFr7qcnFZ-5UoaL8xagRqexS85xGQZtHMsNXy9dDqTlY-0Ls-k_JOafjd90XPy3sVVmlVtDNXwp6YR6xwep75E2Yg82I3bsWx8-3nO2oQe5pc/s1600/1.jpg" /></a></div>Затем надо определиться с какой стороны у нас будет колонка меню и различные другие разделы:<br /> <div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB5o2EqKOgQdUUNZmSBbV_ZCF7FqT-fKKjG829SeUtnGaXDnwDFWL_BglACje2aE5RACjDBVkHByOjdy6LW8iPbrgfpVOiP1eyPz3vABDkV-YRj4jACnmjxM21gdKtn9X0r1ESNH1X1P4/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB5o2EqKOgQdUUNZmSBbV_ZCF7FqT-fKKjG829SeUtnGaXDnwDFWL_BglACje2aE5RACjDBVkHByOjdy6LW8iPbrgfpVOiP1eyPz3vABDkV-YRj4jACnmjxM21gdKtn9X0r1ESNH1X1P4/s1600/2.jpg" /></a></div>После схематических набросков вы можете уже его разрисовать, но это все равно черновой набросок и он чисто для вас. Постарайтесь затем подобрать картинки фона сайта, шапки, различные иконки, все это можно найти в интернете. Потому что версткой шаблонов в фотошопе мы заниматься не будем, это очень длинная и отдельная тема, ей можно будем заняться потом, в более глубоком изучение верстки сайтов. Наша цель быстро и максимально профессионально создать шаблон для Blogger, WordPress , Joomla, Drupal.</div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com1tag:blogger.com,1999:blog-8813401942215087530.post-12063456479817177422011-07-21T11:46:00.000+08:002011-08-23T16:27:48.251+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBeF2y1nDaq6KLcRUCEQo0hdjYEgE7hDhJrCOrk-2weu2typumt8wx1vstHiYNgkMoVFpm93cT0EXoKtctUNDK8jkYzeT_iK2bxshZngMtLOBHAfk-GFJQ3C11b41V3fbdw18hksdE8yk/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBeF2y1nDaq6KLcRUCEQo0hdjYEgE7hDhJrCOrk-2weu2typumt8wx1vstHiYNgkMoVFpm93cT0EXoKtctUNDK8jkYzeT_iK2bxshZngMtLOBHAfk-GFJQ3C11b41V3fbdw18hksdE8yk/s1600/1.jpg" /></a></div><br /> <div class="MsoNormal" style="text-indent: 1.0cm;"><span class="apple-style-span"><span style="color: black;">Ну что начнем создавать, творить наш первый шаблон для нашего блога.</span></span><span class="apple-style-span"><span lang="EN-US" style="color: black;"><o:p></o:p></span></span></div><span class="apple-style-span"><span style="color: black; font-family: 'Times New Roman';">Во первых, Вы должны пердставить его визуально в своей голове, с верху вниз прокручивая каждую деталь (шапку, тело, подвал), рисуем это все на листочке например так:&nbsp;</span></span></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com0tag:blogger.com,1999:blog-8813401942215087530.post-19525380832083036312011-07-17T15:00:00.000+08:002011-08-23T16:27:25.599+08:00<div dir="ltr" style="text-align: left;" trbidi="on"><br /> <div class="MsoNormal" style="text-indent: 42.55pt;"><span style="line-height: 115%;">У Вас есть личный блог, страничка, какой-то веб ресурс, он доставляет вам радость, Вы ведете его первый, второй …. пятый месяц, год , два и Ваше впечатление о нем начинает меняться. Вы видите &nbsp;блоги других людей, яркие дизайны,&nbsp; идущие в ногу со временем, но Ваш устарел, не современен, скучен. Вы решаете поменять дизайн, обновить свой блог, НО КАК? Ведь надо уметь рисовать, программировать и так далее, вот это Вас и загоняет в тупик. Но я спешу Вас успокоить, в этом нет ничего сложного. Современное программное обеспечение поможет сделать дизайн и без знаний языков программирования. &nbsp;&nbsp;<o:p></o:p></span></div><div class="MsoNormal" style="text-indent: 42.55pt;"><span style="line-height: 115%;">Далее шаг за шагом мы с Вами начнем разрабатывать наш первый шаблон, тот о котором Вы мечтали.<span class="Apple-style-span" style="font-size: medium;"><o:p></o:p></span></span></div></div>Павелhttp://www.blogger.com/profile/04060275897099491582noreply@blogger.com1