UI wireframe е визуално представяне на дизайн на потребителски интерфейс (UI), който очертава основната структура и оформление на уеб или мобилно приложение. Това е макет с ниска точност или скелет на окончателния дизайн, който показва разположението на различни дизайнерски елементи, като бутони, менюта, формуляри и изображения на екрана.
UI wireframes са важни поради няколко причини:
UI wireframes се използват най-добре в ранните етапи на процеса на проектиране. Дизайнерите обикновено започват със създаването на няколко телени рамки с ниска точност, за да проучат различни опции за оформление и да повторят дизайна въз основа на обратна връзка от заинтересованите страни. След като бъде избран окончателен дизайн, се създават телени рамки или макети с по-висока точност, за да осигурят повече детайли и по-добро усещане за крайния продукт. След това тези телени рамки се използват като референция от екипа за разработка по време на фазата на внедряване.
Кабелната рамка на потребителския интерфейс обикновено включва следните елементи:
Когато проектирате оформлението на нова страница или редизайнирате съществуваща, е важно да се придържате към мрежовата система. Разделете телената си рамка на решетка и се уверете, че вашите изображения, текст и призиви за действие се вписват добре в мрежата. Това не означава да направите всеки актив с еднакъв размер, а означава да ги поддържате пропорционални един спрямо друг.
Обърнете внимание на всички разстояния, които имате между секции от текст или бутони. Сега го удвоете. Винаги е по-добре да има повече място между абзаците или изображенията, отколкото да изглеждат натъпкани един до друг. Потребителите няма да бъдат отблъснати от много празно пространство (в разумни граници), но бързо ще се почувстват претоварени и объркани от изображения, подредени едно върху друго.
Тествайте страницата си с реални потребители. Не забравяйте, че вашият екип за дизайн, технологии и разработка на продукти може да ви стигне само дотук. Трябва да слушате отзивите на реалните потребители и да наблюдавате техните действия, предприети с вашата нова схема на потребителския интерфейс. Трудно ли е за потребителите да намерят определен бутон? Направете го по-голям. Твърде голямо ли е изображението за потребители на лаптоп? Направете страницата си по-отзивчива. Тествайте страницата си и повторете съответно.
Да, всеки може да създаде UI wireframe. Въпреки това е важно да имате предвид, че телените рамки са критична част от процеса на проектиране и изискват основно разбиране на принципите и най-добрите практики за проектиране на потребителски интерфейс.
Не, телените рамки на потребителския интерфейс обикновено са с ниска точност и не включват окончателни визуални елементи на дизайна, като подробна типография, цветови схеми или елементи на брандиране. Въпреки това, те могат да включват основни визуални знаци, за да дадат обща представа за крайната посока на дизайна.
Броят на итерациите на телените рамки на потребителския интерфейс зависи от сложността на проекта и необходимото ниво на детайлност. Обикновено дизайнерите създават множество кабелни рамки с ниска точност, преди да се спрат на окончателен дизайн и след това създават телени рамки с по-висока точност или макети, за да предоставят повече подробности. Не е необичайно дизайнерите да повтарят дизайна и през целия процес на разработка.
