Полезные приемы по улучшению юзабилити (HTML / UI)

Discussion in 'PHP' started by |qbz|, 19 Mar 2012.

  1. |qbz|

    |qbz| Banned

    Joined:
    25 Dec 2009
    Messages:
    528
    Likes Received:
    170
    Reputations:
    65
    Предлагаю закрепить тему для добавки интересных и, что самое главное, правильных решений составления общей визуальной части / структуры сайта. Улучшение, оптимизация и управление вниманием пользователя.
     
    #1 |qbz|, 19 Mar 2012
    Last edited: 19 Mar 2012
  2. |qbz|

    |qbz| Banned

    Joined:
    25 Dec 2009
    Messages:
    528
    Likes Received:
    170
    Reputations:
    65
    Вот позавчера писал сайтец, нужно было сделать меню из 6 пунктов, которые размещенны вертикально:

    Придумал такой эффект: рисуем красивых 6 спрайтов для 6 кнопочек, причем так, что на одном спрайте размещено два варианта кнопки - один это нажатая (например, цветом другим; с нулевого по сотый пиксель по оси X), и второй - в обычном состоянии (с сотого по 200 пиксель). Получаем что-то типа:

    О компанииО компании

    Только в виде картинки. Теперь делаем для каждой кнопки класс CSS для показа только "неактивированной" части (100 - 200px):

    HTML:
    .mybutton
    {
    	width: 100px;
    	height: 30px;
    	background-image: url(./menu_sprite_1.png);
    	background-repeat: no-repeat;
    	background-position: -100px 0;
    }
    И допишем простой скрипт на jQuery который анимированно смещает фон в активированную часть спрайта + создает пространство воркуг нажатой кнопки:

    HTML:
    function moveButton(buttonId)
    {
    	$('#' + buttonId).animate(
    		{
    			marginTop: '90px',
    			marginBottom: '90px'
    		},
    		300,
    		function()
    		{
    			$('#' + buttonId).animate(
    				{
    					marginTop: '45px',
    					marginBottom: '45px'
    				},
    				300
    			);
    		}
    	);
    	
    	$('#' + buttonId).animate({'backgroundPosition': '0px'}, 600);
    }
     
  3. AnGeI

    AnGeI Elder - Старейшина

    Joined:
    8 Dec 2008
    Messages:
    457
    Likes Received:
    80
    Reputations:
    16
    Интересно, поддерживаю по-поводу закрепления темы.
     
  4. |qbz|

    |qbz| Banned

    Joined:
    25 Dec 2009
    Messages:
    528
    Likes Received:
    170
    Reputations:
    65
    Совет номер два: добавляйте тени для блоков, таблиц и прочих слоев, тогда веб несмотрится простым тетрисом из кубиков и квадратиков, а чувствуется обьем. Тень создается просто - открываем картинку / создаем на 100 пикселей больше по ширине и высоте чем сам блок. Например, блок у нас будет синего цвета (на нем, например, будут комментарии). Теперь размещаем синий прямоугольник по центру холста так, чтобы был отступ со всех сторон по 50 пикселей. Теперь копируем слой в графическом редакторе и помещаем его ПОД этот созданный прямоугольник. Применяем к созданному слою инверцию цветов (ну изменение с черного на белый, грубо говоря). Добавляем эффект размытости. И что же мы видим: у нас появились тени (можно обрезать именно части тени, а можно использовать как фон созданное изображение целиком).

    Шаг 1: создаем прямоугольник, которму хотим добавить тень:

    [​IMG]

    Шаг 2: добавим слой под него, чтобы можно было лучше разглядеть потом тень:

    [​IMG]

    Шаг 3: скопируем слой с прямоугольником, поместим его под главный слой с прямоугольником и будем работать именно с копией:

    [​IMG]

    Шаг 4: инвертируем цвета копии:

    [​IMG]

    Шаг 5: для лучше видимости желтой тени я изменил фон на черный:

    [​IMG]

    Шаг 6: добавляем размытось слою с инвертированной копией прямоугольника => получаем размытость краев:

    [​IMG]

    Шаг 7: можно также перевести полученный желтый прямоугольник в чернобелый вид, и размывать его в серый оттенок, который видно даже на белом фоне:

    [​IMG]
     
  5. Isis

    Isis Мафиозя //хекед :D

    Joined:
    20 Nov 2006
    Messages:
    3,484
    Likes Received:
    1,206
    Reputations:
    252
    Вы серьезно?
     
  6. |qbz|

    |qbz| Banned

    Joined:
    25 Dec 2009
    Messages:
    528
    Likes Received:
    170
    Reputations:
    65
    Незабывайте про анкоры! Гораздо удобнее ориентироваться на странице (особенно, когда много контента), когда нужная облась выделена анкором и на него можно сделать ссылку:

    http://site.com/gallery.php#image_152
     
  7. |qbz|

    |qbz| Banned

    Joined:
    25 Dec 2009
    Messages:
    528
    Likes Received:
    170
    Reputations:
    65
    Что-то смущает?
     
  8. |qbz|

    |qbz| Banned

    Joined:
    25 Dec 2009
    Messages:
    528
    Likes Received:
    170
    Reputations:
    65
    Футер - отдельная тема, но, на мой взгляд, это идеальное место показать креативность веба, если она уместна. Замечал также, что неплохо смотрится в футере встроенная лента твиттера или какие то последние новости RSS.
     
  9. |qbz|

    |qbz| Banned

    Joined:
    25 Dec 2009
    Messages:
    528
    Likes Received:
    170
    Reputations:
    65
    Фиксированная реклама.

    Если Ваш сайт информационный и человек задерживается на странице какое-то время, причем высота страницы не помещается в высоту экрана, то место для рекламы идеально справа или слева в виде продолговатого баннера, который плавает за страницей благодаря свойству CSS "position: fixed" у, например, контейнера div. Где бы ни был пользователь на странице - реклама будет ехать за ним, только нужно встраивать рекламный div аккуратно, чтобы контент-часть и рекламный контейнер не заходили друг на друга.
     
  10. Isis

    Isis Мафиозя //хекед :D

    Joined:
    20 Nov 2006
    Messages:
    3,484
    Likes Received:
    1,206
    Reputations:
    252
    Смотри какую тему нашел http://forum.antichat.ru/threadnav67440-2-40.html
    И даже закреплена.
     
  11. |qbz|

    |qbz| Banned

    Joined:
    25 Dec 2009
    Messages:
    528
    Likes Received:
    170
    Reputations:
    65
    Это общие статьи, тем более в перемешку. Я же хотел сделать акцент именно на правильном "вкусе", когда пишешь веб. Я не говорю, что мой вкус идеален, но то, что первое пришло на ум - написал. Просто иногда различные "правила хорошего тона" забываются, а некоторые придумываешь сам, видишь, что смотрится офигенно, но нигде раньше такого не видел - почему бы не поделиться.

    А вообще того треда не видел, если данный топик лишний - ну чтож, удаляйте.
     
  12. Ali_baba_

    Ali_baba_ Member

    Joined:
    10 Mar 2011
    Messages:
    109
    Likes Received:
    10
    Reputations:
    -5
    Насчет закрепления поддерживаю, тема интересна!
     
  13. winter_silence

    winter_silence New Member

    Joined:
    22 Nov 2008
    Messages:
    21
    Likes Received:
    4
    Reputations:
    0
    Спасибо за прием на jQuery, возьму на вооружение :)

    А по поводу плавающего баннера в div'е - не будет ли это навязчивой рекламой, по-моему такой может только снизить визуальное восприятие сайта.
     
Loading...
Similar Threads - Полезные приемы улучшению
  1. BigPirat
    Replies:
    1
    Views:
    1,377
  2. Sharky
    Replies:
    24
    Views:
    28,603
  3. freddi
    Replies:
    2
    Views:
    2,018
  4. SMiX
    Replies:
    1,171
    Views:
    562,084