Обяснен жаргон на дизайна: модели на уеб дизайн
В тази статия Крис Банк от UXPin - приложението UX Design описва подробно какви са моделите на уеб дизайн и как да мислим за тях при проектирането на вашия уебсайт или уеб приложение и засяга важността на отзивчивия дизайн и сензорните екрани.
Те са обхванати по-подробно с примери от над 50 горещи уебсайта и уеб приложения в безплатната електронна книга на UXPin, Модели на уеб потребителски интерфейс 2014 .
Какви са моделите на уеб дизайн?
Най-общо казано, моделът за уеб дизайн, известен още като шаблон за потребителски интерфейс, е решение за многократна употреба на често срещан проблем, който може да срещнете всеки ден.
Това не е функция, която може да бъде включена във вашия продуктов дизайн и не е завършен дизайн, който може просто да бъде кодиран. По-скоро това е формализирана най-добра практика, ръководство или шаблон, които дизайнерите, разработчиците и продуктовите мениджъри (и всеки друг, който се докосне до продукта) могат да използват за решаване на често срещани проблеми при проектирането на уеб приложение или система.
Обикновено е агностик на езика, устройството и платформата - въпреки че може да има технологични ограничения в зависимост от начина на изпълнение на проектите. (И, разбира се, ако бъдат приложени в грешен контекст, те причиняват повече вреда, отколкото полза, но засега ще се съсредоточим върху положителните страни.)
Основни принципи
Моделите на дизайна на потребителския интерфейс могат да бъдат предизвикателни концепции за възприемане и използване. Това отчасти се дължи на липсата на литература по темата в сравнение с масивните архиви на модели на технически дизайн.
Това се дължи отчасти и на факта, че в човешката природа е да използва модели по начин, подобен на шаблоните - проследяване на контурите, без да разбира краищата; всяка крива, линия, усукване и завой във фигурите, които се рисуват.
На практика шаблоните често се използват взаимозаменяемо със специфични функции, копират се както е от една от популярните библиотеки с шаблони за дизайн и каркасни библиотеки - вижте пълния списък в UXPin's Ръководство за Wireframing .
Разбирането на моделите е от основно значение за добрия дизайн и развитие на продукта. Ще разгледаме пример след малко и съм разгледал подробни модели от Pinterest, OKCupid, Spotify, Amazon, AirBnB, Dropbox, Quora, Eventbrite, Asana, RelateIQ, Flipboard и много други в безплатната електронна книга на UXPin, Модели на уеб потребителски интерфейс 2014 .
Бих препоръчал също така да разгледаме допълнителни модели и елементи на UI дизайн безплатно в UXPin Модели за дизайн на потребителски интерфейс , Тенденции в уеб дизайна , Тенденции в мобилния дизайн , и Ръководството за Wireframing e-books.
Бърз пример
По-долу съм деконструирал контролите на Pinterest и Facebook за задържане, за да ви дам пример от реалния живот как да мислите ежедневно за модели на мобилен дизайн.
- Проблемът : Потребителят иска да има достъп до контроли, без да претрупва изгледа на съдържанието.
- Решението : Скриване на действия и бутони за управление, докато потребителят не задържи курсора на мишката върху елемента, за който се отнасят.
Винаги е добре да дадете на потребителя пълен контрол върху съдържанието, но когато интерфейсът има много неща, по които може да се действа, всеки бутон краде фокуса далеч от съдържанието.
Този шаблон на потребителския интерфейс скрива тези контекстуални контроли, докато потребителят не задържи курсора на мишката над съдържанието, като ги държи далеч, докато е необходимо. Pinterest поставя целия фокус върху снимките, така че бутоните „сърце“, „изпращане“ и „закрепване“ са невидими, докато задържите курсора на мишката върху снимката.
Тъй като бутоните се появяват върху самото изображение, няма объркване по кой елемент ще действат.
Какво да разгледаме
Изненадващо е да видите толкова много библиотеки с красиви дизайнерски модели, които третират модели като макети; плоски файлове напразно се опитват да предадат по-дълбоки концепции за дизайн на продукта.
Те не предлагат обяснение за проблемите, които тези модели решават и как са взети решения при изпълнението на примерите за модели. Картината може да струва хиляда думи, но по-вероятно е безполезна, ако картината е напълно неразбрана.
Ето какво трябва да помислите, когато оценявате модела на дизайна и го адаптирате към вашите собствени нужди:
- Резюме на проблема: Какъв потребителски проблем решавате? Останете съсредоточени и го формулирайте като потребителска история - само с едно изречение.
- Решение: Как другите са решили този проблем? Наред с други, няколко неща за детайлизиране включват потребителска навигация (включително преки пътища), получаване на потребителски въведения, работа с данни и интеграция с други услуги или приложения и показване на информация и съдържание (включително по подразбиране).
- Пример: Чудесно, можете ли да ми покажете? Понякога е достатъчна скрийншот или макет; друг път потребителски потоци и / или допълнителни бележки са необходими за ясно съобщаване на модела.
- Употреба: Кога трябва да се използва този модел? Наред с други, няколко неща за детайлизиране включват архитектура на продукта, оформление на интерфейса, устройство (а), език за програмиране, отсъствие или съществуване на други дизайнерски модели, тип потребител и първични случаи на употреба.
Необходими са практика и дисциплина, за да мислите за модели по този начин, ако все още не сте го правили. Отделете време да отговорите на тези въпроси, когато проектирате продукта си, защото това може да ви помогне да спестите много време за рефакторинг по пътя, когато вашите потребители и екип поискат подобни подробности.
Конвергенция
В основата на много от тези нови модели на потребителски интерфейс е появата на отзивчив дизайн и включване на сензорни екрани в традиционните настолни компютри и лаптопи.
В Модели за дизайн на потребителски интерфейс Електронна книга, говоря подробно за анимации и жестове, силно влияещи върху моделите на дизайна на мобилния потребителски интерфейс, който става все по-актуален за уеб дизайна, тъй като мобилните и уеб продължават да сближават. Но също така искам да го засегна накратко тук поради неговото значение.
Адаптивен дизайн
Днес почти всяка компания иска мобилна версия на своя уебсайт - и обратно. И въпреки че много дизайнери и разработчици посочват „отзивчивия дизайн“ като изискан синоним на „оразмеряващ се на различни устройства“, той далеч не е толкова прост. Мнозина са опитали този подход и не са успели. Smashing Magazine обобщава обща дефиниция на Отзивчив уеб дизайн :
„Отзивчивият уеб дизайн е подходът, който предполага, че дизайнът и разработката трябва да отговарят на поведението и средата на потребителя въз основа на размера на екрана, платформата и ориентацията ...“
Но не става въпрос само за регулируеми разделителни способности на екрана и автоматично променящи се изображения. Практически погледнато, за всяко устройство трябва да бъде проектиран различен продукт (не само копиран): един дизайн за BlackBerry, друг за iPhone, iPad, Android, Kindle и така нататък.
Сензорни екрани
Въпреки че iPad - в някои отношения, огромен iPhone - се смята за популяризиращ големите сензорни екрани, това беше само началото.
Той не само е запалил развитието на много други големи сензорни устройства, но и хибриди, които в крайна сметка увеличават сложността на дизайна и разработването на продукта. И докато големите и малките (мобилни) сензорни устройства са сходни по отношение на хардуера и операционната система, разнообразието от продукти във всеки продуктов клас свидетелства за разликите в случаите на употреба, за които са проектирани.
Разбира се, има много приложения за iPhone, които работят безпроблемно на iPad. Но това не променя начина, по който продуктите са проектирани по същия начин, като преоразмеряването и пренареждането на приложения между мрежата и мобилните устройства всъщност не е „Responsive Design“.
Просете, вземете назаем и крадете - когато е подходящо
Вземете тези дизайнерски модели и елементи от безплатната електронна книга на UXPin, Модели на уеб потребителски интерфейс 2014 и ги приспособете така, че да решават вашите собствени проблеми и най-важното - на вашите потребители.
Дизайнерите, разработчиците и продуктовите мениджъри от цял свят заедно допринасят за решаването на проблеми, които вероятно се опитвате да решите днес. Защо да преоткривате колелото? Учете се от техните прозрения и дори изрични решения, за да се движите по-бързо и по-умно.
Само не забравяйте, че няма универсално решение, що се отнася до дизайна на потребителския опит. Много от моделите, които разгледахме тук, работят изключително добре, когато се смесват и съчетават помежду си. И те трябва да бъдат съобразени с вашия уникален продукт, потребители и екип за оптимални резултати.
Думи: Крис Банк
Крис Банк е олово за растеж при UXPin , приложение за UX дизайн, което създава отзивчиви интерактивни каркаси и прототипи.
