Юзабилити: как сделать сайт удобным
Пример компоновки
Вариантов компоновки блоков великое множество, что позволяет создавать уникальные и запоминающиеся Web-сайты. Прежде всего следует решить, к какой цели вы стремитесь: к выражению собственных творческих способностей или к популярному и удобному информационному ресурсу. Рассмотрим в качестве реального примера сайт знаменитой компании IBM (рис. 5.25).
Данная страница сделана при помощи жесткой верстки и оптимизирована под разрешение 800x600. Разработчики выбрали жесткий дизайн для главной страницы, очевидно, потому, что содержимому просто некуда растягиваться — вся композиция разрушится. Добавить же еще один блок с каким бы то ни было содержимым нельзя — при таком разрешении он «исчезнет».
|
Resources for: ■Hoe*/home office • Smal & mecium business • Large enterprise • Qovempnert •Education •Developers • BM Business Partners •Investors •Journalists |
|
Jobs at ЄМ Training Administrative support |
|
Next generation iSeries support* multiple operating systems on a sing!* .platform. Simplify/ reduce Costs. Leam more.. |
|
Physical security Improve surveillance with an I»M Digital Video system for government. |
|
Strategic sourcing Spendirig less can become * habit We can show you how. |
|
SoMnobtwinees problem*: ' ' ' • end IT service* *<1> : зеШа ttagratesofiwvo and services to - awwes* сяюиод мп*у» s t" meetlhechalaneesefyourinckJstrr, - On demand fcustnrts - HeiWedwm* freer •trtrastruetureservfces - Heedy t$>buy? •Fifxsrtdng - |
|
|
|
j Salact an industry |
|
c*tssssmajjd Chief Focu* Officer ■* How on demand is creating a new kind of CFO. |
Report sew IT *s Rx for рЬаг<тлс*Лслі mduejry Sti'uC'S magazine ЄМ brmnj best cori«rai*i citizens ■ ЄМ chte? details successes at annua! stockholders meeting ’Spintronic*' holds promise to revoMiortze ітас. го rtectronics -* M&r* news and newsletter*
Puc. 5.25. Главная страница сайта компании IBM
Ниже изображена эта же страница, но только с точки зрения компоновочных блоков (рис. 5.26).
|
|
|
Рекламный блок Текст реклпамы. Текст реклпемы. Текст реклпамы. Текст реклпамы. |
|
Логотип ■ME] Раздел |
|
Раздел П Раздел Ц Раздал [| Раздел |
|
Рекламный блок Текст рекппамы. Текст рекппамы. Текст реклпамы. Текст реклпамы. Текст реклпамы. |
|
Фото |
|
|
|
Раздел Раздел Раздел |
|
Заголовок |
|
Раздел |
|
Заголовок раздала Текст раздела. Текст раздала. Текст раздела. Текст раздела. Текст раздела. Текст раздела. Текст раздела. Текст раздела. Текст раздела. |
|
|
|
Раздел Раздел Раздел |
|
| Выбор на списка Щ | »{ |
|
Раздел |
|
Заголовок раздала Текст реаделе. Текст раздела. Текст раздела. Текст раздела. Текст разделе. Текст раздела. Текст разделе. Текст раздела. Текст рездепа. Текст раздела. Текст раздела. Текст раздела. Текст рездела. Текст раздала. Текст раздела. Текст рездела. Теист раздала. Текст рездепа. Текст рездепа. Текст раздала. Текст раздала. Текст раздет». Тена рездела. Текст рездела. |
|
Фото Рекламный блок Текст реклпемы. . Текст реклпемы. Текст реклпемы. |
_Pwn»nj£>ewn||_P«n«|l
Рис. 5.26. А вот мы с вами разобрали IBM по полЬчкам...
1. Существуют пять смысловых уровней организации Web-сайта: внешний вид Web-сайта, уровень компоновки, уровень структуры, предметный уровень, уровень идеи.
2. Основные способы верстки: текстовая верстка, табличная верстка, верстка при помощи фреймов, флэш.
3. Верстку называют «резиновой», если размер (ширина/длина) основных элементов страницы задается в процентах.
4. Верстку называют'жесткой (фиксированной), если размер основных элементов страницы задается в абсолютных величинах.
5. По назначению элементы страницы делятся на блоки: Навигационные, информационные, сервисные, рекламные, дизайнерские.
6. К навигационным блокам относятся следующие блоки: «На главную страницу», поиска и быстрого перехода, блок гори
зонтального меню, блок вертикального меню, блок вторичной навигации, блок навигации по выборке, авторизации, «Подвал» (текстовые гиперссылки), блок навигационной строки.
7. К информационным блокам относятся блоки: содержания, текущей информации, «Раздел», изображений (галерея).
8. К сервисным блокам относятся блоки: «Выбор языка», «Пустой блок», «Версия для печати».
9. К рекламным блокам относятся блоки: «Название и слоган», «Копирайт», «Дизайнерское изображение», собственно рекламный блок.
