Как дизайнеры, мы должны создать интуитивный пользовательский опыт, решать задачи проектирования и обеспечивает красивый и функциональный пользовательский интерфейс.
В отличие от полиграфического дизайна, мы don’ т позволить себе роскошь проектирования в статической области, а, скорее, наш холст постоянно меняется по своему содержанию, браузер ширина, длина страницы и многое другое.Мы должны быть в состоянии кодировать до некоторой степени и быть в состоянии построить конструкцию вокруг структуру кода.Тем не менее, с этими осложнениями приходит возможность для уникальных функциональных возможностей, интерактивные эффекты и лучшую пользователь experience.
В этой статье we’ будем смотреть на пять полезных кодирования решений, которые we’ наткнуться на нас в последнее время.Все эти решения повышают website’ дизайном, а не только код.Эти решения влияют на пользовательский интерфейс и user’ взаимодействие с с дизайном, и они могут сделать для более удобной и интерактивной website.
1.Гистограмма эффект для нескольких Items
Этот эффект (на фото ниже) может быть отличным способом добавить шарма к веб-странице, и сделать его более удобным для пользователей.Его функциональность выходит за рамки просто быть прохладно трюк.Организуя любой набор элементов на странице — например, теги, категории, комментарии, количество продукта — дизайнер может улучшить взаимодействие с пользователем, предоставить полезные подсказки содержание и улучшение юзабилити.Увидев количество элементов, таких как теги и видов продукции, посетитель может быстро получить представление о том, что сайт в основном состоит из.Это отличный способ сделать быструю связь с целевой visitors.
Для комментария считает, посетители могут быстро увидеть, где обсуждения находятся.Основные моменты на весьма прокомментировал сообщения могут укрепить пользователь-пользователь interaction.
Фото ниже приведены два примера этой конструкции.Левая организует теги, а второй имеет рейтинг самых комментируемых постов на блоге.Обязательно посетите веб-сайты и увидеть полную функциональность и CSS effects.
Слева, Dribbble (количество тегов).Право, Engadget, (самых комментируемых сообщений) .
Как это делается
Воссоздание это решение действительно очень легко.Мы должны сделать три вещи:
- Выложить полный список возможностей,
- Создать эффект в виде обычного (X) HTML и CSS,
- Потяните в подсчет динамически и положите их в наш статический version.
Главные функции на простые, конкретные шаги дают начало решения.Теперь у нас есть направление follow.
Список Bar Graph’ S Features
Чтобы начать работу с первого шага, let’ S выложить именно то, что эта конструкция делает.По изложением шагов в письменной форме, мы можем разобраться в кодированииterms.
- Динамическое тянуть в ряде кол-во (теги, комментарии, категории фото и т.д.);
- Определить элементы с высоким кол-во (возможно 10 самых прокомментировал категорий, в отличие от всех из них);
- Создать турнике соответствующего счета (или вертикальная черта для другой вид);
- Организация баров в порядке quantity.
Воссоздание Design (Static)
Сейчас, let’ S создать дизайн, только без любых динамических данных и автоматизации.We’ оставлю потянув из числа количество из базы данных или другого источника и составляют наши собственные номера на данный момент.Мы также won’ T создать способ определения высоких результатов или размещения их в порядке убывания, вместо этого, we’ сделаем наши собственные номера, вручную организовывать их и использовать только 10 в настоящее время.После этого, we’ будете повторить это в простом (X) HTML и CSS и делать все, что динамические stuff.
(X) HTML:
<div class="block"> <a href="#" style="width: 100%">Web Interface Design (27)</a> <a href="#" style="width: 92.59%">Photoshop Tutorials (25)</a> <a href="#" style="width: 74.07%">CSS Tricks (20)</a> <a href="#" style="width: 66.66%">Showcases & Inspiration (18)</a> <a href="#" style="width: 51.85%">WordPress (14)</a> <a href="#" style="width: 48.15%">JavaScript (13)</a> <a href="#" style="width: 37.04%">Free Resources (10)</a> <a href="#" style="width: 29.63%">Reviews (8)</a> <a href="#" style="width: 29.63%">Interviews (8)</a> <a href="#" style="width: 25.93%">Typography (7)</a> </div>
CSS:
html, body {
background: #eee;
font: normal 13px/1.5em Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
.block {
width: 400px;
margin: 100px auto;
}
a {
display: block;
padding: 5px;
margin-bottom: 2px;
background-color: #666;
color: #fff;
text-decoration: none;
}
a:hover {
background: #9764a0;
}
Приведенный выше код будет создавать этот статического макета:
Обратите внимание, что we’ ве добавил несколько основных стилей, просто экспериментировать с тем, как парит могли бы работать.По большей части, однако, эта версия очень проста, так что вы можете настроить его, как вы want.
(X) HTML и CSS должны быть понятны, но let’ пойдем по тому, как мы создали баров.В нашей таблице стилей, мы создали основные стили и превратили каждое звено в бар помощью display: block собственность.В этом простом примере, это только ссылки на страницы, но для практического использования, некоторые из этих ссылки бара должна быть дана class, чтобы отличить их от других ссылок на page.Кроме того, можно использовать :nth-child() селектора CSS3 без определения новой classes.
Мы тогда пошли в (X) HTML и установить каждому bar’ с шириной индивидуально с style атрибут.В (X) HTML коде выше мы указали каждый шириной в процентах.Предположим сначала, что высшей ценностью “, Web Interface Design (27)”, составляет 100%.Оттуда, мы вычисляем процент по отношению к другим that.
пример: “Уроки Photoshop (25)”25 × 100 = 25002500 ÷ 27 (на 100%) = 92,59%<a href="#" style="width: 92.59%">Photoshop Tutorials (25)</a>
Воссоздание Design (динамически)
Мы уже выяснили математике и статического кода, и мы просто должны поставить все это вместе, потянув кода из базы данных и автоматически организацию и создание bars.
В этом примере we’ работаем с числом сообщений в каждой из наших категорий WordPress, но та же логика применима и для других целей и других языков программирования.Приведенный ниже код может показаться длинным, но don’ волнуйтесь: it’ S основном комментариев, которая объясняет, как динамически рассчитать проценты и вытащить содержимое в статическом(X) HTML/CSS.
<!-- In our example, we get a count of categories in WordPress.
Let's first find the category with the most posts.
-->
<?php
$highest = 0; // Initialize our “highest count” variable
foreach((get_the_category()) as $category) { // for each category
$cat_count = $category->category_count;
// If this category’s count is higher than what we have so far
// for the highest number…
if($cat_count > $highest){
// then re-declare our highest value according to this
// category’s count
$highest = $cat_count;
}
}
?>
<!-- Below we go through an array of the categories, and for each one
get its name and then its count. We've saved this data in
the $cat_name and $cat_count variables, respectively.
(Because we will get a new category each time the loop runs,
we'll have to process all of our other (X)HTML/CSS code within the loop
for each turn.)
-->
<div class="block">
<?foreach((get_categories(‘orderby=count&order=desc’)) as $category) {
$cat_name = $category->cat_name;
$cat_count = $category->category_count;
// Let's calculate this category’s width
// (our “100%” is our highest category count number, $highest)
$width = ($cat_count * 100) / $highest;
// Finally, echo out our link HTML, including our variables
// to dynamically bring in the content for the width,
// category name and count.
echo '<a href="#" style="width: .'$width'.%">
.'$cat_name'. (.'$cat_count'.)</a>';
}
?>
</div>
Демо и Скачать Files
Вы можете см. demo __ и 6 | скачать files нашего servers.
2.Анимация на статью Hover
Теперь, это очень хороший эстетический эффект, и это оригинал, тоже.Посетите CSS Tricks или проверить на изображении ниже.Статьи есть простое чистым взглядом, и только звездочки между ними.Когда один парит над должности, мы видим его мета-данные: комментарии, “Читайте на” ссылку и дату stamp.
Что делает этот эффект особенно динамично в том, что она имеет эффект при наведении на содержание, а не только изображения.It’ SA крутой трюк, и это имеет некоторое практическое применение, тоже.По скрывается содержание, пока it’ с необходимой, дизайнер делает больший акцент на содержание и важные особенности.Веб-сайт может иметь обращение минимализма, но все еще предлагают богатый functionality.
Это дизайнерское решение также делает важное содержание выделяются.По состоянию на CSS хитрости, когда пользователи наведении курсора на посту, действие происходит, опираясь user’ глаза на ссылки, которые помогут им взаимодействовать с blog.
При наведении курсора на главной странице сообщение о CSS-Tricks.com, мета контент revealed.
Как это делается
Этот эффект может выглядеть более сложная, чем простое изображение опрокидывания, но тот же принцип применяется.С некоторыми CSS и немного JavaScript основные, мы можем сделать то же самое thing.
Let’ Первый более внимательно на то, что этот эффект делает.Тогда we’ сможете более легко придумать solution.
- Когда any часть поста завис над, эффект triggered.
- Две части содержания выявлены, слева и справа от исходного изображения: дата и раздел комментариев, а “Читайте по теме” section.
- О перемещении мыши, сообщение возвращается в normal.
Видя, как это похоже на изображение рулона за кадром теперь легче.Для изображения рулона за кадром, мы используем JavaScript, чтобы изменить код для onMouseOver и onMouseOut.We’ сделаю нечто подобное здесь, но использовать div с вместо изображения.Также с изображением рулона за кадром, we’ будете обычно заменяют одно изображение с другим.Наши действия здесь, а не будет просто показывать и скрывать content.
(X) HTML
Нам нужно, чтобы обернуть div элементов по всему посту, и мы можем управлять, что в один шаг.Мы можем применить наличие события с ним: MouseOver и MouseOut.Для каждого, мы просто установили content’ S display собственность (определяется CSS id) до none или inline.Вместо того чтобы использовать инлайн-атрибуты, it’ лучше отделить JavaScript и CSS, например,использованиеjQuery.
<div class="post">
<h2>A Blog Post Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim est ultrices neque fermentum convallis. Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus. Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt lorem nec nisl egestas gravida vel et massa. Donec arcu nisl, venenatis ac suscipit dignissim, egestas auctor lectus. Quisque vulputate fermentum felis sed tristique. Ut enim felis, faucibus ac fermentum rutrum, posuere id nulla. Duis lectus dolor, eleifend in tincidunt eu, sagittis sed sapien. Duis id purus id magna facilisis luctus. Mauris sodales arcu ut arcu laoreet id pulvinar ligula hendrerit.</p>
<!-- This is what appears when not hovering -->
<p id="postimg" class="center">
<img src="triangle.png" alt="Triangle" />
</p>
<!-- This is what appears on hover; hidden otherwise. -->
<p id="hiddencontent" class="center">
Posted on 9/15/10 | <a href="#">23 Comments</a>
<img src="triangle.png" alt="Triangle" />
<a href="#">Continue Reading…</a>
</p>
</div>
<script type="text/javascript">
$('.post').mouseover(function() {
$('#hiddencontent').css('display', 'inline');
$('#postimg').css('display', 'none');
});
$('.post').mouseout(function() {
$('#hiddencontent').css('display','none');
$('#postimg').css('display', 'block');
});
</script>
CSS
Здесь we’ ве только сделать некоторые основные стили: наш центр div, стиль h2 теги, играют с шрифтами и т.д. вещь, чтобы отметить здесь #hiddencontent div.Потому что мы должны скрыть наш контент на странице загрузки, мы должны установить его в CSS до display: none.
html, body {
background: #eee;
font: normal 14px/1.6em Arial, Helvetica, sans-serif;
}
#hiddencontent {
display: none;
}
h2 {
margin-bottom: .5em;
}
.center {
width: 500px;
text-align: center;
}
Ниже приведен наш макет дизайна (вершины до наведения, а дно после).It’ просто некоторые основные CSS и JavaScript, а код достаточно легко обойти при реализации в WordPress или elsewhere.
Демо и Скачать Files
Вы можете см. demo и скачать files нашего servers.
3.Цвет для каждого Category
Эта техника дает каждой категории на веб-сайт другим цветом (см. Emprnt для полной реализации).Это отличный способ, чтобы цвет-код дизайна, чтобы дать ему лучшую организацию и упрощения навигации.Сейчас, let’ S выяснить, как повторить этот эффект с WordPress и категорий, как на Emprnt.
То же решение может быть применен к другим пунктам: роль (авторы имеют один цвет, редакторы другое); авторы (назначить цвета на основе сообщений, метки и т.д.); выделение популярных сообщений (выделение сообщений, которые имеют от 150 до 200 просмотровс одним цветом, а затем от 75 до 150 с другой, и так далее).Опыт будет варьироваться в зависимости от вашего приложения.Например, цветовое кодирование категорий, вы помочь навигации и юзабилити.По цветового кодирования популярных сообщений, Вы помочь пользователям увидеть, какие сообщения становятся самыми attention.
Emprnt использует CSS и немного кода для создания разного цвета для каждой категории, как пост published.
Как это делается
Чтобы осуществить это, нам необходимо выбрать цвет для каждой категории, идентифицировать каждый category’ S id, а затем сопоставить каждый id с классом CSS, который определяет цвет и любые другие основные стили.Во-первых, let’ S заботиться о статическом (X) HTML и CSS:
Воссоздание Effect (Static)
(X) HTML:
<div class="block">
<div class="post cat_1">
<h2>A Blog Post Title</h2>
<small>Category 1</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque dignissim est ultrices neque fermentum convallis.
Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
venenatis ac suscipit dignissim, egestas auctor lectus.</p>
</div><div class="post cat_2">
<h2>A Blog Post Title</h2>
<small>Category 2</small>
...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров